@firecms/collection_editor 3.0.0-beta.2-pre.2 → 3.0.0-beta.2-pre.3

package/src/ui/collection_editor/CollectionEditorWelcomeView.tsx

@@ -1,53 +1,60 @@
 import React, { useEffect, useState } from "react";
 import { EntityCollection, unslugify, } from "@firecms/core";
 import { Button, Card, Chip, CircularProgress, cn, Container, Icon, Tooltip, Typography, } from "@firecms/ui";
-import { useFormikContext } from "formik";
 
 import { productsCollectionTemplate } from "./templates/products_template";
 import { blogCollectionTemplate } from "./templates/blog_template";
 import { usersCollectionTemplate } from "./templates/users_template";
 import { ImportFileUpload } from "@firecms/data_import_export";
 import { pagesCollectionTemplate } from "./templates/pages_template";
+import { useFormex } from "../../form";
 
 export function CollectionEditorWelcomeView({
                                                 path,
                                                 pathSuggestions,
                                                 parentCollection,
                                                 onContinue,
-                                                collections
+                                                existingCollectionPaths
                                             }: {
     path: string;
     pathSuggestions?: (path: string) => Promise<string[]>;
     parentCollection?: EntityCollection;
     onContinue: (importData?: object[]) => void;
-    collections?: EntityCollection[];
+    existingCollectionPaths?: string[];
 }) {
 
     const [loadingPathSuggestions, setLoadingPathSuggestions] = useState(false);
     const [filteredPathSuggestions, setFilteredPathSuggestions] = useState<string[] | undefined>();
     useEffect(() => {
-        if (pathSuggestions && collections) {
+        if (pathSuggestions && existingCollectionPaths) {
             setLoadingPathSuggestions(true);
             pathSuggestions(path)
                 .then(suggestions => {
-                    const filteredSuggestions = suggestions.filter(s => !collections.find(c => c.path.trim().toLowerCase() === s.trim().toLowerCase()));
+                    const filteredSuggestions = suggestions.filter(s => !(existingCollectionPaths ?? []).find(c => c.trim().toLowerCase() === s.trim().toLowerCase()));
                     setFilteredPathSuggestions(filteredSuggestions);
                 })
                 .finally(() => setLoadingPathSuggestions(false));
         }
-    }, [collections, path, pathSuggestions]);
+    }, [existingCollectionPaths, path, pathSuggestions]);
+
+    // const {
+    //     values,
+    //     setFieldValue,
+    //     setValues,
+    //     handleChange,
+    //     touched,
+    //     errors,
+    //     setFieldTouched,
+    //     isSubmitting,
+    //     submitCount
+    // } = useFormex<EntityCollection>();
 
     const {
         values,
         setFieldValue,
         setValues,
-        handleChange,
-        touched,
-        errors,
-        setFieldTouched,
-        isSubmitting,
         submitCount
-    } = useFormikContext<EntityCollection>();
+    } = useFormex<EntityCollection>();
 
     return (
         <div className={"overflow-auto my-auto"}>

package/src/ui/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 
-import { Field, FormikErrors, getIn, useFormikContext } from "formik";
+import { Field, getIn } from "../../form";
 import {
     EntityCollection,
     ErrorBoundary,
@@ -34,12 +34,13 @@ import { OnPropertyChangedParams, PropertyForm, PropertyFormDialog } from "./Pro
 import { PropertyTree } from "./PropertyTree";
 import { PersistedCollection } from "../../types/persisted_collection";
 import { GetCodeDialog } from "./GetCodeDialog";
+import { useFormex } from "../../form/Formex";
 
 type CollectionEditorFormProps = {
     showErrors: boolean;
     isNewCollection: boolean;
     propertyErrorsRef?: React.MutableRefObject<any>;
-    onPropertyError: (propertyKey: string, namespace: string | undefined, error?: FormikErrors<any>) => void;
+    onPropertyError: (propertyKey: string, namespace: string | undefined, error?: Record<string, any>) => void;
     setDirty?: (dirty: boolean) => void;
     reservedGroups?: string[];
     extraIcon: React.ReactNode;
@@ -72,7 +73,7 @@ export function CollectionPropertiesEditorForm({
         setFieldTouched,
         errors,
         dirty
-    } = useFormikContext<PersistedCollection>();
+    } = useFormex<PersistedCollection>();
 
     const snackbarController = useSnackbarController();
 
@@ -156,20 +157,20 @@ export function CollectionPropertiesEditorForm({
         }
         : undefined;
 
-    const getCurrentPropertiesOrder = (namespace?: string) => {
+    const getCurrentPropertiesOrder = useCallback((namespace?: string) => {
         if (!namespace) return currentPropertiesOrderRef.current[""];
         return currentPropertiesOrderRef.current[namespace] ?? getIn(values, namespaceToPropertiesOrderPath(namespace));
-    }
+    }, [values]);
 
-    const updatePropertiesOrder = (newPropertiesOrder: string[], namespace?: string) => {
+    const updatePropertiesOrder = useCallback((newPropertiesOrder: string[], namespace?: string) => {
         const propertiesOrderPath = namespaceToPropertiesOrderPath(namespace);
 
         setFieldValue(propertiesOrderPath, newPropertiesOrder, false);
         currentPropertiesOrderRef.current[namespace ?? ""] = newPropertiesOrder;
 
-    };
+    }, [setFieldValue]);
 
-    const deleteProperty = (propertyKey?: string, namespace?: string) => {
+    const deleteProperty = useCallback((propertyKey?: string, namespace?: string) => {
         const fullId = propertyKey ? getFullId(propertyKey, namespace) : undefined;
         if (!fullId)
             throw Error("collection editor miss config");
@@ -185,7 +186,7 @@ export function CollectionPropertiesEditorForm({
         setSelectedPropertyIndex(undefined);
         setSelectedPropertyKey(undefined);
         setSelectedPropertyNamespace(undefined);
-    };
+    }, [getCurrentPropertiesOrder, setFieldValue, updatePropertiesOrder]);
 
     const onPropertyMove = (propertiesOrder: string[], namespace?: string) => {
         setFieldValue(namespaceToPropertiesOrderPath(namespace), propertiesOrder, false);
@@ -263,9 +264,9 @@ export function CollectionPropertiesEditorForm({
 
     };
 
-    const onPropertyErrorInternal = useCallback((id: string, namespace?: string, error?: FormikErrors<any>) => {
+    const onPropertyErrorInternal = useCallback((id: string, namespace?: string, error?: Record<string, any>) => {
         const propertyPath = id ? getFullId(id, namespace) : undefined;
-        console.warn("onPropertyErrorInternal", {
+        console.debug("onPropertyErrorInternal", {
             id,
             namespace,
             error,
@@ -292,6 +293,17 @@ export function CollectionPropertiesEditorForm({
         : Object.keys(values.properties)) as string[];
 
     const owner = useMemo(() => getUser(values.ownerId), [getUser, values.ownerId]);
+
+    const onPropertyClick = useCallback((propertyKey: string, namespace?: string) => {
+        console.debug("CollectionEditor: onPropertyClick", {
+            propertyKey,
+            namespace
+        });
+        setSelectedPropertyIndex(usedPropertiesOrder.indexOf(propertyKey));
+        setSelectedPropertyKey(propertyKey);
+        setSelectedPropertyNamespace(namespace);
+    }, [usedPropertiesOrder]);
+
     const body = (
         <div className={"grid grid-cols-12 gap-2 h-full bg-gray-50 dark:bg-gray-900"}>
             <div className={cn(
@@ -357,20 +369,16 @@ export function CollectionPropertiesEditorForm({
                 <ErrorBoundary>
                     <PropertyTree
                         className={"pl-8"}
-                        onPropertyClick={(propertyKey, namespace) => {
-                            setSelectedPropertyIndex(usedPropertiesOrder.indexOf(propertyKey));
-                            setSelectedPropertyKey(propertyKey);
-                            setSelectedPropertyNamespace(namespace);
-                        }}
                         inferredPropertyKeys={inferredPropertyKeys}
                         selectedPropertyKey={selectedPropertyKey ? getFullId(selectedPropertyKey, selectedPropertyNamespace) : undefined}
                         properties={values.properties}
                         additionalFields={values.additionalFields}
                         propertiesOrder={usedPropertiesOrder}
+                        onPropertyClick={onPropertyClick}
                         onPropertyMove={onPropertyMove}
                         onPropertyRemove={isNewCollection ? deleteProperty : undefined}
                         collectionEditable={collectionEditable}
-                        errors={showErrors ? errors : {}}/>
+                        errors={errors}/>
                 </ErrorBoundary>
 
                 <Button className={"mt-8 w-full"}
@@ -384,7 +392,7 @@ export function CollectionPropertiesEditorForm({
             </div>
 
             {!asDialog &&
-                <div className={"col-span-12 lg:col-span-7 ml-2 p-4 md:p-8 h-full overflow-auto pb-20 md:pb-20"}>
+                <div className={"col-span-12 lg:col-span-7 p-4 md:py-8 md:px-4 h-full overflow-auto pb-20 md:pb-20"}>
                     <Paper
                         className="sticky top-8 p-4 min-h-full border border-transparent w-full flex flex-col justify-center ">
 

package/src/ui/collection_editor/EnumForm.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect } from "react";
+import equal from "react-fast-compare"
 
-import { FastField, Formik, getIn, useFormikContext } from "formik";
-import { EnumValueConfig, EnumValues, FormikArrayContainer, } from "@firecms/core";
+import { ArrayContainer, EnumValueConfig, EnumValues, } from "@firecms/core";
 import {
     AutoAwesomeIcon,
+    Badge,
     Button,
     CircularProgress,
     DebouncedTextField,
@@ -18,6 +19,7 @@ import {
 } from "@firecms/ui";
 import { FieldHelperView } from "./properties/FieldHelperView";
 import { extractEnumFromValues } from "@firecms/schema_inference";
+import { Field, Formex, getIn, useCreateFormex, useFormex } from "../../form";
 
 type EnumFormProps = {
     enumValues: EnumValueConfig[];
@@ -28,64 +30,68 @@ type EnumFormProps = {
     allowDataInference?: boolean;
     getData?: () => Promise<string[]>;
 };
-export const EnumForm = React.memo(
-    function EnumForm({
-                          enumValues,
-                          onValuesChanged,
-                          onError,
-                          updateIds,
-                          disabled,
-                          allowDataInference,
-                          getData
-                      }: EnumFormProps) {
 
-        return (
-            <Formik initialValues={{ enumValues }}
-                // enableReinitialize={true}
-                    validateOnMount={true}
-                    onSubmit={(data: { enumValues: EnumValueConfig[] }, formikHelpers) => {
-                    }}
-            >
-                {
-                    ({
-                         values,
-                         errors
-                     }) => {
-                        // eslint-disable-next-line react-hooks/rules-of-hooks
-                        useEffect(() => {
-                            if (onValuesChanged) {
-                                onValuesChanged(values.enumValues);
-                            }
-                        }, [values.enumValues]);
-                        // eslint-disable-next-line react-hooks/rules-of-hooks
-                        useEffect(() => {
-                            if (onError)
-                                onError(Boolean(errors?.enumValues ?? false));
-                        }, [errors]);
-
-                        return <EnumFormFields enumValuesPath={"enumValues"}
-                                               values={values}
-                                               errors={errors}
-                                               shouldUpdateId={updateIds}
-                                               disabled={disabled}
-                                               allowDataInference={allowDataInference}
-                                               getData={getData}/>
+export function EnumForm({
+                             enumValues,
+                             onValuesChanged,
+                             onError,
+                             updateIds,
+                             disabled,
+                             allowDataInference,
+                             getData
+                         }: EnumFormProps) {
+
+    const formex = useCreateFormex<{
+        enumValues: EnumValueConfig[]
+    }>({
+        initialValues: { enumValues },
+        validateOnChange: true,
+        validation: (values) => {
+            const errors: any = {};
+            if (values.enumValues) {
+                values.enumValues.forEach((enumValue, index) => {
+                    if (!enumValue?.label) {
+                        errors.enumValues = errors.enumValues ?? [];
+                        errors.enumValues[index] = errors.enumValues[index] ?? {};
+                        errors.enumValues[index].label = "You must specify a label for this enum value entry";
+                    }
+                    if (!enumValue?.id) {
+                        errors.enumValues = errors.enumValues ?? [];
+                        errors.enumValues[index] = errors.enumValues[index] ?? {};
+                        errors.enumValues[index].id = "You must specify an ID for this enum value entry";
                     }
-                }
-            </Formik>
+                });
+            }
+            const hasError = Boolean(errors?.enumValues && Object.keys(errors?.enumValues).length > 0);
+            onError?.(hasError);
+            return errors;
+        }
+    });
+
+    const { values, errors } = formex;
+
+    useEffect(() => {
+        if (onValuesChanged) {
+            onValuesChanged(values.enumValues);
+        }
+    }, [values.enumValues]);
+
+    return <Formex value={formex}>
+        <EnumFormFields enumValuesPath={"enumValues"}
+                        values={values}
+                        errors={errors}
+                        shouldUpdateId={updateIds}
+                        disabled={disabled}
+                        allowDataInference={allowDataInference}
+                        getData={getData}/>
+    </Formex>
 
-        );
-    },
-    function areEqual(prevProps: EnumFormProps, nextProps: EnumFormProps) {
-        return prevProps.enumValues.length === nextProps.enumValues.length &&
-            prevProps.onValuesChanged === nextProps.onValuesChanged &&
-            prevProps.getData === nextProps.getData
-            ;
-    }
-);
+}
 
 type EnumFormFieldsProps = {
-    values: { enumValues: EnumValueConfig[] };
+    values: {
+        enumValues: EnumValueConfig[]
+    };
     errors: any;
     enumValuesPath: string;
     shouldUpdateId: boolean;
@@ -107,7 +113,7 @@ function EnumFormFields({
 
     const {
         setFieldValue
-    } = useFormikContext();
+    } = useFormex();
 
     const [lastInternalIdAdded, setLastInternalIdAdded] = React.useState<number | undefined>();
     const [editDialogIndex, setEditDialogIndex] = React.useState<number | undefined>();
@@ -118,10 +124,12 @@ function EnumFormFields({
 
     const buildEntry = (index: number, internalId: number) => {
         const justAdded = lastInternalIdAdded === internalId;
+        const entryError = errors?.enumValues && errors?.enumValues[index];
         return <EnumEntry index={index}
                           disabled={disabled}
                           enumValuesPath={enumValuesPath}
                           autoFocus={justAdded}
+                          entryError={entryError}
                           shouldUpdateId={shouldUpdateId || justAdded}
                           onDialogOpen={() => setEditDialogIndex(index)}
                           inferredEntry={inferredValues.has(values.enumValues[index]?.id as string)}
@@ -151,7 +159,7 @@ function EnumFormFields({
             newEnumValues.forEach((enumValue) => {
                 inferredValues.add(enumValue.id);
             });
-            setFieldValue(enumValuesPath, [...newEnumValues, ...currentEnumValues]);
+            setFieldValue(enumValuesPath, [...newEnumValues, ...currentEnumValues], true);
         }).catch(e => {
             console.error(e);
         })
@@ -179,16 +187,16 @@ function EnumFormFields({
 
             <Paper className="p-4 m-1">
 
-                <FormikArrayContainer
-                    value={values.enumValues}
-                    addLabel={"Add enum value"}
-                    name={enumValuesPath}
-                    buildEntry={buildEntry}
-                    disabled={disabled}
-                    onInternalIdAdded={setLastInternalIdAdded}
-                    small={true}
-                    setFieldValue={setFieldValue}
-                    includeAddButton={true}/>
+                <ArrayContainer droppableId={enumValuesPath}
+                                addLabel={"Add enum value"}
+                                value={values.enumValues}
+                                disabled={disabled}
+                                size={"small"}
+                                buildEntry={buildEntry}
+                                onInternalIdAdded={setLastInternalIdAdded}
+                                includeAddButton={true}
+                                onValueChange={(value) => setFieldValue(enumValuesPath, value)}
+                                newDefaultEntry={{ id: "", label: "" }}/>
 
                 <EnumEntryDialog index={editDialogIndex}
                                  open={editDialogIndex !== undefined}
@@ -207,6 +215,7 @@ type EnumEntryProps = {
     onDialogOpen: () => void;
     disabled: boolean;
     inferredEntry?: boolean;
+    entryError?: { label?: string, id?: string }
 };
 
 const EnumEntry = React.memo(
@@ -217,7 +226,8 @@ const EnumEntry = React.memo(
                                    autoFocus,
                                    onDialogOpen,
                                    disabled,
-                                   inferredEntry
+                                   inferredEntry,
+                                   entryError
                                }: EnumEntryProps) {
 
         const {
@@ -226,7 +236,7 @@ const EnumEntry = React.memo(
             errors,
             setFieldValue,
             touched
-        } = useFormikContext<EnumValues>();
+        } = useFormex<EnumValues>();
 
         const shouldUpdateIdRef = React.useRef(!getIn(values, `${enumValuesPath}[${index}].id`));
         const shouldUpdateId = updateId || shouldUpdateIdRef.current;
@@ -234,8 +244,6 @@ const EnumEntry = React.memo(
         const idValue = getIn(values, `${enumValuesPath}[${index}].id`);
         const labelValue = getIn(values, `${enumValuesPath}[${index}].label`);
 
-        const labelError = getIn(errors, `${enumValuesPath}[${index}].label`);
-
         const currentLabelRef = React.useRef(labelValue);
 
         React.useEffect(() => {
@@ -246,35 +254,50 @@ const EnumEntry = React.memo(
         }, [labelValue]);
 
         return (
-            <div className={"flex w-full align-center justify-center"}>
-                <FastField name={`${enumValuesPath}[${index}].label`}
+            <>
+                <div className={"flex w-full align-center justify-center"}>
+                    <Field name={`${enumValuesPath}[${index}].label`}
                            as={DebouncedTextField}
                            className={"flex-grow"}
                            required
                            disabled={disabled}
                            size="small"
-                           validate={validateLabel}
                            autoFocus={autoFocus}
                            autoComplete="off"
                            endAdornment={inferredEntry && <AutoAwesomeIcon size={"small"}/>}
-                           error={Boolean(labelError)}/>
-
-                {!disabled &&
-                    <IconButton
-                        size="small"
-                        aria-label="edit"
-                        className={"m-1"}
-                        onClick={() => onDialogOpen()}>
-                        <SettingsIcon size={"small"}/>
-                    </IconButton>}
-
-            </div>);
+                           error={Boolean(entryError?.label)}/>
+
+                    {!disabled &&
+                        <Badge color={"error"} invisible={!entryError?.id}>
+                            <IconButton
+                                size="small"
+                                aria-label="edit"
+                                className={"m-1"}
+                                onClick={() => onDialogOpen()}>
+                                <SettingsIcon size={"small"}/>
+                            </IconButton>
+                        </Badge>}
+
+                </div>
+
+                {entryError?.label && <Typography variant={"caption"}
+                                                  className={"ml-3.5 text-red-500 dark:text-red-500"}>
+                    {entryError?.label}
+                </Typography>}
+
+                {entryError?.id && <Typography variant={"caption"}
+                                               className={"ml-3.5 text-red-500 dark:text-red-500"}>
+                    {entryError?.id}
+                </Typography>}
+
+            </>);
     },
     function areEqual(prevProps: EnumEntryProps, nextProps: EnumEntryProps) {
         return prevProps.index === nextProps.index &&
             prevProps.enumValuesPath === nextProps.enumValuesPath &&
             prevProps.shouldUpdateId === nextProps.shouldUpdateId &&
             prevProps.inferredEntry === nextProps.inferredEntry &&
+            equal(prevProps.entryError, nextProps.entryError) &&
             prevProps.autoFocus === nextProps.autoFocus;
     }
 );
@@ -292,12 +315,8 @@ function EnumEntryDialog({
 }) {
 
     const {
-        values,
-        handleChange,
         errors,
-        setFieldValue,
-        touched
-    } = useFormikContext<EnumValues>();
+    } = useFormex<EnumValues>();
 
     const idError = index !== undefined ? getIn(errors, `${enumValuesPath}[${index}].id`) : undefined;
     return <Dialog
@@ -309,14 +328,14 @@ function EnumEntryDialog({
 
         <DialogContent>
             {index !== undefined &&
-                <div><FastField name={`${enumValuesPath}[${index}]id`}
-                                as={DebouncedTextField}
-                                required
-                                validate={validateId}
-                                label={"ID"}
-                                size="small"
-                                autoComplete="off"
-                                error={Boolean(idError)}/>
+                <div>
+                    <Field name={`${enumValuesPath}[${index}].id`}
+                           as={DebouncedTextField}
+                           required
+                           label={"ID"}
+                           size="small"
+                           autoComplete="off"
+                           error={Boolean(idError)}/>
 
                     <FieldHelperView error={Boolean(idError)}>
                         {idError ?? "Value saved in the data source"}
@@ -337,18 +356,3 @@ function EnumEntryDialog({
     </Dialog>
 }
 
-function validateLabel(value: string) {
-    let error;
-    if (!value) {
-        error = "You must specify a label";
-    }
-    return error;
-}
-
-function validateId(value: string) {
-    let error;
-    if (!value) {
-        error = "You must specify an ID";
-    }
-    return error;
-}

package/src/ui/collection_editor/GetCodeDialog.tsx

@@ -9,7 +9,7 @@ export function GetCodeDialog({ collection, onOpenChange, open }: { onOpenChange
 
     const snackbarController = useSnackbarController();
 
-    const code = "import { EntityCollection } from \"firecms\";\n\nconst " + camelCase(collection.name) + "Collection:EntityCollection = " + JSON5.stringify(collectionToCode(collection), null, "\t");
+    const code = "import { EntityCollection } from \"firecms\";\n\nconst " + (collection.name ? camelCase(collection.name) : "my") + "Collection:EntityCollection = " + JSON5.stringify(collectionToCode(collection), null, "\t");
     return <Dialog open={open}
                    onOpenChange={onOpenChange}
                    maxWidth={"4xl"}>