wizard-ui

A Design System with React.

• React 16+
• Typescript
• Sass
• UI Development Environment with React Storybook
• Documentation With Gatsby (WIP)

Install and Usage

Dev and webpack setting

Add in package.json

yarn add wizard-ui
# css loader
yarn add --dev style-loader css-loader
# react bootstrap font dev
yarn add --dev url-loader file-loader

if you not use create-react-app, you need set webpack config:

{
  test: /\.css$/,
  use: [
    'style-loader',
    'css-loader',
  ]
},
{
  test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
  use: ['file-loader']
},
{
  test: /\.(png|woff|woff2|eot|ttf|svg)$/,
  use: 'url-loader?limit=100000'
}

Global style

import 'wizard-ui/lib/style/index.css';

Usage

UMD

import { Icon } from 'wizard-ui';

export default () => <Icon type="os-search-role-fill" />

ES

import { Icon } from 'wizard-ui/esm';

export default () => <Icon type="os-search-role-fill" />

Storybook

• nvm
• node@v16.15.0

# run storybook dev
npm run storybook

# build storybook dist
npm run build-storybook 

Publish

npm publish --registry=https://registry.npmjs.org/

TODO

• remove node-sass, add sass
• upgrade rc-tree
• add rc-pagination, refactor the Pagination Component