@firecms/core 3.0.0-canary.42 → 3.0.0-canary.44

package/src/components/FireCMSAppBar.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { Link as ReactLink } from "react-router-dom";
-import { ErrorBoundary } from "../components";
+import { ErrorBoundary, FireCMSLogo } from "../components";
 import {
     Avatar,
     cn,
@@ -18,7 +18,8 @@ import { useAuthController, useLargeLayout, useModeController, useNavigationCont
 import { User } from "../types";
 
 export type FireCMSAppBarProps<ADDITIONAL_PROPS = object> = {
-    title: string;
+
+    title: React.ReactNode;
     /**
      * A component that gets rendered on the upper side of the main toolbar
      */
@@ -36,6 +37,8 @@ export type FireCMSAppBarProps<ADDITIONAL_PROPS = object> = {
 
     style?: React.CSSProperties;
 
+    logo?: string;
+
     user?: User;
 } & ADDITIONAL_PROPS;
 
@@ -57,6 +60,7 @@ export const FireCMSAppBar = function FireCMSAppBar({
                                                         includeDrawer,
                                                         className,
                                                         style,
+                                                        logo,
                                                         user: userProp
                                                     }: FireCMSAppBarProps) {
     const navigation = useNavigationController();
@@ -102,7 +106,7 @@ export const FireCMSAppBar = function FireCMSAppBar({
                     "w-[calc(100%-64px)]": includeDrawer && !(drawerOpen && largeLayout),
                     "w-[calc(100%-17rem)]": includeDrawer && (drawerOpen && largeLayout),
                     "duration-150": drawerOpen && largeLayout,
-                    fixed: true,
+                    fixed: true
                 },
                 className)}>
 
@@ -110,16 +114,27 @@ export const FireCMSAppBar = function FireCMSAppBar({
 
                 {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>
+                        <div className={"flex flex-row gap-4"}>
+                            {!includeDrawer && (logo
+                                ? <img src={logo}
+                                       alt="Logo"
+                                       className={cn("w-[32px] h-[32px]")}/>
+                                : <FireCMSLogo width={"32px"} height={"32px"}/>)}
+
+                            {typeof title === "string"
+                                ? <Typography variant="subtitle1"
+                                              noWrap
+                                              className={"ml-2 !font-medium"}>
+                                    {title}
+                                </Typography>
+                                : title}
+                        </div>
                     </ReactLink>
                 </div>}
 

package/src/components/ReferenceTable/ReferenceSelectionTable.tsx

@@ -291,6 +291,7 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
                         displayedColumnIds={displayedColumnIds}
                         onEntityClick={onEntityClick}
                         tableController={tableController}
+                        enablePopupIcon={false}
                         tableRowActionsBuilder={tableRowActionsBuilder}
                         title={<Typography variant={"subtitle2"}>
                             {collection.singularName ? `Select ${collection.singularName}` : `Select from ${collection.name}`}

package/src/components/SelectableTable/SelectableTable.tsx

@@ -10,7 +10,7 @@ import {
 } from "../../types";
 import { CellRendererParams, VirtualTable, VirtualTableColumn } from "../VirtualTable";
 import { enumToObjectEntries } from "../../util";
-import { OnCellValueChange, OnColumnResizeParams } from "../common/types";
+import { OnCellValueChange, OnColumnResizeParams } from "../common";
 import { FilterFormFieldProps } from "../VirtualTable/VirtualTableHeader";
 import { ReferenceFilterField } from "./filters/ReferenceFilterField";
 import { StringNumberFilterField } from "./filters/StringNumberFilterField";

package/src/components/SelectableTable/filters/BooleanFilterField.tsx

@@ -32,7 +32,7 @@ export function BooleanFilterField({
     const valueSet = !!value;
 
     return (
-        <div className="w-[200px]">
+        <div className="w-[300px]">
             <BooleanSwitchWithLabel
                 value={valueSetToTrue}
                 allowIndeterminate={true}
@@ -44,6 +44,5 @@ export function BooleanFilterField({
                         : `${title} is false`}
             />
         </div>
-    )
-        ;
+    );
 }

package/src/components/VirtualTable/VirtualTable.tsx

@@ -404,7 +404,7 @@ const SafeLinkRenderer: React.FC<{
     const urlRegex = /https?:\/\/[^\s]+/g;
     const htmlContent = text.replace(urlRegex, (url) => {
         // For each URL found, replace it with an HTML <a> tag
-        return `<a href="${url}" target="_blank">Link</a><br/>`;
+        return `<a href="${url}" class="underline" target="_blank">Link</a><br/>`;
     });
 
     return (

package/src/components/common/types.tsx

@@ -1,4 +1,4 @@
-import { CollectionSize, Entity, FireCMSContext, ResolvedProperty, SelectedCellProps } from "../../types";
+import { CollectionSize, FireCMSContext, ResolvedProperty, SelectedCellProps } from "../../types";
 
 export type EntityCollectionTableController<M extends Record<string, any>> = {
 
@@ -31,14 +31,12 @@ export type EntityCollectionTableController<M extends Record<string, any>> = {
  * Props passed in a callback when the content of a cell in a table has been edited
  * @group Collection components
  */
-export interface OnCellValueChangeParams<T = any, M extends Record<string, any> = any> {
+export interface OnCellValueChangeParams<T = any, D = any> {
     value: T,
     propertyKey: string,
-    entity: Entity<M>,
+    data?: D,
     onValueUpdated: () => void
-    setError: (e: Error) => void
-    fullPath: string
-    context: FireCMSContext
+    setError: (e: Error | undefined) => void
 }
 
 /**

package/src/core/NavigationRoutes.tsx

@@ -13,7 +13,7 @@ export type NavigationRoutesProps = {
     /**
      * In case you need to override the home page
      */
-    HomePage?: React.ComponentType;
+    homePage?: React.ReactNode;
 
     customRoutes?: React.ReactNode[]
 
@@ -28,10 +28,9 @@ export type NavigationRoutesProps = {
  * @constructor
  * @group Components
  */
-
 export const NavigationRoutes = React.memo<NavigationRoutesProps>(
     function NavigationRoutes({
-                                  HomePage = DefaultHomePage,
+                                  homePage = <DefaultHomePage/>,
                                   customRoutes
                               }: NavigationRoutesProps) {
 
@@ -93,7 +92,7 @@ export const NavigationRoutes = React.memo<NavigationRoutesProps>(
 
         const homeRoute = (
             <Route path={"/"}
-                   element={<HomePage/>}/>
+                   element={homePage}/>
         );
 
         const notFoundRoute = <Route path={"*"}

package/src/core/Scaffold.tsx

@@ -17,7 +17,7 @@ export interface ScaffoldProps<ExtraDrawerProps = object, ExtraAppbarProps = obj
     /**
      * Name of the app, displayed as the main title and in the tab title
      */
-    name: string;
+    name: React.ReactNode;
 
     /**
      * Logo to be displayed in the drawer of the CMS
@@ -112,9 +112,10 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
                 }}>
 
                 <FireCMSAppBar title={name}
-                                        includeDrawer={includeDrawer}
-                                        drawerOpen={computedDrawerOpen}
-                                        {...fireCMSAppBarProps}/>
+                               includeDrawer={includeDrawer}
+                               logo={logo}
+                               drawerOpen={computedDrawerOpen}
+                               {...fireCMSAppBarProps}/>
 
                 <StyledDrawer
                     displayed={includeDrawer}

package/src/hooks/data/save.ts

@@ -17,7 +17,6 @@ import { resolveCollection } from "../../util";
 export type SaveEntityWithCallbacksProps<M extends Record<string, any>> =
     SaveEntityProps<M> &
     {
-        callbacks?: EntityCallbacks<M>;
         onSaveSuccess?: (updatedEntity: Entity<M>) => void,
         onSaveFailure?: (e: Error) => void,
         onPreSaveHookError?: (e: Error) => void,
@@ -145,6 +144,7 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, Use
             onSaveSuccess(entity);
     })
         .catch((e) => {
+            console.error("!!!", e);
             if (callbacks?.onSaveFailure) {
 
                 const resolvedCollection = resolveCollection<M>({

package/src/hooks/useValidateAuthenticator.tsx

@@ -1,15 +1,13 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import equal from "react-fast-compare";
 
-import { AppCheckTokenResult, AuthController, Authenticator, DataSourceDelegate, StorageSource, User } from "../index";
+import { AuthController, Authenticator, DataSourceDelegate, StorageSource, User } from "../index";
 
 /**
  * This hook is used internally for validating an authenticator.
  *
  * @param authController
  * @param authentication
- * @param getAppCheckToken
- * @param appCheckForceRefresh
  * @param storageSource
  * @param dataSourceDelegate
  */
@@ -17,8 +15,6 @@ export function useValidateAuthenticator<UserType extends User = User, Controlle
                                                                                                                                                    disabled,
                                                                                                                                                    authController,
                                                                                                                                                    authenticator,
-                                                                                                                                                   getAppCheckToken,
-                                                                                                                                                   appCheckForceRefresh = false,
                                                                                                                                                    storageSource,
                                                                                                                                                    dataSourceDelegate
                                                                                                                                                }:
@@ -26,8 +22,6 @@ export function useValidateAuthenticator<UserType extends User = User, Controlle
                                                                                                                                                        disabled?: boolean,
                                                                                                                                                        authController: Controller,
                                                                                                                                                        authenticator?: boolean | Authenticator<UserType, Controller>,
-                                                                                                                                                       getAppCheckToken?: (forceRefresh: boolean) => Promise<AppCheckTokenResult> | undefined,
-                                                                                                                                                       appCheckForceRefresh?: boolean,
                                                                                                                                                        dataSourceDelegate: DataSourceDelegate;
                                                                                                                                                        storageSource: StorageSource;
                                                                                                                                                    }): {
@@ -78,20 +72,6 @@ export function useValidateAuthenticator<UserType extends User = User, Controlle
         const delegateUser = authController.user;
         console.debug("Checking authentication for user", delegateUser);
 
-        if (getAppCheckToken) {
-            try {
-                if (!await getAppCheckToken(appCheckForceRefresh)) {
-                    setNotAllowedError("App Check failed.");
-                    authController.signOut();
-                } else {
-                    console.debug("App Check success.");
-                }
-            } catch (e: any) {
-                setNotAllowedError(e.message);
-                authController.signOut();
-            }
-        }
-
         if (authenticator instanceof Function && delegateUser && !equal(checkedUserRef.current?.uid, delegateUser.uid)) {
             setAuthLoading(true);
             try {
@@ -120,7 +100,7 @@ export function useValidateAuthenticator<UserType extends User = User, Controlle
             setAuthVerified(true);
         }
 
-    }, [disabled, authController, authenticator, getAppCheckToken, appCheckForceRefresh, dataSourceDelegate, storageSource]);
+    }, [disabled, authController, authenticator, dataSourceDelegate, storageSource]);
 
     useEffect(() => {
         checkAuthentication();

package/src/internal/useBuildDataSource.ts

@@ -5,12 +5,10 @@ import {
     DeleteEntityProps,
     Entity,
     EntityCollection,
-    EntityReference,
     EntityValues,
     FetchCollectionProps,
     FetchEntityProps,
     FilterValues,
-    GeoPoint,
     ListenCollectionProps,
     ListenEntityProps,
     NavigationController,
@@ -207,13 +205,10 @@ export function useBuildDataSource({
 
             const properties: ResolvedProperties<M> | undefined = resolvedCollection?.properties;
 
-            const firestoreValues = cmsToDelegateModel(
+            const firestoreValues = delegate.cmsToDelegateModel(
                 values,
-                delegate.buildReference,
-                delegate.buildGeoPoint,
-                delegate.buildDate,
-                delegate.buildDeleteFieldValue
             );
+
             const updatedFirestoreValues: EntityValues<M> = properties
                 ? updateDateAutoValues(
                     {
@@ -316,48 +311,48 @@ export function useBuildDataSource({
                     sortBy
                 }
             )
-        }, [delegate.isFilterCombinationValid])
+        }, [delegate.isFilterCombinationValid]),
 
     };
 
 }
 
-/**
- * Recursive function that converts Firestore data types into CMS or plain
- * JS types.
- * FireCMS uses Javascript dates internally instead of Firestore timestamps.
- * This makes it easier to interact with the rest of the libraries and
- * bindings.
- * Also, Firestore references are replaced with {@link EntityReference}
- * @param data
- * @param buildReference
- * @param buildGeoPoint
- * @param buildDate
- * @param buildDelete
- * @group Firestore
- */
-export function cmsToDelegateModel(data: any,
-                                   buildReference: (reference: EntityReference) => any,
-                                   buildGeoPoint: (geoPoint: GeoPoint) => any,
-                                   buildDate: (date: Date) => any,
-                                   buildDelete: () => any
-): any {
-    if (data === undefined) {
-        return buildDelete();
-    } else if (data === null) {
-        return null;
-    } else if (Array.isArray(data)) {
-        return data.map(v => cmsToDelegateModel(v, buildReference, buildGeoPoint, buildDate, buildDelete));
-    } else if (data.isEntityReference && data.isEntityReference()) {
-        return buildReference(data);
-    } else if (data instanceof GeoPoint) {
-        return buildGeoPoint(data);
-    } else if (data instanceof Date) {
-        return buildDate(data);
-    } else if (data && typeof data === "object") {
-        return Object.entries(data)
-            .map(([key, v]) => ({ [key]: cmsToDelegateModel(v, buildReference, buildGeoPoint, buildDate, buildDelete) }))
-            .reduce((a, b) => ({ ...a, ...b }), {});
-    }
-    return data;
-}
+// /**
+//  * Recursive function that converts Firestore data types into CMS or plain
+//  * JS types.
+//  * FireCMS uses Javascript dates internally instead of Firestore timestamps.
+//  * This makes it easier to interact with the rest of the libraries and
+//  * bindings.
+//  * Also, Firestore references are replaced with {@link EntityReference}
+//  * @param data
+//  * @param buildReference
+//  * @param buildGeoPoint
+//  * @param buildDate
+//  * @param buildDelete
+//  * @group Firestore
+//  */
+// export function cmsToDelegateModel(data: any,
+//                                    buildReference: (reference: EntityReference) => any,
+//                                    buildGeoPoint: (geoPoint: GeoPoint) => any,
+//                                    buildDate: (date: Date) => any,
+//                                    buildDelete: () => any
+// ): any {
+//     if (data === undefined) {
+//         return buildDelete();
+//     } else if (data === null) {
+//         return null;
+//     } else if (Array.isArray(data)) {
+//         return data.map(v => cmsToDelegateModel(v, buildReference, buildGeoPoint, buildDate, buildDelete));
+//     } else if (data.isEntityReference && data.isEntityReference()) {
+//         return buildReference(data);
+//     } else if (data instanceof GeoPoint) {
+//         return buildGeoPoint(data);
+//     } else if (data instanceof Date) {
+//         return buildDate(data);
+//     } else if (data && typeof data === "object") {
+//         return Object.entries(data)
+//             .map(([key, v]) => ({ [key]: cmsToDelegateModel(v, buildReference, buildGeoPoint, buildDate, buildDelete) }))
+//             .reduce((a, b) => ({ ...a, ...b }), {});
+//     }
+//     return data;
+// }

package/src/preview/PropertyPreview.tsx

@@ -92,7 +92,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
                     size={props.size}
                     storagePathOrDownloadUrl={value}/>;
             } else if (stringProperty.markdown) {
-                content = <Markdown source={value}/>;
+                content = <Markdown source={value} size={"small"}/>;
             } else {
                 content = <StringPropertyPreview {...props}
                                                  property={stringProperty}
@@ -113,17 +113,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
                     content = <ArrayPropertyPreview {...props}
                                                     value={value}
                                                     property={property as ResolvedArrayProperty}/>;
-                }
-                    // else if (arrayProperty.of.dataType === "map") {
-                    //     content =
-                    //         <ArrayOfMapsPreview propertyKey={propertyKey}
-                    //                             property={property as ResolvedArrayProperty}
-                    //                             value={value as Record<string, any>[]} // This might be wrong
-                    //                             entity={entity}
-                    //                             size={size}
-                    //         />;
-                // }
-                else if (arrayProperty.of.dataType === "reference") {
+                } else if (arrayProperty.of.dataType === "reference") {
                     content = <ArrayOfReferencesPreview {...props}
                                                         value={value}
                                                         property={property as ResolvedArrayProperty}/>;

package/src/types/datasource.ts

@@ -216,6 +216,7 @@ export interface DataSource {
      * @param props
      */
     isFilterCombinationValid?(props: FilterCombinationValidProps): boolean;
+
 }
 
 export type FilterCombinationValidProps = {
@@ -366,24 +367,26 @@ export interface DataSourceDelegate {
      * Convert a FireCMS reference to a reference that can be used by the datasource
      * @param reference
      */
-    buildReference: (reference: EntityReference) => any,
+    // buildReference: (reference: EntityReference) => any,
 
     /**
      * Convert a FireCMS GeoPoint to a GeoPoint that can be used by the datasource
      * @param geoPoint
      */
-    buildGeoPoint: (geoPoint: GeoPoint) => any,
+    // buildGeoPoint: (geoPoint: GeoPoint) => any,
 
     /**
      * Get the object to generate the current time in the datasource
      */
     currentTime(): any;
 
-    buildDate: (date: Date) => any;
+    // buildDate: (date: Date) => any;
 
-    buildDeleteFieldValue: () => any;
+    // buildDeleteFieldValue: () => any;
 
     delegateToCMSModel: (data: any) => any;
 
+    cmsToDelegateModel: (data: any) => any;
+
     setDateToMidnight: (input?: any) => any;
 }

package/src/types/entities.ts

@@ -37,7 +37,7 @@ export type EntityValues<M extends object> = M;
 /**
  * Class used to create a reference to an entity in a different path
  */
-export class EntityReference<M extends Record<string, any> = any> {
+export class EntityReference {
     /**
      * ID of the entity
      */
@@ -78,3 +78,11 @@ export class GeoPoint {
         this.longitude = longitude;
     }
 }
+
+export class Vector {
+    readonly value: number[];
+
+    constructor(value: number[]) {
+        this.value = value;
+    }
+}

package/src/types/index.ts

@@ -23,7 +23,6 @@ export * from "./plugins";
 export * from "./analytics";
 export * from "./firecms";
 export * from "./roles";
-export * from "./appcheck";
 export * from "./export_import";
 export * from "./modify_collections";
 export * from "./analytics_controller";

package/src/types/properties.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { FieldProps } from "./fields";
 import { PropertyPreviewProps } from "../preview";
-import { EntityReference, EntityValues, GeoPoint } from "./entities";
+import { EntityReference, EntityValues, GeoPoint, Vector } from "./entities";
 import { ResolvedArrayProperty, ResolvedStringProperty } from "./resolved_entities";
 import { FilterValues } from "./collections";
 import { ChipColorKey, ChipColorScheme } from "@firecms/ui";
@@ -15,9 +15,10 @@ export type DataType<T extends CMSType = CMSType> =
             T extends boolean ? "boolean" :
                 T extends Date ? "date" :
                     T extends GeoPoint ? "geopoint" :
-                        T extends EntityReference ? "reference" :
-                            T extends Array<CMSType> ? "array" :
-                                T extends Record<string, any> ? "map" : never;
+                        T extends Vector ? "vector" :
+                            T extends EntityReference ? "reference" :
+                                T extends Array<CMSType> ? "array" :
+                                    T extends Record<string, any> ? "map" : never;
 
 /**
  * @group Entity properties

package/src/util/entities.ts

@@ -139,7 +139,7 @@ export function sanitizeData<M extends Record<string, any>>
     return result;
 }
 
-export function getReferenceFrom<M extends Record<string, any>>(entity: Entity<M>): EntityReference<M> {
+export function getReferenceFrom<M extends Record<string, any>>(entity: Entity<M>): EntityReference {
     return new EntityReference(entity.id, entity.path);
 }
 

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/types/appcheck.ts

@@ -1,29 +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;
-}