@rebasepro/cms 0.17.3 → 0.18.1

package/src/components/CollectionTableBinding/PropertyTableCell.tsx

@@ -1,350 +0,0 @@
-import { useCellSelected, createSelectionStore } from "../SelectableTable/SelectionStore";
-import type { ArrayProperty, NumberProperty, Property, ReferenceProperty, StringProperty } from "@rebasepro/types";
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { deepEqual as equal } from "fast-equals"
-
-import { Entity, EntityReference, EntityRelation } from "@rebasepro/types";
-
-import { getTableBindingForProperty } from "./table_bindings";
-
-import { PropertyPreview } from "../../preview";
-import { getPreviewSizeFrom } from "../../preview/util";
-
-import { CustomFieldValidator, mapPropertyToZod } from "../../form/validation";
-
-import { EntityTableCell } from "./internal/EntityTableCell";
-import { EntityTableCellActions } from "./internal/EntityTableCellActions";
-
-import { useSelectableTableController } from "../SelectableTable/SelectableTableContext";
-import { useClearRestoreValue } from "../../form/useClearRestoreValue";
-import { getRowHeight } from "@rebasepro/app";
-import { isDisabled, isReadOnly } from "@rebasepro/app";
-import { TableRelationField } from "./fields/TableRelationField";
-import { TableRelationSelectorField } from "./fields/TableRelationSelectorField";
-
-export interface PropertyTableCellProps<T> {
-    propertyKey: string;
-    columnIndex: number;
-    align: "right" | "left" | "center";
-    customFieldValidator?: CustomFieldValidator;
-    value: T;
-    readonly: boolean;
-    property: Property;
-    height: number;
-    width: number;
-    entity: Entity<any>;
-    path: string;
-    disabled: boolean;
-    enablePopupIcon?: boolean;
-    // Sortable props for dnd-kit integration
-    sortableNodeRef?: (node: HTMLElement | null) => void;
-    sortableStyle?: React.CSSProperties;
-    sortableAttributes?: Record<string, any>;
-    isDragging?: boolean;
-    isDraggable?: boolean;
-    frozen?: boolean;
-}
-
-
-export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
-    function PropertyTableCell<T, M extends Record<string, any>>({
-        propertyKey,
-        customFieldValidator,
-        value,
-        property,
-        align,
-        width,
-        height,
-        path,
-        entity,
-        readonly,
-        disabled: disabledProp,
-        enablePopupIcon = true,
-        sortableNodeRef,
-        sortableStyle,
-        sortableAttributes,
-        isDragging,
-        isDraggable,
-        frozen
-    }: PropertyTableCellProps<T>) {
-
-        const {
-            onValueChange,
-            size,
-            selectionStore,
-            select,
-            setPopupCell
-        } = useSelectableTableController();
-
-        const dummySelectionStore = useMemo(() => createSelectionStore(), []);
-        const activeSelectionStore = selectionStore || dummySelectionStore;
-        const selected = useCellSelected(activeSelectionStore, propertyKey, entity.path, entity.id);
-
-        const [internalValue, setInternalValue] = useState<any | null>(value);
-        const internalValueRef = useRef(value);
-
-        const [error, setError] = useState<Error | undefined>();
-        const [validationError, setValidationError] = useState<Error | undefined>();
-        const [savedTimestamp, setSavedTimestamp] = useState<number>(0);
-
-        const onValueUpdated = useCallback(() => {
-            setSavedTimestamp(Date.now());
-        }, []);
-
-        const customField = Boolean(property.admin?.Field);
-        const customPreview = Boolean(property.admin?.Preview);
-        const readOnlyProperty = isReadOnly(property);
-        const disabledTooltip: string | undefined = typeof property.admin?.disabled === "object" ? property.admin?.disabled.disabledMessage : undefined;
-        const disabled = readonly || disabledProp || isDisabled(property);
-
-        const validation = useMemo(() => mapPropertyToZod({
-            property,
-            entityId: entity.id,
-            customFieldValidator,
-            name: propertyKey
-        }), [entity.id, property, propertyKey]);
-
-        useEffect(
-            () => {
-                if (!equal(value, internalValueRef.current)) {
-                    setValidationError(undefined);
-                    setInternalValue(value);
-                    internalValueRef.current = value;
-                    onValueUpdated();
-                }
-            },
-            [onValueUpdated, value]
-        );
-
-        const saveValues = async (value: unknown) => {
-            if (equal(value, internalValueRef.current))
-                return;
-            const result = await validation.safeParseAsync(value);
-            if (result.success) {
-                    setValidationError(undefined);
-                    internalValueRef.current = value as T;
-                    if (onValueChange) {
-                        try {
-                            onValueChange({
-                                value,
-                                propertyKey,
-                                setError,
-                                onValueUpdated,
-                                data: entity
-                            });
-                        } catch (e: unknown) {
-                            console.error("onValueChange error", e);
-                            setError(e instanceof Error ? e : new Error(String(e)));
-                        }
-
-                    }
-            } else {
-                    setValidationError(result.error);
-            }
-        };
-
-        useEffect(() => {
-            validation
-                .safeParseAsync(internalValue)
-                .then((result) => {
-                    if (result.success) {
-                        setValidationError(undefined);
-                    } else {
-                        setValidationError(result.error);
-                    }
-                });
-        }, [internalValue, validation, propertyKey, property, entity]);
-
-        const updateValue = (newValue: unknown | null) => {
-
-            let updatedValue: unknown;
-            if (newValue === undefined) {
-                updatedValue = null;
-            } else {
-                updatedValue = newValue;
-            }
-            setInternalValue(updatedValue);
-            saveValues(updatedValue);
-        };
-
-        useClearRestoreValue<unknown>({
-            property,
-            value: internalValue,
-            setValue: updateValue
-        });
-
-        const onSelect = useCallback((cellRect: DOMRect | undefined) => {
-            if (!cellRect) {
-                select(undefined);
-            } else {
-                select({
-                    width,
-                    height,
-                    entityPath: entity.path,
-                    entityId: entity.id,
-                    cellRect,
-                    propertyKey: propertyKey as Extract<keyof M, string>
-                });
-            }
-        }, [entity, height, propertyKey, select, width]);
-
-        const openPopup = (cellRect: DOMRect | undefined) => {
-            if (!setPopupCell)
-                return;
-            if (!cellRect) {
-                setPopupCell(undefined);
-            } else {
-                setPopupCell({
-                    width,
-                    height,
-                    entityPath: entity.path,
-                    entityId: entity.id,
-                    cellRect,
-                    propertyKey: propertyKey as Extract<keyof M, string>
-                });
-            }
-        };
-
-        // `getTableBindingForProperty` builds its `Component` as a fresh inline
-        // arrow function on every call. Calling it during render therefore gave
-        // React a new component *type* each pass, so the cell was unmounted and
-        // remounted instead of updated — which is why a BooleanSwitch in the
-        // table never animated (a replaced element cannot run a CSS transition)
-        // and why every cell re-created its subtree on unrelated renders.
-        const tableBinding = useMemo(
-            () => getTableBindingForProperty(property, selected),
-            [property, selected]);
-
-        let innerComponent: React.ReactNode | undefined;
-        let allowScroll = false;
-        let showExpandIcon = false;
-        let hideOverflow = true;
-        let removePadding = false;
-        let fullHeight = false;
-        let includeActions = true;
-        const showError = !disabled && error;
-
-        if (readonly || readOnlyProperty) {
-            return <EntityTableCell
-                size={size}
-                width={width}
-                savedTimestamp={savedTimestamp}
-                key={`${propertyKey}_${entity.path}_${entity.id}`}
-                value={internalValue}
-                align={align ?? "left"}
-                fullHeight={false}
-                disabledTooltip={disabledTooltip ?? (readOnlyProperty ? "Read only" : undefined)}
-                disabled={true}
-                sortableNodeRef={sortableNodeRef}
-                sortableStyle={sortableStyle}
-                sortableAttributes={sortableAttributes}
-                isDragging={isDragging}
-                isDraggable={isDraggable}
-                frozen={frozen}>
-                <PropertyPreview
-                    width={width}
-                    height={getRowHeight(size)}
-                    propertyKey={propertyKey}
-                    property={property}
-                    value={internalValue}
-                    size={getPreviewSizeFrom(size)}
-                />
-            </EntityTableCell>;
-        }
-
-        if (!customField && (!customPreview || selected)) {
-            if (tableBinding) {
-                const Component = tableBinding.Component;
-                innerComponent = <Component
-                    propertyKey={propertyKey}
-                    property={property}
-                    internalValue={internalValue}
-                    updateValue={updateValue}
-                    error={error}
-                    validationError={validationError}
-                    disabled={disabled}
-                    selected={selected}
-                    size={size}
-                    align={align}
-                    entity={entity}
-                    path={path}
-                    openPopup={setPopupCell ? openPopup : undefined}
-                />;
-
-                allowScroll = tableBinding.allowScroll ?? false;
-                includeActions = tableBinding.includeActions ?? true;
-                showExpandIcon = tableBinding.showExpandIcon ?? false;
-                fullHeight = tableBinding.fullHeight ?? false;
-                removePadding = tableBinding.removePadding ?? false;
-                if (tableBinding.hideOverflow !== undefined) hideOverflow = tableBinding.hideOverflow;
-            }
-        }
-
-        if (!innerComponent) {
-            allowScroll = false;
-            showExpandIcon = enablePopupIcon && selected && !innerComponent && !disabled && !readOnlyProperty;
-            innerComponent = (
-                <PropertyPreview width={width}
-                    height={height}
-                    propertyKey={propertyKey as string}
-                    value={internalValue}
-                    property={property}
-                    size={getPreviewSizeFrom(size)}
-                />
-            );
-        }
-
-        return (
-            <EntityTableCell
-                key={`cell_${propertyKey}_${entity.path}_${entity.id}`}
-                size={size}
-                width={width}
-                onSelect={onSelect}
-                selected={selected}
-                disabled={disabled || readOnlyProperty}
-                disabledTooltip={disabledTooltip ?? "Disabled"}
-                removePadding={removePadding}
-                fullHeight={fullHeight}
-                savedTimestamp={savedTimestamp}
-                error={validationError ?? error}
-                align={align}
-                allowScroll={allowScroll}
-                showExpandIcon={showExpandIcon}
-                value={internalValue}
-                hideOverflow={hideOverflow}
-                sortableNodeRef={sortableNodeRef}
-                sortableStyle={sortableStyle}
-                sortableAttributes={sortableAttributes}
-                isDragging={isDragging}
-                isDraggable={isDraggable}
-                frozen={frozen}
-                actions={includeActions && <EntityTableCellActions
-                    showError={showError}
-                    disabled={disabled}
-                    showExpandIcon={showExpandIcon}
-                    selected={selected}
-                    openPopup={!disabled ? openPopup : undefined}/>}
-            >
-
-                {innerComponent}
-
-            </EntityTableCell>
-        );
-
-    },
-    areEqual) as React.FunctionComponent<PropertyTableCellProps<any>>;
-
-function areEqual(prevProps: PropertyTableCellProps<any>, nextProps: PropertyTableCellProps<any>) {
-    return prevProps.height === nextProps.height &&
-        prevProps.propertyKey === nextProps.propertyKey &&
-        prevProps.align === nextProps.align &&
-        prevProps.width === nextProps.width &&
-        equal(prevProps.property, nextProps.property) &&
-        equal(prevProps.value, nextProps.value) &&
-        prevProps.entity.id === nextProps.entity.id &&
-        prevProps.entity.path === nextProps.entity.path &&
-        prevProps.isDragging === nextProps.isDragging &&
-        prevProps.isDraggable === nextProps.isDraggable &&
-        prevProps.frozen === nextProps.frozen
-        ;
-}

package/src/components/CollectionTableBinding/column_utils.tsx

@@ -1,155 +0,0 @@
-import type { Properties, Property, RelationProperty } from "@rebasepro/types";
-import React from "react";
-import { getTableCellAlignment, getTablePropertyColumnWidth } from "./internal/common";
-import { FilterValues } from "@rebasepro/types";
-import { VirtualTableColumn } from "@rebasepro/ui";
-import { getIconForProperty, getResolvedPropertyInPath } from "../../util/property_utils";
-import { getColumnKeysForProperty, isFilterableRelation } from "@rebasepro/app";
-
-export function buildIdColumn(largeLayout?: boolean): VirtualTableColumn {
-    return {
-        key: "id_ewcfedcswdf3",
-        width: (largeLayout ? 160 : 130),
-        title: "ID",
-        resizable: false,
-        frozen: largeLayout ?? false,
-        headerAlign: "center",
-        align: "center"
-    };
-}
-
-export interface PropertiesToColumnsParams<M extends Record<string, unknown>> {
-    properties: Properties;
-    sortable?: boolean;
-    fixedFilter?: FilterValues<keyof M extends string ? keyof M : never>;
-    /**
-     * The engine backing the collection (`collection.engine`). Decides which
-     * relation kinds can be filtered — see `isFilterableRelation`. Omitted
-     * falls back to the default engine's capabilities.
-     */
-    engine?: string;
-    AdditionalHeaderWidget?: React.ComponentType<{
-        property: Property,
-        propertyKey: string,
-        onHover: boolean,
-    }>;
-}
-
-export function propertiesToColumns<M extends Record<string, unknown>>({ properties, sortable, fixedFilter, engine, AdditionalHeaderWidget }: PropertiesToColumnsParams<M>): VirtualTableColumn[] {
-    const disabledFilter = Boolean(fixedFilter);
-    return Object.entries<Property>(properties)
-        .flatMap(([key, property]) => getColumnKeysForProperty(property, key))
-        .flatMap(({
-            key,
-            disabled
-        }) => {
-            const property = getResolvedPropertyInPath(properties, key) as Property | undefined;
-            // One unresolvable key used to throw, and this runs inside the
-            // memo that builds the table's columns — so a single bad column
-            // took down the header, the rows and the empty state together,
-            // leaving a blank pane with nothing to attribute it to. A column
-            // that cannot be resolved is one column the table cannot offer;
-            // say so and carry the rest. Same choice, and now the same
-            // behaviour, as `getSortablePropertyOptions` below.
-            if (!property) {
-                console.warn(`No property found in path "${key}" — skipping that column.`);
-                return [];
-            }
-            const filterable = filterableProperty(property, false, engine);
-            return [{
-                key: key as string,
-                align: getTableCellAlignment(property),
-                icon: getIconForProperty(property, "small"),
-                title: property.name ?? key as string,
-                sortable: sortable && sortableProperty(property),
-                filter: !disabledFilter && filterable,
-                width: getTablePropertyColumnWidth(property),
-                resizable: true,
-                custom: {
-                    resolvedProperty: property,
-                    disabled
-                },
-                AdditionalHeaderWidget: AdditionalHeaderWidget
-                    ? ({ onHover }: { onHover: boolean }) => <AdditionalHeaderWidget property={property} propertyKey={key} onHover={onHover}/>
-                    : undefined
-            } satisfies VirtualTableColumn];
-        });
-}
-
-export type SortablePropertyOption = {
-    key: string;
-    title: string;
-    property: Property;
-};
-
-/**
- * The properties a sort can be applied to, as keys and titles.
- *
- * Only the table renders headers, so the list, card and split views had no way
- * to order anything — the controller has carried `sortBy` all along, with no
- * control bound to it outside the table. This is the same walk
- * `propertiesToColumns` makes, under the same keys and the same
- * `sortableProperty` authority, so a sort picked from the toolbar means exactly
- * what clicking the header would have meant, and the two cannot drift into
- * offering different columns.
- */
-export function getSortablePropertyOptions(properties: Properties): SortablePropertyOption[] {
-    return Object.entries<Property>(properties)
-        .flatMap(([key, property]) => getColumnKeysForProperty(property, key))
-        .flatMap(({ key }) => {
-            // Unlike the table, a missing property here is not worth throwing
-            // over: the sort control simply has one fewer option to offer.
-            const property = getResolvedPropertyInPath(properties, key) as Property | undefined;
-            if (!property || !sortableProperty(property)) return [];
-            return [{
-                key: key as string,
-                title: property.name ?? key as string,
-                property
-            }];
-        });
-}
-
-/**
- * Whether this column can be ordered by.
- *
- * `sortable` arrived as one flag for the whole table while `filter` was
- * computed per property, so every column advertised a sort — including the ones
- * no `ORDER BY` can be written for. A to-many relation is a *set* per row
- * (`posts.tags`), and there is no single value to order on; the driver used to
- * answer by silently dropping the sort and returning rows in whatever order
- * Postgres pleased, which is how a header that did nothing went unnoticed.
- *
- * Now that the driver refuses instead, offering the control would turn a
- * useless header into a failed request. Same authority as the filter side: ask
- * the property, not the table.
- */
-function sortableProperty(property: Property): boolean {
-    if (property.type !== "relation") return true;
-    const relationProperty = property as RelationProperty;
-    const kind = relationProperty.relation?.kind ?? relationProperty.resolvedRelation?.kind;
-    // An unresolved relation keeps the benefit of the doubt — the same choice
-    // `isFilterableRelation` makes for a kind it cannot see.
-    if (!kind) return true;
-    return kind === "belongsTo";
-}
-
-function filterableProperty(property: Property, partOfArray = false, engine?: string): boolean {
-    // A relation this engine's driver cannot compile into a `WHERE` has
-    // nothing to filter on, so the header's filter control would open onto a
-    // field that renders nothing (`FilterFieldBinding` returns null on an
-    // empty operator list) — and, before the driver started failing closed,
-    // sending one silently returned every row. Same authority as the operator
-    // resolution, and engine-aware for the same reason: this table renders
-    // over Postgres, Mongo, Firestore and anything a developer registers.
-    if (!isFilterableRelation(property, engine)) return false;
-    if (partOfArray) {
-        return ["string", "number", "date", "reference", "relation"].includes(property.type);
-    }
-    if (property.type === "array") {
-        if (property.of && !Array.isArray(property.of))
-            return filterableProperty(property.of, true, engine);
-        else
-            return false;
-    }
-    return ["string", "number", "boolean", "date", "reference", "relation", "array"].includes(property.type);
-}

package/src/components/CollectionTableBinding/fields/TableMultipleRelationField.tsx

@@ -1,131 +0,0 @@
-import { useSelectionDialog } from "../../../hooks/useSelectionDialog";
-
-import { getCollectionDataPath } from "@rebasepro/types";
-import React, { useCallback } from "react";
-import { deepEqual as equal } from "fast-equals";
-
-import { cls, PencilIcon } from "@rebasepro/ui";
-import { getRelationFrom, normalizeToEntityRelation } from "@rebasepro/common";
-
-import { RelationPreview } from "../../../preview";
-import { Entity, EntityRelation, FilterValues, Relation } from "@rebasepro/types";
-import { CollectionSize, AdminCollection } from "@rebasepro/cms-types";
-import { } from "@rebasepro/app";
-import { ErrorView } from "@rebasepro/app";
-import { EntityPreviewContainer } from "../../EntityPreviewBinding";
-
-type TableMultipleRelationFieldProps = {
-    name: string;
-    disabled: boolean;
-    internalValue: EntityRelation[] | undefined | null;
-    updateValue: (newValue: EntityRelation[] | null) => void;
-    size: CollectionSize;
-    previewProperties?: string[];
-    title?: string;
-    relation: Relation;
-    fixedFilter?: FilterValues<string>;
-    includeId?: boolean;
-    includeEntityLink?: boolean;
-};
-
-export function TableMultipleRelationField(props: TableMultipleRelationFieldProps) {
-    const collection = props.relation.target();
-    return <TableMultipleRelationFieldInternal {...props} collection={collection}/>;
-}
-
-export const TableMultipleRelationFieldInternal = React.memo(
-    function TableMultipleRelationFieldInternal(props: TableMultipleRelationFieldProps & {
-        collection: AdminCollection;
-    }) {
-        const {
-            name,
-            internalValue,
-            updateValue,
-            previewProperties,
-            title,
-            disabled,
-            fixedFilter,
-            collection,
-            includeId,
-            includeEntityLink
-        } = props;
-
-        const value = Array.isArray(internalValue) ? internalValue : [];
-
-        const onMultipleEntitiesSelected = useCallback((entities: Entity<any>[]) => {
-            updateValue(entities.map(e => getRelationFrom(e)));
-        }, [updateValue]);
-
-        const selectedEntityIds = value.map((ref) => ref.id);
-
-        const relationDialogController = useSelectionDialog({
-            multiselect: true,
-            path: getCollectionDataPath(collection),
-            collection,
-            onMultipleEntitiesSelected,
-            selectedEntityIds,
-            fixedFilter
-        }
-        );
-
-        const handleOpen = () => {
-            if (disabled)
-                return;
-            relationDialogController.open();
-        };
-
-        const valueNotSet = !internalValue || (Array.isArray(internalValue) && internalValue.length === 0);
-
-        const buildMultipleRelationField = () => {
-            if (Array.isArray(internalValue))
-                return <>
-                    {internalValue.map((item, index) => {
-                        const relationItem = normalizeToEntityRelation(item);
-
-                        if (!relationItem) return null;
-
-                        return (
-                        <div className="w-full my-0.5"
-                            key={`preview_array_ref_${name}_${index}`}>
-                            <RelationPreview
-                                onClick={disabled ? undefined : handleOpen}
-                                size={"small"}
-                                relation={relationItem}
-                                hover={!disabled}
-                                previewProperties={previewProperties}
-                                includeId={includeId}
-                                includeEntityLink={includeEntityLink}
-                            />
-                        </div>
-                        );
-                    })
-                    }
-                </>;
-            else
-                return <ErrorView error={"Data is not an array of relations"}/>;
-        };
-
-        if (!collection)
-            return <ErrorView error={"The specified collection does not exist"}/>;
-
-        return (
-            <div className="w-full group">
-
-                {internalValue && buildMultipleRelationField()}
-
-                {valueNotSet &&
-                    <EntityPreviewContainer
-                        className={cls("px-3 py-2 text-sm font-medium flex items-center gap-4",
-                            disabled
-                                ? "text-surface-accent-500"
-                                : "cursor-pointer text-text-secondary dark:text-text-secondary-dark hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800")}
-                        onClick={handleOpen}
-                        size={"medium"}>
-                        <PencilIcon
-                            className={"ml-2 mr-1 text-surface-300 dark:text-surface-600"}/>
-                        {title}
-                    </EntityPreviewContainer>}
-
-            </div>
-        );
-    }, equal);