{"id":13804666,"url":"https://github.com/xavierlefevre/shared-react-components-example","last_synced_at":"2025-10-07T00:53:29.276Z","repository":{"id":41795380,"uuid":"177783458","full_name":"xavierlefevre/shared-react-components-example","owner":"xavierlefevre","description":"An example of a mono-repository of shared React components libraries!","archived":false,"fork":false,"pushed_at":"2023-01-03T19:55:48.000Z","size":7485,"stargazers_count":85,"open_issues_count":15,"forks_count":10,"subscribers_count":0,"default_branch":"master","last_synced_at":"2024-05-19T05:35:53.123Z","etag":null,"topics":["atomic-design","design-system","design-systems","lerna","libraries","library","mono-repo","monorepo","react","react-component","react-components","reactjs","share","shared","shared-library","sharing","storybook","ui","ui-components","yeoman"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/xavierlefevre.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-26T12:24:52.000Z","updated_at":"2024-01-12T18:08:48.000Z","dependencies_parsed_at":"2023-02-01T09:31:33.088Z","dependency_job_id":null,"html_url":"https://github.com/xavierlefevre/shared-react-components-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xavierlefevre%2Fshared-react-components-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xavierlefevre%2Fshared-react-components-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xavierlefevre%2Fshared-react-components-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xavierlefevre%2Fshared-react-components-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xavierlefevre","download_url":"https://codeload.github.com/xavierlefevre/shared-react-components-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231949483,"owners_count":18450500,"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":["atomic-design","design-system","design-systems","lerna","libraries","library","mono-repo","monorepo","react","react-component","react-components","reactjs","share","shared","shared-library","sharing","storybook","ui","ui-components","yeoman"],"created_at":"2024-08-04T01:00:52.280Z","updated_at":"2025-10-07T00:53:24.246Z","avatar_url":"https://github.com/xavierlefevre.png","language":"JavaScript","readme":"# ⚙ Shared Components: Project example of shared React components\n\n⚠️ This repository is a pure example, not a boilerplate (as we did not update its dependencies in a while)\n\n🔍 Here you'll discover:\n- [Specific tips to make you accelerate](https://github.com/shared-components/shared-react-components-example#key-learnings)\n- [A playground: You can copy paste the repo entirely to reuse it as is](https://github.com/shared-components/shared-react-components-example#locally-start-the-project)\n\n\u003cbr /\u003e\n\n## Key learnings!\n\n### **0. ⁉️ Should you develop such a project?**\n\nFrom our experience, we proved in which condition it is valuable to share components between apps: [find out more with this article](https://medium.com/theodo/when-and-how-to-share-ui-components-between-apps-a44a44382de1).\n\n### **1. 🧐 Use a mono-repository**\n\nSplit your responsibilities and domains in different packages, but have them all in one place for a smoother developer experience. We use [Lerna](https://github.com/lerna/lerna) for managing our mono-repo.\n\n### **2. ⚛️ Follow \"Atomic Design\" principles**\n\nAn atom is a very small dumb and highly reusable component, while an organism is a full grown one-page business connected feature. It all comes from [Brad Frost Atomic Design principles](http://bradfrost.com/blog/post/atomic-web-design/). You can find diagrams of the project architecture [here](documentation/technical-standards/architecture.md).\n\n### **3. 🎪 Display it all in one unique showroom: Storybook**\n\nWe use [Storybook](https://storybook.js.org/) to develop and showcase our components! One central and unbiased place, forcing any contributor to always think reusability. To try it, [install the project](documentation/how-to-contribute/2-getting-started.md) and run `yarn start`.\n\n### **4. 🔨 Simplify your packages versioning and beware of breaking changes**\n\nUse automatic versionning ([commitizen](http://commitizen.github.io/cz-cli/)), changelogs and type systems ([Flow](https://flow.org/) or [TypeScript](https://www.typescriptlang.org/)) to prevent messy bugs because of unanticipated breaking changes.\n\n### **5. 🏭 Create new components/libraries with a \"generator\"**\n\nMake sure that any new component follow the same design choices by using a \"generator\" like Yeoman.\n\n### **6. 💄 Define your customisation strategy**\n\nWe used Styled Components themes and an additionnal service of ours to define how our components can be customised. [Find here more details](documentation/development/how-to-style-a-component.md).\n\n### **7. 🌬 Make your packages light**\n\nBy building your packages as [ES6 modules](http://exploringjs.com/es6/ch_modules.html), your users will just bundle what they need. You can [find out how we did here](documentation/6-make-light-packages.md)\n\n### **8. 👮‍ Control what components and features enter the repo**\n\nDeveloping on \"Shared components\" is heavier than on a normal project, hence taking the decision to create a new component should be well thought. We recommend to plan at least 3 reuses of the component to make it worthwile. Here is [our decision tree](documentation/how-to-contribute/1-decision-making.md) to help us make that decision.\n\n### **9. 🛣 Define a strict feature branch Git flow**\n\nFor us, all feature branches start from Master. PRs are first merged on Develop. Then on Master.\nRegularly, we automatically merge Master in Develop to keep them aligned.\n\n### **10. ♻️ Regularly update your dependencies**\n\nMore than any other project, \"Shared components\" has to be aligned with the latest standards, as new projects might launch and need to be compatible with it.\n\n### **11. 👩‍💻👨‍💻 Dedicate a core team**\n\nJust as an open source project, have a dedicated tech and business team focused on making \"Shared components\" a success. Without a core team, you won't have the focus and ownership necessary to handle such a project, hence the complexity and debt will accumulate and your developers will end up losing more time than winning, in the long run. We will be more specific in a dedicated article later on.\n\n### **12. 🔗 Ease the Yarn Link pain**\n\nIf you want to locally test your component on your host project, you'll have to use \"Yarn Link\", we learned how [to deal with it](documentation/how-to-contribute/4.1-yarn-link.md).\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## Locally start the project\n\nIf you want to try the project out and at first launch the local Storybook: follow the [installation steps here](documentation/how-to-contribute/2-getting-started.md)!\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## The stack\n\n![stack flow](documentation/presentation/stack-flow.png)\n![stack list](documentation/presentation/stack-list.png)\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## Roadmap\n\n- [x] Finish the MVP: main readme + global article + basic Storybook running locally\n- [x] Share online to see if it interests people\n- [ ] Have an up and running project with working CI and hosted Storybook\n- [ ] Deep dive on key learnings with further articles and project improvement\n- [ ] Update of the repository basis to make it a boilerplate\n\n## Contributors\n\n|   [\u003cimg src=\"https://avatars0.githubusercontent.com/u/25685118?s=400\u0026v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAurélien Le Masson\u003c/b\u003e\u003c/sub\u003e](https://github.com/Ojisama)\u003cbr /\u003e    | [\u003cimg src=\"https://avatars0.githubusercontent.com/u/9078109?s=400\u0026v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMichel Parreno\u003c/b\u003e\u003c/sub\u003e](https://github.com/michel-p)\u003cbr /\u003e | [\u003cimg src=\"https://avatars1.githubusercontent.com/u/15966838?s=400\u0026v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eHugo Lime\u003c/b\u003e\u003c/sub\u003e](https://github.com/HugoLime)\u003cbr /\u003e | [\u003cimg src=\"https://avatars3.githubusercontent.com/u/33832992?s=400\u0026v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJustine Mignot\u003c/b\u003e\u003c/sub\u003e](https://github.com/justinemignot)\u003cbr /\u003e | [\u003cimg src=\"https://avatars1.githubusercontent.com/u/8100843?s=400\u0026v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSurya Ambrose\u003c/b\u003e\u003c/sub\u003e](https://github.com/suryaambrose)\u003cbr /\u003e | [\u003cimg src=\"https://avatars3.githubusercontent.com/u/15523557?s=400\u0026v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eIvan Poiraudeau\u003c/b\u003e\u003c/sub\u003e](https://github.com/ivanosevitch)\u003cbr /\u003e | [\u003cimg src=\"https://avatars2.githubusercontent.com/u/14938214?s=460\u0026v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eXavier Lefèvre\u003c/b\u003e\u003c/sub\u003e](https://github.com/xavierlefevre)\u003cbr /\u003e |\n| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------: |\n| [\u003cimg src=\"https://avatars0.githubusercontent.com/u/6317823?s=400\u0026v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAlbéric Trancart\u003c/b\u003e\u003c/sub\u003e](https://github.com/AlbericTrancart)\u003cbr /\u003e | [\u003cimg src=\"https://avatars1.githubusercontent.com/u/10657271?s=460\u0026v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDarya Talanina\u003c/b\u003e\u003c/sub\u003e](https://github.com/invfo)\u003cbr /\u003e |\n\n## Powered by\n\n| [\u003cimg src=\"documentation/presentation/theodo-logo.png\" width=\"120px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eTheodo\u003c/b\u003e\u003c/sub\u003e\u003cbr /\u003e](https://www.theodo.fr) |\n| :--------------------------------------------------------------------------------------------------------: |\n\n## License\n\nShared Components is [MIT licensed](LICENSE.md).\n","funding_links":[],"categories":["Examples"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxavierlefevre%2Fshared-react-components-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxavierlefevre%2Fshared-react-components-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxavierlefevre%2Fshared-react-components-example/lists"}