react-commons V5 🚀
https://indec-it.github.io/react-commons/
Glossary
- Motivation
- Installation
- Start
- Structure
- Dependencies
- Tests
- Contributing
Motivation
We've created this package to share components and logic between our different projects.
We use Storybook, 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. In our previous versions of react-commons, components were built with Reactstrap but we realized that we needed to add more custom styles so we decided to move to Chakra.
Installation
$ npm install @indec/react-commons
Start
To start storybook you must run the following command:
$ npm start
Storybook will be open in your default browser at 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:
Tests
To run the tests you must run the following command:
$ npm run test
When writing tests, make sure to use the following format to keep the tests clean and consistent:
import {getByText} from "@testing-library/react";
import Button from "./Button";
describe("<Button>", () => {
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.