@rebasepro/core 0.0.1-canary.0

package/src/form/field_bindings/ReferenceAsStringFieldBinding.tsx

@@ -0,0 +1,135 @@
+import React, { useCallback, useMemo } from "react";
+import { Entity, EntityCollection, EntityReference, FieldProps, Property, StringProperty } from "@rebasepro/types";
+import { useEntitySelectionDialog, useCollectionRegistryController } from "../../hooks";
+import { ReadOnlyFieldBinding } from "./ReadOnlyFieldBinding";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
+import { ErrorView } from "../../components";
+import { ReferencePreview } from "../../preview";
+import { getIconForProperty, IconForView } from "../../util";
+import { useClearRestoreValue } from "../useClearRestoreValue";
+import { EntityPreviewContainer } from "../../components/EntityPreview";
+import { cls } from "@rebasepro/ui";
+
+/**
+ * Field that opens a reference selection dialog and stores the entity ID as a string.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export function ReferenceAsStringFieldBinding(props: FieldProps<StringProperty>) {
+    if (typeof props.property.reference?.path !== "string") {
+        return <ReadOnlyFieldBinding {...props as FieldProps<Property>} />;
+    }
+
+    return <ReferenceAsStringFieldBindingInternal {...props} />;
+}
+
+function ReferenceAsStringFieldBindingInternal({
+    propertyKey,
+    value,
+    setValue,
+    error,
+    showError,
+    isSubmitting,
+    disabled,
+    minimalistView,
+    property,
+    includeDescription,
+    size = "medium"
+}: FieldProps<StringProperty>) {
+    if (!property.reference?.path) {
+        throw new Error("Property path is required for ReferenceAsStringFieldBinding");
+    }
+
+    useClearRestoreValue({
+        property,
+        value,
+        setValue
+    });
+
+    const navigationController = useCollectionRegistryController();
+    const path = property.reference.path;
+    const collection: EntityCollection | undefined = useMemo(() => {
+        return path ? navigationController.getCollection(path) : undefined;
+    }, [path]);
+
+    const referenceValue: EntityReference | undefined = useMemo(() => {
+        if (value && path) {
+            return new EntityReference({ id: value, path });
+        }
+        return undefined;
+    }, [value, path]);
+
+    if (!collection) {
+        throw Error(`Couldn't find the corresponding collection for the path: ${path}`);
+    }
+
+    const onSingleEntitySelected = useCallback((e: Entity<any> | null) => {
+        setValue(e ? String(e.id) : null); // TODO: the string casting might be wrong
+    }, [setValue]);
+
+    const referenceDialogController = useEntitySelectionDialog({
+        multiselect: false,
+        path,
+        collection,
+        onSingleEntitySelected,
+        selectedEntityIds: value ? [value] : undefined,
+        forceFilter: property.reference.forceFilter
+    }
+    );
+
+    const onEntryClick = (e: React.SyntheticEvent) => {
+        e.preventDefault();
+        referenceDialogController.open();
+    };
+
+    return (
+        <>
+            {!minimalistView && <LabelWithIconAndTooltip
+                propertyKey={propertyKey}
+                icon={getIconForProperty(property, "small")}
+                required={property.validation?.required}
+                title={property.name ?? propertyKey}
+                className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"} />}
+
+            {!collection && <ErrorView
+                error={"The specified collection does not exist. Check console"} />}
+
+            {collection && <>
+
+                {referenceValue && <ReferencePreview
+                    disabled={!path}
+                    previewProperties={property.reference?.previewProperties}
+                    hover={!disabled}
+                    size={size}
+                    onClick={disabled || isSubmitting ? undefined : onEntryClick}
+                    reference={referenceValue}
+                    includeEntityLink={property.reference?.includeEntityLink}
+                    includeId={property.reference?.includeId}
+                />}
+
+                {!value && <div className="justify-center text-left">
+                    <EntityPreviewContainer
+                        className={cls("px-6 h-16 text-sm font-medium flex items-center gap-6",
+                            disabled || isSubmitting
+                                ? "text-surface-accent-500"
+                                : "cursor-pointer text-surface-accent-700 dark:text-surface-accent-300 hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800")}
+                        onClick={onEntryClick}
+                        size={"medium"}>
+                        <IconForView collectionOrView={collection}
+                            className={"text-surface-300 dark:text-surface-600"} />
+                        {`Edit ${property.name}`.toUpperCase()}
+                    </EntityPreviewContainer>
+                </div>}
+            </>}
+
+            <FieldHelperText includeDescription={includeDescription}
+                showError={showError}
+                error={error}
+                disabled={disabled}
+                property={property} />
+
+        </>
+    );
+}

package/src/form/field_bindings/ReferenceFieldBinding.tsx

@@ -0,0 +1,134 @@
+import React, { useCallback, useMemo } from "react";
+
+import { Entity, EntityCollection, EntityReference, FieldProps, Property, ReferenceProperty } from "@rebasepro/types";
+import { useEntitySelectionDialog, useCollectionRegistryController } from "../../hooks";
+import { ReadOnlyFieldBinding } from "./ReadOnlyFieldBinding";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
+import { EntityPreviewContainer, ErrorView } from "../../components";
+import { ReferencePreview } from "../../preview";
+import { getIconForProperty, IconForView } from "../../util";
+import { getReferenceFrom } from "@rebasepro/common";
+import { useClearRestoreValue } from "../useClearRestoreValue";
+import { cls } from "@rebasepro/ui";
+
+/**
+ * Field that opens a reference selection dialog.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export function ReferenceFieldBinding(props: FieldProps<ReferenceProperty>) {
+
+    if (typeof props.property.path !== "string") {
+        return <ReadOnlyFieldBinding {...props as FieldProps<Property>} />
+    }
+
+    return <ReferenceFieldBindingInternal {...props} />;
+
+}
+
+function ReferenceFieldBindingInternal({
+    propertyKey,
+    value,
+    setValue,
+    error,
+    showError,
+    isSubmitting,
+    disabled,
+    minimalistView,
+    touched,
+    autoFocus,
+    property,
+    includeDescription,
+    size = "medium"
+}: FieldProps<ReferenceProperty>) {
+    if (!property.path) {
+        throw new Error("Property path is required for ReferenceFieldBinding");
+    }
+
+    useClearRestoreValue({
+        property,
+        value,
+        setValue
+    });
+
+    const validValue = value && value.isEntityReference && value.isEntityReference();
+
+    const navigationController = useCollectionRegistryController();
+    const collection: EntityCollection | undefined = useMemo(() => {
+        return property.path ? navigationController.getCollection(property.path) : undefined;
+    }, [property.path]);
+
+    if (!collection) {
+        throw Error(`Couldn't find the corresponding collection for the path: ${property.path}`);
+    }
+
+    const onSingleEntitySelected = useCallback((e: Entity<any> | null) => {
+        setValue(e ? getReferenceFrom(e) : null);
+    }, [setValue]);
+
+    const referenceDialogController = useEntitySelectionDialog({
+        multiselect: false,
+        path: property.path,
+        collection,
+        onSingleEntitySelected,
+        selectedEntityIds: validValue ? [value.id] : undefined,
+        forceFilter: property.forceFilter
+    }
+    );
+
+    const onEntryClick = (e: React.SyntheticEvent) => {
+        e.preventDefault();
+        referenceDialogController.open();
+    };
+
+    return (
+        <>
+            {!minimalistView && <LabelWithIconAndTooltip
+                propertyKey={propertyKey}
+                icon={getIconForProperty(property, "small")}
+                required={property.validation?.required}
+                title={property.name ?? propertyKey}
+                className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"} />}
+
+            {!collection && <ErrorView
+                error={"The specified collection does not exist. Check console"} />}
+
+            {collection && <>
+
+                {value && <ReferencePreview
+                    disabled={!property.path}
+                    previewProperties={property.previewProperties}
+                    hover={!disabled}
+                    size={size}
+                    onClick={disabled || isSubmitting ? undefined : onEntryClick}
+                    reference={value}
+                    includeEntityLink={property.includeEntityLink}
+                    includeId={property.includeId}
+                />}
+
+                {!value && <div className="justify-center text-left">
+                    <EntityPreviewContainer className={cls("px-6 h-16 text-sm font-medium flex items-center gap-6",
+                        disabled || isSubmitting
+                            ? "text-surface-accent-500"
+                            : "cursor-pointer text-surface-accent-700 dark:text-surface-accent-300 hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800")}
+                        onClick={onEntryClick}
+                        size={"medium"}>
+                        <IconForView collectionOrView={collection}
+                            className={"text-surface-300 dark:text-surface-600"} />
+                        {`Edit ${property.name}`.toUpperCase()}
+                    </EntityPreviewContainer>
+                </div>}
+            </>}
+
+            <FieldHelperText includeDescription={includeDescription}
+                showError={showError}
+                error={error}
+                disabled={disabled}
+                property={property} />
+
+        </>
+    );
+
+}

package/src/form/field_bindings/RelationFieldBinding.tsx

@@ -0,0 +1,176 @@
+import React, { useCallback } from "react";
+import { Entity, FieldProps, RelationProperty } from "@rebasepro/types";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
+import { EntityPreviewContainer, ErrorView } from "../../components";
+import { getIconForProperty, IconForView } from "../../util";
+import { getRelationFrom, resolveRelationProperty } from "@rebasepro/common";
+
+import { useEntitySelectionDialog } from "../../hooks";
+import { cls } from "@rebasepro/ui";
+import { RelationPreview } from "../../preview";
+import { RelationSelector } from "../../components/RelationSelector";
+import { MultipleRelationFieldBinding } from "./MultipleRelationFieldBinding";
+
+export function RelationFieldBinding({
+    propertyKey,
+    value,
+    size,
+    error,
+    showError,
+    disabled,
+    isSubmitting,
+    property,
+    includeDescription,
+    setValue,
+    setFieldValue,
+    context,
+    customProps
+}: FieldProps<RelationProperty>) {
+
+    if (property.type !== "relation") {
+        throw Error("RelationFieldBinding expected a property containing a relation");
+    }
+    if (!context.collection?.relations) {
+        throw Error("RelationFieldBinding expected a collection with relations");
+    }
+    const resolvedProperty = resolveRelationProperty(property, context.collection?.relations)
+    const relation = resolvedProperty.relation;
+
+    const manyRelation = relation?.cardinality === "many";
+
+    // Inline selector mode
+    const widget = property.widget ?? "select";
+
+    if (widget === "select" && relation) {
+        const singleValue = (!manyRelation && value && !Array.isArray(value) && value.isEntityRelation && value.isEntityRelation()) ? value : null;
+        const multipleValue = (manyRelation && Array.isArray(value)) ? value : [];
+
+        const selectorSize: "small" | "medium" | undefined = size === "large" ? "medium" : size;
+
+        return (
+            <div className="">
+                <LabelWithIconAndTooltip
+                    propertyKey={propertyKey}
+                    icon={getIconForProperty(property, "small")}
+                    required={property.validation?.required}
+                    title={property.name ?? propertyKey}
+                    className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"} />
+
+                <RelationSelector
+                    relation={relation}
+                    value={manyRelation ? multipleValue : singleValue}
+                    onValueChange={(newVal) => {
+                        if (manyRelation) {
+                            setValue(Array.isArray(newVal) ? newVal : []);
+                        } else {
+                            setValue(!Array.isArray(newVal) ? (newVal ?? null) : null);
+                        }
+                    }}
+                    disabled={disabled || isSubmitting}
+                    forceFilter={property.forceFilter}
+                    size={selectorSize}
+                />
+
+                <FieldHelperText includeDescription={includeDescription}
+                    showError={showError}
+                    error={error}
+                    disabled={disabled}
+                    property={property} />
+            </div>
+        );
+    }
+
+    if (manyRelation) {
+        return <MultipleRelationFieldBinding
+            propertyKey={propertyKey}
+            value={Array.isArray(value) ? value : []}
+            error={error}
+            showError={showError}
+            disabled={disabled}
+            isSubmitting={isSubmitting}
+            property={property}
+            includeDescription={includeDescription}
+            setValue={setValue}
+            setFieldValue={setFieldValue}
+            context={context}
+            customProps={customProps}
+        />
+    } else {
+
+        const validValue = value && !Array.isArray(value) && value.isEntityRelation && value.isEntityRelation();
+
+        const collection = relation?.target();
+
+        if (!collection) {
+            throw Error(`Couldn't find the corresponding collection for the relation: ${propertyKey}`);
+        }
+
+        const onSingleEntitySelected = useCallback((e: Entity<any> | null) => {
+            setValue(e ? getRelationFrom(e) : null);
+        }, [setValue]);
+
+        const referenceDialogController = useEntitySelectionDialog({
+            multiselect: false,
+            path: collection.slug,
+            collection,
+            onSingleEntitySelected,
+            selectedEntityIds: validValue ? [value.id] : undefined,
+            forceFilter: property.forceFilter
+        }
+        );
+
+        const onEntryClick = (e: React.SyntheticEvent) => {
+            e.preventDefault();
+            referenceDialogController.open();
+        };
+
+        const usedRelation = Array.isArray(value) ? undefined : value;
+        return (
+            <>
+                <LabelWithIconAndTooltip
+                    propertyKey={propertyKey}
+                    icon={getIconForProperty(property, "small")}
+                    required={property.validation?.required}
+                    title={property.name ?? propertyKey}
+                    className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"} />
+
+                {!collection && <ErrorView
+                    error={"The specified collection does not exist. Check console"} />}
+
+                {collection && <>
+
+                    {usedRelation && <RelationPreview
+                        disabled={!usedRelation}
+                        previewProperties={property.previewProperties}
+                        hover={!disabled}
+                        size={size}
+                        onClick={disabled || isSubmitting ? undefined : onEntryClick}
+                        relation={usedRelation}
+                        includeEntityLink={property.includeEntityLink}
+                        includeId={property.includeId}
+                    />}
+
+                    {!value && <div className="justify-center text-left">
+                        <EntityPreviewContainer className={cls("px-6 h-16 text-sm font-medium flex items-center gap-6",
+                            disabled || isSubmitting
+                                ? "text-surface-accent-500"
+                                : "cursor-pointer text-surface-accent-700 dark:text-surface-accent-300 hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800")}
+                            onClick={onEntryClick}
+                            size={"medium"}>
+                            <IconForView collectionOrView={collection}
+                                className={"text-surface-300 dark:text-surface-600"} />
+                            {`Edit ${property.name}`.toUpperCase()}
+                        </EntityPreviewContainer>
+                    </div>}
+                </>}
+
+                <FieldHelperText includeDescription={includeDescription}
+                    showError={showError}
+                    error={error}
+                    disabled={disabled}
+                    property={property} />
+
+            </>
+        );
+    }
+}

package/src/form/field_bindings/RepeatFieldBinding.tsx

@@ -0,0 +1,136 @@
+import React, { useState } from "react";
+import { ArrayProperty, FieldProps, PropertyFieldBindingProps } from "@rebasepro/types";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
+import { ArrayContainer, ArrayEntryParams, ErrorBoundary } from "../../components";
+import { getArrayResolvedProperties, getDefaultValueFor, mergeDeep } from "@rebasepro/common";
+import { getIconForProperty } from "../../util";
+import { PropertyFieldBinding } from "../PropertyFieldBinding";
+import { ExpandablePanel, Typography } from "@rebasepro/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
+import { useAuthController } from "../../hooks";
+
+/**
+ * Generic array field that allows reordering and renders the child property
+ * as nodes.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export function RepeatFieldBinding({
+    propertyKey,
+    value,
+    error,
+    showError,
+    isSubmitting,
+    setValue,
+    setFieldValue,
+    minimalistView: minimalistViewProp,
+    property,
+    includeDescription,
+    underlyingValueHasChanged,
+    context,
+    disabled
+}: FieldProps<ArrayProperty>) {
+
+    const authController = useAuthController();
+
+    if (property.type !== "array" || !property.of || Array.isArray(property.of)) {
+        throw Error("RepeatFieldBinding misconfiguration. Property `type` is not `array`");
+    }
+
+    const minimalistView = minimalistViewProp || property.minimalistView;
+
+    if (!property.of)
+        throw Error("RepeatFieldBinding misconfiguration. Property `of` not set");
+
+    const resolvedProperties = getArrayResolvedProperties({
+        propertyValue: value,
+        propertyKey,
+        property,
+        ignoreMissingFields: false,
+        authController
+    })
+
+    const expanded = property.expanded === undefined ? true : property.expanded;
+    const ofProperty = property.of;
+
+    const [lastAddedId, setLastAddedId] = useState<number | undefined>();
+
+    useClearRestoreValue({
+        property,
+        value,
+        setValue
+    });
+
+    const buildEntry = ({
+        index,
+        internalId,
+        storedProps,
+        storeProps
+    }: ArrayEntryParams) => {
+        // @ts-ignore
+        const childProperty = resolvedProperties[index] ?? ofProperty;
+        const fieldProps: PropertyFieldBindingProps = {
+            propertyKey: `${propertyKey}.${index}`,
+            disabled,
+            property: storedProps ? mergeDeep(childProperty, storedProps) : childProperty,
+            onPropertyChange: storeProps,
+            includeDescription,
+            underlyingValueHasChanged,
+            context,
+            partOfArray: true,
+            minimalistView: false,
+            autoFocus: internalId === lastAddedId,
+        };
+        return <ErrorBoundary>
+            <PropertyFieldBinding {...fieldProps} index={index} />
+        </ErrorBoundary>;
+    };
+
+    const canAddElements = !property.disabled && !isSubmitting && !disabled && (property.canAddElements || property.canAddElements === undefined);
+    const sortable = property.sortable === undefined ? true : property.sortable;
+    const arrayContainer = <ArrayContainer droppableId={propertyKey}
+        addLabel={property.name ? "Add entry to " + property.name : "Add entry"}
+        value={value ?? []}
+        buildEntry={buildEntry}
+        onInternalIdAdded={setLastAddedId}
+        disabled={isSubmitting || Boolean(property.disabled)}
+        canAddElements={canAddElements}
+        sortable={sortable}
+        newDefaultEntry={getDefaultValueFor(property.of)}
+        onValueChange={(value) => setFieldValue(propertyKey, value)}
+        className={property.widthPercentage !== undefined ? "mt-8" : undefined}
+    />;
+
+    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>}
+    </>);
+
+    return (
+
+        <>
+
+            {!minimalistView && <ExpandablePanel initiallyExpanded={expanded}
+                innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}
+                title={title}>
+                {arrayContainer}
+            </ExpandablePanel>}
+
+            {minimalistView && arrayContainer}
+
+            <FieldHelperText includeDescription={includeDescription}
+                showError={showError}
+                error={error ? (typeof error === "string" ? error : "A property of this array/repeat has an error") : undefined}
+                disabled={disabled}
+                property={property} />
+
+        </>
+    );
+}

package/src/form/field_bindings/SelectFieldBinding.tsx

@@ -0,0 +1,107 @@
+import React, { useCallback } from "react";
+
+import { FieldProps, NumberProperty, StringProperty } from "@rebasepro/types";
+import { FieldHelperText, LabelWithIcon } from "../components";
+import { EnumValuesChip } from "../../preview";
+import { getIconForProperty } from "../../util";
+import { CloseIcon, cls, IconButton, Select, SelectItem } from "@rebasepro/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
+import { PropertyIdCopyTooltip } from "../../components";
+import { resolveEnumValues } from "@rebasepro/common";
+
+/**
+ * If `enumValues` are set in the string config, this field renders a select
+ * where each option is a colored chip.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export function SelectFieldBinding({
+    propertyKey,
+    value,
+    setValue,
+    error,
+    showError,
+    disabled,
+    autoFocus,
+    touched,
+    property,
+    includeDescription,
+    size = "large"
+}: FieldProps<StringProperty | NumberProperty>) {
+
+    const enumValues = resolveEnumValues(property.enum ?? []);
+
+    useClearRestoreValue({
+        property,
+        value,
+        setValue
+    });
+
+    const handleClearClick = useCallback((e: React.MouseEvent) => {
+        e.stopPropagation();
+        e.preventDefault();
+        setValue(null);
+    }, [setValue]);
+
+    return (
+        <>
+
+            <Select
+                value={value !== undefined && value != null ? value.toString() : ""}
+                disabled={disabled}
+                size={size}
+                fullWidth={true}
+                position="item-aligned"
+                inputClassName={cls("w-full")}
+                label={
+                    <PropertyIdCopyTooltip propertyKey={propertyKey}>
+                        <LabelWithIcon
+                            icon={getIconForProperty(property, "small")}
+                            required={property.validation?.required}
+                            title={property.name ?? propertyKey}
+                            className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5 my-0"}
+                        />
+                    </PropertyIdCopyTooltip>}
+                endAdornment={
+                    property.clearable && !disabled && <IconButton
+                        size="small"
+                        onClick={handleClearClick}>
+                        <CloseIcon size={"small"} />
+                    </IconButton>
+                }
+                onValueChange={(updatedValue: string) => {
+                    const newValue = updatedValue
+                        ? (property.type === "number" ? parseFloat(updatedValue) : updatedValue)
+                        : null;
+                    return setValue(newValue);
+                }}
+                renderValue={(enumKey: any) => {
+                    return <EnumValuesChip
+                        enumKey={enumKey}
+                        enumValues={enumValues}
+                        size={size} />;
+                }}
+            >
+                {enumValues && enumValues.map((option) => {
+                    return <SelectItem
+                        key={option.id}
+                        value={String(option.id)}>
+                        <EnumValuesChip
+                            enumKey={String(option.id)}
+                            enumValues={enumValues}
+                            size={size} />
+                    </SelectItem>
+                })}
+            </Select>
+
+            <FieldHelperText includeDescription={includeDescription}
+                showError={showError}
+                error={error}
+                disabled={disabled}
+                property={property} />
+
+        </>
+    );
+}