open-index/open-npm huggingface dataset:
npm package: @karmarama-toolbox/karma-components
Description: This project contains a component library and associated Storybook.
Latest version: 0.1.11

# 🚀 Karma Component Library

This project contains a component library and associated Storybook.

## Getting started

- Install deps with `npm install`

## Available Scripts

In the project directory, you can run:

- `npm run storybook` - Runs storybook in dev mode
- `npm run build-storybook` - Create a storybook build
- `npm run build` create a new build of the component library for export
- `npm run test` runs automated unit, snapshot, and visual regression tests

## Using the Component Library

You can install and use the component library in other React projects with

- `npm install @karmarama-toolbox/karma-components`

### Set up the Theme Provider

Before using the components, you will need to provide the theme provider component at the root of the application. You have two options.

- Use the default theme from the library

```jsx
import ReactDOM from 'react-dom'
import App from './App'
import { KarmaThemeProvider } from '@karmarama-toolbox/karma-components'

ReactDOM.render(
  document.getElementById('root'),
  <KarmaThemeProvider>
    <App />
  </KarmaThemeProvider>
)
```

- Or, use the generic theme provider which can be extended with your own

```jsx
import ReactDOM from 'react-dom'
import App from './App'
import { ThemeProvider, karmaTheme } from '@karmarama-toolbox/karma-components'

// * Extend the base theme
const theme = {
  ...karmaTheme,
  colors: {
    primary: 'red'
  }
}

ReactDOM.render(
  document.getElementById('root'),
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>
)
```

You can then import and use components in your app.

```jsx
import { Heading } from '@karmarama-toolbox/karma-components'

function MyComponent() {
  return <Heading type="h1">Hello World</Heading>
}
```

### Set up the global CSS

To make use of global CSS rules from this component library, add an instance of the `GlobalStyle` component as follows:

```jsx
import { GlobalStyle } from '@karmarama-toolbox/karma-components'

function App() {
  return (
    <>
      <ThemeProvider>
        <GlobalStyle />
        ...
      </ThemeProvider>
    </>
  )
}
```