npm run storybook
- Generate codes:
npm run generate - Add the component to
src/index.tsx
export { default as Button } from "./components/Button";
export { default as Dropdown } from "./components/Dropdown";
- Build:
npm run build - Push a branch and merge it into master on Github
- Install UI Library:
npm install inkblot-therapy/inkblot-ui - Add fonts to a css file
@import url('https://fonts.googleapis.com/css?family=Barlow:400,500,600,700,800');
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700');
- Sample codes
import { InkblotTheme, Button, Dropdown } from 'inkblot-ui';
...
<InkblotTheme>
<Button label="Hello" primary />
<Dropdown ... />
</InkblotTheme>
- Update UI Library:
npm update inkblot-ui - Install Developing UI Library:
npm install inkblot-therapy/inkblot-ui#branch-name
## Features
- Typescript
- Components generators
- Development Environment: Storybook
- Styles: Styled Components with theming configuration
- Lint: TSLint
- Tests: Jest
Make sure that you have Node v8 or above installed.
- Clone this repo using
git clone git@github.com:leandrooriente/react-ui-kit-boilerplate.git - Move to the appropriate directory:
cd react-ui-kit-boilerplate. - Run
npm ciin order to install dependencies. - At this point you can run
npm run storybookto see the example Storybook at http://localhost:6006.
To add a new component, just run npm run generate. This command will generate all the component (Stateless or not) files for you.
To test your components run npm test.
By default we run tests and lint before any push.
To deploy storybook to Github Pages run npm run deploy-storybook.
MIT