{"id":23685008,"url":"https://github.com/chepetime/react-design-system","last_synced_at":"2025-09-02T12:32:29.694Z","repository":{"id":54944458,"uuid":"521081151","full_name":"chepetime/react-design-system","owner":"chepetime","description":"UI Component Library Template with React, Typescript, Storybook, SASS, Rollup and NextJs.","archived":false,"fork":false,"pushed_at":"2024-03-31T17:37:09.000Z","size":8657,"stargazers_count":39,"open_issues_count":0,"forks_count":3,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-03-31T18:35:30.042Z","etag":null,"topics":["component-library","nextjs","react","react18","storybook","template","turborepo","typescript","ui-kit"],"latest_commit_sha":null,"homepage":"https://ui.joselugo.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chepetime.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2022-08-04T01:15:30.000Z","updated_at":"2024-03-23T21:58:28.000Z","dependencies_parsed_at":"2024-03-31T18:42:15.080Z","dependency_job_id":null,"html_url":"https://github.com/chepetime/react-design-system","commit_stats":null,"previous_names":[],"tags_count":1,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chepetime%2Freact-design-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chepetime%2Freact-design-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chepetime%2Freact-design-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chepetime%2Freact-design-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chepetime","download_url":"https://codeload.github.com/chepetime/react-design-system/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231785172,"owners_count":18426286,"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":["component-library","nextjs","react","react18","storybook","template","turborepo","typescript","ui-kit"],"created_at":"2024-12-29T20:50:36.266Z","updated_at":"2024-12-29T20:50:36.701Z","avatar_url":"https://github.com/chepetime.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/chepetime/react-design-system\"\u003e\n    \u003cimg src=\"./apps/documentation/public/assets/logo@2x.png\" alt=\"Logo\" width=\"400\" height=\"233\"\u003e\n  \u003c/a\u003e\n  \u003ch2 align=\"center\"\u003e\u003cstrong\u003eReact Design System\u003c/strong\u003e\u003c/h2\u003e\n  \u003cp align=\"center\"\u003e\n    Component Library for a Design System using React and Turborepo\n  \u003c/p\u003e\n\n[![Build UI](https://github.com/chepetime/react-turborepo-dls/actions/workflows/ci.yml/badge.svg)](https://github.com/chepetime/react-turborepo-dls/actions/workflows/ci.yml) [![Storybook Tests](https://github.com/chepetime/react-turborepo-dls/actions/workflows/storybook-tests.yml/badge.svg)](https://github.com/chepetime/react-turborepo-dls/actions/workflows/storybook-tests.yml) [![Docs](https://github.com/chepetime/react-design-system/actions/workflows/deploy-docs.yml/badge.svg)](https://github.com/chepetime/react-design-system/actions/workflows/deploy-docs.yml)\n[![Storyboook](https://img.shields.io/badge/Storybook-main-ff69b4)](https://main--640570a127fec98c46084e16.chromatic.com/)\n\n\u003c/div\u003e\n\u003cbr/\u003e\n\n\u003cbr/\u003e\n\n## Structure\n\nThis monorepo contains multiple projects that work together to create an integrated Design Language System.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./apps/documentation/public/assets/stack@2x.png\" alt=\"chepe DLS\" width=\"750\"\u003e\n\u003c/div\u003e\n\n### Packages\n\n\u003e Packages are reusable libraries available for packages and apps\n\n| Package directory | Description                                                    |\n| ----------------- | -------------------------------------------------------------- |\n| `packages/ui`     | React based component library with Typescript, Rollup and SASS |\n| `packages/tokens` | Design Tokens distributable package                            |\n| `packages/icons`  | React based icon library with SVGR and Rollup                  |\n\n### Apps\n\n\u003e Apps can use all the available packages\n\n| App directory | Description                                            |\n| ------------- | ------------------------------------------------------ |\n| `apps/docs`   | Storybok instance that implements the React UI Library |\n| `apps/web`    | React web app that implements the React UI Library     |\n\n### Config\n\n\u003e Config are reusable eslint and typescript configurations\n\n| Package directory             | Description                                      |\n| ----------------------------- | ------------------------------------------------ |\n| `config/eslint-config-custom` | Shared Eslint configuration for all packages     |\n| `config/tsconfig`             | Shared Typescript configuration for all packages |\n\n### Tools\n\n\u003e Tools to generate Components or get Tokens\n\n| App directory     | Description                                               |\n| ----------------- | --------------------------------------------------------- |\n| `tools/generator` | CLI Tool that creates Components for the React UI Library |\n\n\u003cbr/\u003e\n\n## Development\n\nThese instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.\n\nMake sure you have the LTS version of [Node](https://nodejs.dev/) (18.7) installed in your machine. We recommend to use [nvm (Node Version Manager)](https://github.com/nvm-sh/nvm).\n\nThis monorepository uses Turborepo to manage dependencies and scripts. The first step is to install the local node dependencies:\n\n```sh\npnpm install\n```\n\nThere are two main ways to develop new components:\n\n- Storybook App (Vite)\n- Watch the React UI Library (Rollup) + NextJs\n\n### Development Storybook\n\nTo watch changes in the React Library and start the Storybook App, just run:\n\n```sh\npnpm run storybook\n```\n\n\u003e This instance of Storybook uses the source code to compile the React Stories. It's faster than watching changes and reloading and it gets HMR. That's the reason components are imported using `@chepe/ui/src` instead of `@chepe/ui`.\n\n### Development NextJs\n\nTo watch changes in the React Library and start the Next.Js App, just run:\n\n```sh\npnpm run web\n```\n\n\u003e Contrary to the Storybook instance, this React App uses the bundled code inside React. It should be really similar to the final package being used by product teams.\n\n\u003cbr/\u003e\n\n## Continuous Integration\n\nThis project has multiple GitHub Actions for build, test and deployment.\n\nYou can finds all the GitHub actions files inside `.github/workflows/`\n\n| Name            | File                  | Description                                                             |\n| --------------- | --------------------- | ----------------------------------------------------------------------- |\n| Build           | `ci.yml`              | Builds the main Component Library. (@chepe/ui)                          |\n| Storybook Tests | `storybook-tests.yml` | Turns all the Storybook _stories_ into executable tests including a11y. |\n\n\u003cbr/\u003e\n\n## Tools\n\n### Add a new Component\n\nYou can add a new Component Boilerplate using the Generator Tool.\n\n```sh\nnpm run generate:component --name=Heading\nnpm run generate:component --name=InputField\n```\n\n## Built With\n\n- [React@18](https://reactjs.org/)\n- [Rollup](https://rollupjs.org/)\n- [Storybook](https://storybook.js.org/)\n- [Turborepo](https://turborepo.org/)\n\n---\n\nMade by [@chepetime](https://github.com/chepetimetime) at Mexico City 🇲🇽\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchepetime%2Freact-design-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchepetime%2Freact-design-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchepetime%2Freact-design-system/lists"}