Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/indec-it/react-commons
Common react components for apps
https://github.com/indec-it/react-commons
chakra-ui components-react jest node react storybook
Last synced: 3 months ago
JSON representation
Common react components for apps
- Host: GitHub
- URL: https://github.com/indec-it/react-commons
- Owner: indec-it
- License: mit
- Created: 2019-01-17T14:21:11.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-02-08T17:45:20.000Z (12 months ago)
- Last Synced: 2024-10-10T20:20:35.190Z (4 months ago)
- Topics: chakra-ui, components-react, jest, node, react, storybook
- Language: JavaScript
- Homepage:
- Size: 5.13 MB
- Stars: 4
- Watchers: 9
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# react-commons V5 🚀
https://indec-it.github.io/react-commons/
## Glossary
1. [Motivation](#motivation)
1. [Installation](#installation)
1. [Start](#start)
1. [Structure](#structure)
1. [Dependencies](#dependencies)
1. [Tests](#tests)
1. [Contributing](#contributing)
## Motivation
We've created this package to share components and logic between our different projects.
We use [Storybook](https://storybook.js.org), it allows you to test and see how each component works without install the package in your project.
Our components are built with [Chakra-ui](https://chakra-ui.com). In our previous versions of react-commons, components were built with [Reactstrap](https://github.com/reactstrap/reactstrap) but we realized that we needed to add more custom styles so we decided to move to Chakra.
## Installation
```sh
$ npm install @indec/react-commons
```
## Start
To start storybook you must run the following command:
```sh
$ npm start
```
Storybook will be open in your default browser at [http://localhost:6006](http://localhost:6006).
## Structure
The project is split into the following directories. When writing code, use the following guidelines to determine where it should be placed. You can also take a look at the code yourself for in-depth examples.
```
src/
components/
hooks/
constants/
theme/
utils/
```
`src/components`
Here you must add your React`s components.
`src/hooks`
Here you must add your custom hooks.
`src/constants`
Constants to be shared for the whole application.
`src/theme`
Custom theme for components.
`src/utils`
Functions to be shared for the whole application.
## Dependencies
These are the core dependencies you'll need to get acquainted yourself with:
- [React](https://reactjs.org)
- [Chakra](https://chakra-ui.com) (component library our UI is built upon)
- [Formik](https://jaredpalmer.com/formik/docs/api/formik#validationschema-schema-gt-schema) (to make it easier to write forms with React)
- [Yup](https://github.com/jquense/yup) (handles form validation)
- [Storybook](https://storybook.js.org) (component library)
- [Jest](https://jestjs.io) (testing framework)
- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) (DOM interface for testing)
- [EsLint](https://eslint.org) (used to lint code)
## Tests
To run the tests you must run the following command:
```sh
$ npm run test
```
When writing tests, make sure to use the following format to keep the tests clean and consistent:
```jsx
import {getByText} from "@testing-library/react";
import Button from "./Button";
describe("", () => {
let props;
const getComponent = () => render(Button, props);
beforeEach(() => {
props = {
children: "Label"
};
});
afterEach(tearDown);
it("should render `props.children`", () => {
const {container} = getComponent();
expect(getByText(container, props.children)).toBeInTheDocument();
});
describe("when `props.plus` is `true`", () => {
beforeEach(() => {
props.plus = true;
});
it("should render a plus character", () => {
const {container} = getComponent();
expect(getByText(container, `+ ${props.children}`)).toBeInTheDocument();
});
});
});
```
## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.