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 [e-mail]: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