This library will not be updated after the project ends. It's a review of HRNet 3, with typescript implementation.
npm install hrnet-lib3This library will not be updated after the project ends.
It's a review of HRNet 3, with typescript implementation.
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.
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'
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)}
/>
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"
}
]
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
label='Date picker'
dateOptions={{ year: 'numeric', month: '2-digit', day: '2-digit' }}
localDate='fr-FR'
value={dob}
onChange={(date:string) => setDob(date)}
/>
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
const headerTemplate = (
Modale Header
);
Lorem ipsum dolor sit amet consectetur adipisicing elit.
`
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`
label='Input text'
value={inputValue}
onChange={(e: React.ChangeEvent
regex={/^[a-zA-Z\s]+$/}
/>
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).