@firecms/core 3.0.0-beta.2-pre.3 → 3.0.0-beta.2-pre.5

package/dist/types/fields.d.ts

@@ -20,7 +20,6 @@ export interface FieldProps<T extends CMSType = any, CustomProps = any, M extend
     /**
      * Initial value of this field
      */
-    initialValue: T | undefined;
     /**
      * Set value of field directly
      */

package/dist/types/firecms.d.ts

@@ -3,7 +3,7 @@ import { User } from "./user";
 import { AuthController } from "./auth";
 import { DataSourceDelegate } from "./datasource";
 import { EntityCollection, EntityCustomView } from "./collections";
-import { CMSView } from "./navigation";
+import { CMSView, NavigationController } from "./navigation";
 import { FireCMSContext } from "./firecms_context";
 import { PropertyConfig } from "./property_config";
 import { Locale } from "./locales";
@@ -62,24 +62,17 @@ export type FireCMSProps<UserType extends User, EC extends EntityCollection> = {
          */
         loading: boolean;
     }) => React.ReactNode;
-    /**
-     * List of the mapped collections in the CMS.
-     * Each entry relates to a collection in the root database.
-     * Each of the navigation entries in this field
-     * generates an entry in the main menu.
-     */
-    collections?: EC[] | EntityCollectionsBuilder<EC>;
-    /**
-     * Custom additional views created by the developer, added to the main
-     * navigation
-     */
-    views?: CMSView[] | CMSViewsBuilder;
     /**
      * Record of custom form fields to be used in the CMS.
      * You can use the key to reference the custom field in
      * the `propertyConfig` prop of a property in a collection.
      */
     propertyConfigs?: Record<string, PropertyConfig>;
+    /**
+     * This controller is in charge of the navigation of the CMS.
+     * It is in charge of resolving the collection and entity paths.
+     */
+    navigationController: NavigationController;
     /**
      * List of additional custom views for entities.
      * You can use the key to reference the custom view in
@@ -109,18 +102,6 @@ export type FireCMSProps<UserType extends User, EC extends EntityCollection> = {
      * Delegate for implementing your auth operations.
      */
     authController: AuthController<UserType>;
-    /**
-     * Path under the navigation routes of the CMS will be created. Defaults to `/`.
-     * Internally FireCMS uses `react-router` to create the routes, the base path is attached to the
-     * `BrowserRouter` component. If you are using FireCMS in a subpath of your website, you can use
-     * this prop to specify the base path.
-     */
-    basePath?: string;
-    /**
-     * Path under the collection routes of the CMS will be created.
-     * Defaults to `/c`.
-     */
-    baseCollectionPath?: string;
     /**
      * Use this controller to access the configuration that is stored locally,
      * and not defined in code

package/dist/types/navigation.d.ts

@@ -12,12 +12,12 @@ export type NavigationController = {
      * Each of the navigation entries in this field
      * generates an entry in the main menu.
      */
-    collections: EntityCollection[];
+    collections?: EntityCollection[];
     /**
      * Custom additional views created by the developer, added to the main
      * navigation
      */
-    views: CMSView[];
+    views?: CMSView[];
     /**
      * Configuration for the views that should be displayed at the top
      * level of the navigation (e.g. in the home page or the navigation

package/dist/types/plugins.d.ts

@@ -22,14 +22,6 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
      */
     loading?: boolean;
     collections?: {
-        /**
-         * Use this method to inject collections to the CMS.
-         * You receive the current collections as a parameter, and you can return
-         * a new list of collections.
-         * @see {@link joinCollectionLists}
-         * @param collections
-         */
-        injectCollections?: (collections: EntityCollection[]) => EntityCollection[];
         /**
          * Use this component to add custom actions to the entity collections
          * toolbar.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-beta.2-pre.3",
+  "version": "3.0.0-beta.2-pre.5",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -38,15 +38,15 @@
     "generateIcons": "ts-node --esm src/icons/generateIcons.ts"
   },
   "dependencies": {
-    "@firecms/ui": "^3.0.0-beta.2-pre.3",
+    "@firecms/formex": "^3.0.0-beta.2-pre.5",
+    "@firecms/ui": "^3.0.0-beta.2-pre.5",
     "@fontsource/ibm-plex-mono": "^5.0.8",
     "@fontsource/roboto": "^5.0.8",
     "@hello-pangea/dnd": "^16.5.0",
     "date-fns": "^3.3.1",
-    "formik": "^2.4.5",
     "history": "^5.3.0",
     "js-search": "^2.0.1",
-    "markdown-it": "^13.0.2",
+    "markdown-it": "^14.0.0",
     "notistack": "^3.0.1",
     "object-hash": "^3.0.0",
     "react-image-file-resizer": "^0.4.8",
@@ -99,15 +99,15 @@
     "react-router-dom": "^6.22.0",
     "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",
-    "tsd": "^0.28.1",
+    "tsd": "^0.30.4",
     "typescript": "^5.3.3",
-    "vite": "^4.5.2"
+    "vite": "^5.1.1"
   },
   "files": [
     "dist",
     "src"
   ],
-  "gitHead": "c78c58643c73ba776dfbcb8315d1a99160bb607a",
+  "gitHead": "5159646cfdb35e11cc510080bd3cff17104d0cb4",
   "publishConfig": {
     "access": "public"
   }

package/src/components/ArrayContainer.tsx

@@ -48,7 +48,7 @@ export function ArrayContainer<T>({
                                       value,
                                       disabled = false,
                                       buildEntry,
-                                      size,
+                                      size = "medium",
                                       onInternalIdAdded,
                                       includeAddButton,
                                       newDefaultEntry,

package/src/components/EntityCollectionTable/internal/popup_field/PopupFormField.tsx

@@ -14,7 +14,7 @@ import {
     ResolvedProperties,
     ResolvedProperty
 } from "../../../../types";
-import { Form, Formik, FormikProps } from "formik";
+import { Formex, useCreateFormex } from "@firecms/formex";
 import { useDraggable } from "./useDraggable";
 import { CustomFieldValidator, getYupEntitySchema } from "../../../../form/validation";
 import { useWindowSize } from "./useWindowSize";
@@ -219,139 +219,134 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
     if (!entity)
         return <></>;
 
-    const form = entity && (
+    // enableReinitialize={true}
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const formex = useCreateFormex<M>({
+        initialValues: (entity?.values ?? {}) as EntityValues<M>,
+        validation: (values) => {
+            return validationSchema?.validate(values)
+        },
+        validateOnInitialRender: true,
+        onSubmit: (values, actions) => {
+            saveValue(values)
+                .then(() => onClose())
+                .finally(() => actions.setSubmitting(false));
+        }
+    });
+
+    const { values, isSubmitting, setFieldValue, handleSubmit } = formex;
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+        if (!equal(values, internalValue)) {
+            setInternalValue(values);
+        }
+    }, [values]);
+
+    if (!entity)
+        return <ErrorView
+            error={"PopupFormField misconfiguration"}/>;
+
+    if (!collection)
+        return <></>;
+
+    const disabled = isSubmitting;
+
+    const formContext: FormContext<M> = {
+        collection,
+        entityId,
+        values,
+        path,
+        setFieldValue,
+        save: saveValue
+    };
+
+    const property: ResolvedProperty<any> | undefined = propertyKey && getPropertyInPath(collection.properties, propertyKey as string);
+    const fieldProps: PropertyFieldBindingProps<any, M> | undefined = propertyKey && property
+        ? {
+            propertyKey: propertyKey as string,
+            disabled: isSubmitting || isReadOnly(property) || !!property.disabled,
+            property,
+            includeDescription: false,
+            underlyingValueHasChanged: false,
+            context: formContext,
+            tableMode: true,
+            partOfArray: false,
+            partOfBlock: false,
+            autoFocus: open
+        }
+        : undefined;
+
+    let internalForm = <>
         <div
-            className={`text-gray-900 dark:text-white overflow-auto rounded rounded-md bg-white dark:bg-gray-950 ${!open ? "hidden" : ""} cursor-grab max-w-[100vw]`}>
-            <Formik
-                initialValues={(entity?.values ?? {}) as EntityValues<M>}
-                enableReinitialize={true}
-                validationSchema={validationSchema}
-                validateOnMount={true}
-                validate={(values) => console.debug("Validating", values)}
-                onSubmit={(values, actions) => {
-                    saveValue(values)
-                        .then(() => onClose())
-                        .finally(() => actions.setSubmitting(false));
-                }}
-            >
-                {({
-                      values,
-                      setFieldValue,
-                      handleSubmit,
-                      isSubmitting
-                  }: FormikProps<EntityValues<M>>) => {
-
-                    // eslint-disable-next-line react-hooks/rules-of-hooks
-                    useEffect(() => {
-                        if (!equal(values, internalValue)) {
-                            setInternalValue(values);
-                        }
-                    }, [values]);
-
-                    if (!entity)
-                        return <ErrorView
-                            error={"PopupFormField misconfiguration"}/>;
-
-                    if (!collection)
-                        return <></>;
-
-                    const disabled = isSubmitting;
-
-                    const formContext: FormContext<M> = {
-                        collection,
-                        entityId,
-                        values,
-                        path,
-                        setFieldValue,
-                        save: saveValue
-                    };
-
-                    const property: ResolvedProperty<any> | undefined = propertyKey && getPropertyInPath(collection.properties, propertyKey as string);
-                    const fieldProps: PropertyFieldBindingProps<any, M> | undefined = propertyKey && property
-                        ? {
-                            propertyKey: propertyKey as string,
-                            disabled: isSubmitting || isReadOnly(property) || !!property.disabled,
-                            property,
-                            includeDescription: false,
-                            underlyingValueHasChanged: false,
-                            context: formContext,
-                            tableMode: true,
-                            partOfArray: false,
-                            partOfBlock: false,
-                            autoFocus: open
-                        }
-                        : undefined;
-
-                    let internalForm = <>
-                        <div
-                            key={`popup_form_${tableKey}_${entityId}_${propertyKey}`}
-                            className="w-[560px] max-w-full max-h-[85vh]">
-                            <Form
-                                onSubmit={handleSubmit}
-                                noValidate>
-
-                                <div
-                                    className="mb-1 p-4 flex flex-col relative">
-                                    <div
-                                        ref={innerRef}
-                                        className="cursor-auto"
-                                        style={{ cursor: "auto !important" }}>
-                                        {fieldProps &&
-                                            <PropertyFieldBinding {...fieldProps}/>}
-                                    </div>
-                                </div>
-
-                                <DialogActions>
-                                    <Button
-                                        variant="filled"
-                                        color="primary"
-                                        type="submit"
-                                        disabled={disabled}
-                                    >
-                                        Save
-                                    </Button>
-                                </DialogActions>
-
-                            </Form>
-
-                        </div>
-                    </>;
-
-                    const plugins = customizationController.plugins;
-                    if (plugins) {
-                        // const formController: FormContext<M> = {
-                        //     values,
-                        //     setFieldValue
-                        // }
-                        plugins.forEach((plugin: FireCMSPlugin) => {
-                            if (plugin.form?.provider) {
-                                internalForm = (
-                                    <plugin.form.provider.Component
-                                        status={"existing"}
-                                        path={path}
-                                        collection={collection}
-                                        entity={entity}
-                                        context={fireCMSContext}
-                                        currentEntityId={entityId}
-                                        formContext={formContext}
-                                        {...plugin.form.provider.props}>
-                                        {internalForm}
-                                    </plugin.form.provider.Component>
-                                );
-                            }
-                        });
-                    }
-                    return internalForm;
-                }}
-            </Formik>
-
-            {savingError &&
-                <Typography color={"error"}>
-                    {savingError.message}
-                </Typography>
-            }
+            key={`popup_form_${tableKey}_${entityId}_${propertyKey}`}
+            className="w-[560px] max-w-full max-h-[85vh]">
+            <form
+                onSubmit={handleSubmit}
+                noValidate>
+
+                <div
+                    className="mb-1 p-4 flex flex-col relative">
+                    <div
+                        ref={innerRef}
+                        className="cursor-auto"
+                        style={{ cursor: "auto !important" }}>
+                        {fieldProps &&
+                            <PropertyFieldBinding {...fieldProps}/>}
+                    </div>
+                </div>
+
+                <DialogActions>
+                    <Button
+                        variant="filled"
+                        color="primary"
+                        type="submit"
+                        disabled={disabled}
+                    >
+                        Save
+                    </Button>
+                </DialogActions>
+
+            </form>
+
         </div>
-    );
+
+    </>;
+
+    const plugins = customizationController.plugins;
+    if (plugins) {
+        // const formController: FormContext<M> = {
+        //     values,
+        //     setFieldValue
+        // }
+        plugins.forEach((plugin: FireCMSPlugin) => {
+            if (plugin.form?.provider) {
+                internalForm = (
+                    <plugin.form.provider.Component
+                        status={"existing"}
+                        path={path}
+                        collection={collection}
+                        entity={entity}
+                        context={fireCMSContext}
+                        currentEntityId={entityId}
+                        formContext={formContext}
+                        {...plugin.form.provider.props}>
+                        {internalForm}
+                    </plugin.form.provider.Component>
+                );
+            }
+        });
+    }
+    const form = <div
+        className={`text-gray-900 dark:text-white overflow-auto rounded rounded-md bg-white dark:bg-gray-950 ${!open ? "hidden" : ""} cursor-grab max-w-[100vw]`}>
+        {internalForm}
+
+        {savingError &&
+            <Typography color={"error"}>
+                {savingError.message}
+            </Typography>
+        }
+    </div>;
 
     const draggable = (
         <div
@@ -394,9 +389,10 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
 
     return (
         <Portal.Root asChild
-                     container={container}
-        >
-            {draggable}
+                     container={container}>
+            <Formex value={formex}>
+                {draggable}
+            </Formex>
         </Portal.Root>
     );
 

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -57,7 +57,7 @@ import {
     Tooltip,
     Typography
 } from "@firecms/ui";
-import { setIn } from "formik";
+import { setIn } from "@firecms/formex";
 import { getSubcollectionColumnId } from "../EntityCollectionTable/internal/common";
 import {
     OnCellValueChange,

package/src/components/SelectableTable/filters/StringNumberFilterField.tsx

@@ -112,7 +112,6 @@ export function StringNumberFilterField({
                         updateFilter(operation, val);
                     }}
                     endAdornment={internalValue && <IconButton
-                        className="absolute right-3 top-2"
                         onClick={(e) => updateFilter(operation, undefined)}>
                         <ClearIcon/>
                     </IconButton>}

package/src/components/VirtualTable/VirtualTableHeader.tsx

@@ -198,7 +198,7 @@ function FilterForm<M>({
                            onHover,
                            createFilterField,
                            hidden,
-                           setHidden,
+                           setHidden
                        }: FilterFormProps<M>) {
 
     const id = column.key;
@@ -232,7 +232,13 @@ function FilterForm<M>({
 
     if (!filterField) return null;
     return (
-        <div className={"text-gray-900 dark:text-white"}>
+        <form noValidate={true}
+              onSubmit={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  submit();
+              }}
+              className={"text-gray-900 dark:text-white"}>
             <div
                 className={cn(defaultBorderMixin, "py-4 px-6 text-xs font-semibold uppercase border-b")}>
                 {column.title ?? id}
@@ -252,9 +258,9 @@ function FilterForm<M>({
                 <Button
                     variant="outlined"
                     color="primary"
-                    onClick={submit}>Filter</Button>
+                    type="submit">Filter</Button>
             </div>
-        </div>
+        </form>
     );
 
 }

package/src/core/FireCMS.tsx

@@ -15,7 +15,6 @@ import { SideDialogsControllerContext } from "../contexts/SideDialogsControllerC
 import { useLocaleConfig } from "../internal/useLocaleConfig";
 import { CenteredView } from "@firecms/ui";
 import { DialogsProvider } from "../contexts/DialogsProvider";
-import { useBuildNavigationController } from "../internal/useBuildNavigationController";
 import { useBuildDataSource } from "../internal/useBuildDataSource";
 import { useBuildCustomizationController } from "../internal/useBuildCustomizationController";
 import { CustomizationControllerContext } from "../contexts/CustomizationControllerContext";
@@ -50,25 +49,11 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
         propertyConfigs,
         entityViews,
         components,
-        baseCollectionPath,
-        basePath,
-        collections,
-        views
+        navigationController,
     } = props;
 
     useLocaleConfig(locale);
 
-    const navigationController = useBuildNavigationController({
-        basePath,
-        baseCollectionPath,
-        authController,
-        collections,
-        views,
-        userConfigPersistence,
-        dataSource: dataSourceDelegate,
-        plugins
-    });
-
     /**
      * Controller in charge of fetching and persisting data
      */

package/src/core/NavigationRoutes.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { Route, Routes, useLocation } from "react-router-dom";
 import { CMSView } from "../types";
-import { DefaultHomePage, EntityCollectionView, NotFoundPage } from "../components";
+import { DefaultHomePage, EntityCollectionView, ErrorBoundary, NotFoundPage } from "../components";
 import { useNavigationController } from "../hooks";
 import { toArray } from "../util/arrays";
 
@@ -70,13 +70,15 @@ export const NavigationRoutes = React.memo<NavigationRoutesProps>(
                     return <Route path={urlPath + "/*"}
                                   key={`navigation_${collection.id ?? collection.path}`}
                                   element={
-                                      <EntityCollectionView
-                                          key={`collection_view_${collection.id ?? collection.path}`}
-                                          isSubCollection={false}
-                                          parentCollectionIds={[]}
-                                          fullPath={collection.id ?? collection.path}
-                                          {...collection}
-                                          Actions={toArray(collection.Actions)}/>
+                                      <ErrorBoundary>
+                                          <EntityCollectionView
+                                              key={`collection_view_${collection.id ?? collection.path}`}
+                                              isSubCollection={false}
+                                              parentCollectionIds={[]}
+                                              fullPath={collection.id ?? collection.path}
+                                              {...collection}
+                                              Actions={toArray(collection.Actions)}/>
+                                      </ErrorBoundary>
                                   }/>;
                 }
             );