Skip to content

Latest commit

 

History

History
64 lines (38 loc) · 3.4 KB

CONTRIBUTING.md

File metadata and controls

64 lines (38 loc) · 3.4 KB
Raw

Contributing Guide

Captain America sitting on a backwards chair

So you want to contribute to MLTSHP… Congratulations! Here's what you'll need to know.

Getting Started

We use the "fork and pull" model, which means you'll need to start by forking our repo, then make some changes, and then submit a pull request back to the main repo.

  1. Fork this repo.
  2. Run npm ci to install dependencies.
  3. Run npm run storybook to start a local instance of Storybook, our preview site.

Any changes you make should automatically be reflected in the preview site.

About

The output of this project is CSS patterns and components. We generate that CSS using Sass and PostCSS.

The CSS depends on JSON tokens, which are converted into CSS custom properties and Sass variables using a tool called Style Dictionary.

And finally, we use Storybook to preview, test, and develop our CSS components in isolation without worrying about app specific dependencies and requirements.

What PostCSS Plugins do We Use?

Our PostCSS setup is minimal. We're running postcss-inline-svg to convert SVGs in the CSS into inline code, and we're running cssnano to minify the final output.

How do Design Tokens Work?

Design tokens are stored in JSON files in the src/tokens/ directory. The build process will automatically translate the tokens to the formats we're consuming, such as CSS custom properties.

How do Storybook Stories Work?

Need help with how Storybook works? Check out the Storybook Docs.

Linting

We run Stylelint against Sass files, ESLint against JS files, and Prettier against all files. Linting will be run automatically against any pull requests.

Submitting a Pull Request

You'll want to create a pull request from a fork of this repo. Once you do, we'll review your code, suggest changes, and eventually merge them! Then your changes will be available for anyone using the package, including the main MLTSHP site!

Publishing

Only admins need to worry about these step.

to npm

  1. git checkout main
  2. git pull
  3. Make sure you have a clean working tree (git status should show no changes)
  4. npm ci
  5. npm run lint:check
  6. npm version
  7. npm publish - This will automatically install and compile everything, run linting, and publish
  8. git push && git push --tags

to MLTSHP.com

  1. npm run build
  2. Copy the minified CSS files from the dist folder to the static/css folder in the MLTSHP repo.
  3. Open a new PR for the updated CSS files.