@anker-in/headless-ui 0.0.26 → 0.0.27-alpha.1

package/src/stories/heading.stories.tsx

@@ -1,100 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { Heading } from '../components/index.js'
-import React from 'react'
-
-const meta = {
-  title: 'Typography/Heading',
-  component: Heading,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component: 'Heading 组件, 基本和text 组件一样，只是默认的标签类型不一样',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    size: {
-      control: {
-        type: 'select',
-      },
-      options: ['none', 1, 2, 3, 4, 5, 6, 7, 8, 9],
-      description: '文本尺寸，默认为none，浏览器默认大小和行高，1～9预设字体大小和行高',
-      table: {
-        defaultValue: { summary: 'none' },
-      },
-    },
-    weight: {
-      control: {
-        type: 'select',
-      },
-      options: ['light', 'normal', 'medium', 'bold'],
-      table: {
-        defaultValue: { summary: 'normal' },
-      },
-    },
-    align: {
-      control: {
-        type: 'select',
-      },
-      options: ['left', 'center', 'right'],
-      table: {
-        defaultValue: { summary: undefined },
-      },
-    },
-    color: {
-      control: {
-        type: 'color',
-      },
-    },
-    as: {
-      control: {
-        type: 'select',
-      },
-      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
-      description: 'html 标签类型',
-      table: {
-        defaultValue: { summary: 'h1' },
-      },
-    },
-    html: {
-      type: 'string',
-      description: '相当于 dangerouslySetInnerHTML',
-    },
-  },
-  args: {
-    as: 'h1',
-    size: 'none',
-    weight: 'normal',
-    align: 'left',
-  },
-} satisfies Meta<typeof Heading>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    as: 'h1',
-    children: ' The quick brown fox jumps over the lazy dog.',
-  },
-}
-
-export const All: Story = {
-  render: () => (
-    <>
-      <Heading size={1}>The quick brown fox jumps over the lazy dog.</Heading>
-      <Heading size={2}>The quick brown fox jumps over the lazy dog.</Heading>
-      <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.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="ai-rounded-3xl ai-pr-0" placeholder="Enter your email" type="text">
-        <InputSlot side="right">
-          <Button className="ai-h-full ai-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/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: 'ai-rounded-[24px]',
-  },
-}
-
-export const NotMatchDomain: Story = {
-  args: {
-    source: `${imageUrl2}, ${mobImageUrl2} 768`,
-    className: 'ai-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="ai-w-80 ai-bg-white" side="right">
-      <div className="ai-grid ai-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="ai-flex ai-items-center ai-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">
-          <RadioGroupItem value="option-two" id="option-two" />
-          <label htmlFor="option-two">Option Two</label>
-        </div>
-      </>
-    ),
-  },
-}

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="ai-h-14 ai-rounded-3xl ai-overflow-hidden ai-px-4 ai-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="ai-flex ai-flex-col ai-items-center ai-justify-center">
-        <div className="ai-flex ai-w-full ai-justify-between">
-          <Skeleton className="ai-size-12 ai-rounded-full" />
-          <Skeleton className="ai-h-12 ai-w-[70%] " />
-        </div>
-        <Skeleton className="ai-mt-2 ai-h-40 ai-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>
-      </>
-    )
-  },
-}

package/src/stories/text.stories.tsx

@@ -1,154 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { Text } from '../components/index.js'
-import React from 'react'
-
-const meta = {
-  title: 'Typography/Text',
-  component: Text,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component: '文本组件, 简单封装了常用的样式字段，用于展示文本内容.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    size: {
-      control: {
-        type: 'select',
-      },
-      description: '文本尺寸，默认为none，浏览器默认大小和行高，1～9预设字体大小和行高',
-      options: ['none', 1, 2, 3, 4, 5, 6, 7, 8, 9],
-      table: {
-        defaultValue: { summary: 'none' },
-      },
-    },
-    weight: {
-      control: {
-        type: 'select',
-      },
-      options: ['light', 'normal', 'medium', 'bold'],
-      table: {
-        defaultValue: { summary: 'normal' },
-      },
-    },
-    align: {
-      control: {
-        type: 'select',
-      },
-      options: ['left', 'center', 'right'],
-      table: {
-        defaultValue: { summary: undefined },
-      },
-    },
-    color: {
-      control: {
-        type: 'color',
-      },
-    },
-    as: {
-      control: {
-        type: 'select',
-      },
-      description: 'html 标签类型, div和p会默认占满整行',
-      options: ['div', 'label', 'p', 'span'],
-      table: {
-        defaultValue: { summary: 'span' },
-      },
-    },
-    lineHeights: {
-      control: {
-        type: 'select',
-      },
-      description: '字体行高，tight是1.2、normal是1.4、loose是1.6',
-      options: ['tight', 'normal', 'loose'],
-    },
-    html: {
-      type: 'string',
-      description: '相当于 dangerouslySetInnerHTML',
-    },
-  },
-  args: {
-    size: 'none',
-    weight: 'normal',
-    align: 'left',
-    lineHeights: 'normal',
-    html: '',
-    as: 'p',
-  },
-} satisfies Meta<typeof Text>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    children: ' The quick brown fox jumps over the lazy dog.',
-    size: 'none',
-    weight: 'normal',
-  },
-}
-
-export const Sizes: Story = {
-  render() {
-    return (
-      <div className="ai-flex ai-flex-col">
-        <Text size={1}>The quick brown fox jumps over the lazy dog.</Text>
-        <Text size={2}>The quick brown fox jumps over the lazy dog.</Text>
-        <Text size={3}>The quick brown fox jumps over the lazy dog.</Text>
-        <Text size={4}>The quick brown fox jumps over the lazy dog.</Text>
-        <Text size={5}>The quick brown fox jumps over the lazy dog.</Text>
-        <Text size={6}>The quick brown fox jumps over the lazy dog.</Text>
-        <Text size={7}>The quick brown fox jumps over the lazy dog.</Text>
-        <Text size={8}>The quick brown fox jumps over the lazy dog.</Text>
-        <Text size={9}>The quick brown fox jumps over the lazy dog.</Text>
-      </div>
-    )
-  },
-}
-
-export const weight: Story = {
-  render() {
-    return (
-      <div className="ai-flex ai-flex-col">
-        <Text weight="light">The quick brown fox jumps over the lazy dog.</Text>
-        <Text weight="normal">The quick brown fox jumps over the lazy dog.</Text>
-        <Text weight="medium">The quick brown fox jumps over the lazy dog.</Text>
-        <Text weight="bold">The quick brown fox jumps over the lazy dog.</Text>
-      </div>
-    )
-  },
-}
-
-export const LineHeights: Story = {
-  render() {
-    return (
-      <div className="ai-flex ai-flex-col">
-        <Text lineHeights="tight">The quick brown fox jumps over the lazy dog.</Text>
-        <Text lineHeights="normal">The quick brown fox jumps over the lazy dog.</Text>
-        <Text lineHeights="loose">The quick brown fox jumps over the lazy dog.</Text>
-      </div>
-    )
-  },
-}
-
-export const Html: Story = {
-  render() {
-    return (
-      <Text
-        html={`The <span style='font-size:20px;font:bold; -webkit-background-clip: text; background: linear-gradient(
-      to right, 
-      #00ff00,   /* 绿色 */
-      #00ff99,   /* 浅绿色 */
-      #00ffff,   /* 青色 */
-      #0099ff,   /* 浅蓝色 */
-      #8000ff,   /* 紫色 */
-      #ff00ff    /* 粉色 */
-    );color: transparent;background-clip: text;'>quick brown fox</span> <br/> jumps over the lazy dog.`}
-      />
-    )
-  },
-}