🍫 Chocolate-Ui 即插即用，纵享丝滑 🎗️

一个 Web 端的 React 组件库

此刻尽丝滑！

🐳 预览

chocolate-ui.com

⚡ 安装

使用 npm

npm install chocolate-ui --save

使用 yarn

yarn add chocolate-ui

📖 使用

1 .全部引入

// 加载样式
import "chocolate-ui/dist/components/index.css";

// 引入组件
import { Button } from 'chocolate-ui'

2 .按需加载

import Button from 'chocolate-ui/dist/components/button';
import 'chocolate-ui/dist/components/button/style';

3 .使用 babel-plugin-import

// .babelrc.js
module.exports = {
  plugins: [
    [
      'babel-plugin-import',
      {
        libraryName: 'chocolate-ui',
        libraryDirectory: 'dist/components',
        style: true  // 导入 CSS 源文件，可以在编译期间进行优化
      }
    ], 
  ]
}

😊 谁在使用

• 我自己的 hooks 集合 -> chocolate-hooks

✨ 技术栈

• 😁 全部组件由 TypeScript with React Hooks 编写
• 🍑 使用 react-testing-library 完成单元测试
• 🦌 使用 Storybook 本地调试和生成文档页面
• ⚙️ 组件库使用 TSC 编译 TS 和 Gulp 打包 CSS
• 🥦 CI/CD：使用 Chromatic + GitHub Action 持续集成和部署

🔨 部署