@anker-in/headless-ui 0.0.25 → 0.0.27-alpha.0

package/src/stories/carousel.stories.tsx

@@ -0,0 +1,161 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  Card,
+  CardContent,
+} from '../components/index.js'
+
+import React from 'react'
+
+const meta = {
+  title: 'Components/Carousel',
+  component: Carousel,
+  subcomponents: {
+    CarouselContent,
+    CarouselItem,
+  },
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: '轮播组件, 基于轻量级组件embla-carousel-react, https://www.embla-carousel.com/get-started/react/',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    opts: {
+      description:
+        'embla-carousel-react 的配置参数, 可以配置loop: true 开启循环，align: center | start | end 对齐方式， 查看 https://www.embla-carousel.com/api/options/',
+      control: {
+        type: 'object',
+      },
+    },
+    showNavigation: {
+      description: '是否显示导航点',
+      control: {
+        type: 'boolean',
+      },
+    },
+    orientation: {
+      description: '轮播方向',
+      control: {
+        type: 'select',
+      },
+      options: ['horizontal', 'vertical'],
+    },
+    setApi: {
+      description: '设置api, 可以通过这个函数获取carousel API 实例，拿到api 实例后,可以调用api 实例的方法或者属性',
+    },
+    plugins: {
+      description:
+        'embla-carousel-react 的插件,embla-carousel 的 Autoplay, Wheel Gesture 等高级功能 通过插件支持  https://www.embla-carousel.com/plugins/',
+    },
+  },
+  args: {
+    opts: {},
+    orientation: 'horizontal',
+  },
+} satisfies Meta<typeof Carousel>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    opts: {
+      align: 'start',
+    },
+    children: (
+      <>
+        <CarouselContent>
+          {Array.from({ length: 5 }).map((_, index) => (
+            <CarouselItem key={index} className="basis-1/3">
+              <div className="p-1">
+                <Card>
+                  <CardContent className="flex aspect-square items-center justify-center p-6">
+                    <span className="text-3xl font-semibold">{index + 1}</span>
+                  </CardContent>
+                </Card>
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </>
+    ),
+  },
+}
+
+export const Vertical: Story = {
+  render() {
+    return (
+      <Carousel
+        opts={{
+          align: 'start',
+        }}
+        orientation="vertical"
+        className="w-full max-w-xs"
+      >
+        <CarouselContent className="-mt-1 h-[200px]">
+          {Array.from({ length: 5 }).map((_, index) => (
+            <CarouselItem key={index} className="basis-1/2 pt-1">
+              <div className="p-1">
+                <Card>
+                  <CardContent className="flex aspect-square items-center justify-center p-6">
+                    <span className="text-3xl font-semibold">{index + 1}</span>
+                  </CardContent>
+                </Card>
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </Carousel>
+    )
+  },
+}
+
+const images = [
+  'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1312320388_mo_path_1.png?v=1741689169',
+  'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1312320388.png?v=1741689169',
+  'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1312320388_1_mo_never_missing.png?v=1741689169',
+  'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1312320388_mo_path_1.png?v=1741689169',
+  'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1312320388.png?v=1741689169',
+]
+export const OverrideClassName: Story = {
+  render() {
+    return (
+      <Carousel
+        opts={{
+          loop: true,
+          align: 'center',
+        }}
+        showNavigation={true}
+        navigationPosition="outter"
+        className="w-full max-w-xl"
+      >
+        <CarouselContent className="">
+          {Array.from({ length: 5 }).map((_, index) => (
+            <CarouselItem key={index} className="basis-1/2">
+              <div className="p-1">
+                <img src={images[index]} alt="" />
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious className="left-4" />
+        <CarouselNext className="right-4" />
+      </Carousel>
+    )
+  },
+}
+OverrideClassName.parameters = {
+  layout: 'padded',
+}

package/src/stories/category.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Category from '../biz-components/Category'
+
+const meta = {
+  title: 'Biz-Components/Category',
+  component: Category,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Category>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const mockItems = [
+  {
+    title: 'Anker Prime 27',
+    img: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',
+  },
+  {
+    title: 'Anker Prime',
+    img: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',
+  },
+  {
+    title: 'Anker Prime',
+    img: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',
+  },
+  {
+    title: 'Anker Prime',
+    img: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',
+  },
+  {
+    title: 'Anker Prime',
+    img: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',
+  },
+]
+
+export const Default: Story = {
+  args: {
+    products: mockItems,
+    className: 'p-4',
+  },
+}
+
+export const Round: Story = {
+  args: {
+    products: mockItems,
+    className: 'p-4',
+    shape: 'round',
+  },
+}

package/src/stories/checkbox.stories.tsx

@@ -42,30 +42,30 @@ export const Default: Story = {
 }
 
 export const Sizes = () => (
-  <div className="ai-flex ai-flex-col ai-gap-2">
-    <div className="ai-flex ai-items-center ai-space-x-2">
+  <div className="flex flex-col gap-2">
+    <div className="flex items-center space-x-2">
       <Checkbox id="terms" size="sm" />
       <label
         htmlFor="terms"
-        className="ai-text-sm ai-font-medium ai-leading-none peer-disabled:ai-cursor-not-allowed peer-disabled:ai-opacity-70"
+        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
       >
         Accept terms and conditions
       </label>
     </div>
-    <div className="ai-flex ai-items-center ai-space-x-2">
+    <div className="flex items-center space-x-2">
       <Checkbox id="terms1" size="base" />
       <label
         htmlFor="terms1"
-        className="ai-text-base ai-font-medium ai-leading-none peer-disabled:ai-cursor-not-allowed peer-disabled:ai-opacity-70"
+        className="text-base font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
       >
         Accept terms and conditions
       </label>
     </div>
-    <div className="ai-flex ai-items-center ai-space-x-2">
+    <div className="flex items-center space-x-2">
       <Checkbox id="terms2" size="lg" />
       <label
         htmlFor="terms2"
-        className="ai-text-lg ai-font-medium ai-leading-none peer-disabled:ai-cursor-not-allowed peer-disabled:ai-opacity-70"
+        className="text-lg font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
       >
         Accept terms and conditions
       </label>
@@ -81,11 +81,11 @@ Sizes.parameters = {
 }
 
 export const Disabled = () => (
-  <div className="ai-flex ai-items-center ai-space-x-2">
+  <div className="flex items-center space-x-2">
     <Checkbox id="terms" disabled />
     <label
       htmlFor="terms"
-      className="ai-text-sm ai-font-medium ai-leading-none peer-disabled:ai-cursor-not-allowed peer-disabled:ai-opacity-70"
+      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
     >
       Accept terms and conditions
     </label>

package/src/stories/container.stories.tsx

@@ -0,0 +1,97 @@
+import React from 'react'
+import { Container } from '../components/index.js'
+import type { Meta, StoryObj } from '@storybook/react'
+import { cn } from '../helpers/utils.js'
+
+const meta = {
+  title: 'Layout/Container',
+  component: Container,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: `
+Container 容器组件，用于限制和约束内容的最大宽度，实现响应式的页面布局。
+
+### 实现细节
+- 基于 Tailwind CSS 实现
+- 默认最大宽度为 1664px
+- 响应式边距设计：
+  - 默认: 左右边距 16px (mx-4)
+  - sm: 左右边距 32px (mx-8)
+  - md: 左右边距 64px (mx-16)
+  - lg: 左右边距 64px (mx-16)
+  - xl: 左右边距 128px (mx-32)
+
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Container>
+
+export default meta
+
+type Story = StoryObj<typeof Container>
+
+// 基础示例
+export const Basic = () => (
+  <Container className="p-4">
+    <div className="bg-blue-100 p-4 rounded-lg text-center">
+      基础容器 - 自动居中，响应式宽度
+    </div>
+  </Container>
+)
+
+// 带内边距和背景色
+export const WithPaddingAndBackground = () => (
+  <Container className="p-4 bg-gray-50">
+    <div className="space-y-4">
+      <div className="bg-white p-4 rounded-lg shadow-sm">
+        <h3 className="text-lg font-medium">内容区块 1</h3>
+        <p className="text-gray-600">带有内边距和背景色的容器示例</p>
+      </div>
+      <div className="bg-white p-4 rounded-lg shadow-sm">
+        <h3 className="text-lg font-medium">内容区块 2</h3>
+        <p className="text-gray-600">展示内容的组织方式</p>
+      </div>
+    </div>
+  </Container>
+)
+
+// 响应式内边距
+export const ResponsivePadding = () => (
+  <Container className="px-4 sm:px-6 md:px-8 py-4 bg-gradient-to-r from-blue-50 to-purple-50">
+    <div className="bg-white p-4 rounded-lg shadow-sm">
+      <h3 className="text-lg font-medium">响应式内边距</h3>
+      <p className="text-gray-600">
+        在不同屏幕尺寸下有不同的水平内边距：
+        <br />
+        默认: px-4 (16px)
+        <br />
+        sm: px-6 (24px)
+        <br />
+        md: px-8 (32px)
+      </p>
+    </div>
+  </Container>
+)
+
+// 嵌套内容示例
+export const NestedContent = () => (
+  <Container className="p-4">
+    <header className="bg-gray-800 text-white p-4 rounded-t-lg">
+      <h2 className="text-xl">页面标题</h2>
+    </header>
+    <main className="bg-white p-4 border-x border-gray-200">
+      <p className="text-gray-600 mb-4">主要内容区域</p>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="bg-blue-50 p-4 rounded">内容块 1</div>
+        <div className="bg-purple-50 p-4 rounded">内容块 2</div>
+      </div>
+    </main>
+    <footer className="bg-gray-100 p-4 rounded-b-lg border-x border-b border-gray-200">
+      <p className="text-gray-500 text-sm">页脚内容</p>
+    </footer>
+  </Container>
+)

package/src/stories/dialog.stories.tsx

@@ -45,23 +45,23 @@ export const Default: Story = {
         <DialogTrigger asChild>
           <button>Edit Profile</button>
         </DialogTrigger>
-        <DialogContent className="sm:ai-max-w-[425px]">
+        <DialogContent className="sm:max-w-[425px]">
           <DialogHeader>
             <DialogTitle>Edit profile</DialogTitle>
             <DialogDescription>Make changes to your profile here. Click save when you're done.</DialogDescription>
           </DialogHeader>
-          <div className="ai-grid ai-gap-4 ai-py-4">
-            <div className="ai-grid ai-grid-cols-4 ai-items-center ai-gap-4">
-              <label htmlFor="name" className="ai-text-right">
+          <div className="grid gap-4 py-4">
+            <div className="grid grid-cols-4 items-center gap-4">
+              <label htmlFor="name" className="text-right">
                 Name
               </label>
-              <Input id="name" defaultValue="Pedro Duarte" className="ai-col-span-3" />
+              <Input id="name" defaultValue="Pedro Duarte" className="col-span-3" />
             </div>
-            <div className="ai-grid ai-grid-cols-4 ai-items-center ai-gap-4">
-              <label htmlFor="username" className="ai-text-right">
+            <div className="grid grid-cols-4 items-center gap-4">
+              <label htmlFor="username" className="text-right">
                 Username
               </label>
-              <Input id="username" defaultValue="@peduarte" className="ai-col-span-3" />
+              <Input id="username" defaultValue="@peduarte" className="col-span-3" />
             </div>
           </div>
           <DialogFooter>

package/src/stories/drawer.stories.tsx

@@ -0,0 +1,88 @@
+import React from 'react'
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTrigger,
+  Button,
+} from '../components/index.js'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta = {
+  title: 'Components/Drawer',
+  component: Drawer,
+  subcomponents: {
+    DrawerClose,
+    DrawerContent,
+    DrawerFooter,
+    DrawerHeader,
+    DrawerTrigger,
+  } as any,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: '抽屉组件；基于 https://vaul.emilkowal.ski/api 开发',
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Drawer>
+
+export default meta
+
+type Story = StoryObj<typeof Drawer>
+
+export const Default: Story = {
+  args: {
+    direction: 'right',
+    children: (
+      <>
+        <DrawerTrigger asChild>
+          <Button>Open Drawer</Button>
+        </DrawerTrigger>
+        <DrawerContent>
+          <div className="mx-auto w-full max-w-sm">
+            <DrawerHeader>
+              <span>My Cart(0)</span>
+            </DrawerHeader>
+            <div className="p-4 pb-0">The contents of the drawer...</div>
+            <DrawerFooter>
+              <DrawerClose asChild>
+                <Button>Cancel</Button>
+              </DrawerClose>
+            </DrawerFooter>
+          </div>
+        </DrawerContent>
+      </>
+    ),
+  },
+}
+
+export const Bottom: Story = {
+  args: {
+    direction: 'bottom',
+    children: (
+      <>
+        <DrawerTrigger asChild>
+          <Button>Open Drawer</Button>
+        </DrawerTrigger>
+        <DrawerContent>
+          <div className="mx-auto w-full max-w-sm">
+            <DrawerHeader>
+              <span>Policy</span>
+            </DrawerHeader>
+            <div className="p-4 pb-0">The contents of the drawer...</div>
+            <DrawerFooter>
+              <DrawerClose asChild>
+                <Button className="ai-w-40">Agree</Button>
+              </DrawerClose>
+            </DrawerFooter>
+          </div>
+        </DrawerContent>
+      </>
+    ),
+  },
+}

package/src/stories/drop-down.stories.tsx

@@ -0,0 +1,83 @@
+import type { Meta } from '@storybook/react'
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+} from '../components/drop-down'
+
+const meta = {
+  // 同时定义了页面左侧菜单
+  title: 'Components/DropDown',
+  component: DropdownMenu,
+  subcomponents: {
+    DropdownMenuTrigger,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuCheckboxItem,
+    DropdownMenuRadioItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuShortcut,
+    DropdownMenuGroup,
+    DropdownMenuPortal,
+    DropdownMenuSub,
+    DropdownMenuSubContent,
+    DropdownMenuSubTrigger,
+    DropdownMenuRadioGroup,
+  } as any,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'dropdown组件,基于@radix-ui/react-dropdown-menu,https://www.radix-ui.com/primitives/docs/components/dropdown-menu',
+      },
+    },
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+} satisfies Meta<typeof DropdownMenu>
+
+export default meta
+
+export const Default = () => (
+  <DropdownMenu>
+    <DropdownMenuTrigger asChild>
+      <span>Open</span>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent>
+      <DropdownMenuLabel>My Account</DropdownMenuLabel>
+      <DropdownMenuGroup>
+        <DropdownMenuItem>
+          Profile
+          <DropdownMenuShortcut>⌘</DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuItem>Billing</DropdownMenuItem>
+      </DropdownMenuGroup>
+      <DropdownMenuGroup>
+        <DropdownMenuItem>Team</DropdownMenuItem>
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
+          <DropdownMenuPortal>
+            <DropdownMenuSubContent>
+              <DropdownMenuItem>Email</DropdownMenuItem>
+              <DropdownMenuItem>Message</DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuPortal>
+        </DropdownMenuSub>
+      </DropdownMenuGroup>
+    </DropdownMenuContent>
+  </DropdownMenu>
+)

package/src/stories/evaluate.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Evaluate from '../biz-components/Evaluate'
+
+const meta = {
+  title: 'Biz-Components/Evaluate',
+  component: Evaluate,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Evaluate>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const mockItems = [
+  {
+    title: 'Theoldpiggery',
+    subTitle: 'Fast Charging for 3 Devices',
+    description: 'Anker Prime 27,650mAh Power Bank (250W)',
+    avatar: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/85087c9c0ec8c86b481eaea247812c3e.png?v=1744612102',
+    img: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',
+  },
+  {
+    title: 'Theoldpiggery',
+    subTitle: 'Fast Charging for 3 Devices',
+    description: 'Anker Prime 27,650mAh Power Bank (250W)',
+    avatar: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/85087c9c0ec8c86b481eaea247812c3e.png?v=1744612102',
+    img: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',
+  },
+  {
+    title: 'Theoldpiggery',
+    subTitle: 'Fast Charging for 3 Devices',
+    description: 'Anker Prime 27,650mAh Power Bank (250W)Anker Prime 27,650mAh Power Bank (250W)Anker Prime 27,650mAh Power Bank (250W)650mAh Power Bank (250W)650mAh Power Bank (250W)',
+    avatar: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/85087c9c0ec8c86b481eaea247812c3e.png?v=1744612102',
+    img: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',
+  },
+]
+
+export const Default: Story = {
+  args: {
+    products: mockItems,
+    className: 'p-4',
+  },
+}
+
+export const Round: Story = {
+  args: {
+    products: mockItems,
+    className: 'p-4',
+    shape: 'round',
+  },
+}