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 --save

Import newron-ui css in App.js

import "newron-ui/dist/newron.css";

Locally Running the Library and Setup

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

npm link

Components

Here are the components available in the Newron UI Library:

| Type | Name | Description | | ---------- | ------------------------- | -------------------------------------------------------- | | Components | Button | A customizable button component. | | Components | Card | A card-style component for displaying content. | | Components | Input | An input field component. | | Components | Dropdown | A dropdown component for selecting options. | | Components | Select | A select component for selecting options. | | Components | SearchBar | A search bar component. | | Components | ResponsiveLayoutWrapper | A responsive layout wrapper component. | | Components | Datalist | A datalist component. | | Components | Datalist2 | Another datalist component. | | Components | SearchableList | A searchable list component. | | Components | MultiSelectDatalist | A multi-select datalist component. | | Components | DynamicForm | A dynamic form component. | | Components | DataTable | A data table component. | | Components | Loader | A loader component. | | Components | Checkbox | A checkbox component. | | Components | ActionsCell | A cell for action buttons in a table. | | Components | NoPermission | A component for displaying a "No Permission" message. | | Components | Breadcrumb | A breadcrumb navigation component. | | Components | Avatar | An avatar component. | | Components | Badge | A badge component. | | Components | Spinner | A spinner component. | | Components | HoverableButton | A button with hover effects. | | Components | AscDscShorter | A component for sorting data. | | Components | Table | A table component. | | Components | VerticalLine | A vertical line component. | | Components | HorizontalLine | A horizontal line component. | | Components | TableSkeleton | A skeleton loader for tables. | | Components | TablePagination | A pagination component for tables. | | Components | SelectAllHeader | A header component for selecting all items in a table. | | Components | TableHeaderSkeleton | A skeleton loader for table headers. | | Components | TableBodySkeleton | A skeleton loader for table body. | | Components | ActionHeader | A header for action buttons in a table. | | Components | UploadFile | A file upload component. | | Components | FormField | A form field component. | | Components | CombinedImageUploader | An image uploader component. | | Components | Stepper | A stepper component. | | Components | CloseButton | A close button component. | | Components | ExcelGenerator | A component for generating Excel files. | | Components | DownloadFile | A component for downloading files. | | Components | ButtonElement | A button element component. | | Components | InputElement | An input element component. | | Components | Profiles | A component for displaying user profiles. | | Components | ProfileListModel | A list model component for profiles. | | Hooks | useClickOutsideHandler | A hook for handling clicks outside a specified element. | | Hooks | useWindowWidthHeight | A hook for tracking window width and height. | | Hooks | useScrollToLastElement | A hook for scrolling to the last element in a container. | | Hooks | useColumnWidths | A hook for managing column widths. | | Hooks | useBodyOverflow | A hook for controlling the overflow of the body. | | Hooks | useTimeout | A hook for managing timeouts. | | Hooks | useMediaQuery | A hook for working with media queries. | | Hooks | usePrevious | A hook for accessing the previous value of a state. | | Hooks | useDocumentTitle | A hook for setting the document title. | | Hooks | useKeyPress | A hook for handling keyboard keypress events. | | Hooks | useOnlineStatus | A hook for detecting online/offline status. | | Hooks | useScrollPosition | A hook for tracking scroll position. | | Hooks | useGeolocation | A hook for accessing geolocation information. | | Hooks | useLocalStorageWithExpiry | A hook for managing local storage with expiry. | | Hooks | useClipboard | A hook for working with the clipboard. | | Hooks | useInterval | A hook for managing intervals. | | Hooks | useHover | A hook for detecting hover status. | | Hooks | useDocumentVisibility | A hook for monitoring document visibility. | | Hooks | useDebounce | A hook for debouncing function calls. | | Hooks | useMediaRecorder | A hook for media recording capabilities. | | Hooks | useWebSocket | A hook for WebSocket communication. | | Hooks | useModelPosition | A hook for managing model position. | | Utilities | getStatusColorClass | A utility function for obtaining status color classes. |

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";

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.