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

package/src/stories/container.stories.tsx

@@ -1,97 +0,0 @@
-import React from 'react'
-import { Container } from '../components/index.js'
-import type { Meta, StoryObj } from '@storybook/react'
-import { cn } from '../helpers/utils.js'
-
-const meta = {
-  title: 'Layout/Container',
-  component: Container,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component: `
-Container 容器组件，用于限制和约束内容的最大宽度，实现响应式的页面布局。
-
-### 实现细节
-- 基于 Tailwind CSS 实现
-- 默认最大宽度为 1664px
-- 响应式边距设计：
-  - 默认: 左右边距 16px (mx-4)
-  - sm: 左右边距 32px (mx-8)
-  - md: 左右边距 64px (mx-16)
-  - lg: 左右边距 64px (mx-16)
-  - xl: 左右边距 128px (mx-32)
-
-        `,
-      },
-    },
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof Container>
-
-export default meta
-
-type Story = StoryObj<typeof Container>
-
-// 基础示例
-export const Basic = () => (
-  <Container className="p-4">
-    <div className="bg-blue-100 p-4 rounded-lg text-center">
-      基础容器 - 自动居中，响应式宽度
-    </div>
-  </Container>
-)
-
-// 带内边距和背景色
-export const WithPaddingAndBackground = () => (
-  <Container className="p-4 bg-gray-50">
-    <div className="space-y-4">
-      <div className="bg-white p-4 rounded-lg shadow-sm">
-        <h3 className="text-lg font-medium">内容区块 1</h3>
-        <p className="text-gray-600">带有内边距和背景色的容器示例</p>
-      </div>
-      <div className="bg-white p-4 rounded-lg shadow-sm">
-        <h3 className="text-lg font-medium">内容区块 2</h3>
-        <p className="text-gray-600">展示内容的组织方式</p>
-      </div>
-    </div>
-  </Container>
-)
-
-// 响应式内边距
-export const ResponsivePadding = () => (
-  <Container className="px-4 sm:px-6 md:px-8 py-4 bg-gradient-to-r from-blue-50 to-purple-50">
-    <div className="bg-white p-4 rounded-lg shadow-sm">
-      <h3 className="text-lg font-medium">响应式内边距</h3>
-      <p className="text-gray-600">
-        在不同屏幕尺寸下有不同的水平内边距：
-        <br />
-        默认: px-4 (16px)
-        <br />
-        sm: px-6 (24px)
-        <br />
-        md: px-8 (32px)
-      </p>
-    </div>
-  </Container>
-)
-
-// 嵌套内容示例
-export const NestedContent = () => (
-  <Container className="p-4">
-    <header className="bg-gray-800 text-white p-4 rounded-t-lg">
-      <h2 className="text-xl">页面标题</h2>
-    </header>
-    <main className="bg-white p-4 border-x border-gray-200">
-      <p className="text-gray-600 mb-4">主要内容区域</p>
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div className="bg-blue-50 p-4 rounded">内容块 1</div>
-        <div className="bg-purple-50 p-4 rounded">内容块 2</div>
-      </div>
-    </main>
-    <footer className="bg-gray-100 p-4 rounded-b-lg border-x border-b border-gray-200">
-      <p className="text-gray-500 text-sm">页脚内容</p>
-    </footer>
-  </Container>
-)

package/src/stories/dialog.stories.tsx

@@ -1,74 +0,0 @@
-import React from 'react'
-import {
-  Button,
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-  Input,
-} from '../components/index.js'
-import type { Meta, StoryObj } from '@storybook/react/*'
-
-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 default meta
-
-type Story = StoryObj<typeof Dialog>
-
-export const Default: Story = {
-  args: {
-    children: (
-      <>
-        <DialogTrigger asChild>
-          <button>Edit Profile</button>
-        </DialogTrigger>
-        <DialogContent className="sm: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">
-                Name
-              </label>
-              <Input id="name" defaultValue="Pedro Duarte" className="col-span-3" />
-            </div>
-            <div className="grid grid-cols-4 items-center gap-4">
-              <label htmlFor="username" className="text-right">
-                Username
-              </label>
-              <Input id="username" defaultValue="@peduarte" className="col-span-3" />
-            </div>
-          </div>
-          <DialogFooter>
-            <Button type="submit">Save changes</Button>
-          </DialogFooter>
-        </DialogContent>
-      </>
-    ),
-  },
-}

package/src/stories/drawer.stories.tsx

@@ -1,88 +0,0 @@
-import React from 'react'
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTrigger,
-  Button,
-} from '../components/index.js'
-import type { Meta, StoryObj } from '@storybook/react'
-
-const meta = {
-  title: 'Components/Drawer',
-  component: Drawer,
-  subcomponents: {
-    DrawerClose,
-    DrawerContent,
-    DrawerFooter,
-    DrawerHeader,
-    DrawerTrigger,
-  } as any,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: '抽屉组件；基于 https://vaul.emilkowal.ski/api 开发',
-      },
-    },
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof Drawer>
-
-export default meta
-
-type Story = StoryObj<typeof Drawer>
-
-export const Default: Story = {
-  args: {
-    direction: 'right',
-    children: (
-      <>
-        <DrawerTrigger asChild>
-          <Button>Open Drawer</Button>
-        </DrawerTrigger>
-        <DrawerContent>
-          <div className="mx-auto w-full max-w-sm">
-            <DrawerHeader>
-              <span>My Cart(0)</span>
-            </DrawerHeader>
-            <div className="p-4 pb-0">The contents of the drawer...</div>
-            <DrawerFooter>
-              <DrawerClose asChild>
-                <Button>Cancel</Button>
-              </DrawerClose>
-            </DrawerFooter>
-          </div>
-        </DrawerContent>
-      </>
-    ),
-  },
-}
-
-export const Bottom: Story = {
-  args: {
-    direction: 'bottom',
-    children: (
-      <>
-        <DrawerTrigger asChild>
-          <Button>Open Drawer</Button>
-        </DrawerTrigger>
-        <DrawerContent>
-          <div className="mx-auto w-full max-w-sm">
-            <DrawerHeader>
-              <span>Policy</span>
-            </DrawerHeader>
-            <div className="p-4 pb-0">The contents of the drawer...</div>
-            <DrawerFooter>
-              <DrawerClose asChild>
-                <Button className="ai-w-40">Agree</Button>
-              </DrawerClose>
-            </DrawerFooter>
-          </div>
-        </DrawerContent>
-      </>
-    ),
-  },
-}

package/src/stories/drop-down.stories.tsx

@@ -1,83 +0,0 @@
-import type { Meta } from '@storybook/react'
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
-} from '../components/drop-down'
-
-const meta = {
-  // 同时定义了页面左侧菜单
-  title: 'Components/DropDown',
-  component: DropdownMenu,
-  subcomponents: {
-    DropdownMenuTrigger,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuCheckboxItem,
-    DropdownMenuRadioItem,
-    DropdownMenuLabel,
-    DropdownMenuSeparator,
-    DropdownMenuShortcut,
-    DropdownMenuGroup,
-    DropdownMenuPortal,
-    DropdownMenuSub,
-    DropdownMenuSubContent,
-    DropdownMenuSubTrigger,
-    DropdownMenuRadioGroup,
-  } as any,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'dropdown组件,基于@radix-ui/react-dropdown-menu,https://www.radix-ui.com/primitives/docs/components/dropdown-menu',
-      },
-    },
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-} satisfies Meta<typeof DropdownMenu>
-
-export default meta
-
-export const Default = () => (
-  <DropdownMenu>
-    <DropdownMenuTrigger asChild>
-      <span>Open</span>
-    </DropdownMenuTrigger>
-    <DropdownMenuContent>
-      <DropdownMenuLabel>My Account</DropdownMenuLabel>
-      <DropdownMenuGroup>
-        <DropdownMenuItem>
-          Profile
-          <DropdownMenuShortcut>⌘</DropdownMenuShortcut>
-        </DropdownMenuItem>
-        <DropdownMenuItem>Billing</DropdownMenuItem>
-      </DropdownMenuGroup>
-      <DropdownMenuGroup>
-        <DropdownMenuItem>Team</DropdownMenuItem>
-        <DropdownMenuSub>
-          <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
-          <DropdownMenuPortal>
-            <DropdownMenuSubContent>
-              <DropdownMenuItem>Email</DropdownMenuItem>
-              <DropdownMenuItem>Message</DropdownMenuItem>
-            </DropdownMenuSubContent>
-          </DropdownMenuPortal>
-        </DropdownMenuSub>
-      </DropdownMenuGroup>
-    </DropdownMenuContent>
-  </DropdownMenu>
-)

package/src/stories/evaluate.stories.tsx

@@ -1,53 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import Evaluate from '../biz-components/Evaluate'
-
-const meta = {
-  title: 'Biz-Components/Evaluate',
-  component: Evaluate,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof Evaluate>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const mockItems = [
-  {
-    title: 'Theoldpiggery',
-    subTitle: 'Fast Charging for 3 Devices',
-    description: 'Anker Prime 27,650mAh Power Bank (250W)',
-    avatar: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/85087c9c0ec8c86b481eaea247812c3e.png?v=1744612102',
-    img: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',
-  },
-  {
-    title: 'Theoldpiggery',
-    subTitle: 'Fast Charging for 3 Devices',
-    description: 'Anker Prime 27,650mAh Power Bank (250W)',
-    avatar: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/85087c9c0ec8c86b481eaea247812c3e.png?v=1744612102',
-    img: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',
-  },
-  {
-    title: 'Theoldpiggery',
-    subTitle: 'Fast Charging for 3 Devices',
-    description: 'Anker Prime 27,650mAh Power Bank (250W)Anker Prime 27,650mAh Power Bank (250W)Anker Prime 27,650mAh Power Bank (250W)650mAh Power Bank (250W)650mAh Power Bank (250W)',
-    avatar: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/85087c9c0ec8c86b481eaea247812c3e.png?v=1744612102',
-    img: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',
-  },
-]
-
-export const Default: Story = {
-  args: {
-    products: mockItems,
-    className: 'p-4',
-  },
-}
-
-export const Round: Story = {
-  args: {
-    products: mockItems,
-    className: 'p-4',
-    shape: 'round',
-  },
-}

package/src/stories/grid.stories.tsx

@@ -1,190 +0,0 @@
-import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
-import { Grid, GridItem } from '../components/gird.js'
-
-const meta = {
-  title: 'Layout/Grid',
-  component: Grid,
-  subcomponents: {
-    GridItem,
-  },
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component: `
-Grid 布局组件，基于 CSS Grid 实现的 12 列网格系统。
-
-### 实现细节
-- Grid 组件使用 CSS Grid 布局，默认为 12 列网格
-- 默认间距为 gap-3 (12px)，在 md 断点后变为 gap-4 (16px)
-- 使用 Tailwind CSS 的网格类实现，无需额外的 CSS
-
-### 宽度 和 自定义定位开始和结束位置
-- 使用 start 和 end 属性来指定网格项的开始和结束位置（1-13）
-- 使用 span 属性来指定网格项的跨度（1-12）
-        `,
-      },
-    },
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof Grid>
-
-export default meta
-
-type Story = StoryObj<typeof Grid>
-
-// 基础布局
-export const Basic = () => (
-  <div className="p-4">
-    <Grid>
-      <GridItem span={12} className="bg-blue-100 p-4 text-center">span-12</GridItem>
-      <GridItem span={6} className="bg-blue-200 p-4 text-center">span-6</GridItem>
-      <GridItem span={6} className="bg-blue-300 p-4 text-center">span-6</GridItem>
-      <GridItem span={4} className="bg-blue-400 p-4 text-center">span-4</GridItem>
-      <GridItem span={4} className="bg-blue-500 p-4 text-center">span-4</GridItem>
-      <GridItem span={4} className="bg-blue-600 p-4 text-center">span-4</GridItem>
-      <GridItem span={3} className="bg-blue-700 p-4 text-center text-white">span-3</GridItem>
-      <GridItem span={3} className="bg-blue-800 p-4 text-center text-white">span-3</GridItem>
-      <GridItem span={3} className="bg-blue-900 p-4 text-center text-white">span-3</GridItem>
-      <GridItem span={3} className="bg-blue-950 p-4 text-center text-white">span-3</GridItem>
-    </Grid>
-  </div>
-)
-
-type GridStart = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
-type GridEnd = 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13
-
-
-
-export const CustomPosition = ({
-  baseStart = 2,
-  baseEnd = 6,
-  showBoundaryExamples = true,
-  gridGap = '',
-  colorScheme = 'blue'
-}: any) => (
-  <div className="p-4">
-    <Grid className={gridGap}>
-      {/* 基本定位示例 */}
-      <GridItem 
-        start={baseStart as GridStart} 
-        end={baseEnd as GridEnd} 
-        className={`bg-${colorScheme}-200 p-4 text-center`}
-      >
-        start-{baseStart} end-{baseEnd}
-      </GridItem>
-      <GridItem 
-        start={(baseEnd + 1) as GridStart} 
-        end={12} 
-        className={`bg-${colorScheme}-300 p-4 text-center`}
-      >
-        start-{baseEnd + 1} end-12
-      </GridItem>
-      
-      {/* 跨越整行示例 */}
-      <GridItem 
-        start={1} 
-        end={13} 
-        className={`bg-${colorScheme}-400 p-4 text-center`}
-      >
-        start-1 end-13 (整行)
-      </GridItem>
-      
-      {/* 单格示例 */}
-      <GridItem 
-        start={1} 
-        end={2} 
-        className={`bg-${colorScheme}-500 p-4 text-center text-white`}
-      >
-        1格 (start-1)
-      </GridItem>
-      <GridItem 
-        start={3} 
-        end={4} 
-        className={`bg-${colorScheme}-500 p-4 text-center text-white`}
-      >
-        1格 (start-3)
-      </GridItem>
-      
-      {/* 不规则跨度示例 */}
-      <GridItem 
-        start={5} 
-        end={10} 
-        className={`bg-${colorScheme}-600 p-4 text-center text-white`}
-      >
-        start-5 end-10
-      </GridItem>
-      <GridItem 
-        start={10} 
-        end={13} 
-        className={`bg-${colorScheme}-700 p-4 text-center text-white`}
-      >
-        end-13
-      </GridItem>
-      
-      {/* 使用 span 的示例 */}
-      <GridItem 
-        start={1} 
-        span={3} 
-        className={`bg-${colorScheme}-800 p-4 text-center text-white`}
-      >
-        start-1 span-3
-      </GridItem>
-      <GridItem 
-        start={4} 
-        span={9} 
-        className={`bg-${colorScheme}-900 p-4 text-center text-white`}
-      >
-        start-4 span-9
-      </GridItem>
-      
-      {/* 边界情况示例 */}
-      {showBoundaryExamples && (
-        <>
-          <GridItem 
-            start={12} 
-            span={1} 
-            className="bg-yellow-500 p-4 text-center text-white"
-          >
-            最后1格
-          </GridItem>
-          <GridItem 
-            start={1} 
-            span={1} 
-            className="bg-yellow-600 p-4 text-center text-white"
-          >
-            第1格
-          </GridItem>
-        </>
-      )}
-    </Grid>
-  </div>
-)
-
-
-// 自定义间距
-export const CustomGap = () => (
-  <div className="p-4">
-    <Grid className="gap-8">
-      <GridItem span={6} className="bg-purple-200 p-4 text-center">间距 32px (gap-8)</GridItem>
-      <GridItem span={6} className="bg-purple-300 p-4 text-center">间距 32px (gap-8)</GridItem>
-      <GridItem span={4} className="bg-purple-400 p-4 text-center">间距 32px (gap-8)</GridItem>
-      <GridItem span={4} className="bg-purple-500 p-4 text-center text-white">间距 32px (gap-8)</GridItem>
-      <GridItem span={4} className="bg-purple-600 p-4 text-center text-white">间距 32px (gap-8)</GridItem>
-    </Grid>
-  </div>
-)
-
-// 不同的横向和纵向间距
-export const DifferentGaps = () => (
-  <div className="p-4">
-    <Grid className="gap-x-8 gap-y-2">
-      <GridItem span={6} className="bg-orange-200 p-4 text-center">横向 32px 纵向 8px</GridItem>
-      <GridItem span={6} className="bg-orange-300 p-4 text-center">横向 32px 纵向 8px</GridItem>
-      <GridItem span={4} className="bg-orange-400 p-4 text-center">横向 32px 纵向 8px</GridItem>
-      <GridItem span={4} className="bg-orange-500 p-4 text-center text-white">横向 32px 纵向 8px</GridItem>
-      <GridItem span={4} className="bg-orange-600 p-4 text-center text-white">横向 32px 纵向 8px</GridItem>
-    </Grid>
-  </div>
-) 

package/src/stories/heading.stories.tsx

@@ -1,96 +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: [1, 2, 3, 4, 5],
-      description: '文本尺寸，从5到1，越来越小',
-      table: {
-        defaultValue: { summary: '5' },
-      },
-    },
-    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: 5,
-    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>
-    </>
-  ),
-}