cuke ui

cuke-ui

Cucumber UI: A plug-and-play React UI library

? Origin of the name

cuke (cucumber), a common vegetable. I hope this project will become a common dependency (although this is impossible). Among them, cucumber also meets the purpose of this component library: plug and play, followed by cuke, homophonic (cool ke). The cool Li Jinke's meaning theme color uses cucumber green, fresh and cute. The component borrows (plagiarizes) Ant Design, and developed this component library with the purpose of learning.

? Online demonstration

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

⚡ Install

Using npm

 npm i cuke-ui --save

Use yarn

 yarn add cuke-ui

Using cdn

 < link rel =" stylesheet " href =" https://unpkg.com/cuke-ui@latest/dist/cuke-ui.min.css " >
< script type =" text/javascript " src =" https://unpkg.com/cuke-ui@latest/dist/cuke-ui.min.js " > </ script > 

How to use

1. All introduced

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

class Page extends React . Component {
  render ( ) {
    return (
      < Button type = "primary" >黄瓜ui </ Button >
    )
 }
}

2. Introduce on demand

 import Button from 'cuke-ui/lib/button' ;
import 'cuke-ui/lib/button/style' ;

3. Using babel-plugin-import

 // .babelrc.js
module . exports = {
  plugins : [
    [ "babel-plugin-import" , {
      "libraryName" : "cuke-ui" ,
      "libraryDirectory" : "es" ,
      "style" : true
    } , 'cuke-ui' ] , 
  ]
}

// 多个组件库
module . exports = {
  plugins : [
    [ "babel-plugin-import" , {
      "libraryName" : "cuke-ui" ,
      "libraryDirectory" : "es" ,
      "style" : true
    } , 'cuke-ui' ] , 
    
    [ "babel-plugin-import" , {
      "libraryName" : "antd" ,
      "libraryDirectory" : "es" ,
      "style" : true
    } , 'antd' ] , 
  ]
}

Update log

CHANGELOG

? grateful

• @Yuhan zhong
• @Caraws
• @CanvasCao
• @licc

? Design specifications

High imitation Ant-Design

? Who is using it

• Brave people
• Myself
• Li Jinke's cottage

? Reference wheel

• ant-design
• gulu
• dragon-ui

? Local development

Please install npm i -g yarn first

1. Installation dependencies

If you cannot access the Internet scientifically, you can use Taobao mirror yarn config set registry https://registry.npm.taobao.org

 git clone https://github.com/cuke-ui/cuke-ui.git
cd cuke-ui
yarn

2. Start the development server

Based on storybook What is a storybook?

 yarn dev

3. Visit http://localhost:8080

4. Develop components

Reference components/button

Create a new component in components (component name corresponds to file name) and take button component directory structure as an example

• Components
  • button //Component folder
    • __tests__ //Unit Test
      • __snapshots__ // ui snapshot
      • index.test.js //Test file
    • index.js //Component logic - style.js // Loading on demand requires use
    • styles.less //Component style

Then create a new button.js in stories directory

• stories
  • button.js // storybook's document file

 //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
 ) ) )

Finally add the written storybook file to the configuration

.storybook > config.js

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

configure ( loadStories , module ) ;

This completes storybook will add the components you wrote to the page and automatically generate the description document (actually, it is essentially a webpack dev-server)

At the end, export the components in components/index.js for easy publishing

 export { default as Button } from "./button" ; 

? License

MIT