@rebasepro/app 0.0.1-canary.4829d6e

package/src/hooks/useClipboard.tsx

@@ -0,0 +1,158 @@
+// 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

@@ -0,0 +1,116 @@
+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

@@ -0,0 +1,59 @@
+import React, { useContext, useMemo } from "react";
+import type { OverridableComponentName } from "@rebasepro/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

@@ -0,0 +1,14 @@
+import type { CustomizationController } from "@rebasepro/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 CMS.
+ *
+ * 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

@@ -0,0 +1,15 @@
+import type { DialogsController } from "@rebasepro/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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,65 @@
+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

@@ -0,0 +1,23 @@
+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);

package/src/hooks/usePermissions.ts

@@ -0,0 +1,44 @@
+import type { CollectionConfig } from "@rebasepro/types";
+import { useAuthController } from "./useAuthController";
+import { Entity } from "@rebasepro/types";
+import { canCreateEntity, canEditEntity, canDeleteEntity, canReadCollection } from "@rebasepro/common";
+import { useCallback, useMemo } from "react";
+
+/**
+ * Hook to evaluate roles and permissions for the current user.
+ * It abstracts away the need to pass `authController` to permission evaluation functions.
+ */
+export function usePermissions() {
+    const authController = useAuthController();
+
+    const canCreate = useCallback(
+        (collection: CollectionConfig<any>, path: string) =>
+            canCreateEntity(collection, authController, path, null),
+        [authController]
+    );
+
+    const canEdit = useCallback(
+        (collection: CollectionConfig<any>, path: string, entity: Entity<any> | null) =>
+            canEditEntity(collection, authController, path, entity),
+        [authController]
+    );
+
+    const canDelete = useCallback(
+        (collection: CollectionConfig<any>, path: string, entity: Entity<any> | null) =>
+            canDeleteEntity(collection, authController, path, entity),
+        [authController]
+    );
+
+    const canRead = useCallback(
+        (collection: CollectionConfig<any>) =>
+            canReadCollection(collection, authController),
+        [authController]
+    );
+
+    return useMemo(() => ({
+        canCreate,
+        canEdit,
+        canDelete,
+        canRead
+    }), [canCreate, canEdit, canDelete, canRead]);
+}

package/src/hooks/useRebaseClient.tsx

@@ -0,0 +1,10 @@
+import { useContext } from "react";
+import { RebaseClientInstanceContext } from "../contexts/RebaseClientInstanceContext";
+
+/**
+ * Hook to retrieve the full RebaseClient instance from context.
+ * Returns `undefined` if no client was provided to `<Rebase>`.
+ */
+export function useRebaseClient<T = any>(): T | undefined {
+    return useContext(RebaseClientInstanceContext) as T | undefined;
+}

package/src/hooks/useRebaseContext.tsx

@@ -0,0 +1,83 @@
+import { AuthController, RebaseContext, User } from "@rebasepro/types";
+import { wrapAsSdkData } from "@rebasepro/common";
+import { useAuthController } from "./useAuthController";
+import { useRebaseClient } from "./useRebaseClient";
+import { useData } from "./data/useData";
+import { useStorageSource } from "./useStorageSource";
+import { useSnackbarController } from "./useSnackbarController";
+import { useUserConfigurationPersistence } from "./useUserConfigurationPersistence";
+import { useDialogsController } from "./useDialogsController";
+import { useCustomizationController } from "./useCustomizationController";
+import { useAnalyticsController } from "./useAnalyticsController";
+import { useEffectiveRoleController } from "./useEffectiveRoleController";
+import React, { useEffect, useContext } from "react";
+
+
+// DatabaseAdmin is provided by <Rebase> via DatabaseAdminContext.
+import { DatabaseAdminContext } from "../contexts/DatabaseAdminContext";
+
+/**
+ * Hook to retrieve the {@link RebaseContext}.
+ *
+ * Consider that in order to use this hook you need to have a parent
+ * `Rebase` component.
+ *
+ * @see RebaseContext
+ * @group Hooks and utilities
+ */
+export const useRebaseContext = <USER extends User = User, AuthControllerType extends AuthController<USER> = AuthController<USER>>(): RebaseContext<USER, AuthControllerType> => {
+
+    const client = useRebaseClient<any>();
+
+    const authController = useAuthController<USER, AuthControllerType>();
+    // `context.data` is the flat SDK view — identical in shape to the backend
+    // `context.data` and the frontend SDK client, so callbacks behave the same
+    // everywhere. The admin CMS reads Entities via `useData()` directly.
+    const entityData = useData();
+    const data = React.useMemo(() => wrapAsSdkData(entityData), [entityData]);
+    const storageSource = useStorageSource();
+    const snackbarController = useSnackbarController();
+    const userConfigPersistence = useUserConfigurationPersistence();
+    const dialogsController = useDialogsController();
+    const customizationController = useCustomizationController();
+    const analyticsController = useAnalyticsController();
+    const effectiveRoleController = useEffectiveRoleController();
+
+
+    // Will get `databaseAdmin` from context
+    const databaseAdmin = useContext(DatabaseAdminContext);
+
+    const rebaseContextRef = React.useRef<RebaseContext<USER, AuthControllerType>>({
+        authController,
+        data,
+        storageSource,
+        snackbarController,
+        userConfigPersistence,
+        dialogsController,
+        customizationController,
+        analyticsController,
+        effectiveRoleController,
+        databaseAdmin,
+        client: client! // Client should be provided
+    });
+
+    React.useEffect(() => {
+        rebaseContextRef.current = {
+            authController,
+            data,
+            storageSource,
+            snackbarController,
+            userConfigPersistence,
+            dialogsController,
+            customizationController,
+            analyticsController,
+            effectiveRoleController,
+            databaseAdmin,
+            client: client!
+        };
+    }, [authController, data, storageSource, snackbarController, userConfigPersistence,
+        dialogsController, customizationController, analyticsController,
+        effectiveRoleController, databaseAdmin, client]);
+
+    return rebaseContextRef.current;
+}