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:
``bash
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:
`JS
import {Select} from 'hrnet-lib3'
`

Component description

$3

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

$3

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:
`JS
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"
}
]

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

`


$3

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:
`JS
const [dob, setDob] = React.useState("");
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)}
/>
`

$3

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:
`JS
const [isOpen, setIsOpen] = React.useState(false);
const headerTemplate = (


Modale Header

);

setIsOpen(false)}>

Lorem ipsum dolor sit amet consectetur adipisicing elit.

`

$3

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

Versions:

$3


* Initial release
* Add a Select component.

$3

* Add a Modale component.
* Add a DatePicker component.
* Add a DataTable component.

$3

* Correction of Modal export.

$3

* Correction for typescript declarations.

$3

* Try to solving the issue for typescript components exportations.

$3

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

$3

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

$3

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

$3

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

$3

* Update Select` component for accessibility (keyboard event).