@materialui-reactjs/admin 1.0.4

package/README.md

@@ -0,0 +1,453 @@
+# @materialui-reactjs/admin
+
+A React component and utility library for building modern admin applications, including admin dashboards, CRUD interfaces, data tables, forms, charts, navigation, and reusable layouts.
+
+The package provides multiple subpath exports so applications can import only the feature groups they need. It is designed to provide a consistent and reusable architecture for React-based admin systems.
+
+## Features
+
+* Reusable admin dashboard components
+* CRUD components for list, detail, update, and import workflows
+* Form components for common and advanced input scenarios
+* File and image upload components
+* Data tables, pagination, search, tabs, and modal components
+* Sidebar and top navigation components
+* ECharts-based chart components
+* Loading and spinner components
+* API and data-handling helpers
+* Environment configuration utilities
+* Routing and validation helpers
+* Drag-and-drop and sortable components
+* CKEditor integration
+* React Select integration
+* MUI Date and Time Picker integration
+* Redux Toolkit integration
+* Bootstrap and MUI based UI components
+
+## Package Structure
+
+The package exposes different feature groups through subpath exports:
+
+| Import Path                            | Description                                                                |
+| -------------------------------------- | -------------------------------------------------------------------------- |
+| `@materialui-reactjs/admin`            | Main exports for commonly used components                                  |
+| `@materialui-reactjs/admin/form`       | Form fields, form builders, and upload components                          |
+| `@materialui-reactjs/admin/hook`       | Hooks and helpers for list, detail, update, and import workflows           |
+| `@materialui-reactjs/admin/utils`      | API, routing, environment, validation, and utility helpers                 |
+| `@materialui-reactjs/admin/meta`       | Tables, tabs, pagination, modals, headers, search, and other UI components |
+| `@materialui-reactjs/admin/sidebar`    | Sidebar navigation                                                         |
+| `@materialui-reactjs/admin/single`     | Single-resource CRUD components                                            |
+| `@materialui-reactjs/admin/top-navbar` | Top navigation                                                             |
+| `@materialui-reactjs/admin/echarts`    | ECharts components                                                         |
+| `@materialui-reactjs/admin/loader`     | Loading and spinner components                                             |
+
+## Main Components
+
+### Form Components
+
+The `form` package provides reusable components for building complex admin forms.
+
+* `AdvancedMultiSelect`
+* `AsxhUImages`
+* `BoxAddRow`
+* `CheckTreeBox`
+* `CusForm`
+* `DateInput`
+* `DateTimeInput`
+* `Editor`
+* `EfFile`
+* `EfImage`
+* `EfImages`
+* `PImage`
+* `SelectAddRowBox`
+* `SelectAddRowBoxAdvanced`
+* `SelectBox`
+* `UDragFile`
+* `UFile`
+* `UFiles`
+* `UImages`
+
+These components support:
+
+* Standard form inputs
+* Select and multi-select fields
+* Tree-based selection
+* Date and time inputs
+* Rich text editing
+* File uploads
+* Image uploads
+* Dynamic form rows
+* Drag-and-drop file handling
+
+### Meta UI Components
+
+The `meta` package contains reusable UI components for admin pages.
+
+* `BtnGroup`
+* `CardTable`
+* `CusTooltip`
+* `ElfinderModal`
+* `Error403`
+* `Error404`
+* `Head`
+* `HeaderDetail`
+* `HeaderIndex`
+* `HeaderUpdate`
+* `ModalForm`
+* `Navtabs`
+* `Pagination`
+* `PDFEmbed`
+* `ScrollTable`
+* `SearchBox`
+* `SortableItem`
+
+These components can be used to build:
+
+* Index pages
+* Detail pages
+* Update pages
+* Data tables
+* Search interfaces
+* Pagination
+* Navigation tabs
+* Modal forms
+* Page headers
+* Error pages
+* Scrollable tables
+
+### Single-Page CRUD Components
+
+The `single` package provides reusable components for building CRUD pages around a single resource.
+
+* `List`
+* `Detail`
+* `Update`
+* `UpdateDetail`
+* `UpdateTableDetail`
+* `Import`
+* `Fields`
+
+A typical resource can be structured as:
+
+```text
+Resource
+├── List
+├── Detail
+├── Update
+└── Import
+```
+
+This structure is useful for applications that use a consistent CRUD architecture across multiple resources.
+
+### Layout Components
+
+#### Sidebar
+
+The sidebar package provides navigation components for admin dashboards.
+
+```ts
+import { Sidebar } from "@materialui-reactjs/admin/sidebar";
+```
+
+It also exports:
+
+* `MenuItem`
+* `SidebarProps`
+
+#### Top Navbar
+
+The top navigation component provides the main navigation header for an admin application.
+
+```ts
+import { TopNavbar } from "@materialui-reactjs/admin/top-navbar";
+```
+
+### ECharts Components
+
+The `echarts` package provides reusable chart components based on ECharts.
+
+* `BarChart`
+* `LineChart`
+* `MultiBarChart`
+* `MultiLineChart`
+* `PieChart`
+
+Example:
+
+```tsx
+import { BarChart } from "@materialui-reactjs/admin/echarts";
+
+export default function DashboardChart() {
+  return <BarChart />;
+}
+```
+
+### Loader
+
+The `loader` package provides loading indicators.
+
+* `SpinnerLoader`
+
+Example:
+
+```tsx
+import { SpinnerLoader } from "@materialui-reactjs/admin/loader";
+
+export default function Loading() {
+  return <SpinnerLoader />;
+}
+```
+
+## Hooks
+
+The `hook` package provides reusable helpers for common admin data workflows.
+
+Available helpers include:
+
+* `fetchHookData`
+* `handleHookClickPage`
+* `handleHookSeachForm`
+* `handleHookChange`
+* `convertQueryToSort`
+* `convertSortToQuery`
+
+These helpers can be used to standardize:
+
+* API data loading
+* Pagination
+* Search
+* Sorting
+* Form changes
+* List/detail/update workflows
+
+Example:
+
+```ts
+import {
+  fetchHookData,
+  handleHookClickPage,
+  handleHookChange,
+} from "@materialui-reactjs/admin/hook";
+```
+
+## Utilities
+
+The `utils` package provides common utilities for admin applications.
+
+Available utilities include:
+
+* `callFetchApi`
+* `callFetchApiToken`
+* `createQueryString`
+* `loadEnv`
+* `getEnv`
+* `CusRoute`
+
+Example:
+
+```ts
+import {
+  callFetchApi,
+  callFetchApiToken,
+  createQueryString,
+} from "@materialui-reactjs/admin/utils";
+```
+
+## Installation
+
+Install the package using npm:
+
+```bash
+npm install @materialui-reactjs/admin
+```
+
+Or using yarn:
+
+```bash
+yarn add @materialui-reactjs/admin
+```
+
+Or using pnpm:
+
+```bash
+pnpm add @materialui-reactjs/admin
+```
+
+## Basic Usage
+
+Components can be imported directly from their corresponding subpath.
+
+```tsx
+import { Sidebar } from "@materialui-reactjs/admin/sidebar";
+import { TopNavbar } from "@materialui-reactjs/admin/top-navbar";
+import { CardTable } from "@materialui-reactjs/admin/meta";
+import { CusForm } from "@materialui-reactjs/admin/form";
+
+export default function AdminLayout() {
+  return (
+    <>
+      <TopNavbar />
+      <Sidebar />
+      <CardTable />
+      <CusForm />
+    </>
+  );
+}
+```
+
+## Import by Feature Group
+
+### Form
+
+```tsx
+import {
+  CusForm,
+  DateInput,
+  DateTimeInput,
+  SelectBox,
+} from "@materialui-reactjs/admin/form";
+```
+
+### Meta
+
+```tsx
+import {
+  CardTable,
+  Pagination,
+  SearchBox,
+  ModalForm,
+} from "@materialui-reactjs/admin/meta";
+```
+
+### Sidebar
+
+```tsx
+import { Sidebar } from "@materialui-reactjs/admin/sidebar";
+```
+
+### Top Navbar
+
+```tsx
+import { TopNavbar } from "@materialui-reactjs/admin/top-navbar";
+```
+
+### ECharts
+
+```tsx
+import {
+  BarChart,
+  LineChart,
+  PieChart,
+} from "@materialui-reactjs/admin/echarts";
+```
+
+### Loader
+
+```tsx
+import { SpinnerLoader } from "@materialui-reactjs/admin/loader";
+```
+
+### Utilities
+
+```tsx
+import {
+  callFetchApi,
+  callFetchApiToken,
+  loadEnv,
+  getEnv,
+} from "@materialui-reactjs/admin/utils";
+```
+
+## Styles and CSS
+
+The package provides CSS files for its components.
+
+Import the main stylesheet:
+
+```ts
+import "@materialui-reactjs/admin/style.css";
+```
+
+Some component groups may also import their own internal CSS automatically.
+
+Make sure your application's build configuration supports CSS imports from npm packages.
+
+## Dependencies
+
+This package is built with and integrates with the following libraries.
+
+### UI and Styling
+
+| Package               | Purpose                                       |
+| --------------------- | --------------------------------------------- |
+| `@mui/material`       | Material UI components and UI system          |
+| `@mui/x-date-pickers` | Date and time picker components for MUI       |
+| `@emotion/react`      | Emotion styling engine                        |
+| `@emotion/styled`     | Styled components powered by Emotion          |
+| `bootstrap`           | CSS framework and responsive layout utilities |
+
+### React and State Management
+
+| Package              | Purpose                         |
+| -------------------- | ------------------------------- |
+| `react`              | Core React library              |
+| `react-dom`          | React DOM rendering             |
+| `@reduxjs/toolkit`   | Redux state management          |
+| `react-redux`        | React bindings for Redux        |
+| `react-router-dom`   | Client-side routing             |
+| `react-helmet-async` | Managing document head metadata |
+
+### Form and Editor
+
+| Package                     | Purpose                            |
+| --------------------------- | ---------------------------------- |
+| `@ckeditor/ckeditor5-react` | CKEditor React integration         |
+| `react-select`              | Select and multi-select components |
+| `date-fns`                  | Date manipulation and formatting   |
+| `decimal.js`                | Precise decimal calculations       |
+
+### Drag and Drop / Sorting
+
+| Package              | Purpose                              |
+| -------------------- | ------------------------------------ |
+| `@dnd-kit/sortable`  | Sortable drag-and-drop functionality |
+| `@dnd-kit/utilities` | Utilities for dnd-kit                |
+| `@hello-pangea/dnd`  | Drag-and-drop components for React   |
+| `react-sortablejs`   | React integration for SortableJS     |
+| `sortablejs`         | Drag-and-drop sorting engine         |
+
+### Charts
+
+| Package             | Purpose                                |
+| ------------------- | -------------------------------------- |
+| `echarts`           | Charting and data visualization engine |
+| `echarts-for-react` | React wrapper for ECharts              |
+
+### Utilities and Notifications
+
+| Package                     | Purpose                                              |
+| --------------------------- | ---------------------------------------------------- |
+| `jquery`                    | DOM manipulation and third-party library integration |
+| `sweetalert2`               | Alerts, confirmations, and notifications             |
+| `sweetalert2-react-content` | React integration for SweetAlert2                    |
+
+## Requirements
+
+The package is designed for modern React applications.
+
+Current core versions include:
+
+* React `19.2.x`
+* React DOM `19.2.x`
+* React Router `7.x`
+* MUI `9.x`
+* MUI X Date Pickers `9.x`
+* Redux Toolkit `2.x`
+* Bootstrap `5.x`
+* ECharts `6.x`
+
+For the exact versions used by a particular release, check the package's `package.json`.
+
+## License
+
+MIT

package/dist/assets/css/SpinnerLoader.css

@@ -0,0 +1 @@
+.boxSpinner{z-index:10000;background-color:#fff;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;border-radius:.5rem!important}body>.boxSpinner{z-index:10000;height:100vh;position:fixed}.spinner{text-align:center;width:200px;height:100px}.spinner>div{background-color:var(--bs-primary);width:15px;height:100%;margin:0 1px;animation:1.2s ease-in-out infinite stretchDelay;display:inline-block}.spinner-sm .spinner{width:100px;height:50px}.spinner-sm .spinner>div{width:8px;height:100%}.spinner-xs .spinner{width:75px;height:37.5px}.spinner-xs .spinner>div{width:6px;height:100%}.spinner .rect2{animation-delay:-1.1s}.spinner .rect3{animation-delay:-1s}.spinner .rect4{animation-delay:-.9s}.spinner .rect5{animation-delay:-.8s}.spinner .rect6{animation-delay:-.7s}.spinner .rect7{animation-delay:-.6s}@-webkit-keyframes stretchDelay{0%,40%,to{-webkit-transform:scaleY(.4)}20%{-webkit-transform:scaleY(1)}}@keyframes stretchDelay{0%,40%,to{transform:scaleY(.4)}20%{transform:scaleY(1)}}