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

package/src/stories/slogan.stories.tsx

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

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

@@ -1,130 +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: '文本尺寸 3: 正文, 2: 补充文本, 1: 小标题',
-      options: [1, 2, 3],
-      table: {
-        defaultValue: { summary: '3' },
-      },
-    },
-    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' },
-      },
-    },
-    html: {
-      type: 'string',
-      description: '相当于 dangerouslySetInnerHTML',
-    },
-  },
-  args: {
-    size: 3,
-    weight: 'normal',
-    align: 'left',
-    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: 3,
-    weight: 'normal',
-  },
-}
-
-export const Sizes: Story = {
-  render() {
-    return (
-      <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>
-      </div>
-    )
-  },
-}
-
-export const weight: Story = {
-  render() {
-    return (
-      <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>
-        <Text weight="bold">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.`}
-      />
-    )
-  },
-}

package/src/styles/global.css

@@ -1,4 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-

package/src/types/props.ts

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