@firecms/core 3.0.0-beta.2-pre.2 → 3.0.0-beta.2-pre.4

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.2",
+  "version": "3.0.0-beta.2-pre.4",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -38,12 +38,12 @@
     "generateIcons": "ts-node --esm src/icons/generateIcons.ts"
   },
   "dependencies": {
-    "@firecms/ui": "^3.0.0-beta.2-pre.2",
+    "@firecms/formex": "^3.0.0-beta.2-pre.4",
+    "@firecms/ui": "^3.0.0-beta.2-pre.4",
     "@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",
@@ -107,7 +107,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "f3f62fc3cbc4f0d9d1a26817a14cff06393b7c2b",
+  "gitHead": "a947c08aada0e374aec7dff2b0dc9e540e170834",
   "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,
@@ -274,7 +274,7 @@ export function ArrayItemOptions({
     const iconRef = React.useRef<HTMLDivElement>(null);
     useOutsideAlerter(iconRef, () => setMenuOpen(false));
 
-    return <div className={`ml-2 flex ${direction === "row" ? "flex-row-reverse" : "flex-col"} items-center`}
+    return <div className={`pl-2 pt-1 pb-4 flex ${direction === "row" ? "flex-row-reverse" : "flex-col"} items-center`}
                 ref={iconRef}
                 {...provided.dragHandleProps}>
         <Tooltip
@@ -302,14 +302,21 @@ export function ArrayItemOptions({
             </IconButton>
 
             <Menu
+                portalContainer={iconRef.current}
                 open={menuOpen}
                 trigger={<div/>}>
 
-                <MenuItem dense onClick={() => remove(index)}>
+                <MenuItem dense onClick={(e) => {
+                    setMenuOpen(false);
+                    remove(index);
+                }}>
                     <RemoveIcon size={"small"}/>
                     Remove
                 </MenuItem>
-                <MenuItem dense onClick={() => copy(index)}>
+                <MenuItem dense onClick={() => {
+                    setMenuOpen(false);
+                    copy(index);
+                }}>
                     <ContentCopyIcon size={"small"}/>
                     Copy
                 </MenuItem>

package/src/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -8,7 +8,7 @@ import { CellRendererParams, VirtualTableColumn } from "../VirtualTable";
 import { getValueInPath } from "../../util";
 import { getRowHeight } from "../VirtualTable/common";
 import { EntityCollectionRowActions } from "./EntityCollectionRowActions";
-import { EntityCollectionTableController } from "./types";
+import { EntityCollectionTableController } from "../common/types";
 import { CollectionTableToolbar } from "./internal/CollectionTableToolbar";
 import { EntityCollectionTableProps } from "./EntityCollectionTableProps";
 import { EntityTableCell } from "./internal/EntityTableCell";
@@ -16,13 +16,8 @@ import { CustomFieldValidator } from "../../form/validation";
 import { renderSkeletonText } from "../../preview";
 import { propertiesToColumns } from "./column_utils";
 import { ErrorView } from "../ErrorView";
-import { SimpleTable } from "./SimpleTable";
+import { SelectableTable } from "../SelectableTable/SelectableTable";
 
-const DEFAULT_STATE = {} as any;
-
-export const EntityCollectionTableContext = React.createContext<EntityCollectionTableController<any>>(DEFAULT_STATE);
-
-export const useEntityCollectionTableController = () => useContext<EntityCollectionTableController<any>>(EntityCollectionTableContext);
 
 /**
  * This component is in charge of rendering a collection table with a high
@@ -313,21 +308,20 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
                     actions={actions}
                     loading={tableController.dataLoading}/>
 
-                <SimpleTable columns={columns}
-                             size={size}
-                             inlineEditing={inlineEditing}
-                             cellRenderer={cellRenderer}
-                             onEntityClick={onEntityClick}
-                             highlightedRow={useCallback((entity: Entity<M>) => selectedEntityIds?.includes(entity.id) ?? false, [selectedEntityIds])}
-                             tableController={tableController}
-                             onValueChange={onValueChange}
-                             onColumnResize={onColumnResize}
-                             hoverRow={hoverRow}
-                             filterable={filterable}
-                             emptyComponent={emptyComponent}
-                             endAdornment={endAdornment}
-                             AddColumnComponent={AddColumnComponent}/>
-
+                <SelectableTable columns={columns}
+                                 size={size}
+                                 inlineEditing={inlineEditing}
+                                 cellRenderer={cellRenderer}
+                                 onEntityClick={onEntityClick}
+                                 highlightedRow={useCallback((entity: Entity<M>) => selectedEntityIds?.includes(entity.id) ?? false, [selectedEntityIds])}
+                                 tableController={tableController}
+                                 onValueChange={onValueChange}
+                                 onColumnResize={onColumnResize}
+                                 hoverRow={hoverRow}
+                                 filterable={filterable}
+                                 emptyComponent={emptyComponent}
+                                 endAdornment={endAdornment}
+                                 AddColumnComponent={AddColumnComponent}/>
 
             </div>
         );

package/src/components/EntityCollectionTable/EntityCollectionTableProps.tsx

@@ -10,12 +10,8 @@ import {
     SelectionController,
     User
 } from "../../types";
-import { OnCellValueChange, UniqueFieldValidator } from "./types";
+import { OnCellValueChange, OnColumnResizeParams, UniqueFieldValidator } from "../common/types";
 
-/**
- * @group Collection components
- */
-export type OnColumnResizeParams = { width: number, key: string };
 
 /**
  * @group Collection components

package/src/components/EntityCollectionTable/PropertyTableCell.tsx

@@ -24,13 +24,13 @@ import { getPreviewSizeFrom } from "../../preview/util";
 import { isReadOnly } from "../../util";
 
 import { CustomFieldValidator, mapPropertyToYup } from "../../form/validation";
-import { useEntityCollectionTableController } from "./EntityCollectionTable";
 import { useClearRestoreValue, useFireCMSContext } from "../../hooks";
 
 import { EntityTableCell } from "./internal/EntityTableCell";
 import { EntityTableCellActions } from "./internal/EntityTableCellActions";
 
 import { getRowHeight } from "../VirtualTable/common";
+import { useSelectableTableController } from "../SelectableTable/SelectableTableContext";
 
 export interface PropertyTableCellProps<T extends CMSType, M extends Record<string, any>> {
     propertyKey: string;
@@ -84,7 +84,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any, any>>(
             selectedCell,
             select,
             setPopupCell
-        } = useEntityCollectionTableController();
+        } = useSelectableTableController();
 
         const selected = selectedCell?.propertyKey === propertyKey &&
             selectedCell?.entity.path === entity.path &&

package/src/components/EntityCollectionTable/column_utils.tsx

@@ -3,7 +3,7 @@ import { getTableCellAlignment, getTablePropertyColumnWidth } from "./internal/c
 import { FilterValues, ResolvedProperties, ResolvedProperty } from "../../types";
 import { VirtualTableColumn } from "../VirtualTable";
 import { getIconForProperty, getResolvedPropertyInPath } from "../../util";
-import { getColumnKeysForProperty } from "../EntityCollectionView/useColumnsIds";
+import { getColumnKeysForProperty } from "../common/useColumnsIds";
 
 export function buildIdColumn(largeLayout?: boolean): VirtualTableColumn {
     return {

package/src/components/EntityCollectionTable/index.tsx

@@ -4,17 +4,9 @@ export {
 
 export type {
     EntityCollectionTableProps,
-    OnColumnResizeParams
 } from "./EntityCollectionTableProps";
 
-export type {
-    UniqueFieldValidator,
-    OnCellValueChange,
-    OnCellValueChangeParams
-} from "./types";
-
 export * from "./PropertyTableCell";
-export * from "./SimpleTable";
 export * from "./EntityCollectionRowActions";
-export * from "./useDataSourceEntityCollectionTableController";
+export * from "../common/useDataSourceEntityCollectionTableController";
 export * from "./column_utils";

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

@@ -14,16 +14,17 @@ 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";
 import { ElementResizeListener } from "./ElementResizeListener";
-import { ErrorView, OnCellValueChangeParams } from "../../../../components";
+import { ErrorView } from "../../../ErrorView";
 import { getPropertyInPath, isReadOnly, resolveCollection } from "../../../../util";
 import { Button, ClearIcon, DialogActions, IconButton, Typography } from "@firecms/ui";
 import { PropertyFieldBinding } from "../../../../form";
 import { useCustomizationController, useFireCMSContext } from "../../../../hooks";
+import { OnCellValueChangeParams } from "../../../common";
 
 interface PopupFormFieldProps<M extends Record<string, any>> {
     entity?: Entity<M>;
@@ -218,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
@@ -393,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>
     );