UI Components library

This project contains a list of UI components that can be important a used in different applications

Installation

Using npm

npm i -s @ptadmin/ui-components

Getting started

Adding components to a project is done by simply importing the desired component using the following method:

import COMPONENT_NAME from '@ptadmin/uicomponents';

Available Components

In the project directory, you can find the following components:

AutoComplete

The AutoComplete component is a normal text input enhanced by a panel of suggested options.

The widget is useful for setting the value of a single-line textbox in one of two types of scenarios:

1. The value for the textbox must be chosen from a predefined set of values, e.g., a sport name field must contain a valid name.
2. The textbox may contain any arbitrary value, but it is advantageous to suggest possible values to the user, e.g., an event name field may suggest similar or existing event names.

DateTime

The DateTime component receives a prop that represents an ISO 8601 format date and displayes it in a Day/Month/Year Hour:Minute:second string. This component is usually passed to Table as a prop to render dates in a row.

HeaderBar

The HeaderBar component displays a normal navigation bar with links received via a routes prop containing an array of objects. eg:

[
    {
		label: 'Home',
		path: '/',
	},
	{
		label: 'Link',
		path: '/link',
	},
	{
		label: 'hidden link',
		path: '/hidden',
		hidden: true,
	},
]

with the data above, the HeaderBar component will render 2 links:

1. Home
2. Link

the third link ("hidden link") won't be displayed once it has the hidden flag