@dashadmin/dash-auto-admin 1.3.25 → 1.3.26

package/package.json

@@ -1,121 +1,136 @@
 {
-  "name": "@dashadmin/dash-auto-admin",
-  "version": "1.3.25",
-  "private": false,
-  "main": "dist/index.js",
-  "type": "module",
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "dependencies": {
-    "@emotion/styled": "latest",
-    "@mui/icons-material": "^7.3.10",
-    "@mui/material": "^7.3.10",
-    "@rollup/plugin-alias": "latest",
-    "@rollup/plugin-commonjs": "latest",
-    "@rollup/plugin-node-resolve": "latest",
-    "@rollup/plugin-replace": "latest",
-    "@rollup/plugin-typescript": "latest",
-    "axios": "latest",
-    "node-match-path": "latest",
-    "prop-types": "latest",
-    "react": "latest",
-    "react-admin": "5.14.7",
-    "react-hook-form": "^7.78.0",
-    "react-redux": "latest",
-    "react-router": "7.17.0",
-    "react-toastify": "latest",
-    "rollup-plugin-cleaner": "latest",
-    "rollup-plugin-dts": "latest",
-    "rollup-plugin-peer-deps-external": "latest",
-    "rollup-plugin-svg": "latest",
-    "@dashadmin/dash-dialog": "1.3.25",
-    "@dashadmin/dash-constants": "1.3.25"
-  },
-  "devDependencies": {
-    "@babel/core": "latest",
-    "@babel/preset-env": "latest",
-    "@babel/preset-react": "latest",
-    "@babel/preset-typescript": "latest",
-    "@commitlint/config-conventional": "latest",
-    "@types/node": "latest",
-    "@types/react": "latest",
-    "@types/react-dom": "latest",
-    "@zerollup/ts-transform-paths": "latest",
-    "babel-loader": "latest",
-    "eslint": "latest",
-    "eslint-config-airbnb": "latest",
-    "eslint-config-airbnb-typescript": "latest",
-    "eslint-config-prettier": "latest",
-    "eslint-import-resolver-typescript": "latest",
-    "eslint-plugin-html": "latest",
-    "eslint-plugin-import": "latest",
-    "eslint-plugin-jsdoc": "latest",
-    "eslint-plugin-json": "latest",
-    "eslint-plugin-jsx-a11y": "latest",
-    "eslint-plugin-prettier": "latest",
-    "eslint-plugin-react": "latest",
-    "eslint-plugin-react-hooks": "latest",
-    "react-dom": "latest",
-    "rollup": "latest",
-    "rollup-plugin-copy-assets": "latest",
-    "rollup-plugin-external-globals": "latest",
-    "rollup-plugin-includepaths": "latest",
-    "rollup-plugin-less": "latest",
-    "@rollup/plugin-node-resolve": "latest",
-    "rollup-plugin-postcss": "latest",
-    "rollup-plugin-sourcemaps": "latest",
-    "rollup-plugin-typescript2": "latest",
-    "tsc-alias": "latest",
-    "ttypescript": "latest",
-    "typescript": "latest",
-    "vite": "^5.2.0",
-    "@dashadmin/dash-eslint": "1.3.25",
-    "@dashadmin/dash-prettier": "1.3.25",
-    "@dashadmin/dash-tsconfig": "1.3.25"
-  },
-  "peerDependencies": {
-    "@hello-pangea/dnd": "latest",
-    "react-custom-scrollbars-2": "latest",
-    "react-dom": "latest"
-  },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
-  "todo_storybook": {
-    "eslint-plugin-storybook": "latest"
-  },
-  "publishConfig": {
-    "name": "@dashadmin/dash-auto-admin",
-    "access": "public"
-  },
-  "files": [
-    "dist"
-  ],
-  "exports": {
-    ".": {
-      "import": "./dist/index.js"
-    },
-    "./src/*": {
-      "import": "./dist/*.js"
-    }
-  },
-  "scripts": {
-    "lint": "eslint --ext .ts,.tsx .",
-    "format": "pnpm prettier --write . && pnpm format-check && pnpm lint",
-    "lint:check": "pnpm prettier --check .",
-    "lint:fix": "pnpm prettier --write .",
-    "check-updates": "pnpm npm-check-updates",
-    "updates-packages": "pnpm npm-check-updates -u",
-    "build": "rm -rf dist && node ../dash-build/compile.mjs && vite build"
-  }
-}
+	"name": "@dashadmin/dash-auto-admin",
+	"version": "1.3.26",
+	"main": "dist/index.js",
+	"type": "module",
+	"scripts": {
+		"lint": "eslint --ext .ts,.tsx .",
+		"format": "pnpm prettier --write . && pnpm format-check && pnpm lint",
+		"lint:check": "pnpm prettier --check .",
+		"lint:fix": "pnpm prettier --write .",
+		"check-updates": "pnpm npm-check-updates",
+		"updates-packages": "pnpm npm-check-updates -u",
+		"build": "tsup"
+	},
+	"browserslist": {
+		"production": [
+			">0.2%",
+			"not dead",
+			"not op_mini all"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
+	},
+	"dependencies": {
+		"@emotion/styled": "latest",
+		"@mui/icons-material": "^7.3.10",
+		"@mui/material": "^7.3.10",
+		"@rollup/plugin-alias": "latest",
+		"@rollup/plugin-commonjs": "latest",
+		"@rollup/plugin-node-resolve": "latest",
+		"@rollup/plugin-replace": "latest",
+		"@rollup/plugin-typescript": "latest",
+		"axios": "latest",
+		"node-match-path": "latest",
+		"prop-types": "latest",
+		"react": "latest",
+		"react-admin": "5.14.6",
+		"react-hook-form": "^7.54.0",
+		"react-redux": "latest",
+		"react-router": "^7.10.0",
+		"react-toastify": "latest",
+		"rollup-plugin-cleaner": "latest",
+		"rollup-plugin-dts": "latest",
+		"rollup-plugin-peer-deps-external": "latest",
+		"rollup-plugin-svg": "latest",
+		"@dashadmin/dash-constants": "workspace:*",
+		"@dashadmin/dash-dialog": "workspace:*"
+	},
+	"devDependencies": {
+		"@babel/core": "latest",
+		"@babel/preset-env": "latest",
+		"@babel/preset-react": "latest",
+		"@babel/preset-typescript": "latest",
+		"@commitlint/config-conventional": "latest",
+		"@types/node": "latest",
+		"@types/react": "latest",
+		"@types/react-dom": "latest",
+		"@zerollup/ts-transform-paths": "latest",
+		"babel-loader": "latest",
+		"eslint": "latest",
+		"eslint-config-airbnb": "latest",
+		"eslint-config-airbnb-typescript": "latest",
+		"eslint-config-prettier": "latest",
+		"eslint-import-resolver-typescript": "latest",
+		"eslint-plugin-html": "latest",
+		"eslint-plugin-import": "latest",
+		"eslint-plugin-jsdoc": "latest",
+		"eslint-plugin-json": "latest",
+		"eslint-plugin-jsx-a11y": "latest",
+		"eslint-plugin-prettier": "latest",
+		"eslint-plugin-react": "latest",
+		"eslint-plugin-react-hooks": "latest",
+		"react-dom": "latest",
+		"rollup": "latest",
+		"rollup-plugin-copy-assets": "latest",
+		"rollup-plugin-external-globals": "latest",
+		"rollup-plugin-includepaths": "latest",
+		"rollup-plugin-less": "latest",
+		"rollup-plugin-node-resolve": "latest",
+		"rollup-plugin-postcss": "latest",
+		"rollup-plugin-sourcemaps": "latest",
+		"rollup-plugin-typescript2": "latest",
+		"tsc": "latest",
+		"tsc-alias": "latest",
+		"ttypescript": "latest",
+		"typescript": "latest",
+		"@dashadmin/dash-tsconfig": "workspace:*",
+		"@dashadmin/dash-eslint": "workspace:*",
+		"@dashadmin/dash-prettier": "workspace:*"
+	},
+	"peerDependencies": {
+		"react-beautiful-dnd": "latest",
+		"react-custom-scrollbars-2": "latest",
+		"react-dom": "latest"
+	},
+	"eslintConfig": {
+		"extends": "react-app"
+	},
+	"todo_storybook": {
+		"eslint-plugin-storybook": "latest"
+	},
+	"module": "dist/index.js",
+	"types": "./src/index.ts",
+	"exports": {
+		".": "./dist/index.js",
+		"./providers": "./dist/providers/index.js",
+		"./src/providers": "./dist/providers/index.js",
+		"./wrappers": "./dist/wrappers/index.js",
+		"./src/wrappers": "./dist/wrappers/index.js",
+		"./*": "./dist/*.js",
+		"./src/*": "./dist/*.js"
+	},
+	"publishConfig": {
+		"access": "public",
+		"registry": "https://registry.npmjs.org"
+	},
+	"files": [
+		"dist",
+		"src"
+	],
+	"typesVersions": {
+		"*": {
+			"src/*": [
+				"src/*",
+				"src/*/index"
+			],
+			"*": [
+				"src/*",
+				"src/*/index"
+			]
+		}
+	}
+}

package/src/DashAutoAdminComponentRegistry.tsx

@@ -0,0 +1,75 @@
+import React, { createContext, useContext, ReactNode } from 'react';
+
+
+import IDashAutoAdminCustomFieldComponent from './interfaces/IDashAutoAdminCustomFieldComponent';
+
+// Default components that are always available
+const defaultComponentMap: Record<string, React.FC<IDashAutoAdminCustomFieldComponent>> = {
+
+};
+
+export interface ComponentRegistryContextType {
+  components: Record<string, React.FC<IDashAutoAdminCustomFieldComponent>>;
+  registerComponent: (type: string, component: React.FC<IDashAutoAdminCustomFieldComponent>) => void;
+  registerComponents: (componentMap: Record<string, React.FC<IDashAutoAdminCustomFieldComponent>>) => void;
+}
+
+const ComponentRegistryContext = createContext<ComponentRegistryContextType>({
+  components: defaultComponentMap,
+  registerComponent: () => {},
+  registerComponents: () => {},
+});
+
+export const useComponentRegistry = () => useContext(ComponentRegistryContext);
+
+export interface ComponentRegistryProviderProps {
+  children: ReactNode;
+  customComponents?: Record<string, React.FC<IDashAutoAdminCustomFieldComponent>>;
+}
+
+export const ComponentRegistryProvider: React.FC<ComponentRegistryProviderProps> = ({ 
+  children, 
+  customComponents = {} 
+}) => {
+  const [components, setComponents] = React.useState<Record<string, React.FC<IDashAutoAdminCustomFieldComponent>>>({
+    ...defaultComponentMap,
+    ...customComponents,
+  });
+
+  // Sync internal state when customComponents prop changes
+  // (e.g. after async component loading completes on remount)
+  React.useEffect(() => {
+    if (customComponents && Object.keys(customComponents).length > 0) {
+      setComponents(prev => ({
+        ...prev,
+        ...customComponents,
+      }));
+    }
+  }, [customComponents]);
+
+  const registerComponent = React.useCallback((type: string, component: React.FC<IDashAutoAdminCustomFieldComponent>) => {
+    setComponents(prev => ({
+      ...prev,
+      [type]: component
+    }));
+  }, []);
+
+  const registerComponents = React.useCallback((componentMap: Record<string, React.FC<IDashAutoAdminCustomFieldComponent>>) => {
+    setComponents(prev => ({
+      ...prev,
+      ...componentMap
+    }));
+  }, []);
+
+  return (
+    <ComponentRegistryContext.Provider 
+      value={{ 
+        components, 
+        registerComponent, 
+        registerComponents 
+      }}
+    >
+      {children}
+    </ComponentRegistryContext.Provider>
+  );
+};

package/src/DashAutoAdminForm.tsx

@@ -0,0 +1,155 @@
+import { Box } from '@mui/material';
+import { JSX } from 'react';
+import {
+	useResourceContext,
+	useRecordContext,
+	Toolbar,
+	SimpleForm,
+} from 'react-admin';
+
+import IDashAutoAdminResourceConfig from './interfaces/IDashAutoAdminResourceConfig';
+
+import React from 'react';
+import validate from './utils/validate';
+import { ToolbarCreateButton, ToolbarDeleteButton, ToolbarSaveButton } from './toolbar/buttons/ToolbarButtons';
+import { useDataProvider } from 'react-admin';
+import { DashAutoAdminFormProvider } from './context/DashAutoAdminFormContext';
+
+export interface IDashAutoAdminForm {
+	resourceConfig: IDashAutoAdminResourceConfig;
+	//schema: IDashAutoAdminAttribute[];
+	toolbar?: React.ReactElement<any>;
+	onSubmit?: (values: any) => any;
+	onError?: (error: any) => any;
+	onCancel?: (error: any) => any;
+	beforeSubmit?: (values: any) => any;
+	mode: 'create' | 'edit';
+	children?: JSX.Element;
+	isDrawer?: boolean;
+	locale?: string;
+}
+
+//only to consume externally:
+const DashAutoAdminForm: React.FC<IDashAutoAdminForm> = ({
+	resourceConfig,
+	onSubmit,
+	beforeSubmit,
+	onError,
+	//onCancel,
+	toolbar,
+	mode,
+	children,
+}) => {
+	const resource = useResourceContext();
+	const record = useRecordContext();
+    const dataProvider = useDataProvider();
+    const debug = false;
+
+	const onCreateSave = 
+		async (values) => {
+			if (debug) console.log('onCreateSave called with values:', values);
+			window.dispatchEvent(
+				new MessageEvent('dash-global-loader', { data: true }),
+			);
+			try {
+				if (beforeSubmit) {
+					if (debug) console.log('beforeSubmit called with values:', values);
+					values = beforeSubmit(values);
+					if (debug) console.log('beforeSubmit returned values:', values);
+				}
+
+                const { data } = await dataProvider.create(resource, { 
+                    data: values 
+                });
+				if (debug) console.log('dataProvider.create returned data:', data);
+
+				if (onSubmit) {
+					if (debug) console.log('onSubmit called with data:', data);
+					onSubmit(data);
+				}
+			} catch (error) {
+				if (onError) {
+					if (debug) console.log('onError called with error:', error);
+					onError(error);
+				}
+			} finally {
+				window.dispatchEvent(
+					new MessageEvent('dash-global-loader', { data: false }),
+				);
+			}
+		};
+
+	const onUpdateSave = 
+		async (values) => {
+			if (debug) console.log('onUpdateSave called with values:', values);
+			window.dispatchEvent(
+				new MessageEvent('dash-global-loader', { data: true }),
+			);
+
+			try {
+				if (beforeSubmit) {
+					if (debug) console.log('beforeSubmit called with values:', values);
+					values = beforeSubmit(values);
+					if (debug) console.log('beforeSubmit returned values:', values);
+				}
+
+                const { data } = await dataProvider.update(resource, { 
+                    id: record?.id,
+                    data: values,
+                    previousData: record
+                });
+				if (debug) console.log('dataProvider.update returned data:', data);
+
+				if (onSubmit) {
+					if (debug) console.log('onSubmit called with data:', data);
+					onSubmit(data);
+				}
+			} catch (error) {
+				if (onError) {
+					if (debug) console.log('onError called with error:', error);
+					onError(error);
+				}
+			} finally {
+				window.dispatchEvent(
+					new MessageEvent('dash-global-loader', { data: false }),
+				);
+			}
+		};
+
+	let onSave = onCreateSave;
+
+	switch (mode) {
+		case 'edit':
+			onSave = onUpdateSave;
+			break;
+		case 'create':
+            
+			onSave = onCreateSave;
+			break;
+	}
+
+	const defaultToolbar = () => (
+		<Toolbar>
+			{mode === 'edit' && <ToolbarSaveButton resourceConfig={resourceConfig} />}
+			{mode === 'create' && <ToolbarCreateButton resourceConfig={resourceConfig} />}
+			<ToolbarDeleteButton resourceConfig={resourceConfig} />
+		</Toolbar>
+	);
+
+	return (
+		<DashAutoAdminFormProvider value={{ onSave, mode }}>
+			<Box>
+				<SimpleForm
+					toolbar={toolbar || defaultToolbar()}
+					onSubmit={onSave}
+					validate={validate(resourceConfig.schema)}
+					reValidateMode="onBlur"
+				>
+					{children}
+				</SimpleForm>
+			</Box>
+		</DashAutoAdminFormProvider>
+	);
+};
+
+export default DashAutoAdminForm;

package/src/DashAutoAdminResizableDrawer.tsx

@@ -0,0 +1,69 @@
+import { Drawer, DrawerProps } from '@mui/material';
+import React from 'react';
+
+export interface IResizableDrawer extends DrawerProps {
+	defaultWidth: number;
+}
+
+export const DashAutoAdminResizableDrawerContext = React.createContext(400);
+
+/* TODO: W.I.P Resizable Drawer is a Work in Progress */
+export const DashAutoAdminResizableDrawer: React.FC<IResizableDrawer> = ({
+	children,
+	defaultWidth,
+	...props
+}) => {
+	//const classes = useStyles();
+	// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+	const [drawerWidth, setDrawerWidth] = React.useState(defaultWidth);
+
+	/*
+
+	const handleMouseMove = useCallback((e) => {
+		console.log('Mouse move');
+		//const newWidth = e.clientX - (window.innerWidth - document.body.offsetLeft - document.body.offsetWidth  );
+		//const newWidth = e.clientX + (window.innerWidth - document.body.offsetLeft - document.body.offsetWidth  );
+		const newWidth = window.innerWidth - e.clientX;
+		//if (newWidth > minDrawerWidth && newWidth < maxDrawerWidth) {
+		setDrawerWidth(newWidth);
+		//}
+		if (e.stopPropagation) e.stopPropagation();
+		if (e.preventDefault) e.preventDefault();
+		e.cancelBubble = true;
+		e.returnValue = false;
+	}, []);
+
+	const handleMouseUp = () => {
+		console.log('Mouse up');
+		document.removeEventListener('mouseup', handleMouseUp, true);
+		document.removeEventListener('mousemove', handleMouseMove, true);
+	};
+	
+	const handleMouseDown = (e) => {
+		console.log('Mouse down');
+		document.addEventListener('mouseup', handleMouseUp, true);
+		document.addEventListener('mousemove', handleMouseMove, true);
+	};
+ 	*/
+
+	const Dragger = () => {
+		// TODO:
+		// 	<div onMouseDown={(e) => handleMouseDown(e) }  />
+		return <></>;
+	};
+
+	return (
+		<Drawer
+			/*className={classes.drawer}*/
+			PaperProps={{ style: { width: drawerWidth } }}
+			//sx={{ zIndex: 100, width: drawerWidth }}
+			{...props}
+		>
+			<DashAutoAdminResizableDrawerContext.Provider value={drawerWidth}>
+				<Dragger />
+
+				{children}
+			</DashAutoAdminResizableDrawerContext.Provider>
+		</Drawer>
+	);
+};