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

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

@@ -1,52 +0,0 @@
-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

@@ -1,64 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import type { ComponentType } from 'react'
-import { Button, Input, InputSlot } from '../components/index.js'
-import { SearchIcon } from '@storybook/icons'
-import React from 'react'
-
-const meta = {
-  title: 'Components/Input',
-  component: Input,
-  subcomponents: { InputSlot: InputSlot as ComponentType<unknown> }, // TODO: 检查type , 去掉as类型转换
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: 'Input 组件, 用于输入框, 可以通过插槽插入额外的内容, 比如icon, 按钮',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    size: {
-      control: {
-        type: 'select',
-      },
-      options: ['sm', 'base', 'lg'],
-    },
-  },
-  args: {
-    size: 'base',
-  },
-} satisfies Meta<typeof Input>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {},
-}
-
-export const WithButton: Story = {
-  render() {
-    return (
-      <Input className="rounded-3xl pr-0" placeholder="Enter your email" type="text">
-        <InputSlot side="right">
-          <Button className="h-full rounded-none" size="sm">
-            subscribe
-          </Button>
-        </InputSlot>
-      </Input>
-    )
-  },
-}
-export const WithIcon: Story = {
-  render() {
-    return (
-      <Input type="text" placeholder="search in site">
-        <InputSlot side="left">
-          <SearchIcon />
-        </InputSlot>
-      </Input>
-    )
-  },
-}

package/src/stories/link.stories.tsx

@@ -1,142 +0,0 @@
-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

@@ -1,102 +0,0 @@
-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

@@ -1,51 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { Picture } from '../components/index.js'
-const imageUrl =
-  'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219'
-
-const mobImageUrl =
-  'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627'
-
-const imageUrl2 = 'https://http.cat/images/200.jpg'
-const mobImageUrl2 = 'https://http.cat/images/102.jpg'
-
-const meta = {
-  title: 'Components/Picture',
-  component: Picture,
-  parameters: {
-    layout: 'centerd',
-    docs: {
-      description: {
-        component: `响应式图片组件, 支持传入不同分辨率下的图片，比如，source="url1 1920， url2 1080, url3 767". 
-          当图片匹配域名（'cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com'）的时候，会自动在图片url后面添加图片尺寸后缀
-           `,
-      },
-    },
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof Picture>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    source: `${imageUrl}, ${mobImageUrl} 768`,
-    imgClassName: 'rounded-[24px]',
-  },
-}
-
-export const NotMatchDomain: Story = {
-  args: {
-    source: `${imageUrl2}, ${mobImageUrl2} 768`,
-    className: 'w-[300px]',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: '图片不匹配域名',
-      },
-    },
-  },
-}

package/src/stories/popover.stories.tsx

@@ -1,41 +0,0 @@
-import React from 'react'
-import { Popover, PopoverContent, PopoverTrigger } from '../components/index.js'
-import type { Meta } from '@storybook/react/*'
-
-const meta = {
-  title: 'Components/Popover',
-  component: Popover,
-  subcomponents: { Popover, PopoverTrigger, PopoverContent } as any,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'popover组件，在一个portal展示复杂ui, 基于@radix-ui/react-popover, https://www.radix-ui.com/primitives/docs/components/popover',
-      },
-    },
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof Popover>
-
-export default meta
-
-export const Default = () => (
-  <Popover>
-    <PopoverTrigger asChild>
-      <button>Open popover</button>
-    </PopoverTrigger>
-    <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
-          make a type specimen book. It has survived not only five centuries, but also the leap into electronic
-          typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
-          sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
-          PageMaker including versions of Lorem Ipsum.
-        </p>
-      </div>
-    </PopoverContent>
-  </Popover>
-)

package/src/stories/radio.stories.tsx

@@ -1,55 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react/*'
-import { RadioGroup, RadioGroupItem } from '../components/index.js'
-import React, { type ComponentType } from 'react'
-
-const meta = {
-  title: 'Components/RadioGroup',
-  component: RadioGroup,
-  subcomponents: { RadioGroupItem: RadioGroupItem as ComponentType<unknown> },
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          '单选框, 基于@radix-ui/react-radio-group https://www.radix-ui.com/primitives/docs/components/radio-group',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    size: {
-      control: {
-        type: 'select',
-      },
-      options: ['sm', 'base', 'lg'],
-      description: '尺寸',
-      table: {
-        defaultValue: { summary: 'base' },
-      },
-    },
-  },
-  args: {
-    size: 'base',
-  },
-} satisfies Meta<typeof RadioGroup>
-
-export default meta
-
-type Story = StoryObj<typeof RadioGroup>
-export const Default: Story = {
-  args: {
-    size: 'base',
-    children: (
-      <>
-        <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="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

@@ -1,35 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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",
-  },
-}

package/src/stories/skeleton.stories.tsx

@@ -1,67 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { Skeleton } from '../components/index.js'
-import React from 'react'
-
-const meta = {
-  title: 'Components/Skeleton',
-  component: Skeleton,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          '骨架屏组件,用来在数据加载时展示一个占位图, 可以包在dom 外使用，通过loading 控制显示隐藏, 也可以单独使用，通过自定义class控制样式, 组合成想要的布局',
-      },
-    },
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof Skeleton>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    loading: true,
-    children: (
-      <div className="h-14 rounded-3xl overflow-hidden px-4 py-4 w-full">
-        Fog creeps across moors, hills, and rivers. It adds an eerie charm to the landscape, but also complicates
-        driving.
-      </div>
-    ),
-  },
-}
-
-export const Multiple: Story = {
-  render() {
-    return (
-      <div className="flex flex-col items-center justify-center">
-        <div className="flex w-full justify-between">
-          <Skeleton className="size-12 rounded-full" />
-          <Skeleton className="h-12 w-[70%] " />
-        </div>
-        <Skeleton className="mt-2 h-40 w-[200px]" />
-      </div>
-    )
-  },
-}
-
-export const WithText: Story = {
-  render() {
-    return (
-      <>
-        <Skeleton loading={true}>
-          Rainfall is a constant companion. Umbrellas are practically a national accessory. Expect drizzles, showers,
-          and downpours, often accompanied by gray skies.
-        </Skeleton>
-        <hr />
-        <Skeleton loading={false}>
-          Rainfall is a constant companion. Umbrellas are practically a national accessory. Expect drizzles, showers,
-          and downpours, often accompanied by gray skies.
-        </Skeleton>
-      </>
-    )
-  },
-}