@firecms/core 3.0.0-beta.11 → 3.0.0-beta.12

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -28,7 +28,7 @@ import {
 import { useClearRestoreValue } from "../useClearRestoreValue";
 
 const dropZoneClasses = "box-border relative pt-[2px] items-center border border-transparent min-h-[254px] outline-none rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid";
-const disabledClasses = "border-dotted-gray"
+const disabledClasses = fieldBackgroundDisabledMixin;
 const nonActiveDropClasses = fieldBackgroundHoverMixin
 const activeDropClasses = "pt-0 border-2 border-solid"
 const acceptDropClasses = "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-2 border-solid border-green-500"
@@ -103,7 +103,7 @@ export function StorageUploadFieldBinding({
                     icon={getIconForProperty(property, "small")}
                     required={property.validation?.required}
                     title={property.name}
-                    className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
+                    className={"h-8text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
 
             <StorageUpload
                 value={internalValue}
@@ -206,6 +206,7 @@ function FileDropComponent({
             className={cls(
                 fieldBackgroundMixin,
                 disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
+                disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : "",
                 dropZoneClasses,
                 multipleFilesSupported && internalValue.length ? "" : "flex",
                 {
@@ -248,7 +249,7 @@ function FileDropComponent({
                                 metadata={metadata}
                                 storagePath={storagePathBuilder(entry.file)}
                                 onFileUploadComplete={onFileUploadComplete}
-                                imageSize={size === "medium" ? 220 : 118}
+                                imageSize={size === "large" ? 220 : 118}
                                 simple={false}
                             />
                         );
@@ -285,7 +286,8 @@ function FileDropComponent({
             <div
                 className="flex-grow min-h-[38px] box-border m-2 text-center">
                 <Typography align={"center"}
-                            variant={"label"}>
+                            variant={"label"}
+                            className={disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : ""}>
                     {helpText}
                 </Typography>
             </div>

package/src/form/field_bindings/SwitchFieldBinding.tsx

@@ -43,6 +43,7 @@ export const SwitchFieldBinding = function SwitchFieldBinding({
                     value={value}
                     onValueChange={(v) => setValue(v)}
                     error={showError}
+                    className={property.widthPercentage !== undefined ? "mt-8" : undefined}
                     label={<LabelWithIcon
                         icon={getIconForProperty(property, "small")}
                         required={property.validation?.required}

package/src/form/field_bindings/TextFieldBinding.tsx

@@ -75,6 +75,7 @@ export function TextFieldBinding<T extends string | number>({
                     value={value}
                     onChange={onChange}
                     autoFocus={autoFocus}
+                    className={property.widthPercentage !== undefined ? "mt-8" : undefined}
                     label={<LabelWithIcon
                         icon={getIconForProperty(property, "small")}
                         required={property.validation?.required}

package/src/form/index.tsx

@@ -1,36 +1,20 @@
-import { SelectFieldBinding } from "./field_bindings/SelectFieldBinding";
-import { MultiSelectFieldBinding } from "./field_bindings/MultiSelectFieldBinding";
-import { ArrayOfReferencesFieldBinding } from "./field_bindings/ArrayOfReferencesFieldBinding";
-import { StorageUploadFieldBinding } from "./field_bindings/StorageUploadFieldBinding";
-import { TextFieldBinding } from "./field_bindings/TextFieldBinding";
-import { SwitchFieldBinding } from "./field_bindings/SwitchFieldBinding";
-import { DateTimeFieldBinding } from "./field_bindings/DateTimeFieldBinding";
-import { ReferenceFieldBinding } from "./field_bindings/ReferenceFieldBinding";
-import { MapFieldBinding } from "./field_bindings/MapFieldBinding";
-import { KeyValueFieldBinding } from "./field_bindings/KeyValueFieldBinding";
-import { RepeatFieldBinding } from "./field_bindings/RepeatFieldBinding";
-import { BlockFieldBinding } from "./field_bindings/BlockFieldBinding";
-import { ReadOnlyFieldBinding } from "./field_bindings/ReadOnlyFieldBinding";
-import { MarkdownEditorFieldBinding } from "./field_bindings/MarkdownEditorFieldBinding";
-import { ArrayCustomShapedFieldBinding } from "./field_bindings/ArrayCustomShapedFieldBinding";
+export * from "./EntityForm";
 
-export {
-    ArrayCustomShapedFieldBinding,
-    RepeatFieldBinding,
-    MultiSelectFieldBinding,
-    ArrayOfReferencesFieldBinding,
-    BlockFieldBinding,
-    DateTimeFieldBinding,
-    ReadOnlyFieldBinding,
-    MapFieldBinding,
-    KeyValueFieldBinding,
-    ReferenceFieldBinding,
-    SelectFieldBinding,
-    StorageUploadFieldBinding,
-    SwitchFieldBinding,
-    MarkdownEditorFieldBinding,
-    TextFieldBinding
-};
+export { SelectFieldBinding } from "./field_bindings/SelectFieldBinding";
+export { MultiSelectFieldBinding } from "./field_bindings/MultiSelectFieldBinding";
+export { ArrayOfReferencesFieldBinding } from "./field_bindings/ArrayOfReferencesFieldBinding";
+export { StorageUploadFieldBinding } from "./field_bindings/StorageUploadFieldBinding";
+export { TextFieldBinding } from "./field_bindings/TextFieldBinding";
+export { SwitchFieldBinding } from "./field_bindings/SwitchFieldBinding";
+export { DateTimeFieldBinding } from "./field_bindings/DateTimeFieldBinding";
+export { ReferenceFieldBinding } from "./field_bindings/ReferenceFieldBinding";
+export { MapFieldBinding } from "./field_bindings/MapFieldBinding";
+export { KeyValueFieldBinding } from "./field_bindings/KeyValueFieldBinding";
+export { RepeatFieldBinding } from "./field_bindings/RepeatFieldBinding";
+export { BlockFieldBinding } from "./field_bindings/BlockFieldBinding";
+export { ReadOnlyFieldBinding } from "./field_bindings/ReadOnlyFieldBinding";
+export { MarkdownEditorFieldBinding } from "./field_bindings/MarkdownEditorFieldBinding";
+export { ArrayCustomShapedFieldBinding } from "./field_bindings/ArrayCustomShapedFieldBinding";
 
 export * from "./components";
 

package/src/form/validation.ts

@@ -90,11 +90,11 @@ export function mapPropertyToYup<T extends CMSType>(propertyContext: PropertyCon
 }
 
 export function getYupMapObjectSchema({
-                                                                         property,
-                                                                         entityId,
-                                                                         customFieldValidator,
-                                                                         name
-                                                                     }: PropertyContext<Record<string, any>>): ObjectSchema<any> {
+                                          property,
+                                          entityId,
+                                          customFieldValidator,
+                                          name
+                                      }: PropertyContext<Record<string, any>>): ObjectSchema<any> {
     const objectSchema: any = {};
     const validation = property.validation;
     if (property.properties)
@@ -159,7 +159,13 @@ function getYupStringSchema({
         if (validation.lowercase) collection = collection.lowercase();
         if (validation.uppercase) collection = collection.uppercase();
         if (property.email) collection = collection.email(`${property.name} must be an email`);
-        if (property.url) collection = collection.url(`${property.name} must be a url`);
+        if (property.url) {
+            if (!property.storage || property.storage?.storeUrl) {
+                collection = collection.url(`${property.name} must be a url`);
+            } else {
+                console.warn(`Property ${property.name} has a url validation but its storage configuration is not set to store urls`);
+            }
+        }
     } else {
         collection = collection.notRequired().nullable(true);
     }

package/src/hooks/data/save.ts

@@ -75,7 +75,7 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, USE
 
     const customizationController = context.customizationController;
 
-    const resolvedPath = context.navigation.resolveAliasesFrom(path);
+    const resolvedPath = context.navigation.resolveIdsFrom(path);
 
     const callbacks = collection.callbacks;
     if (callbacks?.onPreSave) {

package/src/hooks/data/useCollectionFetch.tsx

@@ -73,7 +73,7 @@ export function useCollectionFetch<M extends Record<string, any>, USER extends U
     const dataSource = useDataSource(collection);
     const navigationController = useNavigationController();
 
-    const path = navigationController.resolveAliasesFrom(inputPath);
+    const path = navigationController.resolveIdsFrom(inputPath);
 
     const sortByProperty = sortBy ? sortBy[0] : undefined;
     const currentSort = sortBy ? sortBy[1] : undefined;

package/src/hooks/data/useEntityFetch.tsx

@@ -10,6 +10,7 @@ import { useFireCMSContext } from "../useFireCMSContext";
 export interface EntityFetchProps<M extends Record<string, any>, USER extends User = User> {
     path: string;
     entityId?: string;
+    databaseId?: string;
     collection: EntityCollection<M, USER>;
     useCache?: boolean;
 }
@@ -40,13 +41,14 @@ export function useEntityFetch<M extends Record<string, any>, USER extends User>
         path: inputPath,
         entityId,
         collection,
+        databaseId,
         useCache = false
     }: EntityFetchProps<M, USER>): EntityFetchResult<M> {
 
     const dataSource = useDataSource(collection);
     const navigationController = useNavigationController();
 
-    const path = navigationController.resolveAliasesFrom(inputPath);
+    const path = navigationController.resolveIdsFrom(inputPath);
 
     const context: FireCMSContext<USER> = useFireCMSContext();
 
@@ -96,6 +98,7 @@ export function useEntityFetch<M extends Record<string, any>, USER extends User>
                 return dataSource.listenEntity<M>({
                     path,
                     entityId,
+                    databaseId,
                     collection,
                     onUpdate: onEntityUpdate,
                     onError
@@ -104,6 +107,7 @@ export function useEntityFetch<M extends Record<string, any>, USER extends User>
                 dataSource.fetchEntity<M>({
                     path,
                     entityId,
+                    databaseId,
                     collection
                 })
                     .then(onEntityUpdate)

package/src/hooks/useBreadcrumbsController.tsx

@@ -0,0 +1,31 @@
+import { useContext } from "react";
+import { BreadcrumbContext } from "../contexts/BreacrumbsContext";
+
+/**
+ * @group Hooks and utilities
+ */
+export interface BreadcrumbsController {
+    breadcrumbs: BreadcrumbEntry[];
+    set: (props: {
+        breadcrumbs: BreadcrumbEntry[];
+    }) => void;
+}
+
+/**
+ * @group Hooks and utilities
+ */
+export interface BreadcrumbEntry {
+    title: string;
+    url: string;
+}
+
+/**
+ * Hook to retrieve the BreadcrumbsController.
+ *
+ * Consider that in order to use this hook you need to have a parent
+ * `FireCMS`
+ *
+ * @see BreadcrumbsController
+ * @group Hooks and utilities
+ */
+export const useBreadcrumbsController = (): BreadcrumbsController => useContext(BreadcrumbContext);

package/src/hooks/useBuildModeController.tsx

@@ -16,7 +16,7 @@ export function useBuildModeController(): ModeController {
     }, []);
 
     const prefersDarkModeStorage: boolean | null = localStorage.getItem("prefers-dark-mode") != null ? localStorage.getItem("prefers-dark-mode") === "true" : null;
-    const prefersDarkMode = prefersDarkModeStorage ?? prefersDarkModeQuery;
+    const prefersDarkMode = prefersDarkModeStorage ?? prefersDarkModeQuery();
     const [mode, setMode] = useState<"light" | "dark">(prefersDarkMode ? "dark" : "light");
 
     useEffect(() => {
@@ -24,43 +24,30 @@ export function useBuildModeController(): ModeController {
         setDocumentMode(prefersDarkMode ? "dark" : "light");
     }, [prefersDarkMode]);
 
-    // color-scheme: dark;
-    const setDarkMode = useCallback(() => {
-        setMode("dark");
-        setDocumentMode("dark");
-    }, []);
-
-    const setLightMode = useCallback(() => {
-        setMode("light");
-        setDocumentMode("light");
-    }, []);
-
     const setDocumentMode = (mode: "light" | "dark") => {
         document.body.style.setProperty("color-scheme", mode);
         document.documentElement.dataset.theme = mode;
     };
 
-    const toggleMode = useCallback(() => {
-
-        const prefersDarkModeQueryResult = prefersDarkModeQuery();
+    const setModeInternal = useCallback((mode: "light" | "dark" | "system") => {
         if (mode === "light") {
-            if (!prefersDarkModeQueryResult)
-                localStorage.setItem("prefers-dark-mode", "true");
-            else
-                localStorage.removeItem("prefers-dark-mode");
-            setDarkMode();
+            setDocumentMode("light");
+            localStorage.setItem("prefers-dark-mode", "false");
+            setMode("light");
+        } else if (mode === "dark") {
+            setDocumentMode("dark");
+            localStorage.setItem("prefers-dark-mode", "true");
+            setMode("dark");
         } else {
-            if (prefersDarkModeQueryResult)
-                localStorage.setItem("prefers-dark-mode", "false");
-            else
-                localStorage.removeItem("prefers-dark-mode");
-            setLightMode();
+            const preferredMode = prefersDarkModeQuery() ? "dark" : "light";
+            setDocumentMode(preferredMode);
+            localStorage.removeItem("prefers-dark-mode");
+            setMode(preferredMode);
         }
-    }, [mode, prefersDarkModeQuery]);
+    }, [prefersDarkModeQuery]);
 
     return {
         mode,
-        setMode,
-        toggleMode
+        setMode: setModeInternal
     };
 }

package/src/hooks/useBuildNavigationController.tsx

@@ -9,6 +9,7 @@ import {
     EntityCollection,
     EntityCollectionsBuilder,
     EntityReference,
+    NavigationBlocker,
     NavigationController,
     PermissionsBuilder,
     TopNavigationEntry,
@@ -26,6 +27,7 @@ import {
     resolvePermissions
 } from "../util";
 import { getParentReferencesFromPath } from "../util/parent_references_from_path";
+import { useBlocker, useNavigate } from "react-router-dom";
 
 const DEFAULT_BASE_PATH = "/";
 const DEFAULT_COLLECTION_PATH = "/c";
@@ -49,6 +51,11 @@ export type BuildNavigationContextProps<EC extends EntityCollection, USER extend
      * @param collections
      */
     injectCollections?: (collections: EntityCollection[]) => EntityCollection[];
+
+    /**
+     * If true, the navigation logic will not be updated until this flag is false
+     */
+    disabled?: boolean;
 };
 
 export function useBuildNavigationController<EC extends EntityCollection, USER extends User>(props: BuildNavigationContextProps<EC, USER>): NavigationController {
@@ -63,9 +70,12 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         viewsOrder,
         userConfigPersistence,
         dataSourceDelegate,
-        injectCollections
+        injectCollections,
+        disabled
     } = props;
 
+    const navigate = useNavigate();
+
     const collectionsRef = useRef<EntityCollection[] | undefined>();
     const viewsRef = useRef<CMSView[] | undefined>();
     const adminViewsRef = useRef<CMSView[] | undefined>();
@@ -185,7 +195,7 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
 
     const refreshNavigation = useCallback(async () => {
 
-        if (authController.initialLoading)
+        if (disabled || authController.initialLoading)
             return;
 
         console.debug("Refreshing navigation");
@@ -202,7 +212,7 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
             let shouldUpdateTopLevelNav = false;
             if (!areCollectionListsEqual(collectionsRef.current ?? [], resolvedCollections)) {
                 collectionsRef.current = resolvedCollections;
-                console.log("Collections have changed", resolvedCollections);
+                console.debug("Collections have changed", resolvedCollections);
                 shouldUpdateTopLevelNav = true;
             }
             if (collectionsRef.current === undefined) {
@@ -237,6 +247,7 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         collectionPermissions,
         authController.user,
         authController.initialLoading,
+        disabled,
         viewsProp,
         adminViewsProp,
         computeTopNavigation,
@@ -332,16 +343,7 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         throw Error("Expected path starting with " + fullCollectionPath);
     }, [fullCollectionPath]);
 
-    const buildUrlEditCollectionPath = useCallback(({
-                                                        path
-                                                    }: {
-            path: string
-        }): string => {
-            return `s/edit/${encodePath(path)}`;
-        },
-        []);
-
-    const resolveAliasesFrom = useCallback((path: string): string => {
+    const resolveIdsFrom = useCallback((path: string): string => {
         const collections = collectionsRef.current ?? [];
         return resolveCollectionPathIds(path, collections);
     }, []);
@@ -401,24 +403,16 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         isUrlCollectionPath,
         urlPathToDataPath,
         buildUrlCollectionPath,
-        buildUrlEditCollectionPath,
-        buildCMSUrlPath,
-        resolveAliasesFrom,
+        resolveIdsFrom,
         topLevelNavigation,
         refreshNavigation,
         getParentReferencesFromPath: getAllParentReferencesForPath,
         getParentCollectionIds,
-        convertIdsToPaths
+        convertIdsToPaths,
+        navigate,
     };
 }
 
-export function getSidePanelKey(path: string, entityId?: string) {
-    if (entityId)
-        return `${removeInitialAndTrailingSlashes(path)}/${removeInitialAndTrailingSlashes(entityId)}`;
-    else
-        return removeInitialAndTrailingSlashes(path);
-}
-
 function encodePath(input: string) {
     return encodeURIComponent(removeInitialAndTrailingSlashes(input))
         .replaceAll("%2F", "/")
@@ -427,6 +421,7 @@ function encodePath(input: string) {
 
 function filterOutNotAllowedCollections(resolvedCollections: EntityCollection[], authController: AuthController<User>): EntityCollection[] {
     return resolvedCollections
+        .filter((c) => Boolean(c.path))
         .filter((c) => {
             if (!c.permissions) return true;
             const resolvedPermissions = resolvePermissions(c, authController, c.path, null);
@@ -513,3 +508,54 @@ function areCollectionsEqual(a: EntityCollection, b: EntityCollection) {
     }
     return equal(removeFunctions(restA), removeFunctions(restB));
 }
+
+function useCustomBlocker(): NavigationBlocker {
+    const [blockListeners, setBlockListeners] = useState<Record<string, {
+        block: boolean,
+        basePath?: string
+    }>>({});
+
+    const shouldBlock = Object.values(blockListeners).some(b => b.block);
+
+    let blocker: any;
+    try {
+        blocker = useBlocker(({
+                                  nextLocation
+                              }) => {
+            const allBasePaths = Object.values(blockListeners).map(b => b.basePath).filter(Boolean) as string[];
+            if (allBasePaths && allBasePaths.some(path => nextLocation.pathname.startsWith(path)))
+                return false;
+            return shouldBlock;
+        });
+    } catch (e) {
+        console.warn("Blocker not available, navigation will not be blocked");
+    }
+
+    const updateBlockListener = (path: string, block: boolean, basePath?: string) => {
+        setBlockListeners(prev => ({
+            ...prev,
+            [path]: {
+                block,
+                basePath
+            }
+        }));
+        return () => setBlockListeners(prev => {
+            const {
+                [path]: removed,
+                ...rest
+            } = prev;
+            return rest;
+        })
+    };
+
+    const isBlocked = (path: string) => {
+        return (blockListeners[path]?.block ?? false) && blocker?.state === "blocked";
+    }
+
+    return {
+        updateBlockListener,
+        isBlocked,
+        proceed: blocker?.proceed,
+        reset: blocker?.reset
+    }
+}

package/src/hooks/useLargeLayout.tsx

@@ -63,38 +63,3 @@ function checkLargeLayout(breakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" |
         return false;
     return window.matchMedia(`(min-width: ${breakpoints[breakpoint] + 1}px)`).matches;
 }
-
-// import { useEffect, useState } from "react";
-//
-// const breakpoints = {
-//     xs: 0,
-//     sm: 640,
-//     md: 768,
-//     lg: 1024,
-//     xl: 1280,
-//     "2xl": 1536,
-//     "3xl": 1920
-// }
-// export const useLargeLayout = (breakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" = "lg"): boolean => {
-//     const [isLargeLayout, setIsLargeLayout] = useState<boolean>(false);
-//
-//     useEffect(() => {
-//         const handleResize = () => {
-//             const matched = window.matchMedia(`(min-width: ${breakpoints[breakpoint] + 1}px)`).matches;
-//             setIsLargeLayout(matched);
-//         };
-//
-//         // Set initial state
-//         handleResize();
-//
-//         // Set up event listener for resize events
-//         window.addEventListener("resize", handleResize);
-//
-//         // Clean up event listener when component unmounts
-//         return () => {
-//             window.removeEventListener("resize", handleResize);
-//         };
-//     }, []);
-//
-//     return isLargeLayout;
-// };

package/src/hooks/useModeController.tsx

@@ -7,8 +7,7 @@ import { useContext } from "react";
  */
 export interface ModeController {
     mode: "light" | "dark";
-    setMode: (mode: "light" | "dark") => void;
-    toggleMode: () => void;
+    setMode: (mode: "light" | "dark" | "system") => void;
 }
 
 /**

package/src/hooks/useResolvedNavigationFrom.tsx

@@ -1,6 +1,6 @@
 import { Entity, EntityCollection, EntityCustomView, FireCMSContext, User } from "../types";
 import { useEffect, useState } from "react";
-import { getNavigationEntriesFromPathInternal } from "../util/navigation_from_path";
+import { getNavigationEntriesFromPath } from "../util/navigation_from_path";
 import { useFireCMSContext } from "./useFireCMSContext";
 
 /**
@@ -67,10 +67,10 @@ export function resolveNavigationFrom<M extends Record<string, any>, USER extend
     const navigation = context.navigation;
 
     if (!navigation) {
-        throw Error("Calling getNavigationFrom, but main navigation has not yet been initialised");
+        throw Error("Calling resolveNavigationFrom, but main navigation has not yet been initialised");
     }
 
-    const navigationEntries = getNavigationEntriesFromPathInternal({
+    const navigationEntries = getNavigationEntriesFromPath({
         path,
         collections: navigation.collections ?? []
     });
@@ -143,9 +143,7 @@ export function useResolvedNavigationFrom<M extends Record<string, any>, USER ex
             setDataLoading(true);
             setDataLoadingError(undefined);
             resolveNavigationFrom<M, USER>({ path, context })
-                .then((res) => {
-                    setData(res);
-                })
+                .then(setData)
                 .catch((e) => setDataLoadingError(e))
                 .finally(() => setDataLoading(false));
         }

package/src/internal/useBuildSideDialogsController.tsx

@@ -25,8 +25,9 @@ export function useBuildSideDialogsController(): SideDialogsController {
         const newPanels = panelKeys
             .map(key => routesStore.current[key])
             .filter(p => Boolean(p)) as SideDialogPanelProps[];
-        if (!equal(sidePanelsRef.current.map(p => p.key), newPanels.map(p => p.key)))
+        if (!equal(sidePanelsRef.current.map(p => p.key), newPanels.map(p => p.key))) {
             updateSidePanels(newPanels);
+        }
     }, [location]);
 
     const close = useCallback(() => {
@@ -39,7 +40,7 @@ export function useBuildSideDialogsController(): SideDialogsController {
         updateSidePanels(updatedPanels);
 
         if (routesCount.current > 0) {
-            if (lastSidePanel.urlPath)
+            if (lastSidePanel.urlPath) // if it has a url path, we need to navigate back, don't remove this code
                 navigate(-1);
             routesCount.current--;
         } else if (lastSidePanel.parentUrlPath) {