design system token v0.1

stories/Navigation/Breadcrumb.stories.tsx

@@ -0,0 +1,109 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+} from '@/components/ui/breadcrumb'
+
+const meta = {
+  title: 'Navigation/Breadcrumb',
+  component: Breadcrumb,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+} satisfies Meta<typeof Breadcrumb>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Components</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  ),
+}
+
+export const WithEllipsis: Story = {
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbEllipsis />
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Components</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  ),
+}
+
+export const TwoLevels: Story = {
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Dashboard</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Settings</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  ),
+}
+
+export const DeepNesting: Story = {
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Products</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Electronics</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Laptops</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>MacBook Pro</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  ),
+}

stories/Navigation/Navbar.stories.tsx

@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Navbar, NavbarLink } from '@/components/ui/navbar'
+import { Logo } from '@/components/ui/logo'
+import { Button } from '@/components/ui/button'
+
+const meta = {
+  title: 'Navigation/Navbar',
+  component: Navbar,
+  tags: ['autodocs'],
+  parameters: { layout: 'fullscreen' },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['solid', 'transparent', 'minimal'],
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="min-h-[200px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Navbar>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const navLinks = (
+  <>
+    <NavbarLink href="#" active>Home</NavbarLink>
+    <NavbarLink href="#">About</NavbarLink>
+    <NavbarLink href="#">Services</NavbarLink>
+    <NavbarLink href="#">Contact</NavbarLink>
+  </>
+)
+
+const navActions = (
+  <>
+    <Button variant="ghost" size="sm">Log in</Button>
+    <Button size="sm">Sign up</Button>
+  </>
+)
+
+export const Solid: Story = {
+  args: {
+    variant: 'solid',
+    logo: <Logo size="sm" />,
+    actions: navActions,
+    children: navLinks,
+  },
+}
+
+export const Transparent: Story = {
+  args: {
+    variant: 'transparent',
+    logo: <Logo size="sm" />,
+    actions: navActions,
+    children: navLinks,
+  },
+  decorators: [
+    (Story) => (
+      <div className="min-h-[200px] bg-gradient-to-br from-primary/20 to-primary/5">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export const Minimal: Story = {
+  args: {
+    variant: 'minimal',
+    logo: <Logo size="sm" />,
+    actions: navActions,
+    children: navLinks,
+  },
+}
+
+export const WithoutActions: Story = {
+  args: {
+    variant: 'solid',
+    logo: <Logo size="sm" />,
+    children: navLinks,
+  },
+}
+
+export const LogoOnly: Story = {
+  args: {
+    variant: 'solid',
+    logo: <Logo size="sm" />,
+    actions: navActions,
+  },
+}