[](https://circleci.com/gh/hipagesgroup/hui) [ 
A repo containing the hipages user interface.
This repo should be portable as a npm package into any hipages application.
It' based off bootstrap 4 and contains a collection of mixins and placeholders.
1. npm install hipagesgroup/hui
Voila!~
1. yarn storybook to open the storybook and see your component
2. Make those components 💪
3. Test those components ðŸ˜
1. Merge to master
2. ... that's it.
To run tests,
yarn test
HUI now uses Jest as the test runner.
As for the assertions both must and jest assertions can be used.
HUI uses a recursive test setup structure. Tests reside alongside the source files,
in a __tests__ directory.
Jest configurations are done in the jest section of the package.json file.
In addition, you can pass CLI arguments to the test command.
For example, to run tests in watch mode,
yarn test --watch
Since HUI uses webpack, we can import cool stuff like css and svg to js.
To avoid breaking tests due to these non-js stuff, we have used two transformers
which are defined in the config/jest/ directory.
These files are referenced from the jest configurations defined in the package.json file.
Any polyfills and dependent configurations can be done in the src/setupTests.js module.
For example, we have setup the enzyme adaptor and match-media polyfill there.
Test coverage is also handled by jest. Coverage configs can be found in the package.json file.
The _interactive html coverage report_ will be output to the coverage/ directory.
Mocking can be done by both sinon and jest mocks (jest.fn).
The complete test setup is inspired by the create-react-app configs. See their docs for more details.
as we discussed (4/dec/2018)
```
presentational (pure styled components)
- atoms
- molecules
- organisms
container ( styled components with plugins/functions )
- molecules
- organisms
We are actively attempting to move components and stories into the /packages directory and will be using Atomic Design as a means of categorising our components.
Tests must be exist in a relative __stories__ directory, similar to __tests__, where the filename should be in the format {component}.stories.js.
We have a few global stories, which make it easier to add new stories:
- atoms
- molecules
- theme
`jsmodule
// Add in to enable hot module reloading`
storiesOf('Presentational.Molecules.Form', module).addWithJSX('Form', () => {
We are using Knobs in order to dynamically control the state of our components in the storybook. Try to implement them in your stories as much as possible.
or fix: in PR title, others will not trigger release
* you will need at least one feat: or fix: ` commit