@rebasepro/cms 0.0.1-canary.4d4fb3e

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

@@ -0,0 +1,159 @@
+import { useCustomizationController } from "@rebasepro/core";
+import { getFieldConfig, PropertyConfigBadge } from "../../_cms_internals";
+import { ErrorBoundary } from "@rebasepro/ui";
+import { Property } from "@rebasepro/types";
+import { isPropertyBuilder } from "@rebasepro/common";
+import {
+    cls,
+    DoNotDisturbOnIcon,
+    FunctionsIcon,
+    Paper,
+    Typography,
+} 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" : ""}>
+        <Paper
+            className={cls(
+                "w-full flex flex-row gap-3 items-center px-3 py-2 rounded-lg transition-all duration-200 border border-transparent bg-transparent",
+                selected 
+                    ? "bg-primary/5 dark:bg-primary/10 ring-1 ring-inset ring-primary" 
+                    : "hover:bg-surface-50 dark:hover:bg-surface-800"
+            )}
+        >
+            <PropertyConfigBadge propertyConfig={propertyConfig} size="small" />
+
+            <div className="flex-1 flex flex-col min-w-0 pr-8">
+                {includeName &&
+                    <ErrorBoundary>
+                        <div className="flex items-center gap-2">
+                            <Typography variant="body2" component="span">
+                                {property.name || propertyKey || "\u00a0"}
+                            </Typography>
+                            {property.name && propertyKey && property.name !== propertyKey && (
+                                <Typography variant="caption" component="span" color="secondary" className="font-mono">
+                                    {propertyKey}
+                                </Typography>
+                            )}
+                        </div>
+                    </ErrorBoundary>}
+
+                <div className="flex flex-row items-center gap-2 mt-0.5">
+                    <ErrorBoundary>
+                        <Typography
+                            variant={"caption"}
+                            component="span"
+                            className="text-text-secondary dark:text-text-secondary-dark font-medium">
+                            {propertyConfig?.name}
+                        </Typography>
+                    </ErrorBoundary>
+                </div>
+            </div>
+
+            <ErrorBoundary>
+                <Typography variant="caption" component="span" className="ml-auto shrink-0 text-text-disabled dark:text-text-disabled-dark font-mono bg-surface-100 dark:bg-surface-800 px-1.5 py-0.5 rounded mr-8">
+                    {("columnType" in property ? (property as unknown as Record<string, unknown>).columnType as string : undefined) || property.type}
+                </Typography>
+            </ErrorBoundary>
+
+            {includeEditButton && <Typography variant={"button"}>EDIT</Typography>}
+        </Paper>
+        </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" : ""}>
+        <Paper
+            className={cls(
+                "w-full flex flex-row gap-3 items-center px-3 py-2 rounded-lg transition-all duration-200 border border-transparent bg-transparent",
+                selected 
+                    ? "bg-primary/5 dark:bg-primary/10 ring-1 ring-inset ring-primary" 
+                    : "hover:bg-surface-50 dark:hover:bg-surface-800"
+            )}
+        >
+            <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"}>
+                    <FunctionsIcon color={"inherit"} size={"small"} />
+                </div>}
+                <DoNotDisturbOnIcon color={"disabled"} size={"small"} className={"absolute -right-2 -top-2 bg-surface-50 dark:bg-surface-900 rounded-full"} />
+            </div>
+
+            <div className="flex-1 flex flex-col min-w-0 pr-8">
+                <Typography variant="label" component="span" className="grow pr-2">
+                    {property?.name ? property.name : name}
+                </Typography>
+
+                <div className="flex flex-row items-center gap-2 mt-0.5">
+                    {propertyConfig && <Typography variant={"caption"} component="span" className="text-text-secondary dark:text-text-secondary-dark font-medium">
+                        {propertyConfig?.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>
+
+            {property && !isPropertyBuilder(property) && <ErrorBoundary>
+                <Typography variant="caption" component="span" className="ml-auto shrink-0 text-text-disabled dark:text-text-disabled-dark font-mono bg-surface-100 dark:bg-surface-800 px-1.5 py-0.5 rounded mr-8">
+                    {("columnType" in property ? (property as unknown as Record<string, unknown>).columnType as string : undefined) || property.type}
+                </Typography>
+            </ErrorBoundary>}
+        </Paper>
+        </div>
+    )
+}

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

@@ -0,0 +1,360 @@
+import React from "react";
+import { deepEqual as equal } from "fast-equals"
+
+import { AIModifiedIndicator } from "@rebasepro/core";
+import { AdditionalFieldDelegate, Properties, Property } from "@rebasepro/types";
+import { isPropertyBuilder } from "@rebasepro/common";
+import {
+    FindInPageIcon,
+    defaultBorderMixin,
+    cls,
+    DeleteIcon,
+    IconButton,
+    Menu,
+    MenuItem,
+    MoreVertIcon,
+    Tooltip,
+    VerticalAlignBottomIcon,
+    VerticalAlignTopIcon
+} 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}
+                            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-3 flex flex-row items-center gap-1">
+                    {isAIModified && <AIModifiedIndicator />}
+                    {isPropertyInferred && <>
+                        <Tooltip title={"Inferred property"} asChild={true}>
+                            <IconButton size="smallest" disabled>
+                                <FindInPageIcon size="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);
+                                }}>
+                                <DeleteIcon size={"smallest"} />
+                            </IconButton>
+                        </Tooltip>}
+                    </>}
+
+                    <Menu
+                        trigger={
+                            <IconButton
+                                size="smallest"
+                            >
+                                <MoreVertIcon size={"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);
+                                }
+                            }}
+                        >
+                            <VerticalAlignTopIcon size="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);
+                                }
+                            }}
+                        >
+                            <VerticalAlignBottomIcon size="smallest" />
+                            Move to bottom
+                        </MenuItem>
+                        <MenuItem
+                            dense
+                            onClick={() => onPropertyRemove?.(propertyKey, namespace)}
+                        >
+                            <DeleteIcon size="smallest" />
+                            Delete
+                        </MenuItem>
+                    </Menu>
+
+                </div>
+
+                {subtree && <div className={"ml-12"}>{subtree}</div>}
+            </div>
+        </div>
+    );
+}