Thanks for getting involved with Reach UI development!
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 protected]:reach/reach-ui.git cd reach-ui yarn install yarn bootstrap yarn build
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
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
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
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.
✅ - Released
🛠 - Planning to Build
❓ - Might Build?
|🛠||Menu or Menu bar|