Melodic for React

Storybook

Melodic documentation

Link package for local development

yarn link docs

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

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

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

yarn test

Run Jest tests

yarn build-storybook

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

Global Styles: StyledApp Component

By default the components come with minimal default styles. To get the fully fleshed out component as it was intended you will need to wrap the components with the StyledApp parent component to bring in a scoped version of melodic-web. We recommend placing this as the highest parent component in the host application, normally in App.tsx or related display layer.

<StyledApp className='inspire-app'>
  <MainNav />
    <ReactMelodicComponent { ...props } />
    <Switch location={location}>
      {routeComponents}
    </Switch>
  <MainFooter />
</StyledApp>