@karmarama-toolbox/karma-components NPM

🚀 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

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

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.

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:

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

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