Contributing

This guide walks through how to contribute to the Arc Design System.

#Quick start guide

Ensure you have yarn and the latest Node LTS version installed
Clone the repository
Branch from master branch
Run yarn gen-props in case you want to run the documentation website
Run yarn install
You will need node 10.x+ version in order to run cypress tests and run the projects.

#Building components

Currently, all components are in the packages directory. To quickly create a new component, run yarn g component to run the generator, and follow the prompts. This generator creates a folder in packages/{package-name} with the following:

src/index.ts - export relevant component modules
src/ComponentName.tsx - primary component file
src/ComponentName.stories.tsx - storybook file
package.json - relevant scripts and default dependencies
README.md - empty stub

The generator also creates an alias in package.json for the component: yarn {package-name} instead of yarn workspace @wpmedia/ads-{package-name}. This will make it easier to run yarn commands for the component package. For example, most components rely on @wpmedia/ads-system, so after running the generator you can run yarn {package-name} add @wpmedia/ads-system@x.x.x (installing local packages requires you specify a version).

#Storybook

To start work on the component, start the Storybook by running yarn sb.

#Intro to styling

All design tokens for the Arc UI can be found in packages/system/src/stitches.config.ts. Styles are based on stitches library using tokens and variants to use styles in the app, Stitches is a lightweight, performant styling library with a focus on component architecture and developer experience. Stitches website Example stitches.config.ts:

colors: {
      white: '#fff',
      black: '#000',

      purple50: '#edf2fe',
      purple100: '#d1dbfc',
      purple200: '#a5b7fa',
}

Example component using stitches tokens values:

<HStack>
  <Icons.Close color="$purple50" isSmall />
  <Icons.Close color="$purple200" />
</HStack>

For more information, see the Stitches website.

#Pull request process

See the PR template at .github/pull_request_template.md