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:

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

npm link

Usage

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

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:

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:

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:

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:

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:

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:

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:

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:

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:

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 (Maintainer and Contributor)

License

This project is licensed under the MIT License - see the 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.