newron-ui 1.0.100 → 1.0.102

package/LICENSE

@@ -0,0 +1,3 @@
+MIT License
+
+Copyright (c) 2024, Shaikh Faruk

package/README.md

@@ -1,371 +1,122 @@
-# Newron UI Library
+## 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:
+The Project has the following directory structure:
 
 ```bash
-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**
+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)
+└── ...
 
-```bash
-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:
+## Setup Instructions
 
-| 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.          |
+1. **Clone the Repository**: Clone this repository to your local machine using `git clone`:
 
-### Button
+   ```bash
+   git clone https://github.com/Newron-EduTech/newron-front.git
+   ```
 
-A customizable button component with various styles.
+2. **Install Dependencies**: Install the dependencies for the project using `yarn` or `npm`:
 
-Props:
+   ```bash
+   npm install
+   ```
 
-- `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.
+   or
 
-Usage Example:
+   ```bash
+   yarn add
+   ```
 
-```jsx
-import React from 'react';
-import { Button } from 'newron-ui-lib';
+3. **Build the shared-component**: Build the shared-component using `yarn` or `npm`:
 
-const MyComponent = () => {
-  return (
-    <Button variant='primary' size='lg'>
-      Click Me
-    </Button>
-  );
-};
+```bash
+npm run build:shared
 ```
 
-### 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:
+or
 
-```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.' />;
-};
+```bash
+yarn build:shared
 ```
 
-### Input
-
-An input component to accept user input.
-
-Props:
+4. **Start the Project**: Start the project using `yarn` or `npm`:
 
-- `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.
+## 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
 
-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' />;
-};
+```bash
+npm start
 ```
 
-### Dropdown
-
-A dropdown component to display a list of options.
-
-Props:
+or
 
-- `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']} />;
-};
+```bash
+yarn start
 ```
 
-### Select
+## To run single shared-component app
 
-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']} />;
-};
+```bash
+npm run start:shared
 ```
 
-### SearchBar
-
-A search bar component to input search text and trigger search action.
-
-Props:
+or
 
-- `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} />;
-};
+```bash
+yarn start:shared
 ```
 
-### ResponsiveLayoutWrapper
+## To run single newron app
 
-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>;
-};
+```bash
+npm run newron
 ```
 
-### Datalist
+or
 
-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} />;
-};
+```bash
+yarn newron
 ```
 
-### DynamicForm
+## To run single student app
 
-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} />;
-};
+```bash
+npm run student
 ```
 
-## Contributing
+or
 
-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)
+```bash
+yarn student
+```
 
-## License
+## To run single entity app
 
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+```bash
+npm run entity
+```
 
-## Changelog
+or
 
-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.
+```bash
+yarn entity
+```

package/dist/index.cjs.css

@@ -0,0 +1 @@
+.DatePicker_react-date-picker__1U15H{display:inline-flex;position:relative}.DatePicker_react-date-picker__1U15H,.DatePicker_react-date-picker__1U15H *,.DatePicker_react-date-picker__1U15H :after,.DatePicker_react-date-picker__1U15H :before{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.DatePicker_react-date-picker--disabled__Ygu-E{background-color:#f0f0f0;color:#6d6d6d}.DatePicker_react-date-picker__wrapper__7TC58{border:thin solid gray;display:flex;flex-grow:1;flex-shrink:0}.DatePicker_react-date-picker__inputGroup__DRin9{box-sizing:content-box;flex-grow:1;min-width:calc(12px + 4.754em);padding:0 2px}.DatePicker_react-date-picker__inputGroup__divider__BdMVP{padding:1px 0;white-space:pre}.DatePicker_react-date-picker__inputGroup__divider__BdMVP,.DatePicker_react-date-picker__inputGroup__leadingZero__sx1c5{display:inline-block}.DatePicker_react-date-picker__inputGroup__input__tCyqo{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;background:none;border:0;box-sizing:content-box;color:currentColor;font:inherit;height:100%;min-width:.54em;padding:0 1px;position:relative}.DatePicker_react-date-picker__inputGroup__input__tCyqo::-webkit-inner-spin-button,.DatePicker_react-date-picker__inputGroup__input__tCyqo::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}.DatePicker_react-date-picker__inputGroup__input__tCyqo:invalid{background:rgba(255,0,0,.1)}.DatePicker_react-date-picker__inputGroup__input--hasLeadingZero__PFjjl{margin-left:-.54em;padding-left:calc(1px + .54em)}.DatePicker_react-date-picker__button__vCDve{background:transparent;border:0;padding:4px 6px}.DatePicker_react-date-picker__button__vCDve:enabled{cursor:pointer}.DatePicker_react-date-picker__button__vCDve:enabled:focus .DatePicker_react-date-picker__button__icon__tVEvr,.DatePicker_react-date-picker__button__vCDve:enabled:hover .DatePicker_react-date-picker__button__icon__tVEvr{stroke:#0078d7}.DatePicker_react-date-picker__button__vCDve:disabled .DatePicker_react-date-picker__button__icon__tVEvr{stroke:#6d6d6d}.DatePicker_react-date-picker__button__vCDve svg{display:inherit}.DatePicker_react-date-picker__calendar__x-42c{max-width:100vw;width:350px;z-index:1}.DatePicker_react-date-picker__calendar--closed__Q4HlT{display:none}.DatePicker_react-date-picker__calendar__x-42c .DatePicker_react-calendar__4Asdh{border-width:thin}.Calendar_react-calendar__qJHj4{background:#fff;border:1px solid #a0a096;font-family:Arial,Helvetica,sans-serif;line-height:1.125em;max-width:100%;width:350px}.Calendar_react-calendar--doubleView__nGf8t{width:700px}.Calendar_react-calendar--doubleView__nGf8t .Calendar_react-calendar__viewContainer__2btsJ{display:flex;margin:-.5em}.Calendar_react-calendar--doubleView__nGf8t .Calendar_react-calendar__viewContainer__2btsJ>*{margin:.5em;width:50%}.Calendar_react-calendar__qJHj4,.Calendar_react-calendar__qJHj4 *,.Calendar_react-calendar__qJHj4 :after,.Calendar_react-calendar__qJHj4 :before{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.Calendar_react-calendar__qJHj4 button{border:0;margin:0;outline:none}.Calendar_react-calendar__qJHj4 button:enabled:hover{cursor:pointer}.Calendar_react-calendar__navigation__wITu3{display:flex;height:44px;margin-bottom:1em}.Calendar_react-calendar__navigation__wITu3 button{background:none;min-width:44px}.Calendar_react-calendar__navigation__wITu3 button:disabled{background-color:#f0f0f0}.Calendar_react-calendar__navigation__wITu3 button:enabled:focus,.Calendar_react-calendar__navigation__wITu3 button:enabled:hover{background-color:#e6e6e6}.Calendar_react-calendar__month-view__weekdays__Nn0to{font:inherit;font-size:.75em;font-weight:700;text-align:center;text-transform:uppercase}.Calendar_react-calendar__month-view__weekdays__weekday__rtE0x{padding:.5em}.Calendar_react-calendar__month-view__weekNumbers__q-s5B .Calendar_react-calendar__tile__E990-{align-items:center;display:flex;font:inherit;font-size:.75em;font-weight:700;justify-content:center}.Calendar_react-calendar__month-view__days__day--weekend__b2Eux{color:#d10000}.Calendar_react-calendar__century-view__decades__decade--neighboringCentury__7H6iU,.Calendar_react-calendar__decade-view__years__year--neighboringDecade__xK8IH,.Calendar_react-calendar__month-view__days__day--neighboringMonth__PqU6x{color:#757575}.Calendar_react-calendar__century-view__9bnxl .Calendar_react-calendar__tile__E990-,.Calendar_react-calendar__decade-view__UtHRh .Calendar_react-calendar__tile__E990-,.Calendar_react-calendar__year-view__U51oY .Calendar_react-calendar__tile__E990-{padding:2em .5em}.Calendar_react-calendar__tile__E990-{background:none;line-height:16px;font:inherit;font-size:.833em;max-width:100%;padding:10px 6.6667px;text-align:center}.Calendar_react-calendar__tile__E990-:disabled{background-color:#f0f0f0;color:#ababab}.Calendar_react-calendar__century-view__decades__decade--neighboringCentury__7H6iU:disabled,.Calendar_react-calendar__decade-view__years__year--neighboringDecade__xK8IH:disabled,.Calendar_react-calendar__month-view__days__day--neighboringMonth__PqU6x:disabled{color:#cdcdcd}.Calendar_react-calendar__tile__E990-:enabled:focus,.Calendar_react-calendar__tile__E990-:enabled:hover{background-color:#e6e6e6}.Calendar_react-calendar__tile--now__18Dll{background:#ffff76}.Calendar_react-calendar__tile--now__18Dll:enabled:focus,.Calendar_react-calendar__tile--now__18Dll:enabled:hover{background:#ffffa9}.Calendar_react-calendar__tile--hasActive__uksuk{background:#76baff}.Calendar_react-calendar__tile--hasActive__uksuk:enabled:focus,.Calendar_react-calendar__tile--hasActive__uksuk:enabled:hover{background:#a9d4ff}.Calendar_react-calendar__tile--active__0T5dw{background:#006edc;color:#fff}.Calendar_react-calendar__tile--active__0T5dw:enabled:focus,.Calendar_react-calendar__tile--active__0T5dw:enabled:hover{background:#1087ff}.Calendar_react-calendar--selectRange__Ydd5T .Calendar_react-calendar__tile--hover__rAUKA{background-color:#e6e6e6}