feat: Breadcrumb (#885)

huntabyte · Mar 11, 2024 · f391ad7 · f391ad7
1 parent 098bceb
commit f391ad7
Show file tree

Hide file tree

Showing 40 changed files with 1,269 additions and 9 deletions.
diff --git a/apps/www/__registry__/index.js b/apps/www/__registry__/index.js
@@ -102,6 +102,66 @@ export const Index = {
 				),
 			files: ["../src/lib/registry/default/example/badge-secondary.svelte"],
 		},
+		"breadcrumb-demo": {
+			name: "breadcrumb-demo",
+			type: "components:example",
+			registryDependencies: ["breadcrumb", "dropdown-menu"],
+			component: () =>
+				import("../src/lib/registry/default/example/breadcrumb-demo.svelte").then(
+					(m) => m.default
+				),
+			files: ["../src/lib/registry/default/example/breadcrumb-demo.svelte"],
+		},
+		"breadcrumb-dropdown": {
+			name: "breadcrumb-dropdown",
+			type: "components:example",
+			registryDependencies: ["breadcrumb", "dropdown-menu"],
+			component: () =>
+				import("../src/lib/registry/default/example/breadcrumb-dropdown.svelte").then(
+					(m) => m.default
+				),
+			files: ["../src/lib/registry/default/example/breadcrumb-dropdown.svelte"],
+		},
+		"breadcrumb-ellipsis": {
+			name: "breadcrumb-ellipsis",
+			type: "components:example",
+			registryDependencies: ["breadcrumb"],
+			component: () =>
+				import("../src/lib/registry/default/example/breadcrumb-ellipsis.svelte").then(
+					(m) => m.default
+				),
+			files: ["../src/lib/registry/default/example/breadcrumb-ellipsis.svelte"],
+		},
+		"breadcrumb-link": {
+			name: "breadcrumb-link",
+			type: "components:example",
+			registryDependencies: ["breadcrumb"],
+			component: () =>
+				import("../src/lib/registry/default/example/breadcrumb-link.svelte").then(
+					(m) => m.default
+				),
+			files: ["../src/lib/registry/default/example/breadcrumb-link.svelte"],
+		},
+		"breadcrumb-responsive": {
+			name: "breadcrumb-responsive",
+			type: "components:example",
+			registryDependencies: ["breadcrumb", "drawer", "dropdown-menu", "button"],
+			component: () =>
+				import("../src/lib/registry/default/example/breadcrumb-responsive.svelte").then(
+					(m) => m.default
+				),
+			files: ["../src/lib/registry/default/example/breadcrumb-responsive.svelte"],
+		},
+		"breadcrumb-separator": {
+			name: "breadcrumb-separator",
+			type: "components:example",
+			registryDependencies: ["breadcrumb"],
+			component: () =>
+				import("../src/lib/registry/default/example/breadcrumb-separator.svelte").then(
+					(m) => m.default
+				),
+			files: ["../src/lib/registry/default/example/breadcrumb-separator.svelte"],
+		},
 		"button-demo": {
 			name: "button-demo",
 			type: "components:example",
@@ -1324,6 +1384,66 @@ export const Index = {
 				),
 			files: ["../src/lib/registry/new-york/example/badge-secondary.svelte"],
 		},
+		"breadcrumb-demo": {
+			name: "breadcrumb-demo",
+			type: "components:example",
+			registryDependencies: ["breadcrumb", "dropdown-menu"],
+			component: () =>
+				import("../src/lib/registry/new-york/example/breadcrumb-demo.svelte").then(
+					(m) => m.default
+				),
+			files: ["../src/lib/registry/new-york/example/breadcrumb-demo.svelte"],
+		},
+		"breadcrumb-dropdown": {
+			name: "breadcrumb-dropdown",
+			type: "components:example",
+			registryDependencies: ["breadcrumb", "dropdown-menu"],
+			component: () =>
+				import("../src/lib/registry/new-york/example/breadcrumb-dropdown.svelte").then(
+					(m) => m.default
+				),
+			files: ["../src/lib/registry/new-york/example/breadcrumb-dropdown.svelte"],
+		},
+		"breadcrumb-ellipsis": {
+			name: "breadcrumb-ellipsis",
+			type: "components:example",
+			registryDependencies: ["breadcrumb"],
+			component: () =>
+				import("../src/lib/registry/new-york/example/breadcrumb-ellipsis.svelte").then(
+					(m) => m.default
+				),
+			files: ["../src/lib/registry/new-york/example/breadcrumb-ellipsis.svelte"],
+		},
+		"breadcrumb-link": {
+			name: "breadcrumb-link",
+			type: "components:example",
+			registryDependencies: ["breadcrumb"],
+			component: () =>
+				import("../src/lib/registry/new-york/example/breadcrumb-link.svelte").then(
+					(m) => m.default
+				),
+			files: ["../src/lib/registry/new-york/example/breadcrumb-link.svelte"],
+		},
+		"breadcrumb-responsive": {
+			name: "breadcrumb-responsive",
+			type: "components:example",
+			registryDependencies: ["breadcrumb", "drawer", "dropdown-menu", "button"],
+			component: () =>
+				import("../src/lib/registry/new-york/example/breadcrumb-responsive.svelte").then(
+					(m) => m.default
+				),
+			files: ["../src/lib/registry/new-york/example/breadcrumb-responsive.svelte"],
+		},
+		"breadcrumb-separator": {
+			name: "breadcrumb-separator",
+			type: "components:example",
+			registryDependencies: ["breadcrumb"],
+			component: () =>
+				import("../src/lib/registry/new-york/example/breadcrumb-separator.svelte").then(
+					(m) => m.default
+				),
+			files: ["../src/lib/registry/new-york/example/breadcrumb-separator.svelte"],
+		},
 		"button-demo": {
 			name: "button-demo",
 			type: "components:example",

diff --git a/apps/www/package.json b/apps/www/package.json
@@ -79,7 +79,7 @@
 		"@internationalized/date": "^3.5.2",
 		"@unovis/svelte": "1.3.6-beta.1",
 		"@unovis/ts": "1.3.6-beta.1",
-		"bits-ui": "0.19.3",
+		"bits-ui": "0.19.6",
 		"clsx": "^2.1.0",
 		"cmdk-sv": "^0.0.15",
 		"d3-scale": "^4.0.2",

diff --git a/apps/www/src/content/changelog.md b/apps/www/src/content/changelog.md
@@ -9,6 +9,16 @@ description: Latest updates and announcements.
 
 ## March 2024
 
+### New Component: Breadcrumb
+
+We've added a new component to the project, [Breadcrumb](/docs/components/breadcrumb).
+
+<ComponentPreview name="breadcrumb-demo">
+
+<div />
+
+</ComponentPreview>
+
 ### New Component: Scroll Area
 
 We've added a new component to the project, [Scroll Area](/docs/components/scroll-area), which is built on top of the [Scroll Area](https://bits-ui.com/docs/components/scroll-area) component from Bits UI.

diff --git a/apps/www/src/content/components/breadcrumb.md b/apps/www/src/content/components/breadcrumb.md
@@ -0,0 +1,114 @@
+---
+title: Breadcrumb
+description: Displays the path to the current resource using a hierarchy of links.
+component: true
+source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/registry/default/ui/breadcrumb
+---
+
+<script>
+  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+</script>
+
+<ComponentPreview name="breadcrumb-demo">
+
+<div />
+
+</ComponentPreview>
+
+## Installation
+
+```bash
+npx shadcn-svelte@latest add breadcrumb
+```
+
+<ManualInstall>
+
+1. Copy and paste the component source files linked at the top of this page into your project.
+
+</ManualInstall>
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js";
+</script>
+
+<Breadcrumb.Root>
+  <Breadcrumb.List>
+    <Breadcrumb.Item>
+      <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+    </Breadcrumb.Item>
+    <Breadcrumb.Separator />
+    <Breadcrumb.Item>
+      <Breadcrumb.Link href="/components">Components</Breadcrumb.Link>
+    </Breadcrumb.Item>
+    <Breadcrumb.Separator />
+    <Breadcrumb.Item>
+      <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
+    </Breadcrumb.Item>
+  </Breadcrumb.List>
+</Breadcrumb.Root>
+```
+
+## Examples
+
+### Custom separator
+
+Use a custom component in the `<slot>` of `<Breadcrumb.Separator />` to create a custom separator.
+
+<ComponentPreview name="breadcrumb-separator">
+
+<div />
+
+</ComponentPreview>
+
+---
+
+### Dropdown
+
+You can compose `<Breadcrumb.Item />` with a `<DropdownMenu />` to create a dropdown in the breadcrumb.
+
+<ComponentPreview name="breadcrumb-dropdown">
+
+<div />
+
+</ComponentPreview>
+
+---
+
+### Collapsed
+
+We provide a `<Breadcrumb.Ellipsis />` component to show a collapsed state when the breadcrumb is too long.
+
+<ComponentPreview name="breadcrumb-ellipsis">
+
+<div />
+
+</ComponentPreview>
+
+---
+
+### Link component
+
+To use a custom link component from your routing library, you can use the `asChild` prop on `<Breadcrumb.Link />`.
+
+<ComponentPreview name="breadcrumb-link">
+
+<div />
+
+</ComponentPreview>
+
+---
+
+### Responsive
+
+Here's an example of a responsive breadcrumb that composes `<Breadcrumb.Item />` with `<Breadcrumb.Ellipsis />`, `<DropdownMenu />`, and `<Drawer />`.
+
+It displays a dropdown on desktop and a drawer on mobile.
+
+<ComponentPreview name="breadcrumb-responsive">
+
+<div />
+
+</ComponentPreview>
diff --git a/apps/www/src/lib/components/docs/charts/metric.svelte b/apps/www/src/lib/components/docs/charts/metric.svelte
@@ -43,7 +43,7 @@
 	<VisCrosshair template={tooltipTemplate} color={crosshairPointColors} />
 </VisXYContainer>
 
-<style>
+<style lang="postcss">
 	:global(.vis-xy-container) {
 		--vis-tooltip-padding: "0px";
 		--vis-tooltip-background-color: "transparent";

diff --git a/apps/www/src/lib/config/docs.ts b/apps/www/src/lib/config/docs.ts
@@ -118,6 +118,12 @@ export const docsConfig: DocsConfig = {
 					href: "/docs/components/badge",
 					items: [],
 				},
+				{
+					title: "Breadcrumb",
+					href: "/docs/components/breadcrumb",
+					items: [],
+					label: "New",
+				},
 				{
 					title: "Button",
 					href: "/docs/components/button",

diff --git a/apps/www/src/lib/registry/default/example/breadcrumb-demo.svelte b/apps/www/src/lib/registry/default/example/breadcrumb-demo.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import * as Breadcrumb from "$lib/registry/default/ui/breadcrumb/index.js";
+	import * as DropdownMenu from "$lib/registry/default/ui/dropdown-menu/index.js";
+</script>
+
+<Breadcrumb.Root>
+	<Breadcrumb.List>
+		<Breadcrumb.Item>
+			<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+		</Breadcrumb.Item>
+		<Breadcrumb.Separator />
+		<Breadcrumb.Item>
+			<DropdownMenu.Root>
+				<DropdownMenu.Trigger class="flex items-center gap-1">
+					<Breadcrumb.Ellipsis class="h-4 w-4" />
+					<span class="sr-only">Toggle menu</span>
+				</DropdownMenu.Trigger>
+				<DropdownMenu.Content align="start">
+					<DropdownMenu.Item>Documentation</DropdownMenu.Item>
+					<DropdownMenu.Item>Themes</DropdownMenu.Item>
+					<DropdownMenu.Item>GitHub</DropdownMenu.Item>
+				</DropdownMenu.Content>
+			</DropdownMenu.Root>
+		</Breadcrumb.Item>
+		<Breadcrumb.Separator />
+		<Breadcrumb.Item>
+			<Breadcrumb.Link href="/docs/components">Components</Breadcrumb.Link>
+		</Breadcrumb.Item>
+		<Breadcrumb.Separator />
+		<Breadcrumb.Item>
+			<Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
+		</Breadcrumb.Item>
+	</Breadcrumb.List>
+</Breadcrumb.Root>
diff --git a/apps/www/src/lib/registry/default/example/breadcrumb-dropdown.svelte b/apps/www/src/lib/registry/default/example/breadcrumb-dropdown.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import * as Breadcrumb from "$lib/registry/default/ui/breadcrumb/index.js";
+	import * as DropdownMenu from "$lib/registry/default/ui/dropdown-menu/index.js";
+	import ChevronDown from "lucide-svelte/icons/chevron-down";
+	import Slash from "lucide-svelte/icons/slash";
+</script>
+
+<Breadcrumb.Root>
+	<Breadcrumb.List>
+		<Breadcrumb.Item>
+			<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+		</Breadcrumb.Item>
+		<Breadcrumb.Separator>
+			<Slash />
+		</Breadcrumb.Separator>
+		<Breadcrumb.Item>
+			<DropdownMenu.Root>
+				<DropdownMenu.Trigger class="flex items-center gap-1">
+					Components
+					<ChevronDown class="h-4 w-4" />
+				</DropdownMenu.Trigger>
+				<DropdownMenu.Content align="start">
+					<DropdownMenu.Item>Documentation</DropdownMenu.Item>
+					<DropdownMenu.Item>Themes</DropdownMenu.Item>
+					<DropdownMenu.Item>GitHub</DropdownMenu.Item>
+				</DropdownMenu.Content>
+			</DropdownMenu.Root>
+		</Breadcrumb.Item>
+		<Breadcrumb.Separator>
+			<Slash />
+		</Breadcrumb.Separator>
+		<Breadcrumb.Item>
+			<Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
+		</Breadcrumb.Item>
+	</Breadcrumb.List>
+</Breadcrumb.Root>
diff --git a/apps/www/src/lib/registry/default/example/breadcrumb-ellipsis.svelte b/apps/www/src/lib/registry/default/example/breadcrumb-ellipsis.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import * as Breadcrumb from "$lib/registry/default/ui/breadcrumb/index.js";
+</script>
+
+<Breadcrumb.Root>
+	<Breadcrumb.List>
+		<Breadcrumb.Item>
+			<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+		</Breadcrumb.Item>
+		<Breadcrumb.Separator />
+		<Breadcrumb.Item>
+			<Breadcrumb.Ellipsis />
+		</Breadcrumb.Item>
+		<Breadcrumb.Separator />
+		<Breadcrumb.Item>
+			<Breadcrumb.Link href="/docs/components">Components</Breadcrumb.Link>
+		</Breadcrumb.Item>
+		<Breadcrumb.Separator />
+		<Breadcrumb.Item>
+			<Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
+		</Breadcrumb.Item>
+	</Breadcrumb.List>
+</Breadcrumb.Root>