@rebasepro/cms 0.17.3-canary.gdd23447 → 0.18.0

package/src/collection_editor/ui/collection_editor/PropertyFieldPreview.tsx

@@ -1,164 +0,0 @@
-import { useCustomizationController } from "@rebasepro/app";
-import { getFieldConfig } from "../../../components/field_configs";
-import { PropertyConfigBadge } from "../../../components/PropertyConfigBadge";
-import { ErrorBoundary } from "@rebasepro/ui";
-import { Property } from "@rebasepro/types";
-import { isPropertyBuilder } from "@rebasepro/common";
-import { cls, Paper, Typography } from "@rebasepro/ui";
-import { FunctionSquareIcon, iconSize, MinusCircleIcon } from "@rebasepro/ui";
-
-
-export function PropertyFieldPreview({
-    property,
-    propertyKey,
-    onClick,
-    hasError,
-    includeName,
-    includeEditButton,
-    selected
-}: {
-    property: Property,
-    propertyKey?: string,
-    hasError?: boolean,
-    selected?: boolean,
-    includeName?: boolean,
-    includeEditButton?: boolean;
-    onClick?: () => void
-}) {
-
-    const { propertyConfigs } = useCustomizationController();
-    const propertyConfig = getFieldConfig(property, propertyConfigs);
-
-
-    const borderColorClass = hasError
-        ? "border-red-500 dark:border-red-500 border-red-500/100 dark:border-red-500/100 ring-0 dark:ring-0"
-        : (selected ? "border-primary" : "");
-
-    return <ErrorBoundary>
-        <div onClick={onClick} className={onClick ? "cursor-pointer" : ""}>
-        <div
-            className={cls(
-                "w-full flex flex-row gap-3 items-center px-3 py-2 rounded-lg transition-all duration-200 border bg-white dark:bg-surface-900 shadow-xs",
-                borderColorClass || "border-surface-200 dark:border-surface-700",
-                selected
-                    ? "bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-light ring-1 ring-inset ring-primary border-primary/30"
-                    : "hover:bg-surface-50 dark:hover:bg-surface-700"
-            )}
-        >
-            <PropertyConfigBadge propertyConfig={propertyConfig} size="small"/>
-
-            <div className="flex-1 flex flex-col min-w-0 mr-16">
-                {includeName &&
-                    <ErrorBoundary>
-                        <div className="flex items-center gap-2 min-w-0">
-                            <Typography variant="body2" component="span" className="truncate font-medium">
-                                {property.name || propertyKey || "\u00a0"}
-                            </Typography>
-                            {propertyConfig?.name && (
-                                <Typography
-                                    variant={"caption"}
-                                    component="span"
-                                    className="text-text-secondary dark:text-text-secondary-dark shrink-0">
-                                    {propertyConfig.name}
-                                </Typography>
-                            )}
-                        </div>
-                        <div className="flex items-center gap-1.5 mt-0.5 min-w-0">
-                            {propertyKey && (
-                                <Typography variant="caption" component="span" color="secondary" className="font-mono truncate">
-                                    {propertyKey}
-                                </Typography>
-                            )}
-                            <ErrorBoundary>
-                                <Typography variant="caption" component="span" className="shrink-0 text-text-disabled dark:text-text-disabled-dark font-mono">
-                                    · {"columnType" in property ? (property as { columnType?: string }).columnType ?? property.type : property.type}
-                                </Typography>
-                            </ErrorBoundary>
-                        </div>
-                    </ErrorBoundary>}
-
-                {!includeName &&
-                    <div className="flex flex-row items-center gap-2">
-                        <ErrorBoundary>
-                            <Typography
-                                variant={"caption"}
-                                component="span"
-                                className="text-text-secondary dark:text-text-secondary-dark font-medium">
-                                {propertyConfig?.name}
-                            </Typography>
-                        </ErrorBoundary>
-                    </div>}
-            </div>
-
-            {includeEditButton && <Typography variant={"button"}>EDIT</Typography>}
-        </div>
-        </div>
-    </ErrorBoundary>
-}
-
-export function NonEditablePropertyPreview({
-    name,
-    selected,
-    onClick,
-    property
-}: {
-    name: string,
-    selected: boolean,
-    onClick?: () => void,
-    property?: Property
-}) {
-
-    const { propertyConfigs } = useCustomizationController();
-    const propertyConfig = !isPropertyBuilder(property) && property ? getFieldConfig(property, propertyConfigs) : undefined;
-
-    return (
-        <div onClick={onClick} className={onClick ? "cursor-pointer" : ""}>
-        <div
-            className={cls(
-                "w-full flex flex-row gap-3 items-center px-3 py-2 rounded-lg transition-all duration-200 border bg-white dark:bg-surface-900 border-surface-200 dark:border-surface-700 shadow-xs",
-                selected
-                    ? "bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-light ring-1 ring-inset ring-primary border-primary/30"
-                    : "hover:bg-surface-50 dark:hover:bg-surface-700"
-            )}
-        >
-            <div className={"relative shrink-0"}>
-                {propertyConfig && <PropertyConfigBadge propertyConfig={propertyConfig} size="small"/>}
-                {!propertyConfig && <div
-                    className={"h-8 w-8 flex items-center justify-center rounded-full shadow-2xs text-white bg-surface-500"}>
-                    <FunctionSquareIcon className={"text-inherit"} size={iconSize.small}/>
-                </div>}
-                <MinusCircleIcon className={"text-surface-accent-400 absolute -right-2 -top-2 bg-surface-50 dark:bg-surface-900 rounded-full"} size={iconSize.small}/>
-            </div>
-
-            <div className="flex-1 flex flex-col min-w-0 mr-16">
-                <div className="flex items-center gap-2 min-w-0">
-                    <Typography variant="label" component="span" className="truncate">
-                        {property?.name ? property.name : name}
-                    </Typography>
-                    {propertyConfig && <Typography variant={"caption"} component="span" className="text-text-secondary dark:text-text-secondary-dark shrink-0">
-                        {propertyConfig?.name}
-                    </Typography>}
-                </div>
-
-                <div className="flex flex-row items-center gap-1.5 mt-0.5 min-w-0">
-                    <Typography variant="caption" component="span" color="secondary" className="font-mono truncate">
-                        {name}
-                    </Typography>
-
-                    {property && isPropertyBuilder(property) && <ErrorBoundary>
-                        <Typography variant="caption" component="span" className="text-text-disabled dark:text-text-disabled-dark">
-                            · Defined in code
-                        </Typography>
-                    </ErrorBoundary>}
-
-                    {!property && <ErrorBoundary>
-                        <Typography variant="caption" component="span" className="text-text-disabled dark:text-text-disabled-dark">
-                            · Additional field
-                        </Typography>
-                    </ErrorBoundary>}
-                </div>
-            </div>
-        </div>
-        </div>
-    )
-}

package/src/collection_editor/ui/collection_editor/PropertyTree.tsx

@@ -1,364 +0,0 @@
-
-import React from "react";
-import { deepEqual as equal } from "fast-equals"
-
-import { AIModifiedIndicator } from "@rebasepro/app";
-import { Properties, Property } from "@rebasepro/types";
-import { AdditionalFieldDelegate } from "@rebasepro/cms-types";
-import { isPropertyBuilder } from "@rebasepro/common";
-import {
-    ArrowDownToLineIcon,
-    ArrowUpToLineIcon,
-    cls,
-    defaultBorderMixin,
-    FileSearchIcon,
-    IconButton,
-    iconSize,
-    Menu,
-    MenuItem,
-    MoreVerticalIcon,
-    Tooltip,
-    Trash2Icon
-} from "@rebasepro/ui";
-import { NonEditablePropertyPreview, PropertyFieldPreview } from "./PropertyFieldPreview";
-import {
-    closestCenter,
-    DndContext,
-    DragEndEvent,
-    KeyboardSensor,
-    PointerSensor,
-    useSensor,
-    useSensors
-} from "@dnd-kit/core";
-import {
-    SortableContext,
-    sortableKeyboardCoordinates,
-    useSortable,
-    verticalListSortingStrategy
-} from "@dnd-kit/sortable";
-import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
-
-import { CSS } from "@dnd-kit/utilities";
-import { getFullId, getFullIdPath } from "./util";
-
-import { useAIModifiedPaths } from "./AIModifiedPathsContext";
-
-export const PropertyTree = React.memo(
-    function PropertyTree<M extends {
-        [Key: string]: unknown
-    }>({
-        namespace,
-        selectedPropertyKey,
-        onPropertyClick,
-        properties,
-        propertiesOrder: propertiesOrderProp,
-        additionalFields,
-        errors,
-        onPropertyMove,
-        onPropertyRemove,
-        className,
-        inferredPropertyKeys
-    }: {
-        namespace?: string;
-        selectedPropertyKey?: string;
-        onPropertyClick?: (propertyKey: string, namespace?: string) => void;
-        properties: Properties;
-        propertiesOrder?: string[];
-        additionalFields?: AdditionalFieldDelegate<M>[];
-        errors: Record<string, any>;
-        onPropertyMove?: (propertiesOrder: string[], namespace?: string) => void;
-        onPropertyRemove?: (propertyKey: string, namespace?: string) => void;
-        className?: string;
-        inferredPropertyKeys?: string[];
-    }) {
-
-        // Filter propertiesOrder to only include top-level keys (no dots) that exist in properties
-        // Nested keys like "data.mode" are for column ordering in the table, not for the property editor
-        const propertyKeys = Object.keys(properties);
-        const filteredOrder = (propertiesOrderProp ?? propertyKeys)
-            .filter(key => !key.includes(".") && properties[key as keyof typeof properties]);
-
-        // Ensure all properties are included (append any missing ones)
-        const missingKeys = propertyKeys.filter(key => !filteredOrder.includes(key));
-        const propertiesOrder = [...filteredOrder, ...missingKeys];
-
-        const sensors = useSensors(
-            useSensor(PointerSensor, {
-                activationConstraint: {
-                    distance: 5
-                }
-            }),
-            useSensor(KeyboardSensor, {
-                coordinateGetter: sortableKeyboardCoordinates
-            })
-        );
-
-        const handleDragEnd = (event: DragEndEvent) => {
-            const {
-                active,
-                over
-            } = event;
-
-            if (!over || active.id === over.id) {
-                return;
-            }
-
-            const activeId = String(active.id);
-            const overId = String(over.id);
-
-            // Extract property keys from the full IDs
-            const activeKey = activeId.includes(".") ? activeId.split(".").pop() : activeId;
-            const overKey = overId.includes(".") ? overId.split(".").pop() : overId;
-
-            if (!activeKey || !overKey) return;
-
-            const oldIndex = propertiesOrder.indexOf(activeKey);
-            const newIndex = propertiesOrder.indexOf(overKey);
-
-            if (oldIndex !== -1 && newIndex !== -1) {
-                const newPropertiesOrder = [...propertiesOrder];
-                const [removed] = newPropertiesOrder.splice(oldIndex, 1);
-                newPropertiesOrder.splice(newIndex, 0, removed);
-
-                if (onPropertyMove) {
-                    onPropertyMove(newPropertiesOrder, namespace);
-                }
-            }
-        };
-
-        const items = propertiesOrder.map(key => getFullId(key, namespace));
-
-        return (
-            <DndContext
-                sensors={sensors}
-                collisionDetection={closestCenter}
-                onDragEnd={handleDragEnd}
-                modifiers={[restrictToVerticalAxis]}
-            >
-                <SortableContext
-                    items={items}
-                    strategy={verticalListSortingStrategy}
-                >
-                    <div className={cls("flex flex-col gap-0.5", className)}>
-
-                        {propertiesOrder && propertiesOrder
-                            .map((propertyKey: string, index: number) => {
-                                const property = properties[propertyKey];
-                                const additionalField = additionalFields?.find(field => field.key === propertyKey);
-
-                                if (!property && !additionalField) {
-                                    console.warn(`Property ${propertyKey} not found in properties or additionalFields`);
-                                    return null;
-                                }
-
-                                const id = getFullId(propertyKey, namespace);
-
-                                return (
-                                    <PropertyTreeEntry
-                                        key={id}
-                                        id={id}
-                                        propertyKey={propertyKey}
-                                        property={property}
-                                        additionalField={additionalField}
-                                        errors={errors}
-                                        namespace={namespace}
-                                        propertiesOrder={propertiesOrder}
-                                        inferredPropertyKeys={inferredPropertyKeys}
-                                        onPropertyMove={onPropertyMove}
-                                        onPropertyRemove={onPropertyRemove}
-                                        onPropertyClick={onPropertyClick}
-                                        selectedPropertyKey={selectedPropertyKey}
-
-                                    />
-                                );
-                            }).filter(Boolean)}
-                    </div>
-                </SortableContext>
-            </DndContext>
-        );
-    },
-    equal
-);
-
-export function PropertyTreeEntry({
-    id,
-    propertyKey,
-    namespace,
-    property,
-    additionalField,
-    selectedPropertyKey,
-    errors,
-    propertiesOrder,
-    onPropertyClick,
-    onPropertyMove,
-    onPropertyRemove,
-    inferredPropertyKeys
-}: {
-    id: string;
-    propertyKey: string;
-    namespace?: string;
-    property: Property;
-    additionalField?: AdditionalFieldDelegate<any>;
-    selectedPropertyKey?: string;
-    errors: Record<string, any>;
-    propertiesOrder: string[];
-    onPropertyClick?: (propertyKey: string, namespace?: string) => void;
-    onPropertyMove?: (propertiesOrder: string[], namespace?: string) => void;
-    onPropertyRemove?: (propertyKey: string, namespace?: string) => void;
-    inferredPropertyKeys?: string[];
-}) {
-
-    const {
-        attributes,
-        listeners,
-        setNodeRef,
-        transform,
-        transition,
-        isDragging
-    } = useSortable({
-        id
-    });
-
-    const style = {
-        // Key change: use Translate instead of Transform to prevent stretching
-        transform: CSS.Translate.toString(transform),
-        transition,
-        zIndex: isDragging ? 10 : undefined,
-        position: "relative" as const
-    };
-
-    const isPropertyInferred = inferredPropertyKeys?.includes(namespace ? `${namespace}.${propertyKey}` : propertyKey);
-    const fullId = id;
-    const fullIdPath = getFullIdPath(propertyKey, namespace);
-    const hasError = fullIdPath in errors;
-
-    let subtree;
-    if (typeof property === "object") {
-        if (property.type === "map" && property.properties) {
-            subtree = <PropertyTree
-                selectedPropertyKey={selectedPropertyKey}
-                namespace={fullId}
-                properties={property.properties}
-                propertiesOrder={property.propertiesOrder}
-                errors={errors}
-                onPropertyClick={onPropertyClick}
-                onPropertyMove={onPropertyMove}
-                onPropertyRemove={onPropertyRemove}
-                inferredPropertyKeys={inferredPropertyKeys}
-            />
-        }
-    }
-
-    const selected = selectedPropertyKey === fullId;
-    const editable = property && !isPropertyBuilder(property);
-
-    // Check if this property was AI-modified
-    const aiModifiedPaths = useAIModifiedPaths();
-    const isAIModified = aiModifiedPaths?.isPathModified(`properties.${propertyKey}`) ?? false;
-
-    return (
-        <div
-            ref={setNodeRef}
-            style={style}
-            className="relative cursor-grab"
-            {...attributes}
-            {...listeners}
-        >
-            <div className="relative">
-                {subtree && <div
-                    className={"absolute border-l " + defaultBorderMixin}
-                    style={{
-                        left: "24px",
-                        top: "40px",
-                        bottom: "16px"
-                    }}/>}
-
-                <div>
-                    {!isPropertyBuilder(property) && !additionalField && editable
-                        ? <PropertyFieldPreview
-                            property={property}
-                            propertyKey={propertyKey}
-                            onClick={onPropertyClick ? () => onPropertyClick(propertyKey, namespace) : undefined}
-                            includeName={true}
-                            selected={selected}
-                            hasError={hasError}/>
-                        : <NonEditablePropertyPreview name={propertyKey}
-                            property={property}
-                            onClick={onPropertyClick ? () => onPropertyClick(propertyKey, namespace) : undefined}
-                            selected={selected}/>}
-                </div>
-
-                <div className="absolute top-1/2 -translate-y-1/2 right-2 flex flex-row items-center gap-1">
-                    {isAIModified && <AIModifiedIndicator/>}
-                    {isPropertyInferred && <>
-                        <Tooltip title={"Inferred property"} asChild={true}>
-                            <IconButton size="smallest" disabled>
-                                <FileSearchIcon size={iconSize.smallest}/>
-                            </IconButton>
-                        </Tooltip>
-                        {onPropertyRemove && <Tooltip title={"Remove inferred property"}
-                            asChild={true}>
-                            <IconButton size="smallest"
-                                color="inherit"
-                                onClick={(e: React.MouseEvent) => {
-                                    e.stopPropagation();
-                                    onPropertyRemove(propertyKey, namespace);
-                                }}>
-                                <Trash2Icon size={iconSize.smallest}/>
-                            </IconButton>
-                        </Tooltip>}
-                    </>}
-
-                    <Menu
-                        trigger={
-                            <IconButton
-                                size="smallest"
-                            >
-                                <MoreVerticalIcon size={iconSize.smallest}/>
-                            </IconButton>
-                        }
-                    >
-                        <MenuItem
-                            dense
-                            onClick={() => {
-                                const currentIndex = propertiesOrder.indexOf(propertyKey);
-                                if (currentIndex > 0) {
-                                    const newOrder = propertiesOrder.filter(k => k !== propertyKey);
-                                    newOrder.unshift(propertyKey);
-                                    onPropertyMove?.(newOrder, namespace);
-                                }
-                            }}
-                        >
-                            <ArrowUpToLineIcon size={iconSize.smallest}/>
-                            Move to top
-                        </MenuItem>
-                        <MenuItem
-                            dense
-                            onClick={() => {
-                                const currentIndex = propertiesOrder.indexOf(propertyKey);
-                                if (currentIndex < propertiesOrder.length - 1) {
-                                    const newOrder = propertiesOrder.filter(k => k !== propertyKey);
-                                    newOrder.push(propertyKey);
-                                    onPropertyMove?.(newOrder, namespace);
-                                }
-                            }}
-                        >
-                            <ArrowDownToLineIcon size={iconSize.smallest}/>
-                            Move to bottom
-                        </MenuItem>
-                        <MenuItem
-                            dense
-                            onClick={() => onPropertyRemove?.(propertyKey, namespace)}
-                        >
-                            <Trash2Icon size={iconSize.smallest}/>
-                            Delete
-                        </MenuItem>
-                    </Menu>
-
-                </div>
-
-                {subtree && <div className={"ml-12"}>{subtree}</div>}
-            </div>
-        </div>
-    );
-}

package/src/collection_editor/ui/collection_editor/RouterCollectionStudioView.tsx

@@ -1,44 +0,0 @@
-/**
- * Router-aware wrapper around CollectionStudioView.
- *
- * This component provides the react-router-based navigation behavior
- * that Rebase Studio expects: cancel navigates to the root path,
- * save navigates to the saved collection's slug, and a snackbar
- * toast is shown on success.
- *
- * External consumers should use `CollectionStudioView` directly
- * (which has no react-router dependency).
- */
-import React from "react";
-import { useNavigate } from "react-router";
-import { useUrlController } from "../../_cms_internals";
-import { useSnackbarController } from "@rebasepro/app";
-import { CollectionStudioView, CollectionStudioViewProps } from "./CollectionStudioView";
-
-export type RouterCollectionStudioViewProps = Omit<CollectionStudioViewProps, "onSave" | "onCancel">;
-
-export function RouterCollectionStudioView(props: RouterCollectionStudioViewProps) {
-    const navigate = useNavigate();
-    const urlController = useUrlController();
-    const snackbarController = useSnackbarController();
-
-    return (
-        <CollectionStudioView
-            {...props}
-            onCancel={() => {
-                navigate(urlController.buildAppUrlPath("/"));
-            }}
-            onSave={(savedCollection) => {
-                if (savedCollection) {
-                    snackbarController.open({
-                        type: "success",
-                        message: `Collection ${savedCollection.name || savedCollection.slug} saved`
-                    });
-                    if (props.collectionId === "new") {
-                        navigate(urlController.buildAppUrlPath(`s/schema/${savedCollection.slug}`));
-                    }
-                }
-            }}
-        />
-    );
-}

package/src/collection_editor/ui/collection_editor/RouterCollectionsStudioView.tsx

@@ -1,41 +0,0 @@
-/**
- * Router-aware wrapper around CollectionsStudioView.
- *
- * This component provides the react-router-based navigation behavior
- * that Rebase Studio expects: the active collection is derived from the
- * URL, and clicking a collection navigates via react-router.
- *
- * External consumers should use `CollectionsStudioView` directly
- * (which has no react-router dependency).
- */
-import React from "react";
-import { useLocation, useNavigate } from "react-router";
-import { useUrlController } from "../../_cms_internals";
-import { CollectionsStudioView, CollectionsStudioViewProps } from "./CollectionsStudioView";
-
-export type RouterCollectionsStudioViewProps = Omit<CollectionsStudioViewProps, "activeCollectionId" | "onActiveCollectionChange">;
-
-export function RouterCollectionsStudioView(props: RouterCollectionsStudioViewProps) {
-    const navigate = useNavigate();
-    const urlController = useUrlController();
-    const location = useLocation();
-
-    // Determine the active collection from the URL segment after "schema/"
-    const basePath = urlController.buildAppUrlPath("schema");
-    const relativePath = location.pathname.replace(basePath, "").replace(/^\//, "");
-    const activeCollectionId = relativePath.split("/")[0] || undefined;
-
-    return (
-        <CollectionsStudioView
-            {...props}
-            activeCollectionId={activeCollectionId}
-            onActiveCollectionChange={(id) => {
-                if (id) {
-                    navigate(urlController.buildAppUrlPath(`schema/${id}`));
-                } else {
-                    navigate(urlController.buildAppUrlPath("schema"));
-                }
-            }}
-        />
-    );
-}