{"id":17966302,"url":"https://github.com/zopapublic/react-components","last_synced_at":"2025-04-07T05:08:26.213Z","repository":{"id":37502912,"uuid":"188010495","full_name":"ZopaPublic/react-components","owner":"ZopaPublic","description":"Shared React components for the Zopa projects.","archived":false,"fork":false,"pushed_at":"2025-03-11T08:24:26.000Z","size":11885,"stargazers_count":41,"open_issues_count":12,"forks_count":15,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-04-07T05:08:01.959Z","etag":null,"topics":["react-components","react-styleguidist","styled-components","typescript","zopa"],"latest_commit_sha":null,"homepage":"https://zrc.netlify.app","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/ZopaPublic.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-05-22T09:51:43.000Z","updated_at":"2025-03-11T08:23:02.000Z","dependencies_parsed_at":"2023-12-29T15:25:53.029Z","dependency_job_id":"505a4330-893f-469a-a555-ea91a01b3c84","html_url":"https://github.com/ZopaPublic/react-components","commit_stats":null,"previous_names":["zopapublic/react-components","zopauk/react-components"],"tags_count":397,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZopaPublic%2Freact-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZopaPublic%2Freact-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZopaPublic%2Freact-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZopaPublic%2Freact-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ZopaPublic","download_url":"https://codeload.github.com/ZopaPublic/react-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247595334,"owners_count":20963943,"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":["react-components","react-styleguidist","styled-components","typescript","zopa"],"created_at":"2024-10-29T13:09:13.501Z","updated_at":"2025-04-07T05:08:26.195Z","avatar_url":"https://github.com/ZopaPublic.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React components\n\n\u003cimg src=\"./etc/images/turtle.gif\" /\u003e\n\n![CI/CD](https://github.com/zopaUK/react-components/workflows/CI/badge.svg)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n[![Dependencies - Always up to date](https://img.shields.io/badge/always-up_to_date-brightgreen.svg)](https://help.github.com/en/articles/configuring-automated-security-fixes)\n\nShared react styled components for all the Zopa projects.\n\nThis repo contains 2 things at the same time:\n\n- The Typescript library for the react components\n\n- Documentation for the components managed with [React-styleguidist](https://react-styleguidist.js.org)\n\n[Check the docs 💕](https://zrc.netlify.app/)\n\n## Migrating from version 3\n\nThere are a number of breaking changes which will need to be addressed when upgrading from Zopa React Components v3 to v4.\n\n[The migration guide](/etc/docs/migration-v4.md) will walk you through the major changes such as colours and typography.\n\n## Installation\n\n```bash\ngit clone https://github.com/zopaUK/react-components.git\npnpm i\n```\n\n## Local linking\n\nLocal linking with Next.js applications can be particularly challenging due to the way Next.js handles module resolution and its own optimization processes. When attempting to link local packages, such as `react-components`, with a Next.js application, developers might encounter issues related to module resolution, duplicate React instances, or unexpected behavior in hot module reloading (HMR).\n\nTo mitigate these issues, you can use `pnpm dev:zrc`.\n\nFollow these steps:\n\n1. In the `react-components` directory, run the following command to start the watcher:\n\n```bash\npnpm dev:zrc\n```\n\n2. In the application directory, run the following command to link the `react-components` library (if it exists):\n\n```bash\npnpm dev:zrc\n```\n\nNow, any changes made in the `react-components` codebase will be reflected in the linked application after a delay (~500ms).\n\nNOTE: It is named \"zrc\" (specifically) to allow the developer to run the same command on both projects.\n\n## Running the project\n\nExecute the development environment:\n\n```bash\npnpm dev\n```\n\nThe docs will run at [localhost:6060](http://localhost:6060).\n\n## Local development (working on a linked application)\n\nWe start a watcher using [esbuild](https://esbuild.github.io/) and [tsc](https://www.typescriptlang.org/docs/handbook/compiler-options.html) by running:\n\n```bash\npnpm dev:code\n```\n\n##\n\nYour locally running app will have its own way of linking to local dependencies but making changes in react-components codebase should now show in the application.\n\n## Motivation\n\nThe aim of this project is to share with the frontend community how we code in Zopa.\n\nWe think it might be useful for someone who wants to start a new react components library and want to re-use some of our code.\n\n## Types\n\nYou can access typings for specific components under `@zopauk/react-components/types`:\n\n```tsx\nimport { Button } from '@zopauk/react-components';\nimport { IButtonProps } from '@zopauk/react-components/types/components/atoms/Button';\n```\n\nTo inspect the folder structure within `@zopauk/react-components/types` you can run `yarn compile:types` and navigate the generated `types/` folder in the project root.\n\n## Contributing\n\nIn case you want to contribute to this library, please have a look at our [contributing guidelines](./CONTRIBUTING.md) 🙌🏼\n\n## Contributors\n\n\u003c!-- readme: collaborators,contributors,semantic-release-bot/-,renovate-bot/- -start --\u003e\n\u003ctable\u003e\n\u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/moshie\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/3974301?v=4\" width=\"50;\" alt=\"moshie\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003emoshie\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/thegrinder\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/14250944?v=4\" width=\"50;\" alt=\"thegrinder\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003ethegrinder\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/raff-r\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/1081070?v=4\" width=\"50;\" alt=\"raff-r\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eraff-r\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/ubbe-xyz\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/5938217?v=4\" width=\"50;\" alt=\"ubbe-xyz\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eubbe-xyz\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/admmasters\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/335607?v=4\" width=\"50;\" alt=\"admmasters\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eadmmasters\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/dfvalero\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/337955?v=4\" width=\"50;\" alt=\"dfvalero\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003edfvalero\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/OlenaKashuba\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/27281884?v=4\" width=\"50;\" alt=\"OlenaKashuba\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eOlenaKashuba\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/Gabss405\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/67011746?v=4\" width=\"50;\" alt=\"Gabss405\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eGabss405\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/JuliaHempel\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/9414476?v=4\" width=\"50;\" alt=\"JuliaHempel\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eJuliaHempel\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/katebeavis\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/10133018?v=4\" width=\"50;\" alt=\"katebeavis\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003ekatebeavis\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/charlielizzy\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/93588638?v=4\" width=\"50;\" alt=\"charlielizzy\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003echarlielizzy\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/khumbon\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/44274000?v=4\" width=\"50;\" alt=\"khumbon\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003ekhumbon\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/calvin-fung-zopa\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/91553062?v=4\" width=\"50;\" alt=\"calvin-fung-zopa\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003ecalvin-fung-zopa\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/MichelleXBai\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/92802325?v=4\" width=\"50;\" alt=\"MichelleXBai\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eMichelleXBai\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/poteirard\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/7198934?v=4\" width=\"50;\" alt=\"poteirard\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003epoteirard\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/gbkr\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/1077355?v=4\" width=\"50;\" alt=\"gbkr\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003egbkr\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/endymion1818\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/2216344?v=4\" width=\"50;\" alt=\"endymion1818\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eendymion1818\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/emilfjellstrom\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/11654513?v=4\" width=\"50;\" alt=\"emilfjellstrom\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eemilfjellstrom\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/MillieClare\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/40922831?v=4\" width=\"50;\" alt=\"MillieClare\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eMillieClare\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/steedems\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/7896422?v=4\" width=\"50;\" alt=\"steedems\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003esteedems\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/tlaak\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/1674055?v=4\" width=\"50;\" alt=\"tlaak\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003etlaak\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/t-phamm\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/86316479?v=4\" width=\"50;\" alt=\"t-phamm\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003et-phamm\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/TomGroombridge\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/5918265?v=4\" width=\"50;\" alt=\"TomGroombridge\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eTomGroombridge\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/rominamoya\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/1150925?v=4\" width=\"50;\" alt=\"rominamoya\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003erominamoya\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/zopa-stephanie-senoner\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/118994357?v=4\" width=\"50;\" alt=\"zopa-stephanie-senoner\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003ezopa-stephanie-senoner\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/rorydpayne\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/7081561?v=4\" width=\"50;\" alt=\"rorydpayne\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003erorydpayne\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/Blimeys\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/13405542?v=4\" width=\"50;\" alt=\"Blimeys\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eBlimeys\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/grabbeh\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/641299?v=4\" width=\"50;\" alt=\"grabbeh\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003egrabbeh\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/rory-payne\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/160851359?v=4\" width=\"50;\" alt=\"rory-payne\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003erory-payne\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\u003c/tr\u003e\n\u003c/table\u003e\n\u003c!-- readme: collaborators,contributors,semantic-release-bot/-,renovate-bot/- -end --\u003e\n\n## License\n\nThis repository is [MIT-licensed](./LICENSE).\n\n## Trade marks\n\nNo permission is granted to use the trade names, trade marks, service marks, or product names of Zopa, except as required for reasonable and customary use in describing the origin of this library and reproducing the content of the notice in the [license](./LICENSE).\n\n## Fonts\n\nZopa uses Open Sans in its sites and applications. If you want to make use of this font outside of Zopa, you will need to license it directly from [Google Fonts](https://fonts.google.com/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzopapublic%2Freact-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzopapublic%2Freact-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzopapublic%2Freact-components/lists"}