@indec/react-commons NPM

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();
    });
  });
});