React-Common-Components

A library providing generic react-components, including helperfunctions and custom-hooks. It is published as a package and can be installed via npm. The project also contains a storybook that can be used to test react components. The storybook is deployed on the GitHub Pages of the project. To access the documentation for Helperfunctions/CustomHooks click on the corresponding tab of the GitHub repository.

Installing

  npm install @harrybin/react-common

Contribution

1. Storybook
2. Architecture
3. Dependencies
4. Usage
5. Contributing
6. Issues
7. Appendix

Storybook

Run this command to start the storybook on your development environment. Now you are able to write stories and test them locally.

  npm run storybook

The Storybook is hosted on the github pages of the repository. If you want deploy/test your storybook changes using the cli you can run following command:

    npm run deploy

Architecture

Technologies
The library is build with typescript and javascript. Rollup.js is used to bundle the modules.

Tests

The tests are divided into UI component tests(Storybook stories) and function unit tests(vitest).

Usage

After installing the npm-package you can use the components in your react project.

import { BoxedIcon, areArraysEqual, usePrevious } from "@harrybin/react-common";

Contributing

Something's missing?

If you're using custom components/helperfunctions or hooks that would fit into this library, feel free to open a Pull Request. Take a look at the contributing guide below:

Adding Components

The following steps demonstrate how to add components to the library using a component named MyComponent

1. Create a new folder under src/components/ and name it after your component(in this case myComponent). Please note that the first character of the foldername should be written in lowercase.

2. Add two files named MyComponent.tsx and index.ts to your components folder.

3. Add the code of your custom component to the MyComponent.tsx file. Export the component using a named export.

4. Import your component in the index.ts file. Add also an named export of your component to that file.

5. Import the component in the components/index.ts from the component folder. In addition to that add a named export of your component.

Adding helperfunctions/ custom-hooks

The src/utils folder contains the folders helperFunctions and customHooks.

In order to add a helperfunction to the library add it to the helperFunctions.ts file and export it with a named export. If you want to add an custom hook add it to the customHooks.ts file.

Adding tests

To make sure your helperfunctions works like expected write a unittest and add it to the helperFunctions.test.ts file.

Adding stories

The ui components are tested with storybook. Add a file named MyComponent.stories.tsx inside your components folder. This snippet can be used as a story template:

import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { MyComponent } from './MyComponent';

export default {
    title: 'React Common Components/Components/MyComponent',
    component: MyComponent,
} as ComponentMeta<typeof MyComponent>;


const Template: ComponentStory<typeof MyComponent> = (args) => <MyComponent {...args} />;

export const MyComponentStory = Template.bind({});

// pass props to component
MyComponentStory.args = {
    cond: true,
};

Adjust the args of the story to pass initial props. Test if this story is displayed correctly by starting storybook(explained in storybook section)

Known Issues

This warning may appear on your console but can be ignored.

You are loading @emotion/react when it is already loaded. Running multiple instances may cause problems

Requirements

• Admin rights on your local machine
• NPM installed