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

package/dist/internal/useBuildDataSource.d.ts

@@ -1,4 +1,4 @@
-import { DataSource, DataSourceDelegate, EntityReference, GeoPoint, NavigationController, PropertyConfig } from "../types";
+import { DataSource, DataSourceDelegate, NavigationController, PropertyConfig } from "../types";
 /**
  * Use this hook to build a {@link DataSource} based on Firestore
  * @param firebaseApp
@@ -9,18 +9,3 @@ export declare function useBuildDataSource({ delegate, propertyConfigs, navigati
     propertyConfigs?: Record<string, PropertyConfig>;
     navigationController: NavigationController;
 }): DataSource;
-/**
- * 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 declare function cmsToDelegateModel(data: any, buildReference: (reference: EntityReference) => any, buildGeoPoint: (geoPoint: GeoPoint) => any, buildDate: (date: Date) => any, buildDelete: () => any): any;

package/dist/types/datasource.d.ts

@@ -1,4 +1,4 @@
-import { Entity, EntityReference, EntityStatus, EntityValues, GeoPoint } from "./entities";
+import { Entity, EntityStatus, EntityValues } from "./entities";
 import { EntityCollection, FilterValues } from "./collections";
 import { ResolvedEntityCollection } from "./resolved_entities";
 /**
@@ -245,18 +245,15 @@ export interface DataSourceDelegate {
      * Convert a FireCMS reference to a reference that can be used by the datasource
      * @param reference
      */
-    buildReference: (reference: EntityReference) => any;
     /**
      * Convert a FireCMS GeoPoint to a GeoPoint that can be used by the datasource
      * @param geoPoint
      */
-    buildGeoPoint: (geoPoint: GeoPoint) => any;
     /**
      * Get the object to generate the current time in the datasource
      */
     currentTime(): any;
-    buildDate: (date: Date) => any;
-    buildDeleteFieldValue: () => any;
     delegateToCMSModel: (data: any) => any;
+    cmsToDelegateModel: (data: any) => any;
     setDateToMidnight: (input?: any) => any;
 }

package/dist/types/entities.d.ts

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

package/dist/types/index.d.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/dist/types/properties.d.ts

@@ -1,14 +1,14 @@
 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";
 /**
  * @group Entity properties
  */
-export type DataType<T extends CMSType = CMSType> = T extends string ? "string" : T extends number ? "number" : 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;
+export type DataType<T extends CMSType = CMSType> = T extends string ? "string" : T extends number ? "number" : T extends boolean ? "boolean" : T extends Date ? "date" : T extends GeoPoint ? "geopoint" : T extends Vector ? "vector" : T extends EntityReference ? "reference" : T extends Array<CMSType> ? "array" : T extends Record<string, any> ? "map" : never;
 /**
  * @group Entity properties
  */

package/dist/util/entities.d.ts

@@ -23,6 +23,6 @@ export declare function updateDateAutoValues<M extends Record<string, any>>({ in
  * @group Datasource
  */
 export declare function sanitizeData<M extends Record<string, any>>(values: EntityValues<M>, properties: ResolvedProperties<M>): any;
-export declare function getReferenceFrom<M extends Record<string, any>>(entity: Entity<M>): EntityReference<M>;
+export declare function getReferenceFrom<M extends Record<string, any>>(entity: Entity<M>): EntityReference;
 export declare function traverseValuesProperties<M extends Record<string, any>>(inputValues: Partial<EntityValues<M>>, properties: ResolvedProperties<M>, operation: (value: any, property: Property) => any): EntityValues<M> | undefined;
 export declare function traverseValueProperty(inputValue: any, property: Property, operation: (value: any, property: Property) => any): any;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-canary.42",
+  "version": "3.0.0-canary.43",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -46,10 +46,10 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@firecms/formex": "^3.0.0-canary.42",
-    "@firecms/ui": "^3.0.0-canary.42",
+    "@firecms/formex": "^3.0.0-canary.43",
+    "@firecms/ui": "^3.0.0-canary.43",
     "@fontsource/jetbrains-mono": "^5.0.19",
-    "@hello-pangea/dnd": "^16.5.0",
+    "@hello-pangea/dnd": "^16.6.0",
     "@radix-ui/react-portal": "^1.0.4",
     "clsx": "^2.1.0",
     "date-fns": "^3.6.0",
@@ -84,16 +84,16 @@
   "devDependencies": {
     "@jest/globals": "^29.7.0",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.1",
+    "@testing-library/react": "^14.3.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
-    "@types/node": "^20.11.30",
+    "@types/node": "^20.12.7",
     "@types/object-hash": "^3.0.6",
-    "@types/react": "^18.2.67",
-    "@types/react-dom": "^18.2.22",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
     "@types/react-measure": "^2.0.12",
-    "@typescript-eslint/eslint-plugin": "^7.3.1",
-    "@typescript-eslint/parser": "^7.3.1",
+    "@typescript-eslint/eslint-plugin": "^7.7.0",
+    "@typescript-eslint/parser": "^7.7.0",
     "@vitejs/plugin-react": "^4.2.1",
     "cross-env": "^7.0.3",
     "eslint": "^8.57.0",
@@ -103,22 +103,22 @@
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "firebase": "^10.9.0",
+    "firebase": "^10.11.0",
     "jest": "^29.7.0",
     "npm-run-all": "^4.1.5",
-    "react-router": "^6.22.0",
-    "react-router-dom": "^6.22.0",
+    "react-router": "^6.22.3",
+    "react-router-dom": "^6.22.3",
     "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",
-    "tsd": "^0.30.7",
-    "typescript": "^5.4.2",
-    "vite": "^5.2.3"
+    "tsd": "^0.31.0",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.9"
   },
   "files": [
     "dist",
     "src"
   ],
-  "gitHead": "d6a2f28e93d3c532dd6efacfccffb91383d5330e",
+  "gitHead": "fedcb0d43c504245dd76b702e4ab4479fa8592df",
   "publishConfig": {
     "access": "public"
   }

package/src/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -16,7 +16,6 @@ import { propertiesToColumns } from "./column_utils";
 import { ErrorView } from "../ErrorView";
 import { SelectableTable } from "../SelectableTable/SelectableTable";
 
-
 /**
  * This component is in charge of rendering a collection table with a high
  * degree of customization.
@@ -177,7 +176,10 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
 
         const child = Builder
             ? <Builder entity={entity} context={context}/>
-            : <>{additionalField.value?.({ entity, context })}</>;
+            : <>{additionalField.value?.({
+                entity,
+                context
+            })}</>;
 
         return (
             <EntityTableCell
@@ -235,10 +237,12 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
 
     const columns: VirtualTableColumn[] = [
         idColumn,
-        ...displayedColumnIds
-            .map((p) => {
-                return collectionColumns.find(c => c.key === p.key);
-            }).filter(Boolean) as VirtualTableColumn[]
+        ...(displayedColumnIds
+            ? displayedColumnIds
+                .map((p) => {
+                    return collectionColumns.find(c => c.key === p.key);
+                }).filter(Boolean)
+            : collectionColumns) as VirtualTableColumn[]
     ];
 
     const cellRenderer = (props: CellRendererParams<any>) => {

package/src/components/EntityCollectionTable/EntityCollectionTableProps.tsx

@@ -92,7 +92,7 @@ export type EntityCollectionTableProps<M extends Record<string, any>,
      */
     tableController: EntityTableController<M>;
 
-    displayedColumnIds: PropertyColumnConfig[];
+    displayedColumnIds?: PropertyColumnConfig[];
 
     forceFilter?: FilterValues<Extract<keyof M, string>>;
 

package/src/components/EntityCollectionTable/PropertyTableCell.tsx

@@ -95,6 +95,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
         const internalValueRef = useRef(value);
 
         const [error, setError] = useState<Error | undefined>();
+        const [validationError, setValidationError] = useState<Error | undefined>();
         const [saved, setSaved] = useState<boolean>(false);
 
         const onValueUpdated = useCallback(() => {
@@ -120,7 +121,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
         useEffect(
             () => {
                 if (!equal(value, internalValueRef.current)) {
-                    setError(undefined);
+                    setValidationError(undefined);
                     setInternalValue(value);
                     internalValueRef.current = value;
                     onValueUpdated();
@@ -136,7 +137,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
             validation
                 .validate(value)
                 .then(() => {
-                    setError(undefined);
+                    setValidationError(undefined);
                     internalValueRef.current = value;
                     if (onValueChange) {
                         onValueChange({
@@ -151,17 +152,15 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                     }
                 })
                 .catch((e) => {
-                    setError(e);
+                    setValidationError(e);
                 });
         };
 
         useEffect(() => {
             validation
                 .validate(internalValue)
-                .then(() => setError(undefined))
-                .catch((e) => {
-                    setError(e);
-                });
+                .then(() => setValidationError(undefined))
+                .catch(setValidationError);
         }, [internalValue, validation, propertyKey, property, entity]);
 
         const updateValue = (newValue: any | null) => {
@@ -237,7 +236,6 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                     height={getRowHeight(size)}
                     propertyKey={propertyKey}
                     property={property}
-                    // entity={entity}
                     value={internalValue}
                     size={getPreviewSizeFrom(size)}
                 />
@@ -247,7 +245,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
         if (!customField && (!customPreview || selected)) {
             const isAStorageProperty = isStorageProperty(property);
             if (isAStorageProperty) {
-                innerComponent = <TableStorageUpload error={error}
+                innerComponent = <TableStorageUpload error={validationError ?? error}
                                                      disabled={disabled}
                                                      focused={selected}
                                                      selected={selected}
@@ -274,7 +272,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                                                          valueType={"number"}
                                                          small={getPreviewSizeFrom(size) !== "medium"}
                                                          enumValues={numberProperty.enumValues}
-                                                         error={error}
+                                                         error={validationError ?? error}
                                                          internalValue={internalValue as string | number}
                                                          updateValue={updateValue}
                     />;
@@ -282,7 +280,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                 } else {
                     innerComponent = <VirtualTableNumberInput
                         align={align}
-                        error={error}
+                        error={validationError ?? error}
                         focused={selected}
                         disabled={disabled}
                         value={internalValue as number}
@@ -300,14 +298,14 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                                                          valueType={"string"}
                                                          small={getPreviewSizeFrom(size) !== "medium"}
                                                          enumValues={stringProperty.enumValues}
-                                                         error={error}
+                                                         error={validationError ?? error}
                                                          internalValue={internalValue as string | number}
                                                          updateValue={updateValue}
                     />;
                     fullHeight = true;
                 } else if (!stringProperty.storage) {
                     const multiline = Boolean(stringProperty.multiline) || Boolean(stringProperty.markdown);
-                    innerComponent = <VirtualTableInput error={error}
+                    innerComponent = <VirtualTableInput error={validationError ?? error}
                                                         disabled={disabled}
                                                         multiline={multiline}
                                                         focused={selected}
@@ -317,7 +315,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                     allowScroll = true;
                 }
             } else if (property.dataType === "boolean") {
-                innerComponent = <VirtualTableSwitch error={error}
+                innerComponent = <VirtualTableSwitch error={validationError ?? error}
                                                      disabled={disabled}
                                                      focused={selected}
                                                      internalValue={internalValue as boolean}
@@ -325,7 +323,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                 />;
             } else if (property.dataType === "date") {
                 innerComponent = <VirtualTableDateField name={propertyKey as string}
-                                                        error={error}
+                                                        error={validationError ?? error}
                                                         disabled={disabled}
                                                         mode={property.mode}
                                                         focused={selected}
@@ -368,7 +366,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                                                     small={getPreviewSizeFrom(size) !== "medium"}
                                                     valueType={arrayProperty.of.dataType}
                                                     enumValues={arrayProperty.of.enumValues}
-                                                    error={error}
+                                                    error={validationError ?? error}
                                                     internalValue={internalValue as string | number}
                                                     updateValue={updateValue}
                                 />;
@@ -403,9 +401,8 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
             allowScroll = false;
             showExpandIcon = selected && !innerComponent && !disabled && !readOnlyProperty;
             innerComponent = (
-                <PropertyPreview                                  width={width}
+                <PropertyPreview width={width}
                                  height={height}
-                    // entity={entity}
                                  propertyKey={propertyKey as string}
                                  value={internalValue}
                                  property={property}
@@ -426,7 +423,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                 removePadding={removePadding}
                 fullHeight={fullHeight}
                 saved={saved}
-                error={error}
+                error={validationError ?? error}
                 align={align}
                 allowScroll={allowScroll}
                 showExpandIcon={showExpandIcon}

package/src/components/EntityCollectionTable/internal/EntityTableCell.tsx

@@ -96,7 +96,7 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
         const [onHover, setOnHover] = useState(false);
         const [internalSaved, setInternalSaved] = useState(saved);
 
-        const showError = !disabled && error;
+        const showError = !disabled && Boolean(error);
 
         useEffect(() => {
             if (saved) {
@@ -176,21 +176,26 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
         const setOnHoverTrue = useCallback(() => setOnHover(true), []);
         const setOnHoverFalse = useCallback(() => setOnHover(false), []);
 
+        const borderClass = showError
+            ? "border-red-500"
+            : internalSaved
+                ? "border-green-500"
+                : isSelected
+                    ? "border-primary"
+                    : "border-transparent";
+
         return (
             <div
-                ref={ref}
                 className={cn(
                     "transition-colors duration-100 ease-in-out",
                     `flex relative h-full rounded-md p-${p} border border-4  border-opacity-75`,
                     onHover && !disabled ? "bg-gray-50 dark:bg-gray-900" : "",
                     saved ? "bg-gray-100 bg-opacity-75 dark:bg-gray-800 dark:bg-opacity-75" : "",
-                    !isSelected && !internalSaved && !showError ? "border-transparent" : "",
                     hideOverflow ? "overflow-hidden" : "",
                     isSelected ? "bg-gray-50 dark:bg-gray-900" : "",
-                    isSelected && !internalSaved ? "border-primary" : "",
-                    internalSaved ? "border-green-500 " : "",
-                    showError ? "border-red-500" : ""
+                    borderClass
                 )}
+                ref={ref}
                 style={{
                     justifyContent,
                     alignItems: disabled || !isOverflowing ? "center" : undefined,

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -337,7 +337,10 @@ export const EntityCollectionView = React.memo(
                 callbacks: collection.callbacks,
                 dataSource,
                 context,
-                onSaveSuccess: () => onValueUpdated(),
+                onSaveSuccess: () => {
+                    setError(undefined);
+                    onValueUpdated();
+                },
                 onSaveFailure: (e: Error) => {
                     console.error("Save failure");
                     console.error(e);

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/common/types.tsx

@@ -36,7 +36,7 @@ export interface OnCellValueChangeParams<T = any, M extends Record<string, any>
     propertyKey: string,
     entity: Entity<M>,
     onValueUpdated: () => void
-    setError: (e: Error) => void
+    setError: (e: Error | undefined) => void
     fullPath: string
     context: FireCMSContext
 }

package/src/hooks/data/save.ts

@@ -145,6 +145,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();