@dashadmin/dash-app-common 1.3.25 → 1.3.28

package/src/defaults/extensions/bootstrap/dashDefaultInitializeApp.ts

@@ -0,0 +1,81 @@
+/**
+ * Default App Initialization
+ * 
+ * Default bootstrap utilities that wrap the core dash-utils bootstrap.
+ * Add app-specific initialization logic here.
+ */
+import { 
+    dashInitializeApp, 
+    dashBootstrapApp,
+    type DashInitializeAppConfig 
+} from 'dash-utils';
+import { injectTenantStyles } from 'dash-admin/src/utils/injectTenantStyles';
+
+// Re-export the config type for convenience
+export type DashDefaultInitializeAppConfig = DashInitializeAppConfig & {
+    /** Default theme for tenant styles injection */
+    defaultTheme?: string;
+};
+
+/**
+ * Dash Default Initialize the application
+ * Wraps dashInitializeApp from dash-utils and adds app-specific initialization.
+ * 
+ * @param config - Optional configuration for initialization steps
+ * 
+ * @example
+ * ```tsx
+ * // With default settings
+ * await dashDefaultInitializeApp();
+ * 
+ * // With default configuration
+ * await dashDefaultInitializeApp({
+ *     defaultTheme: 'dark',
+ *     requestNotifications: false
+ * });
+ * ```
+ */
+export const dashDefaultInitializeApp = async (config: DashDefaultInitializeAppConfig = {}): Promise<void> => {
+    const { defaultTheme, ...restConfig } = config;
+    
+    // Run the core dash bootstrap
+    await dashInitializeApp(restConfig);
+    
+    // Inject tenant styles if theme provided
+    if (defaultTheme) {
+        injectTenantStyles(defaultTheme);
+    }
+    
+    // Add any default app-specific initialization here
+    // Example: Initialize analytics, default logging, etc.
+};
+
+/**
+ * Dash Default synchronous bootstrap sequence for immediate execution
+ * Wraps dashBootstrapApp from dash-utils and adds app-specific bootstrap logic.
+ * 
+ * @param defaultTheme - Optional default theme for tenant styles
+ * 
+ * @example
+ * ```tsx
+ * // In main.tsx before React renders
+ * dashDefaultBootstrapApp('dark');
+ * 
+ * // Then render React
+ * root.render(<App />);
+ * ```
+ */
+export const dashDefaultBootstrapApp = (defaultTheme?: string): void => {
+    // Run the core dash bootstrap
+    dashBootstrapApp();
+    
+    // Inject tenant styles if theme provided
+    if (defaultTheme) {
+        injectTenantStyles(defaultTheme);
+    }
+    
+    // Add any default app-specific bootstrap here
+    // Example: Initialize default services, set up listeners, etc.
+};
+
+export default dashDefaultInitializeApp;

package/src/defaults/extensions/bootstrap/index.ts

@@ -0,0 +1,32 @@
+/**
+ * Default Bootstrap Extensions Index
+ * 
+ * Exports all bootstrap-related utilities for app initialization.
+ */
+
+// Default Initialization utilities
+export { 
+    dashDefaultInitializeApp, 
+    dashDefaultBootstrapApp,
+    type DashDefaultInitializeAppConfig 
+} from './dashDefaultInitializeApp';
+
+// Default UI Components
+export { 
+    DashDefaultLoader,
+    type DashDefaultLoaderProps 
+} from '../components/DashDefaultLoader';
+
+export { 
+    DashDefaultErrorBoundary,
+    type DashDefaultErrorBoundaryProps,
+    type DashDefaultErrorBoundaryState 
+} from './DashDefaultErrorBoundary';
+
+// Re-export lazy app loader from dash-utils for convenience
+export { 
+    createLazyAppComponent,
+    createSimpleLazyApp,
+    DefaultLoadFailedComponent,
+    type LazyAppLoaderConfig 
+} from 'dash-utils';

package/src/defaults/extensions/components/DashDefaultLoader.tsx

@@ -0,0 +1,59 @@
+/**
+ * Default Initial Loader Component
+ * 
+ * Displayed during app lazy loading while the main application bundle is being fetched.
+ */
+import React from 'react';
+
+export interface DashDefaultLoaderProps {
+    /** Custom loading message */
+    message?: string;
+    /** Custom background color (CSS variable or color value) */
+    background?: string;
+    /** Custom text color (CSS variable or color value) */
+    textColor?: string;
+}
+
+/**
+ * Dash Default loader component shown during app lazy loading
+ */
+export const DashDefaultLoader: React.FC<DashDefaultLoaderProps> = ({
+    message = 'Loading...',
+    background = 'linear-gradient(to bottom, var(--bodybg-primary), var(--bodybg-secondary))',
+    textColor = 'var(--text-color, @text-color--dark)'
+}) => (
+   <div
+        style={{
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            minHeight: '100vh',
+            gap: '16px',
+            background,
+            color: textColor
+        }}
+    >
+        <div
+            style={{
+                width: '60px',
+                height: '60px',
+                border: '4px solid rgba(255, 255, 255, 0.3)',
+                borderTop: '4px solid #ffffff',
+                borderRadius: '50%',
+                animation: 'spin 1s linear infinite'
+            }}
+        />
+        <div style={{ fontSize: '16px' }}>
+            {message}
+        </div>
+        <style>{`
+            @keyframes spin {
+                0% { transform: rotate(0deg); }
+                100% { transform: rotate(360deg); }
+            }
+        `}</style>
+    </div>
+);
+
+export default DashDefaultLoader;

package/src/defaults/extensions/components/dashDefaultAutoAdminComponents.tsx

@@ -0,0 +1,49 @@
+/**
+ * Dash Default Auto Admin Components Extension
+ * 
+ * Default components that can be dynamically rendered in auto-admin forms.
+ * These are registered with the DashAutoAdmin system and can be referenced
+ * by name in resource schemas.
+ */
+import React from 'react';
+import { IDashAutoAdminCustomFieldComponent } from 'dash-auto-admin';
+
+/**
+ * Dash default auto admin components
+ * Use this for components that are already imported
+ */
+export const dashDefaultAutoAdminComponents: Record<string, React.FC<IDashAutoAdminCustomFieldComponent>> = {
+    // Add default components here
+};
+
+/**
+ * Load dash default auto admin components asynchronously
+ * This function is used by DASHLazyAdminApp to register default components
+ */
+export const loadDashDefaultAutoAdminComponents = async (): Promise<Record<string, React.ComponentType<any>>> => {
+    try {
+        const [
+            JsonComp,
+            JsonColorSelectorComp,
+            JsonCssVarValuesComp
+        ] = await Promise.all([
+            import('dash-components').then(module => ({ default: module.Json })),
+            import('dash-components').then(module => ({ default: module.JsonColorSelectorEnhanced })),
+            import('dash-components').then(module => ({ default: module.JsonCssVarValues }))
+        ]);
+
+        return {
+            // Dash components
+            Json: JsonComp.default,
+            JsonColorSelector: JsonColorSelectorComp.default,
+            JsonCssVarValues: JsonCssVarValuesComp.default,
+            // App-specific components
+            ...dashDefaultAutoAdminComponents,
+        };
+    } catch (error) {
+        console.error('Failed to load dash default auto admin components:', error);
+        return dashDefaultAutoAdminComponents;
+    }
+};
+
+export default loadDashDefaultAutoAdminComponents;

package/src/defaults/extensions/components/dashDefaultNotification.tsx

@@ -0,0 +1,37 @@
+/**
+ * Dash Default Notification Extension
+ * 
+ * Default React-Admin notification component configuration.
+ */
+import React from 'react';
+import { Notification } from 'react-admin';
+
+/**
+ * Dash Default React-Admin Notification component
+ * Configured for top-right positioning with 8 second auto-hide
+ */
+export const DashDefaultReactAdminNotification = (): React.JSX.Element => {
+    return (
+        <Notification
+            className="dash-notification"
+            autoHideDuration={8000}
+            multiLine={true}
+            anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+        />
+    );
+};
+
+/**
+ * Dash default notification configuration options
+ */
+export const dashDefaultNotificationConfig = {
+    autoHideDuration: 8000,
+    multiLine: true,
+    anchorOrigin: { 
+        vertical: 'top' as const, 
+        horizontal: 'right' as const 
+    },
+    className: 'dash-notification',
+};
+
+export default DashDefaultReactAdminNotification;

package/src/defaults/extensions/components/dashDefaultStaticComponents.tsx

@@ -0,0 +1,34 @@
+/**
+ * Dash Default Static Components Extension
+ * 
+ * Static/memoized components used throughout the application.
+ */
+import React from 'react';
+
+// Lazy load password pages from dash-admin
+const RecoverPassword = React.lazy(() => import('dash-admin/src/pages/RecoverPassword'));
+const ChangePassword = React.lazy(() => import('dash-admin/src/pages/ChangePassword'));
+
+/**
+ * Dash default static components configuration
+ * These are pre-rendered components that don't need to be recreated
+ */
+export const dashDefaultStaticComponents = {
+    defaultRecoverPassword: (
+        <React.Suspense fallback={<div>Loading...</div>}>
+            <RecoverPassword />
+        </React.Suspense>
+    ),
+    defaultChangePassword: (
+        <React.Suspense fallback={<div>Loading...</div>}>
+            <ChangePassword />
+        </React.Suspense>
+    ),
+};
+
+/**
+ * Get dash default static components - useful for memoization
+ */
+export const getDashDefaultStaticComponents = () => dashDefaultStaticComponents;
+
+export default dashDefaultStaticComponents;

package/src/defaults/extensions/components/index.ts

@@ -0,0 +1,17 @@
+/**
+ * Components Extensions Index
+ * 
+ * Component-related extensions and configurations.
+ */
+
+// Default Auto Admin Components
+export { loadDashDefaultAutoAdminComponents, dashDefaultAutoAdminComponents } from './dashDefaultAutoAdminComponents';
+
+// Default Static Components
+export { dashDefaultStaticComponents, getDashDefaultStaticComponents } from './dashDefaultStaticComponents';
+
+// Default Notification
+export { DashDefaultReactAdminNotification, dashDefaultNotificationConfig } from './dashDefaultNotification';
+
+// Default Loading Components
+export { DashDefaultLoader, type DashDefaultLoaderProps } from './DashDefaultLoader';

package/src/defaults/extensions/electron/dashDefaultIpcListeners.ts

@@ -0,0 +1,62 @@
+/**
+ * Dash Default IPC Listeners Extension
+ * 
+ * Electron IPC listener setup and configuration.
+ */
+import { useEffect } from 'react';
+import { getDashIPCService, onIPCStdout } from 'dash-utils';
+
+/**
+ * Hook to set up dash default IPC listeners
+ * Listens for Electron IPC events when running in Electron
+ */
+export const useDashDefaultIPCListeners = (options?: {
+    onStdout?: (data: any) => void;
+    enableLogging?: boolean;
+}) => {
+    const { onStdout, enableLogging = true } = options || {};
+
+    useEffect(() => {
+        const ipcService = getDashIPCService();
+        if (ipcService) {
+            // Listen for all stdout events
+            onIPCStdout((data) => {
+                if (enableLogging) {
+                    console.log('[DashDefault IPC Stdout]:', data);
+                }
+                onStdout?.(data);
+            });
+        }
+
+        return () => {
+            // Clean up listeners if needed
+        };
+    }, [onStdout, enableLogging]);
+};
+
+/**
+ * Set up dash default IPC listeners imperatively (non-hook version)
+ */
+export const setupDashDefaultIPCListeners = (options?: {
+    onStdout?: (data: any) => void;
+    enableLogging?: boolean;
+}): (() => void) => {
+    const { onStdout, enableLogging = true } = options || {};
+    
+    const ipcService = getDashIPCService();
+    if (ipcService) {
+        onIPCStdout((data) => {
+            if (enableLogging) {
+                console.log('[DashDefault IPC Stdout]:', data);
+            }
+            onStdout?.(data);
+        });
+    }
+
+    // Return cleanup function
+    return () => {
+        // Cleanup if needed
+    };
+};
+
+export default useDashDefaultIPCListeners;

package/src/defaults/extensions/electron/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Electron Extensions Index
+ * 
+ * Electron-specific configurations and hooks.
+ */
+
+export { useDashDefaultIPCListeners, setupDashDefaultIPCListeners } from './dashDefaultIpcListeners';

package/src/defaults/extensions/hooks/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Hooks Extensions Index
+ * 
+ * Default React hooks for the application.
+ */
+
+export { useDashDefaultMountTracker } from './useDashDefaultMountTracker';
+export { useDashDefaultRoutePath } from './useDashDefaultRoutePath';
+export { useDashDefaultLazyI18nProvider } from './useDashDefaultLazyI18nProvider';
+export { useDashDefaultLazyAutoAdminComponents } from './useDashDefaultLazyAutoAdminComponents';
+export { useDashDefaultLazyResources } from './useDashDefaultLazyResources';

package/src/defaults/extensions/hooks/useDashDefaultLazyAutoAdminComponents.ts

@@ -0,0 +1,25 @@
+/**
+ * useDashDefaultLazyAutoAdminComponents Hook
+ * 
+ * Hook to load dash default auto admin components asynchronously
+ */
+import { useState, useEffect } from 'react';
+import loadDashDefaultAutoAdminComponents from '../components/dashDefaultAutoAdminComponents';
+
+
+export const useDashDefaultLazyAutoAdminComponents = () => {
+    const [components, setComponents] = useState<Record<string, React.ComponentType<any>> | null>(null);
+
+    useEffect(() => {
+        loadDashDefaultAutoAdminComponents()
+            .then(setComponents)
+            .catch((error) => {
+                console.error('Failed to load dash default auto admin components:', error);
+                setComponents({});
+            });
+    }, []);
+
+    return components;
+};
+
+export default useDashDefaultLazyAutoAdminComponents;

package/src/defaults/extensions/hooks/useDashDefaultLazyI18nProvider.ts

@@ -0,0 +1,38 @@
+/**
+ * useDashDefaultLazyI18nProvider Hook
+ * 
+ * Hook to load i18n provider asynchronously
+ */
+import { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { loadDashDefaultTranslationsAsync, createDashDefaultI18nProviderAsync } from '../i18n/dashDefaultI18nProvider';
+import { fromPairs } from 'lodash';
+
+export const useDashDefaultLazyI18nProvider = () => {
+    const [translations, setTranslations] = useState<any>(null);
+    const [i18nProvider, setI18nProvider] = useState<any>(null);
+    const settings = useSelector((state: any) => state.settings);
+
+    useEffect(() => {
+        const load = async () => {
+            try {
+                const translationsData = await loadDashDefaultTranslationsAsync();
+                setTranslations(translationsData);
+
+                const provider = await createDashDefaultI18nProviderAsync(
+                    settings?.locale || 'en',
+                    settings?.availableLocales?.map(({ locale, name }: { locale: string; name: string }) => ({ locale, name }))
+                );
+                setI18nProvider(provider);
+            } catch (error) {
+                console.error('Failed to load translations:', error);
+            }
+        };
+
+        load();
+    }, [settings?.locale, settings?.availableLocales]);
+
+    return { translations, i18nProvider };
+};
+
+export default useDashDefaultLazyI18nProvider;

package/src/defaults/extensions/hooks/useDashDefaultLazyResources.ts

@@ -0,0 +1,29 @@
+/**
+ * useDashDefaultLazyResources Hook
+ * 
+ * Hook to lazy load resources
+ */
+import { useState, useEffect } from 'react';
+import { IDashAutoAdminResourceConfig } from 'dash-auto-admin';
+import { getDASHResources } from 'dash-admin';
+
+export const useDashDefaultLazyResources = (customResources: IDashAutoAdminResourceConfig[] | null) => {
+    const [loadedResources, setLoadedResources] = useState<IDashAutoAdminResourceConfig[] | null>(null);
+
+    useEffect(() => {
+        // Only load default resources if no custom resources are provided
+        if (!customResources) {
+            getDASHResources()
+                .then(setLoadedResources)
+                .catch((error) => {
+                    console.error('Failed to load DASHResources:', error);
+                    setLoadedResources([]);
+                });
+        }
+    }, [customResources]);
+
+    // Return custom resources if provided, otherwise loaded resources
+    return customResources || loadedResources;
+};
+
+export default useDashDefaultLazyResources;

package/src/defaults/extensions/hooks/useDashDefaultMountTracker.ts

@@ -0,0 +1,28 @@
+/**
+ * useDashDefaultMountTracker Hook
+ * 
+ * Hook to track mount count for workaround with re-render issues
+ */
+import { useState, useEffect } from 'react';
+import { dashStorage } from 'dash-utils';
+
+export const useDashDefaultMountTracker = (expectedMounts: number | null) => {
+    const [fullyLoaded, setFullyLoaded] = useState<boolean>(false);
+
+    useEffect(() => {
+        const currentValue = parseInt(dashStorage.getItem("tmp"), 10) || 0;
+        dashStorage.setItem("tmp", String(currentValue + 1));
+    }, []);
+
+    useEffect(() => {
+        if (!expectedMounts) {
+            setFullyLoaded(true);
+        } else if (parseInt(dashStorage.getItem("tmp"), 10) >= expectedMounts) {
+            setFullyLoaded(true);
+        }
+    }, [expectedMounts]);
+
+    return fullyLoaded;
+};
+
+export default useDashDefaultMountTracker;

package/src/defaults/extensions/hooks/useDashDefaultRoutePath.ts

@@ -0,0 +1,27 @@
+/**
+ * useDashDefaultRoutePath Hook
+ * 
+ * Hook to calculate and track route path
+ * 
+ * @deprecated The currentAppPath storage logic has been removed to fix path duplication issues.
+ * This hook now only returns the route path without storing it.
+ */
+import { useState, useEffect } from 'react';
+import { DASHAdminSystemConstants } from 'dash-constants';
+
+export const useDashDefaultRoutePath = (appPath: string | null, commonAppPath?: string) => {
+    const [routePath, setRoutePath] = useState<string>('');
+
+    useEffect(() => {
+        const path = appPath || (commonAppPath || DASHAdminSystemConstants.system.URL_PREFIX);
+        const cleanPath = path.replace(/\/\*$/, '');
+        // @deprecated - removed currentAppPath storage that caused path duplication
+        // dashStorage.setItem('currentAppPath', cleanPath);
+        console.log('ROUTE-BASE-PATH:', cleanPath);
+        setRoutePath(path);
+    }, [appPath, commonAppPath]);
+
+    return routePath;
+};
+
+export default useDashDefaultRoutePath;

package/src/defaults/extensions/i18n/dashDefaultI18nProvider.ts

@@ -0,0 +1,66 @@
+/**
+ * Dash Default i18n Provider Extension
+ * 
+ * Internationalization provider configuration with memoization support.
+ */
+import { useMemo } from 'react';
+import polyglotI18nProvider from 'ra-i18n-polyglot';
+import { dashDefaultTranslations, dashDefaultAvailableLocales, dashDefaultLocale } from './dashDefaultTranslations';
+
+// Re-export dash default translations
+export { dashDefaultTranslations, dashDefaultAvailableLocales, dashDefaultLocale } from './dashDefaultTranslations';
+export { loadDashDefaultTranslationsAsync, createDashDefaultI18nProviderAsync } from './dashDefaultTranslations';
+/**
+ * Create dash default i18n provider with settings state
+ */
+export const createDashDefaultI18nProviderWithSettings = (settings: {
+    locale?: string;
+    availableLocales?: Array<{ locale: string; name: string }>;
+}) => {
+    const locale = settings.locale || dashDefaultLocale;
+    const locales = settings.availableLocales || dashDefaultAvailableLocales;
+    
+    return polyglotI18nProvider(
+        (loc) => dashDefaultTranslations[loc as keyof typeof dashDefaultTranslations] || dashDefaultTranslations.en,
+        locale,
+        locales
+    );
+};
+
+/**
+ * Hook to create memoized dash default i18n provider
+ * Prevents recreation on every render
+ */
+export const useDashDefaultI18nProvider = (settings?: {
+    locale?: string;
+    availableLocales?: Array<{ locale: string; name: string }>;
+}) => {
+    return useMemo(() => {
+        const locale = settings?.locale || dashDefaultLocale;
+        const locales = settings?.availableLocales || dashDefaultAvailableLocales;
+        
+        return polyglotI18nProvider(
+            (loc) => dashDefaultTranslations[loc as keyof typeof dashDefaultTranslations] || dashDefaultTranslations.en,
+            locale,
+            locales.map(({ locale, name }) => ({ locale, name }))
+        );
+    }, [settings?.locale, settings?.availableLocales]);
+};
+
+/**
+ * Create dash default i18n provider from INITIAL_APP_STATE settings
+ */
+export const createDashDefaultI18nProviderFromAppState = (appState: {
+    settings: {
+        locale: string;
+        availableLocales: Array<{ locale: string; name: string }>;
+    };
+}) => {
+    return polyglotI18nProvider(
+        (loc) => dashDefaultTranslations[loc as keyof typeof dashDefaultTranslations] || dashDefaultTranslations.en,
+        appState.settings.locale,
+        appState.settings.availableLocales.map(({ locale, name }) => ({ locale, name }))
+    );
+};
+
+export default useDashDefaultI18nProvider;