gemini-uis 0.1.0 → 0.1.2

package/src/libs/Button/guide/Button.stories.tsx

@@ -1,378 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { Button } from '@/libs/Button'
-
-const meta = {
-  title: 'Components/Button',
-  component: Button,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: '一个精简的按钮组件，仅保留基本功能，专为简单项目使用而设计。',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    type: {
-      control: 'select',
-      options: ['primary', 'secondary', 'outline', 'ghost', 'text', 'danger', 'default'],
-      description: '按钮变体',
-      table: {
-        type: { summary: 'ButtonType' },
-        defaultValue: { summary: 'primary' },
-      },
-    },
-    size: {
-      control: 'select',
-      options: ['xs', 'sm', 'md', 'lg', 'xl'],
-      description: '按钮尺寸',
-      table: {
-        type: { summary: 'ButtonSize' },
-        defaultValue: { summary: 'md' },
-      },
-    },
-    rounded: {
-      control: 'boolean',
-      description: '是否圆角',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-      },
-    },
-    disabled: {
-      control: 'boolean',
-      description: '是否禁用',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-      },
-    },
-    loading: {
-      control: 'boolean',
-      description: '是否显示加载状态',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-      },
-    },
-    htmlType: {
-      control: 'select',
-      options: ['button', 'submit', 'reset'],
-      description: 'HTML按钮类型',
-      table: {
-        type: { summary: "'button' | 'submit' | 'reset'" },
-        defaultValue: { summary: 'button' },
-      },
-    },
-    children: {
-      control: 'text',
-      description: '按钮内容',
-    },
-  },
-} satisfies Meta<typeof Button>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-/**
- * 基础按钮示例
- */
-export const Default: Story = {
-  args: {
-    children: '点击我',
-    type: 'primary',
-    size: 'md',
-    rounded: false,
-    disabled: false,
-    loading: false,
-  },
-}
-
-/**
- * 所有变体展示
- */
-export const Variants: Story = {
-  render: () => (
-    <div className="flex flex-wrap gap-4">
-      <Button type="primary">主要按钮</Button>
-      <Button type="secondary">次要按钮</Button>
-      <Button type="outline">轮廓按钮</Button>
-      <Button type="ghost">幽灵按钮</Button>
-      <Button type="text">文本按钮</Button>
-      <Button type="danger">危险按钮</Button>
-      <Button type="default">默认按钮</Button>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: '展示所有可用的按钮变体类型。',
-      },
-    },
-  },
-}
-
-/**
- * 所有尺寸展示
- */
-export const Sizes: Story = {
-  render: () => (
-    <div className="flex flex-wrap items-center gap-4">
-      <Button size="xs">超小按钮</Button>
-      <Button size="sm">小按钮</Button>
-      <Button size="md">中等按钮</Button>
-      <Button size="lg">大按钮</Button>
-      <Button size="xl">超大按钮</Button>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: '展示所有可用的按钮尺寸。',
-      },
-    },
-  },
-}
-
-/**
- * 圆角设置
- */
-export const Rounded: Story = {
-  render: () => (
-    <div className="flex flex-wrap gap-4">
-      <Button rounded={false}>方框按钮</Button>
-      <Button rounded={true}>圆角按钮</Button>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: '展示圆角和方框两种样式。',
-      },
-    },
-  },
-}
-
-/**
- * 状态展示
- */
-export const States: Story = {
-  render: () => (
-    <div className="flex flex-wrap gap-4">
-      <Button>正常状态</Button>
-      <Button loading>加载中</Button>
-      <Button disabled>禁用</Button>
-      <Button loading disabled>加载且禁用</Button>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: '展示按钮的不同状态：正常、加载、禁用。',
-      },
-    },
-  },
-}
-
-/**
- * 事件处理示例
- */
-export const WithClickHandler: Story = {
-  render: () => (
-    <Button
-      onClick={(e) => {
-        e.preventDefault()
-        alert('按钮被点击了！')
-      }}
-    >
-      点击我
-    </Button>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: '展示如何处理按钮点击事件。',
-      },
-    },
-  },
-}
-
-/**
- * 表单集成示例
- */
-export const FormIntegration: Story = {
-  render: () => (
-    <form
-      onSubmit={(e) => {
-        e.preventDefault()
-        alert('表单已提交')
-      }}
-      onReset={() => {
-        alert('表单已重置')
-      }}
-      className="flex gap-4"
-    >
-      <Button type="primary" htmlType="submit">
-        提交表单
-      </Button>
-      <Button type="secondary" htmlType="reset">
-        重置
-      </Button>
-    </form>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: '展示如何在表单中使用按钮，包括提交和重置功能。',
-      },
-    },
-  },
-}
-
-/**
- * 组合示例：不同变体的所有尺寸
- */
-export const AllVariantsAndSizes: Story = {
-  render: () => {
-    const variants: Array<'primary' | 'secondary' | 'outline' | 'ghost' | 'text' | 'danger' | 'default'> = [
-      'primary',
-      'secondary',
-      'outline',
-      'ghost',
-      'text',
-      'danger',
-      'default',
-    ]
-    const sizes: Array<'xs' | 'sm' | 'md' | 'lg' | 'xl'> = ['xs', 'sm', 'md', 'lg', 'xl']
-
-    return (
-      <div className="space-y-6">
-        {variants.map((variant) => (
-          <div key={variant} className="space-y-2">
-            <h3 className="text-sm font-semibold text-gray-700 capitalize">{variant}</h3>
-            <div className="flex flex-wrap items-center gap-2">
-              {sizes.map((size) => (
-                <Button key={size} type={variant} size={size}>
-                  {size.toUpperCase()}
-                </Button>
-              ))}
-            </div>
-          </div>
-        ))}
-      </div>
-    )
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: '展示所有变体和尺寸的组合效果。',
-      },
-    },
-  },
-}
-
-/**
- * 圆角与方框对比
- */
-export const RoundedComparison: Story = {
-  render: () => {
-    const variants: Array<'primary' | 'secondary' | 'outline'> = ['primary', 'secondary', 'outline']
-
-    return (
-      <div className="space-y-6">
-        <div className="space-y-2">
-          <h3 className="text-sm font-semibold text-gray-700">方框按钮 (rounded=false)</h3>
-          <div className="flex flex-wrap gap-2">
-            {variants.map((variant) => (
-              <Button key={variant} type={variant} rounded={false}>
-                {variant}
-              </Button>
-            ))}
-          </div>
-        </div>
-        <div className="space-y-2">
-          <h3 className="text-sm font-semibold text-gray-700">圆角按钮 (rounded=true)</h3>
-          <div className="flex flex-wrap gap-2">
-            {variants.map((variant) => (
-              <Button key={variant} type={variant} rounded={true}>
-                {variant}
-              </Button>
-            ))}
-          </div>
-        </div>
-      </div>
-    )
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: '对比不同变体的圆角和方框样式。',
-      },
-    },
-  },
-}
-
-/**
- * 加载状态示例
- */
-export const LoadingStates: Story = {
-  render: () => (
-    <div className="flex flex-wrap gap-4">
-      <Button type="primary" loading>
-        加载中
-      </Button>
-      <Button type="secondary" loading>
-        加载中
-      </Button>
-      <Button type="outline" loading>
-        加载中
-      </Button>
-      <Button type="danger" loading>
-        加载中
-      </Button>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: '展示不同变体的加载状态。',
-      },
-    },
-  },
-}
-
-/**
- * 禁用状态示例
- */
-export const DisabledStates: Story = {
-  render: () => (
-    <div className="flex flex-wrap gap-4">
-      <Button type="primary" disabled>
-        禁用
-      </Button>
-      <Button type="secondary" disabled>
-        禁用
-      </Button>
-      <Button type="outline" disabled>
-        禁用
-      </Button>
-      <Button type="ghost" disabled>
-        禁用
-      </Button>
-      <Button type="text" disabled>
-        禁用
-      </Button>
-      <Button type="danger" disabled>
-        禁用
-      </Button>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: '展示不同变体的禁用状态。',
-      },
-    },
-  },
-}

package/src/libs/Button/guide/README.md

@@ -1,144 +0,0 @@
-# Button 组件 - 简化版
-
-一个精简的按钮组件，仅保留基本功能，专为简单项目使用而设计。
-
-## 特性
-
-- 🎨 **6种变体**: primary, secondary, outline, ghost, link, danger
-- 📏 **5种尺寸**: xs, sm, md, lg, xl
-- 🔄 **圆角设置**: 支持方框和圆角两种样式
-- 🔄 **加载状态**: 内置加载动画
-- 🎯 **简洁设计**: 移除了复杂功能，专注于核心需求
-- 📱 **响应式**: 支持基础响应式布局
-- ♿ **无障碍**: 完整的键盘导航支持
-
-## 安装
-
-```tsx
-import { Button } from "@/ui/Button";
-```
-
-## 基础用法
-
-```tsx
-// 基础按钮
-<Button>点击我</Button>
-
-// 不同变体
-<Button type="primary">主要按钮</Button>
-<Button type="secondary">次要按钮</Button>
-<Button type="outline">轮廓按钮</Button>
-<Button type="ghost">幽灵按钮</Button>
-<Button type="link">链接按钮</Button>
-<Button type="danger">危险按钮</Button>
-```
-
-## 尺寸
-
-```tsx
-<Button size="xs">超小按钮</Button>
-<Button size="sm">小按钮</Button>
-<Button size="md">中等按钮</Button>
-<Button size="lg">大按钮</Button>
-<Button size="xl">超大按钮</Button>
-```
-
-## 圆角设置
-
-```tsx
-<Button rounded={false}>方框按钮</Button>
-<Button rounded={true}>圆角按钮</Button>
-```
-
-## 状态
-
-```tsx
-<Button loading>加载中</Button>
-<Button disabled>禁用</Button>
-```
-
-## 事件处理
-
-```tsx
-<Button
-  onClick={(e) => {
-    e.preventDefault();
-    console.log("按钮被点击");
-  }}
->
-  点击我
-</Button>
-```
-
-## 表单集成
-
-```tsx
-<form>
-  <Button type="submit" variant="primary">
-    提交表单
-  </Button>
-  <Button type="reset" variant="secondary">
-    重置
-  </Button>
-</form>
-```
-
-## API 参考
-
-### ButtonProps
-
-| 属性      | 类型                              | 默认值      | 描述             |
-| --------- | --------------------------------- | ----------- | ---------------- |
-| type      | `ButtonType`                      | `'primary'` | 按钮变体         |
-| size      | `ButtonSize`                      | `'md'`      | 按钮尺寸         |
-| rounded   | `boolean`                         | `false`     | 是否圆角         |
-| disabled  | `boolean`                         | `false`     | 是否禁用         |
-| loading   | `boolean`                         | `false`     | 是否显示加载状态 |
-| className | `string`                          | -           | 自定义类名       |
-| children  | `ReactNode`                       | -           | 按钮内容         |
-| htmlType  | `'button' \| 'submit' \| 'reset'` | `'button'`  | HTML按钮类型     |
-| onClick   | `(event: MouseEvent) => void`     | -           | 点击事件处理器   |
-
-### 类型定义
-
-```tsx
-type ButtonType =
-  | "primary"
-  | "secondary"
-  | "outline"
-  | "ghost"
-  | "link"
-  | "danger";
-type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
-```
-
-## 简化说明
-
-相比完整版Button组件，简化版移除了以下功能：
-
-- ❌ 复杂的形状选项（pill, square等）
-- ❌ 多种状态类型（success, error等）
-- ❌ 图标支持（leftIcon, rightIcon）
-- ❌ 全宽支持
-- ❌ 复杂的主题系统
-
-## 最佳实践
-
-1. **保持简洁**: 使用默认的primary变体作为主要操作
-2. **尺寸一致**: 在同一界面中保持按钮尺寸的一致性
-3. **状态反馈**: 使用loading状态提供用户反馈
-4. **无障碍性**: 确保按钮有适当的标签和键盘导航
-
-## 常见问题
-
-### Q: 如何自定义按钮颜色？
-
-A: 可以通过`className`属性添加自定义样式，或者修改`styles.ts`中的样式配置。
-
-### Q: 按钮支持哪些事件？
-
-A: 支持所有标准的HTML button元素事件，如onClick、onMouseOver等。
-
-### Q: 如何实现按钮组？
-
-A: 可以将多个Button组件包装在一个容器中，使用flex布局实现按钮组。

package/src/libs/Button/index.tsx

@@ -1,69 +0,0 @@
-import { forwardRef } from 'react'
-import type { ButtonProps, ButtonRef } from './types'
-import { getButtonStyles } from './styles'
-import { cn } from '@/utils'
-import { LoadingIcon } from '@/icons'
-
-export const Button = forwardRef<ButtonRef, ButtonProps>(
-  (
-    {
-      type = 'primary',
-      size = 'md',
-      rounded = false,
-      disabled = false,
-      loading = false,
-      className,
-      children,
-      htmlType = 'button',
-      onClick,
-      ...props
-    },
-    ref
-  ) => {
-    // 计算最终状态
-    const isDisabled = disabled || loading
-
-    // 获取样式类名
-    const buttonStyles = getButtonStyles(
-      type,
-      size,
-      rounded,
-      isDisabled,
-      loading,
-      className
-    )
-
-    // 处理点击事件
-    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-      if (isDisabled) {
-        event.preventDefault()
-        return
-      }
-      onClick?.(event)
-    }
-
-    return (
-      <button
-        ref={ref}
-        type={htmlType}
-        disabled={isDisabled}
-        onClick={handleClick}
-        className={cn(buttonStyles)}
-        {...props}
-      >
-        {loading && <LoadingIcon className="animate-spin w-4 h-4 mr-2" />}
-        {children}
-      </button>
-    )
-  }
-)
-
-export default Button
-
-// 导出类型
-export type {
-  ButtonProps,
-  ButtonRef,
-  ButtonType,
-  ButtonSize,
-} from './types'

package/src/libs/Button/styles.ts

@@ -1,71 +0,0 @@
-import type { ButtonType, ButtonSize } from './types'
-
-/**
- * 获取按钮变体样式
- */
-export const getVariantStyles = (variant: ButtonType): string => {
-  const variants = {
-    primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',
-    default: 'bg-white text-gray-700 hover:bg-gray-50 focus:ring-gray-500 border border-gray-300',
-    secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200 focus:ring-gray-500 border border-gray-300',
-    outline: 'bg-transparent text-blue-600 hover:bg-blue-50 focus:ring-blue-500 border border-blue-600',
-    ghost: 'bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-gray-500',
-    text: 'bg-transparent text-gray-700 focus:ring-gray-500',
-    danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
-  }
-  return variants[variant] || variants.primary
-}
-
-/**
- * 获取按钮尺寸样式
- */
-export const getSizeStyles = (size: ButtonSize): string => {
-  const sizes = {
-    xs: 'px-2 py-1 text-xs min-h-[1.5rem]',
-    sm: 'px-3 py-1.5 text-sm min-h-[2rem]',
-    md: 'px-4 py-2 text-sm min-h-[2.5rem]',
-    lg: 'px-6 py-3 text-base min-h-[3rem]',
-    xl: 'px-8 py-4 text-lg min-h-[3.5rem]',
-  }
-  return sizes[size] || sizes.md
-}
-
-/**
- * 获取按钮圆角样式
- */
-export const getRoundedStyles = (rounded: boolean): string => {
-  return rounded ? 'rounded-lg' : 'rounded-none'
-}
-
-/**
- * 组合所有样式类名
- */
-export const getButtonStyles = (
-  variant: ButtonType = 'primary',
-  size: ButtonSize = 'md',
-  rounded: boolean = false,
-  disabled: boolean = false,
-  loading: boolean = false,
-  customClassName?: string
-): string => {
-  const baseStyles = 'inline-flex items-center justify-center font-medium text-center transition-all duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed'
-  const variantStyles = getVariantStyles(variant)
-  const sizeStyles = getSizeStyles(size)
-  const roundedStyles = getRoundedStyles(rounded)
-  const disabledStyles = disabled ? 'opacity-50 cursor-not-allowed' : ''
-  const loadingStyles = loading ? 'cursor-wait' : ''
-  
-  return [
-    baseStyles,
-    variantStyles,
-    sizeStyles,
-    roundedStyles,
-    disabledStyles,
-    loadingStyles,
-    customClassName,
-  ]
-    .filter(Boolean)
-    .join(' ')
-    .replace(/\s+/g, ' ')
-    .trim()
-}

package/src/libs/Button/types.ts

@@ -1,52 +0,0 @@
-import type { ReactNode, ButtonHTMLAttributes } from 'react'
-
-/**
- * Button组件的变体类型 - 简化版
- */
-export type ButtonType = 
-  | 'primary'     // 主要按钮
-  | 'default'     // 默认按钮
-  | 'secondary'   // 次要按钮
-  | 'outline'     // 轮廓按钮
-  | 'ghost'       // 幽灵按钮
-  | 'text'        // 文本按钮
-  | 'danger'      // 危险按钮
-
-/**
- * Button组件的尺寸类型 - 简化版
- */
-export type ButtonSize = 
-  | 'xs'          // 超小尺寸
-  | 'sm'          // 小尺寸
-  | 'md'          // 中等尺寸
-  | 'lg'          // 大尺寸
-  | 'xl'          // 超大尺寸
-
-
-/**
- * Button组件的基础属性接口 - 简化版
- */
-export interface ButtonProps 
-  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'size' | 'children' | 'type'> {
-  /** 按钮变体 */
-  type?: ButtonType
-  /** 按钮尺寸 */
-  size?: ButtonSize
-  /** 是否圆角 */
-  rounded?: boolean
-  /** 是否禁用 */
-  disabled?: boolean
-  /** 是否显示加载状态 */
-  loading?: boolean
-  /** 自定义类名 */
-  className?: string
-  /** 子元素 */
-  children?: ReactNode
-  /** 按钮类型 */
-  htmlType?: ButtonHTMLAttributes<HTMLButtonElement>['type']
-}
-
-/**
- * Button组件的ref类型
- */
-export type ButtonRef = HTMLButtonElement