JSPM

  • Created
  • Published
  • Downloads 22
  • Score
    100M100P100Q79574F
  • License MPL-2.0

A React component library based on ASC and Material-UI aimed at repurposing and sharing components across BMI projects

Package Exports

  • @amsterdam/bmi-component-library
  • @amsterdam/bmi-component-library/es/index.js
  • @amsterdam/bmi-component-library/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@amsterdam/bmi-component-library) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

BMI Component Library

A React component library based on Amsterdam Styled Components and Material-UI specifically aimed at repurposing and sharing domain specific components across BMI projects.

NOTE: If you are looking for a component library that is primarily focused on providing you with building blocks which are aligned with the Amsterdam Design System, then take a look at Amsterdam Styled Components instead.

Getting started

To import components from this library you will to at least have followed the ASC Getting Started guide.

There are also a number of components that make use of MUI components. You can follow the Installation guide. Make sure to configure a path in your TS config to create an override for styled-components as documented in the MUI getting started guide (it will render de emotion dependency redundant).

With both ASC en MUI configured you will have your application wrapped in 2 theme providers like so:

import { muiTheme } from '@amsterdam/bmi-component-library';
import { ThemeProvider } from '@amsterdam/asc-ui';
import { ThemeProvider as MUIThemeProvider } from '@mui/material';
import theme from '../theme';

<MUIThemeProvider theme={muiTheme}>
    <ThemeProvider overrides={theme}>
        // ... styled ASC/MUI components
    </ThemeProvider>
</MUIThemeProvider>

Unit tests

Unit tests are done with Jest and @testing-library/react.

To run the unit tests:

npm run test

Storybook

To run storybook:

npm run start