{"id":16666949,"url":"https://github.com/joshk2/react-components-library-template","last_synced_at":"2025-07-29T18:04:56.968Z","repository":{"id":44239215,"uuid":"272716050","full_name":"JoshK2/react-components-library-template","owner":"JoshK2","description":"A template for creating React components library and exporting to bit.dev.","archived":false,"fork":false,"pushed_at":"2023-07-13T20:17:08.000Z","size":1458,"stargazers_count":4,"open_issues_count":5,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-09T19:17:20.549Z","etag":null,"topics":["bit","component-architecture","components","components-library","design-systems","react","reactjs-components"],"latest_commit_sha":null,"homepage":"https://bit.dev/joshk/react-components-library-template","language":"JavaScript","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/JoshK2.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,"publiccode":null,"codemeta":null}},"created_at":"2020-06-16T13:31:18.000Z","updated_at":"2020-06-28T13:21:06.000Z","dependencies_parsed_at":"2025-02-15T16:30:57.541Z","dependency_job_id":"3be778a3-d780-4542-af1c-c027cba25c48","html_url":"https://github.com/JoshK2/react-components-library-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/JoshK2/react-components-library-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoshK2%2Freact-components-library-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoshK2%2Freact-components-library-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoshK2%2Freact-components-library-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoshK2%2Freact-components-library-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JoshK2","download_url":"https://codeload.github.com/JoshK2/react-components-library-template/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoshK2%2Freact-components-library-template/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267729546,"owners_count":24135338,"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-07-29T02:00:12.549Z","response_time":2574,"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":["bit","component-architecture","components","components-library","design-systems","react","reactjs-components"],"created_at":"2024-10-12T11:12:33.544Z","updated_at":"2025-07-29T18:04:56.917Z","avatar_url":"https://github.com/JoshK2.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Components Library Template\n\n![Build CI](https://github.com/JoshK2/react-components-library-template/workflows/Build%20CI/badge.svg)\n![Bit export CI](https://github.com/JoshK2/react-components-library-template/workflows/Bit%20export%20CI/badge.svg)\n![Bit build and test CI](https://github.com/JoshK2/react-components-library-template/workflows/Bit%20build%20and%20test%20CI/badge.svg)\n[![components](https://img.shields.io/badge/dynamic/json.svg?color=6e3991\u0026label=components\u0026query=payload.totalComponents\u0026url=https%3A%2F%2Fapi.bit.dev%2Fscope%2Fjoshk%2Freact-components-library-template)](https://bit.dev/joshk/react-components-library-template)\n[![Slack](https://badgen.now.sh/badge/chat/on%20Slack/cyan)](https://join.slack.com/t/bit-dev-community/shared_invite/enQtNzM2NzQ3MTQzMTg3LWI2YmFmZjQwMTkxNmFmNTVkYzU2MGI2YjgwMmJlZDdkNWVhOGIzZDFlYjg4MGRmOTM4ODAxNTIxMTMwNWVhMzg)\n[![reddit](https://badgen.now.sh/badge/chat/on%20Reddit/orange)](https://www.reddit.com/r/bit_dev/)\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://bit.dev/joshk/react-components-library-template\"\u003e\u003cimg src=\"https://i.imagesup.co/images2/39281df9a822157a2fa3b58e520be0a5ebb0ae85.png\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nA template for creating a React components library.\n\nSetting up a React component library can be a complex and time-consuming project with a lot of challanges.\n\nThis project help you set up a high-quality library in a timely manner. It saves time and effort for anyone that needs to create a component library, to reuse components across React projects. It takes care of \n\n## Features\n\nThis template comes with pre-created setup for a \n\nThis template comes with several tools that you need for a completes and testable components library.\n\n- SCSS support\n- GitHub Actions integrations with Bit\n- Exporting components to reuse via bit.dev\n- PropTypes support\n- Classnames library installed\n- Mocha \u0026 Chai tester\n\n## Run the demo\n\nAs an example, this library already containts demo components for building \"product-list\" applications.  \nClone the repo and run the project:\n\n```\nnpm i\nnpm start\n```\n\n## How to create a new component with a good structure ?\n\nThe structure I used for this project is a structure I recommend for working on components library.\n\n```\nsrc/components/name\n├── name.js\n├── name.module.scss\n├── name.test.js\n└── index.js\n```\n\nI added a shortcut command to create a new component, just run:\n`npm run create --name=NEW_COMPONENT_NAME`\n\n## CI workflows\n\nSee these three files in the [workflows folder](.github/workflows):\n\n- `bit-build-and-test.yml` will run when pull requests are make on master, and will build and test your components.\n- `bit-export.yml` will run when code are pushed to master, and will tag \u0026 export all the modified components to your [bit.dev collection](https://bit.dev/joshk/react-components-library-template).\n  To skip these files, just add to your commit message `skip-bit-ci`.\n- `main.yml` will run the build command of the project.\n\n## Config Bit to share components\n\nTo export your own components for managed reuse follow these steps:\n\n- Create a free [bit.dev](bit.dev) account and create a hosted collection.\n- Install `bit-bin` on your machine: `npm i bit-bin -g`\n- (For CI -\u003e) Create a secret key `BIT_TOKEN` in your GitHub repository with the your Bit key, so you will be able to export components during CI process. Read more about it [here](https://help.github.com/en/actions/configuring-and-managing-workflows/creating-and-storing-encrypted-secrets#using-encrypted-secrets-in-a-workflow).\n\n## Export components to bit.dev during CI\n\n***Note: The first export (only) [should be done manually](https://docs.bit.dev/docs/export)***\n\nAfter every-things is setup, you can now export the components in this project for example.\nAfter setup, you can config the library's CI to export components (or new versions). This will let Bit  automaticly export your components when changes are made as you push code to master, or accepting pull requests.  \n\n- Initialize Bit: `bit init`.\n- Track all the components under [src/components](src/components) with their test files:\n  `bit add src/components/*/ --tests src/components/{PARENT}/{PARENT}.test.js`.\n  You can also track the data file: `bit add src/data/products.js --id data/products`.\n- Import a reusable compiler and tester, by running these commands:\n\n```\nbit import bit.envs/compilers/react@1.0.8 --compiler\nbit import bit.envs/testers/mocha@5.0.2 --tester\n```\n\n- Tag all the components with the version you want: `bit tag --all 1.0.0`.\n- Export the components to collection on bit: `bit export \u003cuser-name\u003e.\u003ccollection-name\u003e`\n\nNow config your bit.dev collection to be the default go-to in your `package.json` file, so bit will know where to export your components during CI.\n\n```\n\"bit\": {\n    \"env\": {\n      \"compiler\": \"bit.envs/compilers/react@1.0.18\",\n      \"tester\": \"bit.envs/testers/mocha@5.0.2\"\n    },\n    \"componentsDefaultDirectory\": \"components/{name}\",\n    \"packageManager\": \"npm\",\n    \"defaultScope\": \"\u003cuser-name\u003e.\u003ccollection-name\u003e\"\n  }\n```\n\nNow Bit will automaticly export your components when changes are made when you push code to master, or accepting pull requests. Read more about Bit in GitHub CI [here](https://github.com/teambit/bit-with-github-actions).\n\n\n## FAQ\n\n### How to handle assets?\n\nPlease check out the documentation for [the direct link to handling assets](https://docs.bit.dev/docs/best-practices#handling-assets).\n\n### Error during bit export on CI\n\n- Before integrating \n- Make sure your first export is [done manually](https://docs.bit.dev/docs/export) from your locale workspace.\n- Make sure you added `defaultScope` [param](#how-to-export-components-to-bitdev-and-ci-export-).\n\n### I'm using a different tester like Jest\n\nNo problem, if you are using Jest, you can import it as a tester:\n`bit import bit.envs/testers/jest --tester`\n\n### The Bit tester not working as expected\n\nBit testers need sometimes to be configured specifically depending on your project configuration.  \n\nYou can open an issue with your error on the [environments repository](https://github.com/teambit/envs).  \nTo continue working correctly you can remove the bit tester from the config object, and run your global project testing in the CI instead of bit tester.\nLet's assume you run your global testing with `npm run test`, you need now to replace with the `bit test` in CI workflows.\n\n- Go to [bit-build-and-test.yml](.github/workflows/bit-build-and-test.yml) that run on PR's, search for `bit test` and replace it with your own test commands.\n- Go to [bit-export.yml](.github/workflows/bit-export.yml) that run when code are pushed to master, search for `bit tag -a` and add above it your own test commands.\n\n## Contributing\n\n- Pull requests and ⭐ stars are always welcome.\n- For bugs and feature requests, please create an issue.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoshk2%2Freact-components-library-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoshk2%2Freact-components-library-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoshk2%2Freact-components-library-template/lists"}