Aurora Design System

See Storybook for more information.

How to run Aurora Design System Storybook locally:

npm i
npm run storybook

How to use Aurora Design System in your project:

1. Most of the components and patterns described in this Storybook require that your project has version 4 of Material UI as a dependency:

npm install @material-ui/core@">=4.9.5 <5.0.0"

Depending on the components you wish to use in your project, you may also need to install supplementary Material UI packages. For example:

npm install @material-ui/icons

2. Add @aurora-io/design-system to your project as a dependency:

npm install @aurora-io/design-system

3. Choose an exported theme and inject it via the MuiThemeProvider:

import React from 'react';
import { auroraTheme } from "@aurora-io/design-system";
// import { daisyTheme } from "@aurora-io/design-system";
import { ThemeProvider } from "@material-ui/core/ThemeProvider";
import Button from '@material-ui/core/Button';

function App() {
  return (
    <MuiThemeProvider theme={auroraTheme}>
      <Button>This Button Is Aurora Themed</Button>
      // The rest of my app lives here
      ...
    </MuiThemeProvider>
  );
}

See the Storybook for more examples of component usage.

Tooling / Build setup

This project is based on the Create React App Typescript template with Storybook applied using it's @storybook/preset-create-react-app preset to leverage CRA's Webpack HMR setup for a good dev experience.

Builds for publishing to NPM are taken care of with TSDX. While that project has bootstrapping functionality, here just it's Rollup based build setup is used, as it's bootstrapped version of storybook doesn't provide live reload or HMR currently.

Note in package.json all dependencies are currently declared under devDependencies and peerDependencies. The majority of project is currently concerned with theming Material UI, and declaring that as a peer dependency allows more flexibility with versioning in host projects and keeps bundle size down.

Testing

Generate a local copy of the updated design-system package and install this to the project you want to test the changes in. For example:

npm run build && npm pack
cd ../whatever-host-project
npm i ~/wherever/design-system/design-system-x.x.x.tgz

Releasing

Gitlab builds and publishes a new version of the package to NPM when a release is created in the Releases UI (which makes tags in the Git repo).

Tags should follow the format v<major>.<minor>.<patch> eg v0.2.5.

Tags don't belong to any particular branch, so only create them when merge requests have been accepted and the current master is ready to be deployed.