newron-ui 2.0.7 → 2.0.10

package/README.md

@@ -24,373 +24,7 @@ import "newron-ui/dist/newron.css";
 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 {
-  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:
-
-```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}
-    />
-  );
-};
-```
+## For more information just go https://playground.elern.io/ and check the components for more details and usage.
 
 ## Contributing
 
@@ -403,7 +37,3 @@ We welcome contributions! If you find a bug or have a feature request, please op
 ## 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.