@rebasepro/cms 0.17.3 → 0.18.0

package/src/components/JsonPreviewBinding.tsx

@@ -1,66 +0,0 @@
-import React, { useRef } from "react";
-import { Highlight, themes } from "prism-react-renderer";
-import { useModeController } from "@rebasepro/app";
-
-export function JsonPreviewBinding({ values }: { values: object }) {
-    const code = JSON.stringify(values, null, "\t");
-    const { mode } = useModeController();
-    const preRef = useRef<HTMLPreElement>(null);
-
-    // Global keydown handler
-    // const handleGlobalKeyDown = useCallback((e: KeyboardEvent) => {
-    //     // Check for Control (Windows/Linux) or Command (macOS) + "a":
-    //     if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "a") {
-    //         // If our code view is mounted, perform selection
-    //         if (preRef.current) {
-    //             e.preventDefault();
-    //             e.stopPropagation();
-    //
-    //             const selection = window.getSelection();
-    //             const range = document.createRange();
-    //             range.selectNodeContents(preRef.current);
-    //             if (selection) {
-    //                 selection.removeAllRanges();
-    //                 selection.addRange(range);
-    //             }
-    //         }
-    //     }
-    // }, []);
-
-    // // Attach the global keydown listener when component mounts,
-    // // and remove it when it unmounts.
-    // useEffect(() => {
-    //     document.addEventListener("keydown", handleGlobalKeyDown);
-    //     return () => {
-    //         document.removeEventListener("keydown", handleGlobalKeyDown);
-    //     };
-    // }, [handleGlobalKeyDown]);
-
-    return (
-        <Highlight
-            theme={mode === "dark" ? themes.vsDark : themes.github}
-            code={code}
-            language="json"
-        >
-            {({ style, tokens, getLineProps, getTokenProps }) => (
-                <pre
-                    // Bind the ref to our pre element so we can select its contents.
-                    ref={preRef}
-                    style={{
-                        ...style,
-                        backgroundColor: "inherit"
-                    }}
-                    className="max-w-6xl mx-auto p-8 rounded-xs text-sm"
-                >
-          {tokens.map((line, i) => (
-              <div key={i} {...getLineProps({ line })} className="text-wrap">
-                  {line.map((token, key) => (
-                      <span key={key} {...getTokenProps({ token })} className="word-break"/>
-                  ))}
-              </div>
-          ))}
-        </pre>
-            )}
-        </Highlight>
-    );
-}

package/src/components/PropertyCollectionView.tsx

@@ -1,336 +0,0 @@
-import type { Properties } from "@rebasepro/types";
-import type { Property } from "@rebasepro/types";
-import React from "react";
-import { defaultBorderMixin, Typography } from "@rebasepro/ui";
-import { PropertyPreview } from "../preview";
-import { PreviewSize } from "../types/components/PropertyPreviewProps";
-import { getValueInPath } from "@rebasepro/utils";
-
-/**
- * Build a readable label for a path and resolve the property
- * Supports map and array (including arrays of maps)
- */
-export function buildPropertyLabelAndGetProperty(
-    properties: Properties,
-    key: string
-): { label: string; property: Property | undefined } {
-    if (!key) return {
-        label: "",
-        property: undefined
-    };
-
-    // Parse "a[0].b.c[2]" -> ["a", 0, "b", "c", 2]
-    const segments: (string | number)[] = [];
-    const re = /([^[.\]]+)|\[(\d+)\]/g;
-    let m: RegExpExecArray | null;
-    while ((m = re.exec(key)) !== null) {
-        if (m[1] !== undefined) segments.push(m[1]);
-        else if (m[2] !== undefined) segments.push(Number(m[2]));
-    }
-
-    let currentProps: Properties | undefined = properties;
-    let currentProp: Property | undefined;
-    let lastLabel = "";
-
-    const getArrayOfProp = (p?: Property): Property | undefined => {
-        if (!p || p.type !== "array") return undefined;
-        return Array.isArray(p.of) ? (p.of[0] as Property) : (p.of as Property | undefined);
-    };
-
-    for (const seg of segments) {
-        if (typeof seg === "number") {
-            // Last segment label should be the index itself
-            lastLabel = `[${seg}]`;
-
-            // Move schema context into the array element
-            if (currentProp?.type === "array") {
-                currentProp = getArrayOfProp(currentProp);
-                if (currentProp?.type === "map" && currentProp.properties) {
-                    currentProps = currentProp.properties as Properties;
-                } else {
-                    currentProps = undefined;
-                }
-            } else {
-                // Index without array schema context
-                currentProp = undefined;
-                currentProps = undefined;
-            }
-            continue;
-        }
-
-        // seg is a string key
-        if (currentProps && (currentProps as Record<string, Property>)[seg]) {
-            const nextProp = (currentProps as Record<string, Property>)[seg];
-            currentProp = nextProp;
-            // Last segment label should be the property name (or the raw key)
-            lastLabel = nextProp.name || String(seg);
-
-            if (nextProp.type === "map" && nextProp.properties) {
-                currentProps = nextProp.properties as Properties;
-            } else if (nextProp.type === "array") {
-                // Keep array prop; the next segment (index) will step into its element schema
-                currentProps = undefined;
-            } else {
-                currentProps = undefined;
-            }
-        } else {
-            // Unknown key or no schema context
-            currentProp = undefined;
-            currentProps = undefined;
-            lastLabel = String(seg);
-        }
-    }
-
-    return {
-        label: lastLabel,
-        property: currentProp
-    };
-}
-
-const pathEndsWithIndex = (p: string) => /\[\d+\]$/.test(p);
-
-/**
- * Improved simple layout for nested changes:
- * - Map or Array-of-Map -> section header + indented rows
- * - Leaf or Array-of-Primitives -> single row with label and value
- */
-export const PropertyCollectionView = ({
-    data,
-    properties,
-    baseKey = "",
-    suppressHeader = false,
-    size = "small"
-}: {
-    data: unknown;
-    properties: Properties;
-    baseKey?: string;
-    suppressHeader?: boolean;
-    size?: PreviewSize;
-}) => {
-
-    const isTopLevel = !!baseKey && !baseKey.includes(".") && !baseKey.includes("[");
-
-    // Arrays
-    if (Array.isArray(data)) {
-        const {
-            label: arrayLabel,
-            property
-        } = baseKey
-                ? buildPropertyLabelAndGetProperty(properties, baseKey)
-                : {
-                    label: "",
-                    property: undefined as Property | undefined
-                };
-
-        const ofProp = property?.type === "array"
-            ? (Array.isArray(property.of) ? property.of[0] : property.of) as Property | undefined
-            : undefined;
-
-        const isArrayOfMaps = ofProp?.type === "map";
-        const isArrayOfPrimitives = property?.type === "array" && ofProp && ofProp.type !== "map";
-
-        // Many-cardinality relation: property type is "relation" but value is an array
-        // Render as a single row via PropertyPreview (which handles relation arrays)
-        const isRelationArray = property?.type === "relation";
-
-        // Array of primitives or many-relation -> single row
-        if (baseKey && property && (isArrayOfPrimitives || isRelationArray)) {
-            return (
-                <div
-                    className={`grid grid-cols-12 gap-x-4 ${isTopLevel ? "py-4" : "py-2"} items-start ${isTopLevel ? `border-b ${defaultBorderMixin} last:border-b-0` : ""}`}>
-                    <div className="col-span-4 pr-2">
-                        <Typography variant="caption"
-                            color={"secondary"}
-                            component={"span"}
-                            className="break-words">
-                            {arrayLabel}
-                        </Typography>
-                    </div>
-                    <div className="col-span-8">
-                        <PropertyPreview propertyKey={baseKey}
-                            value={data}
-                            property={property}
-                            size={size}/>
-                    </div>
-                </div>
-            );
-        }
-
-        // Array of maps or unknown -> array header + combined item header (MapName [index]) then content
-        return (
-            <div className={`${isTopLevel ? "py-4" : "py-1"} ${isTopLevel ? `border-b ${defaultBorderMixin} last:border-b-0` : ""}`}>
-                {baseKey && arrayLabel && !suppressHeader && (
-                    <Typography variant="caption"
-                        color={"secondary"}
-                        component={"span"}>
-                        {arrayLabel}
-                    </Typography>
-                )}
-                <div className={baseKey ? `pl-4 mt-1 border-l ${defaultBorderMixin}` : ""}>
-                    {data.map((item, index) => {
-                        if (item === null || item === undefined) return null;
-                        const currentKey = baseKey ? `${baseKey}[${index}]` : `[${index}]`;
-
-                        // Combined header text
-                        const itemHeader = isArrayOfMaps && ofProp?.name
-                            ? `${ofProp.name} [${index}]`
-                            : `[${index}]`;
-
-                        return (
-                            <div key={currentKey} className="py-1">
-                                <Typography variant="caption"
-                                    color={"secondary"}
-                                    component={"span"}>
-                                    {itemHeader}
-                                </Typography>
-                                <div className={`pl-4 mt-1 border-l ${defaultBorderMixin}`}>
-                                    <PropertyCollectionView
-                                        data={item}
-                                        properties={properties}
-                                        baseKey={currentKey}
-                                        suppressHeader={true} // don’t repeat the inner map header
-                                        size={size}
-                                    />
-                                </div>
-                            </div>
-                        );
-                    })}
-                </div>
-            </div>
-        );
-    }
-
-    // Objects (maps or plain objects)
-    if (typeof data === "object" && data !== null) {
-        const {
-            label,
-            property
-        } = baseKey
-                ? buildPropertyLabelAndGetProperty(properties, baseKey)
-                : {
-                    label: "",
-                    property: undefined as Property | undefined
-                };
-
-        // Non-map leaf-like object -> single row
-        if (baseKey && (!property || property.type !== "map" || !property.properties)) {
-            if (!property) return null;
-            return (
-                <div
-                    className={`grid grid-cols-12 gap-x-4 ${isTopLevel ? "py-4" : "py-2"} items-start ${isTopLevel ? `border-b ${defaultBorderMixin} last:border-b-0` : ""}`}>
-                    <div className="col-span-4 pr-2">
-                        <Typography variant="caption"
-                            color={"secondary"}
-                            component={"span"}
-                            className="break-words">
-                            {label}
-                        </Typography>
-                    </div>
-                    <div className="col-span-8">
-                        <PropertyPreview propertyKey={baseKey}
-                            value={data}
-                            property={property}
-                            size={size}/>
-                    </div>
-                </div>
-            );
-        }
-
-        // Map with defined properties -> show map header only if not suppressed
-        const showMapHeader =
-            baseKey &&
-            !suppressHeader &&
-            property?.type === "map" &&
-            (property.name || !pathEndsWithIndex(baseKey));
-
-        const headerText = property?.name || label;
-
-        return (
-            <div className={`${isTopLevel ? "py-4" : "py-1"} ${isTopLevel ? `border-b ${defaultBorderMixin} last:border-b-0` : ""}`}>
-                {showMapHeader && (
-                    <Typography variant="caption"
-                        color={"secondary"}
-                        component={"span"}
-                    >
-                        {headerText}
-                    </Typography>
-                )}
-                <div className={baseKey ? `pl-4 mt-1 border-l ${defaultBorderMixin}` : ""}>
-                    {Object.entries(data).map(([key, value]) => {
-                        if (value === null || value === undefined) return null;
-                        if (baseKey === "" && !properties[key]) return null;
-                        const currentKey = baseKey ? `${baseKey}.${key}` : key;
-                        return (
-                            <PropertyCollectionView
-                                key={currentKey}
-                                data={value}
-                                properties={properties}
-                                baseKey={currentKey}
-                                size={size}
-                            />
-                        );
-                    })}
-                </div>
-            </div>
-        );
-    }
-
-    // Primitives
-    if (baseKey) {
-        const {
-            label,
-            property
-        } = buildPropertyLabelAndGetProperty(properties, baseKey);
-        if (!property) return null;
-        return (
-            <div
-                className={`grid grid-cols-12 gap-x-4 ${isTopLevel ? "py-4" : "py-2"} items-start ${isTopLevel ? `border-b ${defaultBorderMixin} last:border-b-0` : ""}`}>
-                <div className="col-span-4 pr-2">
-                    <Typography variant="caption"
-                        color={"secondary"}
-                        component={"span"}
-                        className="break-words">
-                        {label}
-                    </Typography>
-                </div>
-                <div className="col-span-8">
-                    <PropertyPreview propertyKey={baseKey}
-                        value={data}
-                        property={property}
-                        size={size}/>
-                </div>
-            </div>
-        );
-    }
-
-    return null;
-};
-
-export function buildDataFromPaths(values: object, paths: string[]): object {
-    const result = {};
-    paths.forEach(path => {
-        const value = getValueInPath(values, path);
-        if (value === undefined) return;
-
-        // lodash.set would be perfect here
-        const segments = path.replace(/\[(\d+)\]/g, ".$1").split(".");
-        let current: Record<string, unknown> = result;
-        segments.forEach((segment, index) => {
-            if (index === segments.length - 1) {
-                current[segment] = value;
-            } else {
-                const nextSegment = segments[index + 1];
-                const isNextAnIndex = /^\d+$/.test(nextSegment);
-                if (!current[segment]) {
-                    if (isNextAnIndex) {
-                        current[segment] = [];
-                    } else {
-                        current[segment] = {};
-                    }
-                }
-                current = current[segment] as Record<string, unknown>;
-            }
-        });
-    });
-    return result;
-}

package/src/components/PropertyConfigBadge.tsx

@@ -1,28 +0,0 @@
-import type { Property } from "@rebasepro/types";
-import type { PropertyConfig } from "@rebasepro/cms-types";
-import { getDefaultFieldConfig } from "./field_configs";
-import { getIconForWidget } from "../util/property_utils";
-
-export function PropertyConfigBadge({
-    propertyConfig,
-    disabled,
-    size = "medium"
-}: {
-    propertyConfig: PropertyConfig | undefined,
-    disabled?: boolean,
-    size?: "extraSmall" | "small" | "medium"
-}): React.ReactNode {
-    const sizeClasses = size === "extraSmall" ? "h-5 w-5" : size === "small" ? "h-6 w-6" : "h-8 w-8";
-    const iconSize = size === "extraSmall" ? 14 : size === "small" ? "smallest" : "small";
-    const classes = `${sizeClasses} flex-shrink-0 flex items-center justify-center rounded-full shadow-2xs text-white ` + (disabled ? "bg-surface-400 dark:bg-surface-600" : "");
-
-    const defaultPropertyConfig = typeof propertyConfig?.property === "object" ? getDefaultFieldConfig(propertyConfig.property as Property) : undefined;
-
-    return <div
-        className={classes}
-        style={{
-            background: !disabled ? (propertyConfig?.color ?? defaultPropertyConfig?.color ?? "#888") : undefined
-        }}>
-        {propertyConfig?.Icon ? getIconForWidget(propertyConfig, iconSize) : getIconForWidget(defaultPropertyConfig, iconSize)}
-    </div>
-}

package/src/components/PropertyIdCopyTooltip.tsx

@@ -1,47 +0,0 @@
-import { CopyIcon, IconButton, Tooltip, Typography } from "@rebasepro/ui";
-import { useCallback, useState } from "react";
-
-export function PropertyIdCopyTooltip({
-    propertyKey,
-    className,
-    children
-}: {
-    propertyKey: string,
-    className?: string,
-    children: React.ReactNode
-}) {
-    return <Tooltip title={<PropertyIdCopyTooltipContent propertyKey={propertyKey}/>}
-        delayDuration={800}
-        side={"top"}
-        align={"start"}
-        sideOffset={8}
-        className={className}>
-        {children}
-    </Tooltip>
-
-}
-
-export function PropertyIdCopyTooltipContent({ propertyKey }: { propertyKey: string }) {
-
-    const [copied, setCopied] = useState(false);
-
-    return (
-        <div className={"flex flex-row gap-2 items-center justify-center text-on-surface"}>
-            <div>
-                <Typography variant={"caption"} className={"min-w-20 text-on-surface-variant opacity-80"}
-                    color={"inherit"}>{copied ? "Copied" : "Property ID"}</Typography>
-                <Typography variant={"caption"} className={"text-on-surface"}><code>{propertyKey}</code></Typography>
-            </div>
-            <IconButton size={"small"}>
-                <CopyIcon
-                    className={"text-on-surface"}
-                    onClick={useCallback(() => {
-                        navigator.clipboard.writeText(propertyKey);
-                        setCopied(true);
-                        setTimeout(() => setCopied(false), 2000);
-                    }, [propertyKey])}
-                />
-            </IconButton>
-        </div>
-    );
-}

package/src/components/RebaseAuthGate.tsx

@@ -1,44 +0,0 @@
-import React from "react";
-import {
-    useRebaseRegistry,
-    useAuthController
-} from "@rebasepro/app";
-import { CircularProgressCenter } from "@rebasepro/ui";
-import { LoginView } from "@rebasepro/app";
-import type { AuthControllerExtended } from "@rebasepro/cms-types";
-
-/**
- * Auth gate component that handles the authentication flow.
- *
- * - Shows a loading spinner while `authController.initialLoading` is true.
- * - Shows the login view when no user is authenticated.
- * - Renders `children` when a user is authenticated.
- *
- * **Independently usable**: Use this alone when you want auth gating
- * without the full admin layout or navigation.
- *
- * @example
- * ```tsx
- * <RebaseAuthGate>
- *   <MyCustomApp />
- * </RebaseAuthGate>
- * ```
- */
-export function RebaseAuthGate({ children }: { children: React.ReactNode }) {
-    const registry = useRebaseRegistry();
-    const authController = useAuthController();
-
-
-    if (authController?.initialLoading) {
-        return <CircularProgressCenter size={"large"}/>;
-    }
-
-    if (!authController?.user) {
-        const ActiveLoginView = registry.authConfig?.loginView ?? (
-            <LoginView authController={authController as AuthControllerExtended}/>
-        );
-        return <>{ActiveLoginView}</>;
-    }
-
-    return <>{children}</>;
-}

package/src/components/RebaseCMS.tsx

@@ -1,30 +0,0 @@
-import React, { useLayoutEffect } from "react";
-import { useRebaseRegistryDispatch } from "@rebasepro/app";
-import type { RebaseCMSConfig } from "@rebasepro/cms-types";
-
-/**
- * Declarative component to configure the admin in Rebase.
- * Renders nothing — purely registers config into the RebaseRegistry.
- *
- * When `collectionEditor` is provided, the built-in visual schema editor
- * is auto-wired as a native feature (slots, provider, Studio view) without
- * needing any external plugin.
- */
-export function RebaseCMS({ collections, views, homePage, entityViews, collectionViews, entityActions, collectionEditor, navigationGroupMappings, basePath }: RebaseCMSConfig) {
-    const dispatch = useRebaseRegistryDispatch();
-
-    useLayoutEffect(() => {
-        dispatch.registerAdmin({ collections,
-views,
-homePage,
-entityViews,
-collectionViews,
-entityActions,
-collectionEditor,
-navigationGroupMappings,
-basePath });
-        return () => dispatch.unregisterAdmin();
-    }, [dispatch, collections, views, homePage, entityViews, collectionViews, entityActions, collectionEditor, navigationGroupMappings, basePath]);
-
-    return null;
-}

package/src/components/RebaseLayout.tsx

@@ -1,80 +0,0 @@
-import React from "react";
-import { Outlet } from "react-router";
-import {
-    useAdminModeController,
-    useComponentOverride,
-    useRebaseRegistry
-} from "@rebasepro/app";
-
-import { Scaffold } from "./app/Scaffold";
-import { Drawer } from "./app/Drawer";
-import { SideDialogs } from "./SideDialogs";
-import { AdminModeSyncer } from "./AdminModeSyncer";
-import type { AppView } from "@rebasepro/cms-types";
-
-export interface RebaseLayoutProps {
-    /** Title shown in the drawer. */
-    title?: string;
-    /** Top bar. Only rendered if provided — pass `<AppBar/>` for the default one. */
-    appBar?: React.ReactNode;
-    /** Custom Drawer to override the default. */
-    drawer?: React.ReactNode;
-    /** Expand the drawer while the pointer is over it. On by default; pass `false` to opt out. Not a load-time default — that is `defaultDrawerOpen`. */
-    autoOpenDrawer?: boolean;
-    /** Start with the drawer expanded instead of collapsed to icons. Ignored on small layouts. */
-    defaultDrawerOpen?: boolean;
-    /** Path to the logo shown in the drawer and top bar. Falls back to the Rebase mark. */
-    logo?: string;
-    /** Dev views passed to AdminModeSyncer (resolved from RebaseNavigation). */
-    devViews?: AppView[];
-}
-
-/**
- * Layout layer — provides the Scaffold, Drawer, and SideDialogs.
- *
- * Wraps the route outlet with the standard Rebase admin layout.
- * Override the drawer via props; pass `appBar` to add a top bar (there is
- * none by default — the drawer owns navigation and user actions).
- *
- * **Independently usable**: Use this when you want the Rebase layout
- * without its default route definitions.
- *
- * @example
- * ```tsx
- * <RebaseLayout title="My Admin" appBar={<AppBar/>}>
- *   <Route path="/" element={<MyHomePage />} />
- *   <Route path="/custom" element={<CustomView />} />
- * </RebaseLayout>
- * ```
- */
-export function RebaseLayout(props: RebaseLayoutProps) {
-    const {
-        title = "Rebase",
-        appBar,
-        drawer,
-        autoOpenDrawer = true,
-        defaultDrawerOpen = false,
-        logo,
-        devViews = []
-    } = props;
-
-    const adminModeController = useAdminModeController();
-    const ResolvedDrawer = useComponentOverride("Shell.Drawer", Drawer);
-
-    const ActiveDrawer = drawer ?? (
-        <ResolvedDrawer
-            title={title}
-            logoDestination={adminModeController.mode === "studio" ? "/s" : "/"}
-        />
-    );
-
-    return (
-        <Scaffold autoOpenDrawer={autoOpenDrawer} defaultDrawerOpen={defaultDrawerOpen} logo={logo}>
-            <AdminModeSyncer devViews={devViews}/>
-            {appBar}
-            {ActiveDrawer}
-            <Outlet/>
-            <SideDialogs/>
-        </Scaffold>
-    );
-}