Kokoro | Hearth Design System

Figma | Notion |

Bootstrapped with tsdx, using the provided react-with-storybook template. This repository maintains the component library for Hearth's web (and eventually mobile) app and overall style guide. Kokoro is meant to be an atomic design system.

Getting started

Clone this repository with SSH:

git clone [email protected]:shogun-hearth/kokoro.git

Install dependencies:

npm install

Recommended workflows

The recommended workflow is to run TSDX in one terminal:

npm start

This builds to /dist and runs the project in watch mode so any edits you save inside src causes a rebuild to /dist.

Then run Storybook inside another terminal:

npm run storybook

This loads the stories from ./src/components. A tab should automatically open with Storybook running, but if it doesn't, navigate to localhost:6006.

Resources

• Storybook
  • Rich docs with MDX
• What is Atomic Design?
• Design system examples:
  • Gamut (Codecademy's design system)
  • Storybook's Storybook

Contributing

• Use named exports for all components that we want to surface as a part of the package
• Fill out the MDX template to ensure all components are well documented
• Add a unit test for each component added

Bookkeeping

Jest

Jest tests are set up to run with npm test, but no tests have been implemented yet.

Continuous Integration

Deployed to Netlify on each push. Working on setting up a proper deployment policy.