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

package/src/form/components/CustomIdField.tsx

@@ -1,7 +1,6 @@
 import React, { useMemo } from "react";
 
-import { ErrorMessage } from "formik";
-
+// import { ErrorMessage } from "@firecms/formex";
 import { Entity, EntityStatus, EnumValueConfig, EnumValues } from "../../types";
 
 import { useClipboard, useSnackbarController } from "../../hooks";
@@ -14,11 +13,13 @@ import {
     Select,
     SelectItem,
     TextField,
-    Tooltip
+    Tooltip,
+    Typography
 } from "@firecms/ui";
 import { EnumValuesChip } from "../../preview";
 import { useCustomizationController } from "../../hooks/useCustomizationController";
 import { CustomizationController } from "../../types/customization_controller";
+import { useFormex } from "@firecms/formex";
 
 export function CustomIdField<M extends Record<string, any>>({
                                                                  customId,
@@ -38,6 +39,7 @@ export function CustomIdField<M extends Record<string, any>>({
     loading: boolean
 }) {
 
+    const { errors } = useFormex();
     const disabled = status === "existing" || !customId;
     const idSetAutomatically = status !== "existing" && !customId;
 
@@ -62,33 +64,33 @@ export function CustomIdField<M extends Record<string, any>>({
         disabled: disabled || loading,
         name: "id",
         value: (entity && status === "existing" ? entity.id : entityId) ?? "",
-        endAdornment: entity
-            ? (
-                <>
-
-                    <Tooltip title={"Copy"}>
-                        <IconButton onClick={(e) => copy(entity.id)}
-                                    aria-label="copy-id">
-                            <ContentCopyIcon size={"small"}/>
-                        </IconButton>
-                    </Tooltip>
-
-                    {customizationController?.entityLinkBuilder &&
-                        <Tooltip title={"Open in the console"}>
-                            <IconButton component={"a"}
-                                        href={customizationController.entityLinkBuilder({ entity })}
-                                        rel="noopener noreferrer"
-                                        target="_blank"
-                                        onClick={(e) => e.stopPropagation()}
-                                        aria-label="go-to-datasource">
-                                <OpenInNewIcon size={"small"}/>
+        endAdornment: loading ? <CircularProgress size={"small"}/> : (entity
+                ? (
+                    <>
+
+                        <Tooltip title={"Copy"}>
+                            <IconButton onClick={(e) => copy(entity.id)}
+                                        aria-label="copy-id">
+                                <ContentCopyIcon size={"small"}/>
                             </IconButton>
-                        </Tooltip>}
-
-                </>
-            )
-            : undefined
-
+                        </Tooltip>
+
+                        {customizationController?.entityLinkBuilder &&
+                            <Tooltip title={"Open in the console"}>
+                                <IconButton component={"a"}
+                                            href={customizationController.entityLinkBuilder({ entity })}
+                                            rel="noopener noreferrer"
+                                            target="_blank"
+                                            onClick={(e) => e.stopPropagation()}
+                                            aria-label="go-to-datasource">
+                                    <OpenInNewIcon size={"small"}/>
+                                </IconButton>
+                            </Tooltip>}
+
+                    </>
+                )
+                : undefined
+        )
     };
 
     return (
@@ -120,7 +122,6 @@ export function CustomIdField<M extends Record<string, any>>({
             {!enumValues &&
                 <TextField {...fieldProps}
                            error={error}
-                           endAdornment={loading ? <CircularProgress size={"small"}/> : undefined}
                            placeholder={customId === "optional" ? "Autogenerated ID, it can be manually changed" : (status === "new" || status === "copy" ? "ID of the new document" : "ID of the document")}
                            onChange={(event) => {
                                let value = event.target.value;
@@ -128,10 +129,10 @@ export function CustomIdField<M extends Record<string, any>>({
                                return onChange(value.length ? value : undefined);
                            }}/>}
 
-            <ErrorMessage name={"id"}
-                          component="div">
-                {(_) => "You need to specify an ID"}
-            </ErrorMessage>
+            {errors.id && <Typography variant={"caption"}
+                                      className={"ml-3.5 text-red-500 dark:text-red-500"}>
+                {errors.id}
+            </Typography>}
 
         </>
     );

package/src/form/components/ErrorFocus.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect } from "react";
-import { useFormikContext } from "formik";
+import { useFormex } from "@firecms/formex";
 
 export const ErrorFocus = ({ containerRef }:
                                {
                                    containerRef?: React.RefObject<HTMLDivElement>
                                }) => {
-    const { isSubmitting, isValidating, errors } = useFormikContext();
+    const { isSubmitting, isValidating, errors } = useFormex();
 
     useEffect(() => {
         const keys = Object.keys(errors);
@@ -21,7 +21,7 @@ export const ErrorFocus = ({ containerRef }:
                 if (scrollableParent) {
                     const top = errorElement.getBoundingClientRect().top;
                     scrollableParent.scrollTo({
-                        top: scrollableParent.scrollTop + top,
+                        top: scrollableParent.scrollTop + top - 196,
                         behavior: "smooth"
                     });
                 }

package/src/form/components/index.tsx

@@ -1,3 +1,2 @@
 export * from "./FormikArrayContainer";
-export * from "./SwitchControl";
 export * from "./FieldHelperText";

package/src/form/field_bindings/BlockFieldBinding.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from "react";
 
-import { FastField, FieldProps as FormikFieldProps, useFormikContext } from "formik";
+import { Field, useFormex } from "@firecms/formex";
 
 import { FieldHelperText, FormikArrayContainer } from "../components";
 import { LabelWithIcon } from "../../components";
@@ -148,7 +148,7 @@ function BlockEntry({
     const type = value && value[typeField];
     const [typeInternal, setTypeInternal] = useState<string | undefined>(type ?? undefined);
 
-    const formikContext = useFormikContext();
+    const formex = useFormex();
 
     useEffect(() => {
         if (!type) {
@@ -188,20 +188,20 @@ function BlockEntry({
     const updateType = (newType: any) => {
         const newSelectedProperty = newType ? properties[newType] : undefined;
         setTypeInternal(newType);
-        formikContext.setFieldTouched(typeFieldName);
-        formikContext.setFieldValue(typeFieldName, newType);
-        formikContext.setFieldValue(valueFieldName, newSelectedProperty ? getDefaultValueFor(newSelectedProperty) : null);
+        formex.setFieldTouched(typeFieldName, true);
+        formex.setFieldValue(typeFieldName, newType);
+        formex.setFieldValue(valueFieldName, newSelectedProperty ? getDefaultValueFor(newSelectedProperty) : null);
     };
 
     return (
         <div className={cn(paperMixin, "bg-transparent p-4 my-4 py-8")}>
 
-            <FastField
-                required={true}
+            <Field
                 name={typeFieldName}
             >
-                {(fieldProps: FormikFieldProps) =>
-                    (
+                {(fieldProps) => {
+                    const value1 = fieldProps.field.value !== undefined && fieldProps.field.value !== null ? fieldProps.field.value as string : "";
+                    return (
                         <>
                             <Select
                                 className="mb-2"
@@ -209,7 +209,7 @@ function BlockEntry({
                                                          className={"px-4 py-2 font-medium"}>Type</Typography>}
                                 size={"small"}
                                 position={"item-aligned"}
-                                value={fieldProps.field.value !== undefined && fieldProps.field.value !== null ? fieldProps.field.value : ""}
+                                value={value1}
                                 renderValue={(enumKey: any) =>
                                     <EnumValuesChip
                                         enumKey={enumKey}
@@ -231,9 +231,10 @@ function BlockEntry({
                                 )}
                             </Select>
                         </>
-                    )
+                    );
                 }
-            </FastField>
+                }
+            </Field>
 
             {fieldProps && (
                 // It is important to use this key to force a re-render of the field on type change

package/src/hooks/index.tsx

@@ -22,3 +22,4 @@ export * from "./useLargeLayout";
 export * from "./useReferenceDialog";
 export * from "./useBrowserTitleAndIcon";
 export * from "./useCustomizationController";
+export * from "./useBuildNavigationController";

package/src/{internal → hooks}/useBuildNavigationController.tsx

@@ -9,7 +9,6 @@ import {
     EntityCollection,
     EntityCollectionsBuilder,
     EntityReference,
-    FireCMSPlugin,
     NavigationController,
     TopNavigationEntry,
     TopNavigationResult,
@@ -35,8 +34,15 @@ type BuildNavigationContextProps<EC extends EntityCollection, UserType extends U
     collections?: EC[] | EntityCollectionsBuilder<EC>;
     views?: CMSView[] | CMSViewsBuilder;
     userConfigPersistence?: UserConfigurationPersistence;
-    plugins?: FireCMSPlugin[];
-    dataSource: DataSourceDelegate;
+    dataSourceDelegate: DataSourceDelegate;
+    /**
+     * 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[];
 };
 
 export function useBuildNavigationController<EC extends EntityCollection, UserType extends User>({
@@ -46,8 +52,8 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
                                                                                                      collections: baseCollections,
                                                                                                      views: baseViews,
                                                                                                      userConfigPersistence,
-                                                                                                     plugins,
-                                                                                                     dataSource
+                                                                                                     dataSourceDelegate,
+                                                                                                     injectCollections
                                                                                                  }: BuildNavigationContextProps<EC, UserType>): NavigationController {
 
     const location = useLocation();
@@ -119,8 +125,8 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
 
         try {
             const [resolvedCollections = [], resolvedViews = []] = await Promise.all([
-                    resolveCollections(baseCollections, authController, dataSource, plugins),
-                    resolveCMSViews(baseViews, authController, dataSource)
+                    resolveCollections(baseCollections, authController, dataSourceDelegate, injectCollections),
+                    resolveCMSViews(baseViews, authController, dataSourceDelegate)
                 ]
             );
 
@@ -134,7 +140,7 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
 
         setNavigationLoading(false);
         setInitialised(true);
-    }, [baseCollections, authController.user, authController.initialLoading, plugins, baseViews, computeTopNavigation]);
+    }, [baseCollections, authController.user, authController.initialLoading, baseViews, computeTopNavigation, injectCollections]);
 
     useEffect(() => {
         refreshNavigation();
@@ -277,8 +283,8 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
         , [getCollectionFromIds]);
 
     return useMemo(() => ({
-        collections: collections ?? [],
-        views: views ?? [],
+        collections,
+        views,
         loading: !initialised || navigationLoading,
         navigationLoadingError,
         homeUrl,
@@ -332,7 +338,10 @@ function filterOutNotAllowedCollections(resolvedCollections: EntityCollection[],
         });
 }
 
-async function resolveCollections(collections: undefined | EntityCollection[] | EntityCollectionsBuilder<any>, authController: AuthController, dataSource: DataSourceDelegate, plugins?: FireCMSPlugin[]) {
+async function resolveCollections(collections: undefined | EntityCollection[] | EntityCollectionsBuilder<any>,
+                                  authController: AuthController,
+                                  dataSource: DataSourceDelegate,
+                                  injectCollections?: (collections: EntityCollection[]) => EntityCollection[]) {
     let resolvedCollections: EntityCollection[] = [];
     if (typeof collections === "function") {
         resolvedCollections = await collections({
@@ -346,13 +355,10 @@ async function resolveCollections(collections: undefined | EntityCollection[] |
 
     resolvedCollections = filterOutNotAllowedCollections(resolvedCollections, authController);
 
-    if (plugins) {
-        plugins.forEach((plugin: FireCMSPlugin) => {
-            if (plugin.collections?.injectCollections) {
-                resolvedCollections = plugin.collections?.injectCollections(resolvedCollections ?? []);
-            }
-        });
+    if (injectCollections) {
+        resolvedCollections = injectCollections(resolvedCollections ?? []);
     }
+
     return resolvedCollections;
 }
 

package/src/hooks/useFireCMSContext.tsx

@@ -10,6 +10,7 @@ import { useUserConfigurationPersistence } from "./useUserConfigurationPersisten
 import { useDialogsController } from "./useDialogsController";
 import { useCustomizationController } from "./useCustomizationController";
 import { useAnalyticsController } from "./useAnalyticsController";
+import React, { useEffect } from "react";
 
 /**
  * Hook to retrieve the {@link FireCMSContext}.
@@ -34,7 +35,7 @@ export const useFireCMSContext = <UserType extends User = User, AuthControllerTy
     const customizationController = useCustomizationController();
     const analyticsController = useAnalyticsController();
 
-    return {
+    const fireCMSContextRef = React.useRef<FireCMSContext<UserType, AuthControllerType>>({
         authController,
         sideDialogsController,
         sideEntityController,
@@ -46,6 +47,53 @@ export const useFireCMSContext = <UserType extends User = User, AuthControllerTy
         dialogsController,
         customizationController,
         analyticsController
-    };
+    });
 
-};
+    useEffect(() => {
+        fireCMSContextRef.current = {
+            authController,
+            sideDialogsController,
+            sideEntityController,
+            navigation,
+            dataSource,
+            storageSource,
+            snackbarController,
+            userConfigPersistence,
+            dialogsController,
+            customizationController,
+            analyticsController
+        };
+    }, [authController, dialogsController, navigation, sideDialogsController]);
+
+    return fireCMSContextRef.current;
+}
+
+// export const useFireCMSContext = <UserType extends User = User, AuthControllerType extends AuthController<UserType> = AuthController<UserType>>(): FireCMSContext<UserType, AuthControllerType> => {
+//
+//     const authController = useAuthController<UserType, AuthControllerType>();
+//     const sideDialogsController = useSideDialogsController();
+//     const sideEntityController = useSideEntityController();
+//     const navigation = useNavigationController();
+//     const dataSource = useDataSource();
+//     const storageSource = useStorageSource();
+//     const snackbarController = useSnackbarController();
+//     const userConfigPersistence = useUserConfigurationPersistence();
+//     const dialogsController = useDialogsController();
+//     const customizationController = useCustomizationController();
+//     const analyticsController = useAnalyticsController();
+//
+//     return {
+//         authController,
+//         sideDialogsController,
+//         sideEntityController,
+//         navigation,
+//         dataSource,
+//         storageSource,
+//         snackbarController,
+//         userConfigPersistence,
+//         dialogsController,
+//         customizationController,
+//         analyticsController
+//     };
+//
+// };

package/src/hooks/useReferenceDialog.tsx

@@ -1,5 +1,5 @@
 import { useSideDialogsController } from "./useSideDialogsController";
-import { ReferenceSelectionInner, ReferenceSelectionInnerProps } from "../components";
+import { ReferenceSelectionTable, ReferenceSelectionInnerProps } from "../components";
 import { useCallback } from "react";
 import { useNavigationController } from "./useNavigationController";
 
@@ -31,7 +31,7 @@ export function useReferenceDialog<M extends Record<string, any>>(referenceDialo
             sideDialogsController.open({
                 key: `reference_${referenceDialogProps.path}`,
                 component:
-                    <ReferenceSelectionInner
+                    <ReferenceSelectionTable
                         collection={usedCollection}
                         {...referenceDialogProps as ReferenceSelectionInnerProps<M>}/>,
                 width: "90vw",

package/src/hooks/useSnackbarController.tsx

@@ -1,5 +1,5 @@
+import React, { useCallback, useMemo } from "react";
 import { useSnackbar } from "notistack";
-import { useCallback, useMemo } from "react";
 
 /**
  * Possible snackbar types
@@ -48,7 +48,6 @@ export const useSnackbarController = () => {
 
     const open = useCallback((props: {
         type: SnackbarMessageType;
-        // title?: string;
         message: React.ReactNode;
         autoHideDuration?: number;
     }) => {

package/src/internal/useBuildSideEntityController.tsx

@@ -37,7 +37,7 @@ export const useBuildSideEntityController = (navigation: NavigationController,
             if (navigation.isUrlCollectionPath(location.pathname)) {
                 const newFlag = location.hash === `#${NEW_URL_HASH}`;
                 const entityOrCollectionPath = navigation.urlPathToDataPath(location.pathname);
-                const panelsFromUrl = buildSidePanelsFromUrl(entityOrCollectionPath, navigation.collections, newFlag);
+                const panelsFromUrl = buildSidePanelsFromUrl(entityOrCollectionPath, navigation.collections ?? [], newFlag);
                 for (let i = 0; i < panelsFromUrl.length; i++) {
                     const panel = panelsFromUrl[i];
                     setTimeout(() => {

package/src/types/fields.tsx

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

package/src/types/firecms.tsx

@@ -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";
@@ -67,19 +67,6 @@ 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.
@@ -88,6 +75,12 @@ export type FireCMSProps<UserType extends User, EC extends EntityCollection> = {
      */
     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
@@ -124,20 +117,6 @@ export type FireCMSProps<UserType extends User, EC extends EntityCollection> = {
      */
     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/src/types/navigation.ts

@@ -14,13 +14,13 @@ 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

package/src/types/plugins.tsx

@@ -28,15 +28,6 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
 
     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/src/util/resolutions.ts

@@ -24,7 +24,7 @@ import {
 import { getValueInPath, mergeDeep } from "./objects";
 import { getDefaultValuesFor, isPropertyBuilder } from "./entities";
 import { DEFAULT_ONE_OF_TYPE } from "./common";
-import { getIn } from "formik";
+import { getIn } from "@firecms/formex";
 import { enumToObjectEntries } from "./enums";
 import { isDefaultFieldConfigId } from "../core";
 

package/dist/form/components/SubmitListener.d.ts

@@ -1 +0,0 @@
-export declare function SubmitListener(): null;

package/dist/form/components/SwitchControl.d.ts

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

package/src/form/components/SubmitListener.tsx

@@ -1,32 +0,0 @@
-import React from "react";
-
-import { useFormikContext } from "formik";
-import equal from "react-fast-compare";
-
-export function SubmitListener() {
-
-    const formik = useFormikContext()
-    const [lastValues, setLastValues] = React.useState(formik.values);
-
-    React.useEffect(() => {
-        const valuesEqualLastValues = equal(lastValues, formik.values)
-        const valuesEqualInitialValues = equal(formik.values, formik.initialValues)
-
-        if (!valuesEqualLastValues) {
-            setLastValues(formik.values)
-        }
-
-        const doSubmit = () => {
-            if (!valuesEqualLastValues && !valuesEqualInitialValues && formik.isValid) {
-                formik.submitForm();
-            }
-        }
-
-        const handler = setTimeout(doSubmit, 300);
-        return () => {
-            clearTimeout(handler);
-        };
-    }, [formik.values, formik.isValid])
-
-    return null;
-}

package/src/form/components/SwitchControl.tsx

@@ -1,39 +0,0 @@
-import React from "react";
-
-import { FieldProps } from "formik";
-import { BooleanSwitchWithLabel, Tooltip } from "@firecms/ui";
-
-export function SwitchControl({
-                                  field,
-                                  form,
-                                  label,
-                                  tooltip,
-                                  disabled,
-                                  size = "small",
-                                  allowIndeterminate
-                              }: FieldProps & {
-    label: string,
-    tooltip?: string,
-    disabled?: boolean,
-    size: "small" | "medium",
-    allowIndeterminate?: boolean
-}) {
-
-    const formControlLabel = <BooleanSwitchWithLabel
-        label={label}
-        size={size}
-        position={"start"}
-        value={field.value}
-        disabled={disabled}
-        allowIndeterminate={allowIndeterminate}
-        onValueChange={(checked:boolean | null) => form.setFieldValue(field.name, checked)}/>;
-
-    if (tooltip)
-        return (
-            <Tooltip
-                title={tooltip}>
-                {formControlLabel}
-            </Tooltip>
-        );
-    return formControlLabel;
-}