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

package/src/components/tabs.tsx

@@ -1,78 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { cn } from '../helpers/index.js'
-
-import * as TabsPrimitive from '@radix-ui/react-tabs'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-const TabListContext = React.createContext<{ algin?: 'left' | 'center' | 'right' }>({
-  algin: 'left',
-})
-
-const Tabs = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & { algin?: 'left' | 'center' | 'right' }
->(({ children, algin = 'left', ...props }, ref) => (
-  <TabsPrimitive.Root ref={ref} {...props}>
-    <TabListContext.Provider value={{ algin }}>{children}</TabListContext.Provider>
-  </TabsPrimitive.Root>
-))
-Tabs.displayName = 'Tabs'
-
-const tabsListVariants = cva('', {
-  variants: {
-    algin: {
-      left: 'justify-left',
-      center: 'justify-center',
-      right: 'justify-end',
-    },
-  },
-  defaultVariants: {
-    algin: 'left',
-  },
-})
-
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => {
-  const { algin: alginFromParent } = React.useContext(TabListContext)
-  return (
-    <TabsPrimitive.List
-      ref={ref}
-      className={cn(
-        'border-b-lines flex gap-[24px] overflow-x-auto border-b',
-        tabsListVariants({
-          algin: alginFromParent,
-        }),
-        className
-      )}
-      {...props}
-    />
-  )
-})
-TabsList.displayName = TabsPrimitive.List.displayName
-
-const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      'border-b-brand-0 disabled:text-btn-secondary-disabled shrink-0 text-base font-bold data-[state=active]:border-b-[3px]',
-      className
-    )}
-    {...props}
-  />
-))
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
-
-const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => <TabsPrimitive.Content ref={ref} className={cn(className)} {...props} />)
-TabsContent.displayName = TabsPrimitive.Content.displayName
-
-export { Tabs, TabsList, TabsTrigger, TabsContent }

package/src/components/text.tsx

@@ -1,99 +0,0 @@
-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('tracking font-body', {
-  variants: {
-    size: {
-      1: 'text-text-1 text-info-primary',
-      2: 'text-text-2 text-info-primary',
-      3: 'text-text-3 text-info-primary',
-    },
-    weight: {
-      light: 'font-light',
-      normal: 'font-normal',
-      medium: 'font-medium',
-      semibold: 'font-semibold',
-      bold: 'font-bold',
-    },
-    align: {
-      left: 'text-left',
-      center: 'text-center',
-      right: 'text-right',
-    },
-  },
-  defaultVariants: {
-    size: 3,
-    weight: 'normal',
-  },
-})
-
-type TextElement = React.ElementRef<'span'>
-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 = 3,
-    weight,
-    align,
-    className,
-    asChild,
-    as: Tag = 'span',
-    color,
-    html,
-    ...textProps
-  } = props
-
-  const htmlContentProps = html
-    ? {
-      dangerouslySetInnerHTML: { __html: html },
-    }
-    : null
-
-  const styleProps = color
-    ? {
-      style: {
-        color,
-      },
-    }
-    : null
-
-  return (
-    <Slot
-      {...textProps}
-      ref={forwardedRef}
-      className={cn(
-        textVariants({
-          size,
-          weight,
-          align,
-        }),
-        className
-      )}
-      {...htmlContentProps}
-      {...styleProps}
-    >
-      {asChild ? children : <Tag>{htmlContentProps ? null : children}</Tag>}
-    </Slot>
-  )
-})
-Text.displayName = 'Text'
-
-export { Text }
-export type { TextProps }

package/src/components/theme.tsx

@@ -1,20 +0,0 @@
-'use client'
-import * as React from 'react'
-
-interface ThemeProps {
-  brand: string
-  children: React.ReactNode
-}
-/**
- *
- * @param param
- * @returns
- */
-const Theme = ({ brand, children }: ThemeProps) => {
-  React.useLayoutEffect(() => {
-    document.querySelector('html')?.setAttribute('data-brand-theme', brand)
-  }, [])
-  return <>{children}</>
-}
-
-export default Theme

package/src/helpers/component-props.ts

@@ -1,17 +0,0 @@
-import type React from 'react'
-
-type ComponentPropsAs<C extends React.ElementType<any>, T extends React.ComponentPropsWithoutRef<C>['as']> = Omit<
-  Extract<React.ComponentPropsWithoutRef<C>, { as: T }>,
-  'as' | 'asChild'
->
-
-// Omits the specified props from the component props. Autocomplete will suggest props
-// of the component, but won't restrict the omittable props to those that actually exist.
-type ComponentPropsWithout<
-  T extends React.ElementType,
-  O extends Omit<string, keyof React.ComponentPropsWithoutRef<T>> | keyof React.ComponentPropsWithoutRef<T>,
-> = Omit<React.ComponentPropsWithoutRef<T>, O & string>
-
-type RemovedProps = 'asChild' | 'defaultChecked' | 'defaultValue' | 'color'
-
-export type { ComponentPropsAs, ComponentPropsWithout, RemovedProps }

package/src/helpers/index.ts

@@ -1,2 +0,0 @@
-export { cn } from './utils.js'
-export { noop } from './utils.js'

package/src/helpers/utils.ts

@@ -1,16 +0,0 @@
-import { clsx, type ClassValue } from 'clsx'
-import { extendTailwindMerge } from 'tailwind-merge'
-
-const twMerge = extendTailwindMerge({
-  extend: {
-      theme: {
-          borderRadius: ['btn'],
-      },
-  },
-})
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
-
-export function noop(): any {}

package/src/icons/spinner.tsx

@@ -1,26 +0,0 @@
-import { cn } from '../helpers/index.js'
-
-export interface SpinnerProps {
-  className?: string
-}
-
-// eslint-disable-next-line no-unused-vars
-const Spinner = (props: SpinnerProps) => {
-  return (
-    <svg
-      fill="none"
-      viewBox="0 0 20 20"
-      xmlns="http://www.w3.org/2000/svg"
-      width="1rem"
-      className={cn('animate-spin', props.className)}
-    >
-      <path
-        d="M1 10C1 14.9706 5.02944 19 10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1"
-        strokeWidth="2"
-        strokeLinecap="round"
-      />
-    </svg>
-  )
-}
-
-export default Spinner

package/src/index.ts

@@ -1 +0,0 @@
-export * from './components/index.js'

package/src/shared/Styles.tsx

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

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

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

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

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