@anker-in/headless-ui 0.0.10 → 0.0.12

package/src/stories/checkbox.stories.tsx

@@ -1,14 +1,91 @@
+import type { Meta, StoryObj } from '@storybook/react/*'
 import { Checkbox } from '../components/index'
 import React from 'react'
 
-export default { title: 'Components/Checkbox' }
+const meta = {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: '复选框, 基于@radix-ui/react-checkbox https://www.radix-ui.com/primitives/docs/components/checkbox',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: ['sm', 'base', 'lg'],
+      description: '尺寸',
+      table: {
+        defaultValue: { summary: 'base' },
+      },
+    },
+  },
+  args: {
+    size: 'base',
+  },
+} satisfies Meta<typeof Checkbox>
 
-export const Default = () => (
-  <div className="flex items-center space-x-2">
-    <Checkbox id="terms" />
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    size: 'base',
+  },
+}
+
+export const Sizes = () => (
+  <div className="ai-flex ai-flex-col ai-gap-2">
+    <div className="ai-flex ai-items-center ai-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"
+      >
+        Accept terms and conditions
+      </label>
+    </div>
+    <div className="ai-flex ai-items-center ai-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"
+      >
+        Accept terms and conditions
+      </label>
+    </div>
+    <div className="ai-flex ai-items-center ai-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"
+      >
+        Accept terms and conditions
+      </label>
+    </div>
+  </div>
+)
+Sizes.parameters = {
+  docs: {
+    description: {
+      story: '不同的尺寸',
+    },
+  },
+}
+
+export const Disabled = () => (
+  <div className="ai-flex ai-items-center ai-space-x-2">
+    <Checkbox id="terms" disabled />
     <label
       htmlFor="terms"
-      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+      className="ai-text-sm ai-font-medium ai-leading-none peer-disabled:ai-cursor-not-allowed peer-disabled:ai-opacity-70"
     >
       Accept terms and conditions
     </label>

package/src/stories/dialog.stories.tsx

@@ -18,23 +18,23 @@ export const Default = () => (
     <DialogTrigger asChild>
       <button>Edit Profile</button>
     </DialogTrigger>
-    <DialogContent className="sm:max-w-[425px]">
+    <DialogContent className="sm:ai-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="grid gap-4 py-4">
-        <div className="grid grid-cols-4 items-center gap-4">
-          <label htmlFor="name" className="text-right">
+      <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">
             Name
           </label>
-          <Input id="name" defaultValue="Pedro Duarte" className="col-span-3" />
+          <Input id="name" defaultValue="Pedro Duarte" className="ai-col-span-3" />
         </div>
-        <div className="grid grid-cols-4 items-center gap-4">
-          <label htmlFor="username" className="text-right">
+        <div className="ai-grid ai-grid-cols-4 ai-items-center ai-gap-4">
+          <label htmlFor="username" className="ai-text-right">
             Username
           </label>
-          <Input id="username" defaultValue="@peduarte" className="col-span-3" />
+          <Input id="username" defaultValue="@peduarte" className="ai-col-span-3" />
         </div>
       </div>
       <DialogFooter>

package/src/stories/heading.stories.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Heading } from '../components/index'
+import React from 'react'
+
+const meta = {
+  title: 'Typography/Heading',
+  component: Heading,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Heading 组件, 基本和text 组件一样，只是默认的标签类型不一样',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9],
+      description: '1~9',
+      table: {
+        defaultValue: { summary: '3' },
+      },
+    },
+    weights: {
+      control: {
+        type: 'select',
+      },
+      options: ['light', 'normal', 'medium', 'bold'],
+      table: {
+        defaultValue: { summary: 'normal' },
+      },
+    },
+    color: {
+      control: '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: 3,
+    weights: 'normal',
+  },
+} 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

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

package/src/stories/popover.stories.tsx

@@ -8,8 +8,8 @@ export const Default = () => (
     <PopoverTrigger asChild>
       <button>Open popover</button>
     </PopoverTrigger>
-    <PopoverContent className="w-80">
-      <div className="grid gap-4">
+    <PopoverContent className="ai-w-80">
+      <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

package/src/stories/radio.stories.tsx

@@ -1,19 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react/*'
 import { RadioGroup, RadioGroupItem } from '../components/index'
 import React from 'react'
 
-export default { title: 'Components/Radio' }
+const meta = {
+  title: 'Components/Radio',
+  component: RadioGroup,
+  // subcomponents: { RadioGroupItem },
+  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 const Default = () => (
-  <div className="flex h-40 w-48 items-center justify-center">
-    <RadioGroup defaultValue="option-one">
-      <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>
-    </RadioGroup>
-  </div>
-)
+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

@@ -8,6 +8,12 @@ const meta = {
   component: Skeleton,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component:
+          '骨架屏组件,用来在数据加载时展示一个占位图, 可以包在dom 外使用，通过loading 控制显示隐藏, 也可以单独使用，通过自定义class控制样式, 组合成想要的形状',
+      },
+    },
   },
   tags: ['autodocs'],
 } satisfies Meta<typeof Skeleton>
@@ -16,18 +22,46 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {}
+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 Example: Story = {
+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 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="mt-2 h-40 w-[200px]" />
+        <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

@@ -4,12 +4,59 @@ import { Text } from '../components/index'
 import React from 'react'
 
 const meta = {
-  title: 'Components/Text',
+  title: 'Typography/Text',
   component: Text,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component: '文本组件, 简单封装了常用的样式字段，用于展示文本内容.',
+      },
+    },
   },
   tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9],
+      table: {
+        defaultValue: { summary: '3' },
+      },
+    },
+    weights: {
+      control: {
+        type: 'select',
+      },
+      options: ['light', 'normal', 'medium', 'bold'],
+      table: {
+        defaultValue: { summary: 'normal' },
+      },
+    },
+    color: {
+      control: 'color',
+    },
+    as: {
+      control: {
+        type: 'select',
+      },
+      description: 'html 标签类型',
+      options: ['div', 'label', 'p', 'span'],
+      table: {
+        defaultValue: { summary: 'span' },
+      },
+    },
+    html: {
+      type: 'string',
+      description: '相当于 dangerouslySetInnerHTML',
+    },
+  },
+  args: {
+    size: 3,
+    weights: 'normal',
+    html: '',
+  },
 } satisfies Meta<typeof Text>
 
 export default meta
@@ -18,20 +65,56 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
   args: {
     children: ' The quick brown fox jumps over the lazy dog.',
+    size: 3,
+    weights: '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 Weights: Story = {
+  render() {
+    return (
+      <div className="ai-flex ai-flex-col">
+        <Text weights="light">The quick brown fox jumps over the lazy dog.</Text>
+        <Text weights="normal">The quick brown fox jumps over the lazy dog.</Text>
+        <Text weights="medium">The quick brown fox jumps over the lazy dog.</Text>
+        <Text weights="bold">The quick brown fox jumps over the lazy dog.</Text>
+      </div>
+    )
   },
 }
 
-const sizes = new Array(10).fill(0).map((_, i) => i + 1)
-export const All: Story = {
+export const Html: Story = {
   render() {
     return (
-      <>
-        {sizes.map(size => (
-          <Text as="p" key={size} size={size as any}>
-            The quick brown fox jumps over the lazy dog.
-          </Text>
-        ))}
-      </>
+      <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.`}
+      />
     )
   },
 }

package/src/styles/global.css

@@ -154,17 +154,17 @@
   --brand-color-1: #e42d46;
 }
 
-/* TODO:   */
+
 :root[data-brand-theme='soundcore'] {
-  --btn-bg-color: #17bbef;
+  --btn-bg-color: #17BBEF;
   --btn-text-color: #ffffff;
   --btn-bg-color-active: #48cffa;
   --btn-bg-disabled-color: #ccdfe8;
 
   --btn-bg-secondary-color: #ffffff;
-  --btn-text-secondary-color: #333333;
-  --btn-bg-secondary-active-color: #555555;
-  --btn-bg-secondary-disabled-color: #f5f5f5;
+  --btn-text-secondary-color: #17BBEF;
+  --btn-bg-secondary-active-color: #17BBEF;
+  --btn-bg-secondary-disabled-color: #17BBEF;
 
   --btn-radius: 30px;