@rebasepro/admin 0.0.1-canary.09e5ec5

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -0,0 +1,171 @@
+import { useEntitySelectionDialog } from "../../hooks/useEntitySelectionDialog";
+import type { EntityCollection } from "@rebasepro/types";
+import type { FieldProps } from "../../types/fields";
+import type { ArrayProperty, Property } from "@rebasepro/types";
+import React, { useCallback, useMemo } from "react";
+import { Entity, EntityReference } from "@rebasepro/types";
+import { ReferencePreview } from "../../preview";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
+import { ArrayContainer, ArrayEntryParams } from "../../components/ArrayContainer";
+import { getIconForProperty } from "../../util/property_utils";
+import { getReferenceFrom } from "@rebasepro/common";
+
+import { useTranslation, ErrorView } from "@rebasepro/core";
+import { Button, cls, ExpandablePanel, fieldBackgroundMixin, Typography } from "@rebasepro/ui";
+import { PencilIcon } from "lucide-react";
+import { useClearRestoreValue } from "../useClearRestoreValue";
+import { useCollectionRegistryController } from "../../index";
+
+type ArrayOfReferencesFieldProps = FieldProps<ArrayProperty, EntityReference[]>;
+
+/**
+ * This field allows selecting multiple references.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export function ArrayOfReferencesFieldBinding({
+    propertyKey,
+    value,
+    error,
+    showError,
+    disabled,
+    isSubmitting,
+    minimalistView: minimalistViewProp,
+    property,
+    includeDescription,
+    setValue,
+    setFieldValue
+}: ArrayOfReferencesFieldProps) {
+
+    const minimalistView = minimalistViewProp || property.minimalistView;
+    const { t } = useTranslation();
+
+    const ofProperty = property.of as Property;
+    if (ofProperty.type !== "reference") {
+        throw Error("ArrayOfReferencesField expected a property containing references");
+    }
+
+    const expanded = property.expanded === undefined ? true : property.expanded;
+    const selectedEntityIds = value && Array.isArray(value) ? value.map((ref) => ref.id) : [];
+
+    useClearRestoreValue({
+        property,
+        value,
+        setValue
+    });
+
+    const collectionRegistryController = useCollectionRegistryController();
+    const collection: EntityCollection | undefined = useMemo(() => {
+        return ofProperty.path ? collectionRegistryController.getCollection(ofProperty.path) : undefined;
+    }, [ofProperty.path]);
+
+    if (!collection) {
+        throw Error(`Couldn't find the corresponding collection for the path: ${ofProperty.path}`);
+    }
+
+    const onMultipleEntitiesSelected = useCallback((entities: Entity<any>[]) => {
+        const refs = entities.map(e => getReferenceFrom(e));
+        setValue(refs);
+    }, [setValue]);
+
+    const referenceDialogController = useEntitySelectionDialog({
+        multiselect: true,
+        path: ofProperty.path,
+        collection,
+        onMultipleEntitiesSelected,
+        selectedEntityIds,
+        forceFilter: ofProperty.forceFilter
+    }
+    );
+
+    const onEntryClick = (e: React.SyntheticEvent) => {
+        e.preventDefault();
+        referenceDialogController.open();
+    };
+
+    const buildEntry = useCallback(({
+        index,
+        internalId,
+        storedProps,
+        storeProps
+    }: ArrayEntryParams) => {
+        const entryValue = value && value.length > index ? value[index] : undefined;
+        if (!entryValue)
+            return <div>Internal ERROR</div>;
+        return (
+            <ReferencePreview
+                key={internalId}
+                disabled={!ofProperty.path}
+                previewProperties={ofProperty.previewProperties}
+                size={"medium"}
+                onClick={onEntryClick}
+                hover={!disabled}
+                reference={entryValue}
+                includeId={ofProperty.includeId}
+                includeEntityLink={ofProperty.includeEntityLink}
+            />
+        );
+    }, [ofProperty.path, ofProperty.previewProperties, value]);
+
+    const title = (<>
+        <LabelWithIconAndTooltip
+            propertyKey={propertyKey}
+            icon={getIconForProperty(property, "small")}
+            required={property.validation?.required}
+            title={property.name ?? propertyKey}
+            className={"h-8 flex grow text-text-secondary dark:text-text-secondary-dark"}/>
+        {Array.isArray(value) && <Typography variant={"caption"} className={"px-4"}>({value.length})</Typography>}
+    </>);
+
+    const body = <>
+        {!collection && <ErrorView
+            error={"The specified collection does not exist. Check console"}/>}
+
+        {collection && <div className={"group"}>
+
+            <ArrayContainer droppableId={propertyKey}
+                value={value}
+                disabled={isSubmitting}
+                buildEntry={buildEntry}
+                canAddElements={false}
+                addLabel={property.name ? t("add_reference_to", { name: property.name }) : t("add_reference")}
+                newDefaultEntry={property.of && "defaultValue" in property.of ? property.of?.defaultValue : null}
+                onValueChange={(value) => setFieldValue(propertyKey, value)}
+            />
+
+            <Button
+                className="ml-3.5 my-4 justify-center text-left"
+                variant="text"
+                disabled={isSubmitting}
+                onClick={onEntryClick}>
+                <PencilIcon size={16}/>
+                {t("edit")} {property.name}
+            </Button>
+        </div>}
+    </>;
+
+    return (
+        <>
+
+            {!minimalistView &&
+                <ExpandablePanel
+                    titleClassName={fieldBackgroundMixin}
+                    innerClassName={cls("px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2", fieldBackgroundMixin)}
+                    initiallyExpanded={expanded}
+                    title={title}>
+                    {body}
+                </ExpandablePanel>}
+
+            {minimalistView && body}
+
+            <FieldHelperText includeDescription={includeDescription}
+                showError={showError}
+                error={error}
+                disabled={disabled}
+                property={property}/>
+
+        </>
+    );
+}

package/src/form/field_bindings/BlockFieldBinding.tsx

@@ -0,0 +1,280 @@
+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/formex";
+
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
+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 { useTranslation } from "@rebasepro/core";
+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.minimalistView;
+    const { t } = useTranslation();
+
+    if (!property.oneOf)
+        throw Error("ArrayOneOfField misconfiguration. Property `oneOf` not set");
+
+    const expanded = property.expanded === undefined ? true : property.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 || Boolean(property.disabled)}
+        canAddElements={!property.disabled}
+        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: any;
+    /**
+     * 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<any>;
+
+    storedProps?: object,
+    storeProps: (props: object) => void
+
+}
+
+function BlockEntry({
+    name,
+    index,
+    value,
+    typeField,
+    valueField,
+    properties,
+    autoFocus,
+    context,
+    storedProps,
+    storeProps
+}: BlockEntryProps) {
+
+    const type = value && value[typeField];
+    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: any) => {
+        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: any) =>
+                                    <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

@@ -0,0 +1,72 @@
+import type { FieldProps } from "../../types/fields";
+import type { DateProperty } from "@rebasepro/types";
+import React from "react";
+
+;
+
+import { FieldHelperText, LabelWithIcon } from "../components";
+import { useCustomizationController } from "@rebasepro/core";
+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
+}: 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.clearable}
+                    locale={locale}
+                    error={showError}
+                    disabled={disabled}
+                    label={<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}/>}
+                />
+            </PropertyIdCopyTooltip>
+
+            <FieldHelperText includeDescription={includeDescription}
+                showError={showError}
+                error={error}
+                disabled={disabled}
+                property={property}/>
+
+        </>
+    );
+}