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

package/src/shared/Styles.tsx

@@ -0,0 +1,94 @@
+import React, { useMemo } from 'react';
+
+export interface StylesProps {
+  /** 自定义样式字符串 */
+  style?: string;
+  /** 唯一标识符 */
+  uid?: string;
+  /** 是否禁用 */
+  disabled?: boolean;
+}
+
+/**
+ * 生成唯一标识符
+ */
+const generateUID = () => {
+  return `style_${Math.random().toString(36).substring(2, 9)}_${Date.now().toString(36)}`;
+};
+
+/**
+ * 从组件 props 中提取样式相关属性
+ */
+export const getStylesProps = <T extends Record<string, unknown>>(props: T & StylesProps): StylesProps => {
+  const { style, uid, disabled } = props;
+  return { style, uid, disabled };
+};
+
+/**
+ * 样式注入组件
+ */
+const Styles: React.FC<StylesProps> = ({
+  style,
+  uid = generateUID(),
+  disabled = false,
+}) => {
+  if (!style || disabled) {
+    return null;
+  }
+
+  return (
+    <style data-style-id={uid}>
+      {`.block-${uid} { ${style} }`}
+    </style>
+  );
+};
+
+/**
+ * 样式 Hook，返回样式类名和样式组件
+ * @param styleProps - 样式属性
+ */
+export const useStyles = (styleProps?: Partial<StylesProps>) => {
+  const uid = useMemo(() => styleProps?.uid || generateUID(), [styleProps?.uid]);
+  
+  const StyleComponent = useMemo(() => (
+    <Styles {...styleProps} uid={uid} />
+  ), [styleProps, uid]);
+
+  return {
+    className: `block-${uid}`,
+    StyleComponent,
+    uid
+  } as const;
+};
+
+/**
+ * 样式高阶组件， 用于给组件用style 标签的形式追加样式
+ * @param WrappedComponent - 需要包装的组件
+ * @param defaultStyleProps - 默认样式属性
+ */
+export function withStyles<P extends object>(
+  WrappedComponent: React.ComponentType<P>,
+  defaultStyleProps?: Partial<StylesProps>
+) {
+  const WithStyles = function(props: Omit<P, keyof StylesProps> & Partial<StylesProps>) {
+    const finalStyleProps = {
+      ...defaultStyleProps,
+      ...getStylesProps(props)
+    };
+
+    const { className, StyleComponent } = useStyles(finalStyleProps);
+
+    return (
+      <>
+        {StyleComponent}
+        <WrappedComponent {...(props as P)} className={className} />
+      </>
+    );
+  };
+
+  // 直接使用原始组件的名称
+  WithStyles.displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
+  return WithStyles;
+}
+
+export default React.memo(Styles);

package/src/stories/HeroBanner.stories.tsx

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import HeroBanner from '../biz-components/HeroBanner/HeroBanner.js'
+
+const meta = {
+  title: 'Biz-Components/HeroBanner',
+  component: HeroBanner,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: `
+HeroBanner 组件用于展示网站的主要内容区域，通常包含标题、副标题和行动按钮。
+
+### 特点
+- 支持亮色和暗色主题
+- 使用 Mont For Anker 字体作为标题
+- 可配置主按钮和次要按钮
+- 支持底部产品列表
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof HeroBanner>
+
+export default meta
+type Story = StoryObj<typeof HeroBanner>
+
+const defaultBackground = "https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206"
+
+export const LightTheme: Story = {
+  args: {
+    title: "Anker Laptop Power",
+    subtitle: "Anker Prime 240W GaN Desktop Charger (4 Ports)",
+    background: defaultBackground,
+    theme: "light",
+    primaryButton: {
+      text: "Shop Now",
+      onClick: () => console.log("Primary button clicked")
+    },
+    secondaryButton: {
+      text: "Learn More",
+      onClick: () => console.log("Secondary button clicked")
+    },
+    products: [
+      { title: "Anker Prime 240W GaN Desktop Charger (4 Ports)", active: true },
+      { title: "Anker Prime 27,650mAh Power Bank (250W)" },
+      { title: "Anker Prime 240W GaN Desktop Charger (4 Ports)" }
+    ]
+  }
+}
+
+export const DarkTheme: Story = {
+  args: {
+    title: "Power Your Life",
+    subtitle: "Experience the next generation of charging technology with our innovative solutions designed for modern life.",
+    background: defaultBackground,
+    theme: "dark",
+    primaryButton: {
+      text: "Shop Now",
+      onClick: () => console.log("Primary button clicked")
+    },
+    secondaryButton: {
+      text: "Learn More",
+      onClick: () => console.log("Secondary button clicked")
+    }
+  }
+}
+
+export const WithoutSecondaryButton: Story = {
+  args: {
+    title: "Future of Charging",
+    subtitle: "Step into the future with our revolutionary charging solutions that redefine the way you power your devices.",
+    background: defaultBackground,
+    theme: "dark",
+    primaryButton: {
+      text: "Shop Now",
+      onClick: () => console.log("Primary button clicked")
+    },
+    products: [
+      { title: "Anker Prime 240W GaN Desktop Charger (4 Ports)" },
+      { title: "Anker Prime 27,650mAh Power Bank (250W)" },
+      { title: "Anker Prime 240W GaN Desktop Charger (4 Ports)" }
+    ]
+  }
+} 

package/src/stories/MemberEquity.stories.tsx

@@ -0,0 +1,107 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import MemberEquity from '../biz-components/MemberEquity';
+
+const meta: Meta<typeof MemberEquity> = {
+  title: 'Biz-Components/MemberEquity',
+  component: MemberEquity,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: ` 
+MemberEquity 组件是用于展示会员权益的组件。  
+
+
+### 自定义style 可用class 
+.member-equity-title  
+.member-equity-description  
+.member-equity-button-primary  
+.member-equity-button-secondary  
+      `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof MemberEquity>;
+
+// 默认样式 - 方形
+export const Default: Story = {
+  args: {
+    title: 'Become a Member Today',
+    description: 'Gain early access to new products, exclusive deals, and opportunities to try our products for free.',
+    backgroundImage: 'https://images.unsplash.com/photo-1484807352052-23338990c6c6',
+    primaryButton: {
+      text: 'Shop Now',
+      href: '/shop',
+    },
+    secondaryButton: {
+      text: 'Learn More',
+      href: '/learn',
+    },
+    shape: 'square',
+  },
+};
+
+// 圆角风格
+export const Round: Story = {
+  args: {
+    ...Default.args,
+    title: 'Join Our Family',
+    description: 'Get exclusive access to new products and special member-only discounts.',
+    backgroundImage: 'https://images.unsplash.com/photo-1558002038-1055907df827',
+    shape: 'round',
+  },
+};
+
+// 自定义按钮
+export const CustomButtons: Story = {
+  args: {
+    ...Default.args,
+    title: 'Premium Experience',
+    description: 'Join our community to get early access to new products and exclusive member benefits.',
+    backgroundImage: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e',
+    primaryButton: {
+      text: 'Join Now',
+      href: '/join',
+    },
+    secondaryButton: {
+      text: 'Explore Benefits',
+      href: '/benefits',
+    },
+  },
+};
+
+// 自定义样式
+export const CustomStyles: Story = {
+  args: {
+    ...Default.args,
+    title: 'Become a Member Today and opportunities',
+    style: `
+      .member-equity-title {
+          background: linear-gradient(
+                90deg,
+              #FFD700,   /* 金色 (Gold) */
+              #FFC000,   /* 亮金色 (Light Gold) */
+              #FFA500,   /* 橙色 (Orange) */
+              #FF8C00,   /* 深橙色 (Dark Orange) */
+              #FF6B00    /* 橙红色 (Red-Orange) */
+          );
+          -webkit-background-clip: text; /* 兼容 WebKit 浏览器 */
+          background-clip: text;
+          color: transparent; /* 隐藏原始文字颜色 */
+      }
+      .member-equity-description {
+        color: blue;
+      }
+      .member-equity-button-primary {
+        color: green;
+      }
+    `,
+    event: {
+
+    }
+  },
+}; 

package/src/stories/alert.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Alert, AlertDescription, AlertTitle } from '../components/index.js'
+import React from 'react'
+
+const meta = {
+  title: 'Components/Alert',
+  component: Alert,
+  subcomponents: {
+    AlertTitle,
+    AlertDescription,
+  },
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Alert component',
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Alert>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    status: 'success',
+    closable: true,
+    children: (
+      <>
+        <AlertTitle>Success</AlertTitle>
+        <AlertDescription>
+          This is related to general message notifications with supporting text descriptions.
+        </AlertDescription>
+      </>
+    ),
+  },
+}

package/src/stories/avatar.stories.tsx

@@ -0,0 +1,83 @@
+import type { Meta } from '@storybook/react/*'
+import { UserIcon } from '@storybook/icons'
+import { Avatar, AvatarImage, AvatarFallback } from '../components/index.js'
+
+const meta = {
+  title: 'Components/Avatar',
+  component: Avatar,
+  tags: ['autodocs'],
+  subcomponents: { AvatarImage, AvatarFallback } as any,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'avatar组件,基于@radix-ui/react-avatar,https://www.radix-ui.com/primitives/docs/components/avatar',
+      },
+    },
+  },
+  argTypes: {
+    size: {
+      description: '尺寸',
+      table: {
+        defaultValue: { summary: 'small' },
+      },
+    },
+  },
+} satisfies Meta<typeof Avatar>
+
+export default meta
+
+export const Default = () => (
+  <Avatar>
+    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+    <AvatarFallback>CN</AvatarFallback>
+  </Avatar>
+)
+
+export const AvatarType = () => (
+  <div className="flex items-center gap-4">
+    <Avatar>
+      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+    <Avatar>
+      <AvatarFallback>
+        <UserIcon />
+      </AvatarFallback>
+    </Avatar>
+    <Avatar>
+      <AvatarFallback>A</AvatarFallback>
+    </Avatar>
+  </div>
+)
+
+export const AvatarTextAdaptation = () => (
+  <div className="flex items-center gap-4">
+    <Avatar size="large" isAdaptation>
+      Text
+    </Avatar>
+    <Avatar size="large" isAdaptation>
+      TextTextText
+    </Avatar>
+    <Avatar size="large" isAdaptation>
+      TextTextTextTextText
+    </Avatar>
+  </div>
+)
+
+export const AvatarSize = () => (
+  <div className="flex items-center gap-4">
+    <Avatar>
+      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+    <Avatar size="medium">
+      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+    <Avatar size="large">
+      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+  </div>
+)

package/src/stories/badge.stories.tsx

@@ -11,16 +11,10 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {
-    variant: {
-      control: {
-        type: 'select',
-      },
-      options: ['default', 'destructive', 'outline', 'secondary'],
-    },
+
   },
   args: {
-    variant: 'default',
-    children: 'New',
+
   },
 } satisfies Meta<typeof Badge>
 
@@ -28,16 +22,18 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {}
+export const Default: Story = {
+  args: {
+    children: 'Badge',
+  }
+}
 
 export const Examples: Story = {
   render() {
     return (
-      <div className="ai-flex ai-flex-col ai-space-y-4">
-        <Badge variant="default">Default</Badge>
-        <Badge variant="secondary">Secondary</Badge>
-        <Badge variant="destructive">Destructive</Badge>
-        <Badge variant="outline">Outline</Badge>
+      <div className="flex flex-col space-y-4">
+        <Badge>Outline</Badge>
+        <Badge>Fill</Badge>
       </div>
     )
   },

package/src/stories/brandEquity.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import BrandEquity from '../biz-components/BrandEquity/BrandEquity.js';
+
+const ShieldCheckIcon = (props: { className?: string }) => <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.4653 6.25C11.9801 4.79351 13.3691 3.75 15.0019 3.75C16.6347 3.75 18.0237 4.79351 18.5385 6.25H11.4653ZM8.75192 8.75V13.75C8.75192 14.4404 9.31156 15 10.0019 15C10.6923 15 11.2519 14.4404 11.2519 13.75V8.75H18.7519V13.75C18.7519 14.4404 19.3116 15 20.0019 15C20.6923 15 21.2519 14.4404 21.2519 13.75V8.75H23.8452C24.5037 8.75 25.0493 9.26086 25.0925 9.91794L26.0793 24.9179C26.1268 25.639 25.5547 26.25 24.832 26.25H5.1718C4.44915 26.25 3.87705 25.639 3.92449 24.9179L4.91133 9.91794C4.95456 9.26086 5.50014 8.75 6.15864 8.75H8.75192ZM8.87694 6.25C9.45603 3.3972 11.9782 1.25 15.0019 1.25C18.0256 1.25 20.5478 3.3972 21.1269 6.25H23.8452C25.8207 6.25 27.4574 7.78258 27.5871 9.75382L28.5739 24.7538C28.7163 26.9171 27 28.75 24.832 28.75H5.1718C3.00385 28.75 1.28756 26.9171 1.42989 24.7538L2.41673 9.75382C2.54641 7.78259 4.18314 6.25 6.15864 6.25H8.87694ZM12.5019 16.25C12.5019 15.5596 13.0616 15 13.7519 15H16.2519C16.9423 15 17.5019 15.5596 17.5019 16.25C17.5019 16.9404 16.9423 17.5 16.2519 17.5H13.7519C13.0616 17.5 12.5019 16.9404 12.5019 16.25Z" fill="#1D1D1F" />
+</svg>
+
+const meta = {
+  title: 'Biz-Components/BrandEquity',
+  component: BrandEquity,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof BrandEquity>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const mockItems = [
+  {
+    icon: <ShieldCheckIcon className="w-6 h-6" />,
+    title: 'Hassle-Free Warranty',
+    description: 'Comprehensive warranty protection on all purchases.',
+  },
+  {
+    icon: <ShieldCheckIcon className="w-6 h-6" />,
+    title: 'Our Happy Customers',
+    description: 'Join millions of satisfied Anker users worldwide.',
+  },
+  {
+    icon: <ShieldCheckIcon className="w-6 h-6" />,
+    title: 'Anker credits rewards',
+    description: 'Buy more, save more, and earn more.',
+  },
+  {
+    icon: <ShieldCheckIcon className="w-6 h-6" />,
+    title: 'Pay with Ease',
+    description: 'Pay immediately or in installments with Affirm.',
+  },
+  {
+    icon: <ShieldCheckIcon className="w-6 h-6" />,
+    title: '30-day money-back guarantee',
+    description: 'Return within 30 days for a full refund.',
+  },
+  {
+    avatarList: [
+      'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/25954496272e3aad27d750494d4748ca_c591cb1a-5f47-42d9-b356-0acd9e87fed0.png?v=1744612103',
+      'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ee5edd6de20a7af2f30f2fa976d779c9_6ddc29a7-c287-4afc-909c-383fe1f1a74b.png?v=1744612102',
+      'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/c3269421a5343c0e59065b53bd81c8f5_ba2fc271-206e-4480-b815-9eb76b45f691.png?v=1744612102',
+      'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/b0b7c87fb0819b6cd109bf4b0d865006_e0f7c15a-7d1a-45e7-aee3-783e681a3864.png?v=1744612102',
+      'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/85087c9c0ec8c86b481eaea247812c3e.png?v=1744612102'
+    ],
+    title: 'We are Here to Help',
+    description: 'Contact our expert team via email or live chat for assistance.',
+  },
+];
+
+export const Default: Story = {
+  args: {
+    items: mockItems,
+    className: "bg-[#eeeeee] p-4"
+  },
+};
+
+
+export const CustomBackground: Story = {
+  args: {
+    items: mockItems,
+    className: 'bg-gray-900 p-4',
+    itemShape: 'round',
+  },
+}; 

package/src/stories/button.stories.tsx

@@ -12,16 +12,28 @@ const meta = {
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: 'centered',
+    docs: {
+      description: {
+        component: `按钮组件, 分为多种变体和大小, 支持 loading 状态和图标`
+      }
+    }
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
   // More on argTypes: https://storybook.js.org/docs/api/argtypes
   argTypes: {
+    theme: {
+      control: {
+        type: 'select',
+      },
+      options: ['dark', 'light'],
+      description: '主题, 默认是 light',
+    },
     variant: {
       control: {
         type: 'select',
       },
-      options: ['primary', 'secondary', 'link', 'ghost'],
+      options: ['nature', 'primary', 'secondary', 'link', 'ghost'],
     },
     size: {
       control: {
@@ -38,6 +50,7 @@ const meta = {
     },
   },
   args: {
+    theme: 'light',
     variant: 'primary',
     size: 'base',
     children: 'Button',
@@ -55,6 +68,14 @@ type Story = StoryObj<typeof meta>
 // args 会作为 props 传递给组件
 // Story的名会作为菜单的名称 自动首字母大写并按照大写字母拆分 UseAsButton => Use As Button
 
+export const Nature: Story = {
+  args: {
+    size: 'lg',
+    variant: 'nature',
+    children: 'Default',
+  },
+}
+
 export const Primary: Story = {
   args: {
     size: 'lg',
@@ -83,7 +104,7 @@ export const WithIcon: Story = {
     size: 'lg',
     children: (
       <>
-        WithIcon <SearchIcon className="ai-ml-2" />
+        WithIcon <SearchIcon className="ml-2" />
       </>
     ),
   },
@@ -102,7 +123,7 @@ export const Spinner: Story = {
     size: 'lg',
     loading: true,
     spinner: (
-      <div className="ai-text-neutral-900 ai-animate-pulse ai-font-bold ai-flex-row ai-flex">
+      <div className="flex animate-pulse flex-row font-bold text-neutral-900">
         <svg
           viewBox="0 0 1024 1024"
           version="1.1"

package/src/stories/card.stories.tsx

@@ -0,0 +1,97 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Button,
+  Picture,
+} from '../components/index.js'
+import React from 'react'
+
+const meta = {
+  title: 'Components/Card',
+  component: Card,
+  subcomponents: {
+    CardHeader,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardTitle,
+  },
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          '卡片组件，内部可以嵌套CardHeader, CardContent, CardFooter等组件, CardHeader 内可以嵌套CardTitle, CardDescription',
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Card>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render() {
+    return (
+      <Card className="">
+        <CardHeader></CardHeader>
+        <CardContent>
+          <p>Charge Easily On the Go</p>
+          <p>charge Everything Everywhere Faster All at Once</p>
+        </CardContent>
+        <CardFooter className="flex justify-between">
+          <Button>Learn More</Button>
+        </CardFooter>
+      </Card>
+    )
+  },
+}
+
+export const WithHeader: Story = {
+  render() {
+    return (
+      <Card className="">
+        <CardHeader>
+          <CardTitle>Card title</CardTitle>
+          <CardDescription>Card description</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p>Charge Easily On the Go</p>
+          <p>charge Everything Everywhere Faster All at Once</p>
+        </CardContent>
+        <CardFooter className="flex justify-between">
+          <Button>Learn More</Button>
+        </CardFooter>
+      </Card>
+    )
+  },
+}
+
+export const WithImage: Story = {
+  render() {
+    return (
+      <Card className="w-[400px]">
+        <CardContent className="p-0">
+          <Picture
+            source="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e5e7c8b6a240bb042c57529a3299c255.png?v=1741664601"
+            alt="A random image"
+          />
+          <p className="p-2">
+            click learn more to see how we can help you charge everything everywhere faster all at once
+          </p>
+        </CardContent>
+        <CardFooter className="flex justify-between pt-[8px]">
+          <Button>Learn More</Button>
+        </CardFooter>
+      </Card>
+    )
+  },
+}