open-index/open-npm huggingface dataset:
npm package: @ptadmin/nuno-ui-components
Description: This project contains a list of UI components that can be important a used in different applications
Latest version: 1.0.1

# 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:

```javascript
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
npm package: @ptadmin/react-component-to-npm-test
Description: Boilerplate to quickstart React component development
Latest version: 1.0.1
Deprecated: This was just a test - deprecated

# Build your React Component

Run `npm install` from the command line inside your project folder, this installs all of the package dependencies for the project.

Run `npm run build` from the command line inside your project folder, this will run webpack via the "scripts > build" script in the package.json file above, when it's finished you should see the compiled ES5 version of your React component in the lib folder inside your project folder.

## Login to the npm registry with the npm cli

Run `npm login` from the command line and enter the credentials that you used to sign up to npmjs.com in the first step.

## Publish your React component to npm!

Run `npm publish` from the command line inside your project folder.
npm package: @ptadmin/ui-components
Description: This project contains a list of UI components that can be important a used in different applications
Latest version: 3.0.7

# 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:

```javascript
import { COMPONENT_NAME } from '@ptadmin/ui-components';
```

## 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.

### `DateTimeDisplayer`

The DateTimeDisplayer 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.

### `Link`

the Link component generates links under a react-router context.

### `Switch`

A switch input with an update handler function.