newron-ui

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.