Music Loopy Component Library

Using the libray

Installation

npm i @music-loopy/loops

Importing

To use a component you can simply import it and place on you react component

import {Button} from "@music-loopy/loops"

const App = () => {
    return (
        <div>
            <p> Welcome to my World! <p>
            <Button size="large"> Visit world </Button>
        </div>
    )
}

You can view the list of loopy components on our chromatic storybook.

Visit Chromatic Storybook

Contributing

Get started

• npm i
• npm run storybook

View online storybook

On Chromatic

Deploying Storybook

• npm run chromatic

Then you can view your deployment at

https://(branch)--665f79699d07d8287d55827b.chromatic.com

Our Contribution process

• Create a component
• Make sure component can function is not coupled or highly dependant on another component
• Make component modular
• Create a story for your component (Lets see it in action)
• Once satisfied push to github
• Publish Chromatic storybook
• Review process
• Publish npm package

Publishing to npm

• npm run build
• npm version patch
• npm publish

Or simply run npm run deploy which will do all the above

Node version issues

We currently have an issue when building the project with versions greater than Node 16 with NWB This requires us to use version 16 to build and use 18+ to run storybook. THis will be looked into and solved but for now use version 16 to build and any version from 18 upwards to run storybook. To easily switch between versions please consider using Node Version Manager (NVM) on your system.