COD-Design-System

Design System proof of concept

Getting Started

This project was created using:

• Webpack as a web application bundler.
• Yarn to manage project dependencies.
• MapLibre for map framework.
• Storybook for UI component management.

Using in Your Project

1. Load package into your project

   yarn add @cityofdetroit/cod-design-system

   npm i @cityofdetroit/cod-design-system

Contributing

Setup Local Environment

1. Download the repo.

   $ git clone git@github.com:jedgar1mx/COD-Design-System.git

2. Install node dependencies.

   $ yarn

3. Run local instance.

   $ yarn storybook

4. Build storybook.

   $ yarn build-storybook

Testing

Use Storybooks built-in test-runner:

1. Run a local instance of storybook in one process.

2. Invoke the test runner in another. Note: depending on the power of you machine, you may have to reduce concurrent workers to avoid test timeout failures. Use --maxWorkers=2 to limit the workers to two.

   $ yarn test-storybook

Formatting and Linting

The remote repository will enforce ESLint rules and Prettier formatting.

To check ESLint and Prettier formatting locally:

$ yarn lint

To format the code in ./src/:

$ yarn prettier -w ./src