Skip to content

A React UI component library . React 组件库 React Hooks Storybook + ts / TypeScript + Sass 🎬

License

Notifications You must be signed in to change notification settings

ChocolateUI/chocolate-ui

Repository files navigation

chocolateUi
chocolate-ui npm netlify chromatic

🍫 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 源文件,可以在编译期间进行优化
      }
    ], 
  ]
}

😊 谁在使用

✨ 技术栈

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

🔨 部署

chromatic