Corporate Components

Table of contents

• Usage
  1. Clone this repo
  2. Setup NPM Link
  3. Setup consumer project
  4. Import desired component into your project
  5. Import styles
• Issues
  • React Hooks errors?
  • Permissions
• Development
  • Develop
  • Build
  • Run Storybook

Usage

1. Clone this repo

(TODO: setup npm package location)

git clone [email protected]:wellcometrust/corporate-components.git

2. Setup NPM Link (for local development)

You need to setup a symlink inside the corporate-components project, in order to use it inside another local project. From the corporate-components root, run:

npm link

npm link commands will need to be rerun after any npm install operation.

Read more about npm link

3. Setup a consumer project

If you need to set up a new project, we recommend using create-react-app to get started quickly.

Once you have a project you want to import corporate-components into, cd in to your new project's root and run:

npm link @wellcome/corporate-components

Please note that corporate-components must first be compiled or built in order to use the compiled distributable files.

4. Import desired component(s) into your project

import { ComponentName } from '@wellcome/corporate-components';

5. Import styles

import '@wellcome/corporate-components/dist/styles.css';

Issues

React Hooks errors?

This issue is caused by the very nature of the symlinks which npm uses to create the links. Effectively React is flagging up a possible duplicate instance of React.

To get round this you will need to link to the app instance of React by running the following command from the library root (assuming the library and app are in the same folder).

npm link ../corporate-react/node_modules/react

• Read more about invalid React Hook call warning
• Read more about Hooks + multiple instances of React on github

Permissions (with npm link)

sudo npm link

Development

Develop

Watch and compile files on change.

npm run dev

Build

Builds files for distribution.

npm run build

Run Storybook

Storybook is a UI development environment we are using to power our component library. Using Storybook allows us to work on components in isolation.

npm run storybook