@rebasepro/core 0.0.1-canary.0

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -0,0 +1,156 @@
+import React from "react";
+import { FieldProps, MapProperty, Properties, PropertyFieldBindingProps } from "@rebasepro/types";
+
+import { ErrorBoundary } from "../../components";
+import { getIconForProperty } from "../../util";
+import { isHidden, isReadOnly, pick } from "@rebasepro/common";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
+import { PropertyFieldBinding } from "../PropertyFieldBinding";
+import { cls, ExpandablePanel, InputLabel, Select, SelectItem } from "@rebasepro/ui";
+
+/**
+ * Field that renders the children property fields
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export function MapFieldBinding({
+    propertyKey,
+    value,
+    showError,
+    error,
+    disabled,
+    property,
+    partOfArray,
+    minimalistView: minimalistViewProp,
+    includeDescription,
+    autoFocus,
+    context,
+    onPropertyChange
+}: FieldProps<MapProperty>) {
+
+    const pickOnlySomeKeys = property.pickOnlySomeKeys || false;
+    const expanded = property.expanded === undefined ? true : property.expanded;
+    const minimalistView = minimalistViewProp || property.minimalistView;
+
+    if (!property.properties) {
+        throw Error(`You need to specify a 'properties' prop (or specify a custom field) in your map property ${propertyKey}`);
+    }
+
+    let mapProperties: Properties;
+    if (pickOnlySomeKeys) {
+        if (value) {
+            mapProperties = pick(property.properties,
+                ...Object.keys(value)
+                    .filter(key => key in property.properties!)
+            ) as Properties;
+        } else {
+            mapProperties = {};
+        }
+    } else {
+        mapProperties = property.properties;
+    }
+
+    const mapFormView = <>
+        <div
+            className={cls("py-1 flex flex-col space-y-2", minimalistView && property.widthPercentage !== undefined ? "mt-8" : undefined)}>
+            {Object.entries(mapProperties)
+                .filter(([_, property]) => !isHidden(property))
+                .map(([entryKey, childProperty], index) => {
+                    const thisDisabled = isReadOnly(childProperty) || Boolean(childProperty.disabled);
+                    const fieldBindingProps: PropertyFieldBindingProps<any> = {
+                        propertyKey: `${propertyKey}.${entryKey}`,
+                        disabled: disabled || thisDisabled,
+                        property: childProperty,
+                        includeDescription,
+                        context,
+                        partOfArray: false,
+                        minimalistView: false,
+                        autoFocus: autoFocus && index === 0,
+                        onPropertyChange: function (updatedProperty) {
+                            onPropertyChange?.({
+                                properties: {
+                                    [entryKey]: updatedProperty
+                                }
+                            } as Partial<MapProperty>);
+                        }
+                    };
+
+                    return (
+                        <div key={`map-${propertyKey}-${index}`} className={"relative"}>
+                            <ErrorBoundary>
+                                <PropertyFieldBinding
+                                    {...fieldBindingProps} />
+                            </ErrorBoundary>
+                        </div>
+                    );
+                }
+                )
+            }
+        </div>
+
+        {/*{pickOnlySomeKeys && buildPickKeysSelect(disabled, property.properties, setValue, value)}*/}
+
+    </>
+        ;
+
+    return (
+        <ErrorBoundary>
+
+            {!minimalistView && <ExpandablePanel initiallyExpanded={expanded}
+                onExpandedChange={(expanded) => {
+                    onPropertyChange?.({
+                        expanded
+                    });
+                }}
+                className={property.widthPercentage !== undefined ? "mt-8" : undefined}
+                innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2 bg-white dark:bg-surface-900"}
+                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"} />}>
+                {mapFormView}
+            </ExpandablePanel>}
+
+            {minimalistView && mapFormView}
+
+            <FieldHelperText includeDescription={includeDescription}
+                showError={showError ?? false}
+                error={error && !partOfArray ? (typeof error === "string" ? error : "A property of this map has an error") : undefined}
+                disabled={disabled}
+                property={property} />
+
+        </ErrorBoundary>
+    );
+}
+
+const buildPickKeysSelect = (disabled: boolean, properties: Properties, setValue: (value: any) => void, value: any) => {
+
+    const keys = Object.keys(properties)
+        .filter((key) => !value || !(key in value));
+
+    const handleAddProperty = (updatedValue: string | string[]) => {
+        setValue({
+            ...value,
+            [updatedValue as string]: null
+        });
+    };
+
+    if (!keys.length) return <></>;
+
+    return <div className={"m-4"}>
+        <InputLabel>Add property</InputLabel>
+        <Select
+            value={""}
+            fullWidth={true}
+            disabled={disabled}
+            onValueChange={handleAddProperty}
+            renderValue={(key) => (properties as Properties)[key].name || key}>
+            {keys.map((key) => <SelectItem key={key}
+                value={key}>{(properties as Properties)[key].name || key}</SelectItem>)}
+        </Select>
+    </div>;
+};

package/src/form/field_bindings/MarkdownEditorFieldBinding.tsx

@@ -0,0 +1,146 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import {
+    ArrayProperty,
+    FieldHelperText,
+    FieldProps,
+    getIconForProperty,
+    LabelWithIconAndTooltip,
+    StringProperty,
+    useAuthController,
+    useStorageSource
+} from "../../index";
+import { cls, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundMixin } from "@rebasepro/ui";
+import { RebaseEditor, RebaseEditorProps } from "@rebasepro/editor";
+import { randomString, resolveStorageFilenameString, resolveStoragePathString } from "@rebasepro/common";
+
+interface MarkdownEditorFieldProps {
+    highlight?: { from: number, to: number };
+    editorProps?: Partial<RebaseEditorProps>
+}
+
+export function MarkdownEditorFieldBinding({
+    property,
+    propertyKey,
+    value,
+    setValue,
+    includeDescription,
+    showError,
+    error,
+    minimalistView,
+    disabled: disabledProp,
+    isSubmitting,
+    context,
+    customProps,
+}: FieldProps<StringProperty, MarkdownEditorFieldProps>) {
+
+    const authController = useAuthController();
+    const disabled = disabledProp || isSubmitting;
+    const highlight = customProps?.highlight;
+    const editorProps = customProps?.editorProps;
+    const storageSource = useStorageSource();
+    const storage = property.storage;
+
+    const entityValues = context.values;
+    const entityId = context.entityId;
+    const path = context.path;
+
+    const [fieldVersion, setFieldVersion] = useState(0);
+    const internalValue = useRef<string | null>(value);
+
+    const onContentChange = useCallback((content: string) => {
+        if (content === value || (value === null && content === "")) {
+            return;
+        }
+        internalValue.current = content;
+        setValue(content);
+    }, [setValue]);
+
+    useEffect(() => {
+        if (internalValue.current !== value) {
+            internalValue.current = value;
+            setFieldVersion(fieldVersion + 1);
+        }
+    }, [value]);
+
+    const fileNameBuilder = useCallback(async (file: File) => {
+        if (storage?.fileName) {
+            const fileName = await resolveStorageFilenameString({
+                input: storage.fileName,
+                storage,
+                values: entityValues,
+                entityId,
+                path,
+                property: property,
+                file,
+                propertyKey
+            });
+            if (!fileName || fileName.length === 0) {
+                throw Error("You need to return a valid filename");
+            }
+            return fileName;
+        }
+        return randomString() + "_" + file.name;
+    }, [entityId, entityValues, path, property, propertyKey, storage]);
+
+    const storagePathBuilder = useCallback((file: File) => {
+        if (!storage) return "/";
+        return resolveStoragePathString({
+            input: storage.storagePath,
+            storage,
+            values: entityValues,
+            entityId,
+            path,
+            property,
+            file,
+            propertyKey
+        }) ?? "/";
+    }, [entityId, entityValues, path, property, propertyKey, storage]);
+
+    const editor = <RebaseEditor
+        content={value}
+        onMarkdownContentChange={onContentChange}
+        version={context.formex.version + fieldVersion}
+        highlight={highlight}
+        disabled={disabled}
+        handleImageUpload={async (file: File) => {
+            const storagePath = storagePathBuilder(file);
+            const fileName = await fileNameBuilder(file);
+            const result = await storageSource.uploadFile({
+                file,
+                fileName,
+                path: storagePath,
+            });
+            const downloadConfig = await storageSource.getDownloadURL(result.path);
+            const url = downloadConfig.url;
+            if (!url) {
+                throw new Error("Error uploading image");
+            }
+            return url;
+        }}
+        {...editorProps}
+    />;
+
+    if (minimalistView)
+        return editor;
+
+    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"} />
+            <div
+                className={cls("rounded-md", fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin)}>
+                {editor}
+            </div>
+            <FieldHelperText includeDescription={includeDescription}
+                showError={showError}
+                error={error}
+                property={property} />
+        </>
+
+    );
+
+}

package/src/form/field_bindings/MultiSelectFieldBinding.tsx

@@ -0,0 +1,120 @@
+import React, { useCallback } from "react";
+
+import { ArrayProperty, FieldProps, Property } from "@rebasepro/types";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
+import { EnumValuesChip } from "../../preview";
+import { getIconForProperty } from "../../util";
+import { enumToObjectEntries, getLabelOrConfigFrom } from "@rebasepro/common";
+import { CloseIcon, MultiSelect, MultiSelectItem } from "@rebasepro/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
+
+/**
+ * This fields renders a dropdown with multiple selection.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export function MultiSelectFieldBinding({
+    propertyKey,
+    value,
+    setValue,
+    error,
+    showError,
+    disabled,
+    property,
+    includeDescription,
+    size = "large",
+    autoFocus
+}: FieldProps<ArrayProperty, any, any>) {
+
+    const of = property.of;
+    if (!of) {
+        throw Error("Using wrong component ArrayEnumSelect");
+    }
+
+    if (Array.isArray(of)) {
+        throw Error("Using array properties instead of single one in `of` in ArrayProperty");
+    }
+
+    if (of.type !== "string" && of.type !== "number") {
+        throw Error("Field misconfiguration: array field of type string or number");
+    }
+
+    const enumValues = of.enum ? enumToObjectEntries(of.enum) : undefined;
+    if (!enumValues) {
+        console.error(property);
+        throw Error("Field misconfiguration: array field of type string or number needs to have enumValues");
+    }
+
+    useClearRestoreValue({
+        property,
+        value,
+        setValue
+    });
+
+    const validValue = !!value && Array.isArray(value);
+
+    const renderValue = useCallback((enumKey: string, list: boolean) => {
+        const enumValue = enumKey !== undefined ? getLabelOrConfigFrom(enumValues, enumKey) : undefined;
+        return <EnumValuesChip
+            enumKey={enumKey}
+            enumValues={enumValues}
+            size={"medium"}
+            key={enumKey}>
+            {enumValue?.label ?? enumKey}
+            {!list && <button
+                className="ml-1 ring-offset-background rounded-full outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                onMouseDown={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }}
+                onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setValue((value ?? []).filter(v => v !== enumKey));
+                }}
+            >
+                <CloseIcon size="smallest" />
+            </button>}
+        </EnumValuesChip>;
+    }, [enumValues, setValue, value]);
+
+    return (
+        <>
+            <MultiSelect
+                className={"w-full mt-2"}
+                size={size}
+                value={validValue ? value.map((v) => v?.toString()) : []}
+                disabled={disabled}
+                modalPopover={true}
+                label={<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"} />}
+                onValueChange={(updatedValue: string[]) => {
+                    let newValue;
+                    if (of && (of as Property)?.type === "number") {
+                        newValue = updatedValue ? (updatedValue as string[]).map((e) => parseFloat(e)) : [];
+                    } else {
+                        newValue = updatedValue;
+                    }
+                    return setValue(newValue);
+                }}>
+                {enumValues.map((enumValue) => String(enumValue.id)).map((enumKey) => (
+                    <MultiSelectItem key={enumKey} value={enumKey}>
+                        {renderValue(enumKey, true)}
+                    </MultiSelectItem>))}
+            </MultiSelect>
+
+            <FieldHelperText includeDescription={includeDescription}
+                showError={showError}
+                error={error}
+                disabled={disabled}
+                property={property} />
+
+        </>
+    );
+}

package/src/form/field_bindings/MultipleRelationFieldBinding.tsx

@@ -0,0 +1,151 @@
+import React, { useCallback } from "react";
+import { Entity, FieldProps, RelationProperty } from "@rebasepro/types";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
+import { ArrayContainer, ArrayEntryParams, ErrorView } from "../../components";
+import { getIconForProperty } from "../../util";
+import { getRelationFrom, resolveRelationProperty } from "@rebasepro/common";
+
+import { useEntitySelectionDialog } from "../../hooks";
+import { Button, cls, EditIcon, ExpandablePanel, fieldBackgroundMixin, Typography } from "@rebasepro/ui";
+import { RelationPreview } from "../../preview";
+
+/**
+ * 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 MultipleRelationFieldBinding({
+    propertyKey,
+    value: valueProp,
+    error,
+    showError,
+    disabled,
+    isSubmitting,
+    property,
+    includeDescription,
+    setValue,
+    setFieldValue,
+    context
+}: FieldProps<RelationProperty>) {
+
+    const value = Array.isArray(valueProp) ? valueProp : [];
+
+    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;
+    if (!relation)
+        throw Error(
+            "Property relation is required for MultipleRelationFieldBinding"
+        )
+
+    const selectedEntityIds = value && Array.isArray(value) ? value.map((ref) => ref.id) : [];
+    const collection = relation.target();
+
+    const onMultipleEntitiesSelected = useCallback((entities: Entity<any>[]) => {
+        setValue(entities.map(e => getRelationFrom(e)));
+    }, [setValue]);
+
+    const referenceDialogController = useEntitySelectionDialog({
+        multiselect: true,
+        path: collection.slug,
+        collection,
+        onMultipleEntitiesSelected,
+        selectedEntityIds,
+        forceFilter: property.forceFilter
+    }
+    );
+
+    const onEntryClick = (e: React.SyntheticEvent) => {
+        e.preventDefault();
+        referenceDialogController.open();
+    };
+
+    const buildEntry = useCallback(({
+        index,
+        internalId,
+        storedProps,
+        storeProps
+    }: ArrayEntryParams) => {
+        const entryValue = value && Array.isArray(value) && value.length > index ? value[index] : undefined;
+        if (!entryValue)
+            return <div>Internal ERROR</div>;
+        return (
+            <RelationPreview
+                key={internalId}
+                previewProperties={property.previewProperties}
+                size={"medium"}
+                onClick={onEntryClick}
+                hover={!disabled}
+                relation={entryValue}
+                includeId={property.includeId}
+                includeEntityLink={property.includeEntityLink}
+            />
+        );
+    }, [relation, property.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 ? "Add reference to " + property.name : "Add reference"}
+                newDefaultEntry={null}
+                onValueChange={(value) => setFieldValue(propertyKey, value)}
+            />
+
+            <Button
+                className="ml-3.5 my-4 justify-center text-left"
+                variant="text"
+                color="primary"
+                disabled={isSubmitting}
+                onClick={onEntryClick}>
+                <EditIcon size={"small"} />
+                Edit {property.name}
+            </Button>
+        </div>}
+    </>;
+
+    return (
+        <>
+
+            <ExpandablePanel
+                titleClassName={fieldBackgroundMixin}
+                innerClassName={cls("px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2", fieldBackgroundMixin)}
+                title={title}>
+                {body}
+            </ExpandablePanel>
+
+
+            <FieldHelperText includeDescription={includeDescription}
+                showError={showError}
+                error={error}
+                disabled={disabled}
+                property={property} />
+
+        </>
+    );
+}

package/src/form/field_bindings/ReadOnlyFieldBinding.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+
+import { FieldProps, Property } from "@rebasepro/types";
+
+import { PropertyPreview } from "../../preview";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
+import { ErrorBoundary } from "../../components";
+import { getIconForProperty } from "../../util";
+import { cls, paperMixin } from "@rebasepro/ui";
+
+/**
+ *
+ * Simply render the non-editable preview of a 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 ReadOnlyFieldBinding({
+    propertyKey,
+    value,
+    error,
+    showError,
+    minimalistView,
+    property,
+    includeDescription,
+    context
+}: FieldProps<Property>) {
+
+    // if (!context.entityId)
+    //     throw new Error("ReadOnlyFieldBinding: Entity id is null");
+
+    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"} />
+            }
+
+            <div
+                className={cls(paperMixin, "w-full min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar")}>
+
+                <ErrorBoundary>
+                    <PropertyPreview propertyKey={propertyKey}
+                        value={value}
+                        property={property}
+                        size={"medium"} />
+                </ErrorBoundary>
+
+            </div>
+
+            <FieldHelperText includeDescription={includeDescription}
+                showError={showError}
+                error={error}
+                property={property} />
+
+        </>
+    );
+}