@firecms/core 3.0.0-canary.7 → 3.0.0-canary.71

package/src/util/useStorageUploadController.tsx

@@ -46,7 +46,7 @@ export function useStorageUploadController<M extends object>({
                                                                      entityId: string,
                                                                      entityValues: EntityValues<M>,
                                                                      value: string | string[] | null;
-                                                                     path: string,
+                                                                     path?: string,
                                                                      propertyKey: string,
                                                                      property: ResolvedStringProperty | ResolvedArrayProperty<string[]>,
                                                                      storageSource: StorageSource,
@@ -95,7 +95,16 @@ export function useStorageUploadController<M extends object>({
 
     const fileNameBuilder = useCallback(async (file: File) => {
         if (storage.fileName) {
-            const fileName = await resolveFilenameString(storage.fileName, storage, entityValues, entityId, path, property, file, propertyKey);
+            const fileName = await resolveFilenameString({
+                input: storage.fileName,
+                storage,
+                values: entityValues,
+                entityId,
+                path,
+                property,
+                file,
+                propertyKey
+            });
             if (!fileName || fileName.length === 0) {
                 throw Error("You need to return a valid filename");
             }
@@ -105,7 +114,16 @@ export function useStorageUploadController<M extends object>({
     }, [entityId, entityValues, path, property, propertyKey, storage]);
 
     const storagePathBuilder = useCallback((file: File) => {
-        return resolveStoragePathString(storage.storagePath, storage, entityValues, entityId, path, property, file, propertyKey) ?? "/";
+        return resolveStoragePathString({
+            input: storage.storagePath,
+            storage,
+            values: entityValues,
+            entityId,
+            path,
+            property,
+            file,
+            propertyKey
+        }) ?? "/";
     }, [entityId, entityValues, path, property, propertyKey, storage]);
 
     const onFileUploadComplete = useCallback(async (uploadedPath: string,

package/src/util/useTraceUpdate.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from "react";
 
-function printChanged(props: any, prev: any, path = "", depth = 0, maxDepth: number) {
+export function printChanged(props: any, prev: any, path: string | undefined = "", depth: number | undefined = 0, maxDepth: number | undefined = 10) {
     if (depth > maxDepth) {
         return;
     }
@@ -17,6 +17,7 @@ function printChanged(props: any, prev: any, path = "", depth = 0, maxDepth: num
 export function useTraceUpdate(props: any, maxDepth = 3) {
     const prev = useRef(props);
     useEffect(() => {
+        console.log("Changed props:");
         printChanged(props, prev.current, "", 0, maxDepth);
         prev.current = props;
     });

package/dist/components/VirtualTable/common.d.ts

@@ -1,2 +0,0 @@
-import { VirtualTableSize } from "./VirtualTableProps";
-export declare function getRowHeight(size: VirtualTableSize): number;

package/dist/core/Drawer.d.ts

@@ -1,23 +0,0 @@
-import React from "react";
-/**
- * Props used in case you need to override the default drawer
- * @group Core
- */
-export type DrawerProps<T = {}> = T & {
-    hovered: boolean;
-    drawerOpen: boolean;
-    closeDrawer: () => any;
-};
-/**
- * Default drawer used in the CMS
- * @group Core
- */
-export declare function Drawer({ hovered, drawerOpen, closeDrawer }: DrawerProps): import("react/jsx-runtime").JSX.Element;
-export declare function DrawerNavigationItem({ name, icon, drawerOpen, tooltipsOpen, url, onClick }: {
-    icon: React.ReactElement;
-    name: string;
-    tooltipsOpen: boolean;
-    drawerOpen: boolean;
-    url: string;
-    onClick?: () => void;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/core/EntityView.d.ts

@@ -1,22 +0,0 @@
-import { Entity, EntityCollection, User } from "../types";
-export interface EntityViewProps<M extends Record<string, any>> {
-    path: string;
-    collection: EntityCollection<M>;
-    entityId?: string;
-    copy?: boolean;
-    selectedSubPath?: string;
-    parentCollectionIds: string[];
-    formWidth?: number | string;
-    onValuesAreModified: (modified: boolean) => void;
-    onUpdate?: (params: {
-        entity: Entity<any>;
-    }) => void;
-    onClose?: () => void;
-}
-/**
- * This is the default view that is used as the content of a side panel when
- * an entity is opened.
- * You probably don't want to use this view directly since it is bound to the
- * side panel. Instead, you might want to use {@link EntityForm} or {@link EntityCollectionView}
- */
-export declare function EntityView<M extends Record<string, any>, UserType extends User>({ path, entityId, selectedSubPath, copy, collection, parentCollectionIds, onValuesAreModified, formWidth, onUpdate, onClose }: EntityViewProps<M>): import("react/jsx-runtime").JSX.Element;

package/dist/core/Scaffold.d.ts

@@ -1,55 +0,0 @@
-import React from "react";
-import { DrawerProps } from "./Drawer";
-import { FireCMSAppBarProps } from "../components";
-export declare const DRAWER_WIDTH = 280;
-/**
- * @group Core
- */
-export interface ScaffoldProps<ExtraDrawerProps = object, ExtraAppbarProps = object> {
-    /**
-     * Name of the app, displayed as the main title and in the tab title
-     */
-    name: string;
-    /**
-     * Logo to be displayed in the drawer of the CMS
-     */
-    logo?: string;
-    /**
-     * Whether to include the drawer in the scaffold
-     */
-    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
-     */
-    drawerProps?: Partial<DrawerProps> & ExtraDrawerProps;
-    /**
-     * Open the drawer on hover
-     */
-    autoOpenDrawer?: boolean;
-    /**
-     * A component that gets rendered on the upper side of the main toolbar.
-     * `toolbarExtraWidget` has no effect if this is set.
-     */
-    FireCMSAppBar?: React.ComponentType<FireCMSAppBarProps<ExtraAppbarProps>>;
-    /**
-     * Additional props passed to the custom AppBar
-     */
-    fireCMSAppBarProps?: Partial<FireCMSAppBarProps> & ExtraAppbarProps;
-}
-/**
- * This view acts as a scaffold for FireCMS.
- *
- * It is in charge of displaying the navigation drawer, top bar and main
- * collection views.
- * This component needs a parent {@link FireCMS}
- *
- * @param props
- * @constructor
- * @group Core
- */
-export declare const Scaffold: React.NamedExoticComponent<React.PropsWithChildren<ScaffoldProps<object, object>>>;

package/dist/core/SideEntityView.d.ts

@@ -1,7 +0,0 @@
-import { EntityViewProps } from "./EntityView";
-import { User } from "../types";
-export type SideEntityViewProps<M extends Record<string, any>> = EntityViewProps<M> & {
-    formWidth?: number | string;
-    onClose?: () => void;
-};
-export declare function SideEntityView<M extends Record<string, any>, UserType extends User>({ path, entityId, selectedSubPath, copy, collection, parentCollectionIds, onValuesAreModified, formWidth, onUpdate, onClose }: SideEntityViewProps<M>): import("react/jsx-runtime").JSX.Element;

package/dist/form/EntityForm.d.ts

@@ -1,77 +0,0 @@
-import { Entity, EntityCollection, EntityStatus, EntityValues, FormContext, ResolvedEntityCollection } from "../types";
-import { ValidationError } from "yup";
-/**
- * @group Components
- */
-export interface EntityFormProps<M extends Record<string, any>> {
-    /**
-     * New or existing status
-     */
-    status: EntityStatus;
-    /**
-     * Path of the collection this entity is located
-     */
-    path: string;
-    /**
-     * The collection is used to build the fields of the form
-     */
-    collection: EntityCollection<M>;
-    /**
-     * The updated entity is passed from the parent component when the underlying data
-     * has changed in the datasource
-     */
-    entity?: Entity<M>;
-    /**
-     * The callback function called when Save is clicked and validation is correct
-     */
-    onEntitySaveRequested: (props: EntityFormSaveParams<M>) => Promise<void>;
-    /**
-     * The callback function called when discard is clicked
-     */
-    onDiscard?: () => void;
-    /**
-     * The callback function when the form is dirty, so the values are different
-     * from the original ones
-     */
-    onModified?: (dirty: boolean) => void;
-    /**
-     * The callback function when the form original values have been modified
-     */
-    onValuesChanged?: (values?: EntityValues<M>) => void;
-    /**
-     *
-     * @param id
-     */
-    onIdChange?: (id: string) => void;
-    currentEntityId?: string;
-    onFormContextChange?: (formContext: FormContext<M>) => void;
-    hideId?: boolean;
-    autoSave?: boolean;
-    onIdUpdateError?: (error: any) => void;
-}
-export type EntityFormSaveParams<M extends Record<string, any>> = {
-    collection: ResolvedEntityCollection<M>;
-    path: string;
-    entityId: string | undefined;
-    values: EntityValues<M>;
-    previousValues?: EntityValues<M>;
-    closeAfterSave: boolean;
-    autoSave: boolean;
-};
-/**
- * This is the form used internally by the CMS
- * @param status
- * @param path
- * @param collection
- * @param entity
- * @param onEntitySave
- * @param onDiscard
- * @param onModified
- * @param onValuesChanged
- * @constructor
- * @group Components
- */
-export declare const EntityForm: typeof EntityFormInternal;
-declare function EntityFormInternal<M extends Record<string, any>>({ status, path, collection: inputCollection, entity, onEntitySaveRequested, onDiscard, onModified, onValuesChanged, onIdChange, onFormContextChange, hideId, autoSave, onIdUpdateError }: EntityFormProps<M>): import("react/jsx-runtime").JSX.Element;
-export declare function yupToFormErrors(yupError: ValidationError): Record<string, any>;
-export {};

package/dist/internal/useBuildCustomizationController.d.ts

@@ -1,2 +0,0 @@
-import { CustomizationController } from "../types/customization_controller";
-export declare function useBuildCustomizationController(controller: CustomizationController): CustomizationController;

package/dist/internal/useLocaleConfig.d.ts

@@ -1 +0,0 @@
-export declare function useLocaleConfig(locale?: string): void;

package/dist/types/appcheck.d.ts

@@ -1,26 +0,0 @@
-import { FirebaseApp } from "firebase/app";
-/**
- * @group Firebase
- */
-export interface AppCheck {
-    firebaseApp?: FirebaseApp;
-}
-/**
- * @group Firebase
- */
-export interface AppCheckOptions {
-    providerKey: string;
-    useEnterpriseRecaptcha: boolean;
-    isTokenAutoRefreshEnabled?: boolean;
-    debugToken?: string;
-    forceRefresh?: boolean;
-}
-/**
- * @group Firebase
- */
-export declare interface AppCheckTokenResult {
-    /**
-     * The token string in JWT format.
-     */
-    readonly token: string;
-}

package/src/components/HomePage/NavigationCollectionCard.tsx

@@ -1,146 +0,0 @@
-import { useNavigate } from "react-router-dom";
-
-import { useCustomizationController, useFireCMSContext } from "../../hooks";
-import { PluginHomePageActionsProps, TopNavigationEntry } from "../../types";
-import { IconForView } from "../../util";
-import { useUserConfigurationPersistence } from "../../hooks/useUserConfigurationPersistence";
-import { ArrowForwardIcon, Card, cn, IconButton, Markdown, StarBorderIcon, StarIcon, Typography } from "@firecms/ui";
-
-/**
- * This is the component used in the home page to render a card for each
- * collection.
- * @group Components
- * @param view
- * @param path
- * @param collection
- * @param url
- * @param name
- * @param description
- * @param onClick
- * @constructor
- */
-export function NavigationCollectionCard({
-                                             view,
-                                             path,
-                                             collection,
-                                             url,
-                                             name,
-                                             description,
-                                             onClick
-                                         }: TopNavigationEntry & {
-    onClick?: () => void
-}) {
-
-    const userConfigurationPersistence = useUserConfigurationPersistence();
-    const collectionIcon = <IconForView collectionOrView={collection ?? view}/>;
-
-    const navigate = useNavigate();
-    const context = useFireCMSContext();
-    const customizationController = useCustomizationController();
-
-    const favourite = (userConfigurationPersistence?.favouritePaths ?? []).includes(path);
-
-    let actions: React.ReactNode | undefined;
-    if (customizationController.plugins && collection) {
-        const actionProps: PluginHomePageActionsProps = {
-            path,
-            collection,
-            context
-        };
-        actions = <>
-            {customizationController.plugins.map((plugin, i) => (
-                plugin.homePage?.CollectionActions
-                    ? <plugin.homePage.CollectionActions
-                        key={`actions_${i}`}
-                        {...actionProps}
-                        extraProps={plugin.homePage.extraProps}
-                    />
-                    : null
-            ))}
-        </>
-        ;
-    }
-
-    return (
-        <Card
-            className={cn("h-full p-4 cursor-pointer min-h-[230px]")}
-            onClick={() => {
-                onClick?.();
-                navigate(url);
-                if (userConfigurationPersistence) {
-                    userConfigurationPersistence.setRecentlyVisitedPaths(
-                        [path, ...(userConfigurationPersistence.recentlyVisitedPaths ?? []).filter(p => p !== path)]
-                    );
-                }
-            }}>
-
-            <div className="flex flex-col items-start h-full">
-                <div
-                    className="flex-grow w-full">
-
-                    <div
-                        className="h-10 flex items-center w-full justify-between text-gray-300 dark:text-gray-600">
-
-                        {collectionIcon}
-
-                        <div
-                            className="flex items-center gap-1"
-                            onClick={(event: React.MouseEvent) => {
-                                event.preventDefault();
-                                event.stopPropagation();
-                            }}>
-
-                            {actions}
-
-                            {userConfigurationPersistence &&
-                                <IconButton
-                                    onClick={(e) => {
-                                        e.preventDefault();
-                                        e.stopPropagation();
-                                        if (favourite) {
-                                            userConfigurationPersistence.setFavouritePaths(
-                                                userConfigurationPersistence.favouritePaths.filter(p => p !== path)
-                                            );
-                                        } else {
-                                            userConfigurationPersistence.setFavouritePaths(
-                                                [...userConfigurationPersistence.favouritePaths, path]
-                                            );
-                                        }
-                                    }}>
-                                    {
-                                        favourite
-                                            ? <StarIcon
-                                                size={18}
-                                                className={"text-secondary"}/>
-                                            : <StarBorderIcon
-                                                size={18}
-                                                className={"text-gray-400 dark:text-gray-500"}/>}
-                                </IconButton>}
-
-                        </div>
-
-                    </div>
-
-                    <Typography gutterBottom variant="h5"
-                                component="h2">
-                        {name}
-                    </Typography>
-
-                    {description && <Typography variant="body2"
-                                                color="secondary"
-                                                component="div">
-                        <Markdown source={description}/>
-                    </Typography>}
-                </div>
-
-                <div style={{ alignSelf: "flex-end" }}>
-
-                    <div className={"p-4"}>
-                        <ArrowForwardIcon className="text-primary"/>
-                    </div>
-                </div>
-
-            </div>
-
-        </Card>);
-}

package/src/core/Drawer.tsx

@@ -1,164 +0,0 @@
-import React, { useCallback } from "react";
-
-import { useLargeLayout, useNavigationController } from "../hooks";
-
-import { NavLink } from "react-router-dom";
-import { CMSAnalyticsEvent, TopNavigationEntry, TopNavigationResult } from "../types";
-import { IconForView } from "../util";
-import { cn, Tooltip, Typography } from "@firecms/ui";
-import { useAnalyticsController } from "../hooks/useAnalyticsController";
-
-/**
- * Props used in case you need to override the default drawer
- * @group Core
- */
-export type DrawerProps<T = {}> = T & {
-    hovered: boolean,
-    drawerOpen: boolean,
-    closeDrawer: () => any,
-}
-
-/**
- * Default drawer used in the CMS
- * @group Core
- */
-export function Drawer({
-                           hovered,
-                           drawerOpen,
-                           closeDrawer
-                       }: DrawerProps) {
-
-    const analyticsController = useAnalyticsController();
-    const navigation = useNavigationController();
-
-    const tooltipsOpen = hovered && !drawerOpen;
-    const largeLayout = useLargeLayout();
-
-    if (!navigation.topLevelNavigation)
-        throw Error("Navigation not ready in Drawer");
-
-    const {
-        navigationEntries,
-        groups
-    }: TopNavigationResult = navigation.topLevelNavigation;
-
-    const ungroupedNavigationViews = Object.values(navigationEntries).filter(e => !e.group);
-
-    const buildGroupHeader = useCallback((group?: string) => {
-        if (!drawerOpen) return <div className="h-12 w-full"/>;
-        return <div
-            className="pt-8 pl-6 pr-8 pb-2 flex flex-row items-center">
-            <Typography variant={"caption"}
-                        color={"secondary"}
-                        className="font-medium flex-grow line-clamp-1">
-                {group ? group.toUpperCase() : "Views".toUpperCase()}
-            </Typography>
-
-        </div>;
-    }, [drawerOpen]);
-
-    const onClick = (view: TopNavigationEntry) => {
-        const eventName: CMSAnalyticsEvent = view.type === "collection"
-            ? "drawer_navigate_to_collection"
-            : (view.type === "view" ? "drawer_navigate_to_view" : "unmapped_event");
-        analyticsController.onAnalyticsEvent?.(eventName, { url: view.url });
-        if (!largeLayout)
-            closeDrawer();
-    };
-
-    return (
-        <div className={"flex-grow overflow-scroll no-scrollbar"}>
-
-            {groups.map((group) => (
-                <React.Fragment
-                    key={`drawer_group_${group}`}>
-                    {buildGroupHeader(group)}
-                    {Object.values(navigationEntries)
-                        .filter(e => e.group === group)
-                        .map((view, index) =>
-                            <DrawerNavigationItem
-                                key={`navigation_${index}`}
-                                icon={<IconForView collectionOrView={view.collection ?? view.view}/>}
-                                tooltipsOpen={tooltipsOpen}
-                                drawerOpen={drawerOpen}
-                                onClick={() => onClick(view)}
-                                url={view.url}
-                                name={view.name}/>)}
-                </React.Fragment>
-            ))}
-
-            {ungroupedNavigationViews.length > 0 && buildGroupHeader()}
-
-            {ungroupedNavigationViews.map((view, index) => {
-
-                return <DrawerNavigationItem
-                    key={`navigation_${index}`}
-                    icon={<IconForView collectionOrView={view.collection ?? view.view}/>}
-                    tooltipsOpen={tooltipsOpen}
-                    onClick={() => onClick(view)}
-                    drawerOpen={drawerOpen}
-                    url={view.url}
-                    name={view.name}/>;
-            })}
-
-        </div>
-    );
-}
-
-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-xl 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-gray-100",
-            "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-75 dark:bg-gray-800" : ""
-        )}
-        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>;
-}