# Melodic for React

[Storybook](https://dwpholdings.github.io/melodic-react)

[Melodic documentation](https://melodic.helloinspire.com/)

### Link package for local development
[yarn link docs](https://classic.yarnpkg.com/en/docs/cli/link/)

1. Link the melodic-react package locally

`cd melodic-react && yarn link`

2. If working with melodic Components that use Hooks (stateful components), you'll have to link the version of React in your project to `melodic-react`. [Explanation](https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react)

`yarn link ../<myapp>/node_modules/react`

2. Link the melodic-react package to the project you want to use your local melodic-react

`cd <myapp> && yarn link @helloinspire/melodic-react`

3. When you make changes to melodic-react locally, run `yarn build` and the changes will be reflected in your project

** To reverse this process, simply use `yarn unlink` or `yarn unlink @helloinspire/melodic-react`

### Development scripts

#### `yarn start`

> Run the component library locally to make changes

#### `yarn deploy`

> Builds and deploys to Github pages hosted [here](https://dwpholdings.github.io/melodic-react)

#### `yarn push`

> Runs the build step, publishes the package to npm, and deploys to Github pages

#### `yarn build`

> Compile library from Typescript to Javascript and output to the `/build` folder using [Rollup](https://rollupjs.org/guide/en/#introduction)

#### `yarn test`

> Run Jest tests

#### `yarn build-storybook`

> Builds the Storybook stories and outputs them to the `/.out` folder
