davidctj/ui-react-module-typescript-storybook-jest

Typescript, React, UI components module library, JEST tesing, Storybook rendering

About

This project is an example for using Typescript, React to build UI components module, which could be used by other client typescript project.

This project will generate TypeDefinitions(*.d.ts) files for the UI components, thus providing code completion and type checking.

Libraries which used inside this project:

• React
• Typescript
• Bootstrap@3
• Storybook
• Standard-version

Usage

• Install dependencies

$ npm install -S bootstrap@3
$ npm i -S NPM-path/ui-widgets-ts

• Import related assets in your project

// CSS Assets
import "bootstrap/dist/css/bootstrap.min.css";

// JS Assets
import "jquery";
import "bootstrap/dist/js/bootstrap.js";

• Use components, e.g. Button

import { Button as MyTestBtn } from  "ui-widgets-ts";
or
import { Button as MyTestBtn } from  "ui-widgets-ts/dist/Button";

...
<MyTestBtn type="danger">My Test Button</MyTestBtn>
...

Development

• Open first terminal

$ npm install
$ npm run watch

• open second terminal

$ npm run build
$ npm run storybook

visit: http://localhost:9001/

Folder src is all the place we write our components

Folder storybook is the place we view/test our components. New component should always be added as stories in the react-storybook.

Test

JEST framework.

Create files *.(test|spec).tsx under src folder and then write test code. Code coverage must be fulfilled.

$ npm run test

Production build

• npm run build This /dist folder could be used as the module dependency such as in NPM, or in Github Repo