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
  • - 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).


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/
Copyright 2021 Arc XP