@anker-in/headless-ui 0.0.11 → 0.0.13

package/src/components/text.tsx

@@ -2,10 +2,12 @@ import * as React from 'react'
 import { Slot } from '@radix-ui/react-slot'
 import { cn } from '../helpers/index.js'
 import { type VariantProps, cva } from 'class-variance-authority'
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'
 
 const textVariants = cva('', {
   variants: {
     size: {
+      none: '',
       1: 'ai-text-xs',
       2: 'ai-text-sm',
       3: 'ai-text-base',
@@ -24,22 +26,29 @@ const textVariants = cva('', {
     },
   },
   defaultVariants: {
-    size: 3,
+    size: 'none',
     weights: 'normal',
   },
 })
 
 type TextElement = React.ElementRef<'span'>
-interface TextProps extends React.ComponentPropsWithoutRef<'span'>, VariantProps<typeof textVariants> {
-  as?: 'div' | 'label' | 'p' | 'span' | undefined
+type TextSpanProps = { as?: 'span' } & ComponentPropsWithout<'span', RemovedProps>
+type TextDivProps = { as: 'div' } & ComponentPropsWithout<'div', RemovedProps>
+type TextLabelProps = { as: 'label' } & ComponentPropsWithout<'label', RemovedProps>
+type TextPProps = { as: 'p' } & ComponentPropsWithout<'p', RemovedProps>
+
+interface CommonTextProps extends VariantProps<typeof textVariants> {
+  as?: 'div' | 'label' | 'p' | 'span'
   asChild?: boolean
   color?: string
   /** 相当于 dangerouslySetInnerHTML */
   html?: string
 }
 
+type TextProps = CommonTextProps & (TextSpanProps | TextDivProps | TextLabelProps | TextPProps)
+
 const Text = React.forwardRef<TextElement, TextProps>((props, forwardedRef) => {
-  const { children, size, className, asChild, as: Tag = 'span', color, html, ...textProps } = props
+  const { children, size = 'none', weights, className, asChild, as: Tag = 'span', color, html, ...textProps } = props
 
   const htmlContentProps = html
     ? {
@@ -47,18 +56,27 @@ const Text = React.forwardRef<TextElement, TextProps>((props, forwardedRef) => {
       }
     : null
 
+  const styleProps = color
+    ? {
+        style: {
+          color,
+        },
+      }
+    : null
+
   return (
     <Slot
       {...textProps}
       ref={forwardedRef}
       className={cn(
         textVariants({
-          size: size,
+          size,
+          weights,
         }),
-        className,
-        `text-[${color}]`
+        className
       )}
       {...htmlContentProps}
+      {...styleProps}
     >
       {asChild ? children : <Tag>{htmlContentProps ? null : children}</Tag>}
     </Slot>

package/src/stories/checkbox.stories.tsx

@@ -1,11 +1,88 @@
+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 = () => (
+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" />
+    <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"

package/src/stories/dialog.stories.tsx

@@ -10,36 +10,65 @@ import {
   DialogTrigger,
   Input,
 } from '../components/index'
+import type { Meta, StoryObj } from '@storybook/react/*'
 
-export default { title: 'Components/Dialog' }
+const meta = {
+  title: 'Components/Dialog',
+  component: Dialog,
+  subcomponents: {
+    DialogTrigger,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogDescription,
+    DialogFooter,
+  } as any,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: '弹窗组件，基于@radix-ui/react-dialog，https://www.radix-ui.com/primitives/docs/components/dialog ',
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Dialog>
 
-export const Default = () => (
-  <Dialog>
-    <DialogTrigger asChild>
-      <button>Edit Profile</button>
-    </DialogTrigger>
-    <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="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="ai-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">
-            Username
-          </label>
-          <Input id="username" defaultValue="@peduarte" className="ai-col-span-3" />
-        </div>
-      </div>
-      <DialogFooter>
-        <Button type="submit">Save changes</Button>
-      </DialogFooter>
-    </DialogContent>
-  </Dialog>
-)
+export default meta
+
+type Story = StoryObj<typeof Dialog>
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <DialogTrigger asChild>
+          <button>Edit Profile</button>
+        </DialogTrigger>
+        <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="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="ai-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">
+                Username
+              </label>
+              <Input id="username" defaultValue="@peduarte" className="ai-col-span-3" />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button type="submit">Save changes</Button>
+          </DialogFooter>
+        </DialogContent>
+      </>
+    ),
+  },
+}

package/src/stories/heading.stories.tsx

@@ -0,0 +1,90 @@
+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: ['none', 1, 2, 3, 4, 5, 6, 7, 8, 9],
+      description: '文本尺寸，默认为none，浏览器默认大小和行高，1～9预设字体大小和行高',
+      table: {
+        defaultValue: { summary: 'none' },
+      },
+    },
+    weights: {
+      control: {
+        type: 'select',
+      },
+      options: ['light', 'normal', 'medium', 'bold'],
+      table: {
+        defaultValue: { summary: 'normal' },
+      },
+    },
+    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',
+    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

@@ -10,6 +10,11 @@ const meta = {
   subcomponents: { InputSlot: InputSlot as ComponentType<unknown> }, // TODO: 检查type , 去掉as类型转换
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component: 'Input 组件, 用于输入框, 可以通过插槽插入额外的内容, 比如icon, 按钮',
+      },
+    },
   },
   tags: ['autodocs'],
   argTypes: {

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'
+import React, { type ComponentType } from 'react'
 
-export default { title: 'Components/Radio' }
+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 const Default = () => (
-  <div className="ai-flex ai-h-40 ai-w-48 ai-items-center ai-justify-center">
-    <RadioGroup defaultValue="ai-option-one">
-      <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>
-    </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,9 +22,19 @@ 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="ai-flex ai-flex-col ai-items-center ai-justify-center">
@@ -31,3 +47,21 @@ export const Example: Story = {
     )
   },
 }
+
+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,10 +4,15 @@ 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: {
@@ -15,13 +20,35 @@ const meta = {
       control: {
         type: 'select',
       },
-      options: [1, 2, 3, 4, 5, 6, 7, 8, 9],
+      description: '文本尺寸，默认为none，浏览器默认大小和行高，1～9预设字体大小和行高',
+      options: ['none', 1, 2, 3, 4, 5, 6, 7, 8, 9],
+      table: {
+        defaultValue: { summary: 'none' },
+      },
     },
     weights: {
       control: {
         type: 'select',
       },
       options: ['light', 'normal', 'medium', 'bold'],
+      table: {
+        defaultValue: { summary: 'normal' },
+      },
+    },
+    color: {
+      control: {
+        type: 'color',
+      },
+    },
+    as: {
+      control: {
+        type: 'select',
+      },
+      description: 'html 标签类型',
+      options: ['div', 'label', 'p', 'span'],
+      table: {
+        defaultValue: { summary: 'span' },
+      },
     },
     html: {
       type: 'string',
@@ -29,7 +56,7 @@ const meta = {
     },
   },
   args: {
-    size: 3,
+    size: 'none',
     weights: 'normal',
     html: '',
   },
@@ -41,22 +68,56 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
   args: {
     children: ' The quick brown fox jumps over the lazy dog.',
-    size: 3,
+    size: 'none',
     weights: 'normal',
   },
 }
 
-const sizes = new Array(9).fill(0).map((_, i) => i + 1)
-export const All: Story = {
+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>
+    )
+  },
+}
+
+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;