@firecms/core 3.0.0-canary.2 → 3.0.0-canary.200

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/strings.ts

@@ -56,8 +56,8 @@ export function unslugify(slug?: string): string {
         const result = slug.replace(/[-_]/g, " ");
         return result.replace(/\w\S*/g, function (txt) {
             return txt.charAt(0).toUpperCase() + txt.substr(1);
-        });
+        }).trim();
     } else {
-        return slug;
+        return slug.trim();
     }
 }

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
@@ -31,6 +34,7 @@ export interface StorageFieldItem {
     size: PreviewSize
 }
 
+
 export function useStorageUploadController<M extends object>({
                                                                  entityId,
                                                                  entityValues,
@@ -42,17 +46,17 @@ export function useStorageUploadController<M extends object>({
                                                                  disabled,
                                                                  onChange
                                                              }:
-                                                                 {
-                                                                     entityId: string,
-                                                                     entityValues: EntityValues<M>,
-                                                                     value: string | string[] | null;
-                                                                     path: string,
-                                                                     propertyKey: string,
-                                                                     property: ResolvedStringProperty | ResolvedArrayProperty<string[]>,
-                                                                     storageSource: StorageSource,
-                                                                     disabled: boolean,
-                                                                     onChange: (value: string | string[] | null) => void
-                                                                 }) {
+                                                             {
+                                                                 entityId: string,
+                                                                 entityValues: EntityValues<M>,
+                                                                 value: string | string[] | null;
+                                                                 path?: string,
+                                                                 propertyKey: string,
+                                                                 property: StringProperty | ArrayProperty<string[]> | ResolvedStringProperty | ResolvedArrayProperty<string[]>,
+                                                                 storageSource: StorageSource,
+                                                                 disabled: boolean,
+                                                                 onChange: (value: string | string[] | null) => void
+                                                             }) {
 
     const storage: StorageConfig | undefined = property.dataType === "string"
         ? property.storage
@@ -67,21 +71,12 @@ export function useStorageUploadController<M extends object>({
         throw Error("Storage meta must be specified");
 
     const metadata: Record<string, any> | undefined = storage?.metadata;
-    const size = multipleFilesSupported ? "small" : "medium";
+    const size = multipleFilesSupported ? "medium" : "large";
 
     const compression: ImageCompression | undefined = storage?.imageCompression;
 
     const internalInitialValue: StorageFieldItem[] =
-        (multipleFilesSupported
-            ? (value ?? []) as string[]
-            : value ? [value as string] : []).map(entry => (
-            {
-                id: getRandomId(),
-                storagePathOrDownloadUrl: entry,
-                metadata,
-                size
-            }
-        ));
+        getInternalInitialValue(multipleFilesSupported, value, metadata, size);
 
     const [initialValue, setInitialValue] = useState<string | string[] | null>(value);
     const [internalValue, setInternalValue] = useState<StorageFieldItem[]>(internalInitialValue);
@@ -93,20 +88,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,
@@ -200,6 +218,32 @@ export function useStorageUploadController<M extends object>({
     }
 }
 
+function getInternalInitialValue(multipleFilesSupported: boolean,
+                                 value: string | string[] | null,
+                                 metadata: Record<string, any> | undefined,
+                                 size: PreviewSize): StorageFieldItem[] {
+    let strings: string[] = [];
+    if (multipleFilesSupported) {
+        if (Array.isArray(value) && value.every((v) => typeof v === "string")) {
+            strings = (value ?? []) as string[];
+        }
+    } else {
+        if (typeof value === "string") {
+            strings = value ? [value as string] : [];
+        }
+    }
+
+    return strings
+        .map(entry => (
+            {
+                id: getRandomId(),
+                storagePathOrDownloadUrl: entry,
+                metadata,
+                size
+            }
+        ));
+}
+
 function removeDuplicates(items: StorageFieldItem[]) {
     return items.filter(
         (item, i) => {

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/PropertyIdCopyTooltipContent.d.ts

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

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/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/form/components/FormikArrayContainer.d.ts

@@ -1,18 +0,0 @@
-import React from "react";
-interface ArrayContainerProps<T> {
-    value: T[];
-    name: string;
-    addLabel: string;
-    buildEntry: (index: number, internalId: number) => React.ReactNode;
-    disabled?: boolean;
-    small?: boolean;
-    onInternalIdAdded?: (id: number) => void;
-    includeAddButton?: boolean;
-    newDefaultEntry?: T | null;
-    setFieldValue: (field: string, value: any, shouldValidate?: boolean | undefined) => void;
-}
-/**
- * @group Form custom fields
- */
-export declare function FormikArrayContainer<T>({ name, addLabel, value, disabled, buildEntry, small, onInternalIdAdded, includeAddButton, newDefaultEntry, setFieldValue }: ArrayContainerProps<T>): import("react/jsx-runtime").JSX.Element;
-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/dist/internal/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/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/FireCMSAppBar.tsx

@@ -1,157 +0,0 @@
-import React from "react";
-
-import { Link as ReactLink } from "react-router-dom";
-import { ErrorBoundary } from "../components";
-import {
-    Avatar,
-    cn,
-    DarkModeIcon,
-    IconButton,
-    LightModeIcon,
-    LogoutIcon,
-    Menu,
-    MenuItem,
-    Skeleton,
-    Typography
-} from "@firecms/ui";
-import { useAuthController, useLargeLayout, useModeController, useNavigationController } from "../hooks";
-import { User } from "../types";
-
-export type FireCMSAppBarProps<ADDITIONAL_PROPS = object> = {
-    title: string;
-    /**
-     * A component that gets rendered on the upper side of the main toolbar
-     */
-    endAdornment?: React.ReactNode;
-
-    startAdornment?: React.ReactNode;
-
-    dropDownActions?: React.ReactNode;
-
-    includeDrawer?: boolean;
-
-    drawerOpen: boolean;
-
-    className?: string;
-
-    style?: React.CSSProperties;
-
-    user?: User;
-} & ADDITIONAL_PROPS;
-
-/**
- * This component renders the main app bar of FireCMS.
- * You will likely not need to use this component directly.
- *
- * @param title
- * @param toolbarExtraWidget
- * @param drawerOpen
- * @constructor
- */
-export const FireCMSAppBar = function FireCMSAppBar({
-                                                        title,
-                                                        endAdornment,
-                                                        startAdornment,
-                                                        drawerOpen,
-                                                        dropDownActions,
-                                                        includeDrawer,
-                                                        className,
-                                                        style,
-                                                        user: userProp
-                                                    }: FireCMSAppBarProps) {
-    const navigation = useNavigationController();
-
-    const authController = useAuthController();
-    const {
-        mode,
-        toggleMode
-    } = useModeController();
-
-    const largeLayout = useLargeLayout();
-
-    const user = userProp ?? authController.user;
-
-    let avatarComponent: JSX.Element;
-    if (user && user.photoURL) {
-        avatarComponent = <Avatar
-            src={user.photoURL}/>;
-    } else if (user === undefined || authController.initialLoading) {
-        avatarComponent = <div className={"p-1 flex justify-center"}>
-            <Skeleton className={"w-10 h-10 rounded-full"}/>
-        </div>;
-    } else {
-        const initial = user?.displayName
-            ? user.displayName[0].toUpperCase()
-            : (user?.email ? user.email[0].toUpperCase() : "A");
-        avatarComponent = <Avatar>{initial}</Avatar>;
-    }
-
-    return (
-        <div
-            style={style}
-            className={cn("pr-2",
-                {
-                    "ml-[17rem]": drawerOpen && largeLayout,
-                    "ml-16": includeDrawer && !(drawerOpen && largeLayout) && !startAdornment,
-                    "h-16": true,
-                    "z-10": largeLayout,
-                    "transition-all": true,
-                    "ease-in": true,
-                    "duration-75": true,
-                    "w-full": !includeDrawer,
-                    "w-[calc(100%-64px)]": includeDrawer && !(drawerOpen && largeLayout),
-                    "w-[calc(100%-17rem)]": includeDrawer && (drawerOpen && largeLayout),
-                    "duration-150": drawerOpen && largeLayout,
-                    fixed: true,
-                },
-                className)}>
-
-            <div className="flex flex-row gap-2 px-4 h-full items-center">
-
-                {startAdornment}
-
-                {navigation && <div className="mr-8 hidden lg:block">
-                    <ReactLink
-                        className="visited:text-inherit visited:dark:text-inherit"
-                        to={navigation?.basePath ?? "/"}
-                    >
-                        <Typography variant="subtitle1"
-                                    noWrap
-                                    className={"ml-2 !font-medium"}>
-                            {title}
-                        </Typography>
-                    </ReactLink>
-                </div>}
-
-                <div className={"flex-grow"}/>
-
-                {endAdornment &&
-                    <ErrorBoundary>
-                        {endAdornment}
-                    </ErrorBoundary>}
-
-                <IconButton
-                    color="inherit"
-                    aria-label="Open drawer"
-                    onClick={toggleMode}
-                    size="large">
-                    {mode === "dark"
-                        ? <DarkModeIcon/>
-                        : <LightModeIcon/>}
-                </IconButton>
-
-                <Menu trigger={avatarComponent}>
-
-                    {dropDownActions}
-
-                    {!dropDownActions && <MenuItem onClick={authController.signOut}>
-                        <LogoutIcon/>
-                        Log Out
-                    </MenuItem>}
-
-                </Menu>
-
-            </div>
-        </div>
-    );
-}