reach-ui

> Reach-UI is currently not maintained! See [this issue](https://github.com/reach/reach-ui/issues/972) # Welcome to Reach UI Development ♿️ Thanks for getting involved with Reach UI development! ## Looking for the documentation? https://reach.tech/ ## Getting Started Reach UI is built and tested with [Yarn](https://yarnpkg.com). Please follow their [install instructions](https://yarnpkg.com/getting-started/install) to get Yarn installed on your system. Then, run these commands: ``` git clone [email protected]:reach/reach-ui.git cd reach-ui pnpm install pnpm build ``` ## Root Repo Scripts: ```sh pnpm build # builds all packages pnpm dev # starts storybook server pnpm test # runs tests in all packages ``` ## Running / Writing Examples First do the steps in "Getting started", then start the Storybook server: ``` pnpm dev ``` Next, put a file in `packages//examples/.example.js` and make it look like this: ```jsx import * as React from "react"; // The name of the example (always name the variable `name`) let name = "Basic"; // The example to render (always name the function `Example`) function Example() { return ; } // Assign the name to the example and then export it as a named constant Example.storyName = name; export const Basic = Example; // Default export an object with the title matching the name of the Reach package export default { title: "Dialog" }; ``` 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. ## Running / Writing Tests First do the steps in "Getting Started", then: ``` pnpm test ``` Or if you want to run the tests as you edit files: ``` pnpm test --watch ``` Often you'll want to just test the component you're working on: ``` cd packages/ pnpm test --watch ``` ## Development Plans The components to be built come from the the [Aria Practices Design Patterns and Widgets](https://www.w3.org/TR/wai-aria-practices-1.2), with a few exceptions. Here is a table of the components and their status. ✅ - Released
- Building
| Status | Name | | ------ | -------------- | | ✅ | Accordion | | ✅ | Alert | | ✅ | Alert Dialog | | ✅ | Checkbox | | ✅ | Combo Box | | ✅ | Dialog (Modal) | | ✅ | Disclosure | | | Hover Card | | ✅ | Listbox | | ✅ | Menu Button | | | Radio Group | | ✅ | Slider | | ✅ | Tabs | | | Toggletip | | ✅ | Tooltip | ## Releases [DEPRECATED] This is (was?) our current release process. It's not perfect, but it has almost the right balance of manual + automation for me. We might be able to put some of this in a script... ``` … ``` You need to be careful when publishing a new package because the `lerna publish` on CI will fail for new packages. To get around this, you should publish a `0.0.0` version of the package manually ahead of time. Then the release from CI will be ok. This is really janky but AFAICT the only workaround. Stuff I'd like to improve: - Automate changelog generation and GitHub release from CI - Document how we're using GitHub PRs to generate the changelog somewhere ## Website The website is a Gatsby app in the `website` directory. It automatically deploys to https://reach.tech/ when the `website` branch is updated.