Skip to content

CityOfDetroit/COD-Design-System

Repository files navigation

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 [email protected]: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