mui-toolpad-extended-tuni 2.1.0 → 3.0.0

package/dist/src/LMSToolpad/store/useThemeStore.d.ts

@@ -0,0 +1,184 @@
+import { Components, Theme, PaletteMode, PaletteOptions } from '@mui/material/styles';
+import { ColorSchemePreference } from '../utils/cookieUtils';
+export interface TypographyVariantStyle extends Partial<React.CSSProperties> {
+}
+export interface ThemeTypography {
+    fontFamily: string;
+    h1: TypographyVariantStyle;
+    h2: TypographyVariantStyle;
+    h3: TypographyVariantStyle;
+    h4: TypographyVariantStyle;
+    h5: TypographyVariantStyle;
+    h6: TypographyVariantStyle;
+    subtitle1: TypographyVariantStyle;
+    subtitle2: TypographyVariantStyle;
+    body1: TypographyVariantStyle;
+    body2: TypographyVariantStyle;
+    button: TypographyVariantStyle;
+    caption: TypographyVariantStyle;
+    overline: TypographyVariantStyle;
+}
+export interface shape {
+    borderRadius: number;
+}
+export interface colorScheme {
+    palette: PaletteOptions & {
+        mode: PaletteMode;
+        background: {
+            default: string;
+            paper: string;
+        };
+        primary: {
+            main: string;
+            light: string;
+            dark: string;
+            contrastText: string;
+        };
+        secondary: {
+            main: string;
+            light: string;
+            dark: string;
+            contrastText: string;
+        };
+        error: {
+            main: string;
+            light: string;
+            dark: string;
+            contrastText: string;
+        };
+        warning: {
+            main: string;
+            light: string;
+            dark: string;
+            contrastText: string;
+        };
+        info: {
+            main: string;
+            light: string;
+            dark: string;
+            contrastText: string;
+        };
+        success: {
+            main: string;
+            light: string;
+            dark: string;
+            contrastText: string;
+        };
+        text: {
+            primary: string;
+            secondary: string;
+            disabled: string;
+        };
+        divider: string;
+    };
+}
+export interface ThemeBreakpoints {
+    values: {
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+    };
+}
+export interface ThemeComponents {
+    MuiButton: {
+        styleOverrides: {
+            root: {
+                textTransform: string;
+                borderRadius: number;
+            };
+        };
+    };
+    MuiPaper: {
+        styleOverrides: {
+            root: {
+                backgroundImage: string;
+            };
+        };
+    };
+    MuiDialog: {
+        styleOverrides: {
+            paper: {
+                borderRadius: number;
+            };
+        };
+    };
+    MuiCard: {
+        styleOverrides: {
+            root: {
+                borderRadius: number;
+            };
+        };
+    };
+}
+export interface ThemeTransitions {
+    easing: {
+        easeInOut: string;
+        easeOut: string;
+        easeIn: string;
+        sharp: string;
+    };
+    duration: {
+        shortest: number;
+        shorter: number;
+        short: number;
+        standard: number;
+        complex: number;
+        enteringScreen: number;
+        leavingScreen: number;
+    };
+}
+export interface ThemezIndex {
+    mobileStepper: number;
+    fab: number;
+    speedDial: number;
+    appBar: number;
+    drawer: number;
+    modal: number;
+    snackbar: number;
+    tooltip: number;
+}
+interface ThemeTemplate {
+    cssVariables: {
+        colorSchemeSelector: string;
+    };
+    defaultColorScheme: 'light' | 'dark';
+    typography: ThemeTypography;
+    shape: shape;
+    spacing: number;
+    colorSchemes: {
+        light: colorScheme;
+        dark: colorScheme;
+    };
+    breakpoints: ThemeBreakpoints;
+    components: Partial<Components<Theme>>;
+    transitions: ThemeTransitions;
+    zIndex: ThemezIndex;
+}
+export declare const ThemeTemplate: ThemeTemplate;
+export type AppTheme = ThemeTemplate;
+interface ThemeStore {
+    colorSchemePreference: ColorSchemePreference;
+    setColorSchemePreference: (preference: ColorSchemePreference) => void;
+    getTheme: () => AppTheme;
+    updateTheme: (updates: AppTheme) => void;
+    resetTheme: () => void;
+}
+/**
+ * Theme management store with support for custom themes and dark mode.
+ *
+ * @version 2.0.0
+ * @updates
+ * - Color scheme preference stored in cookie (light/dark/system)
+ * - Theme colors always come from ThemeTemplate (not persisted)
+ * - System preference detection for 'system' mode
+ *
+ * @features
+ * - Theme customization (colors, typography, etc.)
+ * - Color scheme preference management (cookie-based)
+ * - System preference detection
+ * - Always uses ThemeTemplate for base colors
+ */
+export declare const useThemeStore: import('zustand/traditional').UseBoundStoreWithEqualityFn<import('zustand').StoreApi<ThemeStore>>;
+export {};

package/dist/src/LMSToolpad/store/useToolbarStore.d.ts

@@ -0,0 +1,8 @@
+/** @format */
+export type toolbarType = string | null;
+type ToolbarState = {
+    currentToolbar: toolbarType;
+    setCurrentToolbar: (toolbar: toolbarType) => void;
+};
+declare const useToolbarStore: import('zustand/traditional').UseBoundStoreWithEqualityFn<import('zustand').StoreApi<ToolbarState>>;
+export default useToolbarStore;

package/dist/src/LMSToolpad/theme/EduMLTheme.d.ts

@@ -0,0 +1,2 @@
+/** @format */
+export declare const EduMLTheme: Omit<import('@mui/material').Theme, "applyStyles"> & import('@mui/material').CssVarsTheme;

package/dist/{LMSToolpad → src/LMSToolpad}/tools/ErrorBoundary.d.ts

@@ -1,4 +1,3 @@
-/** @format */
 import { Component, ErrorInfo, ReactNode } from 'react';
 interface Props {
     children: ReactNode;
@@ -10,6 +9,6 @@ declare class ErrorBoundary extends Component<Props, State> {
     state: State;
     static getDerivedStateFromError(_: Error): State;
     componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
-    render(): import("react/jsx-runtime").JSX.Element | null | undefined;
+    render(): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
 }
 export default ErrorBoundary;

package/dist/src/LMSToolpad/utils/__tests__/courseFilters.test.d.ts

@@ -0,0 +1,2 @@
+/** @format */
+export {};

package/dist/src/LMSToolpad/utils/apiPrefix.d.ts

@@ -0,0 +1,2 @@
+/** @format */
+export declare const getApiPrefix: () => "" | "lms-toolpad/";

package/dist/src/LMSToolpad/utils/cookieUtils.d.ts

@@ -0,0 +1,27 @@
+/** @format */
+export type ColorSchemePreference = 'light' | 'dark' | 'system';
+/**
+ * Get a cookie value by name
+ */
+export declare function getCookie(name: string): string | null;
+/**
+ * Set a cookie value
+ */
+export declare function setCookie(name: string, value: string, days?: number): void;
+/**
+ * Delete a cookie by name
+ */
+export declare function deleteCookie(name: string): void;
+/**
+ * Get the color scheme preference from cookie
+ * Returns 'system' as default if not set
+ */
+export declare function getColorSchemePreference(): ColorSchemePreference;
+/**
+ * Set the color scheme preference in cookie
+ */
+export declare function setColorSchemePreference(preference: ColorSchemePreference): void;
+/**
+ * Get the effective color scheme (resolves 'system' to actual light/dark based on system preference)
+ */
+export declare function getEffectiveColorScheme(preference: ColorSchemePreference): 'light' | 'dark';

package/dist/src/LMSToolpad/utils/parseDate.d.ts

@@ -0,0 +1,2 @@
+import { DateTime } from 'luxon';
+export declare const parseDate: (dateString: string | null | undefined) => DateTime<true> | DateTime<false> | null;

package/dist/src/LMSToolpad/utils/slugify.d.ts

@@ -0,0 +1 @@
+export declare const slugify: (text: string) => string;

package/dist/src/common/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ui';
+export * from './layout';

package/dist/src/common/components/layout/GridLayout/GridItem.d.ts

@@ -0,0 +1,17 @@
+import { default as React, ReactNode } from 'react';
+export interface GridItemProps {
+    children: ReactNode;
+    id: string;
+    isFlexContainer?: boolean;
+}
+/**
+ * Grid item component that applies consistent styling and resize visual feedback.
+ *
+ * Features:
+ * - Visual indication when in resize or move mode
+ * - Consistent styling for all grid items
+ * - Optional flex container for content that needs to fill the space
+ * - Content is non-interactable when in edit mode (using BlurOverlay)
+ */
+declare const GridItem: React.FC<GridItemProps>;
+export default GridItem;

package/dist/src/common/components/layout/GridLayout/GridItemContext.d.ts

@@ -0,0 +1,26 @@
+import { default as React, ReactNode } from 'react';
+import { Layout } from 'react-grid-layout';
+export interface GridItem {
+    id: string;
+    content: ReactNode;
+    layout?: Layout;
+}
+export interface GridItemEntry {
+    id: string;
+    content: ReactNode;
+    layout?: Layout;
+}
+interface GridItemContextType {
+    gridItems: GridItemEntry[];
+    registerGridItem: (id: string, content: ReactNode, layout?: Layout) => void;
+    unregisterGridItem: (id: string) => void;
+    getGridItem: (id: string) => GridItemEntry | undefined;
+    getAllGridItems: () => GridItemEntry[];
+}
+declare const GridItemContext: React.Context<GridItemContextType | undefined>;
+export declare const useGridItemContext: () => GridItemContextType;
+interface GridItemProviderProps {
+    children: ReactNode;
+}
+export declare const GridItemProvider: React.FC<GridItemProviderProps>;
+export default GridItemContext;

package/dist/src/common/components/layout/GridLayout/ResponsiveGridLayout.d.ts

@@ -0,0 +1,16 @@
+import { default as React, ReactNode } from 'react';
+import { Layout } from 'react-grid-layout';
+export interface GridItem {
+    id: string;
+    content: ReactNode;
+    layout?: Layout;
+}
+export interface GridLayoutProps {
+    items: GridItem[];
+    storageKey: string;
+    defaultLayouts: {
+        [key: string]: Layout[];
+    };
+}
+declare const ResponsiveGridLayout: React.FC<GridLayoutProps>;
+export default ResponsiveGridLayout;

package/dist/src/common/components/layout/GridLayout/Tools/BreakpointIndicator.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+/**
+ * Shows which responsive breakpoint is currently active
+ */
+declare const BreakpointIndicator: React.FC<{
+    showLabel?: boolean;
+}>;
+export default BreakpointIndicator;

package/dist/src/common/components/layout/GridLayout/Tools/EditModeToggler.d.ts

@@ -0,0 +1,7 @@
+/** @format */
+/**
+ * Toggles edit mode for the grid layout system.
+ * This activates both resize and move functionality at once.
+ */
+declare const EditModeToggler: () => import("react/jsx-runtime").JSX.Element;
+export default EditModeToggler;

package/dist/src/common/components/layout/GridLayout/hooks/useGridLayoutManagement.d.ts

@@ -0,0 +1,27 @@
+import { Layout, Layouts } from 'react-grid-layout';
+/**
+ * Options for the useGridLayoutManagement hook
+ */
+interface UseGridLayoutManagementOptions {
+    /** Storage key for persisting layouts */
+    storageKey: string;
+    /** Default layouts to use if none found in storage */
+    defaultLayouts: Layouts;
+    /** Function to run when layout changes */
+    onLayoutChangeCallback?: (layouts: Layouts) => void;
+    /** Debounce time for saving to localStorage (ms) */
+    debounceTime?: number;
+}
+/**
+ * Hook for managing grid layouts, including persistence, updates, and preset handling
+ *
+ * @param options Configuration options
+ * @returns Layout management utilities
+ */
+export declare function useGridLayoutManagement({ storageKey, defaultLayouts, onLayoutChangeCallback, debounceTime, }: UseGridLayoutManagementOptions): {
+    layouts: Layouts;
+    onLayoutChange: (_: Layout[], allLayouts: Layouts) => void;
+    applyLayout: (newLayouts: Layouts) => void;
+    resetToDefault: () => void;
+};
+export {};

package/dist/src/common/components/layout/GridLayout/index.d.ts

@@ -0,0 +1,12 @@
+/** @format */
+export * from './GridItemContext';
+export * from './layoutUtils';
+export { default as GridItem } from './GridItem';
+export { default as ResponsiveGridLayout } from './ResponsiveGridLayout';
+export type { GridItem as GridItemType, GridLayoutProps } from './ResponsiveGridLayout';
+export { default as useGridLayout } from './useGridLayout';
+export * from './layoutStorageUtils';
+export * from './hooks/useGridLayoutManagement';
+export { default as EditModeToggler } from './Tools/EditModeToggler';
+export { default as BreakpointIndicator } from './Tools/BreakpointIndicator';
+export * from './store/usePanelStore';

package/dist/src/common/components/layout/GridLayout/layoutStorageUtils.d.ts

@@ -0,0 +1,52 @@
+import { Layouts } from 'react-grid-layout';
+/**
+ * Helper function to get layout from localStorage
+ * @param key Storage key for the layout
+ * @returns The stored layout or null if not found
+ */
+export declare function getFromLS(key: string): Layouts | null;
+/**
+ * Helper function to save layout to localStorage
+ * @param key Storage key for the layout
+ * @param value The layout to store
+ */
+export declare function saveToLS(key: string, value: Layouts): void;
+export declare const USER_PRESETS_KEY = "user-layout-presets";
+/**
+ * Layout preset interface
+ */
+export interface LayoutPreset {
+    id: string;
+    name: string;
+    layouts: Layouts;
+    createdAt?: number;
+    updatedAt?: number;
+}
+/**
+ * Helper function to get user presets from localStorage
+ * @returns Array of user-defined layout presets
+ */
+export declare function getUserPresets(): LayoutPreset[];
+/**
+ * Helper function to save a user preset to localStorage
+ * @param name Name of the preset
+ * @param layouts Layout configuration to save
+ * @returns ID of the newly created preset
+ */
+export declare function saveUserPreset(name: string, layouts: Layouts): string;
+/**
+ * Helper function to delete a user preset from localStorage
+ * @param presetId ID of the preset to delete
+ * @returns true if deletion was successful, false otherwise
+ */
+export declare function deleteUserPreset(presetId: string): boolean;
+/**
+ * Helper function to update a user preset in localStorage
+ * @param presetId ID of the preset to update
+ * @param updates Object with properties to update
+ * @returns true if update was successful, false otherwise
+ */
+export declare function updateUserPreset(presetId: string, updates: Partial<{
+    name: string;
+    layouts: Layouts;
+}>): boolean;

package/dist/src/common/components/layout/GridLayout/layoutUtils.d.ts

@@ -0,0 +1,78 @@
+import { Layout } from 'react-grid-layout';
+/**
+ * Options for creating a grid item layout.
+ * All properties are optional, allowing for flexible grid item creation.
+ */
+export interface CreateGridItemOptions {
+    /**
+     * Unique identifier for the grid item.
+     * If not provided, a unique ID will be generated.
+     */
+    id?: string;
+    /**
+     * X position in the grid (column index).
+     * Defaults to 0 if not specified.
+     */
+    x?: number;
+    /**
+     * Y position in the grid (row index).
+     * Defaults to 0 if not specified.
+     */
+    y?: number;
+    /**
+     * Width of the grid item in grid units.
+     * If null, the item will span the full width of the grid.
+     * Defaults to 1 if not specified.
+     */
+    w?: number | null;
+    /**
+     * Height of the grid item in grid units.
+     * Defaults to 1 if not specified.
+     */
+    h?: number | null;
+    /**
+     * Minimum width constraint.
+     * Defaults to 1 if not specified.
+     */
+    minW?: number;
+    /**
+     * Maximum width constraint.
+     * If null, no maximum width constraint.
+     */
+    maxW?: number | null;
+    /**
+     * Minimum height constraint.
+     * Defaults to 1 if not specified.
+     */
+    minH?: number;
+    /**
+     * Maximum height constraint.
+     * If null, no maximum height constraint.
+     */
+    maxH?: number | null;
+    /**
+     * Whether the item is static (cannot be moved or resized).
+     * Defaults to false.
+     */
+    static?: boolean;
+}
+/**
+ * Creates a grid item layout configuration.
+ *
+ * @example
+ * // Create a grid item with default settings
+ * createGridItem({ id: "my-item" });
+ *
+ * @example
+ * // Create a grid item with specific dimensions
+ * createGridItem({ id: "my-item", x: 0, y: 0, w: 7, h: 5 });
+ *
+ * @example
+ * // Create a full-width grid item
+ * createGridItem({
+ *   id: "my-item",
+ *   w: null, // null means full width
+ *   h: 5
+ * });
+ */
+export declare function createGridItem(options: CreateGridItemOptions): Layout;

package/dist/src/common/components/layout/GridLayout/store/usePanelStore.d.ts

@@ -0,0 +1,27 @@
+/** @format */
+interface PanelState {
+    editMode: boolean;
+    toggleEditMode: () => void;
+    resizeMode: boolean;
+    toggleResizeMode: () => void;
+    moveMode: boolean;
+    toggleMoveMode: () => void;
+}
+/**
+ * Store for managing panel state related to grid layouts.
+ *
+ * This uses a single editMode that enables both dragging and resizing.
+ * It also manages saved layout presets.
+ */
+export declare const usePanelStore: import('zustand/traditional').UseBoundStoreWithEqualityFn<Omit<import('zustand').StoreApi<PanelState>, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<import('zustand/middleware').PersistOptions<PanelState, PanelState>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: PanelState) => void) => () => void;
+        onFinishHydration: (fn: (state: PanelState) => void) => () => void;
+        getOptions: () => Partial<import('zustand/middleware').PersistOptions<PanelState, PanelState>>;
+    };
+}>;
+export default usePanelStore;

package/dist/src/common/components/layout/GridLayout/useGridLayout.d.ts

@@ -0,0 +1,11 @@
+/** @format */
+/**
+ * Hook to manage grid layout state
+ *
+ * @returns Object containing grid layout state and actions
+ */
+declare const useGridLayout: () => {
+    editMode: boolean;
+    toggleEditMode: () => void;
+};
+export default useGridLayout;

package/dist/src/common/components/layout/index.d.ts

@@ -0,0 +1 @@
+export * from './GridLayout';

package/dist/src/common/components/ui/CollapsingButtons/CollapsingButtons.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+interface CollapsingButtonsProps {
+    collapseIcon: React.ReactNode;
+    children: React.ReactNode;
+    collapseWidth: number;
+    delay?: number;
+    tooltipTitle?: string;
+    fullWidth?: boolean;
+}
+export declare const CollapsingButtons: ({ collapseIcon, children, collapseWidth, delay, tooltipTitle, fullWidth, }: CollapsingButtonsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/common/components/ui/CompoundPanel/CompoundPanel.d.ts

@@ -0,0 +1,86 @@
+import { default as React } from 'react';
+import { PanelProps } from '../Panel/Main/Context/PanelContextProvider';
+export interface CompoundPanelProps extends PanelProps {
+    /**
+     * Content to be displayed in the panel
+     */
+    children: React.ReactNode;
+    /**
+     * Whether the panel should display in a horizontal scroller
+     */
+    horizontalScroll?: boolean;
+    /**
+     * Whether the panel should display in a vertical scroller
+     */
+    verticalScroll?: boolean;
+    /**
+     * Optional title for the panel's horizontal scroller
+     */
+    title?: string;
+    /**
+     * Priority level for title styling
+     */
+    priority?: "high" | "low" | "normal";
+    /**
+     * Automatically arrange children as sections (useful for course sections)
+     * Each direct child will be rendered as a horizontal section inside a vertical scroller
+     */
+    sections?: boolean;
+}
+/**
+ * CompoundPanel - An all-in-one panel component that encapsulates all functionality
+ * needed for panels in the LMS system, including scrolling, expanding, and resizing.
+ *
+ * @example - Simple scrolling panel
+ * ```tsx
+ * <CompoundPanel
+ *   id="my-panel"
+ *   defaultWidth={300}
+ *   defaultHeight={200}
+ *   horizontalScroll={true}
+ *   title="My Panel"
+ * >
+ *   <Item1 />
+ *   <Item2 />
+ * </CompoundPanel>
+ * ```
+ *
+ * @example - Sectioned panel (auto-creates horizontal sections within vertical scroll)
+ * ```tsx
+ * <CompoundPanel
+ *   id="sections-panel"
+ *   sections={true}
+ * >
+ *   <Section title="Section 1" priority="high">
+ *     <Item1 />
+ *     <Item2 />
+ *   </Section>
+ *   <Section title="Section 2">
+ *     <Item3 />
+ *     <Item4 />
+ *   </Section>
+ * </CompoundPanel>
+ * ```
+ */
+export declare const CompoundPanel: React.FC<CompoundPanelProps>;
+export interface SectionProps {
+    title?: string;
+    priority?: "high" | "low" | "normal";
+    children: React.ReactNode;
+}
+/**
+ * Section - A component that defines a horizontal section within a CompoundPanel.
+ * Used with CompoundPanel's sections={true} property.
+ *
+ * @example
+ * ```tsx
+ * <CompoundPanel sections={true}>
+ *   <Section title="My Section" priority="high">
+ *     <Item1 />
+ *     <Item2 />
+ *   </Section>
+ * </CompoundPanel>
+ * ```
+ */
+export declare const Section: React.FC<SectionProps>;
+export default CompoundPanel;

package/dist/src/common/components/ui/Panel/Expandable/Expandable.d.ts

@@ -0,0 +1,4 @@
+/** @format */
+declare const Expandable: () => null;
+export declare const ExpandTool: () => import("react/jsx-runtime").JSX.Element;
+export default Expandable;

package/dist/src/common/components/ui/Panel/Expandable/context/ExpandableContextProvider.d.ts

@@ -0,0 +1,10 @@
+import { default as React, ReactNode } from 'react';
+interface ExpandableContextType {
+    isExpanded: boolean;
+    setIsExpanded: React.Dispatch<React.SetStateAction<boolean>>;
+}
+export declare const ExpandableContextProvider: ({ children, }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useExpandableContext: () => ExpandableContextType;
+export {};

package/dist/src/common/components/ui/Panel/Expandable/hooks/useCollapseHandler.d.ts

@@ -0,0 +1,2 @@
+import { PanelRef } from '../../types';
+export declare const useCollapseHandler: (isExpanded: boolean, expandedPanelId: string | null, id: string, panelRef: PanelRef, setExtendedStyle: (style: React.CSSProperties) => void, setExtendedContainerStyle: (style: React.CSSProperties) => void, setIsExpanded: (expanded: boolean) => void) => void;