{"id":15154759,"url":"https://github.com/cheapreats/react-ui-library","last_synced_at":"2025-09-30T03:30:46.135Z","repository":{"id":33877786,"uuid":"163232575","full_name":"cheapreats/react-ui-library","owner":"cheapreats","description":"Library for CheaprEats React UI components ","archived":true,"fork":false,"pushed_at":"2022-02-19T00:37:56.000Z","size":19982,"stargazers_count":3,"open_issues_count":21,"forks_count":14,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-08-24T23:39:34.887Z","etag":null,"topics":["components","library","proptypes","react-js","storybook","ui"],"latest_commit_sha":null,"homepage":"https://master--618004b2bcb159003ab74077.chromatic.com","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/cheapreats.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}},"created_at":"2018-12-27T01:30:45.000Z","updated_at":"2023-01-28T02:52:06.000Z","dependencies_parsed_at":"2022-08-07T23:30:25.298Z","dependency_job_id":null,"html_url":"https://github.com/cheapreats/react-ui-library","commit_stats":null,"previous_names":["cheapreats/react-ui"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/cheapreats/react-ui-library","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cheapreats%2Freact-ui-library","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cheapreats%2Freact-ui-library/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cheapreats%2Freact-ui-library/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cheapreats%2Freact-ui-library/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cheapreats","download_url":"https://codeload.github.com/cheapreats/react-ui-library/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cheapreats%2Freact-ui-library/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277499423,"owners_count":25828623,"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-29T02:00:09.175Z","response_time":84,"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":["components","library","proptypes","react-js","storybook","ui"],"created_at":"2024-09-26T18:00:28.955Z","updated_at":"2025-09-30T03:30:45.594Z","avatar_url":"https://github.com/cheapreats.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CheaprEats UI Library\n\n## PR Requirements\n- Showcase Visual Layer through an Image on your Pull Request\n- Showcase Interactions / Animations Layer through a GIF / Video on your Pull Request\n  - Macbook: Command+Shift+5\n  - Windows: Snip Tool\n\n## Installation Requirements\n\n**Prettier:** https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode\n\n## *Getting Started*\n\n**Storybook:** https://storybook.js.org/\n\n**TypeScript:** https://www.typescriptlang.org/\n\n**Atomic Design:** https://atomicdesign.bradfrost.com/\n\nThis repository encompasses the [Component Driven Design Methodology](https://medium.com/the-s-curve/why-component-driven-design-drives-great-software-products-7cace364e815).\n\n## src/\nThis folder is where you will be building your UI, no-data-logic only components.\n\n## stories/\nThis folder is where you will be testing your UI on Storybook for different ViewPorts (Responsiveness), Accessibility and functionality.\n\n## .storybook/\nThis folder contains the Storybook configuration options\n\n## scripts/\nThis folder contains code generation scripts to help make development faster.\n\n### Helpful Resources\n#### Need Icons\nUse the Styled-Icons library to import icons from : https://styled-icons.dev/\n#### Themes/ \nContains all the styling that CheaprEats uses so you don't have to guess to color codes, Also your components will automatically translate to dark mode!\nTo Add a Color to the Theme Modify both the [MainTheme File](https://github.com/cheapreats/react-ui-library/blob/master/src/Themes/MainTheme.ts) and [DarkTheme File](https://github.com/cheapreats/react-ui-library/blob/master/src/Themes/DarkTheme.ts) (Add the Typing for the New Color as well as the Color Code for the new Color Key)\n##### Mixins (Responsiveness)\n- Ensure that you are using the consistent Mixins for your Media Queries: https://github.com/cheapreats/react-ui-library/blob/v2/src/Themes/ThemeTemplate.ts#L138\n\n# When Importing/Using This Library (Try without this first as library has been fixed)\n- Ensure there is only one instance of react \u0026 react-dom being used in your app. Use Webpack alias to point to ./node_modules/react \u0026 ./node_modules/react-dom respectively.\nWhen you import this library there is the Version of React by the Library and the version of React by your app being used simutaneously. Even if they are the same versions, two copies of react/react-dom will cause issues. Point all instance of react/react-dom to the one used by your application using Webpack Aliases.\n```js\n  resolve: {\n    alias: {\n      // add as many aliases as you like! \n      \"react\": \"./node_modules/react\",\n      \"react-dom\": \"./node_modules/react-dom\"\n    }\n  }\n```  \n- Wrap you app with the Theme Object\nYou need to import Global into your app and wrap your app with the Global to Access the Theme.\n```js\n    return (\n        \u003cGlobal\n            extend={\n                JSON.parse(localStorage.getItem('isDark') ?? 'false')\n                    ? extendThemeDark\n                    : extendThemeMain\n            }\n            style={globalStyle}\n            theme={ThemeTypes.MAIN}\n        \u003e\n            \u003cQueryClientProvider client={queryClient}\u003e\n                \u003cSwitch\u003e\n                    {getLandingRoutes()}\n                    \u003cRoute path=\"/:id\" component={Dashboard} /\u003e\n                \u003c/Switch\u003e\n            \u003c/QueryClientProvider\u003e\n        \u003c/Global\u003e\n    );\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcheapreats%2Freact-ui-library","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcheapreats%2Freact-ui-library","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcheapreats%2Freact-ui-library/lists"}