@rebasepro/cms 0.0.1-canary.4d4fb3e

package/src/form/EntityFormActions.tsx

@@ -0,0 +1,204 @@
+import type { EntityCollection } from "@rebasepro/types";
+import type { FormContext } from "../types/fields";
+import type { EntityAction, SideEntityController } from "@rebasepro/types";
+import React from "react";
+import { Entity, RebaseContext } from "@rebasepro/types";
+import type { EntityFormActionsProps } from "../types/components/EntityFormActionsProps";
+import {
+    Button,
+    cls,
+    defaultBorderMixin,
+    DialogActions,
+    ErrorIcon,
+    IconButton,
+    LoadingButton,
+    Typography
+} from "@rebasepro/ui";
+import { useTranslation } from "@rebasepro/core";
+import { FormexController } from "@rebasepro/formex";
+import { useCMSContext } from "../index";
+
+export function EntityFormActions({
+    path,
+    collection,
+    entity,
+    layout,
+    savingError,
+    formex,
+    disabled,
+    status,
+    pluginActions,
+    openEntityMode,
+    navigateBack,
+    formContext
+}: EntityFormActionsProps) {
+
+    const context = useCMSContext();
+    const sideEntityController = context.sideEntityController;
+    const { t } = useTranslation();
+
+    return layout === "bottom"
+        ? buildBottomActions({
+            path,
+            savingError,
+            entity,
+            collection,
+            context,
+            sideEntityController,
+            disabled,
+            status,
+            pluginActions,
+            openEntityMode,
+            navigateBack,
+            formContext,
+            formex,
+            t
+        })
+        : buildSideActions({
+            path,
+            savingError,
+            entity,
+            collection,
+            context,
+            sideEntityController,
+            disabled,
+            status,
+            pluginActions,
+            openEntityMode,
+            navigateBack,
+            formContext,
+            formex,
+            t
+        });
+}
+
+type ActionsViewProps<M extends Record<string, unknown>> = {
+    path: string,
+    savingError: Error | undefined,
+    entity: Entity<M> | undefined,
+    formActions?: EntityAction[],
+    collection: EntityCollection,
+    context: RebaseContext,
+    sideEntityController: SideEntityController,
+    disabled: boolean,
+    status: "new" | "existing" | "copy",
+    pluginActions?: any[],
+    openEntityMode: "side_panel" | "full_screen";
+    navigateBack: () => void;
+    formContext: FormContext,
+    formex: FormexController<any>;
+    t: (key: string) => string;
+};
+
+function buildBottomActions<M extends Record<string, unknown>>({
+    savingError,
+    entity,
+    path,
+    formActions,
+    collection,
+    context,
+    sideEntityController,
+    disabled,
+    status,
+    pluginActions,
+    openEntityMode,
+    navigateBack,
+    formContext,
+    formex,
+    t
+}: ActionsViewProps<M>) {
+
+    const hasErrors = Object.keys(formex.errors).length > 0 && formex.submitCount > 0;
+
+    return <DialogActions position={"absolute"}>
+        {savingError &&
+            <div className="text-right">
+                <Typography color={"error"}>{savingError.message}</Typography>
+            </div>
+        }
+        {entity && (formActions ?? []).length > 0 && <div className="grow flex overflow-auto no-scrollbar">
+            {(formActions ?? []).map(action => (
+                <IconButton
+                    key={action.name}
+                    color="primary"
+                    onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+                        event.stopPropagation();
+                        if (entity)
+                            action.onClick({
+                                view: "form",
+                                entity,
+                                path: path ?? collection.slug,
+                                collection: collection,
+                                context,
+                                sideEntityController,
+                                openEntityMode: openEntityMode,
+                                navigateBack,
+                                formContext
+                            });
+                    }}>
+                    {action.icon}
+                </IconButton>
+            ))}
+        </div>}
+        {pluginActions}
+        <Button variant="text" disabled={disabled || formex.isSubmitting}
+            color={"primary"}
+            type="reset">
+            {status === "existing" ? t("discard") : t("clear")}
+        </Button>
+        <Button variant={"filled"}
+            color="primary"
+            type="submit"
+            disabled={disabled || formex.isSubmitting}
+            startIcon={hasErrors ? <ErrorIcon /> : undefined}>
+            {status === "existing" && t("save")}
+            {status === "copy" && t("create_copy")}
+            {status === "new" && t("create")}
+        </Button>
+
+    </DialogActions>;
+}
+
+function buildSideActions<M extends Record<string, unknown>>({
+    savingError,
+    entity,
+    formActions,
+    path,
+    openEntityMode,
+    collection,
+    context,
+    sideEntityController,
+    disabled,
+    status,
+    pluginActions,
+    formex,
+    t
+}: ActionsViewProps<M>) {
+
+    const hasErrors = Object.keys(formex.errors).length > 0 && formex.submitCount > 0;
+
+    return <div
+        className={cls("overflow-auto h-full flex flex-col gap-2 w-80 2xl:w-96 px-4 py-16 sticky top-0 border-l", defaultBorderMixin)}>
+        <LoadingButton fullWidth={true}
+            variant="filled"
+            color="primary"
+            type="submit"
+            startIcon={hasErrors ? <ErrorIcon /> : undefined}
+            disabled={disabled || formex.isSubmitting}>
+            {status === "existing" && t("save")}
+            {status === "copy" && t("create_copy")}
+            {status === "new" && t("create")}
+        </LoadingButton>
+        <Button fullWidth={true} variant="text" disabled={disabled || formex.isSubmitting} type="reset">
+            {status === "existing" ? t("discard") : t("clear")}
+        </Button>
+
+        {pluginActions}
+
+        {savingError &&
+            <div className="text-right">
+                <Typography color={"error"}>{savingError.message}</Typography>
+            </div>
+        }
+    </div>;
+}

package/src/form/PropertyFieldBinding.tsx

@@ -0,0 +1,344 @@
+import type { EntityCollection } from "@rebasepro/types";
+import type { FieldProps, PropertyFieldBindingProps } from "../types/fields";
+import type { RebasePlugin, PluginFieldBuilderParams, Property } from "@rebasepro/types";
+import React, { ComponentType, ReactElement, useCallback, useRef } from "react";
+import { deepEqual as equal } from "fast-equals"
+
+import { Field, FieldProps as FormexFieldProps, getIn } from "@rebasepro/formex";
+
+;
+import { ReadOnlyFieldBinding } from "./field_bindings/ReadOnlyFieldBinding";
+
+import { isHidden, isPropertyBuilder, isReadOnly, resolveProperty } from "@rebasepro/common";
+import { useAuthController, useCustomizationController } from "@rebasepro/core";
+import { Typography } from "@rebasepro/ui";
+import { getFieldConfig, getFieldId } from "../components/field_configs";
+import { ErrorBoundary } from "@rebasepro/ui";
+
+/**
+ * This component renders a form field creating the corresponding configuration
+ * from a property. For example if bound to a string property, it will generate
+ * a text field.
+ *
+ * You can use it when you are creating a custom field, and need to
+ * render additional fields mapped to properties. This is useful if you
+ * need to build a complex property mapping, like an array where each index
+ * is a different property.
+ *
+ * Please note that if you build a custom field in a component, the
+ * **validation** passed in the property will have no effect. You need to set
+ * the validation in the `EntityCollection` definition.
+ *
+ * @param propertyKey You can use nested names such as `address.street` or `friends[2]`
+ * @param property
+ * @param context
+ * @param includeDescription
+ * @param underlyingValueHasChanged
+ * @param disabled
+ * @param tableMode
+ * @param partOfArray
+ * @param autoFocus
+ * @group Form custom fields
+ */
+export const PropertyFieldBinding = React.memo(PropertyFieldBindingInternal, (a: PropertyFieldBindingProps<any>, b: PropertyFieldBindingProps<any>) => {
+    if (a.propertyKey !== b.propertyKey) {
+        return false;
+    }
+    if (a.index !== b.index) {
+        return false;
+    }
+
+    if (a.size !== b.size) {
+        return false;
+    }
+    const aIsBuilder = isPropertyBuilder(a.property);
+    const bIsBuilder = isPropertyBuilder(b.property);
+
+    const baseCheck = (aIsBuilder === bIsBuilder || equal(a.property, b.property)) &&
+        a.disabled === b.disabled;
+    if (!baseCheck) {
+        return false;
+    }
+
+    if (shouldPropertyReRender(b.property)) {
+        return false;
+    }
+
+    return false;
+}) as typeof PropertyFieldBindingInternal;
+
+function PropertyFieldBindingInternal<M extends Record<string, unknown> = Record<string, unknown>>
+    ({
+        propertyKey,
+        property,
+        context,
+        includeDescription,
+        underlyingValueHasChanged,
+        disabled: disabledProp,
+        partOfArray,
+        partOfBlock,
+        minimalistView,
+        autoFocus,
+        index,
+        size,
+        onPropertyChange,
+    }: PropertyFieldBindingProps<M>): ReactElement<PropertyFieldBindingProps<M>> {
+
+    const authController = useAuthController();
+    const customizationController = useCustomizationController();
+
+    return (
+        <Field
+            key={propertyKey}
+            name={propertyKey}
+        >
+            {(fieldProps) => {
+
+                let Component: ComponentType<FieldProps> | undefined;
+                const resolvedProperty = resolveProperty({
+                    propertyKey,
+                    property: property,
+                    values: fieldProps.form.values,
+                    path: context.path,
+                    entityId: context.entityId,
+                    propertyConfigs: customizationController.propertyConfigs,
+                    index,
+                    authController
+                }) as Property | null;
+
+                const readOnly = resolvedProperty ? isReadOnly(resolvedProperty) : true;
+                const disabled = disabledProp || readOnly || Boolean(resolvedProperty?.disabled) || context.disabled;
+
+                if (resolvedProperty === null || isHidden(resolvedProperty)) {
+                    return <></>;
+                } else if (readOnly) {
+                    Component = ReadOnlyFieldBinding;
+                } else if (resolvedProperty.Field) {
+                    if (typeof resolvedProperty.Field === "function") {
+                        Component = resolvedProperty.Field as ComponentType<FieldProps<any>>;
+                    }
+                } else {
+                    const propertyConfig = getFieldConfig(resolvedProperty, customizationController.propertyConfigs);
+                    if (!propertyConfig) {
+                        console.log("INTERNAL: Could not find field config for property", {
+                            propertyKey,
+                            property,
+                            resolvedProperty,
+                            fields: customizationController.propertyConfigs,
+                            propertyConfig
+                        });
+                        throw new Error(`INTERNAL: Could not find field config for property ${propertyKey}`);
+                    }
+                    const configProperty = resolveProperty({
+                        propertyKey,
+                        property: propertyConfig.property as Property,
+                        values: fieldProps.form.values,
+                        path: context.path,
+                        entityId: context.entityId,
+                        propertyConfigs: customizationController.propertyConfigs,
+                        index,
+                        authController
+                    }) as Property | null;
+                    Component = configProperty?.Field as ComponentType<FieldProps> | undefined;
+                }
+                if (!Component) {
+                    console.warn(`No field component found for property ${propertyKey}`);
+                    console.warn("Property:", property);
+                    return (
+                        <div className={"w-full"}>
+                            {`Currently the field ${resolvedProperty.type} is not supported`}
+                        </div>
+                    );
+                }
+
+                const componentProps: ResolvedPropertyFieldBindingProps<M> = {
+                    propertyKey,
+                    property: resolvedProperty,
+                    includeDescription,
+                    underlyingValueHasChanged,
+                    context,
+                    disabled,
+                    partOfArray,
+                    partOfBlock,
+                    minimalistView,
+                    autoFocus,
+                    size,
+                    onPropertyChange
+                };
+
+                return <FieldInternal
+                    Component={Component as ComponentType<FieldProps>}
+                    componentProps={componentProps}
+                    formexFieldProps={fieldProps} />;
+            }}
+        </Field>
+    );
+
+}
+
+type ResolvedPropertyFieldBindingProps<M extends Record<string, unknown> = Record<string, unknown>> =
+    Omit<PropertyFieldBindingProps<M>, "property">
+    & {
+        property: Property
+    };
+
+function FieldInternal<CustomProps, M extends Record<string, any>>
+    ({
+        Component,
+        componentProps: {
+            propertyKey,
+            property,
+            includeDescription,
+            underlyingValueHasChanged,
+            partOfArray,
+            partOfBlock,
+            minimalistView,
+            autoFocus,
+            context,
+            disabled,
+            size,
+            onPropertyChange
+        },
+        formexFieldProps
+    }:
+        {
+            Component: ComponentType<FieldProps>,
+            componentProps: ResolvedPropertyFieldBindingProps<M>,
+            formexFieldProps: FormexFieldProps<any, any>
+        }) {
+
+    const { plugins } = useCustomizationController();
+
+    const customFieldProps: any = property.customProps;
+    const value = formexFieldProps.field.value;
+    const error = getIn(formexFieldProps.form.errors, propertyKey) as string | string[] | undefined;
+    const touched = getIn(formexFieldProps.form.touched, propertyKey) as boolean | undefined;
+
+    const showError: boolean = Boolean(error &&
+        (formexFieldProps.form.submitCount > 0 || property.validation?.unique) &&
+        (!Array.isArray(error) || !!error.filter((e: any) => !!e).length));
+
+    const WrappedComponent: ComponentType<FieldProps<any, any, M>> | null = useWrappedComponent({
+        path: context.path,
+        collection: context.collection,
+        propertyKey: propertyKey,
+        property: property,
+        Component: Component,
+        plugins: plugins
+    });
+    const UsedComponent: ComponentType<FieldProps> = WrappedComponent ?? Component;
+
+    const isSubmitting = formexFieldProps.form.isSubmitting;
+
+    const setValue = useCallback((value: any | null, shouldValidate?: boolean) => {
+        formexFieldProps.form.setFieldTouched(propertyKey, true, false);
+        formexFieldProps.form.setFieldValue(propertyKey, value, shouldValidate);
+    }, []);
+
+    const setFieldValue = useCallback((otherPropertyKey: string, value: any | null, shouldValidate?: boolean) => {
+        formexFieldProps.form.setFieldTouched(propertyKey, true, false);
+        formexFieldProps.form.setFieldValue(otherPropertyKey, value, shouldValidate);
+    }, []);
+
+    const cmsFieldProps: FieldProps<any, CustomProps, M> = {
+        propertyKey,
+        value,
+        setValue,
+        setFieldValue,
+        error: error as string | undefined,
+        touched,
+        showError,
+        isSubmitting,
+        includeDescription: includeDescription ?? true,
+        property: property as Property,
+        disabled: disabled ?? false,
+        underlyingValueHasChanged: underlyingValueHasChanged ?? false,
+        partOfArray: partOfArray ?? false,
+        partOfBlock: partOfBlock ?? false,
+        minimalistView: minimalistView ?? false,
+        autoFocus: autoFocus ?? false,
+        customProps: customFieldProps,
+        context,
+        size,
+        onPropertyChange
+    };
+
+    return (
+        <ErrorBoundary>
+
+            <UsedComponent {...cmsFieldProps} />
+
+            {underlyingValueHasChanged && !isSubmitting &&
+                <Typography variant={"caption"} className={"ml-3.5"}>
+                    This value has been updated elsewhere
+                </Typography>}
+
+        </ErrorBoundary>);
+
+}
+
+const shouldPropertyReRender = (property: Property, plugins?: RebasePlugin[]): boolean => {
+    if (plugins?.some((plugin) => plugin.fieldBuilder)) {
+        return true;
+    }
+    if (isPropertyBuilder(property)) {
+        return true;
+    }
+    const defAProperty = property as Property;
+    const rerenderThisProperty = Boolean(defAProperty.Field);
+    if (defAProperty.type === "map" && defAProperty.properties) {
+        return Boolean(rerenderThisProperty || Object.values(defAProperty.properties).some((childProperty) => shouldPropertyReRender(childProperty as Property, plugins)));
+    } else {
+        return Boolean(rerenderThisProperty);
+    }
+}
+
+interface UseWrappedComponentParams<M extends Record<string, unknown> = Record<string, unknown>> {
+    path?: string,
+    collection?: EntityCollection<M>,
+    propertyKey: string,
+    property: Property,
+    Component: ComponentType<FieldProps<any, any, M>>,
+    plugins?: RebasePlugin[]
+}
+
+function useWrappedComponent<T, M extends Record<string, any> = any>(
+    {
+        path,
+        collection,
+        propertyKey,
+        property,
+        Component,
+        plugins
+    }: UseWrappedComponentParams<M>
+): ComponentType<FieldProps<any, any, M>> | null {
+
+    const wrapperRef = useRef<ComponentType<FieldProps<any, any, M>> | null>((() => {
+        let Wrapper: ComponentType<FieldProps<any, any, M>> | null = null;
+        if (plugins) {
+            plugins.forEach((plugin) => {
+                const fieldId = getFieldId(property);
+                if (fieldId && plugin.fieldBuilder) {
+                    const params: PluginFieldBuilderParams = {
+                        fieldConfigId: fieldId,
+                        propertyKey,
+                        property,
+                        Field: Component,
+                        plugin,
+                        path,
+                        collection,
+                    };
+                    const enabled = plugin.fieldBuilder.enabled?.(params);
+                    if (enabled === undefined || enabled)
+                        Wrapper = plugin.fieldBuilder.wrap(params) || Wrapper;
+                }
+                if (!fieldId) {
+                    console.warn("INTERNAL: Field id not found for property", property);
+                }
+            });
+        }
+        return Wrapper;
+    })());
+
+    return wrapperRef.current;
+}

package/src/form/components/ErrorFocus.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useRef } from "react";
+import { useFormex } from "@rebasepro/formex";
+
+export const ErrorFocus = ({ containerRef }:
+    {
+        containerRef?: React.RefObject<HTMLDivElement | null>
+    }) => {
+    const {
+        isValidating,
+        errors,
+        version
+    } = useFormex();
+
+    const prevVersion = useRef(version);
+
+    useEffect(() => {
+
+        if (version === prevVersion.current) {
+            return;
+        }
+
+        const keys = Object.keys(errors);
+
+        // Whenever there are errors and the form has been submitted and is not validating
+        if (!isValidating && keys.length > 0) {
+            const errorElement = containerRef?.current?.querySelector<HTMLDivElement>(
+                `#form_field_${keys[0]}`
+            );
+
+            if (errorElement) {
+                errorElement.scrollIntoView({
+                    behavior: "smooth",
+                    block: "center"
+                });
+                const input = errorElement.querySelector("input");
+                if (input) input.focus();
+            }
+            prevVersion.current = version;
+        }
+    }, [isValidating, errors, containerRef, version]);
+
+    // This component does not render anything by itself.
+    return null;
+};

package/src/form/components/FieldHelperText.tsx

@@ -0,0 +1,45 @@
+import type { Property } from "@rebasepro/types";
+import { IconButton, InfoIcon, Tooltip, Typography } from "@rebasepro/ui";
+
+/**
+ * Component in charge of rendering the description of a field
+ * as well as the error message if any.
+ */
+export function FieldHelperText<T>({
+    error,
+    showError,
+    property,
+    includeDescription = true,
+    disabled
+}: {
+    error?: string,
+    showError?: boolean,
+    property: Property | Property,
+    includeDescription?: boolean,
+    disabled?: boolean,
+}
+) {
+
+    const hasDescription = property.description !== undefined && property.description.trim().length > 0;
+
+    if (!(showError && error) && (!includeDescription || !hasDescription))
+        return null;
+
+    if (showError && error) {
+        return <Typography variant={"caption"}
+            className={"ml-3.5 text-red-500 dark:text-red-500"}>
+            {error}
+        </Typography>
+    }
+
+    const disabledTooltip: string | undefined = typeof property.disabled === "object" ? property.disabled.disabledMessage : undefined;
+
+    return <div className={"flex ml-3.5 mt-1"}>
+        <Typography variant={"caption"}
+            color={disabled ? "disabled" : "secondary"}
+            className={"grow"}>
+            {disabledTooltip || property.description}
+        </Typography>
+
+    </div>
+}

package/src/form/components/FormEntry.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { ErrorBoundary } from "@rebasepro/ui";
+
+export function FormEntry({
+                              propertyKey,
+                              widthPercentage = 100,
+                              children
+                          }: {
+    propertyKey: string;
+    widthPercentage?: number;
+    children: React.ReactNode;
+}) {
+    return (
+        <div id={`form_field_${propertyKey}`}
+             className={"relative"}
+             style={{ width: widthPercentage === 100 ? "100%" : `calc(${widthPercentage}% - 8px)` }}>
+            <ErrorBoundary>
+                {children}
+            </ErrorBoundary>
+        </div>
+    );
+}

package/src/form/components/FormLayout.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { cls } from "@rebasepro/ui";
+
+export function FormLayout({
+    children,
+    className
+}: {
+    children: React.ReactNode;
+    className?: string;
+}) {
+    return (
+        <div className={cls("flex flex-wrap gap-x-4 w-full space-y-8", className)}>
+            {children}
+        </div>
+    );
+}