@rebasepro/cms 0.17.3 → 0.18.1

package/src/form/field_bindings/TextFieldBinding.tsx

@@ -1,189 +0,0 @@
-import type { FieldProps } from "../../types/fields";
-import type { NumberProperty, StringProperty } from "@rebasepro/types";
-import React, { useCallback } from "react";
-
-import {
-    cls,
-    Collapse,
-    fieldBackgroundHoverMixin,
-    fieldBackgroundMixin,
-    IconButton,
-    TextareaAutosize,
-    TextField,
-    XIcon
-} from "@rebasepro/ui";
-import { PreviewType } from "@rebasepro/cms-types";
-import { FieldHelperText } from "../components/FieldHelperText";
-import { LabelWithIcon } from "../components/LabelWithIcon";
-import { PropertyPreview } from "../../preview";
-import { useClearRestoreValue } from "../useClearRestoreValue";
-import { PropertyIdCopyTooltip } from "../../components/PropertyIdCopyTooltip";
-import { getIconForProperty } from "../../util/property_utils";
-
-/**
- * Generic text field.
- * This is one of the internal components that get mapped natively inside forms
- * and tables to the specified properties.
- * @group Form fields
- */
-export function TextFieldBinding<T extends string | number>({
-                                                                propertyKey,
-                                                                value,
-                                                                setValue,
-                                                                error,
-                                                                showError,
-                                                                disabled,
-                                                                autoFocus,
-                                                                property,
-                                                                includeDescription,
-                                                                hideLabel,
-                                                                size = "large"
-                                                            }: FieldProps<StringProperty | NumberProperty>) {
-
-    let multiline: boolean | undefined;
-    let url: boolean | PreviewType | undefined;
-    if (property.type === "string") {
-        multiline = property.admin?.multiline;
-        url = property.admin?.urlPreview;
-    }
-
-    useClearRestoreValue({
-        property,
-        value,
-        setValue
-    });
-
-    const displayValue = (value !== undefined && value !== null) ? String(value) : "";
-
-    const handleClearClick = useCallback((e: React.MouseEvent) => {
-        e.stopPropagation();
-        e.preventDefault();
-        setValue(null);
-    }, [setValue]);
-
-    const onChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-        if (inputType === "number") {
-            const numberValue = event.target.value ? parseFloat(event.target.value) : undefined;
-            if (numberValue && isNaN(numberValue)) {
-                setValue(null);
-            } else if (numberValue !== undefined && numberValue !== null) {
-                setValue(numberValue as T);
-            } else {
-                setValue(null);
-            }
-        } else {
-            setValue(event.target.value as T);
-        }
-    };
-
-    const isMultiline = Boolean(multiline);
-
-    let inputType: "number" | "email" | "url" | undefined = undefined;
-    if (property.type === "number") {
-        inputType = "number";
-    } else if (property.type === "string") {
-        if (property.email) inputType = "email";
-        else if (property.admin?.urlPreview) inputType = "url";
-    }
-
-    // `undefined` rather than an empty element: TextField and the multiline box
-    // both reserve a label row whenever `label` is truthy, so a null-rendering
-    // element would leave the gap behind without the text.
-    const label = hideLabel
-        ? undefined
-        : (
-            <LabelWithIcon
-                icon={getIconForProperty(property, "small")}
-                required={property.validation?.required || property.isId === true}
-                title={property.name ?? propertyKey}/>
-        );
-
-    // The control needs a name of its own in two cases, and between them they
-    // cover every text field in an entity form:
-    //
-    //  - `hideLabel`, which the form sets for anything FieldBlock labels for it
-    //    (`hideLabel: !selfLabelling`). FieldBlock draws the name in a <span>
-    //    inside a <div> — not a <label>, and pointing at nothing — so suppressing
-    //    the field's own label left the input with no accessible name at all and
-    //    a screen reader fell back to reading its value back to you.
-    //  - the multiline branch below, which never associated anything: its label
-    //    is a decorative absolutely-positioned <div>, so it is unnamed whether or
-    //    not the form also drew one.
-    //
-    // The single-line TextField is already handled by the kit when a label is
-    // present — it wires `aria-labelledby` — so it only needs this as a fallback.
-    const accessibleName = property.name ?? propertyKey;
-    return (<>
-            <PropertyIdCopyTooltip propertyKey={propertyKey}>
-                {isMultiline ? (
-                    <div className={cls(
-                        "rounded-md relative max-w-full min-h-[64px]",
-                        fieldBackgroundMixin,
-                        fieldBackgroundHoverMixin,
-                        showError && error ? "border border-red-500 dark:border-red-600" : ""
-                    )}>
-                        {label && <div
-                            className="pointer-events-none absolute top-1 text-xs font-medium px-3 text-text-secondary dark:text-text-secondary-dark">
-                            {label}
-                        </div>}
-                        <TextareaAutosize
-                            value={displayValue}
-                            onChange={onChange}
-                            autoFocus={autoFocus}
-                            disabled={disabled}
-                            aria-label={accessibleName}
-                            className={cls(
-                                "rounded-md resize-none w-full outline-none text-base bg-transparent min-h-[64px] px-3",
-                                label ? "pt-8 pb-2" : "py-2",
-                                disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500",
-                                showError && error ? "text-red-500 dark:text-red-600" : ""
-                            )}
-                        />
-                        {property.admin?.clearable && (
-                            <div
-                                className="flex flex-row justify-center items-center absolute h-full right-0 top-0 mr-4">
-                                <IconButton onClick={handleClearClick}>
-                                    <XIcon/>
-                                </IconButton>
-                            </div>
-                        )}
-                    </div>
-                ) : (
-                    <TextField
-                        size={size}
-                        value={displayValue}
-                        onChange={onChange}
-                        autoFocus={autoFocus}
-                        label={label}
-                        aria-label={label ? undefined : accessibleName}
-                        type={inputType}
-                        disabled={disabled}
-                        endAdornment={
-                            property.admin?.clearable && <IconButton
-                                onClick={handleClearClick}>
-                                <XIcon/>
-                            </IconButton>
-                        }
-                        error={showError ? !!error : undefined}
-                        inputClassName={error ? "text-red-500 dark:text-red-600" : ""}/>
-                )}
-            </PropertyIdCopyTooltip>
-            <FieldHelperText includeDescription={includeDescription}
-                             showError={showError}
-                             error={error}
-                             disabled={disabled}
-                             property={property}/>
-
-            {url && <Collapse
-                className="mt-1 ml-1"
-                in={Boolean(value)}>
-                <PropertyPreview
-                    value={value}
-                    property={property}
-                    size={size}/>
-            </Collapse>}
-
-        </>
-    );
-
-}

package/src/form/field_bindings/UserSelectFieldBinding.tsx

@@ -1,71 +0,0 @@
-import type { FieldProps } from "../../types/fields";
-import type { StringProperty } from "@rebasepro/types";
-import React from "react";
-
-import { FieldHelperText } from "../components/FieldHelperText";
-import { LabelWithIcon } from "../components/LabelWithIcon";
-import { getIconForProperty } from "../../util/property_utils";
-import { PropertyIdCopyTooltip } from "../../components/PropertyIdCopyTooltip";
-import { UserSelector } from "../../components/UserSelector";
-
-type UserSelectProps = FieldProps<StringProperty>;
-
-/**
- * Field binding for selecting a user from the internal user management system.
- * Renders a searchable popover dropdown with user information including name and email,
- * with server-side search and pagination support.
- *
- * This is one of the internal components that get mapped natively inside forms
- * and tables to the specified properties.
- * @group Form fields
- */
-export function UserSelectFieldBinding({
-                                           propertyKey,
-                                           value,
-                                           setValue,
-                                           error,
-                                           showError,
-                                           disabled,
-                                           autoFocus,
-                                           touched,
-                                           property,
-                                           includeDescription,
-                                           hideLabel,
-                                           size = "large"
-                                       }: UserSelectProps) {
-
-    // Passed straight through. Mapping the form's `large` onto the selector's
-    // `medium` produced a 56px box next to 48px text fields — the labels lined
-    // up and the boxes did not.
-    const selectorSize = size;
-
-    return (
-        <>
-            {!hideLabel && <PropertyIdCopyTooltip propertyKey={propertyKey}>
-                <LabelWithIcon
-                    icon={getIconForProperty(property, "small")}
-                    required={property.validation?.required}
-                    title={property.name}
-                    className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5 my-0"}
-                />
-            </PropertyIdCopyTooltip>}
-
-            <UserSelector
-                value={value as string | null | undefined}
-                onValueChange={(userId) => {
-                    setValue(userId);
-                }}
-                disabled={disabled}
-                clearable={property.admin?.clearable}
-                size={selectorSize}
-            />
-
-            <FieldHelperText includeDescription={includeDescription}
-                             showError={showError}
-                             error={error}
-                             disabled={disabled}
-                             property={property}/>
-
-        </>
-    );
-}

package/src/form/field_bindings/VectorFieldBinding.tsx

@@ -1,209 +0,0 @@
-import type { FieldProps } from "../../types/fields";
-import type { VectorProperty } from "@rebasepro/types";
-import React, { useState, useEffect, useCallback } from "react";
-import {
-    Button,
-    CheckIcon,
-    cls,
-    defaultBorderMixin,
-    EyeIcon,
-    EyeOffIcon,
-    IconButton,
-    PencilIcon,
-    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";
-
-/**
- * Custom field binding to render vector fields (e.g. for high-dimensional embeddings).
- * Shows a compact metadata card by default, and lets users expand values or edit them.
- *
- * Automatically parses inputs to number arrays and packages them into the canonical
- * Vector object structure expected by Rebase driver.
- * @group Form fields
- */
-export function VectorFieldBinding({
-    propertyKey,
-    value,
-    setValue,
-    error,
-    showError,
-    disabled,
-    autoFocus,
-    property,
-    includeDescription,
-    hideLabel,
-    size = "large"
-}: FieldProps<VectorProperty>) {
-    const isVectorObject = (val: unknown): val is { value: number[] } => {
-        return typeof val === "object" && val !== null && "value" in val;
-    };
-
-    // Extract array value from the custom { __type: "Vector", value: number[] } wrapper
-    const arrayValue = isVectorObject(value)
-        ? value.value
-        : (Array.isArray(value) ? value : []);
-
-    const [textValue, setTextValue] = useState(() => arrayValue.join(", "));
-    const [isEditing, setIsEditing] = useState(false);
-    const [showValues, setShowValues] = useState(false);
-
-    useEffect(() => {
-        setTextValue(arrayValue.join(", "));
-    }, [JSON.stringify(arrayValue)]);
-
-    useClearRestoreValue({
-        property,
-        value,
-        setValue
-    });
-
-    const handleClearClick = useCallback((e: React.MouseEvent) => {
-        e.stopPropagation();
-        e.preventDefault();
-        setValue(null);
-        setTextValue("");
-    }, [setValue]);
-
-    const onChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-        const raw = event.target.value;
-        setTextValue(raw);
-
-        // Parse comma-separated string to number array
-        const numbers = raw
-            .split(",")
-            .map(str => str.trim())
-            .filter(str => str !== "")
-            .map(Number);
-
-        setValue({
-            __type: "Vector",
-            value: numbers
-        });
-    };
-
-    const label = hideLabel ? null : (
-        <LabelWithIcon
-            icon={getIconForProperty(property, "small")}
-            required={property.validation?.required}
-            title={property.name ?? propertyKey}
-        />
-    );
-
-    const isPopulated = arrayValue.length > 0;
-
-    return (
-        <div className="flex flex-col gap-2 w-full">
-            {/* Only when there is a label to put in it — an empty row still
-                spends its `mb-1` and the column's `gap-2`, and the control ends
-                up below the one beside it under a label at the same height. */}
-            {label && <div className="flex items-center justify-between mb-1">
-                {label}
-            </div>}
-
-            <PropertyIdCopyTooltip propertyKey={propertyKey}>
-                <div className="w-full">
-                    {!isEditing ? (
-                        /* Compact Preview Card */
-                        <div className={cls("flex flex-col gap-3 p-4 rounded-xl border bg-surface-50/50 dark:bg-surface-800/20 backdrop-blur-sm transition-all duration-200", defaultBorderMixin)}>
-                            <div className="flex items-center justify-between flex-wrap gap-2">
-                                <div className="flex items-center gap-2.5">
-                                    {/* Status Dot */}
-                                    <div className={`w-2.5 h-2.5 rounded-full ${isPopulated ? "bg-emerald-500 animate-pulse" : "bg-surface-300 dark:bg-surface-600"}`} />
-                                    <span className="text-sm font-semibold text-text-primary dark:text-text-primary-dark">
-                                        {isPopulated ? `${arrayValue.length} Dimensions` : "Empty Vector"}
-                                    </span>
-                                    {isPopulated && (
-                                        <span className="text-xs text-text-secondary dark:text-text-secondary-dark px-2 py-0.5 rounded-full bg-surface-100 dark:bg-surface-800 font-medium">
-                                            Embedding
-                                        </span>
-                                    )}
-                                </div>
-
-                                <div className="flex items-center gap-2">
-                                    {isPopulated && (
-                                        <Button
-                                            variant="text"
-                                            size="small"
-                                            onClick={() => setShowValues(!showValues)}
-                                            startIcon={showValues ? <EyeOffIcon size={14} /> : <EyeIcon size={14} />}
-                                        >
-                                            {showValues ? "Hide values" : "Show values"}
-                                        </Button>
-                                    )}
-                                    {!disabled && (
-                                        <Button
-                                            variant="outlined"
-                                            size="small"
-                                            onClick={() => setIsEditing(true)}
-                                            startIcon={<PencilIcon size={14} />}
-                                        >
-                                            {isPopulated ? "Edit values" : "Add values"}
-                                        </Button>
-                                    )}
-                                    {isPopulated && !disabled && (
-                                        <IconButton size="small" onClick={handleClearClick} className="text-text-secondary hover:text-red-500">
-                                            <Trash2Icon size={14} />
-                                        </IconButton>
-                                    )}
-                                </div>
-                            </div>
-
-                            {/* Collapsible scrollable numbers list */}
-                            {showValues && isPopulated && (
-                                <div className="mt-1 p-3 rounded-lg bg-surface-100/50 dark:bg-surface-900/40 border border-surface-200/50 dark:border-surface-800/50 max-h-36 overflow-y-auto font-mono text-[11px] leading-relaxed text-text-secondary dark:text-text-secondary-dark break-all selection:bg-primary-100 dark:selection:bg-primary-900/40">
-                                    {arrayValue.join(", ")}
-                                </div>
-                            )}
-                        </div>
-                    ) : (
-                        /* Editing View: Text Input */
-                        <div className={cls("flex flex-col gap-2 p-4 rounded-xl border bg-surface-50/20 dark:bg-surface-800/10", defaultBorderMixin)}>
-                            <TextField
-                                size={size}
-                                aria-label={`${property.name ?? propertyKey} vector values`}
-                                value={textValue}
-                                onChange={onChange}
-                                autoFocus={true}
-                                placeholder={`e.g., 0.15, -0.42, 0.88 (Requires ${property.dimensions} dimensions)`}
-                                disabled={disabled}
-                                error={showError ? !!error : undefined}
-                                inputClassName={error ? "text-red-500 dark:text-red-600 font-mono text-xs" : "font-mono text-xs"}
-                            />
-                            <div className="flex justify-end gap-2 mt-2">
-                                <Button
-                                    variant="outlined"
-                                    size="small"
-                                    onClick={() => setIsEditing(false)}
-                                >
-                                    Cancel
-                                </Button>
-                                <Button
-                                    variant="filled"
-                                    size="small"
-                                    onClick={() => setIsEditing(false)}
-                                    startIcon={<CheckIcon size={14} />}
-                                >
-                                    Done
-                                </Button>
-                            </div>
-                        </div>
-                    )}
-                </div>
-            </PropertyIdCopyTooltip>
-
-            <FieldHelperText
-                includeDescription={includeDescription}
-                showError={showError}
-                error={error}
-                disabled={disabled}
-                property={property}
-            />
-        </div>
-    );
-}