@firecms/core 3.0.0-canary.50 → 3.0.0-canary.52

package/src/core/DrawerNavigationItem.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+
+import { NavLink } from "react-router-dom";
+import { cn, Tooltip } from "@firecms/ui";
+
+export function DrawerNavigationItem({
+                                         name,
+                                         icon,
+                                         drawerOpen,
+                                         tooltipsOpen,
+                                         url,
+                                         onClick
+                                     }: {
+    icon: React.ReactElement,
+    name: string,
+    tooltipsOpen: boolean,
+    drawerOpen: boolean,
+    url: string,
+    onClick?: () => void,
+}) {
+
+    const iconWrap = <div
+        className={"text-gray-600 dark:text-gray-500"}>
+        {icon}
+    </div>;
+
+    const listItem = <NavLink
+        onClick={onClick}
+        style={{
+            width: !drawerOpen ? "72px" : "280px",
+            transition: drawerOpen ? "width 150ms ease-in" : undefined
+        }}
+        className={({ isActive }: any) => cn("rounded-r-lg truncate",
+            "hover:bg-slate-300 hover:bg-opacity-75 dark:hover:bg-gray-700 dark:hover:bg-opacity-75 text-gray-800 dark:text-gray-200 hover:text-gray-900 hover:dark:text-white",
+            "flex flex-row items-center mr-8",
+            // "transition-all ease-in-out delay-100 duration-300",
+            // drawerOpen ? "w-full" : "w-18",
+            drawerOpen ? "pl-8 h-12" : "pl-6 h-11",
+            "font-medium text-sm",
+            isActive ? "bg-slate-200 bg-opacity-60 dark:bg-gray-800 dark:bg-opacity-30" : ""
+        )}
+        to={url}
+    >
+
+        {iconWrap}
+
+        <div
+            className={cn(
+                drawerOpen ? "opacity-100" : "opacity-0 hidden",
+                "ml-4 font-inherit text-inherit"
+            )}>
+            {name.toUpperCase()}
+        </div>
+    </NavLink>;
+
+    return <Tooltip
+        open={drawerOpen ? false : tooltipsOpen}
+        side="right"
+        title={name}>
+        {listItem}
+    </Tooltip>;
+}

package/src/core/EntitySidePanel.tsx

@@ -33,7 +33,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
         if (!props) return undefined;
         let usedCollection = props.collection;
 
-        const registryCollection = navigationController.getCollection(props.path, props.entityId);
+        const registryCollection = navigationController.getCollection(props.path);
         if (registryCollection) {
             usedCollection = registryCollection;
         }

package/src/core/FireCMS.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
 
-import { EntityCollection, FireCMSContext, FireCMSPlugin, FireCMSProps, User } from "../types";
+import { CustomizationController, EntityCollection, FireCMSContext, FireCMSPlugin, FireCMSProps, User } from "../types";
 import { AuthControllerContext, ModeControllerContext } from "../contexts";
 import { useBuildSideEntityController } from "../internal/useBuildSideEntityController";
 import { useCustomizationController, useFireCMSContext, useModeController } from "../hooks";
@@ -15,7 +15,6 @@ import { SideDialogsControllerContext } from "../contexts/SideDialogsControllerC
 import { CenteredView, Typography, useLocaleConfig } from "@firecms/ui";
 import { DialogsProvider } from "../contexts/DialogsProvider";
 import { useBuildDataSource } from "../internal/useBuildDataSource";
-import { useBuildCustomizationController } from "../internal/useBuildCustomizationController";
 import { CustomizationControllerContext } from "../contexts/CustomizationControllerContext";
 import { AnalyticsContext } from "../contexts/AnalyticsContext";
 import { useProjectLog } from "../hooks/useProjectLog";
@@ -70,7 +69,7 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
 
     const loading = authController.initialLoading || navigationController.loading || pluginsLoading;
 
-    const customizationController = useBuildCustomizationController({
+    const customizationController: CustomizationController = {
         dateTimeFormat,
         locale,
         entityLinkBuilder,
@@ -78,7 +77,7 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
         entityViews: entityViews ?? [],
         propertyConfigs: propertyConfigs ?? {},
         components
-    });
+    };
 
     const analyticsController = useMemo(() => ({
         onAnalyticsEvent

package/src/core/Scaffold.tsx

@@ -9,10 +9,26 @@ import { ChevronLeftIcon, cn, defaultBorderMixin, IconButton, MenuIcon, Sheet, T
 
 export const DRAWER_WIDTH = 280;
 
+const DrawerContext = React.createContext<DrawerProps>({
+    hovered: false,
+    drawerOpen: false,
+    openDrawer: () => {
+        throw new Error("openDrawer not implemented");
+    },
+    closeDrawer: () => {
+        throw new Error("closeDrawer not implemented");
+    },
+    autoOpenDrawer: false
+});
+
+export function useDrawer() {
+    return React.useContext(DrawerContext);
+}
+
 /**
  * @group Core
  */
-export interface ScaffoldProps<ExtraDrawerProps = object, ExtraAppbarProps = object> {
+export interface ScaffoldProps<ExtraAppbarProps = object> {
 
     /**
      * Name of the app, displayed as the main title and in the tab title
@@ -30,15 +46,10 @@ export interface ScaffoldProps<ExtraDrawerProps = object, ExtraAppbarProps = obj
     includeDrawer?: boolean;
 
     /**
-     * In case you need to override the view that gets rendered as a drawer
-     * @see DefaultDrawer
-     */
-    Drawer?: React.ComponentType<DrawerProps<ExtraDrawerProps>>;
-
-    /**
-     * Additional props passed to the custom Drawer
+     * You can define a custom drawer to be displayed in the scaffold.
+     * Use the hook `useDrawer` to access the context values.
      */
-    drawerProps?: Partial<DrawerProps> & ExtraDrawerProps;
+    drawer?: React.ReactNode;
 
     /**
      * Open the drawer on hover
@@ -78,8 +89,7 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
             logo,
             includeDrawer = true,
             autoOpenDrawer,
-            Drawer = DefaultDrawer,
-            drawerProps,
+            drawer = <DefaultDrawer/>,
             FireCMSAppBar = DefaultFireCMSAppBar,
             fireCMSAppBarProps,
         } = props;
@@ -92,61 +102,65 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
         const setOnHoverTrue = useCallback(() => setOnHover(true), []);
         const setOnHoverFalse = useCallback(() => setOnHover(false), []);
 
+        const handleDrawerOpen = useCallback(() => {
+            setDrawerOpen(true);
+        }, []);
+
         const handleDrawerClose = useCallback(() => {
             setDrawerOpen(false);
         }, []);
 
         const computedDrawerOpen: boolean = drawerOpen || Boolean(largeLayout && autoOpenDrawer && onHover);
+
         return (
-            <div
-                className="flex h-screen w-screen bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white overflow-hidden"
-                style={{
-                    paddingTop: "env(safe-area-inset-top)",
-                    paddingLeft: "env(safe-area-inset-left)",
-                    paddingRight: "env(safe-area-inset-right)",
-                    paddingBottom: "env(safe-area-inset-bottom)",
-                    height: "100dvh"
-                    // "@supports (height: 100dvh)": {
-                    //     height: "100dvh"
-                    // }
-                }}>
-
-                <FireCMSAppBar title={name}
-                               includeDrawer={includeDrawer}
-                               logo={logo}
-                               drawerOpen={computedDrawerOpen}
-                               {...fireCMSAppBarProps}/>
-
-                <StyledDrawer
-                    displayed={includeDrawer}
-                    onMouseEnter={setOnHoverTrue}
-                    onMouseMove={setOnHoverTrue}
-                    onMouseLeave={setOnHoverFalse}
-                    open={computedDrawerOpen}
-                    logo={logo}
-                    hovered={onHover}
-                    setDrawerOpen={setDrawerOpen}>
-                    {includeDrawer && (
-                        <Drawer
-                            hovered={onHover}
-                            drawerOpen={computedDrawerOpen}
-                            closeDrawer={handleDrawerClose}
-                            {...drawerProps}/>)}
-                </StyledDrawer>
-
-                <main
-                    className="flex flex-col flex-grow overflow-auto">
-                    <DrawerHeader/>
-                    <div
-                        className={cn(defaultBorderMixin, "flex-grow overflow-auto lg:m-0 lg:mx-4 lg:mb-4 lg:rounded-lg lg:border lg:border-solid m-0 mt-1")}>
-
-                        <ErrorBoundary>
-                            {children}
-                        </ErrorBoundary>
-
-                    </div>
-                </main>
-            </div>
+            <DrawerContext.Provider value={{
+                hovered: onHover,
+                drawerOpen: computedDrawerOpen,
+                closeDrawer: handleDrawerClose,
+                openDrawer: handleDrawerOpen,
+                autoOpenDrawer
+            }}>
+                <div
+                    className="flex h-screen w-screen bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white overflow-hidden"
+                    style={{
+                        paddingTop: "env(safe-area-inset-top)",
+                        paddingLeft: "env(safe-area-inset-left)",
+                        paddingRight: "env(safe-area-inset-right)",
+                        paddingBottom: "env(safe-area-inset-bottom)",
+                        height: "100dvh"
+                    }}>
+
+                    <FireCMSAppBar title={name}
+                                   includeDrawer={includeDrawer}
+                                   logo={logo}
+                                   drawerOpen={computedDrawerOpen}
+                                   {...fireCMSAppBarProps}/>
+                    <DrawerWrapper
+                        displayed={includeDrawer}
+                        onMouseEnter={setOnHoverTrue}
+                        onMouseMove={setOnHoverTrue}
+                        onMouseLeave={setOnHoverFalse}
+                        open={computedDrawerOpen}
+                        logo={logo}
+                        hovered={onHover}
+                        setDrawerOpen={setDrawerOpen}>
+                        {includeDrawer && drawer}
+                    </DrawerWrapper>
+
+                    <main
+                        className="flex flex-col flex-grow overflow-auto">
+                        <DrawerHeader/>
+                        <div
+                            className={cn(defaultBorderMixin, "flex-grow overflow-auto lg:m-0 lg:mx-4 lg:mb-4 lg:rounded-lg lg:border lg:border-solid m-0 mt-1")}>
+
+                            <ErrorBoundary>
+                                {children}
+                            </ErrorBoundary>
+
+                        </div>
+                    </main>
+                </div>
+            </DrawerContext.Provider>
         );
     },
     equal
@@ -158,7 +172,7 @@ const DrawerHeader = () => {
     );
 };
 
-function StyledDrawer(props: {
+function DrawerWrapper(props: {
     children: React.ReactNode,
     displayed: boolean,
     open: boolean,

package/src/core/index.tsx

@@ -1,10 +1,9 @@
 export * from "./FireCMS";
 
-export type { ScaffoldProps } from "./Scaffold";
-export { Scaffold } from "./Scaffold";
+export * from "./Scaffold";
 
-export type { DrawerProps } from "./Drawer";
-export { Drawer, DrawerNavigationItem } from "./Drawer";
+export * from "./Drawer";
+export * from "./DrawerNavigationItem";
 
 export * from "./field_configs";
 

package/src/form/EntityForm.tsx

@@ -40,7 +40,7 @@ import { ErrorBoundary } from "../components";
 import {
     copyEntityAction,
     deleteEntityAction
-} from "../components/EntityCollectionTable/internal/default_entity_actions";
+} from "../components/common/default_entity_actions";
 import { useAnalyticsController } from "../hooks/useAnalyticsController";
 import { ValidationError } from "yup";
 import { PropertyIdCopyTooltipContent } from "../components/PropertyIdCopyTooltipContent";
@@ -189,7 +189,7 @@ function EntityFormInternal<M extends Record<string, any>>({
         path,
         values: entity?.values,
         fields: customizationController.propertyConfigs
-    }), [entity?.values, path]);
+    }), [entity?.values, path, customizationController.propertyConfigs]);
 
     const mustSetCustomId: boolean = (status === "new" || status === "copy") &&
         (Boolean(initialResolvedCollection.customId) && initialResolvedCollection.customId !== "optional");

package/src/form/field_bindings/SelectFieldBinding.tsx

@@ -30,6 +30,8 @@ export function SelectFieldBinding<T extends EnumType>({
                                                            includeDescription
                                                        }: SelectProps<T>) {
 
+    console.log("SelectFieldBinding", propertyKey, value,)
+
     const enumValues = property.enumValues;
 
     useClearRestoreValue({
@@ -48,7 +50,7 @@ export function SelectFieldBinding<T extends EnumType>({
         <>
 
             <Select
-                value={value ? value.toString() : ""}
+                value={value !== undefined && value != null ? value.toString() : ""}
                 disabled={disabled}
                 position="item-aligned"
                 inputClassName={cn("w-full")}
@@ -70,6 +72,7 @@ export function SelectFieldBinding<T extends EnumType>({
                     return setValue(newValue as T);
                 }}
                 renderValue={(enumKey: any) => {
+                    console.log("renderValue", enumKey)
                     return <EnumValuesChip
                         enumKey={enumKey}
                         enumValues={enumValues}

package/src/hooks/index.tsx

@@ -10,6 +10,7 @@ export * from "./useResolvedNavigationFrom";
 
 export * from "./useStorageSource";
 export * from "./useAuthController";
+export * from "./useDialogsController";
 export * from "./useSideDialogsController";
 export * from "./useSideEntityController";
 export * from "./useFireCMSContext";

package/src/hooks/useBuildNavigationController.tsx

@@ -241,7 +241,6 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
 
     const getCollection = useCallback((
         idOrPath: string,
-        entityId?: string,
         includeUserOverride = false
     ): EC | undefined => {
         const collections = collectionsRef.current;

package/src/hooks/useResolvedNavigationFrom.tsx

@@ -80,7 +80,7 @@ export function resolveNavigationFrom<M extends Record<string, any>, UserType ex
             if (entry.type === "collection") {
                 return Promise.resolve(entry);
             } else if (entry.type === "entity") {
-                const collection = navigation.getCollection(entry.path, entry.entityId);
+                const collection = navigation.getCollection(entry.path);
                 if (!collection) {
                     throw Error(`No collection defined in the navigation for the entity with path ${entry.path}`);
                 }

package/src/internal/useBuildSideEntityController.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef } from "react";
 import {
     EntityCollection,
     EntitySidePanelProps,
-    NavigationController,
+    NavigationController, PropertyConfig,
     ResolvedProperty,
     SideDialogPanelProps,
     SideDialogsController,
@@ -48,7 +48,8 @@ function calculateCollectionDesiredWidth(collection: EntityCollection<any>): str
     }
     const resolvedCollection = resolveCollection({
         collection,
-        path: "__ignored"
+        path: "__ignored",
+        ignoreMissingFields: true
     });
 
     let result = FORM_CONTAINER_WIDTH

package/src/preview/components/EnumValuesChip.tsx

@@ -1,7 +1,7 @@
 import React from "react";
+import { Chip } from "@firecms/ui";
 import { EnumValues } from "../../types";
 import { buildEnumLabel, enumToObjectEntries, getColorScheme, getLabelOrConfigFrom } from "../../util/enums";
-import { Chip } from "@firecms/ui";
 
 export interface EnumValuesChipProps {
     enumValues?: EnumValues;

package/src/preview/property_previews/NumberPropertyPreview.tsx

@@ -15,6 +15,7 @@ export function NumberPropertyPreview({
     if (property.enumValues) {
         const enumKey = value;
         const enumValues = enumToObjectEntries(property.enumValues);
+        console.log("NumberPropertyPreview", enumValues)
         if (!enumValues)
             return <>{value}</>;
         return <EnumValuesChip

package/src/types/navigation.ts

@@ -57,10 +57,9 @@ export type NavigationController<EC extends EntityCollection = EntityCollection<
      * The collection is resolved from the given path or alias.
      */
     getCollection: (pathOrId: string,
-                    entityId?: string,
                     includeUserOverride?: boolean) => EC | undefined;
     /**
-     * Get the collection configuration from its parent path segments.
+     * Get the collection configuration from its parent ids.
      */
     getCollectionFromIds: (ids: string[]) => EC | undefined;
 

package/src/types/storage.ts

@@ -101,5 +101,5 @@ export interface StorageSource {
      * @param props
      * @param bucket
      */
-    getFile: (path:string, bucket?: string) => Promise<File | null>;
+    getFile: (path: string, bucket?: string) => Promise<File | null>;
 }

package/src/util/enums.ts

@@ -22,7 +22,7 @@ export function enumToObjectEntries(enumValues: EnumValues): EnumValueConfig[] {
 }
 
 export function getLabelOrConfigFrom(enumValues: EnumValueConfig[], key?: string | number): EnumValueConfig | undefined {
-    if (!key) return undefined;
+    if (key === null || key === undefined) return undefined;
     return enumValues.find((entry) => String(entry.id) === String(key));
 }