@comatch/ui NPM

:point_right: Live Storybook preview :point_left:

Description

This project contains all of our React core (UI) components to be re-used across our projects.

This project is setup with a minimalistic Webpack config to handle the build pipeline and Storybook to facilitate development.

A preview of all the components can be seen on the deployed version of our Storybook by clicking here.

Documentation

Contents

- Description
- Documentation

Setting up the project

To run this project, after cloning it, follow these steps:

cd to the directory of the project.
Run yarn install && yarn start

Making changes and creating a new release

When you need to make a change to comatch-ui, you should also update the docs/badges, increase the version, publish it and redeploy storybook. Follow these steps:

Create a feature branch from develop with your changes, then run the following commands:
- yarn generate-docs
- yarn test-and-coverage
Commit your changes, push again, get this reviewed and merge your branch.
Checkout the develop branch and pull the updated changes.
Create a new feature branch and run the following commands:
- git push --set-upstream origin [branch name]
- npm version major|minor|patch.
- npm publish - which will publish the new version of the package to the public npm registry.
- yarn deploy-storybook
Finally, create a PR to develop and master, get this reviewed and merge it into both branches.

Structure of the project

All components in our UI library can be found under /src/core/ui/components.

Each component folder should have the following structure (e.g. for Button):

├── src/
    ├── index.js                    // Exports all components of the library
    └── components/
        └── Button/
            ├── index.js            // Exports the component for the file it's defined
            ├── Button.md           // Documentation of PropTypes in markdown
            ├── Button.js           // Component definition
            ├── Button.scss         // Styling
            ├── Button.test.js      // Unit tests
            └── Button.stories.js   // Stories for Storybook