@rebasepro/cms 0.17.3 → 0.18.1

package/src/form/PropertyFieldBinding.tsx

@@ -1,348 +0,0 @@
-
-import type { FieldProps as CoreFieldProps, AdminCollection } from "@rebasepro/cms-types";
-import type { FieldProps, PropertyFieldBindingProps } from "../types/fields";
-import type { Property } from "@rebasepro/types";
-import type { RebasePlugin, PluginFieldBuilderParams } from "@rebasepro/cms-types";
-import React, { ComponentType, ReactElement, Suspense, useCallback, useRef } from "react";
-import { deepEqual as equal } from "fast-equals"
-
-import { resolveComponentRef } from "@rebasepro/app";
-
-import { Field, FormexFieldProps, getIn } from "@rebasepro/forms";
-
-;
-import { ReadOnlyFieldBinding } from "./field_bindings/ReadOnlyFieldBinding";
-
-import { isPropertyBuilder, resolveProperty } from "@rebasepro/common";
-import { isDisabled, isHidden, isReadOnly } from "@rebasepro/app";
-import { useAuthController, useCustomizationController } from "@rebasepro/app";
-import { Typography } from "@rebasepro/ui";
-import { getFieldConfig, getFieldId } from "../components/field_configs";
-import { ErrorBoundary } from "@rebasepro/ui";
-
-/**
- * This component renders a form field creating the corresponding configuration
- * from a property. For example if bound to a string property, it will generate
- * a text field.
- *
- * You can use it when you are creating a custom field, and need to
- * render additional fields mapped to properties. This is useful if you
- * need to build a complex property mapping, like an array where each index
- * is a different property.
- *
- * Please note that if you build a custom field in a component, the
- * **validation** passed in the property will have no effect. You need to set
- * the validation in the `AdminCollection` definition.
- *
- * @param propertyKey You can use nested names such as `address.street` or `friends[2]`
- * @param property
- * @param context
- * @param includeDescription
- * @param underlyingValueHasChanged
- * @param disabled
- * @param tableMode
- * @param partOfArray
- * @param autoFocus
- * @group Form custom fields
- */
-export const PropertyFieldBinding = React.memo(PropertyFieldBindingInternal, (a: PropertyFieldBindingProps<Record<string, unknown>>, b: PropertyFieldBindingProps<Record<string, unknown>>) => {
-    if (a.propertyKey !== b.propertyKey) {
-        return false;
-    }
-    if (a.index !== b.index) {
-        return false;
-    }
-
-    if (a.size !== b.size) {
-        return false;
-    }
-    const aIsBuilder = isPropertyBuilder(a.property);
-    const bIsBuilder = isPropertyBuilder(b.property);
-
-    const baseCheck = (aIsBuilder === bIsBuilder || equal(a.property, b.property)) &&
-        a.disabled === b.disabled;
-    if (!baseCheck) {
-        return false;
-    }
-
-    if (shouldPropertyReRender(b.property)) {
-        return false;
-    }
-
-    return false;
-}) as typeof PropertyFieldBindingInternal;
-
-function PropertyFieldBindingInternal<M extends Record<string, unknown> = Record<string, unknown>>
-({
-     propertyKey,
-     property,
-     context,
-     includeDescription,
-     hideLabel,
-     underlyingValueHasChanged,
-     disabled: disabledProp,
-     partOfArray,
-     partOfBlock,
-     minimalistView,
-     autoFocus,
-     index,
-     size,
-     onPropertyChange
- }: PropertyFieldBindingProps<M>): ReactElement<PropertyFieldBindingProps<M>> {
-
-    const authController = useAuthController();
-    const customizationController = useCustomizationController();
-
-    return (
-        <Field
-            key={propertyKey}
-            name={propertyKey}
-        >
-            {(fieldProps) => {
-
-                let Component: ComponentType<FieldProps<Property, any, any>> | undefined;
-                const resolvedProperty = resolveProperty({
-                    propertyKey,
-                    property: property,
-                    values: fieldProps.form.values,
-                    path: context.path,
-                    entityId: context.entityId,
-                    propertyConfigs: customizationController.propertyConfigs,
-                    index,
-                    authController
-                }) as Property | null;
-
-                const readOnly = resolvedProperty ? isReadOnly(resolvedProperty) : true;
-                const disabled = disabledProp || readOnly || (resolvedProperty ? isDisabled(resolvedProperty) : false) || context.disabled;
-
-                if (resolvedProperty === null || isHidden(resolvedProperty)) {
-                    return <></>;
-                } else if (readOnly) {
-                    Component = ReadOnlyFieldBinding;
-                } else if (resolvedProperty.admin?.Field) {
-                    const resolved = resolveComponentRef(resolvedProperty.admin.Field);
-                    if (resolved) {
-                        Component = resolved as ComponentType<FieldProps<Property, any, any>>;
-                    }
-                } else {
-                    const propertyConfig = getFieldConfig(resolvedProperty, customizationController.propertyConfigs);
-                    if (!propertyConfig) {
-                        throw new Error(`INTERNAL: Could not find field config for property ${propertyKey}`);
-                    }
-                    const configProperty = resolveProperty({
-                        propertyKey,
-                        property: propertyConfig.property as Property,
-                        values: fieldProps.form.values,
-                        path: context.path,
-                        entityId: context.entityId,
-                        propertyConfigs: customizationController.propertyConfigs,
-                        index,
-                        authController
-                    }) as Property | null;
-                    Component = resolveComponentRef(configProperty?.admin?.Field) as ComponentType<FieldProps<Property, any, any>> | undefined;
-                }
-                if (!Component) {
-                    console.warn(`No field component found for property ${propertyKey}`);
-                    console.warn("Property:", property);
-                    return (
-                        <div className={"w-full"}>
-                            {`Currently the field ${resolvedProperty.type} is not supported`}
-                        </div>
-                    );
-                }
-
-                const componentProps: ResolvedPropertyFieldBindingProps<M> = {
-                    propertyKey,
-                    property: resolvedProperty,
-                    includeDescription,
-                    hideLabel,
-                    underlyingValueHasChanged,
-                    context,
-                    disabled,
-                    partOfArray,
-                    partOfBlock,
-                    minimalistView,
-                    autoFocus,
-                    size,
-                    onPropertyChange
-                };
-
-                return <FieldInternal
-                    Component={Component as ComponentType<FieldProps<Property, any, any>>}
-                    componentProps={componentProps}
-                    formexFieldProps={fieldProps as FormexFieldProps<unknown, Record<string, unknown>>}/>;
-            }}
-        </Field>
-    );
-
-}
-
-type ResolvedPropertyFieldBindingProps<M extends Record<string, unknown> = Record<string, unknown>> =
-    Omit<PropertyFieldBindingProps<M>, "property">
-    & {
-    property: Property
-};
-
-function FieldInternal<CustomProps, M extends Record<string, unknown>>
-({
-     Component,
-     componentProps: {
-         propertyKey,
-         property,
-         includeDescription,
-         hideLabel,
-         underlyingValueHasChanged,
-         partOfArray,
-         partOfBlock,
-         minimalistView,
-         autoFocus,
-         context,
-         disabled,
-         size,
-         onPropertyChange
-     },
-     formexFieldProps
- }:
- {
-     Component: ComponentType<FieldProps<Property, any, any>>,
-     componentProps: ResolvedPropertyFieldBindingProps<M>,
-     formexFieldProps: FormexFieldProps<unknown, Record<string, unknown>>
- }) {
-
-    const { plugins } = useCustomizationController();
-
-    const customFieldProps: unknown = property.admin?.customProps;
-    const value = formexFieldProps.field.value;
-    const error = getIn(formexFieldProps.form.errors, propertyKey) as string | string[] | undefined;
-    const touched = getIn(formexFieldProps.form.touched, propertyKey) as boolean | undefined;
-
-    const showError = Boolean(error &&
-        (formexFieldProps.form.submitCount > 0 || property.validation?.unique) &&
-        (!Array.isArray(error) || !!error.filter((e: unknown) => !!e).length));
-
-    const WrappedComponent: ComponentType<FieldProps<Property, any, any>> | null = useWrappedComponent<unknown, any>({
-        path: context.path,
-        collection: context.collection,
-        propertyKey: propertyKey,
-        property: property,
-        Component: Component as ComponentType<FieldProps<Property, unknown, M>>,
-        plugins: plugins
-    });
-    const UsedComponent: ComponentType<FieldProps<Property, any, any>> = WrappedComponent ?? Component;
-
-    const isSubmitting = formexFieldProps.form.isSubmitting;
-
-    const setValue = useCallback((value: unknown | null, shouldValidate?: boolean) => {
-        formexFieldProps.form.setFieldTouched(propertyKey, true, false);
-        formexFieldProps.form.setFieldValue(propertyKey, value, shouldValidate);
-    }, []);
-
-    const setFieldValue = useCallback((otherPropertyKey: string, value: unknown | null, shouldValidate?: boolean) => {
-        formexFieldProps.form.setFieldTouched(propertyKey, true, false);
-        formexFieldProps.form.setFieldValue(otherPropertyKey, value, shouldValidate);
-    }, []);
-
-    const cmsFieldProps: FieldProps<Property, CustomProps, M> = {
-        propertyKey,
-        value,
-        setValue,
-        setFieldValue,
-        error: error as string | undefined,
-        touched,
-        showError,
-        isSubmitting,
-        includeDescription: includeDescription ?? true,
-        hideLabel: hideLabel ?? false,
-        property: property as Property,
-        disabled: disabled ?? false,
-        underlyingValueHasChanged: underlyingValueHasChanged ?? false,
-        partOfArray: partOfArray ?? false,
-        partOfBlock: partOfBlock ?? false,
-        minimalistView: minimalistView ?? false,
-        autoFocus: autoFocus ?? false,
-        customProps: customFieldProps as CustomProps,
-        context,
-        size,
-        onPropertyChange
-    };
-
-    return (
-        <ErrorBoundary>
-            <Suspense fallback={null}>
-                <UsedComponent {...cmsFieldProps}/>
-            </Suspense>
-
-            {underlyingValueHasChanged && !isSubmitting &&
-                <Typography variant={"caption"} className={"ml-3.5"}>
-                    This value has been updated elsewhere
-                </Typography>}
-
-        </ErrorBoundary>);
-
-}
-
-const shouldPropertyReRender = (property: Property, plugins?: RebasePlugin[]): boolean => {
-    if (plugins?.some((plugin) => plugin.fieldBuilder)) {
-        return true;
-    }
-    if (isPropertyBuilder(property)) {
-        return true;
-    }
-    const defAProperty = property as Property;
-    const rerenderThisProperty = Boolean(defAProperty.admin?.Field);
-    if (defAProperty.type === "map" && defAProperty.properties) {
-        return Boolean(rerenderThisProperty || Object.values(defAProperty.properties).some((childProperty) => shouldPropertyReRender(childProperty as Property, plugins)));
-    } else {
-        return Boolean(rerenderThisProperty);
-    }
-}
-
-interface UseWrappedComponentParams<M extends Record<string, unknown> = Record<string, unknown>> {
-    path?: string,
-    collection?: AdminCollection<M>,
-    propertyKey: string,
-    property: Property,
-    Component: ComponentType<FieldProps<Property, unknown, M>>,
-    plugins?: RebasePlugin[]
-}
-
-function useWrappedComponent<T, M extends Record<string, unknown> = Record<string, unknown>>(
-    {
-        path,
-        collection,
-        propertyKey,
-        property,
-        Component,
-        plugins
-    }: UseWrappedComponentParams<M>
-): ComponentType<FieldProps<Property, unknown, M>> | null {
-
-    const wrapperRef = useRef<ComponentType<FieldProps<Property, unknown, M>> | null>((() => {
-        let Wrapper: ComponentType<FieldProps<Property, unknown, M>> | null = null;
-        if (plugins) {
-            plugins.forEach((plugin) => {
-                const fieldId = getFieldId(property);
-                if (fieldId && plugin.fieldBuilder) {
-                    const params: PluginFieldBuilderParams = {
-                        fieldConfigId: fieldId,
-                        propertyKey,
-                        property,
-                        Field: Component as unknown as ComponentType<CoreFieldProps<Property, unknown, Record<string, unknown>>>,
-                        plugin,
-                        path,
-                        collection: collection as AdminCollection | undefined
-                    };
-                    const enabled = plugin.fieldBuilder.enabled?.(params);
-                    if (enabled === undefined || enabled)
-                        Wrapper = (plugin.fieldBuilder.wrap(params) as unknown as ComponentType<FieldProps<Property, unknown, M>> | null) ?? Wrapper;
-                }
-                if (!fieldId) {
-                    console.warn("INTERNAL: Field id not found for property", property);
-                }
-            });
-        }
-        return Wrapper;
-    })());
-
-    return wrapperRef.current;
-}

package/src/form/components/ErrorFocus.tsx

@@ -1,44 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import { useFormex } from "@rebasepro/forms";
-
-export const ErrorFocus = ({ containerRef }:
-    {
-        containerRef?: React.RefObject<HTMLDivElement | null>
-    }) => {
-    const {
-        isValidating,
-        errors,
-        version
-    } = useFormex();
-
-    const prevVersion = useRef(version);
-
-    useEffect(() => {
-
-        if (version === prevVersion.current) {
-            return;
-        }
-
-        const keys = Object.keys(errors);
-
-        // Whenever there are errors and the form has been submitted and is not validating
-        if (!isValidating && keys.length > 0) {
-            const errorElement = containerRef?.current?.querySelector<HTMLDivElement>(
-                `#form_field_${keys[0]}`
-            );
-
-            if (errorElement) {
-                errorElement.scrollIntoView({
-                    behavior: "smooth",
-                    block: "center"
-                });
-                const input = errorElement.querySelector("input");
-                if (input) input.focus();
-            }
-            prevVersion.current = version;
-        }
-    }, [isValidating, errors, containerRef, version]);
-
-    // This component does not render anything by itself.
-    return null;
-};

package/src/form/components/FieldBlock.tsx

@@ -1,189 +0,0 @@
-import type { Property } from "@rebasepro/types";
-import type { PropertySpan } from "@rebasepro/cms-types";
-import React from "react";
-import { cls, ErrorBoundary, Typography } from "@rebasepro/ui";
-import { getIconForProperty } from "../../util/property_utils";
-import { PropertyIdCopyTooltip } from "../../components/PropertyIdCopyTooltip";
-
-/**
- * Grid placement for a span.
- *
- * Written out as literal class strings rather than composed, because Tailwind
- * scans source text: a template literal would produce classes that exist at
- * runtime and were never generated into the stylesheet.
- *
- * Below the column breakpoint every field takes the single available column, so
- * the side panel, the dialog and mobile all get a plain stack.
- *
- * Lives here rather than in the form, because the read-only rendering of a
- * record places its fields on the same grid — a record that changes shape when
- * you press Edit is the bug this whole layout exists to avoid.
- */
-export function spanClass(span: PropertySpan): string {
-    switch (span) {
-        case 1: return "@2xl/col:col-span-1";
-        case 2: return "@2xl/col:col-span-2";
-        case 3: return "@2xl/col:col-span-3";
-        case 4: return "@2xl/col:col-span-4";
-    }
-}
-
-/**
- * Does this property's editor supply its own heading?
- *
- * Arrays, maps, `oneOf` blocks and key-value editors render as a collapsible
- * panel whose header *is* the label — hiding it would leave a panel you cannot
- * identify or, worse, cannot expand. Those keep their own; everything else gets
- * its label from {@link FieldBlock}, which is what makes a text field and a
- * select finally agree on where a label goes.
- *
- * Exported because the layout resolver's span rules and this rule have to stay
- * in step: the self-labelling types are exactly the ones that take a full row.
- */
-export function isSelfLabellingProperty(property: Property | undefined): boolean {
-    if (!property) return false;
-    switch (property.type) {
-        case "map":
-            // `spreadChildren` inlines the children into the parent grid, so
-            // there is no panel and therefore no header to reuse as the label.
-            return !property.admin?.spreadChildren;
-        case "array": {
-            // Most arrays render as an expandable panel whose header is the
-            // label — `repeat`, `block`, `custom_array`, `multi_references`.
-            // The exceptions are the ones that resolve to an inline control:
-            // an enum array is a multi-select and a storage array is a
-            // dropzone, and both take their label from the form.
-            //
-            // This mirrors `getFieldConfig`'s array branch. Getting it backwards
-            // is visible: an array of plain strings is a `repeat` panel, and
-            // treating it as inline printed "Available Locales" twice, once
-            // from the form and once from the panel's own header.
-            if (property.oneOf) return true;
-            if (Array.isArray(property.of) || !property.of) return true;
-            const of = property.of;
-            if (of.type === "string" && (of.enum || of.storage)) return false;
-            if (of.type === "number" && of.enum) return false;
-            return true;
-        }
-        default:
-            return false;
-    }
-}
-
-/**
- * The type icon in a field label, in px.
- *
- * Matched to the label's 13px rather than taken from `iconSize.smallest` (16),
- * which is sized for buttons. Exported so the surfaces that draw a label
- * themselves — the additional-field cards, the rail — can stay in step.
- */
-export const LABEL_ICON_SIZE = 14;
-
-export interface FieldBlockProps {
-    propertyKey: string;
-    property?: Property;
-    /** Rendered by the form rather than by the field, unless self-labelling. */
-    showLabel: boolean;
-    /**
-     * Which of the two renderings this block frames.
-     *
-     * The **label is identical in both** — same size, same weight, same colour,
-     * same type icon, same required marker. A field is the same field whether or
-     * not you are editing it, and a record whose labels restyle themselves under
-     * Edit reads as two different screens.
-     *
-     * What `"read"` drops is the *description*, which is not part of the label:
-     * it is input help. "Sum of all line items before tax and shipping" under a
-     * number that is visibly a sum tells a reader nothing, and a line of it
-     * under every field is what a record has instead of room.
-     */
-    mode?: "edit" | "read";
-    /**
-     * Label text, when there is no property to take it from.
-     *
-     * For additional fields, which are columns a collection computes rather
-     * than stores. They go on the same grid as the properties and so have to
-     * carry the same label — drawing their own is how they ended up a size out
-     * and a couple of pixels off from the field beside them.
-     */
-    label?: string;
-    /** Type icon, when there is no property to derive one from. */
-    icon?: React.ReactNode;
-    children: React.ReactNode;
-}
-
-/**
- * One field's worth of the form grid: label, control, description.
- *
- * The same block frames the read-only rendering of a record, so a field sits in
- * the same place, at the same width, under the same label whether or not you are
- * editing it — see {@link EntityViewBinding}.
- *
- * The label is one size down from the control it names (13px against the body's
- * 14) with its icon matched to it at 14px. Labels are scaffolding: you read them
- * to find the value, then read the value. Setting them at body size made a
- * column of records scan as a column of field names with data attached.
- */
-export function FieldBlock({
-    propertyKey,
-    property,
-    showLabel,
-    mode = "edit",
-    label,
-    icon,
-    children
-}: FieldBlockProps) {
-
-    const reading = mode === "read";
-    const description = property?.description?.trim();
-    const required = Boolean(property?.validation?.required);
-
-    return (
-        // Top-aligned: with the description below the control, every label is a
-        // single line, so the controls line up on their own. (Bottom-aligning
-        // was only needed while the description sat between label and control.)
-        <div
-            id={`form_field_${propertyKey}`}
-            className={"relative flex flex-col min-w-0"}>
-
-            {showLabel && (
-                <PropertyIdCopyTooltip propertyKey={propertyKey}>
-                    <div className={cls(
-                        "flex items-center gap-1.5 font-medium leading-tight mb-1.5",
-                        "text-[13px] text-text-secondary dark:text-text-secondary-dark"
-                    )}>
-                        {/* Small and quiet: enough to tell a number from a
-                            relation at a glance, not enough to compete with the
-                            field name. Matched to the label's 13px rather than
-                            left at the 16px `smallest` token, which put the
-                            heaviest mark on the row on the least important
-                            thing in it. */}
-                        {(property || icon) && (
-                            <span className={"shrink-0 text-text-disabled dark:text-text-disabled-dark"}>
-                                {property ? getIconForProperty(property, LABEL_ICON_SIZE) : icon}
-                            </span>
-                        )}
-                        <span className={"truncate"}>{property?.name ?? label ?? propertyKey}</span>
-                        {required && <span className={"text-red-500 dark:text-red-500 -ml-1"}>*</span>}
-                    </div>
-                </PropertyIdCopyTooltip>
-            )}
-
-            <div className={"min-w-0"}>
-                <ErrorBoundary>
-                    {children}
-                </ErrorBoundary>
-            </div>
-
-            {/* Under the control, where it reads as a note about the thing you
-                just filled in rather than a subtitle of the next label. */}
-            {showLabel && description && !reading && (
-                <Typography variant={"caption"}
-                    color={"disabled"}
-                    className={"mt-1.5 ml-0.5 leading-snug"}>
-                    {description}
-                </Typography>
-            )}
-        </div>
-    );
-}

package/src/form/components/FieldHelperText.tsx

@@ -1,84 +0,0 @@
-import type { Property } from "@rebasepro/types";
-import { IconButton, InfoIcon, Tooltip, Typography } from "@rebasepro/ui";
-
-/**
- * Normalize an error value to a displayable string.
- * Handles cases where the error is an array (e.g. per-element validation
- * errors from array fields) or an object (e.g. raw Zod issue objects).
- */
-function normalizeError(error: unknown): string | undefined {
-    if (error === undefined || error === null) return undefined;
-    if (typeof error === "string") return error;
-    if (Array.isArray(error)) {
-        // Find the first non-falsy element and extract its message
-        const firstError = error.find((e) => !!e);
-        if (!firstError) return undefined;
-        return normalizeError(firstError);
-    }
-    if (typeof error === "object") {
-        if ("message" in error) {
-            return String((error as { message: unknown }).message);
-        }
-
-        // Extract all string values from the object (e.g., nested validation errors)
-        const messages: string[] = [];
-        const extractMessages = (obj: Record<string, unknown>) => {
-            for (const key in obj) {
-                if (typeof obj[key] === "string") {
-                    messages.push(obj[key] as string);
-                } else if (typeof obj[key] === "object" && obj[key] !== null) {
-                    extractMessages(obj[key] as Record<string, unknown>);
-                }
-            }
-        };
-        extractMessages(error as Record<string, unknown>);
-        if (messages.length > 0) {
-            return Array.from(new Set(messages)).join(", ");
-        }
-    }
-    return String(error);
-}
-
-/**
- * Component in charge of rendering the description of a field
- * as well as the error message if any.
- */
-export function FieldHelperText<T>({
-    error,
-    showError,
-    property,
-    includeDescription = true,
-    disabled
-}: {
-    error?: string,
-    showError?: boolean,
-    property: Property | Property,
-    includeDescription?: boolean,
-    disabled?: boolean,
-}
-) {
-
-    const displayError = normalizeError(error);
-    const hasDescription = property.description !== undefined && property.description.trim().length > 0;
-
-    if (!(showError && displayError) && (!includeDescription || !hasDescription))
-        return null;
-
-    if (showError && displayError) {
-        return <Typography variant={"caption"}
-            className={"ml-3.5 text-red-500 dark:text-red-500"}>
-            {displayError}
-        </Typography>
-    }
-
-    const disabledTooltip: string | undefined = typeof property.admin?.disabled === "object" ? property.admin?.disabled.disabledMessage : undefined;
-
-    return <div className={"flex ml-3.5 mt-1"}>
-        <Typography variant={"caption"}
-            color={disabled ? "disabled" : "secondary"}
-            className={"grow"}>
-            {disabledTooltip || property.description}
-        </Typography>
-
-    </div>
-}