@amsterdam/bmi-component-library

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