@modusbox/modusbox-ui-components

Modusbox UI Components

A collection of reusable React components and some Redux / JS utilities.

• Usage
• Components
• Prerequisites
• Scripts
• Versioning
• Publishing

Usage

Install this library in your React project use command yarn add @modusbox/modusbox-ui-components.

You can import the components in your project as follows:

// The CSS file only needs to be imported once
import '@modusbox/modusbox-ui-components/dist/react/components/index.css';
import { Button } from '@modusbox/modusbox-ui-components/dist/react/components/index';

Components

The library exports a number of components.

Almost each component has a README file describing the prop types.

There are 2 different playgrounds to use to inspect and play with the components:

• the embedded playground: see how to run.
• the Storybook playground: see how to run.

Prerequisites

It requires node v12 to run; please make sure to have the correct version installed.

It is suggested to use nvm to easily install and manage multiple node versions.

Scripts

Install

Install all the dependencies

yarn install

Run

Starts the webpack-dev-server with hot reloading capabilities in development mode.

It uses the webpack.dev.config.js config file.

yarn start

Open the browser at the specified address http://localhost:9090

Build

Builds the bundle artifact with webpack.

It uses the webpack.config.js config file.

yarn build

Prettier

Runs prettier on the codebase.

yarn prettier

ESLint

Lints on the codebase.

yarn lint

Test

Runs Jest tests.

yarn test

Storybook

Runs the Storybook playground.

yarn storybook

Versioning

It's important to create a unique version for every PR.

Versions are used to deploy the correct articafts online.

Note: Forgetting to create a version will cause the previous build artifacts to be overridden.

Creating a new version is done with yarn version, make sure to do the correct incremental update.

Versions need to be pushed to the repo with git push --tags

Publishing

Artifacts are automatically saved as a zip library with the AWS CI setup for this project.

To publish as a npm module, run the following command npm publish --access public.

A new release will be published at https://www.npmjs.com/package/@modusbox/modusbox-ui-components

Note: you need to be logged in the modusbox organization in npm, credentials can be found in 1Password.