myshell-react-lib 0.1.0

package/README.md

@@ -0,0 +1,268 @@
+# MyShell React Library
+
+一个基于React和Tailwind CSS的组件库，提供美观、易用的UI组件和Tailwind配置。基于Radix UI和其他现代库构建，提供高度可访问性和可定制性。
+
+## 特性
+
+- 🎨 精美的UI组件，基于Tailwind CSS和Radix UI
+- 🛠️ TypeScript支持，提供完整的类型定义
+- 📦 易于集成到现有项目中
+- 🔧 可自定义的Tailwind配置
+- 📱 响应式设计，适配各种屏幕尺寸
+- ♿ 高度可访问性，符合WCAG标准
+- 🌙 支持暗色模式
+
+## 安装
+
+```bash
+npm install myshell-react-lib
+# 或
+yarn add myshell-react-lib
+```
+
+## 使用方法
+
+### 1. 配置Tailwind CSS
+
+在你的`tailwind.config.js`文件中引入我们的配置：
+
+```js
+const { preset } = require('myshell-react-lib/dist/tailwind');
+
+module.exports = {
+  // 继承我们的预设配置
+  presets: [preset],
+  // 你的自定义配置
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+  theme: {
+    extend: {
+      // 你的自定义主题扩展
+    },
+  },
+  plugins: [],
+};
+```
+
+### 2. 使用组件
+
+```jsx
+import React from 'react';
+import { Button, Card, Input, Tabs, TabsContent, TabsList, TabsTrigger } from 'myshell-react-lib';
+
+const MyComponent = () => {
+  return (
+    <div>
+      <Card 
+        title="欢迎使用" 
+        subtitle="这是一个示例卡片"
+      >
+        <Tabs defaultValue="account">
+          <TabsList>
+            <TabsTrigger value="account">账户</TabsTrigger>
+            <TabsTrigger value="password">密码</TabsTrigger>
+          </TabsList>
+          <TabsContent value="account">
+            <Input 
+              label="用户名" 
+              placeholder="请输入用户名" 
+              fullWidth 
+            />
+            <div className="mt-4">
+              <Button variant="primary">提交</Button>
+            </div>
+          </TabsContent>
+          <TabsContent value="password">
+            <Input 
+              label="密码" 
+              type="password"
+              placeholder="请输入密码" 
+              fullWidth 
+            />
+            <div className="mt-4">
+              <Button variant="primary">更新密码</Button>
+            </div>
+          </TabsContent>
+        </Tabs>
+      </Card>
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+## 组件列表
+
+我们的组件库包含以下组件：
+
+### 基础组件
+- Button - 按钮
+- Input - 输入框
+- Textarea - 文本域
+- Select - 选择器
+- Checkbox - 复选框
+- Radio - 单选框
+- Switch - 开关
+- Slider - 滑块
+- NumberInput - 数字输入框
+
+### 布局组件
+- Card - 卡片
+- AspectRatio - 宽高比
+- Separator - 分隔线
+- Group - 组
+- ScrollArea - 滚动区域
+
+### 导航组件
+- Tabs - 标签页
+- NavigationBar - 导航栏
+- SecondaryNavigationBar - 次级导航栏
+- Dropdown - 下拉菜单
+- Menubar - 菜单栏
+- Pagination - 分页
+
+### 反馈组件
+- Alert - 警告提示
+- AlertDialog - 警告对话框
+- Dialog - 对话框
+- Drawer - 抽屉
+- Modal - 模态框
+- Toast - 轻提示
+- Progress - 进度条
+- Spinner - 加载中
+- Skeleton - 骨架屏
+
+### 数据展示组件
+- Avatar - 头像
+- Badge - 徽章
+- Tooltip - 文字提示
+- Popover - 气泡卡片
+- Image - 图片
+- Swiper - 轮播图
+- Masonry - 瀑布流
+
+### 其他组件
+- Form - 表单
+- Command - 命令菜单
+- ContextMenu - 上下文菜单
+- CountDown - 倒计时
+- AudioPlayer - 音频播放器
+- Typography - 排版
+
+## 详细组件文档
+
+### Button
+
+按钮组件，支持多种变体和尺寸。
+
+```jsx
+<Button 
+  variant="primary" // 'primary' | 'secondary' | 'outline' | 'ghost' | 'link' | 'plain'
+  size="md" // 'sm' | 'md' | 'lg'
+  fullWidth={false}
+  rounded={false}
+  disabled={false}
+  loading={false}
+  icon={IconComponent}
+  iconDirection="left" // 'left' | 'right'
+>
+  按钮文本
+</Button>
+```
+
+### Input
+
+输入框组件，支持多种变体和尺寸。
+
+```jsx
+<Input
+  label="输入框标签"
+  helperText="帮助文本"
+  error="错误信息"
+  size="md" // 'sm' | 'md' | 'lg'
+  variant="outline" // 'outline' | 'filled' | 'flushed'
+  fullWidth={false}
+  disabled={false}
+  readOnly={false}
+  required={false}
+  placeholder="请输入..."
+  leftIcon={<IconComponent />}
+  rightIcon={<IconComponent />}
+/>
+```
+
+### Tabs
+
+标签页组件，用于在不同内容区域之间切换。
+
+```jsx
+<Tabs defaultValue="tab1">
+  <TabsList>
+    <TabsTrigger value="tab1">标签1</TabsTrigger>
+    <TabsTrigger value="tab2">标签2</TabsTrigger>
+  </TabsList>
+  <TabsContent value="tab1">
+    标签1内容
+  </TabsContent>
+  <TabsContent value="tab2">
+    标签2内容
+  </TabsContent>
+</Tabs>
+```
+
+### Toast
+
+轻提示组件，用于显示简短的消息通知。
+
+```jsx
+import { useToast } from 'myshell-react-lib';
+
+function MyComponent() {
+  const { toast } = useToast();
+  
+  return (
+    <Button 
+      onClick={() => {
+        toast({
+          title: "成功",
+          description: "操作已完成",
+          variant: "success",
+        })
+      }}
+    >
+      显示提示
+    </Button>
+  );
+}
+```
+
+## Tailwind 主题
+
+你可以在JavaScript/TypeScript中使用我们导出的主题变量：
+
+```js
+import { colors, theme } from 'myshell-react-lib/dist/tailwind';
+
+// 使用主题颜色
+console.log(colors.primary[500]); // #0ea5e9
+
+// 使用其他主题配置
+console.log(theme.fontFamily.sans); // ['Inter', 'sans-serif']
+```
+
+## 开发
+
+```bash
+# 安装依赖
+npm install
+
+# 启动Storybook开发环境
+npm run storybook
+
+# 构建组件库
+npm run build
+```
+
+## 许可证
+
+MIT