@rebasepro/cms 0.17.3 → 0.18.1

package/src/form/field_bindings/BlockFieldBinding.tsx

@@ -1,282 +0,0 @@
-import type { FieldProps, FormContext, PropertyFieldBindingProps } from "../../types/fields";
-import type { ArrayProperty, Property } from "@rebasepro/types";
-import React, { useEffect, useState } from "react";
-
-import { Field, useFormex } from "@rebasepro/forms";
-
-import { FieldHelperText } from "../components/FieldHelperText";
-import { LabelWithIconAndTooltip } from "../components/LabelWithIconAndTooltip";
-import { PropertyFieldBinding } from "../PropertyFieldBinding";
-import { EnumValuesChip } from "../../preview";
-
-;
-import { DEFAULT_ONE_OF_TYPE, DEFAULT_ONE_OF_VALUE, getDefaultValueFor } from "@rebasepro/common";
-import { getIconForProperty } from "../../util/property_utils";
-import { cls, ExpandablePanel, paperMixin, Select, SelectItem, Typography } from "@rebasepro/ui";
-import { isDisabled, useTranslation } from "@rebasepro/app";
-import { useClearRestoreValue } from "../useClearRestoreValue";
-import { ArrayContainer, ArrayEntryParams } from "../../components/ArrayContainer";
-import { mergeDeep } from "@rebasepro/utils";
-
-/**
- * If the `oneOf` property is specified, this fields render each array entry as
- * a `type` select and the corresponding field widget to the selected `type.
- *
- * This is one of the internal components that get mapped natively inside forms
- * and tables to the specified properties.
- * @group Form fields
- */
-export function BlockFieldBinding({
-                                      propertyKey,
-                                      value,
-                                      error,
-                                      showError,
-                                      isSubmitting,
-                                      setValue,
-                                      setFieldValue,
-                                      minimalistView: minimalistViewProp,
-                                      property,
-                                      includeDescription,
-                                      underlyingValueHasChanged,
-                                      context,
-                                      disabled
-                                  }: FieldProps<ArrayProperty>) {
-
-    const minimalistView = minimalistViewProp || property.admin?.minimalistView;
-    const { t } = useTranslation();
-
-    if (!property.oneOf)
-        throw Error("ArrayOneOfField misconfiguration. Property `oneOf` not set");
-
-    const expanded = property.admin?.expanded === undefined ? true : property.admin?.expanded;
-    useClearRestoreValue({
-        property,
-        value,
-        setValue
-    });
-
-    const [lastAddedId, setLastAddedId] = useState<number | undefined>();
-
-    const buildEntry = ({
-                            index,
-                            internalId,
-                            storedProps,
-                            storeProps
-                        }: ArrayEntryParams) => {
-
-        return <BlockEntry
-            key={`array_one_of_${internalId}`}
-            name={`${propertyKey}.${index}`}
-            index={index}
-            value={value[index]}
-            typeField={property.oneOf!.typeField ?? DEFAULT_ONE_OF_TYPE}
-            valueField={property.oneOf!.valueField ?? DEFAULT_ONE_OF_VALUE}
-            properties={property.oneOf!.properties}
-            autoFocus={internalId === lastAddedId}
-            context={context}
-            storeProps={storeProps}
-            storedProps={storedProps}/>;
-    };
-
-    const title = (
-        <LabelWithIconAndTooltip
-            propertyKey={propertyKey}
-            icon={getIconForProperty(property, "small")}
-            required={property.validation?.required}
-            title={property.name ?? propertyKey}
-            className={"text-text-secondary dark:text-text-secondary-dark"}/>
-    );
-
-    const firstOneOfKey = Object.keys(property.oneOf.properties)[0];
-    const body = <ArrayContainer value={value}
-                                 className={"flex flex-col gap-3"}
-                                 droppableId={propertyKey}
-                                 addLabel={property.name ? t("add_to_field", { fieldName: property.name }) : t("add_entry")}
-                                 buildEntry={buildEntry}
-                                 onInternalIdAdded={setLastAddedId}
-                                 disabled={isSubmitting || isDisabled(property)}
-                                 canAddElements={!isDisabled(property)}
-                                 onValueChange={(value) => setFieldValue(propertyKey, value)}
-                                 newDefaultEntry={{
-                                     [property.oneOf!.typeField ?? DEFAULT_ONE_OF_TYPE]: firstOneOfKey,
-                                     [property.oneOf!.valueField ?? DEFAULT_ONE_OF_VALUE]: getDefaultValueFor(property.oneOf.properties[firstOneOfKey])
-                                 }}/>;
-    return (
-
-        <>
-
-            {!minimalistView &&
-                <ExpandablePanel
-                    innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}
-                    initiallyExpanded={expanded}
-                    title={title}>
-                    {body}
-                </ExpandablePanel>}
-
-            {minimalistView && body}
-
-            <FieldHelperText includeDescription={includeDescription}
-                             showError={showError}
-                             error={error}
-                             disabled={disabled}
-                             property={property}/>
-
-        </>
-    );
-}
-
-interface BlockEntryProps {
-    name: string;
-    index: number;
-    value: Record<string, unknown>;
-    /**
-     * Name of the field to use as the discriminator for type
-     * Defaults to `type`
-     */
-    typeField: string;
-    /**
-     * Name of the  field to use as the value
-     * Defaults to `value`
-     */
-    valueField: string;
-
-    autoFocus: boolean;
-    /**
-     * Record of properties, where the key is the `type` and the value
-     * is the corresponding property
-     */
-    properties: Record<string, Property>;
-
-    /**
-     * Additional values related to the state of the form or the entity
-     */
-    context: FormContext;
-
-    storedProps?: object,
-    storeProps: (props: object) => void
-
-}
-
-function BlockEntry({
-                        name,
-                        index,
-                        value,
-                        typeField,
-                        valueField,
-                        properties,
-                        autoFocus,
-                        context,
-                        storedProps,
-                        storeProps
-                    }: BlockEntryProps) {
-
-    const type = value && (value[typeField] as string | undefined);
-    const [typeInternal, setTypeInternal] = useState<string | undefined>(type ?? undefined);
-
-    const formex = useFormex();
-    const { t } = useTranslation();
-
-    useEffect(() => {
-        if (!type) {
-            // Auto-fix empty blocks silently — set the default type WITHOUT
-            // marking as touched so the form doesn't become dirty on mount.
-            const defaultType = Object.keys(properties)[0];
-            const newSelectedProperty = defaultType ? properties[defaultType] : undefined;
-            setTypeInternal(defaultType);
-            formex.setFieldValue(typeFieldName, defaultType);
-            formex.setFieldValue(valueFieldName, newSelectedProperty ? getDefaultValueFor(newSelectedProperty) : null);
-        }
-    }, []);
-
-    useEffect(() => {
-        if (type !== typeInternal) {
-            setTypeInternal(type);
-        }
-    }, [type]);
-
-    const propertyInternal = typeInternal ? properties[typeInternal] : undefined;
-
-    const property = storedProps && typeof propertyInternal === "object" ? mergeDeep(propertyInternal, storedProps) : propertyInternal;
-
-    const enumValuesConfigs = Object.entries(properties)
-        .map(([key, property]) => ({
-            id: key,
-            label: property.name ?? key
-        }));
-
-    const typeFieldName = `${name}.${typeField}`;
-    const valueFieldName = `${name}.${valueField}`;
-
-    const fieldProps: PropertyFieldBindingProps | undefined = property
-        ? {
-            propertyKey: valueFieldName,
-            property,
-            context,
-            autoFocus,
-            partOfArray: false,
-            partOfBlock: true,
-            minimalistView: true,
-            onPropertyChange: storeProps
-        }
-        : undefined;
-
-    const updateType = (newType: string | undefined) => {
-        const newSelectedProperty = newType ? properties[newType] : undefined;
-        setTypeInternal(newType);
-        formex.setFieldTouched(typeFieldName, true);
-        formex.setFieldValue(typeFieldName, newType);
-        formex.setFieldValue(valueFieldName, newSelectedProperty ? getDefaultValueFor(newSelectedProperty) : null);
-    };
-
-    return (
-        <div className={cls(paperMixin, "bg-transparent p-2")}>
-
-            <Field
-                name={typeFieldName}
-            >
-                {(fieldProps) => {
-                    const value1 = fieldProps.field.value !== undefined && fieldProps.field.value !== null ? fieldProps.field.value as string : "";
-                    return (
-                        <>
-                            <Select
-                                className="mb-2"
-                                placeholder={<Typography variant={"caption"}
-                                                         className={"px-4 py-2 font-medium"}>{t("type")}</Typography>}
-                                size={"medium"}
-                                fullWidth={true}
-                                position={"item-aligned"}
-                                value={value1}
-                                renderValue={(enumKey: string) =>
-                                    <EnumValuesChip
-                                        enumKey={enumKey}
-                                        enumValues={enumValuesConfigs}
-                                        size={"small"}/>
-                                }
-                                onValueChange={(value) => {
-                                    updateType(value);
-                                }}>
-                                {enumValuesConfigs.map((enumConfig) => (
-                                    <SelectItem
-                                        key={enumConfig.id}
-                                        value={String(enumConfig.id)}>
-                                        <EnumValuesChip
-                                            enumKey={enumConfig.id}
-                                            enumValues={enumValuesConfigs}
-                                            size={"small"}/>
-                                    </SelectItem>)
-                                )}
-                            </Select>
-                        </>
-                    );
-                }
-                }
-            </Field>
-
-            {fieldProps && (
-                // It is important to use this key to force a re-render of the field on type change
-                <PropertyFieldBinding key={`form_control_${name}_${typeInternal}`} {...fieldProps}/>
-            )}
-
-        </div>
-    );
-}

package/src/form/field_bindings/DateTimeFieldBinding.tsx

@@ -1,78 +0,0 @@
-import type { FieldProps } from "../../types/fields";
-import type { DateProperty } from "@rebasepro/types";
-import React from "react";
-
-;
-
-import { FieldHelperText } from "../components/FieldHelperText";
-import { LabelWithIcon } from "../components/LabelWithIcon";
-import { useCustomizationController } from "@rebasepro/app";
-import { getIconForProperty } from "../../util/property_utils";
-import { DateTimeField } from "@rebasepro/ui";
-import { useClearRestoreValue } from "../useClearRestoreValue";
-import { PropertyIdCopyTooltip } from "../../components/PropertyIdCopyTooltip";
-
-type DateTimeFieldProps = FieldProps<DateProperty>;
-
-/**
- * Field that allows selecting a date
- *
- * This is one of the internal components that get mapped natively inside forms
- * and tables to the specified properties.
- * @group Form fields
- */
-export function DateTimeFieldBinding({
-    propertyKey,
-    value,
-    setValue,
-    autoFocus,
-    error,
-    showError,
-    disabled,
-    touched,
-    property,
-    includeDescription,
-    hideLabel
-}: DateTimeFieldProps) {
-
-    const { locale } = useCustomizationController();
-    const internalValue = value || null;
-
-    useClearRestoreValue({
-        property,
-        value,
-        setValue
-    });
-
-    return (
-        <>
-            <PropertyIdCopyTooltip propertyKey={propertyKey}>
-                <DateTimeField
-                    value={internalValue}
-                    onChange={(dateValue) => setValue(dateValue)}
-                    mode={property.mode}
-                    clearable={property.admin?.clearable}
-                    locale={locale}
-                    error={showError}
-                    disabled={disabled}
-                    label={hideLabel ? undefined : <LabelWithIcon
-                        icon={getIconForProperty(property, "small")}
-                        required={property.validation?.required}
-                        className={showError ? "text-red-500 dark:text-red-500" : "text-text-secondary dark:text-text-secondary-dark"}
-                        title={property.name ?? propertyKey}/>}
-                    // The entity form sets `hideLabel` for every field FieldBlock
-                    // labels on its behalf, and FieldBlock's label is a <span> that
-                    // points at nothing — so without this the control is nameless.
-                    aria-label={hideLabel ? (property.name ?? propertyKey) : undefined}
-                />
-            </PropertyIdCopyTooltip>
-
-            <FieldHelperText includeDescription={includeDescription}
-                showError={showError}
-                error={error}
-                disabled={disabled}
-                property={property}/>
-
-        </>
-    );
-}

package/src/form/field_bindings/GeopointFieldBinding.tsx

@@ -1,200 +0,0 @@
-import type { FieldProps } from "../../types/fields";
-import type { GeopointProperty } from "@rebasepro/types";
-import React, { useCallback, useEffect, useState } from "react";
-import { IconButton, TextField, Trash2Icon } from "@rebasepro/ui";
-
-import { FieldHelperText } from "../components/FieldHelperText";
-import { LabelWithIcon } from "../components/LabelWithIcon";
-import { useClearRestoreValue } from "../useClearRestoreValue";
-import { PropertyIdCopyTooltip } from "../../components/PropertyIdCopyTooltip";
-import { getIconForProperty } from "../../util/property_utils";
-
-/** Latitude runs −90…90, longitude −180…180. Anything else is not a place. */
-const LAT_RANGE: [number, number] = [-90, 90];
-const LNG_RANGE: [number, number] = [-180, 180];
-
-interface Coordinates { latitude: number; longitude: number }
-
-/**
- * Read whatever the driver handed us as a pair of coordinates.
- *
- * A geopoint arrives as a `GeoPoint` instance from the client, but as a plain
- * object once it has been through JSON — and PostGIS-backed rows may present it
- * as `{ x, y }`, where `x` is the longitude. Reading only one of those shapes
- * would render an empty field over data that is actually there.
- */
-export function readCoordinates(value: unknown): Coordinates | null {
-    if (!value || typeof value !== "object") return null;
-    const v = value as Record<string, unknown>;
-
-    const lat = typeof v.latitude === "number" ? v.latitude : (typeof v.y === "number" ? v.y : undefined);
-    const lng = typeof v.longitude === "number" ? v.longitude : (typeof v.x === "number" ? v.x : undefined);
-
-    if (typeof lat !== "number" || typeof lng !== "number") return null;
-    return { latitude: lat, longitude: lng };
-}
-
-const inRange = (n: number, [min, max]: [number, number]) => n >= min && n <= max;
-
-/**
- * Field binding for `type: "geopoint"`.
- *
- * The model has defined this type all along and the admin had no way to render
- * it: the widget lookup fell off the end of its chain, logged to the console
- * and returned undefined, so the field simply did not appear on the form. A
- * geopoint column was invisible in the admin panel, and unreachable in the
- * property editor.
- *
- * Two number inputs rather than a map. A map needs a tile provider, which means
- * a network dependency and an API key, and neither belongs in a field binding
- * that has to work offline and in every deployment. Coordinates are typed,
- * pasted and copied far more often than they are dropped on a map.
- *
- * @group Form fields
- */
-export function GeopointFieldBinding({
-    propertyKey,
-    value,
-    setValue,
-    error,
-    showError,
-    disabled,
-    autoFocus,
-    property,
-    includeDescription,
-    hideLabel,
-    size = "large"
-}: FieldProps<GeopointProperty>) {
-
-    const coordinates = readCoordinates(value);
-
-    // Held as text while editing: a half-typed "-" or "12." is not a number
-    // yet, and rounding it through `Number` on every keystroke fights the user.
-    const [latText, setLatText] = useState(() => coordinates ? String(coordinates.latitude) : "");
-    const [lngText, setLngText] = useState(() => coordinates ? String(coordinates.longitude) : "");
-
-    useEffect(() => {
-        const next = readCoordinates(value);
-        setLatText(next ? String(next.latitude) : "");
-        setLngText(next ? String(next.longitude) : "");
-    }, [coordinates?.latitude, coordinates?.longitude]);
-
-    useClearRestoreValue({ property, value, setValue });
-
-    const commit = useCallback((rawLat: string, rawLng: string) => {
-        // Both empty means "no location", which is different from 0,0 — a real
-        // point in the Gulf of Guinea, and the classic way a cleared field
-        // turns into a wrong one.
-        if (rawLat.trim() === "" && rawLng.trim() === "") {
-            setValue(null);
-            return;
-        }
-        // One side filled and the other still empty is a location half typed,
-        // not a location. Committing it would send the empty side through
-        // `Number("")`, which is 0 and perfectly finite — so typing a latitude
-        // and pausing used to write longitude 0 and drop the point in the Gulf
-        // of Guinea. Hold until both sides are there; `halfEntered` below says
-        // so in the meantime.
-        if (rawLat.trim() === "" || rawLng.trim() === "") return;
-
-        const latitude = Number(rawLat);
-        const longitude = Number(rawLng);
-        if (!Number.isFinite(latitude) || !Number.isFinite(longitude)) return;
-        setValue({ latitude, longitude } as never);
-    }, [setValue]);
-
-    const handleClear = useCallback((e: React.MouseEvent) => {
-        e.stopPropagation();
-        e.preventDefault();
-        setLatText("");
-        setLngText("");
-        setValue(null);
-    }, [setValue]);
-
-    const latNumber = Number(latText);
-    const lngNumber = Number(lngText);
-    const latInvalid = latText.trim() !== "" && (!Number.isFinite(latNumber) || !inRange(latNumber, LAT_RANGE));
-    const lngInvalid = lngText.trim() !== "" && (!Number.isFinite(lngNumber) || !inRange(lngNumber, LNG_RANGE));
-
-    // One side filled and the other empty is not a point.
-    const halfEntered = (latText.trim() === "") !== (lngText.trim() === "");
-
-    const localError = latInvalid
-        ? `Latitude must be between ${LAT_RANGE[0]} and ${LAT_RANGE[1]}`
-        : lngInvalid
-            ? `Longitude must be between ${LNG_RANGE[0]} and ${LNG_RANGE[1]}`
-            : halfEntered
-                ? "A location needs both a latitude and a longitude"
-                : undefined;
-
-    return (
-        <div className="flex flex-col gap-2 w-full">
-            {/* Label only, and only when there is one: a row that survives
-                `hideLabel` still spends its `mb-1` and the column's `gap-2`, so
-                the pair of inputs sat below the control next to them even
-                though the two labels were level. */}
-            {!hideLabel && <div className="flex items-center justify-between mb-1">
-                <LabelWithIcon
-                    icon={getIconForProperty(property, "small")}
-                    required={property.validation?.required}
-                    title={property.name ?? propertyKey}
-                />
-            </div>}
-
-            <PropertyIdCopyTooltip propertyKey={propertyKey}>
-                {/* Clear sits beside the inputs rather than above them, so
-                    entering a location does not grow the field by a row and
-                    knock it out of line with its neighbour. */}
-                <div className="flex gap-4 w-full items-center">
-                    <TextField
-                        className="flex-1"
-                        size={size}
-                        label="Latitude"
-                        value={latText}
-                        autoFocus={autoFocus}
-                        disabled={disabled}
-                        error={showError ? Boolean(error) || latInvalid : latInvalid}
-                        onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-                            setLatText(e.target.value);
-                            commit(e.target.value, lngText);
-                        }}
-                        placeholder="e.g. 41.3874"
-                        inputClassName="font-mono"
-                    />
-                    <TextField
-                        className="flex-1"
-                        size={size}
-                        label="Longitude"
-                        value={lngText}
-                        disabled={disabled}
-                        error={showError ? Boolean(error) || lngInvalid : lngInvalid}
-                        onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-                            setLngText(e.target.value);
-                            commit(latText, e.target.value);
-                        }}
-                        placeholder="e.g. 2.1686"
-                        inputClassName="font-mono"
-                    />
-                    {!disabled && (latText || lngText) && (
-                        <IconButton
-                            size="small"
-                            onClick={handleClear}
-                            className="shrink-0 text-text-secondary hover:text-red-500"
-                            aria-label="Clear location"
-                        >
-                            <Trash2Icon size={14}/>
-                        </IconButton>
-                    )}
-                </div>
-            </PropertyIdCopyTooltip>
-
-            <FieldHelperText
-                includeDescription={includeDescription}
-                showError={showError || Boolean(localError)}
-                error={error || localError}
-                disabled={disabled}
-                property={property}
-            />
-        </div>
-    );
-}