HRnet plugin

Project carried out as part of the Front-End Web Development Career Path of OpenClassrooms.

Table of contents

• Description
  • Scenario
  • About the plugin
  • Keyboard interaction
• How to use
  • Use the plugin in your project
  • Work on the plugin
    • Installation
    • Visualize and edit the project
    • Use the tests
• Available properties

Description

Scenario

p14-hrnet-plugin is a custom select menu component made specially for my 14th OpenClassrooms project. For this project I had to convert an old JQuery app into a React app.

The old app was relying on several JQuery plugins and I had to convert one into a React component library and host It as an npm package. I decided to convert the selectmenu.

About the plugin

In order to convert the original plugin into a React component, I had to make some changes to follow React's philosophy. However, I tried to keep the same structure and implement all the features that were present in the original plugin. I have also added additional features that I have considered useful to add (like a scroll bar when the list of options is long).

Note: the plugin will be downloaded from this npm registry by default, but If needed you can also use It from the GitHub Packages registry (see here for more info about installing a GitHub package)

Keyboard interaction

When the menu is open, the following key commands are available:

• UP/LEFT: Move focus to the previous item.
• DOWN/RIGHT: Move focus to the next item.
• END/PAGE DOWN: Move focus to the last item.
• HOME/PAGE UP: Move focus to the first item.
• ESCAPE: Close the menu.
• ENTER/SPACE: Select the currently focused item and close the menu.

When the menu is closed, the following key commands are available:

• UP/LEFT: Select the previous item.
• DOWN/RIGHT: Select the next item.
• END/PAGE DOWN: Select the last item.
• HOME/PAGE UP: Select the first item.
• ENTER/SPACE: Open the menu.

How to use

Use the plugin in your project

If you want to use this library in your (React) project, you can install It from the command line :

npm install @leoncik/[email protected]

Then, import the SelectMenu from the library and start using It :

import { SelectMenu } from '@leoncik/p14-hrnet-plugin';

function myComponent() {
    return (
        <div className="myComponent">
            <p>What is your favourite color?</p>
            <SelectMenu options={['Blue', 'Green', 'Red']} />
        </div>
    );
}

export default myComponent;

Work on the plugin

Installation

1. Get this repository's content by direct download or by cloning It :

git clone https://github.com/leoncik/LeonardWojcik_14_30082022_plugin.git

2. Make sure that Node.js is installed on your machine and that you have a package manager (like npm or yarn).

Then install the dependencies :

yarn install

3. You are ready to go!

Visualize and edit the project

You can visualize the changes made on the plugin easily with storybook (It will act like a dev server). To run storybook, run :

yarn storybook

Once the changes are made and that you are ready to bundle the plugin, run yarn build to build It. It will now be ready to be published!

Use the tests

To run and watch the tests in the console, run : yarn test.

To get a coverage report while running the tests, run : yarn coverage. If you want to visualize the coverage report, you can run a live server (if you are using VSCode, I recommend using LiveServer) and use this url : http://127.0.0.1:5500/coverage/

Available properties

| Name | Type | Default | Description | | -------------------------- | ------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | options | array | [] | An array containing the list of options for the select menu. | | optionsValues | array | undefined | An array containing the options values for the select menu. If not set, the value of the select menu will be taken from the option property. | | label | string | undefined | Set the text content inside the button that triggers the select menu. By default It will use the first option as label. | | id | string | undefined | Set the id of the select menu (useful to link to a label element). | | inputRef | any | null | Set ref to the select input element of the select menu. You can easily access the value of the input with something like : "yourRef.current.value". | | width | number | 210 | The width of the menu, in pixels. | | maxHeight | number | 200 | The maximum height of the menu, in pixels. Only applied if the scrollable property is set to true. | | scrollable | boolean | true | Makes the menu scrollable (useful if there are many options). | | offsetX | number | 0 | Offset of the menu on the X axis (negative values are allowed). | | offsetY | number | 0 | Offset of the menu on the Y axis (negative values are allowed). | | buttonIconPath | string | "static/media/lib/assets/chevron-down.svg" | Path to the icon to be displayed in the select menu button. | | className | string | undefined | Added class name of the select menu. By default, the menu has the className : "select-menu". | | showButtonIcon | boolean | true | Hide or show the icon on the button of the select menu. | | rotateButtonIcon | boolean | true | Rotate the icon on the button of the select menu. | | optionsFontSize | string or undefined | undefined | Font-size of the options (in px). | | mainColor | string | "#007fff" | The main color for the menu (used for most active, hover and focus states of the select menu). | | optionTextColor | string | "black" | The default text color of the options. | | optionTextFocus | string | "white" | The text color of the option if hovered or focused. | | buttonTextColor | string | "#454545" | The default text color of the button. | | buttonBackgroundHoverColor | string | "#ededed" | The background color of the button when overed. | | buttonTextHoverColor | string | "#2b2b2b" | The text color of the button if hovered. | | buttonTextActiveColor | string | "white" | The text color of the button if clicked. |