@rebasepro/cms 0.0.1-canary.4d4fb3e

package/src/components/SideDialogs.tsx

@@ -0,0 +1,207 @@
+import type { SideDialogPanelProps } from "../hooks/useSideDialogsController";
+import React, { useCallback, useContext, useEffect, useState } from "react";
+import { useSideDialogsController } from "../hooks";
+;
+import { Sheet } from "@rebasepro/ui";
+import { useUnsavedChangesDialog, UnsavedChangesDialog } from "@rebasepro/core";
+import { ErrorBoundary } from "@rebasepro/ui";
+
+export type SideDialogController = {
+    blocked: boolean,
+    setBlocked: (blocked: boolean) => void,
+    setBlockedNavigationMessage: (message?: React.ReactNode) => void,
+    width?: string,
+    close: (force?: boolean) => void;
+    pendingClose: boolean,
+    setPendingClose: (pendingClose: boolean) => void
+}
+
+const SideDialogContext = React.createContext<SideDialogController>({
+    width: "",
+    blocked: false,
+    setBlocked: (blocked: boolean) => {
+    },
+    setBlockedNavigationMessage: (message?: React.ReactNode) => {
+    },
+    close: () => {
+    },
+    pendingClose: false,
+    setPendingClose: () => {
+
+    }
+});
+
+/**
+ * This hook is used to access the properties of a particular side dialog,
+ * in contrast with {@link useSideDialogsController} which handles the
+ * state of all the dialogs.
+ */
+export const useSideDialogContext = () => useContext<SideDialogController>(SideDialogContext);
+
+/**
+ * This is the component in charge of rendering the side dialogs used
+ * for editing entities. Use the {@link useSideEntityController} to open
+ * and control the dialogs.
+ * This component needs a parent {@link Rebase}
+ * {@link useSideDialogsController}
+ * @group Components
+ */
+export function SideDialogs() {
+
+    const sideDialogsController = useSideDialogsController();
+
+    const sidePanels = sideDialogsController.sidePanels;
+
+    // A trailing `undefined` slot ("ghost panel") is always appended so that
+    // close animations work correctly. Index-based keys ensure that when the
+    // last real panel is removed, the ghost inherits key=0 — re-using the
+    // same SideDialogView instance so the Sheet smoothly transitions from
+    // open → closed rather than unmounting instantly.
+    const panels: (SideDialogPanelProps | undefined)[] = [...sidePanels];
+    panels.push(undefined);
+
+    return <>
+        {
+            panels.map((panel, index) =>
+                <SideDialogView
+                    key={`side_dialog_${index}`}
+                    panel={panel}
+                    panelIndex={index}
+                    offsetPosition={sidePanels.length - index - 1}
+                    isTopPanel={index === sidePanels.length - 1} />)
+        }
+    </>;
+}
+
+function SideDialogView({
+    offsetPosition,
+    panel,
+    panelIndex,
+    isTopPanel
+}: {
+    offsetPosition: number,
+    panel?: SideDialogPanelProps,
+    panelIndex: number,
+    isTopPanel: boolean
+}) {
+
+    // was the closing of the dialog requested by the drawer
+    const [drawerCloseRequested, setDrawerCloseRequested] = useState<boolean>(false);
+    const [blocked, setBlocked] = useState(false);
+    const [blockedNavigationMessage, setBlockedNavigationMessage] = useState<React.ReactNode | undefined>();
+
+    const [pendingClose, setPendingClose] = useState(false);
+
+    const widthRef = React.useRef<string | undefined>(panel?.width);
+    const width = widthRef.current;
+
+    const sideDialogsController = useSideDialogsController();
+
+    // Prevent non-topmost dialogs from being dismissed by outside clicks.
+    // When stacked Sheets exist, clicking the overlay of the topmost dialog
+    // would otherwise propagate and dismiss lower dialogs too.
+    const preventDismiss = useCallback((e: Event) => {
+        e.preventDefault();
+    }, []);
+
+    const { dialogProps, triggerDialog } = useUnsavedChangesDialog(
+        blocked,
+        () => setBlocked(false)
+    );
+
+    useEffect(() => {
+        if (panel)
+            widthRef.current = panel.width;
+    }, [panel])
+
+    const handleDrawerCloseOk = () => {
+        setBlocked(false);
+        setDrawerCloseRequested(false);
+        sideDialogsController.close();
+        panel?.onClose?.();
+    };
+
+    const handleDrawerCloseCancel = () => {
+        setDrawerCloseRequested(false);
+    };
+
+    const onCloseRequest = (force?: boolean) => {
+        if (blocked && !force) {
+            setDrawerCloseRequested(true);
+            triggerDialog();
+        } else {
+            sideDialogsController.close();
+            panel?.onClose?.();
+        }
+    };
+
+    return (
+        <SideDialogContext.Provider
+            value={{
+                blocked,
+                setBlocked,
+                setBlockedNavigationMessage,
+                width,
+                close: onCloseRequest,
+                pendingClose,
+                setPendingClose
+            }}>
+
+            <Sheet
+                open={Boolean(panel)}
+                includeBackgroundOverlay={true}
+                overlayStyle={{ zIndex: 40 + panelIndex * 10 }}
+                style={{ zIndex: 45 + panelIndex * 10 }}
+                onOpenChange={(open) => {
+                    if (!open) {
+                        // Check if any suggestion menu is visible in DOM
+                        const suggestionMenu = document.querySelector("[data-suggestion-menu=\"true\"]");
+                        if (suggestionMenu && window.getComputedStyle(suggestionMenu).visibility !== "hidden") {
+                            // Don't close the sheet if a suggestion menu is visible
+                            // Let Tiptap handle closing the menu first
+                            return;
+                        }
+                        onCloseRequest();
+                    }
+                }}
+                onPointerDownOutside={!isTopPanel ? preventDismiss : undefined}
+                onInteractOutside={!isTopPanel ? preventDismiss : undefined}
+                title={"Side dialog " + panel?.key}
+            >
+                {panel &&
+                    <div
+                        className={"transform max-w-[100vw] lg:max-w-[95vw] flex flex-col h-full transition-all duration-250 ease-in-out bg-white dark:bg-surface-900 "}
+                        style={{
+                            width: panel.width,
+                            transform: `translateX(-${offsetPosition * 200}px)`,
+                        }}
+                    >
+                        <ErrorBoundary>
+                            {panel.component}
+                        </ErrorBoundary>
+                    </div>}
+
+                {!panel && <div style={{ width }} />}
+
+            </Sheet>
+
+            <UnsavedChangesDialog
+                {...dialogProps}
+                handleOk={() => {
+                    dialogProps.handleOk();
+                    if (drawerCloseRequested) {
+                        handleDrawerCloseOk();
+                    }
+                }}
+                handleCancel={() => {
+                    dialogProps.handleCancel();
+                    if (drawerCloseRequested) {
+                        handleDrawerCloseCancel();
+                    }
+                }}
+                body={blockedNavigationMessage || "There are unsaved changes"} />
+
+        </SideDialogContext.Provider>
+
+    );
+}

package/src/components/SideEntityProvider.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { useBuildSideEntityController } from "../hooks/useBuildSideEntityController";
+import { useBuildSideDialogsController } from "../hooks/useBuildSideDialogsController";
+import { SideEntityControllerContext } from "../hooks/useSideEntityController";
+import { SideDialogsControllerContext } from "../contexts/SideDialogsControllerContext";
+import { BreadcrumbsProvider } from "../contexts/BreacrumbsContext";
+import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
+import { useCollectionRegistryController, useUrlController } from "../index";
+import { useNavigationStateController } from "../index";
+import { useAuthController, useBridgeRegistration } from "@rebasepro/core";
+
+/**
+ * Provider that builds the SideEntityController and makes it available
+ * via the SideEntityControllerContext from @rebasepro/core.
+ *
+ * After the CMS extraction refactor, `useBuildSideEntityController` lives
+ * in the CMS package while the context it feeds into lives in core.
+ * This provider bridges the two: place it inside the `<Rebase>` tree and
+ * above any component that calls `useSideEntityController()`.
+ *
+ * Also auto-registers the side entity controller and breadcrumbs into the
+ * self-assembling Studio bridge (when a StudioBridgeRegistryProvider is
+ * mounted above in the tree).
+ *
+ * @example
+ * ```tsx
+ * <Rebase ...>
+ *   {({ loading }) => (
+ *     <SideEntityProvider>
+ *       <RebaseRoutes>
+ *         ...
+ *       </RebaseRoutes>
+ *     </SideEntityProvider>
+ *   )}
+ * </Rebase>
+ * ```
+ *
+ * @group Components
+ */
+export function SideEntityProvider({ children }: { children: React.ReactNode }) {
+    const collectionRegistryController = useCollectionRegistryController();
+    const urlController = useUrlController();
+    const navigationStateController = useNavigationStateController();
+    const sideDialogsController = useBuildSideDialogsController();
+    const authController = useAuthController();
+
+    const sideEntityController = useBuildSideEntityController(
+        collectionRegistryController,
+        urlController,
+        navigationStateController,
+        sideDialogsController,
+        authController,
+    );
+
+    return (
+        <BreadcrumbsProvider>
+            <SideDialogsControllerContext.Provider value={sideDialogsController}>
+                <SideEntityControllerContext.Provider value={sideEntityController}>
+                    <BridgeAutoRegistrar sideEntityController={sideEntityController} />
+                    {children}
+                </SideEntityControllerContext.Provider>
+            </SideDialogsControllerContext.Provider>
+        </BreadcrumbsProvider>
+    );
+}
+
+/**
+ * Internal component that auto-registers side entity and breadcrumbs
+ * into the Studio bridge. Must be a child of BreadcrumbsProvider.
+ */
+function BridgeAutoRegistrar({ sideEntityController }: { sideEntityController: any }) {
+    const breadcrumbs = useBreadcrumbsController();
+    useBridgeRegistration("sideEntityController", sideEntityController);
+    useBridgeRegistration("breadcrumbs", breadcrumbs);
+    return null;
+}

package/src/components/admin/RoleChip.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Chip, ChipColorScheme } from "@rebasepro/ui";
+import { Role } from "@rebasepro/types";
+import { getColorSchemeForSeed, getColorSchemeForKey } from "@rebasepro/ui";
+
+export function RoleChip({ role }: { role: Role }) {
+    let colorScheme: ChipColorScheme;
+    if (role.isAdmin) {
+        colorScheme = getColorSchemeForKey("blueDarker");
+    } else if (role.id === "editor") {
+        colorScheme = getColorSchemeForKey("yellowLight");
+    } else if (role.id === "viewer") {
+        colorScheme = getColorSchemeForKey("grayLight");
+    } else {
+        colorScheme = getColorSchemeForSeed(role.id);
+    }
+
+    return (
+        <Chip colorScheme={colorScheme} key={role.id}>
+            {role.name}
+        </Chip>
+    );
+}