master-data-management-react 0.0.1 → 0.1.3

package/README.md

@@ -1,127 +1,191 @@
-# Master Data Management React Package
 
-A flexible React package for managing master data with dynamic forms, tables, and multi-column sorting.
+# master-data-management-react
 
-## Features
+A reusable **React library** for managing master data using **metadata-driven forms and tables**.  
+It automatically generates grids and forms while letting you fully control **APIs, routing, and authentication**.
 
-- 🔄 **Dynamic Entity Management** - Auto-generated forms and grids from metadata
-- 🎯 **Flexible Filtering** - Text, number, date, dropdown, and date-range filters
-- ✅ **Full CRUD** - Create, read, update with auto-generated forms
-- 📊 **Advanced Grid** - AG Grid with pagination, multi-column sorting, export (CSV/Excel)
-- 🎨 **Material-UI** - Built with MUI components and theming
+---
 
-## Installation
+## ✨ Features
+
+- 📊 **Server-side data grid**
+  - Pagination
+  - Filters
+  - Multi-column sorting
+- 📝 **Auto-generated forms**
+  - Create / View / Edit
+- 🔄 **Full CRUD support**
+- 📤 **CSV & Excel export**
+- 🎯 **Metadata-driven UI** (no hardcoded fields)
+- 🎨 **Material-UI based components**
+- 🧩 **Works with any backend and routing setup**
+
+---
+
+## 📦 Installation
 
 ```bash
 npm install master-data-management-react
-```
+````
+
+---
+
+## 📚 Peer Dependencies
 
-**Peer Dependencies:**
 ```bash
-npm install react react-dom react-router-dom @mui/material @emotion/react @emotion/styled ag-grid-react ag-grid-community
+npm install react react-dom react-router-dom axios \
+@mui/material @emotion/react @emotion/styled \
+ag-grid-react ag-grid-community
 ```
 
-## Quick Start
-
-```tsx
-import { MasterDataProvider, AppRoutes } from 'master-data-management-react';
-import 'master-data-management-react/styles';
-import axios from 'axios';
+---
 
-const apiClient = axios.create({ baseURL: 'http://localhost:3000/api' });
+## 🚀 Quick Start
 
-function App() {
+```tsx
+import { MasterView } from "master-data-management-react";
+import axios from "axios";
+
+const apiClient = axios.create({
+  baseURL: "https://api.example.com",
+});
+
+const apiEndpoints = {
+  entities: "/master/entities",
+  metadata: (entity) => `/master/${entity}/metadata`,
+  records: (entity) => `/master/${entity}/records`,
+  recordById: (entity, id) => `/master/${entity}/records/${id}`,
+  exportCSV: (entity) => `/master/${entity}/export/csv`,
+  exportExcel: (entity) => `/master/${entity}/export/excel`,
+};
+
+export default function App() {
   return (
-    <MasterDataProvider apiClient={apiClient}>
-      <AppRoutes />
-    </MasterDataProvider>
+    <MasterView
+      apiClient={apiClient}
+      apiEndpoints={apiEndpoints}
+    />
   );
 }
 ```
 
-## Configuration
+---
 
-### Custom Endpoints
+## 📝 Forms (Create / View / Edit)
 
 ```tsx
-<MasterDataProvider
+import { MasterForm } from "master-data-management-react";
+import { FORM_MODES } from "master-data-management-react/constants";
+
+<MasterForm
   apiClient={apiClient}
-  apiEndpoints={{
-    entities: '/custom/entities',
-    metadata: (entity) => `/custom/${entity}/meta`,
-    records: (entity) => `/custom/${entity}/data`,
-  }}
-/>
+  apiEndpoints={apiEndpoints}
+  entity="country"
+  id="10"
+  mode={FORM_MODES.EDIT}
+  onBack={() => navigate("/master")}
+  onSuccess={() => navigate("/master")}
+/>;
 ```
 
-### Custom Routes
+---
+
+## 🧭 Routing (Example)
+
+This package **does not enforce routing**.
+You define routes however your application prefers.
 
 ```tsx
-<MasterDataProvider
-  routes={{ basePath: '/admin/master' }}
-/>
+<Route path="master" element={<MasterView />} />
+<Route path="master/:entity/new" element={<MasterForm />} />
+<Route path="master/:entity/:id" element={<MasterForm />} />
+<Route path="master/:entity/:id/edit" element={<MasterForm />} />
 ```
 
-## API Requirements
-
-Your backend must implement these endpoints:
+---
 
-| Endpoint | Method | Description |
-|----------|--------|-------------|
-| `/master/entities` | GET | List all entities |
-| `/master/:entity/metadata` | GET | Entity metadata (fields, form config) |
-| `/master/:entity/records` | GET | Records with filters/sort/pagination |
-| `/master/:entity/records/:id` | GET | Single record |
-| `/master/:entity/records` | POST | Create record |
-| `/master/:entity/records/:id` | PUT | Update record |
-| `/master/:entity/export/csv` | GET | Export to CSV |
-| `/master/:entity/export/excel` | GET | Export to Excel |
+## 🎨 Styling
 
-### Multi-Column Sorting
+Import styles **once** in your app entry file:
 
-Supports comma-separated sorting:
-```
-GET /master/country/records?sortBy=countryName,isoCode&sortOrder=ASC,DESC
+```ts
+import "master-data-management-react/dist/style.css";
+import "ag-grid-community/styles/ag-grid.css";
+import "ag-grid-community/styles/ag-theme-alpine.css";
 ```
 
-## Metadata Format
+---
+
+## 🔗 Backend API Contract
+
+Your backend must expose the following endpoints:
+
+| Endpoint                       | Method |
+| ------------------------------ | ------ |
+| `/master/entities`             | GET    |
+| `/master/:entity/metadata`     | GET    |
+| `/master/:entity/records`      | GET    |
+| `/master/:entity/records/:id`  | GET    |
+| `/master/:entity/records`      | POST   |
+| `/master/:entity/records/:id`  | PUT    |
+| `/master/:entity/export/csv`   | GET    |
+| `/master/:entity/export/excel` | GET    |
+
+---
+
+## 🧩 Metadata Example
 
 ```json
 {
   "parameterList": [
-    { "name": "countryName", "label": "Country", "dataType": "string", "options": null },
-    { "name": "regionId", "label": "Region", "dataType": "string", "options": [...] }
+    { "name": "countryName", "label": "Country", "dataType": "string" }
   ],
   "resultsList": [
-    { "name": "countryName", "label": "Country Name", "dataType": "string" },
-    { "name": "isoCode", "label": "ISO Code", "dataType": "string" }
+    { "name": "countryName", "label": "Country Name" }
   ],
   "formConfig": {
     "Country Name": {
       "fieldName": "countryName",
-      "dataType": "string",
       "fieldType": "input",
-      "validation": { "max": 100 }
+      "validation": { "required": true }
     }
   }
 }
 ```
 
-## Routes
+---
 
-- `/master` - Grid view with filters
-- `/master/:entity/new` - Create form
-- `/master/:entity/:id` - View form
-- `/master/:entity/:id/edit` - Edit form
+## ⚙️ Customization
 
-## Development
+You can customize:
 
-```bash
-npm run dev        # Start dev server
-npm run build:lib  # Build package
-```
+* ✅ API URLs
+* ✅ Axios instance (auth, interceptors, refresh tokens)
+* ✅ Routing & navigation
+* ✅ Permissions / guards
+* ✅ Styling & MUI theme
+* ✅ Backend metadata behavior
+
+---
+
+## ❌ What This Package Does NOT Do
+
+* ❌ Force routing
+* ❌ Handle authentication
+* ❌ Assume backend structure
+
+---
+
+## 🧠 How It Works (Simple)
+
+1. Backend sends metadata
+2. Grid & forms render automatically
+3. CRUD, sorting, filtering handled internally
+4. You control navigation and APIs
+5. If wanted auto routes then use backend package master-data-management (npm i master-data-management) works for nestjs typeorm
 
-## License
+---
 
-MIT
+## 📄 License
 
+**MIT License**

package/dist/components/ServerSideGrid/styles.d.ts

@@ -1,13 +1,25 @@
-export declare const Wrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const Wrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const GridContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Loader: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const PaginationContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const Loader: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const PaginationContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const StyledSelect: import("@emotion/styled").StyledComponent<import("@mui/material").SelectProps<unknown> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 interface StyledAgGridWrapperProps {
     height?: number;
 }
-export declare const StyledAgGridWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & StyledAgGridWrapperProps, {}, {}>;
-export declare const ServerSideGridStyledFormControl: import("@emotion/styled").StyledComponent<import("@mui/material").FormControlOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children" | "style" | "color" | "margin" | "sx" | "className" | "classes" | "disabled" | "error" | "fullWidth" | "required" | "size" | "hiddenLabel" | "focused" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const StyledBox: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StyledAgGridWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & StyledAgGridWrapperProps, {}, {}>;
+export declare const ServerSideGridStyledFormControl: import("@emotion/styled").StyledComponent<import("@mui/material").FormControlOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "style" | "className" | "color" | "children" | "margin" | "sx" | "classes" | "disabled" | "error" | "fullWidth" | "required" | "size" | "hiddenLabel" | "focused" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StyledBox: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export {};
 //# sourceMappingURL=styles.d.ts.map

package/dist/components/ServerSideGrid/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/ServerSideGrid/styles.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,OAAO,mXAGjB,CAAC;AAEJ,eAAO,MAAM,aAAa,6NAuCvB,CAAC;AAEJ,eAAO,MAAM,MAAM,mXAQhB,CAAC;AAEJ,eAAO,MAAM,mBAAmB,mXAe7B,CAAC;AAEJ,eAAO,MAAM,YAAY,6KAgBtB,CAAC;AAEJ,UAAU,wBAAwB;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,mBAAmB,8YAoC/B,CAAC;AAEF,eAAO,MAAM,+BAA+B,ggBAW3C,CAAC;AAEF,eAAO,MAAM,SAAS,mXAMnB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/ServerSideGrid/styles.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,OAAO;;+JAGjB,CAAC;AAEJ,eAAO,MAAM,aAAa,6NAuCvB,CAAC;AAEJ,eAAO,MAAM,MAAM;;+JAQhB,CAAC;AAEJ,eAAO,MAAM,mBAAmB;;+JAe7B,CAAC;AAEJ,eAAO,MAAM,YAAY,6KAgBtB,CAAC;AAEJ,UAAU,wBAAwB;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,mBAAmB;;0LAoC/B,CAAC;AAEF,eAAO,MAAM,+BAA+B;;sQAW3C,CAAC;AAEF,eAAO,MAAM,SAAS;;+JAMnB,CAAC"}

package/dist/hooks/useApiService.d.ts

@@ -1,8 +1,26 @@
 /**
  * API Service Hook
- * Provides default API implementations using context config
- * Can be fully overridden via apiService in config
+ * Provides API operations with configurable axios instance and endpoints
  */
-import type { ApiServiceFunctions } from '../contexts/MasterDataContext';
-export declare const useApiService: () => Required<ApiServiceFunctions>;
+import type { AxiosInstance } from 'axios';
+export interface ApiEndpoints {
+    entities: string;
+    metadata: (entity: string) => string;
+    records: (entity: string) => string;
+    recordById: (entity: string, id: string | number) => string;
+    exportCSV: (entity: string) => string;
+    exportExcel: (entity: string) => string;
+}
+export interface ApiService {
+    getEntities: () => Promise<any>;
+    getMetadata: (entity: string) => Promise<any>;
+    getRecords: (entity: string, params?: any) => Promise<any>;
+    getRecord: (entity: string, id: string | number) => Promise<any>;
+    createRecord: (entity: string, data: any) => Promise<any>;
+    updateRecord: (entity: string, id: string | number, data: any) => Promise<any>;
+    deleteRecord: (entity: string, id: string | number) => Promise<any>;
+    exportCSV: (entity: string, params?: any) => Promise<any>;
+    exportExcel: (entity: string, params?: any) => Promise<any>;
+}
+export declare const createApiService: (apiClient: AxiosInstance, endpoints: ApiEndpoints) => ApiService;
 //# sourceMappingURL=useApiService.d.ts.map

package/dist/hooks/useApiService.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useApiService.d.ts","sourceRoot":"","sources":["../../src/hooks/useApiService.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAEzE,eAAO,MAAM,aAAa,QAAO,QAAQ,CAAC,mBAAmB,CAgB5D,CAAC"}
+{"version":3,"file":"useApiService.d.ts","sourceRoot":"","sources":["../../src/hooks/useApiService.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,MAAM,CAAC;IAC5D,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;CACzC;AAED,MAAM,WAAW,UAAU;IACzB,WAAW,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC;IAChC,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IAC9C,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IAC3D,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IACjE,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IAC1D,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IAC/E,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IACpE,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IAC1D,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;CAC7D;AAED,eAAO,MAAM,gBAAgB,GAC3B,WAAW,aAAa,EACxB,WAAW,YAAY,KACtB,UAoEF,CAAC"}