OneWelcome React Component Library

%5B1%5D%2C%20%22%22)%2C%20%22.%22)))%20and%20position()%20%3E%202%5D%2F%2F*%5B%40class%3D%22downloads%22%5D%2Ftext())&suffix=%2Fweek&label=outdated%20versions%20downloads&color=red&cacheSeconds=600)

This project provides React components built according to the OneWelcome design. We recommend visiting our Storybook page to see the components in action.

Note: the package is publicly available on npm.

Commands

Component library

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:

npm build

This builds to /dist.

To run tests, use npm test

npm test

For running and watching tests, use npm test -- --watch.

npm test -- --watch

Storybook

Run Storybook locally:

npm start

This will run storybook on default port 6006 with hot-reloading feature activated for both, your component's code and stories and docs code.

Development

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

Code quality is set up for you with prettier, husky, and 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.

Bundle analysis

Calculates the real cost of your library using size-limit with npm run size and visualise it with npm run analyze.

Rollup

We use Rollup as a bundler and generate multiple rollup configs for various module formats and build settings. We output both CommonJS and Ecmascript Modules format. Treeshaking is supported and will work if your application is setup correctly and is built for production.

TypeScript

tsconfig.json is set up to interpret dom and esnext types, as well as react for jsx. Adjust according to your needs.

Release

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 CREATE RELEASE button
• check if the release is published on https://www.npmjs.com/package/@onewelcome/react-lib-components