Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/joshk2/react-components-library-template
A template for creating React components library and exporting to bit.dev.
https://github.com/joshk2/react-components-library-template
bit component-architecture components components-library design-systems react reactjs-components
Last synced: 2 months ago
JSON representation
A template for creating React components library and exporting to bit.dev.
- Host: GitHub
- URL: https://github.com/joshk2/react-components-library-template
- Owner: JoshK2
- Created: 2020-06-16T13:31:18.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-02-10T23:01:08.000Z (almost 3 years ago)
- Last Synced: 2023-04-04T12:49:10.658Z (over 1 year ago)
- Topics: bit, component-architecture, components, components-library, design-systems, react, reactjs-components
- Language: JavaScript
- Homepage: https://bit.dev/joshk/react-components-library-template
- Size: 836 KB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Components Library Template
[](https://bit.dev/joshk/react-components-library-template)
[](https://join.slack.com/t/bit-dev-community/shared_invite/enQtNzM2NzQ3MTQzMTg3LWI2YmFmZjQwMTkxNmFmNTVkYzU2MGI2YjgwMmJlZDdkNWVhOGIzZDFlYjg4MGRmOTM4ODAxNTIxMTMwNWVhMzg)
[](https://www.reddit.com/r/bit_dev/)
A template for creating a React components library.
Setting up a React component library can be a complex and time-consuming project with a lot of challanges.
This 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
## Features
This template comes with pre-created setup for a
This template comes with several tools that you need for a completes and testable components library.
- SCSS support
- GitHub Actions integrations with Bit
- Exporting components to reuse via bit.dev
- PropTypes support
- Classnames library installed
- Mocha & Chai tester
## Run the demo
As an example, this library already containts demo components for building "product-list" applications.
Clone the repo and run the project:
```
npm i
npm start
```
## How to create a new component with a good structure ?
The structure I used for this project is a structure I recommend for working on components library.
```
src/components/name
├── name.js
├── name.module.scss
├── name.test.js
└── index.js
```
I added a shortcut command to create a new component, just run:
`npm run create --name=NEW_COMPONENT_NAME`
## CI workflows
See these three files in the [workflows folder](.github/workflows):
- `bit-build-and-test.yml` will run when pull requests are make on master, and will build and test your components.
- `bit-export.yml` will run when code are pushed to master, and will tag & export all the modified components to your [bit.dev collection](https://bit.dev/joshk/react-components-library-template).
To skip these files, just add to your commit message `skip-bit-ci`.
- `main.yml` will run the build command of the project.
## Config Bit to share components
To export your own components for managed reuse follow these steps:
- Create a free [bit.dev](bit.dev) account and create a hosted collection.
- Install `bit-bin` on your machine: `npm i bit-bin -g`
- (For CI ->) 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).
## Export components to bit.dev during CI
***Note: The first export (only) [should be done manually](https://docs.bit.dev/docs/export)***
After every-things is setup, you can now export the components in this project for example.
After 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.
- Initialize Bit: `bit init`.
- Track all the components under [src/components](src/components) with their test files:
`bit add src/components/*/ --tests src/components/{PARENT}/{PARENT}.test.js`.
You can also track the data file: `bit add src/data/products.js --id data/products`.
- Import a reusable compiler and tester, by running these commands:
```
bit import bit.envs/compilers/[email protected] --compiler
bit import bit.envs/testers/[email protected] --tester
```
- Tag all the components with the version you want: `bit tag --all 1.0.0`.
- Export the components to collection on bit: `bit export .`
Now 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.
```
"bit": {
"env": {
"compiler": "bit.envs/compilers/[email protected]",
"tester": "bit.envs/testers/[email protected]"
},
"componentsDefaultDirectory": "components/{name}",
"packageManager": "npm",
"defaultScope": "."
}
```
Now 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).
## FAQ
### How to handle assets?
Please check out the documentation for [the direct link to handling assets](https://docs.bit.dev/docs/best-practices#handling-assets).
### Error during bit export on CI
- Before integrating
- Make sure your first export is [done manually](https://docs.bit.dev/docs/export) from your locale workspace.
- Make sure you added `defaultScope` [param](#how-to-export-components-to-bitdev-and-ci-export-).
### I'm using a different tester like Jest
No problem, if you are using Jest, you can import it as a tester:
`bit import bit.envs/testers/jest --tester`
### The Bit tester not working as expected
Bit testers need sometimes to be configured specifically depending on your project configuration.
You can open an issue with your error on the [environments repository](https://github.com/teambit/envs).
To 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.
Let's assume you run your global testing with `npm run test`, you need now to replace with the `bit test` in CI workflows.
- 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.
- 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.
## Contributing
- Pull requests and ⭐ stars are always welcome.
- For bugs and feature requests, please create an issue.