Welcome to Reach UI Development
Thanks for getting involved with Reach UI development!
Looking for the documentation?
This project uses
- Lerna to manage multiple libs
- Storybook for a great development experience
- Gatsby for a blazing fast website.
- Jest for painless testing.
Before doing anything else, run these commands:
git clone email@example.com:reach/reach-ui.git cd reach-ui yarn install yarn bootstrap yarn build
Root Repo Scripts:
yarn bootstrap # bootstraps lerna so all dependencies get # linked for cross-component development yarn start # starts storybook server yarn test # runs tests in all packages yarn build # builds all packages yarn release # publishes changed packages
www directory scripts
yarn start # starts the website yarn build # builds the production site to "public/" yarn stage # deploys the site with now.sh yarn deploy # alias the latest deploy to production
Running / Writing Examples
First do the steps in "Getting started", then start the Storybook server:
Next, put a file in
packages/<component-dir>/examples/<name>.example.js and make it look like this:
import React from "react"; // The name of the example, you must export it as `name` export let name = "Basic"; // The example to render, you must name it `Example` export let Example = () => <div>Cool cool cool</div>;
Now you can edit the files in
packages/* and storybook will automatically reload your changes.
Note: If you change an internal dependency you will need to run
yarn build again. For example, if working on
MenuButton requires a change to
Rect (an internal dependency of
MenuButton), you will need to run
yarn build for the changes to
Rect to show up in your
Running / Writing Tests
First do the steps in "Getting Started", then:
Or if you want to run the tests as you edit files:
yarn test --watch
Often you'll want to just test the component you're working on:
cd packages/<component-path> yarn test --watch
The components to be built come from the the Aria Practices Design Patterns and Widgets. Here is a table of the components and their status.
|Menu or Menu bar|