npm package: @nav-matrix/ui-components
Description: This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
Latest version: 0.1.157

# Getting Started with Create React App

This project was bootstrapped with
[Create React App](https://github.com/facebook/create-react-app).

## Available Scripts

In the project directory, you can run:

### `npm start`

Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.

The page will reload when you make changes.\
You may also see any lint errors in the console.

### `npm test`

Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests)
for more information.

### `npm run build`

Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best
performance.

The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!

See the section about
[deployment](https://facebook.github.io/create-react-app/docs/deployment) for
more information.

### Description

- This repo contains the UI components.
- This is made using basic HTML tags and CSS is given through bootstrap.
- Bootstrap CDN needs to be updated on regular basis.

Components -

- Accordian - The accordion is a component that organizes content within
  collapsable items.
- Button - The Button is a component that renders a button with different
  styles.
- Checkbox - Checkboxes are used to select one or several options in a list.
- Col - Grid columns are created by specifying the number of twelve available
  columns you wish to span.
- Container - Containers are a fundamental building block of Bootstrap that
  contain, pad, and align your content within a given device or viewport.
- DataList - It is used to provide an "autocomplete" feature for all elements.
  Users will see a drop-down list of pre-defined options as they input data. In
  short it is a searchable dropdown.
- DatePicker - It is used to select a date from a calendar.
- Div - It is a copy of div tag which defines a division or a section.
- Form - It is a container for different types of input elements, such as: text
  fields, checkboxes, radio buttons, submit buttons, etc.
- H1 - H6 - H1 defines the most important heading. H6 defines the least
  important heading. Note: Only use one H1 per page - this should represent the
  main heading/subject for the whole page. Also, do not skip heading levels -
  start with H1 , then use H2 , and so on.
- Hr - This tag is used to create a horizontal line.
- Image - It is used to embed an image.
- Input - This tag specifies an input field where the user can enter data,
- Label - It is used to define a label for several elements like text fields,
  checkboxes, radio buttons, submit buttons, etc.
- List -Lists are used to specify lists of information. All lists may contain
  one or more list elements.
- Modal - The Modal component is a dialog box/popup window that is displayed on
  top of the current page.
- Multiselect - It is used to select multiple options.
- Navbar - It is used to design a navbar.
- NavigationProvider - It is used to return toast provider which controls display
  of toasts as notifications.
- NumbericInput - It defines the field for entering a number.
- Paragraph - This element defines a paragraph. A paragraph always starts on a
  new line, and browsers automatically add some white space (a margin) before
  and after a paragraph.
- RadioButton - Radio buttons are normally presented in radio groups (a
  collection of radio buttons describing a set of related options). Only one
  radio button in a group can be selected at the same time.
- Row - Is an essential element in the bootstrap grid system to hold the column
  class.It is used for horizontal partition in the container class of the web
  application.
- SearchableSelect - Select menus are used if you want to allow the user to pick
  from multiple options and search through them.
- Select - Select menus are used if you want to allow the user to pick from
  multiple options.
- Span - It is a copy of span tag which is a generic inline container element.
- Spinner - It is used to show the loading state.
- Table - This is used to render a table with sortable columns and rows.
- Tabs - Tabs separate data in the same wrappers but different panes.
- TextArea - It defines a multi-line text input control.
- Toasts - This component is like an alert box that is only shown for a couple
  of seconds when something happens.
- Tree - This component is used to render tree like structure.
- Vr - This tag is used to create a vertical line.

Hooks

- useNotification - used to provide context wrapper for NotificationProvider
  has functions to show notifications (error,info,warning and success)
- useMultiselect - provides handle for MultiSelect component
- useOnClickOutside - hook to invoke callback when click outside the provided
  component.

Functions

- getPopupPosition - returns position suited for popup.
- classnames - combines provided classes together
- uuidv4 - returns random v4 uuid.