OneWelcome React Component Library
This project provides React components built according to the OneWelcome design. It uses the DTS tool for a consistent setup and configuration.
We recommend visiting our Storybook page to see the components in action.
Note: the package is publicly available on npm.
When you are developing for the component library, you're going to want to run the Typescript compiler, test watcher and storybook. Please see the commands below for more information.
Run the Typescript compiler:
This builds to
/dist and runs the project in watch mode so any edits you save inside
src causes a rebuild to
To run tests, use
For running and watching tests, use
npm test -- --watch.
npm test -- --watch
Run Storybook locally:
npm run storybook
All at once
When developing stories, components and tests at the same time, it may be easier to run the command
npm run dev. This will run the commands
storybook in parallel.
npm run dev
Please see the CONTRIBUTING.md file for information on how to develop for the Component Library.
Adding new icons
See adding icons to font manual
Code quality is set up for you with
lint-staged. This is to ensure that formatting is the same in every file of the component library. If you would like to suggest a change, please let the
SASSy team know.
Calculates the real cost of your library using size-limit with
npm run size and visualise it with
npm run analyze.
DTS uses Rollup as a bundler and generates multiple rollup configs for various module formats and build settings. See Optimizations for details.
tsconfig.json is set up to interpret
esnext types, as well as
jsx. Adjust according to your needs.
The publishing process is fired by git tag creation. CircleCI builds a package and publishes it to the public npmjs.com registry. Release notes should be provided via GitHub UI. After a successful release, the release notes are published via Slack.
Creating a release
Follow these steps to create a release:
- note all changes introduced from the last release
- create a release on the GitHub repository page:
- determine new version (bugfix/minor/major)
- put proper release notes based on previous releases
- click on the
- check if the release is published on