@rebasepro/admin 0.0.1-canary.09e5ec5

package/src/components/SideDialogs.tsx

@@ -0,0 +1,208 @@
+import type { SideDialogPanelProps } from "../hooks/useSideDialogsController";
+import React, { useCallback, useContext, useEffect, useState, useMemo } 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 = useCallback((force?: boolean) => {
+        if (blocked && !force) {
+            setDrawerCloseRequested(true);
+            triggerDialog();
+        } else {
+            sideDialogsController.close();
+            panel?.onClose?.();
+        }
+    }, [blocked, triggerDialog, sideDialogsController, panel]);
+
+    const contextValue = useMemo(() => ({
+        blocked,
+        setBlocked,
+        setBlockedNavigationMessage,
+        width,
+        close: onCloseRequest,
+        pendingClose,
+        setPendingClose
+    }), [blocked, setBlockedNavigationMessage, width, onCloseRequest, pendingClose]);
+
+    return (
+        <SideDialogContext.Provider value={contextValue}>
+
+            <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-800 "}
+                        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/UserSelector.tsx

@@ -0,0 +1,339 @@
+
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { CircularProgress, cls, defaultBorderMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundInvisibleMixin, fieldBackgroundMixin, focusedDisabled, IconButton, Separator, useInjectStyles , iconSize } from "@rebasepro/ui";
+import { XIcon, ChevronDownIcon, SearchIcon } from "lucide-react";
+import { User } from "@rebasepro/types";
+import { useUserSelector, UserSelectorItem } from "@rebasepro/core";
+import { UserDisplay } from "@rebasepro/core";
+import { EmptyValue } from "../preview";
+
+export interface UserSelectorProps {
+    className?: string;
+    name?: string;
+    id?: string;
+    value?: string | null;
+    onValueChange?: (userId: string | null) => void;
+    placeholder?: React.ReactNode;
+    size?: "small" | "medium";
+    disabled?: boolean;
+    invisible?: boolean;
+    clearable?: boolean;
+    pageSize?: number;
+    searchPlaceholder?: string;
+    noResultsText?: string;
+    loadingText?: string;
+}
+
+export const UserSelector = React.forwardRef<
+    HTMLButtonElement,
+    UserSelectorProps
+>(
+    (
+        {
+            value,
+            size = "medium",
+            onValueChange,
+            invisible,
+            disabled,
+            placeholder,
+            clearable = true,
+            className,
+            pageSize,
+            searchPlaceholder = "SearchIcon users...",
+            noResultsText = "No users found.",
+            loadingText = "Loading..."
+        },
+        ref
+    ) => {
+
+        const {
+            items: availableItems,
+            isLoading,
+            hasMore,
+            search,
+            loadMore,
+            getUser
+        } = useUserSelector({ pageSize });
+
+        const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+        const [searchString, setSearchString] = useState<string>("");
+
+        const scrollContainerRef = useRef<HTMLDivElement>(null);
+        const sentinelRef = useRef<HTMLDivElement>(null);
+        const observerRef = useRef<IntersectionObserver | null>(null);
+        const triggerRef = (ref as React.RefObject<HTMLButtonElement>) || useRef<HTMLButtonElement>(null);
+        const contentRef = useRef<HTMLDivElement | null>(null);
+        const searchInputRef = useRef<HTMLInputElement | null>(null);
+
+        // Resolve the currently selected user for display
+        const selectedUser: User | null = value ? getUser(value) ?? null : null;
+
+        // If the user isn't in the cache, try to find in available items
+        const resolvedUser: User | null = selectedUser
+            ?? (value ? availableItems.find(i => i.uid === value)?.user ?? null : null);
+
+        // IntersectionObserver for infinite scroll
+        const sentinelCallbackRef = useCallback((node: HTMLDivElement | null) => {
+            if (observerRef.current) {
+                observerRef.current.disconnect();
+                observerRef.current = null;
+            }
+            if (sentinelRef.current !== node) {
+                (sentinelRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+            }
+            if (!node || !hasMore || isLoading || !loadMore) return;
+            const observer = new IntersectionObserver(
+                (entries) => {
+                    const entry = entries[0];
+                    if (entry.isIntersecting && hasMore && !isLoading) loadMore();
+                },
+                {
+                    root: scrollContainerRef.current,
+                    rootMargin: "20px",
+                    threshold: 0
+                }
+            );
+            observer.observe(node);
+            observerRef.current = observer;
+        }, [hasMore, isLoading, loadMore]);
+
+        useEffect(() => () => {
+            if (observerRef.current) observerRef.current.disconnect();
+        }, []);
+
+        // Scroll-based pagination fallback
+        useEffect(() => {
+            const scrollContainer = scrollContainerRef.current;
+            if (!scrollContainer || !hasMore || isLoading || !isPopoverOpen) return;
+
+            const handleScroll = () => {
+                const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
+                const isNearBottom = scrollTop + clientHeight >= scrollHeight - 100;
+                if (isNearBottom && hasMore && !isLoading) {
+                    loadMore();
+                }
+            };
+
+            scrollContainer.addEventListener("scroll", handleScroll, { passive: true });
+            return () => {
+                scrollContainer.removeEventListener("scroll", handleScroll);
+            };
+        }, [hasMore, isLoading, loadMore, isPopoverOpen]);
+
+        const handleSearchChange = useCallback((newSearchString: string) => {
+            setSearchString(newSearchString);
+            search(newSearchString);
+        }, [search]);
+
+        const handleItemClick = useCallback((item: UserSelectorItem) => {
+            if (value === item.uid) {
+                // Deselect
+                onValueChange?.(null);
+            } else {
+                onValueChange?.(item.uid);
+            }
+            setIsPopoverOpen(false);
+        }, [value, onValueChange]);
+
+        const handleClear = useCallback((e: React.MouseEvent) => {
+            e.stopPropagation();
+            e.preventDefault();
+            onValueChange?.(null);
+        }, [onValueChange]);
+
+        const handleRootOpenChange = useCallback((next: boolean) => {
+            if (disabled) return;
+            if (next) setIsPopoverOpen(true);
+        }, [disabled]);
+
+        // Outside click + Escape handling
+        useEffect(() => {
+            if (!isPopoverOpen) return;
+
+            function handlePointerDown(ev: MouseEvent) {
+                const target = ev.target as Node;
+                const triggerEl = triggerRef.current;
+                const contentEl = contentRef.current;
+                if (triggerEl?.contains(target)) return;
+                if (contentEl?.contains(target)) return;
+                setIsPopoverOpen(false);
+            }
+
+            function handleKey(ev: KeyboardEvent) {
+                if (ev.key === "Escape") setIsPopoverOpen(false);
+            }
+
+            document.addEventListener("mousedown", handlePointerDown, true);
+            document.addEventListener("keydown", handleKey, true);
+            return () => {
+                document.removeEventListener("mousedown", handlePointerDown, true);
+                document.removeEventListener("keydown", handleKey, true);
+            };
+        }, [isPopoverOpen]);
+
+        useInjectStyles("UserSelector", " [cmdk-group] { max-height: 40vh; overflow-y: auto; } ");
+
+        const resolvedPlaceholder = placeholder || <EmptyValue className={"ml-2"}/>;
+        const portalContainer = (typeof document !== "undefined" ? document.body : undefined);
+
+        return (
+            <>
+                <PopoverPrimitive.Root open={isPopoverOpen} onOpenChange={handleRootOpenChange} modal={false}>
+                    <PopoverPrimitive.Trigger asChild>
+                        <button
+                            ref={triggerRef as React.Ref<HTMLButtonElement>}
+                            type="button"
+                            aria-haspopup="listbox"
+                            aria-expanded={isPopoverOpen}
+                            data-user-selector-trigger
+                            disabled={disabled}
+                            onClick={() => {
+                                if (disabled) return;
+                                setIsPopoverOpen(o => !o);
+                            }}
+                            className={cls(
+                                {
+                                    "min-h-[42px] py-1 px-2": size === "small",
+                                    "min-h-[56px] py-2 px-4": size === "medium"
+                                },
+                                "w-full select-none rounded-md text-sm relative flex items-center",
+                                invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
+                                disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
+                                className
+                            )}
+                        >
+                            <div className="flex justify-between items-center w-full">
+                                {resolvedUser ? (
+                                    <div className="flex flex-row items-center gap-1 truncate flex-1 min-w-0 mr-2">
+                                        <UserDisplay user={resolvedUser}/>
+                                    </div>
+                                ) : (
+                                    <span className="text-sm text-text-secondary dark:text-text-secondary-dark">
+                                        {resolvedPlaceholder}
+                                    </span>
+                                )}
+
+                                <div className="flex-shrink-0 flex items-center gap-1">
+                                    {clearable && !disabled && value && (
+                                        <IconButton
+                                            size="small"
+                                            onClick={handleClear}>
+                                            <XIcon size={iconSize.small}/>
+                                        </IconButton>
+                                    )}
+                                    <ChevronDownIcon
+                                        size={size === "medium" ? iconSize.medium : iconSize.small}
+                                        className={cls("transition", isPopoverOpen ? "rotate-180" : "")}
+                                    />
+                                </div>
+                            </div>
+                        </button>
+                    </PopoverPrimitive.Trigger>
+                    <PopoverPrimitive.Portal container={portalContainer}>
+                        <PopoverPrimitive.Content
+                            ref={contentRef}
+                            data-user-selector-content
+                            className={cls("z-50 overflow-hidden border bg-white dark:bg-surface-800 rounded-lg min-w-72", defaultBorderMixin)}
+                            align="start"
+                            sideOffset={8}
+                            side="bottom"
+                            avoidCollisions={true}
+                            collisionPadding={16}
+                            onOpenAutoFocus={(_e) => { /* leave default */ }}
+                            onCloseAutoFocus={(e) => {
+                                e.preventDefault();
+                            }}
+                            style={{ width: "var(--radix-popover-trigger-width)" }}
+                        >
+                            <CommandPrimitive shouldFilter={false}>
+                                <div className="flex flex-row items-center">
+                                    <div className="relative flex-1">
+                                        <SearchIcon
+                                            className="absolute left-3 top-1/2 transform -translate-y-1/2 text-text-secondary dark:text-text-secondary-dark"
+                                            size={iconSize.smallest}/>
+                                        <CommandPrimitive.Input
+                                            ref={searchInputRef}
+                                            className={cls(
+                                                focusedDisabled,
+                                                "bg-transparent outline-hidden flex-1 h-full w-full pl-10 pr-4 py-3 text-text-primary dark:text-text-primary-dark placeholder:text-text-secondary dark:placeholder:text-text-secondary-dark"
+                                            )}
+                                            placeholder={searchPlaceholder}
+                                            value={searchString}
+                                            onValueChange={handleSearchChange}
+                                        />
+                                    </div>
+                                    {isLoading && (
+                                        <div className="flex items-center justify-center px-3">
+                                            <CircularProgress size="smallest"/>
+                                        </div>
+                                    )}
+                                </div>
+                                <Separator orientation="horizontal" className="my-0"/>
+                                <CommandPrimitive.List
+                                    ref={scrollContainerRef}
+                                    style={{
+                                        maxHeight: "40vh",
+                                        overflowY: "auto"
+                                    }}
+                                >
+                                    {isLoading && availableItems.length === 0 && (
+                                        <div className="flex items-center justify-center py-6">
+                                            <CircularProgress size="small"/>
+                                            <span
+                                                className="ml-2 text-sm text-text-secondary dark:text-text-secondary-dark">{loadingText}</span>
+                                        </div>
+                                    )}
+                                    {!isLoading && availableItems.length === 0 && (
+                                        <CommandPrimitive.Empty
+                                            className="px-4 py-6 text-center text-text-secondary dark:text-text-secondary-dark">
+                                            {noResultsText}
+                                        </CommandPrimitive.Empty>
+                                    )}
+                                    <CommandPrimitive.Group>
+                                        {availableItems.map((item) => {
+                                            const isSelected = value === item.uid;
+                                            return (
+                                                <CommandPrimitive.Item
+                                                    key={item.uid}
+                                                    value={item.uid}
+                                                    onMouseDown={(e) => {
+                                                        e.preventDefault();
+                                                        e.stopPropagation();
+                                                    }}
+                                                    onSelect={() => handleItemClick(item)}
+                                                    className={cls(
+                                                        "flex flex-row items-center gap-1.5 m-1 p-1.5 rounded-xs cursor-pointer ring-offset-transparent",
+                                                        isSelected && "bg-surface-accent-200 dark:bg-surface-accent-950",
+                                                        "aria-selected:outline-hidden aria-selected:ring-2 aria-selected:ring-primary/75 aria-selected:ring-offset-2 aria-selected:bg-surface-accent-100 dark:aria-selected:bg-surface-accent-900"
+                                                    )}
+                                                >
+                                                    <UserDisplay user={item.user}/>
+                                                </CommandPrimitive.Item>
+                                            );
+                                        })}
+                                        {availableItems.length > 0 && hasMore && (
+                                            <div ref={sentinelCallbackRef} className="h-1 w-full"
+                                                style={{ visibility: "hidden" }}/>
+                                        )}
+                                        {isLoading && availableItems.length > 0 && (
+                                            <div className="flex items-center justify-center py-4">
+                                                <CircularProgress size="smallest"/>
+                                                <span
+                                                    className="ml-2 text-xs text-text-secondary dark:text-text-secondary-dark">Loading...</span>
+                                            </div>
+                                        )}
+                                    </CommandPrimitive.Group>
+                                </CommandPrimitive.List>
+                            </CommandPrimitive>
+                        </PopoverPrimitive.Content>
+                    </PopoverPrimitive.Portal>
+                </PopoverPrimitive.Root>
+            </>
+        );
+    }
+);
+
+UserSelector.displayName = "UserSelector";

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("blue");
+    } else if (role.id === "editor") {
+        colorScheme = getColorSchemeForKey("yellow");
+    } else if (role.id === "viewer") {
+        colorScheme = getColorSchemeForKey("gray");
+    } else {
+        colorScheme = getColorSchemeForSeed(role.id);
+    }
+
+    return (
+        <Chip colorScheme={colorScheme} key={role.id}>
+            {role.name}
+        </Chip>
+    );
+}