@karmarama-toolbox/karma-components

🚀 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>
    </>
  )
}