@indec/react-commons
v5.8.0
Published
Common reactjs components for apps
Downloads
18
Readme
react-commons V5 🚀
https://indec-it.github.io/react-commons/
Glossary
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:
- React
- Chakra (component library our UI is built upon)
- Formik (to make it easier to write forms with React)
- Yup (handles form validation)
- Storybook (component library)
- Jest (testing framework)
- React Testing Library (DOM interface for testing)
- EsLint (used to lint code)
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.