newron-ui 1.0.52 → 1.0.55

package/README.md

@@ -18,12 +18,85 @@ npm install newron-ui --save
 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:
 
 ```jsx
-import React from "react";
+import React from 'react';
 import {
   Button,
   Card,
@@ -33,30 +106,23 @@ import {
   SearchBar,
   ResponsiveLayoutWrapper,
   Datalist,
-  DynamicForm,
-} from "newron-ui";
+  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">
+      <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}
-      />
+      <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>
   );
 };
@@ -93,12 +159,12 @@ Props:
 Usage Example:
 
 ```jsx
-import React from "react";
-import { Button } from "newron-ui-lib";
+import React from 'react';
+import { Button } from 'newron-ui-lib';
 
 const MyComponent = () => {
   return (
-    <Button variant="primary" size="lg">
+    <Button variant='primary' size='lg'>
       Click Me
     </Button>
   );
@@ -117,13 +183,11 @@ Props:
 Usage Example:
 
 ```jsx
-import React from "react";
-import { Card } from "newron-ui-lib";
+import React from 'react';
+import { Card } from 'newron-ui-lib';
 
 const MyComponent = () => {
-  return (
-    <Card title="Sample Card" content="This is a sample card component." />
-  );
+  return <Card title='Sample Card' content='This is a sample card component.' />;
 };
 ```
 
@@ -143,19 +207,11 @@ Props:
 Usage Example:
 
 ```jsx
-import React from "react";
-import { Input } from "newron-ui-lib";
+import React from 'react';
+import { Input } from 'newron-ui-lib';
 
 const MyComponent = () => {
-  return (
-    <Input
-      label="Username:"
-      field={field}
-      form={form}
-      variant="outlined"
-      size="small"
-    />
-  );
+  return <Input label='Username:' field={field} form={form} variant='outlined' size='small' />;
 };
 ```
 
@@ -170,11 +226,11 @@ Props:
 Usage Example:
 
 ```jsx
-import React from "react";
-import { Dropdown } from "newron-ui-lib";
+import React from 'react';
+import { Dropdown } from 'newron-ui-lib';
 
 const MyComponent = () => {
-  return <Dropdown options={["Option 1", "Option 2", "Option 3"]} />;
+  return <Dropdown options={['Option 1', 'Option 2', 'Option 3']} />;
 };
 ```
 
@@ -189,11 +245,11 @@ Props:
 Usage Example:
 
 ```jsx
-import React from "react";
-import { Select } from "newron-ui-lib";
+import React from 'react';
+import { Select } from 'newron-ui-lib';
 
 const MyComponent = () => {
-  return <Select options={["Option 1", "Option 2", "Option 3"]} />;
+  return <Select options={['Option 1', 'Option 2', 'Option 3']} />;
 };
 ```
 
@@ -208,12 +264,12 @@ Props:
 Usage Example:
 
 ```jsx
-import React from "react";
-import { SearchBar } from "newron-ui-lib";
+import React from 'react';
+import { SearchBar } from 'newron-ui-lib';
 
 const MyComponent = () => {
-  const handleSearch = (searchText) => {
-    console.log("Searching for:", searchText);
+  const handleSearch = searchText => {
+    console.log('Searching for:', searchText);
     // Perform the search action here
   };
 
@@ -228,15 +284,11 @@ A wrapper component to create a responsive layout for your components.
 Usage Example:
 
 ```jsx
-import React from "react";
-import { ResponsiveLayoutWrapper } from "newron-ui-lib";
+import React from 'react';
+import { ResponsiveLayoutWrapper } from 'newron-ui-lib';
 
 const MyComponent = () => {
-  return (
-    <ResponsiveLayoutWrapper>
-      {/* Your components go here */}
-    </ResponsiveLayoutWrapper>
-  );
+  return <ResponsiveLayoutWrapper>{/* Your components go here */}</ResponsiveLayoutWrapper>;
 };
 ```
 
@@ -252,22 +304,17 @@ Props:
 Usage Example:
 
 ```jsx
-import React, { useState } from "react";
-import { Datalist } from "newron-ui-lib";
+import React, { useState } from 'react';
+import { Datalist } from 'newron-ui-lib';
 
 const MyComponent = () => {
-  const [selectedOption, setSelectedOption] = useState("");
+  const [selectedOption, setSelectedOption] = useState('');
 
-  const handleSelect = (option) => {
+  const handleSelect = option => {
     setSelectedOption(option);
   };
 
-  return (
-    <Datalist
-      options={["Option 1", "Option 2", "Option 3"]}
-      onSelect={handleSelect}
-    />
-  );
+  return <Datalist options={['Option 1', 'Option 2', 'Option 3']} onSelect={handleSelect} />;
 };
 ```
 
@@ -284,32 +331,26 @@ Props:
 Usage Example:
 
 ```jsx
-import React from "react";
-import { DynamicForm } from "newron-ui-lib";
-import * as Yup from "yup";
+import React from 'react';
+import { DynamicForm } from 'newron-ui-lib';
+import * as Yup from 'yup';
 
 const MyComponent = () => {
   const initialValues = {
-    username: "",
-    password: "",
+    username: '',
+    password: ''
   };
 
   const validationSchema = Yup.object({
-    username: Yup.string().required("Username is required"),
-    password: Yup.string().required("Password is required"),
+    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}
-    />
-  );
+  return <DynamicForm initialValues={initialValues} validationSchema={validationSchema} fields={fields} />;
 };
 ```