{"id":20054383,"url":"https://github.com/divriots/starter-react-aria","last_synced_at":"2026-03-05T12:32:16.948Z","repository":{"id":37242701,"uuid":"368087993","full_name":"divriots/starter-react-aria","owner":"divriots","description":null,"archived":false,"fork":false,"pushed_at":"2022-12-02T10:15:50.000Z","size":151,"stargazers_count":3,"open_issues_count":19,"forks_count":0,"subscribers_count":6,"default_branch":"main","last_synced_at":"2026-02-19T11:38:28.385Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"SCSS","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/divriots.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-05-17T07:03:38.000Z","updated_at":"2025-08-20T13:46:27.000Z","dependencies_parsed_at":"2023-01-22T22:15:46.220Z","dependency_job_id":null,"html_url":"https://github.com/divriots/starter-react-aria","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/divriots/starter-react-aria","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Fstarter-react-aria","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Fstarter-react-aria/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Fstarter-react-aria/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Fstarter-react-aria/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/divriots","download_url":"https://codeload.github.com/divriots/starter-react-aria/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Fstarter-react-aria/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30124450,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-05T11:11:57.947Z","status":"ssl_error","status_checked_at":"2026-03-05T11:11:29.001Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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-11-13T12:40:15.403Z","updated_at":"2026-03-05T12:32:16.331Z","avatar_url":"https://github.com/divriots.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![backlight.dev](https://img.shields.io/badge/Open%20in-Backlight.dev%20editor-%23f8c307)](https://backlight.dev/preview/TIVJpWNAZ0hSftKJ8gjY)\n[![Github Repo](https://img.shields.io/github/last-commit/divriots/starter-react-aria)](https://github.com/divriots/starter-react-aria)\n\n# React Aria Tech Sample \u003cbr/\u003e\u003csmall\u003e_by_ ‹div›RIOTS\u003c/small\u003e\n\nThis is a _Technology Sample_ you can rely on to build your own Design System, based on React and [React Aria](https://react-spectrum.adobe.com/react-aria/).\n\n**Disclaimer**: _Technology Samples_ aren't comprehensive _Design Systems_ but showcases a given technology so you free to build you own solution upon it.\n\n## Architecture\n\nThis _tech sample_ uses [React](https://reactjs.org/) and [JSX](https://reactjs.org/docs/introducing-jsx.html) to implement its components with [TypeScript](https://www.typescriptlang.org/). It relies on [React Aria](https://react-spectrum.adobe.com/react-aria/), which is a part of the _Adobe Spectrum Design System_. React Aria provides a collection of _React Hooks_ to handle the accessibility and navigation behaviors, allowing you to set a proper interaction layer for all of your components.\n\n\u003e React Aria ensures consistent behavior, no matter the UI.\n\n\u003e React Aria provides accessibility and behavior according to WAI-ARIA Authoring Practices, including full screen reader and keyboard navigation support.\n\nBecause of the agnostic nature of React Aria, the Design Tokens for styling are declared in [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*).\n\nThe components then use [Scss](https://sass-lang.com/) for their internal styles, relying on CSS Custom Properties for Tokens access.\n\n### Tokens\n\nThe Tokens are split in different components:\n\n- `typography`: fonts definitions\n- `colors`: colors and variants\n- `spacing`: relative and absolute spaces\n- `elevation`: shadows effects\n- `border-radius`\n- `transitions`: easing and speed\n- `z-index`: z-axe indices\n\nAll tokens are declared in dedicated `_*.scss` files in their dedicated tokens' components. They declare CSS Custom Properties, prefixed with `--aria-*`. They're then all exposed by the `all/all.scss` component global stylesheet.\n\nYour theme tokens are accessible by importing the theme stylesheet:\n\n```ts\nimport '~/all/src/all.scss';\n```\n\n## Components\n\nComponents can access the Tokens anywhere in their stylesheets as they're exposed at top CSS level `:root`.\n\nWhen styled with SCSS, components can use the [Sass `var` method](https://sass-lang.com/documentation/breaking-changes/css-vars) to read the Tokens values.\n\n```scss\n.button {\n  border-radius: var(--aria-border-radius-medium);\n  background: var(--aria-color-primary);\n  color: var(--aria-color-white);\n}\n```\n\nThen the styles are imported in the component using a CSS in React module interpolation:\n\n```ts\nimport styles from './button.module.scss';\n\nexport const Button =\u003e (\n  \u003cbutton className={`${styles.button}`}\u003e\n    // ...\n  \u003c/button\u003e\n)\n```\n\n## Stories\n\nStories are written in Storybook's [Component Story Format](https://backlight.dev/docs/component-story-format).\n\nThe theme stylesheet containing the Tokens is injected in all stories files, thanks to the `story-layout` component:\n\n```jsx\nimport '~/story-layout';\nimport React from 'react';\nimport { Button } from '../index';\n\nexport const primary = () =\u003e \u003cButton\u003ePrimary\u003c/Button\u003e;\n```\n\nStories for the components are located in their `stories/` folder.\n\n## Documentation\n\nDocumentation pages are decorated by a React layout using the [@divriots/dockit-react](https://github.com/divriots/dockit-react) helpers. See the `mdx-layout` component.\n\n### Pages\n\nEach component embed its own documentation in its `doc/` folder. You can use any web format for your documentation but we recommend you to write it with the [mdx](https://backlight.dev/docs/mdx) format, allowing you to embed your components live in the documentation.\n\n---\n\n## Links\n\n- [React Aria](https://react-spectrum.adobe.com/react-aria/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdivriots%2Fstarter-react-aria","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdivriots%2Fstarter-react-aria","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdivriots%2Fstarter-react-aria/lists"}