@rebasepro/app 0.17.3 → 0.18.1

package/src/hooks/useBuildLocalConfigurationPersistence.tsx

@@ -1,83 +0,0 @@
-import { useCallback, useEffect, useRef, useState, useMemo } from "react";
-import { PartialCollectionConfig, UserConfigurationPersistence } from "@rebasepro/cms-types";
-import { stripCollectionPath } from "@rebasepro/common";
-import { isArrayValue, isRecordValue, mergeDeep, readStoredJson, writeStoredJson } from "@rebasepro/utils";
-
-export function useBuildLocalConfigurationPersistence(): UserConfigurationPersistence {
-
-    const configCache = useRef<Record<string, PartialCollectionConfig>>({});
-
-    // Read during render by every collection view, so an unreadable value here
-    // used to throw the view away rather than fall back to an unconfigured one.
-    const getCollectionFromStorage = useCallback(<M extends Record<string, any>>(storageKey: string): PartialCollectionConfig<M> => {
-        return readStoredJson<PartialCollectionConfig<M>>(storageKey, { fallback: {}, accept: isRecordValue });
-    }, []);
-
-    const getCollectionConfig = useCallback(<M extends Record<string, any>>(path: string): PartialCollectionConfig<M> => {
-        const storageKey = `collection_config::${stripCollectionPath(path)}`;
-        if (configCache.current[storageKey]) {
-            return configCache.current[storageKey] as PartialCollectionConfig<M>;
-        }
-        return getCollectionFromStorage(storageKey);
-    }, [getCollectionFromStorage]);
-
-    const onCollectionModified = useCallback(<M extends Record<string, any>>(path: string, data: PartialCollectionConfig<M>) => {
-        const storageKey = `collection_config::${stripCollectionPath(path)}`;
-        writeStoredJson(storageKey, data);
-        const cachedConfig = configCache.current[storageKey];
-        // `getCollectionFromStorage` takes the storage key, not the path — every
-        // other caller passes one. Reading `path` looked up a key this hook
-        // never writes, so the fallback could only ever contribute `{}`. It is
-        // masked today because the one caller merges the stored config in
-        // before calling, but `onCollectionModified` accepts a partial by type
-        // and by its public interface, and a real partial would lose the rest.
-        const newConfig = mergeDeep(cachedConfig ?? getCollectionFromStorage(storageKey), data);
-        configCache.current[storageKey] = mergeDeep(configCache.current[storageKey], newConfig);
-    }, [getCollectionFromStorage]);
-
-    const [recentlyVisitedPaths, _setRecentlyVisitedPaths] = useState<string[]>([]);
-    const [favouritePaths, _setFavouritePaths] = useState<string[]>([]);
-    const [collapsedGroups, _setCollapsedGroups] = useState<string[]>([]);
-
-    useEffect(() => {
-        const readPaths = (key: string) => readStoredJson<string[]>(key, { fallback: [], accept: isArrayValue });
-        _setRecentlyVisitedPaths(readPaths("recently_visited_paths"));
-        _setFavouritePaths(readPaths("favourite_paths"));
-        _setCollapsedGroups(readPaths("collapsed_groups"));
-    }, []);
-
-    const setRecentlyVisitedPaths = useCallback((paths: string[]) => {
-        writeStoredJson("recently_visited_paths", paths);
-        _setRecentlyVisitedPaths(paths);
-    }, []);
-
-    const setFavouritePaths = useCallback((paths: string[]) => {
-        writeStoredJson("favourite_paths", paths);
-        _setFavouritePaths(paths);
-    }, []);
-
-    const setCollapsedGroups = useCallback((paths: string[]) => {
-        writeStoredJson("collapsed_groups", paths);
-        _setCollapsedGroups(paths);
-    }, []);
-
-    return useMemo(() => ({
-        onCollectionModified,
-        getCollectionConfig,
-        recentlyVisitedPaths,
-        setRecentlyVisitedPaths,
-        favouritePaths,
-        setFavouritePaths,
-        collapsedGroups,
-        setCollapsedGroups
-    }), [
-        onCollectionModified,
-        getCollectionConfig,
-        recentlyVisitedPaths,
-        setRecentlyVisitedPaths,
-        favouritePaths,
-        setFavouritePaths,
-        collapsedGroups,
-        setCollapsedGroups
-    ]);
-}

package/src/hooks/useBuildModeController.tsx

@@ -1,73 +0,0 @@
-import { useCallback, useEffect, useState, useMemo } from "react";
-
-import type { ModeController } from "./useModeController";
-import { readStoredString, removeStoredString, writeStoredString } from "../util/local_storage";
-
-/**
- * Use this hook to build a color mode controller that determines
- * the theme of the admin
- */
-export function useBuildModeController(): ModeController {
-
-    const prefersDarkModeQuery = useCallback((): boolean => {
-        if (typeof window === "undefined")
-            return false;
-        const mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
-        return mediaQueryList.matches;
-    }, []);
-
-    const [mode, setMode] = useState<"light" | "dark">(() => {
-        const storedPrefersDarkMode = readStoredString("prefers-dark-mode");
-        const prefersDarkModeStorage = storedPrefersDarkMode != null
-            ? storedPrefersDarkMode === "true"
-            : null;
-        const prefersDarkMode = prefersDarkModeStorage ?? prefersDarkModeQuery();
-        return prefersDarkMode ? "dark" : "light";
-    });
-
-    useEffect(() => {
-        const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-        const handleChange = (e: MediaQueryListEvent) => {
-            if (readStoredString("prefers-dark-mode") == null) {
-                setMode(e.matches ? "dark" : "light");
-                setDocumentMode(e.matches ? "dark" : "light");
-            }
-        };
-
-        // Initial setup
-        setDocumentMode(mode);
-
-        mediaQuery.addEventListener("change", handleChange);
-        return () => mediaQuery.removeEventListener("change", handleChange);
-    }, []);
-
-    const setDocumentMode = (mode: "light" | "dark") => {
-        if (mode === "dark") {
-            document.documentElement.classList.add("dark");
-        } else {
-            document.documentElement.classList.remove("dark");
-        }
-    };
-
-    const setModeInternal = useCallback((mode: "light" | "dark" | "system") => {
-        if (mode === "light") {
-            setDocumentMode("light");
-            writeStoredString("prefers-dark-mode", "false");
-            setMode("light");
-        } else if (mode === "dark") {
-            setDocumentMode("dark");
-            writeStoredString("prefers-dark-mode", "true");
-            setMode("dark");
-        } else {
-            const preferredMode = prefersDarkModeQuery() ? "dark" : "light";
-            setDocumentMode(preferredMode);
-            removeStoredString("prefers-dark-mode");
-            setMode(preferredMode);
-        }
-    }, [prefersDarkModeQuery]);
-
-    return useMemo(() => ({
-        mode,
-        setMode: setModeInternal
-    }), [mode, setModeInternal]);
-}

package/src/hooks/useClipboard.tsx

@@ -1,158 +0,0 @@
-// FORKED FROM https://github.com/fayeed/use-clipboard
-
-import { MutableRefObject, useCallback, useEffect, useRef, useState, useMemo } from "react";
-
-export interface UseClipboardProps {
-    /**
-     * It's callback function that is called after the `copy` command
-     * is executed.
-     *
-     * @param text: The selected clipboard text.
-     */
-    onSuccess?: (text: string) => void;
-
-    /**
-     * Triggers when the hook encounters an error.
-     * If passed hook won't throw an error.
-     *
-     * @param error: cause of the error
-     */
-    onError?: (error: string) => void;
-
-    /**
-     * Disables the new clipboard API `navigator.clipboard` even if
-     * it is supported.
-     */
-    disableClipboardAPI?: boolean;
-
-    /**
-     * revert back the isCopied flag to false again if a value is set.
-     */
-    copiedDuration?: number;
-}
-
-export interface useClipboardReturnType {
-    /**
-     * Use ref to pull the text content from.
-     */
-    ref: MutableRefObject<any>;
-
-    /**
-     * Use it to perform the copy operation
-     */
-    copy: (text?: string) => void;
-
-    /**
-     * Use it to perform the cut operation
-     */
-    cut: () => void;
-
-    /**
-     * Indicates wheater the content was successfully copied or not.
-     */
-    isCoppied: boolean;
-
-    /**
-     * Current selected clipboard content.
-     */
-    clipboard: string;
-
-    /**
-     * Clears the user clipboard.
-     */
-    clearClipboard: () => void;
-
-    /**
-     * Check to see if the browser supports the new `navigator.clipboard` API.
-     */
-    isSupported: () => boolean;
-}
-
-export const useClipboard = (
-    options?: UseClipboardProps
-): useClipboardReturnType => {
-    const { onSuccess, onError, disableClipboardAPI = false, copiedDuration } =
-    options || {};
-    const ref = useRef<any>(null);
-    const [isCoppied, setIsCoppied] = useState(false);
-    const [clipboard, setClipbaord] = useState("");
-
-    useEffect(() => {
-        if (copiedDuration) setTimeout(() => setIsCoppied(false), copiedDuration);
-    }, [isCoppied]);
-
-    const isSupported = useCallback(() => navigator.clipboard !== undefined, []);
-
-    const handleError = useCallback((error: string) => {
-        if (onError) onError(error);
-        else throw new Error(error);
-    }, [onError]);
-
-    const handleSuccess = useCallback((text: string) => {
-        if (onSuccess) onSuccess(text);
-        setIsCoppied(true);
-        setClipbaord(text);
-    }, [onSuccess]);
-
-    const copyToClipboard = useCallback((text: string) => {
-        navigator.clipboard
-            .writeText(text)
-            .then(() => handleSuccess(text))
-            .catch((err) => {
-                handleError(err);
-                setIsCoppied(false);
-            });
-    }, [handleError, handleSuccess]);
-
-    const clearClipboard = useCallback(() => {
-        if (isSupported()) {
-            navigator.clipboard.writeText("");
-        }
-    }, [isSupported]);
-
-    const action = useCallback(
-        (operation = "copy", text?: string) => {
-            const element = ref.current as HTMLElement;
-
-            const isInput =
-                element &&
-                (element.tagName === "INPUT" || element.tagName === "TEXTAREA");
-
-            const input = ref.current as HTMLInputElement;
-
-            if (isSupported() && !disableClipboardAPI) {
-                if (text) {
-                    copyToClipboard(text);
-                } else if (element) {
-                    if (isInput) {
-                        copyToClipboard(input.value);
-
-                        if (operation === "cut") {
-                            input.value = "";
-                        }
-                    } else {
-                        copyToClipboard(element.innerText);
-                    }
-                } else {
-                    handleError("Both the ref & text were undefined");
-                }
-            }
-        },
-        [disableClipboardAPI, copyToClipboard, handleError]
-    );
-
-    const copy = useCallback((text?: string) =>
-        action("copy", typeof text === "object" ? undefined : text), [action]);
-
-    const cut = useCallback(() => action("cut"), [action]);
-
-    return useMemo(() => ({
-        ref,
-        isCoppied,
-        clipboard,
-        clearClipboard,
-        isSupported,
-        copy,
-        cut
-    }), [isCoppied, clipboard, clearClipboard, isSupported, copy, cut]);
-};

package/src/hooks/useCollapsedGroups.ts

@@ -1,116 +0,0 @@
-import { useCallback, useEffect, useState, useMemo } from "react";
-
-const STORAGE_KEY_PREFIX = "rebase-collapsed-groups";
-
-/**
- * Custom hook for managing collapsed/expanded state of navigation groups
- * with localStorage persistence. Automatically cleans up stale group entries
- * when groups are removed from the navigation.
- *
- * Groups that have never been toggled by the user fall back to
- * `defaults[groupName]` (driven by `collapsedByDefault` in config).
- *
- * @param groupNames - Array of group names to track
- * @param namespace - Namespace for localStorage key (e.g., "home", "drawer") to allow independent state
- * @param defaults - Optional map of group name → collapsed boolean from config
- */
-export function useCollapsedGroups(
-    groupNames: string[],
-    namespace = "default",
-    defaults?: Record<string, boolean>
-) {
-    const storageKey = `${STORAGE_KEY_PREFIX}-${namespace}`;
-
-    // Load collapsed groups from localStorage on mount
-    const [collapsedGroups, setCollapsedGroups] = useState<Record<string, boolean>>(() => {
-        try {
-            const stored = localStorage.getItem(storageKey);
-            return stored ? JSON.parse(stored) : {};
-        } catch {
-            return {};
-        }
-    });
-
-    // Save to localStorage whenever collapsedGroups changes
-    useEffect(() => {
-        try {
-            localStorage.setItem(storageKey, JSON.stringify(collapsedGroups));
-        } catch {
-            // Silently fail if localStorage is not available
-        }
-    }, [collapsedGroups, storageKey]);
-
-    // Clean up collapsed groups state when groups change - remove entries for groups that no longer exist
-    useEffect(() => {
-        // Only clean up if we have actual groups loaded (avoid cleaning up during initial load)
-        if (groupNames.length === 0) return;
-
-        const currentGroupNames = new Set(groupNames);
-
-        setCollapsedGroups(prev => {
-            const cleaned = Object.fromEntries(
-                Object.entries(prev).filter(([groupName]) => currentGroupNames.has(groupName))
-            );
-
-            // Only update if something actually changed
-            const prevKeys = Object.keys(prev);
-            const cleanedKeys = Object.keys(cleaned);
-
-            if (prevKeys.length === cleanedKeys.length && prevKeys.every(key => cleanedKeys.includes(key))) {
-                return prev;
-            }
-
-            return cleaned;
-        });
-    }, [groupNames]);
-
-    const isGroupCollapsed = useCallback((name: string) => {
-        // If the user has explicitly toggled this group, use that value
-        if (name in collapsedGroups) {
-            return collapsedGroups[name];
-        }
-        // Otherwise fall back to the config default
-        return defaults?.[name] ?? false;
-    }, [collapsedGroups, defaults]);
-
-    const toggleGroupCollapsed = useCallback((name: string) => {
-        setCollapsedGroups(prev => {
-            // Resolve current effective state (explicit or default)
-            const currentlyCollapsed = name in prev
-                ? prev[name]
-                : (defaults?.[name] ?? false);
-            return { ...prev,
-[name]: !currentlyCollapsed };
-        });
-    }, [defaults]);
-
-    return useMemo(() => ({
-        isGroupCollapsed,
-        toggleGroupCollapsed
-    }), [isGroupCollapsed, toggleGroupCollapsed]);
-}
-
-/**
- * Build a defaults map from navigationGroupMappings for a given namespace.
- * Returns a Record<groupName, collapsed> that can be passed to useCollapsedGroups.
- */
-export function buildCollapsedDefaults(
-    mappings: Array<{ name: string; collapsedByDefault?: boolean | { drawer?: boolean; home?: boolean } }> | undefined,
-    namespace: "drawer" | "home"
-): Record<string, boolean> {
-    if (!mappings) return {};
-    const result: Record<string, boolean> = {};
-    for (const mapping of mappings) {
-        const val = mapping.collapsedByDefault;
-        if (val === undefined) continue;
-        if (typeof val === "boolean") {
-            result[mapping.name] = val;
-        } else {
-            const ns = val[namespace];
-            if (ns !== undefined) {
-                result[mapping.name] = ns;
-            }
-        }
-    }
-    return result;
-}

package/src/hooks/useComponentOverride.tsx

@@ -1,59 +0,0 @@
-import React, { useContext, useMemo } from "react";
-import type { OverridableComponentName } from "@rebasepro/cms-types";
-import { ComponentOverrideContext } from "../contexts/ComponentOverrideContext";
-
-/**
- * Resolves a potentially overridden component.
- *
- * Resolution order:
- * 1. Collection-scoped override (highest priority)
- * 2. Global override
- * 3. Default component (fallback)
- *
- * Supports two override modes:
- * - **Eject** (default): The override component fully replaces the default.
- * - **Wrap** (`wrap: true`): The override component wraps the default.
- *   The default is passed as `OriginalComponent` in props.
- *
- * @param name - The overridable component name (e.g. `"Entity.Form"`)
- * @param DefaultComponent - The built-in default component
- * @returns The resolved component — either the default, a full replacement, or a wrapper
- *
- * @example
- * ```tsx
- * import { useComponentOverride } from "@rebasepro/app";
- *
- * function EntityFormWrapper(props: EntityFormProps) {
- *     const ResolvedForm = useComponentOverride("Entity.Form", DefaultEntityForm);
- *     return <ResolvedForm {...props} />;
- * }
- * ```
- *
- * @group Hooks
- */
-export function useComponentOverride<P>(
-    name: OverridableComponentName,
-    DefaultComponent: React.ComponentType<P>
-): React.ComponentType<P> {
-    const { globalOverrides, collectionOverrides } = useContext(ComponentOverrideContext);
-
-    return useMemo(() => {
-        // Collection-level overrides have highest priority
-        const override = collectionOverrides[name] ?? globalOverrides[name];
-
-        if (!override) return DefaultComponent;
-
-        if (override.wrap) {
-            // Wrapping mode: inject OriginalComponent as a prop
-            const UserComponent = override.Component;
-            const Wrapper = (props: P) => (
-                <UserComponent {...(props as Record<string, unknown>)} OriginalComponent={DefaultComponent} />
-            );
-            Wrapper.displayName = `Wrapped(${name})`;
-            return Wrapper as React.ComponentType<P>;
-        }
-
-        // Eject mode: full replacement
-        return override.Component as React.ComponentType<P>;
-    }, [collectionOverrides, globalOverrides, name, DefaultComponent]);
-}

package/src/hooks/useCustomizationController.tsx

@@ -1,14 +0,0 @@
-import type { CustomizationController } from "@rebasepro/cms-types";
-import { useContext } from "react";
-import { CustomizationControllerContext } from "../contexts/CustomizationControllerContext";
-
-/**
- * Use this hook to retrieve the customization controller.
- * This hook includes all the customization options that can be used
- * to customize the admin.
- *
- * You will likely not need to use this hook directly.
- *
- * @group Hooks and utilities
- */
-export const useCustomizationController = (): CustomizationController => useContext(CustomizationControllerContext);

package/src/hooks/useDialogsController.tsx

@@ -1,15 +0,0 @@
-import type { DialogsController } from "@rebasepro/cms-types";
-import { useContext } from "react";
-import { DialogsControllerContext } from "../contexts/DialogsProvider";
-;
-
-/**
- * Use this hook to open a dialog imperatively.
- * Alternatively, you can use dialogs declaratively using the `Dialog` component.
- *
- * Consider that in order to use this hook you need to have a parent
- * `Rebase`
- *
- * @group Hooks and utilities
- */
-export const useDialogsController = (): DialogsController => useContext(DialogsControllerContext);

package/src/hooks/useEffectiveRoleController.tsx

@@ -1,10 +0,0 @@
-import { useContext } from "react";
-import { EffectiveRoleControllerContext } from "../contexts/EffectiveRoleController";
-
-/**
- * Hook to retrieve the {@link EffectiveRoleController}
- *
- * @see EffectiveRoleController
- * @category Hooks and utilities
- */
-export const useEffectiveRoleController = () => useContext(EffectiveRoleControllerContext);

package/src/hooks/useLargeLayout.tsx

@@ -1,65 +0,0 @@
-import { useEffect, useState } from "react";
-
-type LayoutListener = (isLargeLayout: boolean) => void;
-
-const breakpoints = {
-    xs: 0,
-    sm: 640,
-    md: 768,
-    lg: 1024,
-    xl: 1280,
-    "2xl": 1536,
-    "3xl": 1920
-}
-
-// Global state and listeners array
-let isLargeLayoutGlobal = checkLargeLayout("lg"); // Default value
-const listeners: LayoutListener[] = [];
-
-// Utility to notify all listeners
-const notifyListeners = () => {
-    listeners.forEach(listener => listener(isLargeLayoutGlobal));
-};
-
-// Listen to resize events once, at a global level
-if (typeof window !== "undefined")
-    window.addEventListener("resize", () => {
-        const newIsLargeLayout = checkLargeLayout("lg");
-        if (newIsLargeLayout !== isLargeLayoutGlobal) {
-            isLargeLayoutGlobal = newIsLargeLayout;
-            notifyListeners();
-        }
-    });
-
-export const useLargeLayout = () => {
-    const [isLargeLayout, setIsLargeLayout] = useState(isLargeLayoutGlobal);
-
-    useEffect(() => {
-        // Listener function to update component state
-        const listener: LayoutListener = (newIsLargeLayout) => {
-            setIsLargeLayout(newIsLargeLayout);
-        };
-
-        // Register listener
-        listeners.push(listener);
-
-        // Initial state
-        setIsLargeLayout(isLargeLayoutGlobal);
-
-        // Clean up by removing the listener
-        return () => {
-            const index = listeners.indexOf(listener);
-            if (index > -1) {
-                listeners.splice(index, 1);
-            }
-        };
-    }, []);
-
-    return isLargeLayout;
-};
-
-function checkLargeLayout(breakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" = "lg"): boolean {
-    if (typeof window === "undefined")
-        return false;
-    return window.matchMedia(`(min-width: ${breakpoints[breakpoint] + 1}px)`).matches;
-}

package/src/hooks/useModeController.tsx

@@ -1,23 +0,0 @@
-import { ModeControllerContext } from "../contexts/ModeController";
-import { useContext } from "react";
-
-/**
- * Use this controller to change color mode
- * @group Hooks and utilities
- */
-export interface ModeController {
-    mode: "light" | "dark";
-    setMode: (mode: "light" | "dark" | "system") => void;
-}
-
-/**
- * Hook to retrieve the current mode ("light" | "dark"), and `setMode`
- * or `toggle` functions to change it.
- *
- * Consider that in order to use this hook you need to have a parent
- * `Rebase`
- *
- * @see ModeController
- * @group Hooks and utilities
- */
-export const useModeController = () => useContext(ModeControllerContext);