cuke-ui

cuke-ui

黄瓜 ui : 一个即插即用的 React UI 库 (施工中,请勿用于生产环境...)

在线演示

https://cuke-ui.github.io/cuke-ui/

计划开发的组件

计划2018年底完成,给自己一个交代

• Button 按钮
• Alert 警告提示
• Breadcrumb 面包屑
• Grid 网格布局
• Input 输入框
• Message 消息提示
• Modal 对话框
• Pagination 分页器
• Tooltip 文字提示
• TurnTable 抽奖转盘
• WordPad 手写输入板
• MusicPlayer 响应式音乐播放器
• Spin 加载中
• BackTop 回到顶部
• Progress 进度条
• Tabs 选项卡
• Dropdown 下拉菜单
• Checkbox 复选框
• Switch 选择器
• Radio 单选框
• Select 下拉选择器
• Upload 上传

参考轮子

• ant-design
• gulu
• dragon-ui

使用

全部引入

import {Button} from "cuke-ui"
import "cuke-ui/dist/cuke-ui.min.css"

class Text extends React.Component {
	render(){
		return (
			<Button>黄瓜ui</Button>
		)
	}
}

按需引入 (TODO)

import Button from 'cuke-ui/lib/Button';
import 'cuke-ui/lib/Button/style.less';

发布打包

基于webpack打包umd模块 , babel 打包es模块 , Gulp 打包css

yarn run build

输出

• dist
  • cuke-ui.js
  • cuke-ui.min.js
  • cuke-ui.css
  • cuke-ui.min.css
• lib
  • 所有组件
  • index.js

开发

请首先安装 npm i -g yarn

• 安装依赖

如果无法科学上网 可 使用 淘宝镜像 yarn config set registry https://registry.npm.taobao.org

yarn

• 启动开发服务器

基于 storybook 什么是storybook?

yarn dev

• 访问 http://localhost:8080

• 开发组件

参考 components/button

在 components 新建一个组件(组件名与文件名对应) 以 button 组件目录结构为例

• components
  • button //组件文件夹
    • __tests__ //单元测试
      • __snapshots__ // ui 快照
      • index.test.js //测试文件
    • index.js //组件逻辑
    • styles.less //组件样式

然后 在 stories 目录下 新建一个 button.js

• stories
  • button.js // storybook 的文档文件

//button.js
import React from 'react';
import { storiesOf } from '@storybook/react';
import Button from '../components/button';          //引入你的组件
import { withInfo } from '@storybook/addon-info';

storiesOf('示例标题', module)
	.add('Button 按钮', withInfo()(() => (         // 添加到页面上
			<Button type="primary">获取文字</Button>   // 这里写jsx
	)))

最后 将 写好的 storybook 文件 添加到 配置里面

.storybook > config.js

import { configure } from '@storybook/react';
function loadStories() {
  require('../stories/button');     //刚才写好的文件
}

configure(loadStories, module);

这样就完成了 storybook 会将你写好的组件 添加到页面上, 并且会自动生成说明文档 （其实本质上就是一个 webpack 的 dev-server）

测试相关

覆盖率

yarn coverage

单元测试

yarn test

watch

yarn test -- --watch

文档相关

打包文档

yarn build:doc

发布文档

yarn pub:doc