hrnet-component-library

React component library for the HRnet application.

This project was initialized with Vite.

NOTE : This is a study project as part of the 'Front-end JavaScript React Application Developer' program at OpenClassrooms.

Prerequisites

Before you begin, make sure you have the following prerequisites installed:

• Node.js (minimum recommended version: 16.14)
• React (minimum recommended version: 18.2.0)
• React DOM (minimum recommended version: 18.2.0)
• Modern web browser (e.g., Chrome, Firefox, Safari)

NOTE : We strongly recommend using Visual Studio Code as your integrated development environment (IDE) for this project. It provides excellent support for JavaScript, TypeScript and web development.

Installation

Run the following command :

With npm :

npm install @hrnet-org/hrnet-component-library

Or yarn :

yarn add @hrnet-org/hrnet-component-library

Components

Drop-down selector component

• <DropdownSelector />

  This is a component designed to create a dropdown list that allows users to select an item from a list of articles.

  Props :

  • id: string - The ID of the dropdown input field.

  • classNames?: ClassNames | null - (Optional) Literal object used to define a CSS class for styling each element of the dropdown.

    type ClassNames = {
        wrapper?: string
        input?: string
        items_wrapper?: string
        item?: string
    }

  • items: Array<string> - The list of items to choose from.

  • maxHeight?: number | null - (Optional) Maximum dropdown height.

  • placeholder?: string - (Optional, default value: 'Select an item') The placeholder.

  Style :

  • The component has a default CSS style. You can override this style using certain predefined CSS classes or through the classNames prop :

  All the Dropdown :

  To style all the Dropdown components in your project, I recommend using the CSS class hrnet_dropdownselector_{element} in conjunction with the CSS class overload replacing {element} with the name of the targeted item from this list:

  • wrapper : The main container
  • input : The dropdown input
  • items_wrapper : The container for the list of items
  • item : An item

  Example :

  .hrnet_dropdownselector_wrapper.overload {
      background-color: white;
      padding: 5px 10px;
  }
  
  .hrnet_dropdownselector_input.overload {
      font-size: 16px;
  }

  A specific Dropdown :

  To style a specific Dropdown component, we will use the 'classNames' prop of the component, and I recommend using it with CSS modules, as shown in the example below :

  Example :

  /* styles.module.css */
  
  .wrapper {
      background-color: gray;
      padding: 10px 20px;
  }
  
  .input {
      font-size: 20px;
  }
  
  .item:hover {
      background-color: rgb(80, 80, 136);
  }

  // index.jsx
  import { DropdownSelector } from '@hrnet-org/hrnet-component-library'
  import styles from './styles.module.css'
  
  const MyDropDown = () => (
      <DropdownSelector
          id="my_dropdown"
          classNames={{
              wrapper: styles.wrapper,
              input: styles.input,
              item: styles.item,
          }}
          items={['item 1', 'item 2', 'item 3']}
      />
  )

  IMPORTANT : To make the magic happen, you should first import the Dropdown component before importing the CSS module.

  How to retrieve the value of my Dropdown component:

  Example, with the ID 'country':

  const dropDownInput = document.getElementById('country')
  const dropDownValue = dropDownInput.value

Development

To get start with the development environment, follow these steps:

Installation

1. Clone the repository.
2. Install the necessary dependencies with command yarn.

Prepare your development environment.

The project is structured to facilitate the individual development of components.

• To choose the component to develop, edit the dev/index.tsx file.
• Define your mocked data and props components in the dev/mock/index.ts file.
• Edit or create component to the lib/components folder and save to test HMR.

Running the Development Server

To start the development server, run the following command: yarn dev.

Build the Library

To build the library run the command: yarn build

Publish the Library

To publish a new version of the library to the npm registry, you can use the script 'publish-library' as follows: yarn publish-library.

Without arguments, this first command will increment the patch version number by default, update the package build, and publish this new version to the npm registry.

NOTE : Make sure your local repository is clean before initiating this task. Once this is done, you'll need to push the new version listed in the package.json file to your Git repository.

You can also publish a new minor or major version using the following commands:

• For a minor version : yarn publish-library --update minor
• For a major version : yarn publish-library --update major