@leoncik/p14-hrnet-plugin v1.0.1

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/p14-hrnet-plugin@1.0.0

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