A component library template based on create-react-app. Including documentation. This template is used by generator-react-exhibit.

View it live here.

Tech Stack

| frontend | | | ------------------|-------------| | view library | react | | boilerplate | create-react-app| | documentation | storybook |

Getting started

You can use generator-react-exhibit to build your library. Simply run:

yo react-exhibit my-library

To view your library in action run:

cd my-library
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.mdx 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.

Creating new components

This project uses plop to manage templates for components. You can create a new element by running:

npm run plop <MY COMPONENT NAME>

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.

Deploy

After building your documentation, you can deploy it as a gh-page. Make sure to add a homepage entry in your package.json like so:

{
  "homepage": "https://my-github-name.github.io/my-library/",
}

Then simply run:

npm run deploy

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.

Adding typescript

Typescript support was added to [email protected]. To activate it, run:

npm install -D typescript @types/node @types/react @types/react-dom @types/jest

License

MIT