@dashadmin/dash-admin 1.3.73 → 1.3.74-srcfree.2

package/src/default-theme/DashThemeContext.tsx

@@ -1,209 +0,0 @@
-import React, { createContext, useContext, useState, useEffect } from 'react';
-import { appTheme, getAntTheme } from 'dash-styles';
-import { AuthPersistenceService } from 'dash-auth';
-import { useSelector } from 'react-redux';
-import { IDASHAppState } from 'dash-admin-state';
-import { updateDomCssVariables } from 'dash-utils';
-import CssBaseline from '@mui/material/CssBaseline';
-import ConfigProvider from 'antd/es/config-provider';
-
-
-import {
-    Theme,
-    createTheme,
-    ThemeProvider
-} from '@mui/material';
-
-interface DashThemeContextType {
-    theme: Theme;
-    themeOptions: ReturnType<typeof appTheme>;
-    recreateTheme: (tenantSettings?: any) => void;
-    currentMode: string;
-}
-
-
-
-const DashThemeContext = createContext<DashThemeContextType | null>(null);
-
-// Defensive patch for MUI v9: createThemeWithVars can produce a theme where
-// breakpoints.internal_mediaKeys is missing. Ensure it is always set so that
-// responsive `sx` props (e.g. `padding: { xs: 2, sm: 3 }`) do not crash.
-function patchThemeBreakpoints(theme: Theme): Theme {
-    const bp = (theme as any).breakpoints;
-    if (bp && !bp.internal_mediaKeys && bp.keys && bp.up) {
-        bp.internal_mediaKeys = bp.keys.map((key: string) => bp.up(key));
-    }
-    return theme;
-}
-
-export const useDashThemeContext = () => {
-    const context = useContext(DashThemeContext);
-    if (!context) {
-        throw new Error('useDashThemeContext must be used within a DashThemeProvider');
-    }
-    return context;
-};
-
-interface DashThemeProviderProps {
-    children?: React.ReactNode;
-    extendedOptions?: any;
-}
-
-export const DashThemeProvider: React.FC<DashThemeProviderProps> = ({ extendedOptions, children }) => {
-    // Track current theme mode from data-theme attribute
-    const [currentMode, setCurrentMode] = useState<string>(() => {
-        return document.documentElement.getAttribute('data-theme') || 'dark';
-    });
-
-    const [themeOptions, setThemeOptions] = useState<ReturnType<typeof appTheme>>(() => {
-        // Read persisted tenant settings on initialization to include tenant colors
-        // in the initial theme, avoiding a flash of default colors.
-        const initialTenantSettings = AuthPersistenceService.getTenantSettings();
-        return appTheme(extendedOptions, {
-            currentMode,
-            colors: initialTenantSettings?.colors,
-            tenantSettings: initialTenantSettings,
-        });
-    });
-
-    const [theme, setTheme] = useState<Theme>(() => {
-        const initialTenantSettings = AuthPersistenceService.getTenantSettings();
-        /* @ts-ignore */
-        return patchThemeBreakpoints(createTheme(appTheme(extendedOptions, {
-            currentMode,
-            colors: initialTenantSettings?.colors,
-            tenantSettings: initialTenantSettings,
-        })));
-    });
-
-
-    const [antTheme, setAntTheme] = useState<any>(() => {
-        const initialTenantSettings = AuthPersistenceService.getTenantSettings();
-
-        return getAntTheme({
-            currentMode,
-            colors: initialTenantSettings?.colors,
-            tenantSettings: initialTenantSettings,
-        });
-    });
-
-    const getTenantSettings = () => {
-        const persistedTenantSettings = AuthPersistenceService.getTenantSettings();
-        return persistedTenantSettings || null;
-    };
-
-    const recreateTheme = (tenantSettings?: any, mode?: string) => {
-        const settings = tenantSettings || getTenantSettings();
-        //const themeMode = mode || currentMode;
-        const themeMode = mode || document.documentElement.getAttribute('data-theme') || 'dark';
-
-        const newThemeOptions = appTheme(
-            extendedOptions,
-            {
-                tenantSettings: settings,
-                colors: settings?.colors,
-                currentMode: themeMode,
-            }
-        );
-        /* @ts-ignore */
-        const newTheme = patchThemeBreakpoints(createTheme(newThemeOptions));
-
-        setThemeOptions(newThemeOptions);
-        setTheme(newTheme);
-
-
-        setAntTheme(getAntTheme({
-                tenantSettings: settings,
-                colors: settings?.colors,
-                currentMode: themeMode,
-            }));
-
-            updateDomCssVariables(themeMode, settings?.colors, settings?.values);
-        /*if (settings?.colors || settings?.values) {
-            updateDomCssVariables(themeMode, settings?.colors, settings?.values);
-        }*/
-    };
-
-    // Observer for data-theme attribute changes
-    useEffect(() => {
-        const observer = new MutationObserver((mutations) => {
-            mutations.forEach((mutation) => {
-                if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
-                    const newMode = document.documentElement.getAttribute('data-theme') || 'dark';
-                    if (newMode !== currentMode) {
-                        setCurrentMode(newMode);
-                        const settings = getTenantSettings();
-                        updateDomCssVariables(newMode, settings?.colors, settings?.values);
-                    }
-                }
-            });
-        });
-
-        // Start observing
-        observer.observe(document.documentElement, {
-            attributes: true,
-            attributeFilter: ['data-theme']
-        });
-
-        // Cleanup observer on unmount
-        return () => observer.disconnect();
-    }, [currentMode]);
-
-    // React to mode changes
-    useEffect(() => {
-        const tenantSettings = getTenantSettings();
-        recreateTheme(tenantSettings, currentMode);
-    }, [currentMode]);
-
-    // Initial setup
-    useEffect(() => {
-        const tenantSettings = getTenantSettings();
-        if (tenantSettings) {
-            recreateTheme(tenantSettings, currentMode);
-        }
-    }, []);
-
-    // Listen for DASHTRefreshTheme CustomEvent to trigger theme recreation
-    useEffect(() => {
-        const handler = (event: Event) => {
-            if (event.type === 'DASHTRefreshTheme') {
-                const tenantSettings = getTenantSettings();
-                recreateTheme(tenantSettings, currentMode);
-            }
-        };
-        window.addEventListener('DASHTRefreshTheme', handler);
-        return () => window.removeEventListener('DASHTRefreshTheme', handler);
-    }, []);
-
-    const contextValue: DashThemeContextType = {
-        theme,
-        themeOptions,
-        recreateTheme,
-        currentMode,
-       
-    };
-    
-    return (
-        <ThemeProvider noSsr disableTransitionOnChange theme={theme}>
-            <CssBaseline />
-            <DashThemeContext.Provider value={contextValue}>
-
-
-                <ConfigProvider
-                    theme={antTheme}
-                >
-
-                    {children}
-
-                </ConfigProvider>
-
-
-
-
-
-            </DashThemeContext.Provider>
-        </ThemeProvider>
-    );
-};
-
-export default DashThemeContext;

package/src/default-theme/DashThemeContext.tsx.fast

@@ -1,143 +0,0 @@
-import React, { createContext, useContext, useState, useEffect } from 'react';
-//import {  createTheme } from '@mui/material/styles';
-import { appTheme } from 'dash-styles';
-import { useColorScheme } from '@mui/material/styles';
-import { AuthPersistenceService } from 'dash-auth';
-import { useSelector } from 'react-redux';
-import { IDASHAppState } from 'dash-admin-state';
-import { updateDomCssVariables } from './updateDomCssVariables';
-import {  Theme,createTheme } from '@mui/material';
-
-interface DashThemeContextType {
-    theme: Theme;
-    themeOptions: ReturnType<typeof appTheme>;
-    updateFullTheme: (settings?: any) => void;
-    recreateTheme: (tenantSettings?: any) => void;
-}
-
-// Create context with null as default - we'll check for this in the hook
-const DashThemeContext = createContext<DashThemeContextType | null>(null);
-
-// Custom hook that ensures context is used within provider
-export const useDashThemeContext = () => {
-    const context = useContext(DashThemeContext);
-    if (!context) {
-        throw new Error('useDashThemeContext must be used within a DashThemeProvider');
-    }
-    return context;
-};
-
-interface DashThemeProviderProps {
-    children?: React.ReactNode;
-    extendedOptions?: any;
-}
-
-export const DashThemeProvider: React.FC<DashThemeProviderProps> = ({ extendedOptions, children }) => {
-    const [themeOptions, setThemeOptions] = useState<ReturnType<typeof appTheme>>(() => appTheme(extendedOptions));
-    const [theme, setTheme] = useState<Theme>(() => createTheme(appTheme(extendedOptions)));
-    //const { auth, authenticated } = useAuthContext();
-    
-    const { mode } = useColorScheme();
-    /*const dashThemeType = useSelector((state: IDASHAppState<any, any, any>) =>
-        state.settings.themeType
-    );*/
-
-    // Helper function to get tenant settings
-    const getTenantSettings = () => {
-        const persistedTenantSettings = AuthPersistenceService.getTenantSettings();
-      
-        return persistedTenantSettings || null;
-    };
-
-    // Function to recreate the entire MUI theme with tenant settings
-    const recreateTheme = (tenantSettings?: any) => {
-        const settings = tenantSettings || getTenantSettings();
-
-        console.log('Recreating MUI theme with tenant settings:', settings);
-      
-        // Create new theme options with tenant settings
-        const newThemeOptions = appTheme(
-            extendedOptions,
-            {
-                tenantSettings: settings,
-                colors: settings?.colors,
-            }
-            // Add any other tenant-specific theme customizations here
-        );
-        
-        // Create new MUI theme
-        const newTheme = createTheme(newThemeOptions);
-        
-        // Update state
-        setThemeOptions(newThemeOptions);
-        setTheme(newTheme);
-        
-        // Also update CSS variables
-        if (settings?.colors || settings?.values) {
-            const currentTheme = mode || document.documentElement.getAttribute('data-theme') || 'light';
-            updateDomCssVariables(currentTheme, settings?.colors, settings?.values);
-            //document.documentElement.setAttribute('data-theme', currentTheme);
-        }
-    };
-
-    // Function to update CSS variables (keep existing functionality)
-    const updateFullTheme = (colors?: any) => {
-        const tenantSettings = getTenantSettings();
-        const colorsToUse = colors || tenantSettings?.colors || {};
-        const valuesToUse = tenantSettings?.values || {};
-        console.log('Updating custom CSS variables with colors:', colorsToUse);
-        
-        const currentTheme = mode || document.documentElement.getAttribute('data-theme') || 'light';
-        updateDomCssVariables(currentTheme, colorsToUse, valuesToUse);
-        //document.documentElement.setAttribute('data-theme', currentTheme);
-    };
-
-    // Recreate theme when user authenticates or tenant settings change
-
-    useEffect(() => {
-       //if(!auth || !authenticated) {
-      
-       const tenantSettings = getTenantSettings();
-         if (tenantSettings) {
-             console.log("recreating mui theme on mount")
-       recreateTheme(tenantSettings);
-         }
-      // }
-    }, []);
-    
-    // Handle theme mode changes
-    useEffect(() => {
-    
-        //if (authenticated) {
-            const tenantSettings = getTenantSettings();
-            if (tenantSettings) {
-                
-                  console.log("recreating mui theme on mode change")
-                recreateTheme(tenantSettings);
-            }
-        //}
-    }, [mode/*, dashThemeType*/]);
-
-    // Create the context value object
-    const contextValue: DashThemeContextType = {
-        theme,
-        themeOptions,
-        updateFullTheme,
-        recreateTheme
-    };
-
-     useEffect(() => {
-       console.log("mui theme updated",themeOptions,theme);
-    }, [themeOptions]);
-
-    return (
-        <DashThemeContext.Provider value={contextValue}>
-            
-      
-            {children}
-      
-        </DashThemeContext.Provider>
-    );
-};
-
-export default DashThemeContext;

package/src/default-theme/DashThemeContext.tsx.old

@@ -1,306 +0,0 @@
-import React, { createContext, useContext, useState, useEffect } from 'react';
-import { Theme, createTheme } from '@mui/material/styles';
-import { appTheme } from 'dash-styles';
-import { useAuthContext } from 'dash-admin';
-import { useSelector } from 'react-redux';
-import { IDASHAppState, DASH_THEME_SETTINGS } from 'dash-admin-state';
-import { AuthPersistenceService } from 'dash-auth';
-interface DashThemeContextType {
-    theme: Theme;
-    themeOptions: ReturnType<typeof appTheme>; // Expose theme options
-    updateFullTheme: (settings?: any) => void;
-}
-
-const defaultThemeOptions = appTheme();
-const defaultTheme = createTheme(defaultThemeOptions);
-
-const DashThemeContext = createContext<DashThemeContextType>({
-    theme: defaultTheme,
-    themeOptions: defaultThemeOptions,
-    updateFullTheme: () => { }
-});
-
- let themeStyleElement: HTMLStyleElement | null = null;
-    export const updateDomCssVariables = (theme: string, colors: { [x: string]: string }) => {
-      
-        const themeSuffix = `--${theme}`;
-        
-        if (!themeStyleElement) {
-            themeStyleElement = document.createElement('style');
-            themeStyleElement.id = 'dash-theme-variables';
-            document.head.appendChild(themeStyleElement);
-        }
-        
-
-        let styleString = '';
-        Object.entries(colors).forEach(([key, value]) => {
-            if (key.endsWith(themeSuffix)) {
-                const baseKey = key.slice(0, -themeSuffix.length);
-                styleString += `--${baseKey}: ${value}; `;
-            }
-        });
-       
-        themeStyleElement.textContent = `:root { ${styleString} }`;
-        
-    };
-    
-
-export const useDashThemeContext = () => useContext(DashThemeContext);
-
-interface DashThemeProviderProps {
-    children?: React.ReactNode;
-    extendedOptions?: any;
-}
-
-export const DashThemeProvider: React.FC<DashThemeProviderProps> = ({ extendedOptions, children }) => {
-    const [themeOptions, setThemeOptions] = useState<ReturnType<typeof appTheme>>(() => appTheme(extendedOptions));
-    const [theme, setTheme] = useState<Theme>(() => createTheme(appTheme(extendedOptions)));
-    const [cssVariablesCache, setCssVariablesCache] = useState<Record<string, string> | null>(null);
-    const { auth, authenticated } = useAuthContext();
-
-    // Get theme type from Redux state
-    const themeType = useSelector((state: IDASHAppState<any, any, any>) =>
-        state.settings.themeType
-    );
-
-    // Helper function to get tenant settings (prioritize persisted over auth)
-    const getTenantSettings = () => {
-        // First try to get persisted tenant settings
-        const persistedTenantSettings = AuthPersistenceService.getTenantSettings();
-        if (persistedTenantSettings) {
-            return persistedTenantSettings;
-        }
-        
-        // Fallback to auth tenant settings if no persisted data
-        return auth?.tenantSettings || null;
-    };
-
-    const getAllCssVariablesFromStyleSheets = (selector: string) => {
-        if (cssVariablesCache) {
-            return cssVariablesCache;
-        }
-
-        const cssVariables = {};
-
-        // Loop through all style sheets
-        for (let i = 0; i < document.styleSheets.length; i++) {
-            try {
-                const styleSheet = document.styleSheets[i];
-                // Skip if the stylesheet is from a different origin and can't be accessed
-                if (!styleSheet.cssRules) continue;
-
-                // Loop through all CSS rules in the stylesheet
-                for (let j = 0; j < styleSheet.cssRules.length; j++) {
-                    const rule = styleSheet.cssRules[j];
-
-                    // Check if it's a style rule (type 1)
-
-                    /* @ts-ignore */
-                    if (rule.selectorText === selector) {
-
-                        /* @ts-ignore */
-                        const style = rule.style;
-
-                        // Loop through all style properties
-                        for (let k = 0; k < style.length; k++) {
-                            const prop = style[k];
-                            if (prop.startsWith('--')) {
-                                //console.log(prop,style.getPropertyValue(prop).trim());
-                                cssVariables[prop] = style.getPropertyValue(prop).trim();
-                            }
-                        }
-                    }
-
-                }
-            } catch (e) {
-                // Skip cross-origin stylesheets that throw security errors
-                console.warn('Could not access stylesheet:', e);
-            }
-        }
-
-        setCssVariablesCache(cssVariables);
-        return cssVariables;
-    };
-
-    // Function to update CSS variables based on tenant settings
-    const updateCSSVariablesCopy = (themeType: string, settingsColors: { [x: string]: string }) => {
-
-        const root = document.documentElement
-
-        const _cssVars = getAllCssVariablesFromStyleSheets(":root");
-
-        const cssVars = Object.keys(_cssVars).filter(prop => prop.endsWith(`--${themeType}`));
-        cssVars.forEach(varName => {
-            //console.log(varName);
-            const baseVarName = varName.replace(`--${themeType}`, '');
-            const value = _cssVars[varName];
-            if (value) {
-                //console.log("replaced",themeType,baseVarName,value)
-                root.style.setProperty(baseVarName, value);
-            }
-        });
-
-        if (!settingsColors) return;
-        // Update CSS specific variables from backend config
-
-        // Update any CSS variables that match the incoming settings
-        Object.entries(settingsColors).forEach(([key, value]) => {
-            const cssVar = `--${key}`;
-            root.style.setProperty(cssVar, value);
-        });
-    };
-
-    // TODO: this is too slow, setting properties one by one.
-    const updateCSSVariables2 = (currentTheme, colors: { [x: string]: string }) => {
-
-
-        const themeSuffix = `--${currentTheme}`;
-
-        Object.entries(colors).forEach(([key, value]) => {
-            if (key.endsWith(themeSuffix)) {
-                const baseKey = key.slice(0, -themeSuffix.length);
-                document.documentElement.style.setProperty(`--${baseKey}`, String(value));
-            }
-        });
-
-
-
-    };
-
-    // TODO: this method is faster, but still slow.
-
-    const updateCSSVariables3 = (currentTheme, colors: { [x: string]: string }) => {
-
-
-        const themeSuffix = `--${currentTheme}`;
-
-        let styleString = '';
-        Object.entries(colors).forEach(([key, value]) => {
-            if (key.endsWith(themeSuffix)) {
-                const baseKey = key.slice(0, -themeSuffix.length);
-                styleString += `--${baseKey}: ${value}; `;
-            }
-        });
-        document.documentElement.setAttribute('style', styleString);
-
-
-
-    };
-
-   
-
-    const updateCSSVariables = (currentTheme: string, colors: { [x: string]: string }) => {
-        const startTime = performance.now();
-        const themeSuffix = `--${currentTheme}`;
-        
-        // Create or get existing style element
-        if (!themeStyleElement) {
-            themeStyleElement = document.createElement('style');
-            themeStyleElement.id = 'dash-theme-variables';
-            document.head.appendChild(themeStyleElement);
-        }
-        
-        // Build CSS rule
-        /*const cssVariables: string[] = [];
-        Object.entries(colors).forEach(([key, value]) => {
-            if (key.endsWith(themeSuffix)) {
-                const baseKey = key.slice(0, -themeSuffix.length);
-                cssVariables.push(`--${baseKey}: ${value}`);
-            }
-        });*/
-
-        let styleString = '';
-        Object.entries(colors).forEach(([key, value]) => {
-            if (key.endsWith(themeSuffix)) {
-                const baseKey = key.slice(0, -themeSuffix.length);
-                styleString += `--${baseKey}: ${value}; `;
-            }
-        });
-   
-        // Update the style element content in one operation
-        themeStyleElement.textContent = `:root { ${styleString} }`;
-        
-        //const endTime = performance.now();
-        //console.log(`updateCSSVariables execution time: ${endTime - startTime}ms`);
-    };
-    
-    // Function to recreate theme after CSS variables are updated
-    const updateFullTheme = (colors?: any) => {
-        
-        // Get tenant settings from persisted data or auth
-        const tenantSettings = getTenantSettings();
-        const colorsToUse = colors || tenantSettings?.colors || {};
-        
-        console.log('Updating theme with colors:', colorsToUse);
-        //console.log('Using tenant settings from:', tenantSettings ? 'persisted/auth data' : 'none available');
-        
-        updateCSSVariables(themeType, colorsToUse);
-      
-        /*
-        DEPRECTATED AS USING CSS VARS FOR MODE SWITCHING
-        // Determine which theme function to use based on theme type
-        let themeFunction = () => appTheme(extendedOptions);
-
-        // Recreate theme options with updated CSS variables and theme type
-        const newThemeOptions = themeFunction();
-        setThemeOptions(newThemeOptions);
-
-        // Create actual theme from options
-        const newTheme = createTheme(newThemeOptions);
-        setTheme(newTheme); 
-        */
-    };
-
-    // Listen for tenant settings changes (both from auth and persisted)
-    useEffect(() => {
-        const tenantSettings = getTenantSettings();
-        
-        if (tenantSettings?.colors) {
-            console.log('Tenant settings detected, updating theme');
-            updateFullTheme(tenantSettings.colors);
-        } else if (authenticated && auth) {
-            // Fallback to auth tenant settings if available
-            updateFullTheme(auth?.tenantSettings?.colors);
-        } else {
-            // Apply theme even without tenant settings (for theme type changes)
-            updateFullTheme();
-        }
-    }, [auth, authenticated]); // Remove auth?.tenantSettings from dependency since we're using getTenantSettings()
-
-    // Add this useEffect in the DashThemeProvider component:
-    useEffect(() => {
-        const handleThemeUpdate = (event: CustomEvent) => {
-            console.log('Theme update event received:', event.detail);
-            updateFullTheme(event.detail.colors);
-        };
-
-        window.addEventListener('dash-theme-update', handleThemeUpdate as EventListener);
-        
-        return () => {
-            window.removeEventListener('dash-theme-update', handleThemeUpdate as EventListener);
-        };
-    }, [updateFullTheme]);
-    // Listen for theme type changes
-    useEffect(() => {
-        
-        const tenantSettings = getTenantSettings();
-        updateFullTheme(tenantSettings?.colors);
-    }, [themeType]);
-
-    // Initialize theme on mount with persisted settings
-    useEffect(() => {
-        const tenantSettings = getTenantSettings();
-        if (tenantSettings?.colors) {
-            console.log('Initializing theme with persisted tenant settings');
-            updateFullTheme(tenantSettings.colors);
-        }
-    }, []); // Run only on mount
-
-    return (
-        <DashThemeContext.Provider value={{ theme, themeOptions, updateFullTheme }}>
-            {children}
-        </DashThemeContext.Provider>
-    );
-};
-
-export default DashThemeContext;