{"id":13406693,"url":"https://github.com/reach/reach-ui","last_synced_at":"2025-05-13T10:59:56.923Z","repository":{"id":37484520,"uuid":"142967350","full_name":"reach/reach-ui","owner":"reach","description":"The Accessible Foundation for React Apps and Design Systems","archived":false,"fork":false,"pushed_at":"2025-02-10T20:59:23.000Z","size":31046,"stargazers_count":5995,"open_issues_count":98,"forks_count":560,"subscribers_count":54,"default_branch":"dev","last_synced_at":"2025-05-13T10:58:56.035Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://reacttraining.com/reach-ui/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/reach.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":null,"open_collective":"reach-ui","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2018-07-31T05:41:40.000Z","updated_at":"2025-05-10T10:03:47.000Z","dependencies_parsed_at":"2024-01-17T18:42:07.576Z","dependency_job_id":"628b3629-816d-44ba-966c-bbf24279ea63","html_url":"https://github.com/reach/reach-ui","commit_stats":{"total_commits":1466,"total_committers":167,"mean_commits":8.778443113772456,"dds":0.6937244201909959,"last_synced_commit":"43f450db7bcb25a743121fe31355f2294065a049"},"previous_names":[],"tags_count":320,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reach%2Freach-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reach%2Freach-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reach%2Freach-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reach%2Freach-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reach","download_url":"https://codeload.github.com/reach/reach-ui/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253929358,"owners_count":21985802,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T19:02:36.753Z","updated_at":"2025-05-13T10:59:56.889Z","avatar_url":"https://github.com/reach.png","language":"TypeScript","readme":"\u003e Reach-UI is currently not maintained! See [this issue](https://github.com/reach/reach-ui/issues/972)\n\n# Welcome to Reach UI Development ♿️\n\nThanks for getting involved with Reach UI development!\n\n## Looking for the documentation?\n\nhttps://reach.tech/\n\n## Getting Started\n\nReach 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.\n\nThen, run these commands:\n\n```\ngit clone git@github.com:reach/reach-ui.git\ncd reach-ui\npnpm install\npnpm build\n```\n\n## Root Repo Scripts:\n\n```sh\npnpm build        # builds all packages\npnpm dev        # starts storybook server\npnpm test         # runs tests in all packages\n```\n\n## Running / Writing Examples\n\nFirst do the steps in \"Getting started\", then start the Storybook server:\n\n```\npnpm dev\n```\n\nNext, put a file in `packages/\u003ccomponent-dir\u003e/examples/\u003cname\u003e.example.js` and make it look like this:\n\n```jsx\nimport * as React from \"react\";\n\n// The name of the example (always name the variable `name`)\nlet name = \"Basic\";\n\n// The example to render (always name the function `Example`)\nfunction Example() {\n\treturn \u003cdiv\u003eCool cool cool\u003c/div\u003e;\n}\n\n// Assign the name to the example and then export it as a named constant\nExample.storyName = name;\nexport const Basic = Example;\n\n// Default export an object with the title matching the name of the Reach package\nexport default { title: \"Dialog\" };\n```\n\nNow you can edit the files in `packages/*` and storybook will automatically reload your changes.\n\n**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.\n\n## Running / Writing Tests\n\nFirst do the steps in \"Getting Started\", then:\n\n```\npnpm test\n```\n\nOr if you want to run the tests as you edit files:\n\n```\npnpm test --watch\n```\n\nOften you'll want to just test the component you're working on:\n\n```\ncd packages/\u003ccomponent-path\u003e\npnpm test --watch\n```\n\n## Development Plans\n\nThe 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.\n\n✅ - Released\u003cbr/\u003e\n🛠 - Building\u003cbr/\u003e\n\n| Status | Name           |\n| ------ | -------------- |\n| ✅     | Accordion      |\n| ✅     | Alert          |\n| ✅     | Alert Dialog   |\n| ✅     | Checkbox       |\n| ✅     | Combo Box      |\n| ✅     | Dialog (Modal) |\n| ✅     | Disclosure     |\n| 🛠      | Hover Card     |\n| ✅     | Listbox        |\n| ✅     | Menu Button    |\n| 🛠      | Radio Group    |\n| ✅     | Slider         |\n| ✅     | Tabs           |\n| 🛠      | Toggletip      |\n| ✅     | Tooltip        |\n\n## Releases [DEPRECATED]\n\nThis 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...\n\n```sh\n$ git checkout main\n$ git pull origin main\n$ git checkout dev\n$ git pull origin dev\n$ git checkout -b release-\u003cversion\u003e\n$ git merge main\n\n# Resolve any merge conflicts and commit if necessary\n\n# Run the build locally and make sure there are no problems\n$ pnpm build\n$ pnpm test\n\n# Check out the `main` branch and merge release changes from `dev`\n$ git checkout main\n$ git pull origin main\n$ git merge dev\n\n# Write the changelog based on commits. We'll automate this part\n# eventually, but for now this is manual.\n\n# Then create a new version and git tag locally. Don't push yet!\n$ pnpm ver [version]\n\n# Take a look around and make sure everything is as you'd expect.\n# You can inspect everything from the commit that lerna made with:\n$ git log -p\n\n# If something needs to be changed, you can undo the commit and\n# delete the tag that lerna created and try again.\n\n# If everything looks good, push to GitHub along with the new tag:\n$ git push origin main --follow-tags\n\n# Open up https://github.com/reach/reach-ui/actions and watch the build. There will\n# be 2 builds, one for the push to the main branch and one for the\n# new tag. The tag build will run the build and all the tests and then\n# automatically publish to npm if everything passes. If there's a\n# problem, we have to figure out how to fix manually.\n\n# Paste the changelog into the release on GitHub. The release is\n# complete … huzzah!\n```\n\nYou 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.\n\nStuff I'd like to improve:\n\n- Automate changelog generation and GitHub release from CI\n- Document how we're using GitHub PRs to generate the changelog somewhere\n\n## Website\n\nThe website is a Gatsby app in the `website` directory. It automatically deploys to https://reach.tech/ when the `website` branch is updated.\n","funding_links":["https://opencollective.com/reach-ui"],"categories":["TypeScript","React","JavaScript"],"sub_categories":["UI library"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freach%2Freach-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freach%2Freach-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freach%2Freach-ui/lists"}