How to create and use the Design System

Component composition.

• When creating components that consists of several components, each component should be styled.
• Each components that is used to create a "composed" component should be styled, and remember to check if the component alread is styled.
• When creating a "composed component" evalute if it's really needed to create a composed component, or just document how to use the styled components.
  • MUI often has documentation on how to create composed components.

Documentation and testing

• All components shall be documented and tested in Storybook before PR is created.

Changelog

The project uses "changesets" to automatically bump version and create a changelog.

For each new feature or change run "npx changeset". Choose patch for a change or bug fix, minor for a new feature or major version for a breaking change. This creates a markdown file in .changeset folder. Commit to brach/PR as normal.

A PR can have several changesets.

The pipeline will automatically bump version and create changelog after merge to master.

Index file

• Index files shall not be edited manually.
• ctix is used for automatically create index files for exporting componens. Run "npm run create-index"
• 'src/styles/index.ccss' is imported to 'src/theme/customMuiColors.ts' so exporting works with ctix.

Using MUI theme in App

1import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
2import { defaultTheme, customPalettes } from 'asma-ui-notistack';
3
4const dataTheme = window.document.body.attributes.getNamedItem('data-theme');
5
6const getTheme = () => {
7  switch (dataTheme?.value) {
8    case 'fretex':
9      return customPalettes.fretex.primary;
10    default:
11      return null;
12  }
13};
14
15const theme = createTheme(defaultTheme, {
16  palette: {
17    ...defaultTheme.palette,
18    primary: {
19      ...getTheme(),
20    },
21    role: customPalettes.role,
22  },
23});
24
25<React.Fragment>
26  <ThemeProvider theme={createMuiTheme(theme)}>
27    <... />
28  </ThemeProvider>
29</React.Fragment>

Using Components in App

1import { StyledButton } from 'asma-ui-notistack';
2
3...
4
5<>
6  <StyledButton>
7    Text
8  </StyledButton>
9</>