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

package/dist/types/collection_editor_controller.d.ts

@@ -7,7 +7,7 @@ import { PersistedCollection } from "./persisted_collection";
  */
 export interface CollectionEditorController {
     editCollection: (props: {
-        path?: string;
+        id?: string;
         fullPath?: string;
         parentCollectionIds: string[];
         parentCollection?: PersistedCollection;
@@ -21,12 +21,13 @@ export interface CollectionEditorController {
         parentCollectionIds: string[];
         parentCollection?: PersistedCollection;
         redirect: boolean;
+        sourceClick?: string;
     }) => void;
     editProperty: (props: {
         propertyKey?: string;
         property?: Property;
         currentPropertiesOrder?: string[];
-        editedCollectionPath: string;
+        editedCollectionId: string;
         parentCollectionIds: string[];
         collection: PersistedCollection;
     }) => void;

package/dist/types/config_controller.d.ts

@@ -21,13 +21,13 @@ export interface CollectionsConfigController {
 export type UpdateCollectionParams<M extends Record<string, any>> = {
     id: string;
     collectionData: Partial<PersistedCollection<M>>;
-    previousPath?: string;
+    previousId?: string;
     parentCollectionIds?: string[];
 };
 export type SaveCollectionParams<M extends Record<string, any>> = {
     id: string;
     collectionData: PersistedCollection<M>;
-    previousPath?: string;
+    previousId?: string;
     parentCollectionIds?: string[];
 };
 export type SavePropertyParams = {
@@ -46,6 +46,6 @@ export type DeletePropertyParams = {
     parentCollectionIds?: string[];
 };
 export type DeleteCollectionParams = {
-    path: string;
+    id: string;
     parentCollectionIds?: string[];
 };

package/dist/ui/collection_editor/CollectionEditorDialog.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { CMSType, EntityCollection, User } from "@firecms/core";
+import { EntityCollection, User } from "@firecms/core";
 import { CollectionsConfigController } from "../../types/config_controller";
 import { CollectionInference } from "../../types/collection_inference";
 import { PersistedCollection } from "../../types/persisted_collection";
@@ -11,7 +11,7 @@ export interface CollectionEditorDialogProps {
         path?: string;
         name?: string;
     };
-    editedCollectionPath?: string;
+    editedCollectionId?: string;
     fullPath?: string;
     parentCollectionIds?: string[];
     handleClose: (collection?: EntityCollection) => void;
@@ -30,9 +30,7 @@ export interface CollectionEditorDialogProps {
     parentCollection?: PersistedCollection;
 }
 export declare function CollectionEditorDialog(props: CollectionEditorDialogProps): import("react/jsx-runtime").JSX.Element;
-export declare function CollectionEditorDialogInternal<M extends {
-    [Key: string]: CMSType;
-}>({ isNewCollection, initialValues: initialValuesProp, configController, editedCollectionPath, parentCollectionIds, fullPath, collectionInference, handleClose, reservedGroups, extraView, handleCancel, setFormDirty, pathSuggestions, getUser, parentCollection, getData }: CollectionEditorDialogProps & {
+export declare function CollectionEditor<M extends Record<string, any>>(props: CollectionEditorDialogProps & {
     handleCancel: () => void;
     setFormDirty: (dirty: boolean) => void;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/ui/collection_editor/CollectionEditorWelcomeView.d.ts

@@ -1,11 +1,11 @@
 import React from "react";
 import { EntityCollection } from "@firecms/core";
-export declare function CollectionEditorWelcomeView({ path, pathSuggestions, parentCollection, onContinue, collections }: {
+export declare function CollectionEditorWelcomeView({ path, pathSuggestions, parentCollection, onContinue, existingCollectionPaths }: {
     path: string;
     pathSuggestions?: (path: string) => Promise<string[]>;
     parentCollection?: EntityCollection;
     onContinue: (importData?: object[]) => void;
-    collections?: EntityCollection[];
+    existingCollectionPaths?: string[];
 }): import("react/jsx-runtime").JSX.Element;
 export declare function TemplateButton({ title, subtitle, icon, onClick }: {
     title: string;

package/dist/ui/collection_editor/CollectionPropertiesEditorForm.d.ts

@@ -1,12 +1,11 @@
 import React from "react";
-import { FormikErrors } from "formik";
 import { EntityCollection, PropertyConfig, User } from "@firecms/core";
 import { PersistedCollection } from "../../types/persisted_collection";
 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;

package/dist/ui/collection_editor/EnumForm.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import { EnumValueConfig } from "@firecms/core";
 type EnumFormProps = {
     enumValues: EnumValueConfig[];
@@ -9,5 +8,5 @@ type EnumFormProps = {
     allowDataInference?: boolean;
     getData?: () => Promise<string[]>;
 };
-export declare const EnumForm: React.NamedExoticComponent<EnumFormProps>;
+export declare function EnumForm({ enumValues, onValuesChanged, onError, updateIds, disabled, allowDataInference, getData }: EnumFormProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ui/collection_editor/PropertyEditView.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { FormikErrors, FormikProps } from "formik";
+import { FormexController } from "../../form";
 import { Property, PropertyConfig } from "@firecms/core";
 export type PropertyWithId = Property & {
     id?: string;
@@ -22,13 +22,13 @@ export type PropertyFormProps = {
     onPropertyChanged?: (params: OnPropertyChangedParams) => void;
     onPropertyChangedImmediate?: boolean;
     onDelete?: (id?: string, namespace?: string) => void;
-    onError?: (id: string, namespace?: string, error?: FormikErrors<any>) => void;
-    initialErrors?: FormikErrors<any>;
-    forceShowErrors?: boolean;
+    onError?: (id: string, namespace?: string, error?: Record<string, any>) => void;
+    initialErrors?: Record<string, any>;
     existingPropertyKeys?: string[];
+    forceShowErrors?: boolean;
     allowDataInference: boolean;
     getData?: () => Promise<object[]>;
-    getHelpers?: (formikProps: FormikProps<PropertyWithId>) => void;
+    getController?: (formex: FormexController<PropertyWithId>) => void;
     propertyConfigs: Record<string, PropertyConfig>;
     collectionEditable: boolean;
 };

package/dist/ui/collection_editor/PropertyTree.d.ts

@@ -1,22 +1,23 @@
+import React from "react";
 import { AdditionalFieldDelegate, CMSType, PropertiesOrBuilders, PropertyOrBuilder } from "@firecms/core";
 import { DraggableProvided } from "@hello-pangea/dnd";
-export declare function PropertyTree<M extends {
+export declare const PropertyTree: React.MemoExoticComponent<(<M extends {
     [Key: string]: CMSType;
-}>({ namespace, selectedPropertyKey, onPropertyClick, properties, propertiesOrder: propertiesOrderProp, additionalFields, errors, onPropertyMove, onPropertyRemove, className, inferredPropertyKeys, collectionEditable, }: {
-    namespace?: string;
-    selectedPropertyKey?: string;
-    onPropertyClick?: (propertyKey: string, namespace?: string) => void;
+}>({ namespace, selectedPropertyKey, onPropertyClick, properties, propertiesOrder: propertiesOrderProp, additionalFields, errors, onPropertyMove, onPropertyRemove, className, inferredPropertyKeys, collectionEditable }: {
+    namespace?: string | undefined;
+    selectedPropertyKey?: string | undefined;
+    onPropertyClick?: ((propertyKey: string, namespace?: string) => void) | undefined;
     properties: PropertiesOrBuilders<M>;
-    propertiesOrder?: string[];
-    additionalFields?: AdditionalFieldDelegate<M>[];
+    propertiesOrder?: string[] | undefined;
+    additionalFields?: AdditionalFieldDelegate<M, import("@firecms/core").User>[] | undefined;
     errors: Record<string, any>;
-    onPropertyMove?: (propertiesOrder: string[], namespace?: string) => void;
-    onPropertyRemove?: (propertyKey: string, namespace?: string) => void;
-    className?: string;
-    inferredPropertyKeys?: string[];
+    onPropertyMove?: ((propertiesOrder: string[], namespace?: string) => void) | undefined;
+    onPropertyRemove?: ((propertyKey: string, namespace?: string) => void) | undefined;
+    className?: string | undefined;
+    inferredPropertyKeys?: string[] | undefined;
     collectionEditable: boolean;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function PropertyTreeEntry({ propertyKey, namespace, propertyOrBuilder, additionalField, provided, selectedPropertyKey, errors, onPropertyClick, onPropertyMove, onPropertyRemove, inferredPropertyKeys, collectionEditable, }: {
+}) => import("react/jsx-runtime").JSX.Element)>;
+export declare function PropertyTreeEntry({ propertyKey, namespace, propertyOrBuilder, additionalField, provided, selectedPropertyKey, errors, onPropertyClick, onPropertyMove, onPropertyRemove, inferredPropertyKeys, collectionEditable }: {
     propertyKey: string;
     namespace?: string;
     propertyOrBuilder: PropertyOrBuilder;

package/dist/ui/collection_editor/SwitchControl.d.ts

@@ -0,0 +1,8 @@
+import { FormexFieldProps } from "../../form";
+export declare function SwitchControl({ field, form, label, tooltip, disabled, size, allowIndeterminate }: FormexFieldProps & {
+    label: string;
+    tooltip?: string;
+    disabled?: boolean;
+    size?: "small" | "medium";
+    allowIndeterminate?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/ui/collection_editor/properties/CommonPropertyFields.d.ts

@@ -2,7 +2,6 @@ import React from "react";
 type CommonPropertyFieldsProps = {
     showErrors: boolean;
     disabledId: boolean;
-    existingPropertyKeys?: string[];
     disabled: boolean;
     isNewProperty: boolean;
     autoUpdateId: boolean;

package/dist/ui/collection_editor/util.d.ts

@@ -2,3 +2,4 @@ export declare function idToPropertiesPath(id: string): string;
 export declare function namespaceToPropertiesPath(namespace?: string): string;
 export declare function namespaceToPropertiesOrderPath(namespace?: string): string;
 export declare function getFullId(propertyKey: string, propertyNamespace?: string): string;
+export declare function getFullIdPath(propertyKey: string, propertyNamespace?: string): string;

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@firecms/collection_editor",
   "type": "module",
-  "version": "3.0.0-beta.2-pre.2",
+  "version": "3.0.0-beta.2-pre.3",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "dist/index.d.ts",
   "source": "src/index.ts",
   "dependencies": {
-    "@firecms/data_import_export": "^3.0.0-beta.2-pre.2",
-    "@firecms/schema_inference": "^3.0.0-beta.2-pre.2",
-    "@firecms/ui": "^3.0.0-beta.2-pre.2",
+    "@firecms/data_import_export": "^3.0.0-beta.2-pre.3",
+    "@firecms/schema_inference": "^3.0.0-beta.2-pre.3",
+    "@firecms/ui": "^3.0.0-beta.2-pre.3",
     "json5": "^2.2.3",
     "prism-react-renderer": "^2.3.1"
   },
@@ -72,5 +72,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f3f62fc3cbc4f0d9d1a26817a14cff06393b7c2b"
+  "gitHead": "c78c58643c73ba776dfbcb8315d1a99160bb607a"
 }

package/src/ConfigControllerProvider.tsx

@@ -94,7 +94,7 @@ export const ConfigControllerProvider = React.memo(
         const [currentDialog, setCurrentDialog] = React.useState<{
             isNewCollection: boolean,
             parentCollection?: PersistedCollection,
-            editedCollectionPath?: string,
+            editedCollectionId?: string,
             fullPath?: string,
             parentCollectionIds: string[],
             initialValues?: {
@@ -111,7 +111,7 @@ export const ConfigControllerProvider = React.memo(
             namespace?: string,
             parentCollection?: PersistedCollection,
             currentPropertiesOrder?: string[],
-            editedCollectionPath: string,
+            editedCollectionId: string,
             fullPath?: string,
             parentCollectionIds: string[],
             collectionEditable: boolean;
@@ -124,20 +124,20 @@ export const ConfigControllerProvider = React.memo(
         }), []);
 
         const editCollection = useCallback(({
-                                                path,
+                                                id,
                                                 fullPath,
                                                 parentCollectionIds,
                                                 parentCollection
                                             }: {
-            path?: string,
+            id?: string,
             fullPath?: string,
             parentCollectionIds: string[],
             parentCollection?: PersistedCollection
         }) => {
-            console.debug("edit collection", path, fullPath, parentCollectionIds, parentCollection);
-            onAnalyticsEvent?.("edit_collection", { path, fullPath });
+            console.debug("Edit collection", id, fullPath, parentCollectionIds, parentCollection);
+            onAnalyticsEvent?.("edit_collection", { id, fullPath });
             setCurrentDialog({
-                editedCollectionPath: path,
+                editedCollectionId: id,
                 fullPath,
                 parentCollectionIds,
                 isNewCollection: false,
@@ -149,7 +149,7 @@ export const ConfigControllerProvider = React.memo(
         const editProperty = useCallback(({
                                               propertyKey,
                                               property,
-                                              editedCollectionPath,
+                                              editedCollectionId,
                                               currentPropertiesOrder,
                                               parentCollectionIds,
                                               collection
@@ -157,12 +157,12 @@ export const ConfigControllerProvider = React.memo(
             propertyKey?: string,
             property?: Property,
             currentPropertiesOrder?: string[],
-            editedCollectionPath: string,
+            editedCollectionId: string,
             parentCollectionIds: string[],
             collection: PersistedCollection,
         }) => {
-            console.debug("edit property", propertyKey, property, editedCollectionPath, currentPropertiesOrder, parentCollectionIds, collection);
-            onAnalyticsEvent?.("edit_property", { propertyKey, editedCollectionPath });
+            console.debug("edit property", propertyKey, property, editedCollectionId, currentPropertiesOrder, parentCollectionIds, collection);
+            onAnalyticsEvent?.("edit_property", { propertyKey, editedCollectionId });
             // namespace is all the path until the last dot
             const namespace = propertyKey && propertyKey.includes(".")
                 ? propertyKey.substring(0, propertyKey.lastIndexOf("."))
@@ -175,7 +175,7 @@ export const ConfigControllerProvider = React.memo(
                 property,
                 namespace,
                 currentPropertiesOrder,
-                editedCollectionPath,
+                editedCollectionId: editedCollectionId,
                 parentCollectionIds,
                 collectionEditable: collection?.editable ?? false
             });
@@ -185,7 +185,8 @@ export const ConfigControllerProvider = React.memo(
                                                         parentCollectionIds,
                                                         parentCollection,
                                                         initialValues,
-                                                        redirect
+                                                        redirect,
+                                                        sourceClick
                                                     }: {
             parentCollectionIds: string[],
             parentCollection?: PersistedCollection
@@ -194,10 +195,11 @@ export const ConfigControllerProvider = React.memo(
                 path?: string,
                 name?: string
             },
-            redirect: boolean
+            redirect: boolean,
+            sourceClick?: string
         }) => {
-            console.debug("create collection", parentCollectionIds, parentCollection, initialValues, redirect);
-            onAnalyticsEvent?.("create_collection", { parentCollectionIds, parentCollection, initialValues, redirect });
+            console.debug("Create collection", { parentCollectionIds, parentCollection, initialValues, redirect, sourceClick });
+            onAnalyticsEvent?.("create_collection", { parentCollectionIds, parentCollection, initialValues, redirect, sourceClick });
             setCurrentDialog({
                 isNewCollection: true,
                 parentCollectionIds,
@@ -260,10 +262,10 @@ export const ConfigControllerProvider = React.memo(
                         autoOpenTypeSelect={!currentPropertyDialog ? false : !currentPropertyDialog?.propertyKey}
                         inArray={false}
                         collectionEditable={currentPropertyDialog?.collectionEditable ?? false}
-                        getData={getData && currentPropertyDialog?.editedCollectionPath
+                        getData={getData && currentPropertyDialog?.editedCollectionId
                             ? () => {
-                                console.debug("get data for property", currentPropertyDialog?.editedCollectionPath);
-                                const resolvedPath = navigation.resolveAliasesFrom(currentPropertyDialog.editedCollectionPath!)
+                                console.debug("get data for property", currentPropertyDialog?.editedCollectionId);
+                                const resolvedPath = navigation.resolveAliasesFrom(currentPropertyDialog.editedCollectionId!)
                                 return getData(resolvedPath, []);
                             }
                             : undefined}
@@ -275,7 +277,7 @@ export const ConfigControllerProvider = React.memo(
                             if (!id) return;
                             const newProperty = !(currentPropertyDialog.propertyKey);
                             return collectionConfigController.saveProperty({
-                                path: currentPropertyDialog?.editedCollectionPath,
+                                path: currentPropertyDialog?.editedCollectionId,
                                 property,
                                 propertyKey: id,
                                 newPropertiesOrder: newProperty && currentPropertyDialog.currentPropertiesOrder ? [...currentPropertyDialog.currentPropertiesOrder, id] : undefined,
@@ -296,7 +298,7 @@ export const ConfigControllerProvider = React.memo(
                             if (!currentPropertyDialog?.propertyKey) return;
                             const newPropertiesOrder = currentPropertyDialog?.currentPropertiesOrder?.filter(p => p !== currentPropertyDialog?.propertyKey);
                             return collectionConfigController.deleteProperty({
-                                path: currentPropertyDialog?.editedCollectionPath,
+                                path: currentPropertyDialog?.editedCollectionId,
                                 propertyKey: currentPropertyDialog?.propertyKey,
                                 namespace: currentPropertyDialog?.namespace,
                                 newPropertiesOrder,

package/src/form/Field.tsx

@@ -0,0 +1,162 @@
+import * as React from "react";
+import { useFormex } from "./Formex";
+import { getIn, isFunction, isObject } from "./utils";
+import { FormexController } from "./types";
+
+export interface FieldInputProps<Value> {
+    /** Value of the field */
+    value: Value;
+    /** Name of the field */
+    name: string;
+    /** Multiple select? */
+    multiple?: boolean;
+    /** Is the field checked? */
+    checked?: boolean;
+    /** Change event handler */
+    onChange: (event: React.SyntheticEvent) => void,
+    /** Blur event handler */
+    onBlur: (event: React.FocusEvent) => void,
+}
+
+export interface FormexFieldProps<Value = any, FormValues extends object = any> {
+    field: FieldInputProps<Value>;
+    form: FormexController<FormValues>;
+}
+
+export type FieldValidator = (
+    value: any
+) => string | void | Promise<string | void>;
+
+export interface FieldConfig<V = any, C extends React.ElementType | undefined = undefined> {
+
+    /**
+     * Component to render. Can either be a string e.g. 'select', 'input', or 'textarea', or a component.
+     */
+    as?:
+        | C
+        | string
+        | React.ForwardRefExoticComponent<any>;
+
+    /**
+     * Children render function <Field name>{props => ...}</Field>)
+     */
+    children?: ((props: FormexFieldProps<V>) => React.ReactNode) | React.ReactNode;
+
+    /**
+     * Validate a single field value independently
+     */
+    // validate?: FieldValidator;
+
+    /**
+     * Used for 'select' and related input types.
+     */
+    multiple?: boolean;
+
+    /**
+     * Field name
+     */
+    name: string;
+
+    /** HTML input type */
+    type?: string;
+
+    /** Field value */
+    value?: any;
+
+    /** Inner ref */
+    innerRef?: (instance: any) => void;
+
+}
+
+export type FieldProps<T, C extends React.ElementType | undefined> = {
+    as?: C;
+} & (C extends React.ElementType ? (React.ComponentProps<C> & FieldConfig<T, C>) : FieldConfig<T, C>);
+
+export function Field<T, C extends React.ElementType | undefined = undefined>({
+                                                                                  validate,
+                                                                                  name,
+                                                                                  children,
+                                                                                  as: is, // `as` is reserved in typescript lol
+                                                                                  // component,
+                                                                                  className,
+                                                                                  ...props
+                                                                              }: FieldProps<T, C>) {
+    const formex = useFormex();
+
+    const field = getFieldProps({ name, ...props }, formex);
+
+    if (isFunction(children)) {
+        return children({ field, form: formex });
+    }
+
+    // if (component) {
+    //     if (typeof component === "string") {
+    //         const { innerRef, ...rest } = props;
+    //         return React.createElement(
+    //             component,
+    //             { ref: innerRef, ...field, ...rest, className },
+    //             children
+    //         );
+    //     }
+    //     return React.createElement(
+    //         component,
+    //         { field, form: formex, ...props, className },
+    //         children
+    //     );
+    // }
+
+    // default to input here so we can check for both `as` and `children` above
+    const asElement = is || "input";
+
+    if (typeof asElement === "string") {
+        const { innerRef, ...rest } = props;
+        return React.createElement(
+            asElement,
+            { ref: innerRef, ...field, ...rest, className },
+            children
+        );
+    }
+
+    return React.createElement(asElement, { ...field, ...props, className }, children);
+}
+
+const getFieldProps = (nameOrOptions: string | FieldConfig<any>, formex:FormexController<any>): FieldInputProps<any> => {
+    const isAnObject = isObject(nameOrOptions);
+    const name = isAnObject
+        ? (nameOrOptions as FieldConfig<any>).name
+        : nameOrOptions;
+    const valueState = getIn(formex.values, name);
+
+    const field: FieldInputProps<any> = {
+        name,
+        value: valueState,
+        onChange: formex.handleChange,
+        onBlur: formex.handleBlur,
+    };
+    if (isAnObject) {
+        const {
+            type,
+            value: valueProp, // value is special for checkboxes
+            as: is,
+            multiple,
+        } = nameOrOptions as FieldConfig<any>;
+
+        if (type === "checkbox") {
+            if (valueProp === undefined) {
+                field.checked = !!valueState;
+            } else {
+                field.checked = !!(
+                    Array.isArray(valueState) && ~valueState.indexOf(valueProp)
+                );
+                field.value = valueProp;
+            }
+        } else if (type === "radio") {
+            field.checked = valueState === valueProp;
+            field.value = valueProp;
+        } else if (is === "select" && multiple) {
+            field.value = field.value || [];
+            field.multiple = true;
+        }
+    }
+    return field;
+};

package/src/form/Formex.tsx

@@ -0,0 +1,8 @@
+import React, { useContext } from "react";
+import { FormexController } from "./types";
+
+const FormexContext = React.createContext<FormexController<any>>({} as any);
+
+export const useFormex = <T extends object>() => useContext<FormexController<T>>(FormexContext);
+
+export const Formex = FormexContext.Provider;