@dashadmin/dash-auto-admin 1.3.24 → 1.3.26

package/src/TabbedLayout.tsx

@@ -0,0 +1,29 @@
+import { TabbedShowLayout } from 'react-admin';
+import IDashAutoAdminAttribute from './interfaces/IDashAutoAdminAttribute';
+import { IDashAutoAdminReference } from './interfaces/IDashAutoAdminReference';
+import AutoReferenceTab from './DashAutoReferenceTab';
+import AutoTabs from './DashAutoTabs';
+import IDashAutoAdminResourceConfig from './interfaces/IDashAutoAdminResourceConfig';
+
+export interface ITabbedLayout {
+	resourceConfig: IDashAutoAdminResourceConfig;
+	schema: IDashAutoAdminAttribute[];
+	references?: IDashAutoAdminReference[];
+}
+
+const TabbedLayout: React.FC<ITabbedLayout> = ({
+	resourceConfig,
+	schema,
+	references,
+	..._props
+}) => {
+	//   console.log("references",references);
+	return (
+		<TabbedShowLayout >
+			{AutoTabs(resourceConfig)}
+			{references && references.map((reference) => AutoReferenceTab(reference))}
+		</TabbedShowLayout>
+	);
+};
+
+export default TabbedLayout;

package/src/common/DashAutoTitle.tsx

@@ -0,0 +1,24 @@
+import { useTranslate } from 'react-admin';
+import IDashAutoAdminResourceConfig from '../interfaces/IDashAutoAdminResourceConfig';
+
+export interface IAutoTitle {
+	record?: any;
+	resourceConfig: IDashAutoAdminResourceConfig;
+}
+
+const DashAutoTitle: React.FC<IAutoTitle> = ({
+	resourceConfig,
+	record,
+	..._props
+}) => {
+	const translate = useTranslate();
+	const translatedLabel = translate(resourceConfig.label, { _: resourceConfig.label });
+
+	return (
+		<span>
+			{record ? `${translate('dash.action.edit')} "${record[resourceConfig.schema[0].attribute]}"` : translatedLabel}
+		</span>
+	);
+};
+
+export default DashAutoTitle;

package/src/common/components/FabButton.tsx

@@ -0,0 +1,40 @@
+import { FC, JSX, cloneElement } from 'react';
+import Settings from '@mui/icons-material/Settings';
+import { Fab, FabProps, Tooltip } from '@mui/material';
+
+export interface IFabButton extends FabProps {
+	onClick: (_e: any) => any;
+	tooltip: React.ReactNode;
+	icon?: JSX.Element;
+}
+
+export const FabButton: FC<IFabButton> = (props) => {
+	const { icon, onClick, tooltip, children, ...rest } = props;
+
+	const _icon = icon ? (
+		cloneElement(props.icon, { sx: { fontSize: 16 }, fontSize: 'small' })
+	) : (
+		<Settings sx={{ fontSize: 16 }} fontSize={'small'} />
+	);
+	return (
+		<Tooltip title={tooltip}>
+			<Fab
+				size='small'
+				aria-label='settings'
+				color='primary'
+				onClick={onClick}
+				style={{
+					position: 'absolute',
+				}}
+				className={'toolbar-settings-button'}
+                
+				{...rest}
+			>
+                
+				{_icon}
+			</Fab>
+		</Tooltip>
+	);
+};
+
+export default FabButton;

package/src/common/components/TranslatedLabel.tsx

@@ -0,0 +1,81 @@
+/**
+ * TranslatedLabel Component
+ * 
+ * A component that automatically translates labels using react-admin's i18n system.
+ * Useful for rendering translated labels in legends, titles, and other places
+ * where raw text is displayed.
+ */
+
+import React from 'react';
+import { useTranslate } from 'react-admin';
+import { isTranslationKey } from '../../hooks/useAutoAdminTranslate';
+
+export interface TranslatedLabelProps {
+    /** The label to translate (can be a translation key or plain text) */
+    label: string | undefined;
+    /** Optional fallback if translation is not found */
+    fallback?: string;
+    /** Optional className for styling */
+    className?: string;
+    /** Optional component to wrap the text (default: span) */
+    component?: React.ElementType;
+    /** Optional props to pass to the wrapper component */
+    componentProps?: Record<string, any>;
+}
+
+/**
+ * Component that renders a translated label
+ * If the label looks like a translation key (contains dots), it will be translated
+ * Otherwise, it renders the label as-is
+ */
+export const TranslatedLabel: React.FC<TranslatedLabelProps> = ({
+    label,
+    fallback = '',
+    className,
+    component: Component = 'span',
+    componentProps = {},
+}) => {
+    const translate = useTranslate();
+
+    if (!label) {
+        return fallback ? <Component className={className} {...componentProps}>{fallback}</Component> : null;
+    }
+
+    let displayText = label;
+
+    if (isTranslationKey(label)) {
+        const translated = translate(label, { _: label });
+        // If translation returns the key itself and we have a fallback, use it
+        if (translated === label && fallback) {
+            displayText = fallback;
+        } else {
+            displayText = translated;
+        }
+    }
+
+    return (
+        <Component className={className} {...componentProps}>
+            {displayText}
+        </Component>
+    );
+};
+
+/**
+ * Higher-order component that provides translation to a component
+ */
+export const withTranslatedLabel = <P extends { label?: string }>(
+    WrappedComponent: React.ComponentType<P>
+): React.FC<P> => {
+    return (props: P) => {
+        const translate = useTranslate();
+        
+        let translatedLabel = props.label;
+        if (props.label && isTranslationKey(props.label)) {
+            translatedLabel = translate(props.label, { _: props.label });
+        }
+
+        return <WrappedComponent {...props} label={translatedLabel} />;
+    };
+};
+
+export default TranslatedLabel;

package/src/common/settings/Settings.tsx

@@ -0,0 +1,236 @@
+import {
+	Dialog,
+	DialogContent,
+	Drawer,
+	Fade,
+	Popover,
+	Tooltip,
+} from '@mui/material';
+
+import React, { FC, memo } from 'react';
+import { GearBadge, AlertBadge, ErrorBadge } from './SettingsBarIcons';
+
+export interface ISettings {
+	/** Type. */
+	type?: 'drawer' | 'dialog' | 'tooltip';
+	/** Memoization data to compare. */
+	data?: any;
+	/** Warning. */
+	warning?: { active: boolean; message: string };
+	/** Error. */
+	error?: { active: boolean; message: string };
+	/** Optional ClassName. */
+	className?: string;
+	/** Optional GearIcon. */
+	gearIcon?: JSX.Element;
+	/** Children Required. */
+	children: React.ReactNode;
+}
+
+const SettingsTooltip: FC<ISettings> = ({
+	type,
+	className,
+	children,
+	warning,
+	error,
+	gearIcon,
+	..._props
+}) => {
+	if (!warning) warning = { active: false, message: '' };
+	if (!error) error = { active: false, message: '' };
+
+	const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+	const open = Boolean(anchorEl);
+
+	const openSettings = (event: React.MouseEvent<HTMLElement>) => {
+		setAnchorEl(event.currentTarget);
+	};
+
+	const closeSettings = () => {
+		setAnchorEl(null);
+	};
+
+	return (
+		<div {...(className && { className })}>
+			<div className='settings-widget-actions'>
+				{error.active && (
+					<div className='settings-widget-action'>
+						<ErrorBadge onClick={() => {}}>
+							<></>
+						</ErrorBadge>
+					</div>
+				)}
+				{warning.active && (
+					<Tooltip title={warning.message}>
+						<div className='settings-widget-action'>
+							<AlertBadge onClick={() => {}}>
+								<></>
+							</AlertBadge>
+						</div>
+					</Tooltip>
+				)}
+				<div className='settings-widget-action'>
+					<GearBadge icon={gearIcon} onClick={openSettings}>
+						<></>
+					</GearBadge>
+				</div>
+			</div>
+
+			<Popover
+				anchorOrigin={{
+					vertical: 'bottom',
+					horizontal: 'right',
+				}}
+				transformOrigin={{
+					vertical: 'top',
+					horizontal: 'left',
+				}}
+				id='fade-menu'
+				anchorEl={anchorEl}
+				open={open}
+				onClose={closeSettings}
+				TransitionComponent={Fade}
+			>
+				<div style={{ padding: 8 }}>{children}</div>
+			</Popover>
+		</div>
+	);
+};
+
+const SettingsDialog: FC<ISettings> = ({
+	type,
+	className,
+	children,
+	warning,
+	error,
+	..._props
+}) => {
+	if (!warning) warning = { active: false, message: '' };
+	if (!error) error = { active: false, message: '' };
+
+	const [open, setOpen] = React.useState(false);
+
+	const openSettings = (_event: React.MouseEvent<HTMLElement>) => {
+		setOpen(true);
+	};
+
+	const closeSettings = () => {
+		setOpen(false);
+	};
+
+	return (
+		<div>
+			<div className='settings-widget-actions'>
+				{error.active && (
+					<div className='settings-widget-action'>
+						<ErrorBadge onClick={() => {}}>
+							<></>
+						</ErrorBadge>
+					</div>
+				)}
+				{warning.active && (
+					<Tooltip title={warning.message}>
+						<div className='settings-widget-action'>
+							<AlertBadge onClick={() => {}}>
+								<></>
+							</AlertBadge>
+						</div>
+					</Tooltip>
+				)}
+				<div className='settings-widget-action'>
+					<GearBadge onClick={openSettings}>
+						<></>
+					</GearBadge>
+				</div>
+			</div>
+
+			<Dialog open={open} onClose={closeSettings}>
+				{/* @ts-ignore Expected mismatch ReactNode. */}
+				<DialogContent>{children}</DialogContent>
+			</Dialog>
+		</div>
+	);
+};
+
+const SettingsDrawer: FC<ISettings> = ({
+	type,
+	className,
+	children,
+	warning,
+	error,
+	..._props
+}) => {
+	if (!warning) warning = { active: false, message: '' };
+	if (!error) error = { active: false, message: '' };
+
+	const [open, setOpen] = React.useState(false);
+
+	const openSettings = (_event: React.MouseEvent<HTMLElement>) => {
+		setOpen(true);
+	};
+
+	const closeSettings = () => {
+		setOpen(false);
+	};
+
+	return (
+		<div>
+			<div className='settings-widget-actions'>
+				{error.active && (
+					<div className='settings-widget-action'>
+						<ErrorBadge onClick={() => {}}>
+							<></>
+						</ErrorBadge>
+					</div>
+				)}
+				{warning.active && (
+					<Tooltip title={warning.message}>
+						<div className='settings-widget-action'>
+							<AlertBadge onClick={() => {}}>
+								<></>
+							</AlertBadge>
+						</div>
+					</Tooltip>
+				)}
+				<div className='settings-widget-action'>
+					<GearBadge onClick={openSettings}>
+						<></>
+					</GearBadge>
+				</div>
+			</div>
+
+			<Drawer
+				open={open}
+				onClose={closeSettings}
+				anchor={'right'}
+				PaperProps={{
+					sx: { width: '20%' },
+				}}
+			>
+				{/* @ts-ignore Expected mismatch ReactNode. */}
+				{children}
+			</Drawer>	
+		</div>
+	);
+};
+
+const propsAreEqual = (oldProps, newProps) => {
+	return oldProps.data === newProps.data;
+};
+
+
+const Settings: FC<ISettings> = ({ type = 'dialog', ...props }) => {
+	switch (type) {
+		case 'tooltip':
+			return <SettingsTooltip type={type} {...props} />;
+		case 'drawer':
+			return <SettingsDrawer type={type} {...props} />;
+		case 'dialog':
+		default:
+			return <SettingsDialog type={type} {...props} />;
+	}
+};
+
+const MemoizedSettings = memo(Settings, propsAreEqual);
+
+export default MemoizedSettings;

package/src/common/settings/SettingsBarIcons.tsx

@@ -0,0 +1,72 @@
+import Badge, { BadgeProps } from '@mui/material/Badge';
+import styled from '@emotion/styled';
+import {Settings, Error, Warning }from '@mui/icons-material';
+
+import { FC, JSX, cloneElement } from 'react';
+import { Fab } from '@mui/material';
+
+const StyledBadge = styled(Badge)<BadgeProps>(({ theme: _theme }) => ({
+	'& .MuiBadge-badge': {
+		padding: 0,
+	},
+}));
+
+export interface ISettingsBadge {
+	onClick: (e: any) => any;
+	icon?: JSX.Element;
+	children: React.ReactNode;
+}
+
+export const GearBadge: FC<ISettingsBadge> = (props) => {
+	const icon = props.icon ? (
+		cloneElement(props.icon, { sx: { fontSize: 16 }, fontSize: 'small' })
+	) : (
+		<Settings sx={{ fontSize: 16 }} fontSize={'small'} />
+	);
+
+	return (
+		<Fab
+			size='small'
+			aria-label='settings'
+			color='primary'
+			onClick={props.onClick}
+			style={{
+				position: 'absolute',
+			}}
+			className={'toolbar-settings-button'}
+		>
+			{icon}
+		</Fab>
+	);
+};
+
+export const AlertBadge: FC<ISettingsBadge> = (props) => {
+	return (
+		<StyledBadge
+			onClick={props.onClick}
+			badgeContent={
+				<Warning
+					sx={{ fontSize: 16, color: 'orange' }}
+					fontSize={'small'}
+				/>
+			}
+			color='default'
+		>
+			{props.children}
+		</StyledBadge>
+	);
+};
+
+export const ErrorBadge: FC<ISettingsBadge> = (props) => {
+	return (
+		<StyledBadge
+			onClick={props.onClick}
+			badgeContent={
+				<Error sx={{ fontSize: 16, color: 'red' }} fontSize={'small'} />
+			}
+			color='default'
+		>
+			{props.children}
+		</StyledBadge>
+	);
+};

package/src/context/DashAutoAdminFormContext.tsx

@@ -0,0 +1,31 @@
+import React, { createContext, useContext } from 'react';
+
+export interface IDashAutoAdminFormContext {
+    /**
+     * The save handler that wraps form submission with validation.
+     * This is exposed so child components (like SaveButton) can trigger it manually.
+     */
+    onSave?: (values: any) => Promise<void> | void;
+    /**
+     * The current form mode
+     */
+    mode: 'create' | 'edit';
+}
+
+const DashAutoAdminFormContext = createContext<IDashAutoAdminFormContext>({
+    mode: 'create',
+});
+
+export const DashAutoAdminFormProvider = DashAutoAdminFormContext.Provider;
+
+/**
+ * Hook to access the DashAutoAdminForm context.
+ * This is useful for child components that need to trigger form submission manually,
+ * such as when using SaveButton with type="button".
+ */
+export const useDashAutoAdminForm = () => {
+    const context = useContext(DashAutoAdminFormContext);
+    return context;
+};
+
+export default DashAutoAdminFormContext;

package/src/hooks/useAutoAdminLoadingStateMediator.tsx

@@ -0,0 +1,42 @@
+import React, { useEffect, useState } from 'react';
+
+const useAutoAdminLoadingStateMediator = (origin?: string) => {
+	const useAutoAdminLoadingState = useState<boolean>(false);
+
+	const localState = useState<MessageEvent>(null);
+
+	useEffect(() => {
+		if (!localState[0]) return;
+
+		if (origin && localState[0]?.origin) {
+		
+			if ( 	/* @ts-ignore : An expression of type 'void' cannot be tested for truthiness.ts(1345).  */
+				localState[0].origin === origin &&
+				useAutoAdminLoadingState[1](localState[0].data)
+			) {
+				 // eslint-disable-line no-debugger
+				return;
+			}
+		}
+
+		useAutoAdminLoadingState[1](localState[0]?.data);
+
+		return;
+	}, [localState[0]]);
+
+	React.useEffect(() => {
+		window.addEventListener('auto-admin-loading-state', (e: any) =>
+			localState[1](e),
+		);
+
+		return () => {
+			window.removeEventListener('auto-admin-loading-state', (e: any) =>
+				localState[1](e),
+			);
+		};
+	}, []);
+
+	return useAutoAdminLoadingState;
+};
+
+export default useAutoAdminLoadingStateMediator;

package/src/hooks/useAutoAdminTranslate.tsx

@@ -0,0 +1,106 @@
+/**
+ * useAutoAdminTranslate Hook
+ * 
+ * Provides translation functionality for dash-auto-admin components.
+ * Uses react-admin's useTranslate hook internally.
+ * 
+ * This hook handles:
+ * - Translating labels that are translation keys
+ * - Fallback to original label if no translation found
+ * - Checking if a string looks like a translation key (contains dots)
+ */
+
+import { useTranslate } from 'react-admin';
+import { useCallback, useMemo } from 'react';
+
+/**
+ * Check if a string looks like a translation key (contains dots like 'tab.resource.tabs')
+ */
+export const isTranslationKey = (value: string): boolean => {
+    if (!value || typeof value !== 'string') return false;
+    // Translation keys typically contain dots and are lowercase/snake_case
+    // Examples: 'tab.resource.tabs', 'common.save', 'resources.users.name'
+    return /^[a-z][a-z0-9_.]*[a-z0-9]$/i.test(value) && value.includes('.');
+};
+
+/**
+ * Hook that provides translation utilities for dash-auto-admin
+ */
+export const useAutoAdminTranslate = () => {
+    const translate = useTranslate();
+
+    /**
+     * Translate a label if it's a translation key, otherwise return as-is
+     */
+    const translateLabel = useCallback((label: string | undefined, fallback?: string): string => {
+        if (!label) return fallback || '';
+        
+        if (isTranslationKey(label)) {
+            const translated = translate(label, { _: label });
+            // If translation returns the same key, it means no translation was found
+            // In that case, check if we should return the label or a fallback
+            if (translated === label && fallback) {
+                return fallback;
+            }
+            return translated;
+        }
+        
+        return label;
+    }, [translate]);
+
+    /**
+     * Translate a value only if it looks like a translation key
+     */
+    const translateIfKey = useCallback((value: string | undefined): string => {
+        if (!value) return '';
+        if (isTranslationKey(value)) {
+            return translate(value, { _: value });
+        }
+        return value;
+    }, [translate]);
+
+    /**
+     * Translate with parameters
+     */
+    const translateWithParams = useCallback((key: string, params?: Record<string, any>): string => {
+        return translate(key, params);
+    }, [translate]);
+
+    /**
+     * Check if a translation exists for a key
+     */
+    const hasTranslation = useCallback((key: string): boolean => {
+        if (!isTranslationKey(key)) return false;
+        const translated = translate(key, { _: key });
+        return translated !== key;
+    }, [translate]);
+
+    return useMemo(() => ({
+        translate,
+        translateLabel,
+        translateIfKey,
+        translateWithParams,
+        hasTranslation,
+        isTranslationKey,
+    }), [translate, translateLabel, translateIfKey, translateWithParams, hasTranslation]);
+};
+
+/**
+ * Standalone translation function for use outside of React components
+ * Uses the translate function from React Admin context if available
+ */
+export const translateLabelSync = (label: string | undefined, translate: (key: string, options?: any) => string, fallback?: string): string => {
+    if (!label) return fallback || '';
+    
+    if (isTranslationKey(label)) {
+        const translated = translate(label, { _: label });
+        if (translated === label && fallback) {
+            return fallback;
+        }
+        return translated;
+    }
+    
+    return label;
+};
+
+export default useAutoAdminTranslate;

package/src/hooks/useHash.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+const useHash = () => {
+	const [hash, setHash] = React.useState(() => window.location.hash);
+
+	const hashChangeHandler = React.useCallback(() => {
+		setHash(window.location.hash);
+	}, []);
+
+	React.useEffect(() => {
+		window.addEventListener('hashchange', hashChangeHandler);
+		return () => {
+			window.removeEventListener('hashchange', hashChangeHandler);
+		};
+	}, []);
+
+	const updateHash = React.useCallback(
+		(newHash) => {
+			if (newHash !== hash) window.location.hash = newHash;
+		},
+		[hash],
+	);
+
+	return [hash, updateHash];
+};
+
+export default useHash;