Wizard-ui-docs NPM

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

ES

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

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