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

package/src/stories/grid.stories.tsx

@@ -0,0 +1,190 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { Grid, GridItem } from '../components/gird.js'
+
+const meta = {
+  title: 'Layout/Grid',
+  component: Grid,
+  subcomponents: {
+    GridItem,
+  },
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: `
+Grid 布局组件，基于 CSS Grid 实现的 12 列网格系统。
+
+### 实现细节
+- Grid 组件使用 CSS Grid 布局，默认为 12 列网格
+- 默认间距为 gap-3 (12px)，在 md 断点后变为 gap-4 (16px)
+- 使用 Tailwind CSS 的网格类实现，无需额外的 CSS
+
+### 宽度 和 自定义定位开始和结束位置
+- 使用 start 和 end 属性来指定网格项的开始和结束位置（1-13）
+- 使用 span 属性来指定网格项的跨度（1-12）
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Grid>
+
+export default meta
+
+type Story = StoryObj<typeof Grid>
+
+// 基础布局
+export const Basic = () => (
+  <div className="p-4">
+    <Grid>
+      <GridItem span={12} className="bg-blue-100 p-4 text-center">span-12</GridItem>
+      <GridItem span={6} className="bg-blue-200 p-4 text-center">span-6</GridItem>
+      <GridItem span={6} className="bg-blue-300 p-4 text-center">span-6</GridItem>
+      <GridItem span={4} className="bg-blue-400 p-4 text-center">span-4</GridItem>
+      <GridItem span={4} className="bg-blue-500 p-4 text-center">span-4</GridItem>
+      <GridItem span={4} className="bg-blue-600 p-4 text-center">span-4</GridItem>
+      <GridItem span={3} className="bg-blue-700 p-4 text-center text-white">span-3</GridItem>
+      <GridItem span={3} className="bg-blue-800 p-4 text-center text-white">span-3</GridItem>
+      <GridItem span={3} className="bg-blue-900 p-4 text-center text-white">span-3</GridItem>
+      <GridItem span={3} className="bg-blue-950 p-4 text-center text-white">span-3</GridItem>
+    </Grid>
+  </div>
+)
+
+type GridStart = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+type GridEnd = 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13
+
+
+
+export const CustomPosition = ({
+  baseStart = 2,
+  baseEnd = 6,
+  showBoundaryExamples = true,
+  gridGap = '',
+  colorScheme = 'blue'
+}: any) => (
+  <div className="p-4">
+    <Grid className={gridGap}>
+      {/* 基本定位示例 */}
+      <GridItem 
+        start={baseStart as GridStart} 
+        end={baseEnd as GridEnd} 
+        className={`bg-${colorScheme}-200 p-4 text-center`}
+      >
+        start-{baseStart} end-{baseEnd}
+      </GridItem>
+      <GridItem 
+        start={(baseEnd + 1) as GridStart} 
+        end={12} 
+        className={`bg-${colorScheme}-300 p-4 text-center`}
+      >
+        start-{baseEnd + 1} end-12
+      </GridItem>
+      
+      {/* 跨越整行示例 */}
+      <GridItem 
+        start={1} 
+        end={13} 
+        className={`bg-${colorScheme}-400 p-4 text-center`}
+      >
+        start-1 end-13 (整行)
+      </GridItem>
+      
+      {/* 单格示例 */}
+      <GridItem 
+        start={1} 
+        end={2} 
+        className={`bg-${colorScheme}-500 p-4 text-center text-white`}
+      >
+        1格 (start-1)
+      </GridItem>
+      <GridItem 
+        start={3} 
+        end={4} 
+        className={`bg-${colorScheme}-500 p-4 text-center text-white`}
+      >
+        1格 (start-3)
+      </GridItem>
+      
+      {/* 不规则跨度示例 */}
+      <GridItem 
+        start={5} 
+        end={10} 
+        className={`bg-${colorScheme}-600 p-4 text-center text-white`}
+      >
+        start-5 end-10
+      </GridItem>
+      <GridItem 
+        start={10} 
+        end={13} 
+        className={`bg-${colorScheme}-700 p-4 text-center text-white`}
+      >
+        end-13
+      </GridItem>
+      
+      {/* 使用 span 的示例 */}
+      <GridItem 
+        start={1} 
+        span={3} 
+        className={`bg-${colorScheme}-800 p-4 text-center text-white`}
+      >
+        start-1 span-3
+      </GridItem>
+      <GridItem 
+        start={4} 
+        span={9} 
+        className={`bg-${colorScheme}-900 p-4 text-center text-white`}
+      >
+        start-4 span-9
+      </GridItem>
+      
+      {/* 边界情况示例 */}
+      {showBoundaryExamples && (
+        <>
+          <GridItem 
+            start={12} 
+            span={1} 
+            className="bg-yellow-500 p-4 text-center text-white"
+          >
+            最后1格
+          </GridItem>
+          <GridItem 
+            start={1} 
+            span={1} 
+            className="bg-yellow-600 p-4 text-center text-white"
+          >
+            第1格
+          </GridItem>
+        </>
+      )}
+    </Grid>
+  </div>
+)
+
+
+// 自定义间距
+export const CustomGap = () => (
+  <div className="p-4">
+    <Grid className="gap-8">
+      <GridItem span={6} className="bg-purple-200 p-4 text-center">间距 32px (gap-8)</GridItem>
+      <GridItem span={6} className="bg-purple-300 p-4 text-center">间距 32px (gap-8)</GridItem>
+      <GridItem span={4} className="bg-purple-400 p-4 text-center">间距 32px (gap-8)</GridItem>
+      <GridItem span={4} className="bg-purple-500 p-4 text-center text-white">间距 32px (gap-8)</GridItem>
+      <GridItem span={4} className="bg-purple-600 p-4 text-center text-white">间距 32px (gap-8)</GridItem>
+    </Grid>
+  </div>
+)
+
+// 不同的横向和纵向间距
+export const DifferentGaps = () => (
+  <div className="p-4">
+    <Grid className="gap-x-8 gap-y-2">
+      <GridItem span={6} className="bg-orange-200 p-4 text-center">横向 32px 纵向 8px</GridItem>
+      <GridItem span={6} className="bg-orange-300 p-4 text-center">横向 32px 纵向 8px</GridItem>
+      <GridItem span={4} className="bg-orange-400 p-4 text-center">横向 32px 纵向 8px</GridItem>
+      <GridItem span={4} className="bg-orange-500 p-4 text-center text-white">横向 32px 纵向 8px</GridItem>
+      <GridItem span={4} className="bg-orange-600 p-4 text-center text-white">横向 32px 纵向 8px</GridItem>
+    </Grid>
+  </div>
+) 

package/src/stories/heading.stories.tsx

@@ -20,13 +20,13 @@ const meta = {
       control: {
         type: 'select',
       },
-      options: ['none', 1, 2, 3, 4, 5, 6, 7, 8, 9],
-      description: '文本尺寸，默认为none，浏览器默认大小和行高，1～9预设字体大小和行高',
+      options: [1, 2, 3, 4, 5],
+      description: '文本尺寸，从5到1，越来越小',
       table: {
-        defaultValue: { summary: 'none' },
+        defaultValue: { summary: '5' },
       },
     },
-    weights: {
+    weight: {
       control: {
         type: 'select',
       },
@@ -66,8 +66,8 @@ const meta = {
   },
   args: {
     as: 'h1',
-    size: 'none',
-    weights: 'normal',
+    size: 5,
+    weight: 'normal',
     align: 'left',
   },
 } satisfies Meta<typeof Heading>
@@ -91,10 +91,6 @@ export const All: Story = {
       <Heading size={3}>The quick brown fox jumps over the lazy dog.</Heading>
       <Heading size={4}>The quick brown fox jumps over the lazy dog.</Heading>
       <Heading size={5}>The quick brown fox jumps over the lazy dog.</Heading>
-      <Heading size={6}>The quick brown fox jumps over the lazy dog.</Heading>
-      <Heading size={7}>The quick brown fox jumps over the lazy dog.</Heading>
-      <Heading size={8}>The quick brown fox jumps over the lazy dog.</Heading>
-      <Heading size={9}>The quick brown fox jumps over the lazy dog.</Heading>
     </>
   ),
 }

package/src/stories/input-number.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import InputNumber from '../components/input-number.js'
+
+const meta = {
+  // 同时定义了页面左侧菜单
+  title: 'Components/InputNumber',
+  component: InputNumber,
+  subcomponents: { InputNumber } as any,
+  parameters: {
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  args: {
+    onBlur: undefined,
+    onChange: undefined,
+    onEnter: undefined,
+  },
+} satisfies Meta<typeof InputNumber>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const Tips: Story = {
+  args: {
+    asChild: true,
+    children: (
+      <div className="flex flex-col gap-4">
+        <InputNumber tips="Success" />
+        <InputNumber status="success" tips="Success" />
+        <InputNumber status="warning" tips="Success" />
+        <InputNumber status="error" tips="Success" />
+      </div>
+    ),
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    asChild: true,
+    children: (
+      <div className="flex flex-col gap-4">
+        <InputNumber disabled />
+        <InputNumber readonly />
+      </div>
+    ),
+  },
+}

package/src/stories/input.stories.tsx

@@ -41,9 +41,9 @@ export const Default: Story = {
 export const WithButton: Story = {
   render() {
     return (
-      <Input className="ai-rounded-3xl ai-pr-0" placeholder="Enter your email" type="text">
+      <Input className="rounded-3xl pr-0" placeholder="Enter your email" type="text">
         <InputSlot side="right">
-          <Button className="ai-h-full ai-rounded-none" size="sm">
+          <Button className="h-full rounded-none" size="sm">
             subscribe
           </Button>
         </InputSlot>

package/src/stories/link.stories.tsx

@@ -0,0 +1,142 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ChevronRightIcon } from '@storybook/icons'
+import Link from '../components/link.js'
+
+const meta = {
+  // 同时定义了页面左侧菜单
+  title: 'Components/Link',
+  component: Link,
+  parameters: {
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    size: {
+      description: '尺寸',
+      control: {
+        type: 'select',
+      },
+      options: ['small', 'medium', 'large'],
+      table: {
+        defaultValue: { summary: 'small' },
+      },
+    },
+    underline: {
+      description: '链接下划线展示',
+      control: {
+        type: 'select',
+      },
+      options: ['none', 'hover', 'always'],
+      table: {
+        defaultValue: { summary: 'none' },
+      },
+    },
+    hoverColor: {
+      description: '链接悬浮文字样式',
+      control: {
+        type: 'select',
+      },
+      options: ['none', 'hover'],
+      table: {
+        defaultValue: { summary: 'none' },
+      },
+    },
+    onClick: {
+      control: false,
+    },
+    suffixIcon: {
+      control: false,
+    },
+    style: {
+      control: false,
+    },
+    className: {
+      control: false,
+    },
+    children: {
+      control: false,
+    },
+  },
+  args: {
+    onClick: undefined,
+  },
+} satisfies Meta<typeof Link>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    children: 'Link',
+  },
+}
+
+export const LinkSize = () => (
+  <div className="inline-flex flex-col gap-4">
+    <div className="inline-flex gap-4">
+      <Link size="small" hoverColor="hover">
+        Link
+      </Link>
+      <Link size="small" underline="always">
+        Link
+      </Link>
+      <Link size="small" underline="hover" hoverColor="hover" suffixIcon={<ChevronRightIcon />}>
+        Link
+      </Link>
+    </div>
+    <div className="inline-flex gap-4">
+      <Link size="medium" hoverColor="hover">
+        Link
+      </Link>
+      <Link size="medium" underline="always">
+        Link
+      </Link>
+      <Link size="medium" underline="hover" hoverColor="hover" suffixIcon={<ChevronRightIcon />}>
+        Link
+      </Link>
+    </div>
+    <div className="inline-flex gap-4">
+      <Link size="large" hoverColor="hover">
+        Link
+      </Link>
+      <Link size="large" underline="always">
+        Link
+      </Link>
+      <Link size="large" underline="hover" hoverColor="hover" suffixIcon={<ChevronRightIcon />}>
+        Link
+      </Link>
+    </div>
+  </div>
+)
+
+export const Disabled = () => (
+  <div className="inline-flex flex-col gap-4">
+    <div className="inline-flex gap-4">
+      <Link size="small" disabled>
+        Link
+      </Link>
+      <Link size="small" disabled suffixIcon={<ChevronRightIcon />}>
+        Link
+      </Link>
+    </div>
+    <div className="inline-flex gap-4">
+      <Link size="medium" disabled>
+        Link
+      </Link>
+      <Link size="medium" disabled suffixIcon={<ChevronRightIcon />}>
+        Link
+      </Link>
+    </div>
+    <div className="inline-flex gap-4">
+      <Link size="large" disabled>
+        Link
+      </Link>
+      <Link size="large" disabled suffixIcon={<ChevronRightIcon />}>
+        Link
+      </Link>
+    </div>
+  </div>
+)

package/src/stories/marquee.stories.tsx

@@ -0,0 +1,102 @@
+import React, { type ComponentType } from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { Marquee, MarqueeList, MarqueeImageContent, MarqueeTextContent } from '../biz-components/Marquee'
+
+const meta = {
+  title: 'Biz Components/Marquee',
+  component: Marquee,
+  subcomponents: {
+    MarqueeList: MarqueeList as ComponentType<unknown>,
+    MarqueeImageContent: MarqueeImageContent as ComponentType<unknown>,
+    MarqueeTextContent: MarqueeTextContent as ComponentType<unknown>,
+  },
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: '跑马灯Marquee，基于react-fast-marquee<br>可使用react-fast-marquee所有props',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  args: {
+    speed: 50,
+  },
+  argTypes: {
+    direction: {
+      control: {
+        type: 'inline-radio',
+      },
+      options: ['left', 'right', 'up', 'down'],
+      description: '跑马灯滑动的方向',
+      table: {
+        defaultValue: {
+          summary: 'left',
+        },
+      },
+    },
+    speed: {
+      control: {
+        type: 'number',
+      },
+      description: '速度，单位：像素/秒',
+    }
+  }
+} satisfies Meta<typeof Marquee>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => (
+    <Marquee {...args}>
+      <MarqueeList>
+        <MarqueeImageContent image="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_6339.png?v=1745400317" />
+        <MarqueeTextContent text="跑马灯组件" />
+        <MarqueeImageContent image="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_224.png?v=1745400317" />
+        <MarqueeTextContent className='text-nowrap' text="另一个跑马灯组件" />
+        <MarqueeImageContent image="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_222.png?v=1745400317" />
+      </MarqueeList>
+    </Marquee>
+  ),
+}
+
+export const MarqueeImage: Story = {
+  render: args => (
+    <Marquee {...args}>
+      <MarqueeList>
+        <MarqueeImageContent image="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_6339.png?v=1745400317" />
+        <MarqueeImageContent image="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_224.png?v=1745400317" />
+        <MarqueeImageContent image="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_222.png?v=1745400317" />
+      </MarqueeList>
+    </Marquee>
+  ),
+}
+
+export const MarqueeText: Story = {
+  render: args => (
+    <Marquee {...args}>
+      <MarqueeList>
+        <MarqueeTextContent className='w-40' text="47%<br>R&D Employees" />
+        <MarqueeTextContent className='w-40' text="100 Million<br>Global Customers" />
+        <MarqueeTextContent className='w-60' text="Pioneering in Charging<br>Technology for 12 Years" />
+      </MarqueeList>
+    </Marquee>
+  ),
+}
+
+export const MarqueeDirection: Story = {
+  render: args => (
+    <Marquee {...args}>
+      <MarqueeList>
+        <MarqueeImageContent image="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_6339.png?v=1745400317" />
+        <MarqueeImageContent image="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_224.png?v=1745400317" />
+        <MarqueeImageContent image="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_222.png?v=1745400317" />
+      </MarqueeList>
+    </Marquee>
+  ),
+  args: {
+    direction: 'right',
+  },
+}

package/src/stories/picture.stories.tsx

@@ -32,14 +32,14 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
   args: {
     source: `${imageUrl}, ${mobImageUrl} 768`,
-    imgClassName: 'ai-rounded-[24px]',
+    imgClassName: 'rounded-[24px]',
   },
 }
 
 export const NotMatchDomain: Story = {
   args: {
     source: `${imageUrl2}, ${mobImageUrl2} 768`,
-    className: 'ai-w-[300px]',
+    className: 'w-[300px]',
   },
   parameters: {
     docs: {

package/src/stories/popover.stories.tsx

@@ -25,8 +25,8 @@ export const Default = () => (
     <PopoverTrigger asChild>
       <button>Open popover</button>
     </PopoverTrigger>
-    <PopoverContent className="ai-w-80 ai-bg-white" side="right">
-      <div className="ai-grid ai-gap-4">
+    <PopoverContent className="w-80 bg-white" side="right">
+      <div className="grid gap-4">
         <p>
           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
           standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to

package/src/stories/radio.stories.tsx

@@ -41,11 +41,11 @@ export const Default: Story = {
     size: 'base',
     children: (
       <>
-        <div className="ai-flex ai-items-center ai-space-x-2">
+        <div className="flex items-center space-x-2">
           <RadioGroupItem value="option-one" id="option-one" />
           <label htmlFor="option-one">Option One</label>
         </div>
-        <div className="ai-flex ai-items-center ai-space-x-2">
+        <div className="flex items-center space-x-2">
           <RadioGroupItem value="option-two" id="option-two" />
           <label htmlFor="option-two">Option Two</label>
         </div>

package/src/stories/shelf.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Shelf } from '../biz-components/index.js'
+import React from 'react'
+
+const meta = {
+  title: 'Biz-Components/Shelf',
+  component: Shelf,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Shelf>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    id: 'shelf',
+    title: 'this is title',
+    subtitle: 'this is subtitle',
+    products: [
+      {
+        sku: 'sku1',
+        name: 'product 1',
+      },
+      {
+        sku: 'sku2',
+        name: 'product 2',
+      },
+    ],
+  },
+}

package/src/stories/shelfDisplay.stories.tsx

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import ShelfDisplay from '../biz-components/ShelfDisplay'
+
+const meta = {
+  title: 'Biz-Components/ShelfDisplay',
+  component: ShelfDisplay,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ShelfDisplay>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const mockItems = [
+  {
+    price: '$1,999.00',
+    basePrice: '$2,999.00',
+    subTitle: 'Fast Charging for 3 Devices',
+    title: 'Anker Prime 27,650mAh Power Bank (250W)',
+    tagItems: ['New', '20% OFF'],
+    img: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',
+  },
+  {
+    price: '$1,999.00',
+    basePrice: '$2,999.00',
+    subTitle: 'Fast Charging for 3 Devices',
+    title: 'Anker Prime 27,650mAh Power Bank (250W)',
+    tagItems: ['New', '20% OFF'],
+    img: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',
+  },
+  {
+    price: '$1,999.00',
+    basePrice: '$2,999.00',
+    subTitle: 'Fast Charging for 3 Devices',
+    title: 'Anker Prime 27,650mAh Power Bank (250W)',
+    tagItems: ['New', '20% OFF'],
+    img: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',
+  },
+  {
+    price: '$1,999.00',
+    basePrice: '$2,999.00',
+    subTitle: 'Fast Charging for 3 Devices',
+    title: 'Anker Prime 27,650mAh Power Bank (250W)',
+    tagItems: ['New', '20% OFF'],
+    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',
+    primaryButton:"Learn More",
+    secondaryButton:"Shop Now",
+  },
+}
+
+export const Round: Story = {
+  args: {
+    products: mockItems,
+    className: 'p-4',
+    shape: 'round',
+    itemShape: 'round',
+    primaryButton:"Learn More",
+    secondaryButton:"Shop Now",
+  },
+}