From a8ade940267ce10a351004e548fdea668d09e1a5 Mon Sep 17 00:00:00 2001 From: Anish George Date: Thu, 2 Jul 2026 16:08:32 +1000 Subject: [PATCH 1/6] feat(ds): Add breadcrumb component --- components.json | 21 - packages/design-system/components.json | 21 + packages/design-system/package.json | 7 +- .../src/ui/breadcrumb.stories.tsx | 93 + packages/design-system/src/ui/breadcrumb.tsx | 112 ++ packages/design-system/tsconfig.json | 2 + yarn.lock | 1706 ++++++++++++++++- 7 files changed, 1841 insertions(+), 121 deletions(-) delete mode 100644 components.json create mode 100644 packages/design-system/components.json create mode 100644 packages/design-system/src/ui/breadcrumb.stories.tsx create mode 100644 packages/design-system/src/ui/breadcrumb.tsx diff --git a/components.json b/components.json deleted file mode 100644 index 44726767..00000000 --- a/components.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "$schema": "https://ui.shadcn.com/schema.json", - "style": "new-york", - "rsc": false, - "tsx": true, - "tailwind": { - "config": "", - "css": "apps/ageorgedev/src/app/tailwind.css", - "baseColor": "neutral", - "cssVariables": true, - "prefix": "" - }, - "aliases": { - "components": "@ageorgedev/design-system/lib", - "utils": "@ageorgedev/design-system", - "ui": "@ageorgedev/design-system/lib/ui", - "lib": "@ageorgedev/design-system/lib", - "hooks": "@ageorgedev/design-system/lib" - }, - "iconLibrary": "lucide" -} diff --git a/packages/design-system/components.json b/packages/design-system/components.json new file mode 100644 index 00000000..a4a0fdda --- /dev/null +++ b/packages/design-system/components.json @@ -0,0 +1,21 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "new-york", + "rsc": false, + "tsx": true, + "tailwind": { + "config": "", + "css": "../foundation-styles/src/tailwind.css", + "baseColor": "neutral", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "#components", + "utils": "@ageorgedev/toolbelt/cn", + "ui": "#components", + "lib": "#components", + "hooks": "#components" + }, + "iconLibrary": "lucide" +} diff --git a/packages/design-system/package.json b/packages/design-system/package.json index b61e7454..9b521bf3 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -6,7 +6,8 @@ "clean": "rm -rf ./dist", "build": "tsc && cpx \"src/**/*.css\" dist", "dev": "concurrently 'tsc --watch' 'cpx \"src/**/*.css\" dist --watch' ", - "test": "vitest run" + "test": "vitest run", + "shadcn": "yarn dlx shadcn" }, "exports": { "./*": { @@ -14,11 +15,15 @@ "types": "./dist/*.d.ts" } }, + "imports": { + "#components/*": "./src/ui/*.tsx" + }, "dependencies": { "@ageorgedev/toolbelt": "workspace:*", "@phosphor-icons/react": "2.1.10", "@radix-ui/react-slot": "1.2.3", "class-variance-authority": "0.7.1", + "radix-ui": "^1.6.1", "ramda": "0.32.0", "react-syntax-highlighter": "16.1.1" }, diff --git a/packages/design-system/src/ui/breadcrumb.stories.tsx b/packages/design-system/src/ui/breadcrumb.stories.tsx new file mode 100644 index 00000000..85e458ca --- /dev/null +++ b/packages/design-system/src/ui/breadcrumb.stories.tsx @@ -0,0 +1,93 @@ +import type { Meta, StoryObj } from '@storybook/react-vite'; +import { + Breadcrumb, + BreadcrumbEllipsis, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from './breadcrumb'; + +export default { + title: 'UI/Breadcrumb', + component: Breadcrumb, +} satisfies Meta; + +type Story = StoryObj; + +export const Default: Story = { + render: () => ( + + + + Home + + + + Components + + + + Breadcrumb + + + + ), +}; + +export const WithEllipsis: Story = { + render: () => ( + + + + Home + + + + + + + + Components + + + + Breadcrumb + + + + ), +}; + +export const SingleLevel: Story = { + render: () => ( + + + + Home + + + + ), +}; + +export const CustomSeparator: Story = { + render: () => ( + + + + Home + + / + + Components + + / + + Breadcrumb + + + + ), +}; diff --git a/packages/design-system/src/ui/breadcrumb.tsx b/packages/design-system/src/ui/breadcrumb.tsx new file mode 100644 index 00000000..4e1f73c5 --- /dev/null +++ b/packages/design-system/src/ui/breadcrumb.tsx @@ -0,0 +1,112 @@ +import { cn } from '@ageorgedev/toolbelt/cn'; +import { CaretRightIcon, DotsThreeIcon } from '@phosphor-icons/react'; +import { Slot } from 'radix-ui'; + +function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) { + return