newron-ui 1.0.103 → 1.0.104

package/README.md

@@ -1,122 +1,371 @@
-## Directory Structure
+# Newron UI Library
 
-The Project has the following directory structure:
+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:
 
 ```bash
-frontend/
-├── apps/
-│   ├── student/
-│   │   ├── src/
-│   │   ├── package.json
-│   │   └── ...
-│   ├── newron/
-│   │   ├── src/
-│   │   ├── package.json
-│   │   └── ...
-│   └── entity/
-│       ├── src/
-│       ├── package.json
-│       └── ...
-├── packages/
-│   ├── newron-uirary/
-│   ├── other-shared-component/
-│   └── ...
-├── package.json
-├── yarn.lock (or package-lock.json if using npm)
-└── ...
+npm install newron-ui --save
+```
+
+## Locally Running the Library and Setup
+
+**Run This in Both App where you want use and also Newron-ui-lib**
 
+```bash
+npm link
 ```
 
-## Setup Instructions
+## 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;
+```
 
-1. **Clone the Repository**: Clone this repository to your local machine using `git clone`:
+## Components
 
-   ```bash
-   git clone https://github.com/Newron-EduTech/newron-front.git
-   ```
+Here are the components available in the Newron UI Library:
 
-2. **Install Dependencies**: Install the dependencies for the project using `yarn` or `npm`:
+| 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.          |
 
-   ```bash
-   npm install
-   ```
+### Button
 
-   or
+A customizable button component with various styles.
 
-   ```bash
-   yarn add
-   ```
+Props:
 
-3. **Build the shared-component**: Build the shared-component using `yarn` or `npm`:
+- `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.
 
-```bash
-npm run build:shared
-```
+Usage Example:
 
-or
+```jsx
+import React from 'react';
+import { Button } from 'newron-ui-lib';
 
-```bash
-yarn build:shared
+const MyComponent = () => {
+  return (
+    <Button variant='primary' size='lg'>
+      Click Me
+    </Button>
+  );
+};
 ```
 
-4. **Start the Project**: Start the project using `yarn` or `npm`:
+### Card
 
-## First just run `npm start` then it will ask you to choose which app you want to run then type the app name and hit enter
+A card component to display content with a title and content section.
 
-```bash
-npm start
-```
+Props:
 
-or
+- `title`: The title of the card. (required)
+- `content`: The content of the card. (required)
 
-```bash
-yarn start
-```
+Usage Example:
 
-## To run single shared-component app
+```jsx
+import React from 'react';
+import { Card } from 'newron-ui-lib';
 
-```bash
-npm run start:shared
+const MyComponent = () => {
+  return <Card title='Sample Card' content='This is a sample card component.' />;
+};
 ```
 
-or
+### Input
 
-```bash
-yarn start:shared
+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' />;
+};
 ```
 
-## To run single newron app
+### Dropdown
 
-```bash
-npm run newron
+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']} />;
+};
 ```
 
-or
+### Select
 
-```bash
-yarn newron
+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']} />;
+};
 ```
 
-## To run single student app
+### SearchBar
 
-```bash
-npm run student
+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} />;
+};
 ```
 
-or
+### ResponsiveLayoutWrapper
 
-```bash
-yarn student
+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>;
+};
 ```
 
-## To run single entity app
+### Datalist
 
-```bash
-npm run entity
+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} />;
+};
 ```
 
-or
+### DynamicForm
 
-```bash
-yarn entity
+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} />;
+};
 ```
+
+## 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](https://github.com/Shaikhfaruk) (Maintainer and Contributor)
+
+## 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.