@dashadmin/dash-app-common 1.3.25 → 1.3.26

package/src/defaults/extensions/router/dashDefaultPublicRoutes.tsx

@@ -0,0 +1,86 @@
+/**
+ * Default Public Routes
+ * 
+ * These are the default routes for the public app when no custom routes are provided.
+ * They include basic authentication routes (login, password recovery, etc.)
+ * 
+ * NOTE: Uses standalone components that don't depend on react-admin hooks.
+ * react-admin hooks (useRedirect, useNotify, etc.) require <Admin> context,
+ * which is not available in the public routes.
+ */
+import React, { Suspense } from 'react';
+import { Route, Navigate } from 'react-router-dom';
+import AppLoadingFallback from 'dash-components/src/components/theme/AppLoadingFallback';
+
+// Lazy load auth pages - these are standalone components that use React Router hooks
+const DashDefaultLogin = React.lazy(() => import('../../pages/DashDefaultLogin'));
+const RecoverPassword = React.lazy(() => import('dash-admin/src/pages/RecoverPassword'));
+const ChangePassword = React.lazy(() => import('dash-admin/src/pages/ChangePassword'));
+const VerifyAccount = React.lazy(() => import('dash-admin/src/pages/VerifyAccount'));
+
+// Loading fallback
+const LoadingFallback = () => <AppLoadingFallback message="Loading..." />;
+
+// Simple landing that redirects to login
+const SimpleLanding = () => <Navigate to="/login" replace />;
+
+/**
+ * Default Public Routes configuration
+ * These routes are accessible without authentication
+ */
+export const dashDefaultPublicRoutes = () => {
+    return [
+    // Default landing page - redirect to login
+    <Route
+        key="landing"
+        data-layout="no-layout"
+        path="/"
+        element={<SimpleLanding />}
+    />,
+
+    // Login page - uses standalone component
+    <Route
+        key="login"
+        data-layout="no-layout"
+        path="/login"
+        element={
+            <Suspense fallback={<LoadingFallback />}>
+                <DashDefaultLogin />
+            </Suspense>
+        }
+    />,
+
+    // Password recovery
+    <Route
+        key="reset-password"
+        path="/reset-password"
+        element={
+            <Suspense fallback={<LoadingFallback />}>
+                <RecoverPassword />
+            </Suspense>
+        }
+    />,
+    <Route
+        key="change-password"
+        path="/change-password"
+        element={
+            <Suspense fallback={<LoadingFallback />}>
+                <ChangePassword />
+            </Suspense>
+        }
+    />,
+
+    // Account verification
+    <Route
+        key="verify-account"
+        path="/verify-email"
+        element={
+            <Suspense fallback={<LoadingFallback />}>
+                <VerifyAccount />
+            </Suspense>
+        }
+    />,
+];
+};
+
+export default dashDefaultPublicRoutes;

package/src/defaults/extensions/router/dashDefaultRouter.tsx

@@ -0,0 +1,54 @@
+/**
+ * Dash Default Router Extension
+ * 
+ * Router configuration and wrapper components.
+ */
+import React from 'react';
+import { DashRouterComponent } from 'dash-utils';
+import { DASHAdminSystemConstants, getEnv } from 'dash-constants';
+
+/**
+ * Environment variables for dash default router configuration
+ */
+export const getDashDefaultRouterEnvVars = () => ({
+    PLATFORM_TYPE: getEnv('PLATFORM_TYPE') || 'desktop',
+    PLATFORM: getEnv('PLATFORM') || 'unknown',
+    BASE_PATH: DASHAdminSystemConstants.system.URL_PREFIX || '/',
+    IS_ELECTRON: JSON.parse(getEnv('IS_ELECTRON') || 'false'),
+});
+
+/**
+ * DashDefaultRouterWrapper - Memoizable router component
+ * Uses environment variables to determine router type
+ */
+export const DashDefaultRouterWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+    const envVars = getDashDefaultRouterEnvVars();
+    
+    return (
+        <DashRouterComponent
+            platformType={envVars.PLATFORM_TYPE}
+            platform={envVars.PLATFORM}
+            basename={envVars.BASE_PATH}
+        >
+            {children}
+        </DashRouterComponent>
+    );
+};
+
+/**
+ * Create a dash default router wrapper with specific environment settings
+ */
+export const createDashDefaultRouterWrapper = (platformType?: string, platform?: string) => {
+    const RouterWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+        <DashRouterComponent
+            platformType={platformType || getDashDefaultRouterEnvVars().PLATFORM_TYPE}
+            platform={platform || getDashDefaultRouterEnvVars().PLATFORM}
+        >
+            {children}
+        </DashRouterComponent>
+    );
+    
+    return RouterWrapper;
+};
+
+export default DashDefaultRouterWrapper;

package/src/defaults/extensions/router/dashDefaultSharedRoutes.tsx

@@ -0,0 +1,56 @@
+/**
+ * Dash Default Shared Routes Extension
+ * 
+ * Routes that are shared between public and private contexts.
+ * These can be used as base routes for both authenticated and unauthenticated users.
+ */
+import React, { Suspense } from 'react';
+import { Route } from 'react-router-dom';
+import { Box } from '@mui/material';
+
+// Loading fallback component
+const DashDefaultRouteLoader = () => (
+    <Box
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+        minHeight="200px"
+        sx={{ color: 'var(--text-color, inherit)' }}
+    >
+        Loading...
+    </Box>
+);
+
+// Dash default simple landing component
+const DashDefaultLanding = () => (
+    <div style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100vh',
+        background: 'linear-gradient(to bottom, var(--bodybg-primary), var(--bodybg-secondary))',
+        color: 'var(--text-color, @text-color--dark)'
+    }}>
+        <h1>Welcome to Dash</h1>
+    </div>
+);
+
+/**
+ * Dash Default Shared routes configuration
+ * These routes are accessible in both public and private contexts
+ */
+export const dashDefaultSharedRoutes = () => [
+    // Landing page
+    <Route
+        key="landing"
+        data-layout="no-layout"
+        path="/"
+        element={
+            <Suspense fallback={<DashDefaultRouteLoader />}>
+                <DashDefaultLanding />
+            </Suspense>
+        }
+    />,
+];
+
+export default dashDefaultSharedRoutes;

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

@@ -0,0 +1,13 @@
+/**
+ * Router Extensions Index
+ * 
+ * Router-related configurations and components.
+ */
+
+// Route definitions
+export { dashDefaultPublicRoutes } from './dashDefaultPublicRoutes';
+export { dashDefaultPrivateRoutes } from './dashDefaultPrivateRoutes';
+export { dashDefaultSharedRoutes } from './dashDefaultSharedRoutes';
+
+// Router wrapper
+export { DashDefaultRouterWrapper, createDashDefaultRouterWrapper, getDashDefaultRouterEnvVars } from './dashDefaultRouter';

package/src/defaults/extensions/state/dashDefaultAppCommon.ts

@@ -0,0 +1,54 @@
+/**
+ * Dash Default App Common State Extension
+ * 
+ * Default common state configuration for the app.
+ */
+import React from 'react';
+import { ICommonState, defaultCommon } from 'dash-admin-state';
+import { AuthPersistenceService } from 'dash-auth';
+import { dashStorage } from 'dash-utils';
+
+/**
+ * Get dash default app common state
+ * Retrieves persisted tenant images and navigation state from storage
+ */
+export const getDashDefaultAppCommon = (): ICommonState => {
+    const persistedTenantImages = AuthPersistenceService.getTenantImages();
+
+    return {
+        ...defaultCommon,
+        appPath: '/',
+        navExpanded: dashStorage.getItem('dashNavExpanded') 
+            ? dashStorage.getItem('dashNavExpanded') === 'true' 
+            : true,
+        navSize: dashStorage.getItem('dashNavSize') || 'small',       
+        width: typeof window !== 'undefined' ? window.innerWidth : 1024,
+        height: typeof window !== 'undefined' ? window.innerHeight : 768,
+        headerToolBar: () => React.createElement(React.Fragment),
+        panelSettings: {
+            horizontalLogo: persistedTenantImages?.horizontal_logo?.original || '',
+            squaredLogo: persistedTenantImages?.squared_logo?.original || '',
+            loginBackground: persistedTenantImages?.banner?.original || '',
+        },
+    };
+};
+
+/**
+ * Get dash default app path
+ */
+export const getDashDefaultAppPath = (): string => '/';
+
+/**
+ * Get dash default panel images with fallbacks
+ */
+export const getDashDefaultPanelImages = () => {
+    const persistedTenantImages = AuthPersistenceService.getTenantImages();
+    
+    return {
+        horizontalLogo: persistedTenantImages?.horizontal_logo?.original || '',
+        squaredLogo: persistedTenantImages?.squared_logo?.original || '',
+        loginBackground: persistedTenantImages?.banner?.original || '',
+    };
+};
+
+export default getDashDefaultAppCommon;

package/src/defaults/extensions/state/dashDefaultAppSettings.ts

@@ -0,0 +1,29 @@
+/**
+ * Dash Default App Settings Extension
+ * 
+ * Default application settings configuration for the app.
+ */
+import { ISettingsState, defaultSettings } from 'dash-admin-state';
+import { dashDefaultLayoutSettings } from './dashDefaultLayoutSettings';
+
+/**
+ * Create dash default app settings
+ */
+export const dashDefaultAppSettings = (): ISettingsState => ({
+    ...defaultSettings,
+    loading: false,
+    navStyle: dashDefaultLayoutSettings.NAV_STYLE_FIXED,
+    layoutType: dashDefaultLayoutSettings.LAYOUT_TYPE_FRAMED,
+    themeType: dashDefaultLayoutSettings.THEME_TYPE_DARK,
+    layoutSettings: dashDefaultLayoutSettings,
+    groupIcons: {},
+});
+
+/**
+ * Get the dash default theme type
+ */
+export const getDashDefaultThemeType = (): string => {
+    return dashDefaultLayoutSettings.THEME_TYPE_DARK;
+};
+
+export default dashDefaultAppSettings;

package/src/defaults/extensions/state/dashDefaultInitialAppState.ts

@@ -0,0 +1,75 @@
+/**
+ * Dash Default Initial App State Extension
+ * 
+ * Defines the initial Redux state for the application.
+ */
+import {
+    IDASHAppState,
+    defaultAuth,
+    defaultPageSettings,
+    defaultFormState
+} from 'dash-admin-state';
+import { IDashAutoAdminResourceConfig } from 'dash-auto-admin';
+import dashDefaultAppSettings from './dashDefaultAppSettings';
+import getDashDefaultAppCommon from './dashDefaultAppCommon';
+
+
+
+/**
+ * Dash default user interface (minimal)
+ */
+export interface IDashDefaultUser {
+    id: number | string;
+    name?: string;
+    email?: string;
+    roles?: string[];
+    [key: string]: any;
+}
+
+/**
+ * Dash default auth interface (minimal)
+ */
+export interface IDashDefaultAuth {
+    user?: IDashDefaultUser;
+    token?: string;
+    authenticated?: boolean;
+    [key: string]: any;
+}
+
+/**
+ * Dash Default Initial application state
+ * Combines default settings with app-specific configurations
+ */
+export const DASH_DEFAULT_INITIAL_APP_STATE: IDASHAppState<
+    IDashDefaultUser,
+    IDashDefaultAuth,
+    IDashAutoAdminResourceConfig
+> = {
+    settings: dashDefaultAppSettings(),
+    common: getDashDefaultAppCommon(),
+    page: defaultPageSettings,
+    auth: defaultAuth,
+    resources: { items: [] },
+    formData: defaultFormState,
+    componentData: {},
+};
+
+/**
+ * Get a fresh copy of the dash default initial state
+ * Useful when you need to reset state
+ */
+export const getDashDefaultInitialAppState = (): IDASHAppState<
+    IDashDefaultUser,
+    IDashDefaultAuth,
+    IDashAutoAdminResourceConfig
+> => ({
+    settings: dashDefaultAppSettings(),
+    common: getDashDefaultAppCommon(),
+    page: defaultPageSettings,
+    auth: defaultAuth,
+    resources: { items: [] },
+    formData: defaultFormState,
+    componentData: {},
+});
+
+export default DASH_DEFAULT_INITIAL_APP_STATE;

package/src/defaults/extensions/state/dashDefaultLayoutSettings.ts

@@ -0,0 +1,59 @@
+/**
+ * Dash Default Layout Settings
+ * 
+ * Layout configuration constants for the application.
+ * These define responsive breakpoints, theme types, and layout options.
+ */
+
+export const dashDefaultLayoutSettings = {
+    // Responsive breakpoints
+    TAB_SIZE: 992,
+    MOBILE_SIZE: 575,
+    
+    // Theme type constants
+    THEME_TYPE: 'THEME_TYPE',
+    THEME_TYPE_LIGHT: 'light',
+    THEME_TYPE_LITE: 'lite',
+    THEME_TYPE_DARK: 'dark',
+    THEME_TYPE_DASH_DEFAULT: 'light',
+    THEME_TYPE_SEMI_DARK: 'THEME_TYPE_SEMI_DARK',
+    
+    // Theme color constants
+    THEME_COLOR: 'THEME_COLOR',
+    UPDATE_RTL_STATUS: 'UPDATE_RTL_STATUS',
+    
+    // Layout type constants
+    LAYOUT_TYPE: 'LAYOUT_TYPE',
+    LAYOUT_TYPE_FRAMED: 'framed-layout',
+    LAYOUT_TYPE_BOXED: 'boxed-layout',
+    LAYOUT_TYPE_FULL: 'full-layout',
+    
+    // Navigation style constants
+    NAV_STYLE: 'NAV_STYLE',
+    NAV_STYLE_FIXED: 'NAV_STYLE_FIXED',
+    NAV_STYLE_MINI_SIDEBAR: 'NAV_STYLE_MINI_SIDEBAR',
+    NAV_STYLE_DRAWER: 'NAV_STYLE_DRAWER',
+    NAV_STYLE_NO_HEADER_MINI_SIDEBAR: 'NAV_STYLE_NO_HEADER_MINI_SIDEBAR',
+    NAV_STYLE_NO_HEADER_EXPANDED_SIDEBAR: 'NAV_STYLE_NO_HEADER_EXPANDED_SIDEBAR',
+    NAV_STYLE_DEFAULT_HORIZONTAL: 'NAV_STYLE_DEFAULT_HORIZONTAL',
+    NAV_STYLE_DARK_HORIZONTAL: 'NAV_STYLE_DARK_HORIZONTAL',
+    NAV_STYLE_INSIDE_HEADER_HORIZONTAL: 'NAV_STYLE_INSIDE_HEADER_HORIZONTAL',
+    NAV_STYLE_BELOW_HEADER: 'NAV_STYLE_BELOW_HEADER',
+    NAV_STYLE_ABOVE_HEADER: 'NAV_STYLE_ABOVE_HEADER',
+    NAV_STYLE_COLLAPSABLE: 'NAV_STYLE_COLLAPSABLE',
+    
+    // Color constants
+    LIGHT_PURPLE: 'light_purple',
+    LIGHT_PURPLE_SEC: '#00B378',
+    LIGHT_PURPLE_DARK_TEXT_COLOR: '#9799AC',
+} as const;
+
+// Type for the layout settings
+export type DashDefaultLayoutSettings = typeof dashDefaultLayoutSettings;
+
+// Helper functions
+export const getDashDefaultTheme = (): string => dashDefaultLayoutSettings.THEME_TYPE_DARK;
+export const getDashDefaultLightTheme = (): string => dashDefaultLayoutSettings.THEME_TYPE_LIGHT;
+export const getDashDefaultDarkTheme = (): string => dashDefaultLayoutSettings.THEME_TYPE_DARK;
+
+export default dashDefaultLayoutSettings;

package/src/defaults/extensions/state/dashDefaultQueryClient.ts

@@ -0,0 +1,59 @@
+/**
+ * Dash Default Query Client Configuration Extension
+ * 
+ * React Query client configuration for data fetching and caching.
+ */
+import { QueryClient, QueryClientConfig } from '@tanstack/react-query';
+
+/**
+ * Dash default query client configuration
+ */
+export const dashDefaultQueryClientConfig: QueryClientConfig = {
+    defaultOptions: {
+        queries: {
+            refetchOnWindowFocus: false,
+            staleTime: 5 * 60 * 1000, // 5 minutes
+            retry: 1,
+        },
+    },
+};
+
+/**
+ * Dash default development query client configuration with logging
+ */
+export const dashDefaultDevQueryClientConfig: QueryClientConfig = {
+    ...dashDefaultQueryClientConfig,
+    // @ts-ignore: required to avoid error during development
+    logger: {
+        log: (...args: any[]) => {
+            console.log('[DashDefaultQueryClient]', ...args);
+        },
+        warn: (...args: any[]) => {
+            console.warn('[DashDefaultQueryClient]', ...args);
+        },
+        error: (...args: any[]) => {
+            console.error('[DashDefaultQueryClient]', ...args);
+        },
+    },
+};
+
+/**
+ * Create a dash default query client instance
+ * Uses dev config in development mode for logging
+ */
+export const createDashDefaultQueryClient = (): QueryClient => {
+    // Check if we're in development mode
+    const isDev = typeof window !== 'undefined' && 
+        (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1');
+    
+    const config = isDev ? dashDefaultDevQueryClientConfig : dashDefaultQueryClientConfig;
+    
+    return new QueryClient(config);
+};
+
+/**
+ * Pre-configured dash default query client instance
+ */
+export const dashDefaultQueryClient = createDashDefaultQueryClient();
+
+export default dashDefaultQueryClient;

package/src/defaults/extensions/state/dashDefaultResourcesIcons.tsx

@@ -0,0 +1,23 @@
+import Dashboard from '@mui/icons-material/Dashboard';
+import Notifications from '@mui/icons-material/Notifications';
+import LocationCity from '@mui/icons-material/LocationCity';
+import Person from '@mui/icons-material/Person';
+import MenuOpenOutlined from '@mui/icons-material/MenuOpenOutlined';
+import { IAppResourceGroupsIcon } from 'dash-admin/src/DASHAdmin';
+
+const dashDefaultResourceIcons: IAppResourceGroupsIcon = {
+    'Administration': <Dashboard />,
+    'Administración': <Dashboard />,
+    'Logs and Notifications': <Notifications />,
+    'Logs y Notificaciones': <Notifications />,
+    'System Resources': <LocationCity />,
+    'Recursos de sistema': <LocationCity />,
+    'Users': <Person />,
+    'Usuarios': <Person />,
+    'Client': <Person />,
+    'Cliente': <Person />,
+    'Actions': <MenuOpenOutlined />,
+    'Acciones': <MenuOpenOutlined />,
+};
+
+export default dashDefaultResourceIcons;

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

@@ -0,0 +1,29 @@
+/**
+ * State Extensions Index
+ * 
+ * Application state configurations and initial states.
+ */
+
+// Default App Settings
+export { dashDefaultAppSettings, getDashDefaultThemeType } from './dashDefaultAppSettings';
+
+// Default App Common State
+export { getDashDefaultAppCommon, getDashDefaultAppPath, getDashDefaultPanelImages } from './dashDefaultAppCommon';
+
+// Default Initial App State
+export { DASH_DEFAULT_INITIAL_APP_STATE, getDashDefaultInitialAppState, type IDashDefaultUser, type IDashDefaultAuth } from './dashDefaultInitialAppState';
+
+// Default Query Client
+export { dashDefaultQueryClient, createDashDefaultQueryClient, dashDefaultQueryClientConfig, dashDefaultDevQueryClientConfig } from './dashDefaultQueryClient';
+
+// Default Layout Settings
+export {
+    dashDefaultLayoutSettings,
+    getDashDefaultTheme,
+    getDashDefaultLightTheme,
+    getDashDefaultDarkTheme,
+    type DashDefaultLayoutSettings
+} from './dashDefaultLayoutSettings';
+
+// Default Resource Icons
+export { default as dashDefaultResourceIcons } from './dashDefaultResourcesIcons';

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

@@ -0,0 +1,17 @@
+/**
+ * Global Styles & Assets
+ * 
+ * Add all your default CSS, fonts, and global asset imports here.
+ * This centralizes all style dependencies for the application.
+ * 
+ * Note: Order matters - base styles should come before custom overrides.
+ */
+
+/* Third-party dependency styles */
+import 'react-toastify/dist/ReactToastify.css';
+
+/* Dash Design System base styles */
+import "dash-styles/dash.less";
+
+// Export nothing - this file is imported for side effects only
+export {};

package/src/defaults/extensions/theme/dashDefaultThemeOptions.ts

@@ -0,0 +1,89 @@
+/**
+ * Dash Default Theme Options Extension
+ * 
+ * Extended theme configuration for Material UI.
+ * These options are merged with the base dash theme.
+ */
+
+/**
+ * Dash default extended theme options for the app
+ * These are merged with the base DashAdmin theme
+ */
+export const dashDefaultExtendedThemeOptions = {
+    components: {
+        MuiButton: {
+            styleOverrides: {
+                root: {
+                    // Add any default button styles here
+                    transition: 'all 0.2s ease-in-out',
+                }
+            }
+        },
+        // Add optimizations for layout components
+        MuiBox: {
+            styleOverrides: {
+                root: {
+                    // Optimize box rendering
+                    contain: 'layout style',
+                }
+            }
+        }
+    },
+    breakpoints: {
+        values: {
+            xs: 0,
+            sm: 900,
+            md: 900,
+            lg: 1200,
+            xl: 1536,
+        },
+    },
+    // Add transition optimizations
+    transitions: {
+        duration: {
+            shortest: 150,
+            shorter: 200,
+            short: 250,
+            standard: 300,
+            complex: 375,
+            enteringScreen: 225,
+            leavingScreen: 195,
+        },
+        easing: {
+            easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
+            easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
+            easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
+            sharp: 'cubic-bezier(0.4, 0, 0.6, 1)',
+        },
+    }
+};
+
+/**
+ * Dash default palette overrides
+ * Uncomment and modify to customize colors
+ */
+export const dashDefaultPalette = {
+    // primary: {
+    //     main: '#1976d2',
+    //     light: '#42a5f5',
+    //     dark: '#1565c0',
+    // },
+    // secondary: {
+    //     main: '#9c27b0',
+    //     light: '#ba68c8',
+    //     dark: '#7b1fa2',
+    // },
+};
+
+/**
+ * Dash default typography overrides
+ */
+export const dashDefaultTypography = {
+    // fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+    // h1: {
+    //     fontSize: '2.5rem',
+    //     fontWeight: 500,
+    // },
+};
+
+export default dashDefaultExtendedThemeOptions;

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

@@ -0,0 +1,7 @@
+/**
+ * Theme Extensions Index
+ * 
+ * Theme-related configurations and options.
+ */
+
+export { dashDefaultExtendedThemeOptions, dashDefaultPalette, dashDefaultTypography } from './dashDefaultThemeOptions';

package/src/defaults/extensions/utils/IPCMessageBrokerContext.tsx

@@ -0,0 +1,22 @@
+/**
+ * DashIPCMessageBrokerContext - Re-export from dash-utils
+ * 
+ * This file re-exports the IPCMessageBrokerContext from dash-utils
+ * with Dash prefix for dash-app-common consistency.
+ * 
+ * All core functionality is now in the dash-utils package.
+ * New code should import directly from 'dash-utils'.
+ */
+
+export {
+  IPCMessageBrokerContext as DashIPCMessageBrokerContext,
+  IPCMessageBrokerProvider as DashIPCMessageBrokerProvider,
+  useIPCMessageBroker as useDashIPCMessageBroker,
+  type LogMessage as DashLogMessage,
+  type SubprocessOutput as DashSubprocessOutput,
+  type IPCMessageBrokerContextType as DashIPCMessageBrokerContextType,
+  type IPCMessageBrokerConfig as DashIPCMessageBrokerConfig
+} from 'dash-utils';
+
+// Default export for backward compatibility
+export { IPCMessageBrokerProvider as default } from 'dash-utils';