@rebasepro/core 0.0.1-canary.0

package/src/form/field_bindings/UserSelectFieldBinding.tsx

@@ -0,0 +1,96 @@
+import React, { useCallback } from "react";
+
+import { FieldHelperText, LabelWithIcon } from "../components";
+import { getIconForProperty } from "../../util";
+import { CloseIcon, cls, IconButton, Select, SelectItem } from "@rebasepro/ui";
+import { PropertyIdCopyTooltip } from "../../components";
+import { useInternalUserManagementController } from "../../hooks";
+import { UserDisplay } from "../../components/UserDisplay";
+import { FieldProps, StringProperty, User } from "@rebasepro/types";
+
+type UserSelectProps = FieldProps<StringProperty>;
+
+/**
+ * Field binding for selecting a user from the internal user management system.
+ * Renders a select dropdown with user information including name and email.
+ *
+ * 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,
+    size = "large"
+}: UserSelectProps) {
+
+    const userManagementContext = useInternalUserManagementController<User>();
+    const users = userManagementContext?.users ?? [];
+    const getUser = userManagementContext?.getUser;
+
+    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}
+                            className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5 my-0"}
+                        />
+                    </PropertyIdCopyTooltip>}
+                endAdornment={
+                    property.clearable && !disabled && value && <IconButton
+                        size="small"
+                        onClick={handleClearClick}>
+                        <CloseIcon size={"small"} />
+                    </IconButton>
+                }
+                onValueChange={(updatedValue: string) => {
+                    const newValue = updatedValue || null;
+                    return setValue(newValue);
+                }}
+                renderValue={(userId: string) => {
+                    const user = users.find((u: User) => u.uid === userId) || getUser?.(userId) || null;
+                    return <UserDisplay user={user} />;
+                }}
+            >
+                {users && users.map((user: User) => {
+                    return <SelectItem
+                        key={user.uid}
+                        value={user.uid}>
+                        <UserDisplay user={user} />
+                    </SelectItem>
+                })}
+            </Select>
+
+            <FieldHelperText includeDescription={includeDescription}
+                showError={showError}
+                error={error}
+                disabled={disabled}
+                property={property} />
+
+        </>
+    );
+}

package/src/form/index.tsx

@@ -0,0 +1,27 @@
+export {
+    EntityForm,
+    yupToFormErrors,
+} from "./EntityForm";
+// EntityFormProps is exported from @rebasepro/types
+
+export { SelectFieldBinding } from "./field_bindings/SelectFieldBinding";
+export { MultiSelectFieldBinding } from "./field_bindings/MultiSelectFieldBinding";
+export { ArrayOfReferencesFieldBinding } from "./field_bindings/ArrayOfReferencesFieldBinding";
+export { StorageUploadFieldBinding } from "./field_bindings/StorageUploadFieldBinding";
+export { TextFieldBinding } from "./field_bindings/TextFieldBinding";
+export { SwitchFieldBinding } from "./field_bindings/SwitchFieldBinding";
+export { DateTimeFieldBinding } from "./field_bindings/DateTimeFieldBinding";
+export { ReferenceFieldBinding } from "./field_bindings/ReferenceFieldBinding";
+export { ReferenceAsStringFieldBinding } from "./field_bindings/ReferenceAsStringFieldBinding";
+export { MapFieldBinding } from "./field_bindings/MapFieldBinding";
+export { KeyValueFieldBinding } from "./field_bindings/KeyValueFieldBinding";
+export { RepeatFieldBinding } from "./field_bindings/RepeatFieldBinding";
+export { BlockFieldBinding } from "./field_bindings/BlockFieldBinding";
+export { ReadOnlyFieldBinding } from "./field_bindings/ReadOnlyFieldBinding";
+export { MarkdownEditorFieldBinding } from "./field_bindings/MarkdownEditorFieldBinding";
+export { ArrayCustomShapedFieldBinding } from "./field_bindings/ArrayCustomShapedFieldBinding";
+
+export * from "./components";
+
+export { PropertyFieldBinding } from "./PropertyFieldBinding";
+export * from "./useClearRestoreValue";

package/src/form/useClearRestoreValue.tsx

@@ -0,0 +1,35 @@
+import { useEffect, useRef } from "react";
+import { Property } from "@rebasepro/types";
+
+/**
+ * Hook we use to restore a value after it has been cleared
+ * @param property
+ * @param value
+ * @param setValue
+ * @ignore
+ */
+export function useClearRestoreValue<T>({
+    property,
+    value,
+    setValue
+}:
+    {
+        property: Property,
+        value: T | null,
+        setValue: (value: T | null, shouldValidate?: boolean) => void
+    }) {
+
+    const clearedValueRef = useRef<T | null>(null);
+    useEffect(() => {
+        const shouldClearValueIfDisabled = typeof property.disabled === "object" && Boolean(property.disabled.clearOnDisabled);
+        if (shouldClearValueIfDisabled) {
+            if (value != null) {
+                clearedValueRef.current = value;
+                setValue(null);
+            }
+        } else if (clearedValueRef.current) {
+            setValue(clearedValueRef.current);
+            clearedValueRef.current = null;
+        }
+    }, [property]);
+}

package/src/form/validation.ts

@@ -0,0 +1,532 @@
+import {
+    ArrayProperty,
+    MapProperty,
+    NumberProperty,
+    Property,
+    BooleanProperty,
+    DateProperty,
+    GeopointProperty,
+    Properties,
+    ReferenceProperty,
+    RelationProperty,
+    StringProperty
+} from "@rebasepro/types";
+import * as yup from "yup";
+import { AnySchema, ArraySchema, BooleanSchema, DateSchema, NumberSchema, ObjectSchema, StringSchema } from "yup";
+import { enumToObjectEntries, getValueInPath, hydrateRegExp, isPropertyBuilder } from "@rebasepro/common";
+
+// Add custom unique function for array values
+declare module "yup" {
+    // tslint:disable-next-line
+    interface ArraySchema<TIn extends any[] | null | undefined, TContext, TDefault = undefined, TFlags extends yup.Flags = ""> {
+        uniqueInArray(mapper: (a: any) => any, message: string): ArraySchema<TIn, TContext, TDefault, TFlags>;
+    }
+}
+yup.addMethod(yup.array, "uniqueInArray", function (
+    mapper = (a: any) => a,
+    message: string
+) {
+    return this.test("uniqueInArray", message, values => {
+        return !values || values.length === new Set(values.map(mapper)).size;
+    });
+});
+
+export type CustomFieldValidator = (props: {
+    name: string,
+    value: any,
+    property: Property,
+    entityId?: string | number,
+    parentProperty?: MapProperty | ArrayProperty,
+}) => Promise<boolean>;
+
+interface PropertyContext<P extends Property> {
+    property: P,
+    parentProperty?: MapProperty | ArrayProperty,
+    entityId?: string | number,
+    customFieldValidator?: CustomFieldValidator,
+    name?: any
+}
+
+export function getYupEntitySchema<M extends Record<string, any>>(
+    entityId: string | number | undefined,
+    properties: Properties,
+    customFieldValidator?: CustomFieldValidator): ObjectSchema<any> {
+    const objectSchema: any = {};
+    Object.entries(properties as Record<string, Property>)
+        .forEach(([name, property]) => {
+            const isStringOrNumber = property.type === "string" || property.type === "number";
+            const isIdAndAuto = isStringOrNumber && "isId" in property && typeof property.isId === "string" && property.isId !== "manual";
+            if (entityId === undefined && isIdAndAuto) {
+                return; // Skip validation for auto-generated IDs on new entities
+            }
+            objectSchema[name] = mapPropertyToYup({
+                property: property as Property,
+                customFieldValidator,
+                name,
+                entityId
+            });
+        });
+    return yup.object().shape(objectSchema);
+}
+
+export function mapPropertyToYup(propertyContext: PropertyContext<Property>): AnySchema<unknown> {
+
+    const property = propertyContext.property;
+    if (isPropertyBuilder(property)) {
+        console.error("Error in property", propertyContext);
+        // Return a permissive schema with an error message instead of crashing
+        return yup.mixed().test(
+            "property-builder-error",
+            "Invalid property configuration: property builder should be resolved",
+            () => false
+        );
+    }
+
+    if (property.type === "string") {
+        return getYupStringSchema(propertyContext as PropertyContext<StringProperty>);
+    } else if (property.type === "number") {
+        return getYupNumberSchema(propertyContext as PropertyContext<NumberProperty>);
+    } else if (property.type === "boolean") {
+        return getYupBooleanSchema(propertyContext as PropertyContext<BooleanProperty>);
+    } else if (property.type === "map") {
+        return getYupMapObjectSchema(propertyContext as PropertyContext<MapProperty>);
+    } else if (property.type === "array") {
+        return getYupArraySchema(propertyContext as PropertyContext<ArrayProperty>);
+    } else if (property.type === "date") {
+        return getYupDateSchema(propertyContext as PropertyContext<DateProperty>);
+    } else if (property.type === "geopoint") {
+        return getYupGeoPointSchema(propertyContext as PropertyContext<GeopointProperty>);
+    } else if (property.type === "reference") {
+        return getYupReferenceSchema(propertyContext as PropertyContext<ReferenceProperty>);
+    } else if (property.type === "relation") {
+        return getYupRelationSchema(propertyContext as PropertyContext<RelationProperty>);
+    }
+
+    // Log the error but don't crash the form - return a permissive schema with an error message
+    console.error("Unsupported data type in yup mapping", property);
+    const dataType = (property as any).dataType ?? "unknown";
+    return yup.mixed().test(
+        "unsupported-data-type",
+        `Unsupported data type: ${dataType}`,
+        () => false
+    );
+}
+
+export function getYupMapObjectSchema({
+    property,
+    entityId,
+    customFieldValidator,
+    name
+}: PropertyContext<MapProperty>): ObjectSchema<any> {
+    const objectSchema: any = {};
+    const validation = property.validation;
+    if (property.properties)
+        Object.entries(property.properties).forEach(([childName, childProperty]: [string, Property]) => {
+            try {
+                objectSchema[childName] = mapPropertyToYup({
+                    property: childProperty,
+                    parentProperty: property as MapProperty,
+                    customFieldValidator,
+                    name: `${name}[${childName}]`,
+                    entityId
+                });
+            } catch (e: unknown) {
+                console.error(`Error creating validation schema for property ${childName}:`, e);
+                objectSchema[childName] = yup.mixed().test(
+                    "validation-error",
+                    `Validation error: ${e instanceof Error ? e.message : "Unknown error"}`,
+                    () => false
+                );
+            }
+        });
+
+    const shape = yup.object().shape(objectSchema);
+    if (validation?.required) {
+        // In yup v0.x, .required().nullable(true) allowed null values
+        // To match this behavior: reject undefined but allow null
+        return shape.nullable().test(
+            "required",
+            validation?.requiredMessage ? validation.requiredMessage : "Required",
+            (value) => value !== undefined
+        ) as any;
+    }
+    return yup.object().shape(shape.fields).default(undefined).nullable().optional() as any;
+}
+
+function getYupStringSchema({
+    property,
+    parentProperty,
+    customFieldValidator,
+    name,
+    entityId
+}: PropertyContext<StringProperty>): StringSchema {
+    let schema: StringSchema<any> = yup.string().nullable();
+    const validation = property.validation;
+
+    const isRequired = validation?.required || property.isId === true || property.isId === "manual";
+
+    if (property.enum) {
+        if (isRequired) {
+            schema = schema.test(
+                "required",
+                validation?.requiredMessage ? validation.requiredMessage : "Required",
+                (value) => value !== undefined && value !== null && value !== ""
+            );
+        }
+        const entries = enumToObjectEntries(property.enum);
+        const oneOfValues = (isRequired ? entries : [...entries, null])
+            .map((enumValueConfig) => enumValueConfig?.id ?? null);
+        schema = schema.oneOf(oneOfValues);
+    }
+
+    if (isRequired && !property.enum) {
+        schema = schema.test(
+            "required",
+            validation?.requiredMessage ? validation.requiredMessage : "Required",
+            (value) => value !== undefined && value !== null && value !== ""
+        );
+    }
+
+    if (validation) {
+        if (validation.unique && customFieldValidator && name)
+            schema = schema.test("unique", "This value already exists and should be unique",
+                (value, context) =>
+                    customFieldValidator({
+                        name,
+                        property,
+                        parentProperty,
+                        value,
+                        entityId
+                    }));
+        if (validation.min || validation.min === 0) schema = schema.min(validation.min, `${property.name} must be min ${validation.min} characters long`);
+        if (validation.max || validation.max === 0) schema = schema.max(validation.max, `${property.name} must be max ${validation.max} characters long`);
+        if (validation.matches) {
+            const regExp = typeof validation.matches === "string" ? hydrateRegExp(validation.matches) : validation.matches;
+            if (regExp) {
+                schema = schema.matches(regExp, validation.matchesMessage ? { message: validation.matchesMessage } : undefined)
+            }
+        }
+        if (validation.trim) schema = schema.trim();
+        if (validation.lowercase) schema = schema.lowercase();
+        if (validation.uppercase) schema = schema.uppercase();
+        if (property.email) schema = schema.email(`${property.name} must be an email`);
+        if (property.url) {
+            if (!property.storage || property.storage?.storeUrl) {
+                schema = schema.url(`${property.name} must be a url`);
+            } else {
+                console.warn(`Property ${property.name} has a url validation but its storage configuration is not set to store urls`);
+            }
+        }
+    }
+    return schema;
+}
+
+function getYupNumberSchema({
+    property,
+    parentProperty,
+    customFieldValidator,
+    name,
+    entityId
+}: PropertyContext<NumberProperty>): NumberSchema {
+    const validation = property.validation;
+    let schema: NumberSchema<any> = yup.number().nullable().typeError("Must be a number");
+
+    const isRequired = validation?.required || property.isId === true || property.isId === "manual";
+
+    if (isRequired) {
+        schema = schema.test(
+            "required",
+            validation?.requiredMessage ? validation.requiredMessage : "Required",
+            (value) => value !== undefined && value !== null
+        );
+    }
+
+    if (validation) {
+        if (validation.unique && customFieldValidator && name)
+            schema = schema.test("unique",
+                "This value already exists and should be unique",
+                (value) => customFieldValidator({
+                    name,
+                    property,
+                    parentProperty,
+                    value,
+                    entityId
+                }));
+        if (validation.min || validation.min === 0) schema = schema.min(validation.min, `${property.name} must be higher or equal to ${validation.min}`);
+        if (validation.max || validation.max === 0) schema = schema.max(validation.max, `${property.name} must be lower or equal to ${validation.max}`);
+        if (validation.lessThan || validation.lessThan === 0) schema = schema.lessThan(validation.lessThan, `${property.name} must be higher than ${validation.lessThan}`);
+        if (validation.moreThan || validation.moreThan === 0) schema = schema.moreThan(validation.moreThan, `${property.name} must be lower than ${validation.moreThan}`);
+        if (validation.positive) schema = schema.positive(`${property.name} must be positive`);
+        if (validation.negative) schema = schema.negative(`${property.name} must be negative`);
+        if (validation.integer) schema = schema.integer(`${property.name} must be an integer`);
+    }
+    return schema;
+}
+
+function getYupGeoPointSchema({
+    property,
+    parentProperty,
+    customFieldValidator,
+    name,
+    entityId
+}: PropertyContext<GeopointProperty>): AnySchema {
+    let schema: ObjectSchema<any> = yup.object().nullable() as ObjectSchema<any>;
+    const validation = property.validation;
+
+    if (validation?.unique && customFieldValidator && name)
+        schema = schema.test("unique",
+            "This value already exists and should be unique",
+            (value) => customFieldValidator({
+                name,
+                property,
+                parentProperty,
+                value,
+                entityId
+            }));
+    if (validation?.required) {
+        schema = schema.test(
+            "required",
+            validation.requiredMessage ? validation.requiredMessage : "Required",
+            (value) => value !== undefined && value !== null
+        );
+    }
+    return schema;
+}
+
+function getYupDateSchema({
+    property,
+    parentProperty,
+    customFieldValidator,
+    name,
+    entityId
+}: PropertyContext<DateProperty>): AnySchema | DateSchema {
+    if (property.autoValue) {
+        return yup.date().nullable();
+    }
+    let schema: DateSchema<any> = yup.date().nullable();
+    const validation = property.validation;
+
+    if (validation) {
+        if (validation.required) {
+            schema = schema.test(
+                "required",
+                validation?.requiredMessage ? validation.requiredMessage : "Required",
+                (value) => value !== undefined && value !== null
+            );
+        }
+        if (validation.unique && customFieldValidator && name)
+            schema = schema.test("unique",
+                "This value already exists and should be unique",
+                (value) => customFieldValidator({
+                    name,
+                    property,
+                    parentProperty,
+                    value,
+                    entityId
+                }));
+        if (validation.min) schema = schema.min(validation.min, `${property.name} must be after ${validation.min}`);
+        if (validation.max) schema = schema.max(validation.max, `${property.name} must be before ${validation.min}`);
+    }
+    return schema.transform((v: any) => (v instanceof Date ? v : null));
+}
+
+function getYupReferenceSchema({
+    property,
+    parentProperty,
+    customFieldValidator,
+    name,
+    entityId
+}: PropertyContext<ReferenceProperty>): AnySchema {
+    let schema: ObjectSchema<any> = yup.object().nullable() as ObjectSchema<any>;
+    const validation = property.validation;
+
+    if (validation) {
+        if (validation.required) {
+            schema = schema.test(
+                "required",
+                validation?.requiredMessage ? validation.requiredMessage : "Required",
+                (value) => value !== undefined && value !== null
+            );
+        }
+        if (validation.unique && customFieldValidator && name)
+            schema = schema.test("unique",
+                "This value already exists and should be unique",
+                (value) => customFieldValidator({
+                    name,
+                    property,
+                    parentProperty,
+                    value,
+                    entityId
+                }));
+    }
+    return schema;
+}
+
+function getYupRelationSchema({
+    property,
+    parentProperty,
+    customFieldValidator,
+    name,
+    entityId
+}: PropertyContext<RelationProperty>): AnySchema {
+    const isMany = property.relation?.cardinality === "many";
+    let schema: AnySchema<any> = isMany ? yup.array().of(yup.object()).nullable() : yup.object().nullable();
+    const validation = property.validation;
+
+    if (validation) {
+        if (validation.required) {
+            schema = schema.test(
+                "required",
+                validation?.requiredMessage ? validation.requiredMessage : "Required",
+                (value: any) => {
+                    if (isMany) {
+                        return value !== undefined && value !== null && Array.isArray(value) && value.length > 0;
+                    }
+                    return value !== undefined && value !== null;
+                }
+            );
+        }
+        if (validation.unique && customFieldValidator && name)
+            schema = schema.test("unique",
+                "This value already exists and should be unique",
+                (value) => customFieldValidator({
+                    name,
+                    property,
+                    parentProperty,
+                    value,
+                    entityId
+                }));
+    }
+    return schema;
+}
+
+function getYupBooleanSchema({
+    property,
+    parentProperty,
+    customFieldValidator,
+    name,
+    entityId
+}: PropertyContext<BooleanProperty>): BooleanSchema {
+    let schema: BooleanSchema<any> = yup.boolean().nullable();
+    const validation = property.validation;
+
+    if (validation) {
+        if (validation.required) {
+            schema = schema.test(
+                "required",
+                validation?.requiredMessage ? validation.requiredMessage : "Required",
+                (value) => value !== undefined && value !== null
+            );
+        }
+        if (validation.unique && customFieldValidator && name)
+            schema = schema.test("unique",
+                "This value already exists and should be unique",
+                (value) => customFieldValidator({
+                    name,
+                    property,
+                    parentProperty,
+                    value,
+                    entityId
+                }));
+    }
+    return schema;
+}
+
+function hasUniqueInArrayModifier(property: Property): boolean | [string, Property][] {
+    if (property.validation?.uniqueInArray) {
+        return true;
+    } else if (property.type === "map" && property.properties) {
+        return Object.entries(property.properties)
+            .filter(([key, childProperty]) => childProperty.validation?.uniqueInArray);
+    }
+    return false;
+}
+
+function getYupArraySchema({
+    property,
+    parentProperty,
+    customFieldValidator,
+    name,
+    entityId
+}: PropertyContext<ArrayProperty>): AnySchema<any> {
+
+    let arraySchema: any = yup.array().nullable();
+
+    if (property.of) {
+        if (Array.isArray(property.of)) {
+            const yupProperties = (property.of as Property[]).map((p, index) => {
+                try {
+                    return {
+                        [`${name}[${index}]`]: mapPropertyToYup({
+                            property: p as Property,
+                            parentProperty: property,
+                            entityId
+                        })
+                    };
+                } catch (e: unknown) {
+                    console.error(`Error creating validation schema for array item ${index}:`, e);
+                    return {
+                        [`${name}[${index}]`]: yup.mixed().test(
+                            "validation-error",
+                            `Validation error: ${e instanceof Error ? e.message : "Unknown error"}`,
+                            () => false
+                        )
+                    };
+                }
+            }).reduce((a, b) => ({ ...a, ...b }), {});
+            return yup.array().nullable().of(
+                yup.mixed().test(
+                    "Dynamic object validation",
+                    "Dynamic object validation error",
+                    (object, context) => {
+                        const yupProperty = getValueInPath(yupProperties, context.path) as AnySchema;
+                        return yupProperty.validate(object);
+                    }
+                )
+            );
+        } else {
+            try {
+                arraySchema = arraySchema.of(mapPropertyToYup({
+                    property: property.of,
+                    parentProperty: property,
+                    entityId
+                }));
+            } catch (e: unknown) {
+                console.error(`Error creating validation schema for array of property:`, e);
+                arraySchema = arraySchema.of(yup.mixed().test(
+                    "validation-error",
+                    `Validation error: ${e instanceof Error ? e.message : "Unknown error"}`,
+                    () => false
+                ));
+            }
+            const arrayUniqueFields = hasUniqueInArrayModifier(property.of);
+            if (arrayUniqueFields) {
+                if (typeof arrayUniqueFields === "boolean") {
+                    arraySchema = arraySchema.uniqueInArray((v: any) => v, `${property.name} should have unique values within the array`);
+                } else if (Array.isArray(arrayUniqueFields)) {
+                    arrayUniqueFields.forEach(([name, childProperty]) => {
+                        arraySchema = arraySchema.uniqueInArray((v: any) => v && v[name], `${property.name} → ${childProperty.name ?? name}: should have unique values within the array`);
+                    });
+                }
+            }
+        }
+    }
+    const validation = property.validation;
+
+    if (validation) {
+        if (validation.required) {
+            arraySchema = arraySchema.test(
+                "required",
+                validation?.requiredMessage ? validation.requiredMessage : "Required",
+                (value: any) => value !== undefined && value !== null && value.length > 0
+            );
+        }
+        if (validation.min || validation.min === 0) arraySchema = arraySchema.min(validation.min, `${property.name} should be min ${validation.min} entries long`);
+        if (validation.max) arraySchema = arraySchema.max(validation.max, `${property.name} should be max ${validation.max} entries long`);
+        // Handle uniqueInArray at the array level (in addition to the of.validation check above)
+        if (validation.uniqueInArray) {
+            arraySchema = arraySchema.uniqueInArray((v: any) => v, `${property.name} should have unique values within the array`);
+        }
+    }
+    return arraySchema;
+}