myshell-react-lib

MyShell React Library

一个基于React和Tailwind CSS的组件库，提供美观、易用的UI组件和Tailwind配置。基于Radix UI和其他现代库构建，提供高度可访问性和可定制性。

特性

• 🎨 精美的UI组件，基于Tailwind CSS和Radix UI
• 🛠️ TypeScript支持，提供完整的类型定义
• 📦 易于集成到现有项目中
• 🔧 可自定义的Tailwind配置
• 📱 响应式设计，适配各种屏幕尺寸
• ♿ 高度可访问性，符合WCAG标准
• 🌙 支持暗色模式

安装

npm install myshell-react-lib
# 或
yarn add myshell-react-lib

使用方法

1. 配置Tailwind CSS

在你的tailwind.config.js文件中引入我们的配置：

const { preset } = require('myshell-react-lib/dist/tailwind');

module.exports = {
  // 继承我们的预设配置
  presets: [preset],
  // 你的自定义配置
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      // 你的自定义主题扩展
    },
  },
  plugins: [],
};

2. 使用组件

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

按钮组件，支持多种变体和尺寸。

<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

输入框组件，支持多种变体和尺寸。

<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

标签页组件，用于在不同内容区域之间切换。

<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

轻提示组件，用于显示简短的消息通知。

import { useToast } from 'myshell-react-lib';

function MyComponent() {
  const { toast } = useToast();
  
  return (
    <Button 
      onClick={() => {
        toast({
          title: "成功",
          description: "操作已完成",
          variant: "success",
        })
      }}
    >
      显示提示
    </Button>
  );
}

Tailwind 主题

你可以在JavaScript/TypeScript中使用我们导出的主题变量：

import { colors, theme } from 'myshell-react-lib/dist/tailwind';

// 使用主题颜色
console.log(colors.primary[500]); // #0ea5e9

// 使用其他主题配置
console.log(theme.fontFamily.sans); // ['Inter', 'sans-serif']

开发

# 安装依赖
npm install

# 启动Storybook开发环境
npm run storybook

# 构建组件库
npm run build

许可证

MIT