28Stone Design System

28Stone Design System is a reusable component library that helps 28Stone employees to build internal application UIs faster. The goal is to make building durable UIs more productive and satisfying.

The latest version is published here.

Install

28SDS components are written in React, and its stories are written in Component Story Format.

Add 28SDS to your project.

npm install --save @28stoneconsulting/design-system or yarn add @28stoneconsulting/design-system

To use the legacy v4 of material-ui:

npm install --save @28stoneconsulting/[email protected] or yarn add @28stoneconsulting/[email protected]

Use

28SDS is using material-ui theming approach and emotion for syling. Add the following imports into the ts/js file:

import CssBaseline from '@mui/material/CssBaseline';
import { ThemeProvider as MuiThemeProvider, StyledEngineProvider } from '@mui/material/styles';
import { themeDark as theme, Button, Badge } from '@28stoneconsulting/design-system';
import { ThemeProvider } from '@emotion/react';

and use them like so

const example = () => (
  <StyledEngineProvider injectFirst>
    <MuiThemeProvider theme={theme}>
      <CssBaseline />
      <ThemeProvider theme={theme}>
        <div>
          <Button appearance="primary" onClick={() => {}}>
            Do something
          </Button>
          <Badge onClick={() => {}}>Cool</Badge>
        </div>
      </ThemeProvider>
    </MuiThemeProvider>
  </StyledEngineProvider>
);

For legacy version <=1.0.18 use 28SDS like so:

import CssBaseline from '@material-ui/core/CssBaseline/CssBaseline';
import { StylesProvider, MuiThemeProvider } from '@material-ui/core/styles';
import { ThemeProvider } from '@emotion/react';
import { themeDark as theme, Button, Badge } from '@28stoneconsulting/design-system';

and use them like so

const example = () => (
  <StylesProvider injectFirst>
    <MuiThemeProvider theme={theme}>
      <CssBaseline />
      <ThemeProvider theme={theme}>
        <div>
          <Button appearance="primary" onClick={() => {}}>
            Do something
          </Button>
          <Badge onClick={() => {}}>Cool</Badge>
        </div>
      </ThemeProvider>
    </MuiThemeProvider>
  </StylesProvider>
);

The codesandbox example can be accessed here

Run and develop 28SDS locally

Clone the 28SDS GitHub project then start Storybook.

yarn && yarn storybook

Deployment

yarn build-storybook

yarn build-docs

Push changes and PR into main.

The version number will bump automatically.

The CHANGELOG.md will update automatically.

Resources

• GitHub repository