Jobiqo Component Library

Generic component library of react components for jobiqo.

Components structure

The library ships components that are generic React components under the following folders :

• Atoms : Generic components that can not be decomposed any more. These are the smallest type of components, they should not know anything about the application. Examples of such components are buttons, inputs, checkboxes, selects, etc..
• Molecules : Components that are normally composed of atoms together in order to form a more complex kind of component (could also be just a component that has the potential to be decomposed further). A good example of such a component is the searchbox that puts together a input and a button to form a search widget.
• Organisms : Organisms are the biggest kind of generic component we can have, they normally also dont know too much about the application even though its acceptable that they make certain assumptions. Examples of organisms are the job detail or the job teaser.
• Templates : Templates show a bigger picture of a page (or a large part of a page).
• Pages : Full pages (templates + data). Pages are usefull to provide information on different states of a page for example a dashboard can be empty (first time is visited) but also can already be filled with info from a long time user. Pages is where we show these different states based on different props / data.

Install

To install the dependencies in order to run the styleguide with storybook :

$ npm install

Get the Storybook up and running

$ npm start

performance

Due to the types generation from react-docgen-typescript-loader the initial startup time is a bit lengthy but after running with watch should be fast making changes. See https://github.com/strothj/react-docgen-typescript-loader#performance

Tests

To run the tests run the following script :

$ npm test

To update snapshots of components (if a component should change the snapshot can be updated)

$ npm run test:update

Troubleshooting

If the Hot Module Reloading is not working on Ubuntu:

$ echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf
$ sudo sysctl -p