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
First time adding HUI to an application?
npm install hipagesgroup/hui
Voila!~
Developing some HUI components?
yarn storybook
to open the storybook and see your component- Make those components 💪
- Test those components 😠
Deploying changes?
- Merge to
master
- ... 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
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:
orfix:
in PR title, others will not trigger release - you will need at least one
feat:
orfix:
commit