Thanks for getting involved with Reach UI development!
Reach UI is built and tested with Yarn. Please follow their install instructions to get Yarn installed on your system.
Then, run these commands:
git clone git@github.com:reach/reach-ui.git
cd reach-ui
yarn install
yarn build
yarn build # builds all packages
yarn start # starts storybook server
yarn test # runs tests in all packages
yarn release # publishes changed packages
The website uses Gatsby v2 with Gatsby MDX powering most of the pages. It is deployed with now
yarn build # builds the production site to "public/"
yarn start # starts the website
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:
yarn start
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 MenuButton
example.
First do the steps in "Getting Started", then:
yarn test
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?
Status | Name |
---|---|
🛠 | Accordion |
✅ | Alert |
✅ | Alert Dialog |
❓ | Breadcrumb |
❓ | Button |
🛠 | Carousel |
🛠 | Checkbox |
✅ | Combo Box |
✅ | Dialog (Modal) |
🛠 | Disclosure |
❓ | Feed |
❓ | Grids |
❓ | Link |
🛠 | Listbox |
🛠 | Menu or Menu bar |
✅ | Menu Button |
🛠 | Radio Group |
🛠 | Slider |
🛠 | Slider (Multi-Thumb) |
❓ | Spinbutton |
❓ | Table |
✅ | Tabs |
❓ | Toolbar |
✅ | Tooltip |
🛠 | Tree View |
❓ | Treegrid |
❓ | Window Splitter |