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

package/src/stories/skeleton.stories.tsx

@@ -11,7 +11,7 @@ const meta = {
     docs: {
       description: {
         component:
-          '骨架屏组件,用来在数据加载时展示一个占位图, 可以包在dom 外使用，通过loading 控制显示隐藏, 也可以单独使用，通过自定义class控制样式, 组合成想要的形状',
+          '骨架屏组件,用来在数据加载时展示一个占位图, 可以包在dom 外使用，通过loading 控制显示隐藏, 也可以单独使用，通过自定义class控制样式, 组合成想要的布局',
       },
     },
   },
@@ -26,7 +26,7 @@ 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">
+      <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>
@@ -37,12 +37,12 @@ export const Default: Story = {
 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 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="ai-mt-2 ai-h-40 ai-w-[200px]" />
+        <Skeleton className="mt-2 h-40 w-[200px]" />
       </div>
     )
   },

package/src/stories/slogan.stories.tsx

@@ -0,0 +1,99 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { Slogan } from '../biz-components/index'
+
+const meta = {
+  title: 'Biz Components/Slogan',
+  component: Slogan,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Slogan>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    title: "The World's No.1 Mobile Charging Brand*",
+    features: [
+      '47%<br/>R&D Employees',
+      '100 Million<br/>Global Customers',
+      'Pioneering in Charging<br/>Technology for 12 Years'
+    ],
+
+  }
+}
+
+export const TitleOnly: Story = {
+  args: {
+    title: "The World's No.1 Mobile Charging Brand*"
+  }
+}
+
+export const SingleFeature: Story = {
+  args: {
+    title: "The World's No.1 Mobile Charging Brand*",
+    features: [
+      '47%<br/>R&D Employees'
+    ]
+  }
+}
+
+export const TwoFeatures: Story = {
+  args: {
+    title: "The World's No.1 Mobile Charging Brand*",
+    features: [
+      '47%<br/>R&D Employees',
+      '100 Million<br/>Global Customers'
+    ]
+  }
+}
+
+export const CustomClassName: Story = {
+  args: {
+    title: "The World's No.1 Mobile Charging Brand*",
+    features: [
+      '47%<br/>R&D Employees',
+      '100 Million<br/>Global Customers',
+      'Pioneering in Charging<br/>Technology for 12 Years'
+    ],
+    className: 'bg-gray-100'
+  }
+}
+
+export const CustomStyle = () => {
+  return (<Slogan
+    title="The World's No.1 Mobile Charging Brand*"
+    features={['47%<br/>R&D Employees', '100 Million<br/>Global Customers', 'Pioneering in Charging<br/>Technology for 12 Years']}
+    className="bg-gray-100"
+    style={`
+        
+        .slogan-title{
+          background: linear-gradient(90deg, #ff0000, #00ff00, #0000ff);
+          -webkit-background-clip: text;
+          background-clip: text;
+          color: transparent;
+          animation: fadeIn 1s ease-in forwards;
+        }
+
+        @keyframes fadeIn {
+          from {
+            opacity: 0;
+          }
+          to {
+            opacity: 1;
+          }
+        }
+        .slogan-feature-text {
+          background-color: #f0f0f0;
+          padding: 10px;
+          border-radius: 10px;
+          animation: fadeIn 1s ease-in forwards;
+        }
+      `}
+  />)
+}
+

package/src/stories/tabs.stories.tsx

@@ -0,0 +1,179 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '../components/index.js'
+
+import React, { type ComponentType } from 'react'
+
+const meta = {
+  title: 'Components/Tabs',
+  component: Tabs,
+  subcomponents: {
+    TabsList: TabsList as ComponentType<unknown>,
+    TabsTrigger: TabsTrigger as ComponentType<unknown>,
+    TabsContent: TabsContent as ComponentType<unknown>,
+  },
+  decorators: [
+    Story => (
+      <div style={{ margin: '2em' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Tab选项卡，提供可访问的标签界面，基于@radix-ui/react-tabs',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  args: {
+    defaultValue: 'bestSeller',
+    algin: 'left',
+  },
+  argTypes: {
+    defaultValue: {
+      description: '默认选中的标签页值',
+      control: 'text',
+      table: {
+        summary: 'bestSeller',
+        readonly: true,
+      },
+    },
+    value: {
+      description: '当前选中的标签页值（受控模式）',
+      control: {
+        type: 'radio',
+      },
+      options: ['bestSeller', 'discountProducts', 'bundleDeals', 'recommend'],
+    },
+    algin: {
+      description: '对齐方向',
+    },
+    onValueChange: {
+      description: '标签页值变化时的回调函数',
+      action: 'changed',
+      type: 'function',
+    },
+    orientation: {
+      control: {
+        type: 'inline-radio',
+      },
+      options: ['horizontal', 'vertical'],
+      description: '标签页布局方向',
+      table: {
+        defaultValue: {
+          summary: 'horizontal',
+        },
+      },
+    },
+    dir: {
+      control: {
+        type: 'inline-radio',
+      },
+      options: ['ltr', 'rtl'],
+      description: '文本方向',
+      table: {
+        defaultValue: {
+          summary: 'ltr',
+        },
+      },
+    },
+    // activationMode: {
+    //   control: {
+    //     type: 'select',
+    //   },
+    //   options: ['automatic', 'manual'],
+    //   description: '激活模式（automatic: 自动激活, manual: 手动激活）',
+    //   table: {
+    //     defaultValue: {
+    //       summary: 'automatic',
+    //     },
+    //   },
+    // },
+  },
+} satisfies Meta<typeof Tabs>
+
+export default meta
+
+type Story = StoryObj<typeof Tabs>
+
+export const Default: Story = {
+  render: args => (
+    <Tabs {...args}>
+      <TabsList>
+        <TabsTrigger value="bestSeller">Best Seller</TabsTrigger>
+        <TabsTrigger value="discountProducts">Discount products</TabsTrigger>
+        <TabsTrigger value="bundleDeals">Bundle Deals</TabsTrigger>
+        <TabsTrigger value="recommend">Recommend</TabsTrigger>
+      </TabsList>
+      <TabsContent value="bestSeller">这里展示畅销商品内容。</TabsContent>
+      <TabsContent value="discountProducts">这里展示折扣商品内容。</TabsContent>
+      <TabsContent value="bundleDeals">这里展示套装商品内容。</TabsContent>
+      <TabsContent value="recommend">这里展示推荐商品内容。</TabsContent>
+    </Tabs>
+  ),
+}
+
+export const AlignCenter: Story = {
+  args: {
+    algin: 'center',
+  },
+  render: args => (
+    <Tabs {...args}>
+      <TabsList>
+        <TabsTrigger value="bestSeller">Best Seller</TabsTrigger>
+        <TabsTrigger value="discountProducts">Discount products</TabsTrigger>
+        <TabsTrigger value="bundleDeals">Bundle Deals</TabsTrigger>
+        <TabsTrigger value="recommend">Recommend</TabsTrigger>
+      </TabsList>
+      <TabsContent value="bestSeller">这里展示畅销商品内容。</TabsContent>
+      <TabsContent value="discountProducts">这里展示折扣商品内容。</TabsContent>
+      <TabsContent value="bundleDeals">这里展示套装商品内容。</TabsContent>
+      <TabsContent value="recommend">这里展示推荐商品内容。</TabsContent>
+    </Tabs>
+  ),
+}
+
+export const AlignRight: Story = {
+  args: {
+    algin: 'right',
+  },
+  render: args => (
+    <Tabs {...args}>
+      <TabsList>
+        <TabsTrigger value="bestSeller">Best Seller</TabsTrigger>
+        <TabsTrigger value="discountProducts">Discount products</TabsTrigger>
+        <TabsTrigger value="bundleDeals">Bundle Deals</TabsTrigger>
+        <TabsTrigger value="recommend">Recommend</TabsTrigger>
+      </TabsList>
+      <TabsContent value="bestSeller">这里展示畅销商品内容。</TabsContent>
+      <TabsContent value="discountProducts">这里展示折扣商品内容。</TabsContent>
+      <TabsContent value="bundleDeals">这里展示套装商品内容。</TabsContent>
+      <TabsContent value="recommend">这里展示推荐商品内容。</TabsContent>
+    </Tabs>
+  ),
+}
+
+export const Disabled: Story = {
+  args: {
+    defaultValue: '',
+  },
+  render: args => (
+    <Tabs {...args}>
+      <TabsList>
+        <TabsTrigger disabled value="bestSeller">
+          Best Seller
+        </TabsTrigger>
+        <TabsTrigger value="discountProducts">Discount products</TabsTrigger>
+        <TabsTrigger value="bundleDeals">Bundle Deals</TabsTrigger>
+        <TabsTrigger value="recommend">Recommend</TabsTrigger>
+      </TabsList>
+      <TabsContent value="bestSeller">这里展示畅销商品内容。</TabsContent>
+      <TabsContent value="discountProducts">这里展示折扣商品内容。</TabsContent>
+      <TabsContent value="bundleDeals">这里展示套装商品内容。</TabsContent>
+      <TabsContent value="recommend">这里展示推荐商品内容。</TabsContent>
+    </Tabs>
+  ),
+}

package/src/stories/text.stories.tsx

@@ -10,7 +10,7 @@ const meta = {
     layout: 'padded',
     docs: {
       description: {
-        component: '文本组件, 简单封装了常用的样式字段，用于展示文本内容.',
+        component: '文本组件, 用于展示文本内容.',
       },
     },
   },
@@ -20,10 +20,10 @@ const meta = {
       control: {
         type: 'select',
       },
-      description: '文本尺寸，默认为none，浏览器默认大小和行高，1～9预设字体大小和行高',
-      options: ['none', 1, 2, 3, 4, 5, 6, 7, 8, 9],
+      description: '文本尺寸 3: 正文, 2: 补充文本, 1: 小标题',
+      options: [1, 2, 3],
       table: {
-        defaultValue: { summary: 'none' },
+        defaultValue: { summary: '3' },
       },
     },
     weight: {
@@ -59,23 +59,15 @@ const meta = {
         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',
+    size: 3,
     weight: 'normal',
     align: 'left',
-    lineHeights: 'normal',
     html: '',
     as: 'p',
   },
@@ -87,7 +79,7 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
   args: {
     children: ' The quick brown fox jumps over the lazy dog.',
-    size: 'none',
+    size: 3,
     weight: 'normal',
   },
 }
@@ -95,16 +87,10 @@ export const Default: Story = {
 export const Sizes: Story = {
   render() {
     return (
-      <div className="ai-flex ai-flex-col">
+      <div className="flex 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>
     )
   },
@@ -113,7 +99,7 @@ export const Sizes: Story = {
 export const weight: Story = {
   render() {
     return (
-      <div className="ai-flex ai-flex-col">
+      <div className="flex 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>
@@ -123,17 +109,7 @@ export const weight: Story = {
   },
 }
 
-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() {

package/src/styles/global.css

@@ -2,200 +2,3 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --btn-bg-color: #00a7e1;
-  --btn-text-color: #ffffff;
-  --btn-bg-active-color: #00a7e1;
-  --btn-bg-disabled-color: #ccdfe850;
-
-  --btn-bg-secondary-color: #ffffff;
-  --btn-text-secondary-color: #333333;
-  --btn-bg-secondary-active-color: #555555;
-  --btn-bg-secondary-disabled-color: #f5f5f550;
-
-  --btn-radius: 0;
-
-  --radius: 3em;
-
-  --brand-color-1: #005d8e;
-  --brand-color-2: ##337da5;
-  --brand-color-3: ##669ebb;
-  --brand-color-4: #99bed2;
-  --brand-color-5: #ccdfe8;
-
-  --secondary-brand-color-1: #042637;
-  --secondary-brand-color-2: #b3ecfb;
-  --secondary-brand-color-3: #f8f7f6;
-
-  --success-color-1: #34c759;
-  --success-color-2: #5dd27a;
-  --success-color-3: #85dd9b;
-  --success-color-4: #aee9bd;
-  --success-color-5: #d6f4de;
-
-  --warning-color-1: #ffc24d;
-  --warning-color-2: #fdcc6e;
-  --warning-color-3: #fbd68f;
-  --warning-color-4: #f8e0af;
-  --warning-color-5: #f6ead0;
-
-  --error-color-1: #ff4d4d;
-  --error-color-2: #fd6e6e;
-  --error-color-3: #fb908f;
-  --error-color-4: #f8b1af;
-  --error-color-5: #f6d3d0;
-
-  --primary-color: #333333;
-  --secondary-color: #666666;
-  --tertiary-color: #999999;
-  --quaternary-color: #cccccc;
-  --white-color: #ffffff;
-  --white-disable-color: hsla(0, 0%, 96%, 0.5);
-
-  --container-primary-color: #ffffff;
-  --container-secondary-color: #f4f4f1;
-
-  --bg-color-1: #f4f4f1;
-  --bg-color-2: #efefec;
-
-  --line-color: #e9e9e9;
-
-  --masks-color-1: hsla(0, 0%, 0%, 0.5);
-  --masks-color-2: hsla(0, 0%, 0%, 0.85);
-}
-
-:root[data-brand-theme='anker'] {
-  --btn-bg-color: #00befa;
-  --btn-text-color: #ffffff;
-  --btn-bg-active-color: #00aaff;
-  --btn-bg-disabled-color: rgba(29, 62, 79, 0.7);
-
-  --btn-bg-secondary-color: #ffffff;
-  --btn-text-secondary-color: #1d1d1f;
-  --btn-bg-secondary-active-color: #6e6e73;
-  --btn-bg-secondary-disabled-color: rgba(221, 221, 221, 0.7);
-  --btn-border-secondary-border-color: #acacac;
-
-  --btn-radius: 0;
-
-  --radius: 0em;
-
-  --letter-spacing-normal: -0.02em;
-  --line-height-tight: 1.2;
-  --line-height-normal: 1.4;
-  --line-height-loose: 1.6;
-}
-
-:root[data-brand-theme='eufy'] {
-  --btn-bg-color: #005d8e;
-  --btn-text-color: #ffffff;
-  --btn-bg-active-color: #669ebb;
-  --btn-bg-disabled-color: #ccdfe850;
-
-  --btn-bg-secondary-color: #ffffff;
-  --btn-text-secondary-color: #333333;
-  --btn-bg-secondary-active-color: #555555;
-  --btn-bg-secondary-disabled-color: #f5f5f550;
-
-  --btn-radius: 40px;
-
-  --radius: 40px;
-
-  --brand-color-1: #005d8e;
-  --brand-color-2: ##337da5;
-  --brand-color-3: ##669ebb;
-  --brand-color-4: #99bed2;
-  --brand-color-5: #ccdfe8;
-
-  --secondary-brand-color-1: #042637;
-  --secondary-brand-color-2: #b3ecfb;
-  --secondary-brand-color-3: #f8f7f6;
-
-  --success-color-1: #34c759;
-  --success-color-2: #5dd27a;
-  --success-color-3: #85dd9b;
-  --success-color-4: #aee9bd;
-  --success-color-5: #d6f4de;
-
-  --warning-color-1: #ffc24d;
-  --warning-color-2: #fdcc6e;
-  --warning-color-3: #fbd68f;
-  --warning-color-4: #f8e0af;
-  --warning-color-5: #f6ead0;
-
-  --error-color-1: #ff4d4d;
-  --error-color-2: #fd6e6e;
-  --error-color-3: #fb908f;
-  --error-color-4: #f8b1af;
-  --error-color-5: #f6d3d0;
-
-  --primary-color: #333333;
-  --secondary-color: #666666;
-  --tertiary-color: #999999;
-  --quaternary-color: #cccccc;
-  --white-color: #ffffff;
-  --white-disable-color: hsla(0, 0%, 96%, 0.5);
-
-  --container-primary-color: #ffffff;
-  --container-secondary-color: #f4f4f1;
-
-  --bg-color-1: #f4f4f1;
-  --bg-color-2: #efefec;
-
-  --line-color: #e9e9e9;
-
-  --masks-color-1: hsla(0, 0%, 0%, 0.5);
-  --masks-color-2: hsla(0, 0%, 0%, 0.85);
-}
-
-:root[data-brand-theme='nebula'] {
-  --btn-bg-color: #e42d46;
-  --btn-text-color: #ffffff;
-  --btn-bg-active-color: #ff3d5a;
-
-  --btn-radius: 0;
-
-  --radius: 0em;
-
-  --brand-color-1: #e42d46;
-}
-
-:root[data-brand-theme='soundcore'] {
-  --btn-bg-color: #17bbef;
-  --btn-text-color: #ffffff;
-  --btn-bg-color-active: #48cffa;
-  --btn-bg-disabled-color: #ccdfe850;
-
-  --btn-bg-secondary-color: #ffffff;
-  --btn-text-secondary-color: #17bbef;
-  --btn-bg-secondary-active-color: #17bbef;
-  --btn-bg-secondary-disabled-color: #f5f5f550;
-
-  --btn-radius: 30px;
-
-  --radius: 0em;
-
-  --brand-color-1: #17bbef;
-}
-
-:root[data-brand-theme='ankerWork'] {
-  --btn-bg-color: #00a7e1;
-  --btn-text-color: #fff;
-  --btn-bg-active-color: #606060;
-
-  --btn-radius: 0px;
-  --radius: 0em;
-
-  --brand-color-1: #00a7e1;
-}
-
-:root[data-brand-theme='ankerMake'] {
-  --btn-bg-color: #88f387;
-  --btn-text-color: #333333;
-  --btn-bg-active-color: #88f387;
-
-  --btn-radius: 9999px;
-  --radius: 0em;
-
-  --brand-color-1: #88f387;
-}

package/src/types/props.ts

@@ -0,0 +1,5 @@
+export interface ComponentCommonProps  {
+    style?: string
+    event?: any
+    condition?: any
+}