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.

Live code

Here

First time adding HUI to an application?

1. npm install hipagesgroup/hui

Voila!~

Developing some HUI components?

1. yarn storybook to open the storybook and see your component
2. Make those components 💪
3. Test those components 😠

Deploying changes?

1. Merge to master
2. ... that's it.

Tests

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.

Structure: file and story

as we discussed (4/dec/2018)

presentational (pure styled components)
    - atoms
    - molecules
    - organisms
container ( styled components with plugins/functions )
    - molecules
    - organisms

Stories

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

Adding a new story

// Add `module` in to enable hot module reloading
storiesOf('Presentational.Molecules.Form', module).addWithJSX('Form', () => {

Knobs

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.

Release

• use feat: or fix: in PR title, others will not trigger release
• you will need at least one feat: or fix: commit

Be awesome and help contribute to this tool!