{"id":20054407,"url":"https://github.com/divriots/starter-react-sui","last_synced_at":"2025-09-18T08:43:50.271Z","repository":{"id":43417191,"uuid":"347088648","full_name":"divriots/starter-react-sui","owner":"divriots","description":null,"archived":false,"fork":false,"pushed_at":"2022-03-02T10:52:45.000Z","size":184,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-09-17T00:13:46.193Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/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-03-12T14:12:30.000Z","updated_at":"2022-03-03T01:28:14.000Z","dependencies_parsed_at":"2022-09-13T23:10:58.053Z","dependency_job_id":null,"html_url":"https://github.com/divriots/starter-react-sui","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/divriots/starter-react-sui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Fstarter-react-sui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Fstarter-react-sui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Fstarter-react-sui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Fstarter-react-sui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/divriots","download_url":"https://codeload.github.com/divriots/starter-react-sui/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Fstarter-react-sui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275738345,"owners_count":25519534,"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","status":"online","status_checked_at":"2025-09-18T02:00:09.552Z","response_time":77,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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:21.945Z","updated_at":"2025-09-18T08:43:50.225Z","avatar_url":"https://github.com/divriots.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![backlight.dev](https://img.shields.io/badge/Open%20in-Backlight.dev%20editor-%23f8c307)](https://backlight.dev/preview/z99ptYZyvMOGDivUlP9u)\n[![Github Repo](https://img.shields.io/github/last-commit/divriots/starter-react-sui)](https://github.com/divriots/starter-react-sui)\n\n# System UI Tech Sample _by_ ‹div›RIOTS\n\nThis is a _Technology Sample_ you can rely on to build your own Design System, based on React and a [System UI theme](https://system-ui.com/theme).\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/). The Tokens are following the [System UI theme specification](https://system-ui.com/theme), and are consumed in two flavors: [Theme UI](https://theme-ui.com/) and [styled-components](https://styled-components.com/).\n\n### Tokens\n\nThe Tokens are separated in different components:\n\n- `typography`: fonts definitions\n- `colors`: colors and variants\n- `space`: relative and absolute spaces\n- `sizes`: screensize breakpoints\n- `shadows`: inset and outset shadows\n- `radii`: border radius\n- `border`: borders definitions\n- `z-index`: z-axe indices\n\nThe [System UI tokens specification](https://system-ui.com/theme) allows you to define scales (like `font-sizes`, `radius`, _etc_) in arrays. You can also refer to previously declared values as _aliases_.\n\nYour `tokens` should be organized by following the _key reference_ in the specification:\n\n| Theme Key      | CSS Properties                                                                                                                                                           |\n| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| space          | margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, padding-left, grid-gap, grid-column-gap, grid-row-gap |\n| fontSizes      | font-size                                                                                                                                                                |\n| colors         | color, background-color, border-color                                                                                                                                    |\n| fonts          | font-family                                                                                                                                                              |\n| fontWeights    | font-weight                                                                                                                                                              |\n| lineHeights    | line-height                                                                                                                                                              |\n| letterSpacings | letter-spacing                                                                                                                                                           |\n| sizes          | width, height, min-width, max-width, min-height, max-height                                                                                                              |\n| borders        | border, border-top, border-right, border-bottom, border-left                                                                                                             |\n| borderWidths   | border-width                                                                                                                                                             |\n| borderStyles   | border-style                                                                                                                                                             |\n| radii          | border-radius                                                                                                                                                            |\n| shadows        | box-shadow, text-shadow                                                                                                                                                  |\n| zIndices       | z-index                                                                                                                                                                  |\n| transitions    | transition                                                                                                                                                               |\n\nAll tokens are declared in dedicated `*.ts` files in each tokens' components. They're then all exposed by the `all/index.ts` component file in a `theme` constant.\n\nYour theme tokens can be imported anywhere with\n\n```ts\nimport { theme } from '~/all';\n```\n\n## Components\n\nThis _tech sample_ exposes components in two flavor. They all use the same theme tokens imported as above, so your React components and your theme are not hard-linked together, and you can rely on the theme abstraction you're the most comfortable with.\n\nBoth [Theme UI](https://theme-ui.com/#style-your-ui) and [styled-components](https://styled-components.com/docs/api#themeprovider) exposes a `\u003cThemeProvider /\u003e` JSX wrapper that take as theme argument a system-ui theme tokens definition:\n\n```jsx\n\u003cThemeProvider theme={theme}\u003e\n  \u003c!-- Your component(s) here --\u003e\n\u003c/ThemeProvider\u003e\n```\n\nTo avoid the need of loading the `\u003cThemeProvider /\u003e` decorator in each components, we have overridden the _stories_ and _doc_ layouts in the `tui-utils` component.\n\n```jsx\nexport const Layout = (props) =\u003e (\n  \u003cThemeProvider theme={theme}\u003e\n    \u003cMdxLayout {...props} /\u003e\n  \u003c/ThemeProvider\u003e\n);\n```\n\n### Theme-UI\n\nIn the `tui-utils` component, the global theme as well as **all components variations** are loaded and merged in a common theme definition in the `variants.ts` file. This definition is then used by the `\u003cThemeProvider /\u003e` that decorates the different layouts.\n\n### Creating theme-ui components\n\nTo add new theme-ui based components, you have to create a component with two files: your component itself, and a `variants.ts` file that declares the [theme-ui compatible components definitions](https://theme-ui.com/components).\n\nYour component's `variants.ts` file have to be loaded in the `tui-utils/variants.ts` file to be used by the wrapped theme.\n\n### styled-components\n\nOn the contrary of _Theme UI_, _styled-component_ doesn't declares variations at theme level, but let you customize your components' styles directly by using the theme definitions:\n\n```jsx\nimport styled from 'styled-components';\n\nconst StyledButton = styled.button(\n  ({ theme, primary = true, secondary, disabled = false, loading = false }) =\u003e {\n    return {\n      'font-size': theme.fontSizes[2],\n      padding: `${theme.space[2]} ${theme.space[3]}`,\n    };\n  }\n);\n\nexport const Button = () =\u003e \u003cStyledButton /\u003e;\n```\n\n### Creating a _styled-components_ component\n\nTo add new _styled-components_ component, create a component that import the _styled-components_ core utils:\n\n```jsx\nimport * as React from 'react';\nimport styled from 'styled-components';\nimport { ThemeContext } from 'styled-components';\n\nexport const MyComponent = () =\u003e {\n  const theme = React.useContext(ThemeContext);\n\n  return (\n    // Your component here\n  );\n};\n```\n\n## Stories\n\nStories are written in Storybook's [Component Story Format](https://backlight.dev/docs/component-story-format).\n\nYou can defined multiple stories for your components to visualize their variations:\n\n```jsx\nimport { Button } from '../index';\nimport { layout } from '~/tui-utils';\nexport default layout;\n\nexport const primary = () =\u003e \u003cButton variant=\"primary\"\u003ePrimary\u003c/Button\u003e;\nexport const secondary = () =\u003e \u003cButton variant=\"secondary\"\u003eSecondary\u003c/Button\u003e;\nexport const disabled = () =\u003e \u003cButton disabled\u003eDisabled\u003c/Button\u003e;\nexport const secondary_disabled = () =\u003e (\n  \u003cButton variant=\"secondary\" disabled\u003e\n    Disabled\n  \u003c/Button\u003e\n);\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 `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- [System UI](https://system-ui.com/)\n- [Theme UI](https://theme-ui.com/)\n- [styled-components](https://styled-components.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdivriots%2Fstarter-react-sui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdivriots%2Fstarter-react-sui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdivriots%2Fstarter-react-sui/lists"}