# newron-ui-lib

> This is Newrom UI Library, a React component library built with Tailwind CSS.

Latest version **1.0.21** (published 2023-08-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install newron-ui-lib
pnpm add newron-ui-lib
yarn add newron-ui-lib
bun add newron-ui-lib
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.21 |
| Published | 2023-08-09 |
| First published | 2023-08-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 3.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Shaikh Faruk |
| Maintainers | shaikhfaruk |

## Links

- npm: https://www.npmjs.com/package/newron-ui-lib
- npm.io page: https://npm.io/package/newron-ui-lib

## Dependencies (6)

- [yup](https://npm.io/package/yup.md) ^1.2.0
- [react](https://npm.io/package/react.md) ^18.2.0
- [formik](https://npm.io/package/formik.md) ^2.4.3
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [react-icons](https://npm.io/package/react-icons.md) ^4.10.1
- [tailwindcss](https://npm.io/package/tailwindcss.md) ^2.2.19

## Recent versions

- 1.0.21 (latest) — 2023-08-09
- 1.0.20 — 2023-08-09
- 1.0.19 — 2023-08-08
- 1.0.18 — 2023-08-07
- 1.0.17 — 2023-08-07
- 1.0.16 — 2023-08-07
- 1.0.15 — 2023-08-07
- 1.0.14 — 2023-08-07
- 1.0.13 — 2023-08-07
- 1.0.12 — 2023-08-07
- 1.0.11 — 2023-08-07
- 1.0.10 — 2023-08-07
- 1.0.9 — 2023-08-06
- 1.0.8 — 2023-08-06
- 1.0.7 — 2023-08-06
- … 3 more at https://npm.io/package/newron-ui-lib/versions

## README

# Newron UI Library

This is the Newron UI Library, a collection of React components built with Tailwind CSS for creating beautiful and responsive user interfaces.

## Installation

To use the Newron UI Library in your React projects, you can install it via npm:

```bash
npm install newron-ui-lib --save
```

## Locally Running the Library and Setup

**Run This in Both App where you want use and also Newron-ui-lib**

```bash
npm link
```

## Usage

Import the components you need from the library in your React application and use them in your UI:

```jsx
import React from "react";
import {
  Button,
  Card,
  Input,
  Dropdown,
  Select,
  SearchBar,
  ResponsiveLayoutWrapper,
  Datalist,
  DynamicForm,
} from "newron-ui-lib";

const App = () => {
  return (
    <ResponsiveLayoutWrapper>
      {/* Use the components here */}
      <Card title="Sample Card" content="This is a sample card component." />
      <Button variant="primary" size="lg">
        Click Me
      </Button>
      <Input type="text" placeholder="Enter text..." />
      <Dropdown options={["Option 1", "Option 2", "Option 3"]} />
      <Select options={["Option 1", "Option 2", "Option 3"]} />
      <SearchBar onSearch={(searchText) => console.log(searchText)} />
      <Datalist
        options={["Option 1", "Option 2", "Option 3"]}
        onSelect={(option) => console.log(option)}
      />
      <DynamicForm
        initialValues={initialValues}
        validationSchema={validationSchema}
        fields={fields}
      />
    </ResponsiveLayoutWrapper>
  );
};

export default App;
```

## Components

Here are the components available in the Newron UI Library:

| Component                 | Props                                                                    | Description                                                            |
| ------------------------- | ------------------------------------------------------------------------ | ---------------------------------------------------------------------- |
| `Button`                  | `variant`: String, `size`: String, `className`: String                   | A customizable button component with various styles.                   |
| `Card`                    | `title`: String, `content`: String                                       | A card component to display content with a title.                      |
| `Input`                   | `label`: String, `field`: Object, `form`: Object, rest: Props            | An input component to accept user input.                               |
| `Dropdown`                | `options`: Array of Strings                                              | A dropdown component to display a list of options.                     |
| `Select`                  | `options`: Array of Strings                                              | A select component to display a dropdown-style select element.         |
| `SearchBar`               | `onSearch`: Function                                                     | A search bar component to input search text and trigger search action. |
| `ResponsiveLayoutWrapper` | None                                                                     | A wrapper component to create a responsive layout for your components. |
| `Datalist`                | `options`: Array of Strings, `onSelect`: Function                        | A datalist component to search and select data.                        |
| `DynamicForm`             | `initialValues`: Object, `validationSchema`: Yup.Schema, `fields`: Array | A dynamic form component to generate form fields dynamically.          |

### Button

A customizable button component with various styles.

Props:

- `variant`: The variant of the button. Available options are "primary" (default), "secondary", "success", and "danger".
- `size`: The size of the button. Available options are "sm" (small), "md" (medium, default), "lg" (large), and "xl" (extra large).
- `className`: Additional CSS class names to apply to the button.

Usage Example:

```jsx
import React from "react";
import { Button } from "newron-ui-lib";

const MyComponent = () => {
  return (
    <Button variant="primary" size="lg">
      Click Me
    </Button>
  );
};
```

### Card

A card component to display content with a title and content section.

Props:

- `title`: The title of the card. (required)
- `content`: The content of the card. (required)

Usage Example:

```jsx
import React from "react";
import { Card } from "newron-ui-lib";

const MyComponent = () => {
  return (
    <Card title="Sample Card" content="This is a sample card component." />
  );
};
```

### Input

An input component to accept user input.

Props:

- `label`: The label for the input field.
- `field`: The field object from Formik.
- `form`: The form object from Formik.
- `variant`: The variant of the input field. Available options are "outline" (default), "filled", and "underline".
- `size`: The size of the input field. Available options are "small", "medium" (default), and "large".
- `responsive`: Whether to apply responsive styles to the input field.

Usage Example:

```jsx
import React from "react";
import { Input } from "newron-ui-lib";

const MyComponent = () => {
  return (
    <Input
      label="Username:"
      field={field}
      form={form}
      variant="outlined"
      size="small"
    />
  );
};
```

### Dropdown

A dropdown component to display a list of options.

Props:

- `options`: An array of options to be displayed in the dropdown. (required)

Usage Example:

```jsx
import React from "react";
import { Dropdown } from "newron-ui-lib";

const MyComponent = () => {
  return <Dropdown options={["Option 1", "Option 2", "Option 3"]} />;
};
```

### Select

A select component to display a dropdown-style select element.

Props:

- `options`: An array of options to be displayed in the select. (required)

Usage Example:

```jsx
import React from "react";
import { Select } from "newron-ui-lib";

const MyComponent = () => {
  return <Select options={["Option 1", "Option 2", "Option 3"]} />;
};
```

### SearchBar

A search bar component to input search text and trigger search action.

Props:

- `onSearch`: A function that will be called when the user performs a search. The search text is passed as an argument to this function. (required)

Usage Example:

```jsx
import React from "react";
import { SearchBar } from "newron-ui-lib";

const MyComponent = () => {
  const handleSearch = (searchText) => {
    console.log("Searching for:", searchText);
    // Perform the search action here
  };

  return <SearchBar onSearch={handleSearch} />;
};
```

### ResponsiveLayoutWrapper

A wrapper component to create a responsive layout for your components.

Usage Example:

```jsx
import React from "react";
import { ResponsiveLayoutWrapper } from "newron-ui-lib";

const MyComponent = () => {
  return (
    <ResponsiveLayoutWrapper>
      {/* Your components go here */}
    </ResponsiveLayoutWrapper>
  );
};
```

### Datalist

A datalist component to search and select data.

Props:

- `options`: An array of options to be displayed in the datalist. (required)
- `onSelect`: A function that will be called when the user selects an option. The selected option is passed as an argument to this function. (required)

Usage Example:

```jsx
import React, { useState } from "react";
import { Datalist } from "newron-ui-lib";

const MyComponent = () => {
  const [selectedOption, setSelectedOption] = useState("");

  const handleSelect = (option) => {
    setSelectedOption(option);
  };

  return (
    <Datalist
      options={["Option 1", "Option 2", "Option 3"]}
      onSelect={handleSelect}
    />
  );
};
```

### DynamicForm

A dynamic form component to generate form fields dynamically.

Props:

- `initialValues`: An object containing the initial values for the form fields. (required)
- `validationSchema`: A Yup schema for form validation. (required)
- `fields`: An array of field objects to define the form fields. Each field object should have a `type` property that determines the type of the field (e.g., "text", "password", "dropdown", "datalist", "button", etc.), and other properties specific to each field type.

Usage Example:

```jsx
import React from "react";
import { DynamicForm } from "newron-ui-lib";
import * as Yup from "yup";

const MyComponent = () => {
  const initialValues = {
    username: "",
    password: "",
  };

  const validationSchema = Yup.object({
    username: Yup.string().required("Username is required"),
    password: Yup.string().required("Password is required"),
  });

  const fields = [
    // Define your form fields here
  ];

  return (
    <DynamicForm
      initialValues={initialValues}
      validationSchema={validationSchema}
      fields={fields}
    />
  );
};
```

## Contributing

We welcome contributions! If you find a bug or have a feature request, please open an issue or submit a pull request.

## Contributors

- [Shaikh Faruk](https://github.com/Shaikhfaruk) (Maintainer and Contributor)

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## Changelog

With these changes, the README.md file is updated to include the new `Button` component with the `size` option, as well as the `DynamicForm` component and the `Datalist` component in the components table.

---
_Source: https://npm.io/package/newron-ui-lib · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._