In this post, I am going to describing you to build Scout’s design system with the help of react component.
Help Scout Design System (HSDS) — React Component Library.
HSDS is a resource for designers and engineers that follows these principles:
- The source of truth for UI components at Help Scout.
- One of the goals fo HSDS is to make it possible to componentize the front-end.
- It strives to be unambiguous, so there should not be multiple variations of the same component.
- We design and develop thinking for the short term, keeping things simple and iteratively adding features as we need them.
- Empowering contributors by minimizing the amount of blockers and hurdles.
- Contributors should be confident to push back on design or changes to an existent component within HSDS (there should be a valid reason for a new component/variant)
- The insights from engineering and design hold equal weight. Questions, input and advice are always welcome.
- Hold people accountable and make collaboration easier by providing points of contact for each component (who designed and who coded) and which part of the product is using it.
How to install?
npm install @helpscout/hsds-react --save
After cloning this repo down, run:
Once everything is installed, run:
Check out HSDS’s Storybook at
http://localhost:8900/ in your browser!
As of v2.18.0, the
svg set is opt-in. This was done to reduce the compiled bundle size. To load the
svg icons, add the appropriate adapter to your app.
It is recommended that the adapter be loaded somewhere within your main entry point (e.g.
// src/index.js // For a lighter-weight svg set for embeddables import '@helpscout/hsds-react/adapters/embed' // For the complete svg set import '@helpscout/hsds-react/adapters/app'
To run Jest in watch mode, run:
npm run dev
To execute all the tests (with Coverage reporting), run:
npm run test
Merging a PR:
To merge a PR when the release is completed, please do a Squash and merge from the PR page. It will keep the history clean in the master branch
We tend to do a release with only one PR at the time, if possible
Releasing on NPM
To publish and release a new version of HSDS, run the following command:
npm run release
You’ll be presented with a CLI prompt with options.
Pick the one you want, and that’s it! The script will take care of the rest (from testing to publishing).
To deploy the Storybook, run the following command:
npm run deploy