MaPS - Directories React Component Library

Installation

The component library is available via NPM or Yarn:

  $ npm install @moneypensionservice/directories
  # or
  $ yarn add @moneypensionservice/directories

Usage

You can find a list of all available components on the documentation website as well as guides to set up the library on your React application.

Technologies used

• React for creating components and styled-components for styling;
• Styleguidist for both live development and generating documentation;
• Jest with React Testing Library for testing;
• Rollup and Babel for bundling the library for publishing to NPM;
• Travis CI for auto-deployment of the documentation via GitHub pages.

Running the project locally with Styleguidist

Install NPM dependencies

  $ npm install

Preview components

  $ npm start

Live reloading and preview of the components should be available at http://localhost:6060 powered by Styleguidist.

Testing

  $ npm test

Building the project

Cleanup and rebuild the files in the lib directory:

  $ npm run prepublishOnly

Make sure the project builds before publishing and display the contents of the package that will be published to NPM:

  $ npm run postbuild

Publishing package to NPM

If your user is a member of the NPM registry, login:

  $ npm login --scope=@moneypensionservice

Now you should be ready to publish the package:

  $ npm publish --access=public

Adding new users to the NPM Registry

Create an account at npmjs.com. You should ask for an invitation to join the organisation registry.

An admin can add a new member to the registry:

  $ npm adduser --scope=@moneypensionservice

or via npmjs.com following this guide.

Deploying the documentation

Documentation will automatically updated via TravisCI when changes are made to the master branch if the build is successfull. It is available online as a GitHub Page at https://moneyadviceservice.github.io/react_library/.

To generate the Styleguidist documentation to the dist-docs directory on your local machine:

  $ npm run docs:build