@firecms/core 3.0.0-beta.7 → 3.0.0-beta.9

package/src/util/resolutions.ts

@@ -217,6 +217,38 @@ export function resolveProperty<T extends CMSType = CMSType, M extends Record<st
         : null;
 }
 
+export function getArrayResolvedProperties<M>({
+                                           propertyKey,
+                                           propertyValue,
+                                           property,
+                                           ...props
+                                       }: {
+    propertyValue: any,
+    propertyKey?: string,
+    property: ArrayProperty<any> | ResolvedArrayProperty<any>,
+    ignoreMissingFields: boolean,
+    values?: Partial<M>;
+    previousValues?: Partial<M>;
+    path?: string;
+    entityId?: string;
+    index?: number;
+    fromBuilder?: boolean;
+    fields?: Record<string, PropertyConfig>
+}) {
+
+    const of = property.of;
+    return Array.isArray(propertyValue)
+        ? propertyValue.map((v: any, index: number) => {
+            return resolveProperty({
+                propertyKey: `${propertyKey}.${index}`,
+                propertyOrBuilder: of,
+                ...props,
+                index
+            });
+        }).filter(e => Boolean(e)) as ResolvedProperty[]
+        : [];
+}
+
 export function resolveArrayProperty<T extends any[], M>({
                                                              propertyKey,
                                                              property,
@@ -254,17 +286,14 @@ export function resolveArrayProperty<T extends any[], M>({
             } as ResolvedArrayProperty;
         } else {
             const of = property.of;
-            const resolvedProperties: ResolvedProperty[] = Array.isArray(propertyValue)
-                ? propertyValue.map((v: any, index: number) => resolveProperty({
-                    propertyKey: `${propertyKey}.${index}`,
-                    propertyOrBuilder: of,
-                    ignoreMissingFields,
-                    ...props,
-                    index
-                })).filter(e => Boolean(e)) as ResolvedProperty[]
-                : [];
+            const resolvedProperties = getArrayResolvedProperties({
+                propertyValue,
+                propertyKey,
+                property,
+                ignoreMissingFields,
+                ...props
+            });
             const ofProperty = resolveProperty({
-                propertyKey: `${propertyKey}`,
                 propertyOrBuilder: of,
                 ignoreMissingFields,
                 ...props
@@ -295,6 +324,7 @@ export function resolveArrayProperty<T extends any[], M>({
             }).filter(e => Boolean(e)) as ResolvedProperty[]
             : [];
         const properties = resolveProperties<any>({
+            propertyKey,
             properties: property.oneOf.properties,
             ignoreMissingFields,
             ...props
@@ -327,10 +357,12 @@ export function resolveArrayProperty<T extends any[], M>({
  * @param value
  */
 export function resolveProperties<M extends Record<string, any>>({
+                                                                     propertyKey,
                                                                      properties,
                                                                      ignoreMissingFields,
                                                                      ...props
                                                                  }: {
+    propertyKey?: string,
     properties: PropertiesOrBuilders<M>,
     values?: Partial<M>,
     previousValues?: Partial<M>,
@@ -344,7 +376,7 @@ export function resolveProperties<M extends Record<string, any>>({
     return Object.entries<PropertyOrBuilder>(properties as Record<string, PropertyOrBuilder>)
         .map(([key, property]) => {
             const childResolvedProperty = resolveProperty({
-                propertyKey: key,
+                propertyKey: propertyKey ? `${propertyKey}.${key}` : undefined,
                 propertyOrBuilder: property,
                 ignoreMissingFields,
                 ...props

package/src/util/storage.ts

@@ -1,22 +1,39 @@
 import {
+    ArrayProperty,
     EntityValues,
+    PropertyOrBuilder,
     ResolvedArrayProperty,
     ResolvedStringProperty,
     StorageConfig,
+    StringProperty,
     UploadedFileContext
 } from "../types";
 import { randomString } from "./strings";
 
-export async function resolveFilenameString<M extends object>(
-    input: string | ((context: UploadedFileContext) => Promise<string> | string),
-    storage: StorageConfig,
-    values: EntityValues<M>,
-    entityId: string,
-    path: string,
+interface ResolveFilenameStringParams<M extends object> {
+    input: string | ((context: UploadedFileContext) => (Promise<string> | string));
+    storage: StorageConfig;
+    values: EntityValues<M>;
+    entityId: string;
+    path?: string;
     property: ResolvedStringProperty | ResolvedArrayProperty<string[]>,
-    file: File,
-    propertyKey: string): Promise<string> {
+    file: File;
+    propertyKey: string;
+}
+
+export async function resolveStorageFilenameString<M extends object>(
+    {
+        input,
+        storage,
+        values,
+        entityId,
+        path,
+        property,
+        file,
+        propertyKey
+    }: ResolveFilenameStringParams<M>): Promise<string> {
     let result;
+
     if (typeof input === "function") {
         result = await input({
             path,
@@ -30,7 +47,13 @@ export async function resolveFilenameString<M extends object>(
         if (!result)
             console.warn("Storage callback returned empty result. Using default name value")
     } else {
-        result = replacePlaceholders(file, input, entityId, propertyKey, path);
+        result = replacePlaceholders({
+            file,
+            input,
+            entityId,
+            propertyKey,
+            path
+        });
     }
 
     if (!result)
@@ -39,15 +62,28 @@ export async function resolveFilenameString<M extends object>(
     return result;
 }
 
+interface ResolveStoragePathStringParams<M extends object> {
+    input: string | ((context: UploadedFileContext) => string);
+    storage: StorageConfig;
+    values: EntityValues<M>;
+    entityId: string;
+    path?: string;
+    property: ResolvedStringProperty | ResolvedArrayProperty<string[]>;
+    file: File;
+    propertyKey: string;
+}
+
 export function resolveStoragePathString<M extends object>(
-    input: string | ((context: UploadedFileContext) => string),
-    storage: StorageConfig,
-    values: EntityValues<M>,
-    entityId: string,
-    path: string,
-    property: ResolvedStringProperty | ResolvedArrayProperty<string[]>,
-    file: File,
-    propertyKey: string): string {
+    {
+        input,
+        storage,
+        values,
+        entityId,
+        path,
+        property,
+        file,
+        propertyKey
+    }: ResolveStoragePathStringParams<M>): string {
     let result;
     if (typeof input === "function") {
         result = input({
@@ -62,7 +98,13 @@ export function resolveStoragePathString<M extends object>(
         if (!result)
             console.warn("Storage callback returned empty result. Using default name value")
     } else {
-        result = replacePlaceholders(file, input, entityId, propertyKey, path);
+        result = replacePlaceholders({
+            file,
+            input,
+            entityId,
+            propertyKey,
+            path
+        });
     }
 
     if (!result)
@@ -71,14 +113,30 @@ export function resolveStoragePathString<M extends object>(
     return result;
 }
 
-function replacePlaceholders(file: File, input: string, entityId: string, propertyKey: string, path: string) {
+interface Placeholders {
+    file: File;
+    input: string;
+    entityId: string;
+    propertyKey: string;
+    path?: string;
+}
+
+function replacePlaceholders({
+                                 file,
+                                 input,
+                                 entityId,
+                                 propertyKey,
+                                 path
+                             }: Placeholders) {
     const ext = file.name.split(".").pop();
     let result = input.replace("{entityId}", entityId)
         .replace("{propertyKey}", propertyKey)
         .replace("{rand}", randomString())
         .replace("{file}", file.name)
-        .replace("{file.type}", file.type)
-        .replace("{path}", path);
+        .replace("{file.type}", file.type);
+    if (path) {
+        result = result.replace("{path}", path);
+    }
     if (ext) {
         result = result.replace("{file.ext}", ext);
         const name = file.name.replace(`.${ext}`, "");

package/src/util/useStorageUploadController.tsx

@@ -2,9 +2,11 @@ import Resizer from "react-image-file-resizer";
 import equal from "react-fast-compare";
 
 import {
+    ArrayProperty,
     EntityValues,
     ImageCompression,
     Property,
+    PropertyOrBuilder,
     ResolvedArrayProperty,
     ResolvedStringProperty,
     StorageConfig,
@@ -14,7 +16,8 @@ import {
 import { useCallback, useEffect, useState } from "react";
 import { PreviewSize } from "../preview";
 import { randomString } from "./strings";
-import { resolveFilenameString, resolveStoragePathString } from "./storage";
+import { resolveStorageFilenameString, resolveStoragePathString } from "./storage";
+import { resolveProperty } from "./resolutions";
 
 /**
  * Internal representation of an item in the storage
@@ -46,9 +49,9 @@ 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[]>,
+                                                                     property: StringProperty | ArrayProperty<string[]> | ResolvedStringProperty | ResolvedArrayProperty<string[]>,
                                                                      storageSource: StorageSource,
                                                                      disabled: boolean,
                                                                      onChange: (value: string | string[] | null) => void
@@ -93,20 +96,43 @@ export function useStorageUploadController<M extends object>({
         }
     }, [internalInitialValue, value, initialValue]);
 
+    const resolvedProperty = resolveProperty({
+        propertyOrBuilder: property as PropertyOrBuilder,
+        values: entityValues
+    }) as ResolvedStringProperty | ResolvedArrayProperty<string[]>;
+
     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 resolveStorageFilenameString({
+                input: storage.fileName,
+                storage,
+                values: entityValues,
+                entityId,
+                path,
+                property: resolvedProperty,
+                file,
+                propertyKey
+            });
             if (!fileName || fileName.length === 0) {
                 throw Error("You need to return a valid filename");
             }
             return fileName;
         }
         return randomString() + "_" + file.name;
-    }, [entityId, entityValues, path, property, propertyKey, storage]);
+    }, [entityId, entityValues, path, resolvedProperty, propertyKey, storage]);
 
     const storagePathBuilder = useCallback((file: File) => {
-        return resolveStoragePathString(storage.storagePath, storage, entityValues, entityId, path, property, file, propertyKey) ?? "/";
-    }, [entityId, entityValues, path, property, propertyKey, storage]);
+        return resolveStoragePathString({
+            input: storage.storagePath,
+            storage,
+            values: entityValues,
+            entityId,
+            path,
+            property: resolvedProperty,
+            file,
+            propertyKey
+        }) ?? "/";
+    }, [entityId, entityValues, path, resolvedProperty, propertyKey, storage]);
 
     const onFileUploadComplete = useCallback(async (uploadedPath: string,
                                                     entry: StorageFieldItem,

package/dist/components/PropertyIdCopyTooltipContent.d.ts

@@ -1,3 +0,0 @@
-export declare function PropertyIdCopyTooltipContent({ propertyId }: {
-    propertyId: string;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/core/Drawer.d.ts

@@ -1,16 +0,0 @@
-/**
- * Props used in case you need to override the default drawer
- * @group Core
- */
-export type DrawerProps = {
-    hovered: boolean;
-    drawerOpen: boolean;
-    openDrawer: () => void;
-    closeDrawer: () => void;
-    autoOpenDrawer?: boolean;
-};
-/**
- * Default drawer used in the CMS
- * @group Core
- */
-export declare function Drawer(): import("react/jsx-runtime").JSX.Element;

package/dist/core/Scaffold.d.ts

@@ -1,51 +0,0 @@
-import React from "react";
-import { DrawerProps } from "./Drawer";
-import { FireCMSAppBarProps } from "../components";
-export declare const DRAWER_WIDTH = 280;
-export declare function useDrawer(): DrawerProps;
-/**
- * @group Core
- */
-export interface ScaffoldProps<ExtraAppbarProps = object> {
-    /**
-     * Name of the app, displayed as the main title and in the tab title
-     */
-    name?: React.ReactNode;
-    /**
-     * Logo to be displayed in the drawer of the CMS
-     */
-    logo?: string;
-    /**
-     * Whether to include the drawer in the scaffold
-     */
-    includeDrawer?: boolean;
-    /**
-     * You can define a custom drawer to be displayed in the scaffold.
-     * Use the hook `useDrawer` to access the context values.
-     */
-    drawer?: React.ReactNode;
-    /**
-     * Open the drawer on hover
-     */
-    autoOpenDrawer?: boolean;
-    /**
-     * The AppBar component to be used in the scaffold.
-     */
-    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>>>;

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/form/field_bindings/MarkdownFieldBinding.d.ts

@@ -1,9 +0,0 @@
-import { FieldProps } from "../../types";
-/**
- * Render a markdown field that allows edition and seeing the preview.
- *
- * This is one of the internal components that get mapped natively inside forms
- * and tables to the specified properties.
- * @group Form fields
- */
-export declare function MarkdownFieldBinding({ propertyKey, value, setValue, error, showError, disabled, autoFocus, touched, property, tableMode, includeDescription, context }: FieldProps<string>): import("react/jsx-runtime").JSX.Element;

package/src/components/PropertyIdCopyTooltipContent.tsx

@@ -1,27 +0,0 @@
-import { ContentCopyIcon, IconButton, Typography } from "@firecms/ui";
-import { useCallback, useState } from "react";
-
-export function PropertyIdCopyTooltipContent({ propertyId }: { propertyId: string }) {
-
-    const [copied, setCopied] = useState(false);
-
-    return (
-        <div className={"flex flex-row gap-2 items-center justify-center text-white"}>
-            <div>
-                <Typography variant={"caption"} className={"min-w-20 text-slate-400"}
-                            color={"disabled"}>{copied ? "Copied" : "Property ID"}</Typography>
-                <Typography variant={"caption"} className={"text-white"}><code>{propertyId}</code></Typography>
-            </div>
-            <IconButton size={"small"}>
-                <ContentCopyIcon size={"smallest"}
-                                  className={"text-white"}
-                                  onClick={useCallback(() => {
-                                      navigator.clipboard.writeText(propertyId);
-                                      setCopied(true);
-                                      setTimeout(() => setCopied(false), 2000);
-                                  }, [propertyId])}
-                />
-            </IconButton>
-        </div>
-    );
-}

package/src/core/Drawer.tsx

@@ -1,139 +0,0 @@
-import React, { useCallback } from "react";
-
-import { useLargeLayout, useNavigationController } from "../hooks";
-
-import { useNavigate } from "react-router-dom";
-import { CMSAnalyticsEvent, TopNavigationEntry, TopNavigationResult } from "../types";
-import { IconForView } from "../util";
-import { cls, IconButton, Menu, MenuItem, MoreVertIcon, Tooltip, Typography } from "@firecms/ui";
-import { useAnalyticsController } from "../hooks/useAnalyticsController";
-import { useDrawer } from "./Scaffold";
-import { DrawerNavigationItem } from "./DrawerNavigationItem";
-
-/**
- * Props used in case you need to override the default drawer
- * @group Core
- */
-export type DrawerProps = {
-    hovered: boolean,
-    drawerOpen: boolean,
-    openDrawer: () => void,
-    closeDrawer: () => void,
-    autoOpenDrawer?: boolean
-}
-
-/**
- * Default drawer used in the CMS
- * @group Core
- */
-export function Drawer() {
-
-    const {
-        hovered,
-        drawerOpen,
-        closeDrawer,
-    } = useDrawer();
-
-    const analyticsController = useAnalyticsController();
-    const navigation = useNavigationController();
-
-    const tooltipsOpen = hovered && !drawerOpen;
-    const largeLayout = useLargeLayout();
-    const navigate = useNavigate();
-
-    const [adminMenuOpen, setAdminMenuOpen] = React.useState(false);
-
-    if (!navigation.topLevelNavigation)
-        throw Error("Navigation not ready in Drawer");
-
-    const {
-        navigationEntries,
-        groups
-    }: TopNavigationResult = navigation.topLevelNavigation;
-
-    const adminViews = navigationEntries.filter(e => e.type === "admin") ?? [];
-    const groupsWithoutAdmin = groups.filter(g => g !== "Admin");
-
-    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"}>
-
-                {groupsWithoutAdmin.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>
-                ))}
-
-            </div>
-
-            {adminViews.length > 0 && <Menu
-                open={adminMenuOpen}
-                onOpenChange={setAdminMenuOpen}
-                trigger={
-                    <IconButton
-                        shape={"square"}
-                        className={"m-4 text-gray-900 dark:text-white w-fit"}>
-                        <Tooltip title={"Admin"}
-                                 open={tooltipsOpen}
-                                 side={"right"} sideOffset={28}>
-                            <MoreVertIcon/>
-                        </Tooltip>
-                        {drawerOpen && <div
-                            className={cls(
-                                drawerOpen ? "opacity-100" : "opacity-0 hidden",
-                                "mx-4 font-inherit text-inherit"
-                            )}>
-                            ADMIN
-                        </div>}
-                    </IconButton>}
-            >
-                {adminViews.map((entry, index) =>
-                    <MenuItem
-                        onClick={(event) => {
-                            event.preventDefault();
-                            navigate(entry.path);
-                        }}
-                        key={`navigation_${index}`}>
-                        {<IconForView collectionOrView={entry.view}/>}
-                        {entry.name}
-                    </MenuItem>)}
-
-            </Menu>}
-        </>
-    );
-}