feat: update UI component stories to use centralized imports from @cherrystudio/ui

- Added a new Breadcrumb.stories.tsx file to showcase the Breadcrumb component and its variations.
- Refactored existing stories for Button, Checkbox, Combobox, Kbd, Pagination, RadioGroup, Select, and Spinner components to import directly from @cherrystudio/ui instead of relative paths.
- Enhanced the organization and accessibility of component stories in the Storybook environment.

packages/ui/stories/components/primitives/Breadcrumb.stories.tsx

@@ -0,0 +1,124 @@
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+} from '@cherrystudio/ui'
+import type { Meta, StoryObj } from '@storybook/react'
+import { Slash } from 'lucide-react'
+
+const meta: Meta<typeof Breadcrumb> = {
+  title: 'Components/Primitives/Breadcrumb',
+  component: Breadcrumb,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Displays the path to the current resource using a hierarchy of links. Based on shadcn/ui.'
+      }
+    }
+  },
+  tags: ['autodocs']
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Default
+export const Default: Story = {
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/components">Components</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
+
+// Custom Separator
+export const CustomSeparator: Story = {
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator>
+          <Slash />
+        </BreadcrumbSeparator>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/components">Components</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator>
+          <Slash />
+        </BreadcrumbSeparator>
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
+
+// Collapsed
+export const Collapsed: Story = {
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbEllipsis />
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
+
+// Link as Child
+export const LinkAsChild: Story = {
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink asChild>
+            <a href="/">Home</a>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink asChild>
+            <a href="/components">Components</a>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}

packages/ui/stories/components/primitives/Button.stories.tsx

@@ -1,8 +1,7 @@
+import { Button } from '@cherrystudio/ui'
 import type { Meta, StoryObj } from '@storybook/react'
 import { ChevronRight, Loader2, Mail } from 'lucide-react'
 
-import { Button } from '../../../src/components/primitives/button'
-
 const meta: Meta<typeof Button> = {
   title: 'Components/Primitives/Button',
   component: Button,

packages/ui/stories/components/primitives/Checkbox.stories.tsx

@@ -1,9 +1,8 @@
+import { Checkbox, type CheckedState } from '@cherrystudio/ui'
 import type { Meta, StoryObj } from '@storybook/react'
 import { Bell, Check, FileText, Mail, Shield, Star } from 'lucide-react'
 import { useState } from 'react'
 
-import { Checkbox, type CheckedState } from '../../../src/components/primitives/checkbox'
-
 const meta: Meta<typeof Checkbox> = {
   title: 'Components/Primitives/Checkbox',
   component: Checkbox,

packages/ui/stories/components/primitives/Combobox.stories.tsx

@@ -1,9 +1,8 @@
+import { Combobox } from '@cherrystudio/ui'
 import type { Meta, StoryObj } from '@storybook/react'
 import { ChevronDown, User } from 'lucide-react'
 import { useState } from 'react'
 
-import { Combobox } from '../../../src/components/primitives/combobox'
-
 const meta: Meta<typeof Combobox> = {
   title: 'Components/Primitives/Combobox',
   component: Combobox,

packages/ui/stories/components/primitives/Kbd.stories.tsx

@@ -1,7 +1,6 @@
+import { Kbd, KbdGroup } from '@cherrystudio/ui'
 import type { Meta, StoryObj } from '@storybook/react'
 import { Command, Copy, Save, Search } from 'lucide-react'
-
-import { Kbd, KbdGroup } from '../../../src/components/primitives/kbd'
 // import { Tooltip, TooltipContent, TooltipTrigger } from '../../../src/components/primitives/tooltip'
 
 const meta: Meta<typeof Kbd> = {

packages/ui/stories/components/primitives/Pagination.stories.tsx

@@ -1,5 +1,3 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
 import {
   Pagination,
   PaginationContent,
@@ -8,7 +6,8 @@ import {
   PaginationLink,
   PaginationNext,
   PaginationPrevious
-} from '../../../src/components/primitives/pagination'
+} from '@cherrystudio/ui'
+import type { Meta, StoryObj } from '@storybook/react'
 
 const meta: Meta<typeof Pagination> = {
   title: 'Components/Primitives/Pagination',

packages/ui/stories/components/primitives/RadioGroup.stories.tsx

@@ -1,9 +1,8 @@
+import { RadioGroup, RadioGroupItem } from '@cherrystudio/ui'
 import type { Meta, StoryObj } from '@storybook/react'
 import { Bell, Check, Moon, Palette, Sun } from 'lucide-react'
 import { useState } from 'react'
 
-import { RadioGroup, RadioGroupItem } from '../../../src/components/primitives/radioGroup'
-
 const meta: Meta<typeof RadioGroup> = {
   title: 'Components/Primitives/RadioGroup',
   component: RadioGroup,

packages/ui/stories/components/primitives/Select.stories.tsx

@@ -1,7 +1,3 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { Globe, Palette, User } from 'lucide-react'
-import { useState } from 'react'
-
 import {
   Select,
   SelectContent,
@@ -11,7 +7,10 @@ import {
   SelectSeparator,
   SelectTrigger,
   SelectValue
-} from '../../../src/components/primitives/select'
+} from '@cherrystudio/ui'
+import type { Meta, StoryObj } from '@storybook/react'
+import { Globe, Palette, User } from 'lucide-react'
+import { useState } from 'react'
 
 const meta: Meta<typeof Select> = {
   title: 'Components/Primitives/Select',

packages/ui/stories/components/primitives/Spinner.stories.tsx

@@ -1,9 +1,7 @@
+import { Button, Spinner } from '@cherrystudio/ui'
 import type { Meta, StoryObj } from '@storybook/react'
 import { useState } from 'react'
 
-import { Button } from '../../../src/components'
-import { Spinner } from '../../../src/components'
-
 const meta: Meta<typeof Spinner> = {
   title: 'Components/Primitives/Spinner',
   component: Spinner,

packages/ui/tsconfig.json

@@ -13,6 +13,7 @@
     "noFallthroughCasesInSwitch": true,
     "outDir": "./dist",
     "paths": {
+      "@cherrystudio/ui": ["./src/index.ts"],
       "@cherrystudio/ui/*": ["./src/*"]
     },
     "resolveJsonModule": true,