@owp/core 2.5.4 → 2.5.5

package/dist/types/features/themePreview/configs/previewStorage.d.ts

@@ -0,0 +1,34 @@
+import type { SnackbarProviderTheme, SnackbarTheme } from '@/features/themePreview/configs/snackbar';
+import type { OwpSettingsConfigType } from '@/types';
+import type { PartialDeep } from 'type-fest';
+type ThemePreviewAppliedSettings = {
+    theme?: OwpSettingsConfigType['theme'];
+    snackbar?: SnackbarTheme;
+};
+type ThemePreviewTemporaryMode = 'light' | 'dark';
+type ThemePreviewTemporaryPresetSectionKey = 'main' | 'navbar' | 'toolbar';
+type ThemePreviewTemporarySectionKey = ThemePreviewTemporaryPresetSectionKey | 'grid' | 'table' | 'snackbar';
+export type ThemePreviewTemporarySettings = Omit<OwpSettingsConfigType, 'snackbar'> & {
+    snackbar?: SnackbarTheme;
+    snackbarProviderProps?: SnackbarProviderTheme;
+};
+export type ThemePreviewTemporarySelectionState = {
+    activeSection: ThemePreviewTemporarySectionKey;
+    selectedModes: Record<ThemePreviewTemporaryPresetSectionKey, ThemePreviewTemporaryMode>;
+    selectedPresetKeys: Record<ThemePreviewTemporaryPresetSectionKey, string>;
+};
+export type ThemePreviewTemporaryState = {
+    draftSettings: ThemePreviewTemporarySettings;
+    savedAt: string;
+    saveType: 'auto' | 'manual';
+    selectionState: ThemePreviewTemporarySelectionState;
+    version: 1;
+};
+export declare function getThemePreviewAppliedSettings(): ThemePreviewAppliedSettings;
+export declare function persistThemePreviewAppliedSettings(settings: ThemePreviewAppliedSettings): void;
+export declare function clearThemePreviewAppliedSettings(): void;
+export declare function getThemePreviewTemporaryState(): ThemePreviewTemporaryState;
+export declare function persistThemePreviewTemporaryState(temporaryState: ThemePreviewTemporaryState): void;
+export declare function clearThemePreviewTemporaryState(): void;
+export declare function getResolvedThemePreviewSettingsConfig<TSettingsConfig extends PartialDeep<OwpSettingsConfigType>>(settingsConfig: TSettingsConfig): TSettingsConfig;
+export {};

package/dist/types/features/themePreview/configs/settings.d.ts

@@ -0,0 +1,271 @@
+export declare const defaultSettingsConfig: {
+    customScrollbars: true;
+    direction: "ltr";
+    snackbar: {
+        default: {
+            backgroundColor: string;
+            color: string;
+        };
+        success: {
+            backgroundColor: string;
+            color: string;
+        };
+        info: {
+            backgroundColor: string;
+            color: string;
+        };
+        warning: {
+            backgroundColor: string;
+            color: string;
+        };
+        error: {
+            backgroundColor: string;
+            color: string;
+        };
+    };
+    theme: {
+        main: {
+            grid: {
+                header: {
+                    backgroundColor: string;
+                    color: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    height: number;
+                };
+                body: {
+                    backgroundColor: string;
+                    color: string;
+                    fillBackgroundColor: string;
+                };
+                row: {
+                    backgroundColor: string;
+                    solidBackgroundColor: string;
+                };
+                cell: {
+                    fontSize: string;
+                };
+                state: {
+                    hoverRowBackgroundColor: string;
+                    hoverRowBorderColor: string;
+                    selectedCellBackgroundColor: string;
+                    selectedRowBackgroundColor: string;
+                    focusedRowBackgroundColor: string;
+                    focusedRowBorderColor: string;
+                    hoverCellBackgroundColor: string;
+                    hoverCellBorderColor: string;
+                    focusedCellBackgroundColor: string;
+                    focusedCellBorderColor: string;
+                    editingCellBorderColor: string;
+                    focusedCellRectBackgroundColor: string;
+                };
+                editable: {
+                    backgroundColor: string;
+                };
+                changed: {
+                    backgroundColor: string;
+                };
+            };
+            table: {
+                borderRadius: string;
+                header: {
+                    backgroundColor: string;
+                    color: string;
+                    fontSize: string;
+                };
+                cell: {
+                    fontSize: string;
+                };
+                row: {
+                    backgroundColor: string;
+                    hoverBackgroundColor: string;
+                    selectedBackgroundColor: string;
+                };
+                field: {
+                    header: {
+                        fontSize: string;
+                        fontWeight: number;
+                    };
+                    cell: {
+                        backgroundColor: string;
+                        fontSize: string;
+                    };
+                };
+            };
+            palette: {
+                mode: "light";
+                text: {
+                    primary: string;
+                    secondary: string;
+                    disabled: string;
+                };
+                common: {
+                    black: string;
+                    white: string;
+                };
+                background: {
+                    paper: string;
+                    default: string;
+                };
+                primary: {
+                    light: string;
+                    main: string;
+                    dark: string;
+                    contrastText: string;
+                };
+                secondary: {
+                    light: string;
+                    main: string;
+                    dark: string;
+                    contrastText: string;
+                };
+                success: {
+                    main: string;
+                };
+                info: {
+                    main: string;
+                    contrastText: string;
+                };
+                warning: {
+                    main: string;
+                    contrastText: string;
+                };
+                error: {
+                    main: string;
+                };
+            };
+        };
+        navbar: {
+            palette: {
+                mode: "light";
+                divider: string;
+                text: {
+                    primary: string;
+                    secondary: string;
+                    disabled: string;
+                };
+                common: {
+                    black: string;
+                    white: string;
+                };
+                background: {
+                    paper: string;
+                    default: string;
+                };
+                primary: {
+                    readonly light: "#4f585c";
+                    readonly main: "#232a2d";
+                    readonly dark: "#111618";
+                    readonly contrastText: "#FFFFFF";
+                };
+                secondary: {
+                    main: string;
+                    contrastText: string;
+                };
+                success: {
+                    main: string;
+                };
+                info: {
+                    main: string;
+                    contrastText: string;
+                };
+                warning: {
+                    main: string;
+                    contrastText: string;
+                };
+                error: {
+                    main: string;
+                };
+            };
+        };
+        toolbar: {
+            palette: {
+                mode: "dark";
+                divider: "#FFFFFF";
+                text: {
+                    primary: string;
+                    secondary: string;
+                    disabled: string;
+                };
+                common: {
+                    black: string;
+                    white: string;
+                };
+                background: {
+                    paper: "#111618";
+                    default: "#232a2d";
+                };
+                primary: {
+                    light: string;
+                    main: string;
+                    dark: string;
+                    contrastText: string;
+                };
+                secondary: {
+                    dark: "#FFFFFF";
+                    light: string;
+                    main: string;
+                    contrastText: string;
+                };
+                success: {
+                    main: string;
+                };
+                info: {
+                    main: string;
+                    contrastText: string;
+                };
+                warning: {
+                    main: string;
+                    contrastText: string;
+                };
+                error: {
+                    main: string;
+                };
+            };
+        };
+        footer: {
+            palette: {
+                mode: "light";
+                text: {
+                    primary: string;
+                    secondary: string;
+                    disabled: string;
+                };
+                common: {
+                    black: string;
+                    white: string;
+                };
+                background: {
+                    paper: string;
+                    default: string;
+                };
+                primary: {
+                    light: string;
+                    main: string;
+                    dark: string;
+                    contrastText: string;
+                };
+                secondary: {
+                    light: string;
+                    main: string;
+                    dark: string;
+                    contrastText: string;
+                };
+                success: {
+                    main: string;
+                };
+                info: {
+                    main: string;
+                    contrastText: string;
+                };
+                warning: {
+                    main: string;
+                    contrastText: string;
+                };
+                error: {
+                    main: string;
+                };
+            };
+        };
+    };
+};

package/dist/types/features/themePreview/configs/snackbar.d.ts

@@ -0,0 +1,43 @@
+import type { SnackbarProviderProps } from 'notistack';
+export declare const snackbarVariantKeys: readonly ["default", "success", "info", "warning", "error"];
+export type SnackbarVariantKey = (typeof snackbarVariantKeys)[number];
+export type SnackbarVariantTheme = {
+    backgroundColor: string;
+    color: string;
+};
+export type SnackbarTheme = Record<SnackbarVariantKey, SnackbarVariantTheme>;
+export type SnackbarProviderTheme = Omit<SnackbarProviderProps, 'children'>;
+export declare const defaultSnackbarTheme: {
+    default: {
+        backgroundColor: string;
+        color: string;
+    };
+    success: {
+        backgroundColor: string;
+        color: string;
+    };
+    info: {
+        backgroundColor: string;
+        color: string;
+    };
+    warning: {
+        backgroundColor: string;
+        color: string;
+    };
+    error: {
+        backgroundColor: string;
+        color: string;
+    };
+};
+export declare const defaultSnackbarProviderProps: {
+    maxSnack: number;
+    autoHideDuration: number;
+    anchorOrigin: {
+        vertical: "top";
+        horizontal: "center";
+    };
+    style: {
+        fontSize: string;
+        lineHeight: string;
+    };
+};

package/dist/types/features/themePreview/configs/surface.d.ts

@@ -0,0 +1,6 @@
+export declare const defaultLayoutSurface: {
+    readonly light: "#4f585c";
+    readonly main: "#232a2d";
+    readonly dark: "#111618";
+    readonly contrastText: "#FFFFFF";
+};

package/dist/types/features/themePreview/configs/table.d.ts

@@ -0,0 +1,47 @@
+import type { OwpTableThemeConfigType } from '@/types';
+type OwpTableHeaderConfigType = NonNullable<OwpTableThemeConfigType['header']>;
+type OwpTableCellConfigType = NonNullable<OwpTableThemeConfigType['cell']>;
+export type ThemePreviewTableCellConfigType = OwpTableCellConfigType & {
+    backgroundColor?: string;
+};
+export type ThemePreviewTableVariantConfigType = {
+    header?: OwpTableHeaderConfigType;
+    cell?: ThemePreviewTableCellConfigType;
+};
+export type ThemePreviewTableRowConfigType = {
+    backgroundColor?: string;
+    hoverBackgroundColor?: string;
+    selectedBackgroundColor?: string;
+};
+export type ThemePreviewTableConfigType = ThemePreviewTableVariantConfigType & {
+    borderRadius?: number | string;
+    field?: ThemePreviewTableVariantConfigType;
+    row?: ThemePreviewTableRowConfigType;
+};
+export declare const defaultTableTheme: {
+    borderRadius: string;
+    header: {
+        backgroundColor: string;
+        color: string;
+        fontSize: string;
+    };
+    cell: {
+        fontSize: string;
+    };
+    row: {
+        backgroundColor: string;
+        hoverBackgroundColor: string;
+        selectedBackgroundColor: string;
+    };
+    field: {
+        header: {
+            fontSize: string;
+            fontWeight: number;
+        };
+        cell: {
+            backgroundColor: string;
+            fontSize: string;
+        };
+    };
+};
+export {};

package/dist/types/features/themePreview/dialogs/ThemePreviewDialog.d.ts

@@ -0,0 +1,3 @@
+import { type DialogComponent } from '@toolpad/core/useDialogs';
+import type { ThemePreviewDialogPayload } from '../types';
+export declare const ThemePreviewDialog: DialogComponent<ThemePreviewDialogPayload, undefined>;

package/dist/types/features/themePreview/dialogs/index.d.ts

@@ -0,0 +1 @@
+export { ThemePreviewDialog } from './ThemePreviewDialog';

package/dist/types/features/themePreview/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useThemePreview } from './useThemePreview';

package/dist/types/features/themePreview/hooks/useThemePreview.d.ts

@@ -0,0 +1,60 @@
+import { type ThemePreviewTemporaryState } from '@/features/themePreview/configs/previewStorage';
+import type { OwpSettingsConfigType } from '@/types';
+import type { PartialDeep } from 'type-fest';
+import type { ThemePreviewMode, ThemePreviewPresetKeyBySection, ThemePreviewPresetThemes, ThemePreviewSectionKey, ThemePreviewSettings } from '../types';
+interface UseThemePreviewOptions {
+    initialSection?: ThemePreviewSectionKey;
+    initialPresetKeys: ThemePreviewPresetKeyBySection;
+    presetThemes: ThemePreviewPresetThemes;
+    resetTheme: PartialDeep<OwpSettingsConfigType['theme']>;
+}
+export declare function useThemePreview({ initialSection, initialPresetKeys: _initialPresetKeys, presetThemes, resetTheme, }: UseThemePreviewOptions): {
+    activeSection: ThemePreviewSectionKey;
+    canApplyToMain: boolean;
+    draftSettings: ThemePreviewSettings;
+    hasTemporaryChanges: boolean;
+    hasTemporarySnapshot: boolean;
+    presetOptions: {
+        key: string;
+        label: string;
+        mode: ThemePreviewMode;
+        sections: import("..").ThemePreviewPaletteSectionKey[];
+    }[];
+    selectedModes: Record<import("..").ThemePreviewPaletteSectionKey, ThemePreviewMode>;
+    selectedPresetKeys: ThemePreviewPresetKeyBySection;
+    setActiveSection: import("react").Dispatch<import("react").SetStateAction<ThemePreviewSectionKey>>;
+    handlePaletteValueChange: (path: string, value: string) => void;
+    handlePaletteValuesChange: (updates: Array<{
+        path: string;
+        value: string;
+    }>) => void;
+    handleApplyToMain: () => void;
+    handleLoadSettings: (theme: OwpSettingsConfigType["theme"], snackbarTheme?: {
+        default: {
+            backgroundColor: string;
+            color: string;
+        };
+        success: {
+            backgroundColor: string;
+            color: string;
+        };
+        info: {
+            backgroundColor: string;
+            color: string;
+        };
+        warning: {
+            backgroundColor: string;
+            color: string;
+        };
+        error: {
+            backgroundColor: string;
+            color: string;
+        };
+    }) => void;
+    handlePresetKeyChange: (presetKey: string) => void;
+    handlePresetModeChange: (mode: ThemePreviewMode) => void;
+    handleReset: () => void;
+    handleTemporaryLoad: () => boolean;
+    handleTemporarySave: (saveType?: ThemePreviewTemporaryState["saveType"]) => void;
+};
+export {};

package/dist/types/features/themePreview/index.d.ts

@@ -0,0 +1,6 @@
+export * from './configs';
+export * from './components';
+export * from './dialogs';
+export * from './hooks';
+export * from './types';
+export * from './utils';

package/dist/types/features/themePreview/types/index.d.ts

@@ -0,0 +1 @@
+export type { ThemePreviewCustomSectionKey, ThemePreviewDialogPayload, ThemePreviewFieldDefinition, ThemePreviewFieldGroup, ThemePreviewMode, ThemePreviewPaletteSectionKey, ThemePreviewPresetKeyBySection, ThemePreviewPresetOption, ThemePreviewPresetSectionKey, ThemePreviewPresetThemes, ThemePreviewSectionKey, ThemePreviewSectionOption, ThemePreviewSettings, } from './themePreview';

package/dist/types/features/themePreview/types/themePreview.d.ts

@@ -0,0 +1,44 @@
+import type { SnackbarProviderTheme, SnackbarTheme } from '@/features/themePreview/configs/snackbar';
+import type { OwpSettingsConfigType, OwpThemesType } from '@/types';
+export type ThemePreviewPaletteSectionKey = Exclude<keyof OwpSettingsConfigType['theme'], 'footer'>;
+export type ThemePreviewPresetSectionKey = ThemePreviewPaletteSectionKey;
+export type ThemePreviewCustomSectionKey = 'grid' | 'table' | 'snackbar';
+export type ThemePreviewSectionKey = ThemePreviewPaletteSectionKey | ThemePreviewCustomSectionKey;
+export type ThemePreviewMode = 'light' | 'dark';
+export type ThemePreviewSettings = Omit<OwpSettingsConfigType, 'snackbar'> & {
+    snackbar: SnackbarTheme;
+    snackbarProviderProps: SnackbarProviderTheme;
+};
+export interface ThemePreviewDialogPayload {
+    initialSection?: ThemePreviewSectionKey;
+}
+export interface ThemePreviewSectionOption {
+    key: ThemePreviewSectionKey;
+    label: string;
+    description?: string;
+}
+export interface ThemePreviewFieldDefinition {
+    path: string;
+    label: string;
+    description?: string;
+    allowAlpha?: boolean;
+    showColorPicker?: boolean;
+    valueFormat?: 'px-number' | 'rem-number';
+    options?: Array<{
+        label: string;
+        value: string;
+    }>;
+}
+export interface ThemePreviewFieldGroup {
+    key: string;
+    label: string;
+    fields: ThemePreviewFieldDefinition[];
+}
+export interface ThemePreviewPresetOption {
+    key: string;
+    label: string;
+    mode: ThemePreviewMode;
+    sections?: ThemePreviewPresetSectionKey[];
+}
+export type ThemePreviewPresetThemes = Partial<Record<string, OwpThemesType[string]>>;
+export type ThemePreviewPresetKeyBySection = Record<ThemePreviewPresetSectionKey, string>;

package/dist/types/features/themePreview/utils/color.d.ts

@@ -0,0 +1,14 @@
+export declare function toColorPickerValue(value?: string, fallback?: string): string;
+export declare function applyColorPickerValue(previousValue: string | undefined, nextPickerValue: string): string;
+export declare function getColorAlphaValue(value?: string): string;
+export declare function canDeriveThemePreviewColor(value?: string): boolean;
+type ThemePreviewDerivedColorOptions = {
+    blackTextColor?: string;
+    whiteTextColor?: string;
+};
+export declare function deriveThemePreviewPaletteGroupValues(mainColor: string, options?: ThemePreviewDerivedColorOptions): {
+    light: string;
+    dark: string;
+    contrastText: string;
+};
+export {};

package/dist/types/features/themePreview/utils/index.d.ts

@@ -0,0 +1,4 @@
+export { applyColorPickerValue, canDeriveThemePreviewColor, deriveThemePreviewPaletteGroupValues, getColorAlphaValue, toColorPickerValue, } from './color';
+export { createThemePreviewExportData } from './themePreviewExport';
+export { themePreviewFieldGroupsBySection, themePreviewSectionOptions } from './themePreviewDefinitions';
+export { isThemePreviewCustomSection, THEME_PREVIEW_CUSTOM_PRESET_KEY, applyThemePreviewPreset, cloneThemePreviewSettings, getThemePreviewDraftSettings, getThemePreviewPaletteValue, getThemePreviewPresetOptions, getThemePreviewPresetOptionsByMode, getThemePreviewResetSettings, resetThemePreviewSessionState, getThemePreviewSectionMode, getThemePreviewSelectionState, setThemePreviewPaletteValues, setThemePreviewPaletteValue, setThemePreviewDraftSettings, setThemePreviewSelectionState, } from './themePreviewSettings';

package/dist/types/features/themePreview/utils/themePreviewDefinitions.d.ts

@@ -0,0 +1,10 @@
+import type { ThemePreviewFieldGroup, ThemePreviewSectionOption } from '../types';
+export declare const themePreviewSectionOptions: ThemePreviewSectionOption[];
+export declare const themePreviewFieldGroupsBySection: {
+    main: ThemePreviewFieldGroup[];
+    navbar: ThemePreviewFieldGroup[];
+    toolbar: ThemePreviewFieldGroup[];
+    grid: ThemePreviewFieldGroup[];
+    table: ThemePreviewFieldGroup[];
+    snackbar: ThemePreviewFieldGroup[];
+};