A react component library boilerplate, built with create-react-app and storybook
A generator to create your own React component library, including
documentation. It is built on top of create-react-app.
It uses the react-exhibit-template as a template.
View it live here.
You will need the following software installed on your machine:
We recomend installing node throught nvm, as well as
updating npm to version >=5.
You can install yeoman and this generator with the following commands:
npm i -g yo generator-react-exhibit
Once installed you can generate your new project:
yo react-exhibit my-library
It will create a directory called my-library inside the current folder.
To view your library in action run:
cd my-librarynpm 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.
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.
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
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.
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
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.
Fetch template submodule:
git submodule update --initgit submodule update --recursive --remote