@onewelcome/react-lib-components

OneWelcome React Component Library

This project provides React components built according to the UI Component Library design. It uses the DTS tool which provides for a consistent setup and configuration.

Note: the package is publicly available.

Commands

Component library

Run lib locally:

npm start # or yarn start

This builds to /dist and runs the project in watch mode so any edits you save inside src causes a rebuild to /dist.

To run tests, use npm test or yarn test.

npm test # or yarn test

For running and watching tests, use npm run test:watch.

npm run test:watch

Storybook

Run Storybook locally:

npm run storybook # or yarn 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 start, test:watch and storybook in parallel.

npm run dev

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

Configuration

Code quality is set up for you with prettier, husky, and lint-staged. Adjust the respective fields in package.json accordingly.

Bundle analysis

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

Rollup

DTS uses Rollup as a bundler and generates multiple rollup configs for various module formats and build settings. See Optimizations for details.

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 on #releases slack channel.

Creating 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