@music-loopy/loops/README.md

A React component library for Music Loopy Applications and websites

![Logo](https://musicloopy.netlify.app/logo.png)

# 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](https://main--665f79699d07d8287d55827b.chromatic.com/)

![Mega head gif](https://media1.tenor.com/m/r6zafkpW15oAAAAC/show-me-what-you-got-rick-and-morty.gif)

## Contributing

### Get started

- `npm i`
- `npm run storybook`

### View online storybook

[On Chromatic](https://main--665f79699d07d8287d55827b.chromatic.com/)

### 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.