open-index/open-npm huggingface dataset:
npm package: @grahack/react-sheet-music-mirror
Description: React component to render interactive sheet music using [ABC notation](http://abcnotation.com/learn). Powered by [ABC JS](https://paulrosen.github.io/abcjs/) under the hood.
Author: Kaho Cheung
Latest version: 0.0.5

# React Sheet Music

React component to render interactive sheet music using [ABC notation](http://abcnotation.com/learn). Powered by [ABC JS](https://paulrosen.github.io/abcjs/) under the hood.

> Work in progress

# Install

```bash
$ npm install @slnsw/react-sheet-music
```

# Usage

```jsx
import SheetMusic from 'react-sheet-music';

const MyComponent = () => {
  return (
    <SheetMusic
      // Textual representation of music in ABC notation
      // The string below will show four crotchets in one bar
      notation="|EGBF|"
    />
  );
};
```

# Props

| Prop       | Type     | Description                                                                               |
| ---------- | -------- | ----------------------------------------------------------------------------------------- |
| notation   | string   | Textual representation of music in ABC notation                                           |
| isPlaying  | boolean  | If playing, the notes will highlight and onBeat, onEvent and onLineEnd callbacks will run |
| responsive | string   | Undefined or 'resize'                                                                     |
| className  | string   | Custom class name to add to sheet music div                                               |
| onClick    | function | Callback for when any part of the sheet music is clicked on                               |
| onBeat     | function |                                                                                           |
| onEvent    | function |                                                                                           |
| onLineEnd  | function |                                                                                           |

# Development

```bash
# Install packages for this component
$ npm install
# This builds the component in watch mode
$ npm start

# Open up a new terminal window and go to repo location
$ cd example
# Install packages for example app
$ npm install
# Test out component in app
$ npm start
```
npm package: @graham42/prettier-config
Description: Automated prettier config setup
Author: Graham McGregor
Latest version: 3.0.0

# :art: Automated project setup - [Prettier][]

This package provides automated setup of [Prettier][] in a new project.

[prettier]: https://prettier.io/

## Usage

```sh
npx @graham42/prettier-config@latest
```

## Features

This package will set up:

- npm scripts `check:format` and `fix:format` in package.json
- a `.prettierrc.js` file with config for better git diffs
- a `.gitignore` file if one doesn't exist using `npx gitignore@latest node`
- the `prettier` package
- [VS Code](https://code.visualstudio.com/) project settings to format on save
  using Prettier
- some VS Code whitespace settings for better git diffs
- the VS Code Prettier extension as a
  [recommended workspace extension](https://code.visualstudio.com/docs/editor/extension-marketplace#_workspace-recommended-extensions)
  to help new contributors to your project get up and running
npm package: @grahamcrackers/components
Description: A Component Library
Author: Graham Rogers
Latest version: 0.1.3

# @grahamcrackers/components

![NPM Version](https://img.shields.io/npm/v/@grahamcrackers/components)


An example of a component library of [shadcn](https://ui.shadcn.com/) components with a theme, in a tree-shakeable, 
reusable package, and compatible with esm and cjs projects.

## Setup

Hope to have a cli to automatically do this, but for now:

Install tailwindcss
```bash
yarn install tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

Add to your tailwind.config.js
```js
/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./index.html",
        "./src/**/*.{js,ts,jsx,tsx}",
        "./node_modules/@grahamcrackers/components/**/*{js,ts,jsx,tsx}"
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}
```

Configure your css
```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root, .light {
        --background: 0 0% 100%;
        --foreground: 222.2 84% 4.9%;

        --card: 0 0% 100%;
        --card-foreground: 222.2 84% 4.9%;

        --popover: 0 0% 100%;
        --popover-foreground: 222.2 84% 4.9%;

        --primary: 222.2 47.4% 11.2%;
        --primary-foreground: 210 40% 98%;

        --secondary: 210 40% 96.1%;
        --secondary-foreground: 222.2 47.4% 11.2%;

        --muted: 210 40% 96.1%;
        --muted-foreground: 215.4 16.3% 46.9%;

        --accent: 210 40% 96.1%;
        --accent-foreground: 222.2 47.4% 11.2%;

        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 210 40% 98%;

        --border: 214.3 31.8% 91.4%;
        --input: 214.3 31.8% 91.4%;
        --ring: 222.2 84% 4.9%;

        --radius: 0.5rem;
    }

    .dark {
        --background: 222.2 84% 4.9%;
        --foreground: 210 40% 98%;

        --card: 222.2 84% 4.9%;
        --card-foreground: 210 40% 98%;

        --popover: 222.2 84% 4.9%;
        --popover-foreground: 210 40% 98%;

        --primary: 210 40% 98%;
        --primary-foreground: 222.2 47.4% 11.2%;

        --secondary: 217.2 32.6% 17.5%;
        --secondary-foreground: 210 40% 98%;

        --muted: 217.2 32.6% 17.5%;
        --muted-foreground: 215 20.2% 65.1%;

        --accent: 217.2 32.6% 17.5%;
        --accent-foreground: 210 40% 98%;

        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 210 40% 98%;

        --border: 217.2 32.6% 17.5%;
        --input: 217.2 32.6% 17.5%;
        --ring: 212.7 26.8% 83.9%;
    }
}

@layer base {
    * {
        @apply border-border;
    }
    body {
        @apply bg-background text-foreground;
    }
}

```
npm package: @grahlie/gatsby-theme-grahlie-atomic
Description: Atomic design Gatsby theme
Author: Mathias Grahl
Latest version: 1.1.1

<p align="center">
  <a href="https://www.gatsbyjs.org">
    <img alt="Gatsby" src="https://www.gatsbyjs.org/monogram.svg" width="60" />
  </a>
</p>
<h1 align="center">
  Grahlie Atomic Gatsby Theme
</h1>

## 🚀 Quick start

1.  **Create a Gatsby site.**

    Use the Gatsby CLI to create a new site, specifying the default starter.

    ```shell
    # create a new Gatsby site using the default starter
    gatsby new my-new-site https://gitlab.com/grahlie/grahlie-atomic-gatsby-starter
2. **Add this theme as package dependency**
    ```shell
    yarn add @grahlie/gatsby-theme-grahlie-atomic gatsby react react-dom
3. **Create Gatsby Config**
    Add this theme inside your Gatsby config.
    ```shell
    module.exports = {
        plugins: [
            {
                resolve: "@grahlie/gatsby-theme-grahlie-atomic",
                options: {
                    title: `My new Site`,
                    author: `@mynewsite`
                }
            }
        ]
    }
    ```

    Options:
    ```shell
    options: {
      title: `My new Site`,
      author: `@mynewsite`,
      contact: {
        email: 'INFO@EXAMPLECOMPANY.COM',
        phone: '+461253252345',
        address: 'EXAMPLE STREET',
        orgnr: 'ORG NUMBER'
      },
      fontFamily: `Open Sans`,
      fontSizes: [400, 700]
    }

## 🧐 What's inside?

A quick look at the components folder

    .
    ├── atoms
    ├── molecules
    ├── organisms
    └── templates


<!-- AUTO-GENERATED-CONTENT:END -->