chatql-ui-react

A react chat and general UI kit for Chatql

Tech Stack

| frontend | | | ------------------|-------------| | view library | react | | boilerplate | create-react-app| | documentation | storybook | | styling | (optional) styled-components |

Requirements

You will need the following software installed on your machine:

• node

We recomend installing node throught nvm, as well as updating npm to version >=5.

Getting started

npm install

npm start

You can now open http://localhost:9009/ and view your component documentation.

To include a component in the storybook, simply add a <componentName>.stories.js file in your component folder, containing the stories you want to show. Have a look at the Button component for an example.

Scripts

A set of scripts are provided for you to test, build and analyze the project. Have a look at create react app for more information.

Test

You can run all tests in the project with the following command:

npm run test

You can also generate a website with information on the code coverage with:

npm run test -- --coverage

This will generate a website in the folder coverage. You can launch it with any server of your choice, for example serve.

npm i -g serve && serve coverage

Build

You can build a production ready version of your library by running:

npm run build

This will create a build folder containing your library.

You can also build a production ready version of your documentation by running:

npm run build:storybook

This will create a folder called storybook-static with your documentation.

You can also publish your library to npm. To do that, simply run:

npm publish

Dependency map

You can generate a map of all dependencies, this can be very usefull when trying to identify a library causing bloat to the application. After building your application you can generate a map, by running:

npm run analyze

This will look into your build folder and open an interactive map of the dependencies in your browser.

License

MIT