UI Component Library

React components built for Digital Catapult projects 🧠

See the latest version in our storybook

Installation / Adding to the Package.json

@digicatapult/ui-component-library are available as an npm package. This should get installed along with n In order to use your local version in the project please use npm link more on it -> here and below in this document

// with npm
npm install @digicatapult/ui-component-library

Usage

import React from 'react'
import ReactDOM from 'react-dom'
import { Button } from '@digicatapult/ui-component-library'

function App() {
  return <Button onClick={(e) => window.alert(e)}>My Button</Button>
}

ReactDOM.render(<App />, document.querySelector('#app'))

Accessing storybook locally

npm run storybook
# and if browser won't open visit http://localhost:9000/ url

Documentation

Check out our storybook for documentation of individual components.

Contributing

Read the contributing guide to learn about our development process, how to propose bugfixes and improvements.

License

This project is licensed under the terms of the Apache License.

Stack

React typescript styled-components Storybook Jest

Configuration

At BUILD time, storybook is configured using environment variables in a .env file at root:

variable	required	default	description
STORYBOOK_MAPBOX_TOKEN	N	-	Required for the Map component. Token for your Mapbox account

Dependency Installation

npm install

Run Storybook

start storybook

npm run storybook

This will open the browser and will run storybook at localhost:9000

Local linking for development

If you want to link @digicatapult/ui-component-library to your project while developing

run

npm run build:watch

In another terminal, npm link to your project's react. This prevents issues arising from two Reacts — one in the project folder and the one in ui-component-library. Next create a global symlink for ui-component-library e.g.

npm link ../hii-client/node_modules/react
npm link

Finally, in your project run the following command

npm link "@digicatapult/ui-component-library"

And you should be able to see the changes in your project as you add/change components in this library.

Bumping package versions

Following this guide

Guide

Given a version number MAJOR.MINOR.PATCH, increment the: MAJOR version when you make incompatible API changes, MINOR version when you add functionality in a backwards compatible manner, and PATCH version when you make backwards compatible bug fixes.

PATCH bump examples:

• Updating docs
• Refactoring while keeping the same usage, for instance, renaming files and things that do not affect behaviour
• Fixing typos of variable or type names
• Upgrading dependencies with minor or patch releases

MINOR bump examples:

• New components
• New features
• CSS improvements without any style changes
• Fixing small bugs such as bugs related to browser compatibility, or bugs with property types
• Adding new property for a component

MAJOR bump examples:

• Anything that breaks existing behaviour
• Changing the styling of a component with any visually noticeable change that will break the desired UI.
• Upgrading dependencies by major versions only if:
  • The component library somehow exposed the internals of the dependency upgraded (hence it becomes a public API change)
  • The component library needs to change its public API in a non-backward compatible way to adapt to the dependency upgraded.

    If none of the above (for instance a bump in the package.json and rebuild without changes for a non-exported dependency), it should be a patch release.

• Changes/fixes/new features around security breaches.

Testing

Make sure you have installed all dependencies ( If you linked your project locally, npm run prelink has only installed dependencies, make sure you installed devDependencies before running tests)

npm

npm run test

• Test with coverage report

npm run coverage

• Update snapshots and test

npm run test -u

Dependency check

npm run depcheck