HRNet 3

A custom library for the HRNet educational project.

This library will not be updated after the project ends. It's a review of HRNet 3, with typescript implementation.

Content

This library contains four components:

• A custom select: Select
• A table with pagination and search filter: Table
• A datepicker with a select for month and year: DatePicker
• A modal with an optional header and footer: Modale
• A custom input text: InputText

Each component's style can be modified by overriding the CSS classes.

How to install

Download and import directly from NPM:

npm install hrnet-lib3@latest

Insert import '/node_modules/hrnet-lib3/dist/index.css' at the top of your app component.

Then, you can use EcmaScript imports to use components:

import {Select} from 'hrnet-lib3'

Component description

Select

The Select component has four props:

• (string) id: This is the id attribute, it is required.
• (string) label: The text to be displayed in the label tag.
• (array) options: An array of the desired options for the select tag.
• (string || null) defaultValue: null by default.
• (function) onChange: the callback function
• (string) labelPosition : label position [left, right, center] ('left' by default)

Exemple:

const [select, setSelect] = React.useState<string>("");
<Select
  id="test-select"
  label="Select"
  options={['Option 1', 'Option 2', 'Option 3']}
  defaultValue={select}
  onChange={(value: string) => setSelect(value)}
/>

DataTable

A responsive table with some options.

This component has four props:

• (array) headColumnList: A string array containing the table's header names.
• (array) bodyDataList: An array of objects containing the table's entries.
• (array) dataPropertiesList: A string array containing the properties from bodyDataList to be displayed.
• (array) options: An array for additional options:
  • boolean: If true, a search bar will be displayed.
  • boolean: If true, sorting will be enabled.
  • number: The default number of table entries to display.
  • (string) labelPosition : label position [left, right, center] ('left' by default)

Exemple:

  const thList: string[] = [
    "First Name",
    "Last Name",
    "Start Date",
    "Department",
    "Date of Birth",
    "Street",
    "City",
    "State",
    "Zip Code"
  ]
  const dataProperties: string[] = [
    "firstname",
    "lastname",
    "start",
    "department",
    "dob",
    "street",
    "city",
    "state",
    "zipcode"
  ]
  const dataBody: object[] = [
    {
      firstname: "John",
      lastname: "Doe",
      start: 1656738649,
      department: "IT",
      dob: -106185600,
      street: "123 Main St",
      city: "Anytown",
      state: "CA",
      zipcode: "12345"
    },
    {
      firstname: "Jane",
      lastname: "Doe",
      start: 1627662224,
      department: "IT",
      dob: 884044800,
      street: "123 Main St",
      city: "Anytown",
      state: "CA",
      zipcode: "12345"
    },
    {
      firstname: "Jack",
      lastname: "Doe",
      start: 1714385180,
      department: "IT",
      dob: 382924800,
      street: "123 Main St",
      city: "Anytown",
      state: "CA",
      zipcode: "12345"
    }
  ]

  <DataTable
    id='test-data-table'
    headColumnList={thList}
    dataPropertiesList={dataProperties}
    bodyDataList={dataBody}
    options={[true, true, 5]}        
  />
  

DatePicker

A simple date picker with a select for month and year.

This component has two props:

• (string) id : This is the id attribute, it is required.
• (string) label : The text to be displayed in the label tag.
• (string) value : date value
• (function) onChange : the callback function
• (object) dateOptions : date format options ({year: 'numeric',month: 'long',day: '2-digit'} by default)
• (string) localDate : date format ('en-US' by default)
• (string) labelPosition : label position [left, right, center] ('left' by default)

Exemple:

  const [dob, setDob] = React.useState<string>("");
  <DatePicker
    id='test-date-picker'
    label='Date picker'
    dateOptions={{ year: 'numeric', month: '2-digit', day: '2-digit' }}
    localDate='fr-FR'
    value={dob}
    onChange={(date:string) => setDob(date)}
  />

Modale

A simple modal with an optional header and footer.

This component has six props:

• (boolean) isOpen : If true, the modal will be displayed.
• (function) onClose : the callback function
• (ReactNode) children : the content of the modal
• (ReactNode) header : the header of the modal
• (ReactNode) footer : the footer of the modal
• (string) id : the id of the modal

Exemple:

const [isOpen, setIsOpen] = React.useState<boolean>(false);
const headerTemplate = (
  <h4> Modale Header </h4>
);

<Modale isOpen={isOpen} header={headerTemplate} onClose={() => setIsOpen(false)}>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</Modale>

InputText

A simple input component, with regex validation.

This component has seven props:

• (string) id : This is the id attribute, it is required.
• (string) label : The text to be displayed in the label tag.
• (string) value : input state value value
• (function) onChange : the callback function
• (string) type : input type ('text' by default)
• (regex) regex : regex validation
• (string) labelPosition : label position [left, right, center] ('left' by default)

Exemple:

<InputText
  id='test-input-text'
  label='Input text'
  value={inputValue}
  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setInputValue(e.target.value)}
  regex={/^[a-zA-Z\s]+$/}
/>

Versions:

1.0.0:

• Initial release
• Add a Select component.

1.0.1:

• Add a Modale component.
• Add a DatePicker component.
• Add a DataTable component.

1.0.2:

• Correction of Modal export.

1.0.3:

• Correction for typescript declarations.

1.0.14:

• Try to solving the issue for typescript components exportations.

1.0.16:

• Silent deprecates API legacy-js-api on RollUP config. Correction of circular dependency.
• Readme update.

1.0.17:

• Add a DataTable sub component.
• Change Sort component to a functional component.

1.0.18:

• Add InputText component.
• Add labelPosition option for all components except Modale.
• ReadMe update.

1.0.19:

• Update DatePicker component for display active day.
• Correction of DatePicker body about previous month days.

1.0.20:

• Update Select component for accessibility (keyboard event).