@rebasepro/core 0.0.1-canary.0

package/src/core/Rebase.tsx

@@ -0,0 +1,229 @@
+"use client";
+
+import React, { useMemo } from "react";
+import { CenteredView, Typography } from "@rebasepro/ui";
+import {
+    CustomizationController,
+    RebaseContext,
+    RebasePlugin,
+    RebaseProps,
+    User,
+    UserManagementDelegate
+} from "@rebasepro/types";
+import { AuthControllerContext } from "../contexts";
+import { useBuildSideEntityController } from "../internal/useBuildSideEntityController";
+import { useCustomizationController, useRebaseContext } from "../hooks";
+import { ApiConfigProvider } from "../hooks/ApiConfigContext";
+import { useBuildSideDialogsController } from "../internal/useBuildSideDialogsController";
+import { ErrorView } from "../components";
+import { StorageSourceContext } from "../contexts/StorageSourceContext";
+import { UserConfigurationPersistenceContext } from "../contexts/UserConfigurationPersistenceContext";
+import { DataSourceContext } from "../contexts/DataSourceContext";
+import { SideEntityControllerContext } from "../contexts/SideEntityControllerContext";
+import { SideDialogsControllerContext } from "../contexts/SideDialogsControllerContext";
+import { CollectionRegistryContext, NavigationStateContext, CMSUrlContext } from "../hooks/navigation/contexts";
+import { DialogsProvider } from "../contexts/DialogsProvider";
+import { useBuildDataSource } from "../internal/useBuildDataSource";
+import { CustomizationControllerContext } from "../contexts/CustomizationControllerContext";
+import { AnalyticsContext } from "../contexts/AnalyticsContext";
+import { BreadcrumbsProvider } from "../contexts/BreacrumbsContext";
+import { InternalUserManagementContext } from "../contexts/InternalUserManagementContext";
+import { EffectiveRoleControllerContext } from "../contexts/EffectiveRoleController";
+import { useBuildEffectiveRoleController } from "../hooks/useBuildEffectiveRoleController";
+
+/**
+ * If you are using independent components of the CMS
+ * you need to wrap them with this main component, so the internal hooks work.
+ *
+ * This is the main component of Rebase. It acts as the provider of all the
+ * internal contexts and hooks.
+ *
+ * You only need to use this component if you are building a custom app.
+ *
+ * @group Core
+ */
+export function Rebase<USER extends User>(props: RebaseProps<USER>) {
+
+    const {
+        children,
+        entityLinkBuilder,
+        userConfigPersistence,
+        dateTimeFormat,
+        locale,
+        authController,
+        storageSource,
+        dataSource: dataSourceProp,
+        plugins: _pluginsProp,
+        onAnalyticsEvent,
+        propertyConfigs,
+        entityViews,
+        entityActions,
+        components,
+        collectionRegistryController,
+        cmsUrlController,
+        navigationStateController,
+        apiKey,
+        userManagement: _userManagement,
+        effectiveRoleController,
+        apiUrl
+    } = props;
+
+    if (_pluginsProp) {
+        console.warn("The `plugins` prop is deprecated in the Rebase component. You should pass your plugins to `useBuildNavigationStateController` instead.");
+    }
+
+    const plugins = navigationStateController.plugins ?? _pluginsProp;
+    const userManagement = plugins?.find((p: RebasePlugin) => p.userManagement)?.userManagement
+        ?? _userManagement
+        ?? {
+            loading: false,
+            users: [],
+            getUser: (uid: string) => null
+        } as unknown as UserManagementDelegate<USER>;
+
+    const sideDialogsController = useBuildSideDialogsController();
+    const sideEntityController = useBuildSideEntityController(collectionRegistryController, cmsUrlController, navigationStateController, sideDialogsController, authController);
+
+    const pluginsLoading = plugins?.some((p: RebasePlugin) => p.loading) ?? false;
+
+    const loading = authController.initialLoading || navigationStateController.loading || pluginsLoading;
+
+    const customizationController: CustomizationController = {
+        dateTimeFormat,
+        locale,
+        entityLinkBuilder,
+        plugins,
+        entityViews: entityViews ?? [],
+        entityActions: entityActions ?? [],
+        propertyConfigs: propertyConfigs ?? {},
+        components
+    };
+
+    const analyticsController = useMemo(() => ({
+        onAnalyticsEvent
+    }), []);
+
+    /**
+     * Controller in charge of fetching and persisting data
+     */
+    const dataSource = useBuildDataSource({
+        delegate: dataSourceProp,
+        propertyConfigs,
+        // Used by DataSource internally for type resolution, pass the registry
+        collectionRegistryController,
+        authController
+    });
+
+    const fallbackEffectiveRoleController = useBuildEffectiveRoleController();
+    const activeEffectiveRoleController = effectiveRoleController ?? fallbackEffectiveRoleController;
+
+    if (navigationStateController.navigationLoadingError) {
+        return (
+            <CenteredView maxWidth={"md"}>
+                <ErrorView
+                    title={"Error loading navigation"}
+                    error={navigationStateController.navigationLoadingError as Error | string} />
+            </CenteredView>
+        );
+    }
+
+    if (authController.authError) {
+        return (
+            <CenteredView maxWidth={"md"}>
+                <ErrorView
+                    title={"Error loading auth"}
+                    error={authController.authError as Error | string} />
+            </CenteredView>
+        );
+    }
+
+    const content = (
+        <AnalyticsContext.Provider value={analyticsController}>
+            <CustomizationControllerContext.Provider value={customizationController}>
+                <UserConfigurationPersistenceContext.Provider
+                    value={userConfigPersistence}>
+                    <StorageSourceContext.Provider
+                        value={storageSource}>
+                        <DataSourceContext.Provider
+                            value={dataSource}>
+                            <AuthControllerContext.Provider
+                                value={authController}>
+                                <SideDialogsControllerContext.Provider
+                                    value={sideDialogsController}>
+                                    <SideEntityControllerContext.Provider
+                                        value={sideEntityController}>
+                                        <CollectionRegistryContext.Provider value={collectionRegistryController}>
+                                            <NavigationStateContext.Provider value={navigationStateController}>
+                                                <CMSUrlContext.Provider value={cmsUrlController}>
+                                                    <InternalUserManagementContext.Provider value={userManagement}>
+                                                        <EffectiveRoleControllerContext.Provider value={activeEffectiveRoleController}>
+                                                            <DialogsProvider>
+                                                                <BreadcrumbsProvider>
+                                                                    <RebaseInternal
+                                                                        loading={loading}>
+                                                                        {children}
+                                                                    </RebaseInternal>
+                                                                </BreadcrumbsProvider>
+                                                            </DialogsProvider>
+                                                        </EffectiveRoleControllerContext.Provider>
+                                                    </InternalUserManagementContext.Provider>
+                                                </CMSUrlContext.Provider>
+                                            </NavigationStateContext.Provider>
+                                        </CollectionRegistryContext.Provider>
+                                    </SideEntityControllerContext.Provider>
+                                </SideDialogsControllerContext.Provider>
+                            </AuthControllerContext.Provider>
+                        </DataSourceContext.Provider>
+                    </StorageSourceContext.Provider>
+                </UserConfigurationPersistenceContext.Provider>
+            </CustomizationControllerContext.Provider>
+        </AnalyticsContext.Provider>
+    );
+
+    if (apiUrl) {
+        return (
+            <ApiConfigProvider apiUrl={apiUrl} getAuthToken={authController.getAuthToken}>
+                {content}
+            </ApiConfigProvider>
+        );
+    }
+
+    return content;
+
+}
+
+function RebaseInternal({
+    loading,
+    children
+}: {
+    loading: boolean;
+    children: (props: {
+        context: RebaseContext;
+        loading: boolean;
+    }) => React.ReactNode;
+}) {
+
+    const context = useRebaseContext();
+    const customizationController = useCustomizationController();
+
+    let childrenResult = children({
+        context,
+        loading
+    });
+
+    const plugins = customizationController.plugins;
+    if (!loading && plugins) {
+        plugins.forEach((plugin: RebasePlugin) => {
+            if (plugin.provider) {
+                childrenResult = (
+                    <plugin.provider.Component {...plugin.provider.props}
+                        context={context}>
+                        {childrenResult}
+                    </plugin.provider.Component>
+                );
+            }
+        });
+    }
+
+    return <>{childrenResult}</>;
+}

package/src/core/RebaseRouter.tsx

@@ -0,0 +1,17 @@
+import { createBrowserRouter, RouterProvider } from "react-router-dom"
+import { removeInitialAndTrailingSlashes } from "@rebasepro/common";
+
+export function RebaseRouter({
+    children,
+    basePath
+}: {
+    children: any,
+    basePath?: string;
+}) {
+    return <RouterProvider router={createBrowserRouter([
+        {
+            path: basePath ? `${removeInitialAndTrailingSlashes(basePath)}/*` : "/*",
+            element: children
+        }
+    ])} />;
+}

package/src/core/RebaseRoutes.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { Route, Routes, useLocation } from "react-router-dom";
+import { useNavigationStateController } from "../hooks";
+import { CustomCMSRoute } from "../routes/CustomCMSRoute";
+
+/**
+ * A drop-in replacement for react-router's `<Routes>` that preserves the
+ * underlying view when a side dialog navigates the URL to a different path.
+ *
+ * When opening a side dialog from e.g. `/posts` to `authors/123#side`,
+ * the `base_location` stored in router state is used so the route tree
+ * keeps rendering the original `/posts` view underneath the dialog overlay.
+ *
+ * Additionally, registered views from `useNavigationStateController()` are
+ * automatically routed — no need to manually map them to `<Route>` elements.
+ * Views with `nestedRoutes: true` get a wildcard route (slug/*) as well.
+ * Explicitly declared `children` routes take priority.
+ */
+export function RebaseRoutes({ children }: { children?: React.ReactNode }) {
+    const location = useLocation();
+    const state = location.state as any;
+    const baseLocation = state?.base_location ?? location;
+
+    const { views, adminViews } = useNavigationStateController();
+
+    const allViews = [...(views ?? []), ...(adminViews ?? [])];
+
+    return (
+        <Routes location={baseLocation}>
+            {children}
+            {allViews.map(view => {
+                const slugs = Array.isArray(view.slug) ? view.slug : [view.slug];
+                return slugs.flatMap(slug => {
+                    const routes = [
+                        <Route key={slug} path={slug} element={<CustomCMSRoute cmsView={view} />} />
+                    ];
+                    if (view.nestedRoutes) {
+                        routes.push(
+                            <Route key={slug + "/*"} path={slug + "/*"} element={<CustomCMSRoute cmsView={view} />} />
+                        );
+                    }
+                    return routes;
+                });
+            })}
+        </Routes>
+    );
+}

package/src/core/SideDialogs.tsx

@@ -0,0 +1,200 @@
+import React, { useCallback, useContext, useEffect, useState } from "react";
+import { useSideDialogsController } from "../hooks";
+import { EntitySidePanelProps, SideDialogPanelProps } from "@rebasepro/types";
+import { Sheet } from "@rebasepro/ui";
+import { useUnsavedChangesDialog } from "../hooks";
+import { ErrorBoundary } from "../components";
+import { UnsavedChangesDialog } from "../components/UnsavedChangesDialog";
+import { EntitySidePanel } from "./EntitySidePanel";
+
+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;
+
+    const panels: (SideDialogPanelProps | undefined)[] = [...sidePanels];
+    panels.push(undefined);
+
+    return <>
+        {
+            panels.map((panel, index) =>
+                <SideDialogView
+                    key={`side_dialog_${index}`}
+                    panel={panel}
+                    offsetPosition={sidePanels.length - index - 1}
+                    isTopPanel={index === sidePanels.length - 1} />)
+        }
+    </>;
+}
+
+function SideDialogView({
+    offsetPosition,
+    panel,
+    isTopPanel
+}: {
+    offsetPosition: number,
+    panel?: SideDialogPanelProps,
+    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={isTopPanel}
+                overlayZIndex="z-40"
+                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>
+                            {/* Lazy render EntitySidePanel from props for better performance */}
+                            {panel.component ?? (panel.additional ? <EntitySidePanel {...(panel.additional as EntitySidePanelProps)} /> : null)}
+                        </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>
+
+    );
+}