@firecms/core 3.0.0-alpha.26 → 3.0.0-alpha.28

package/src/core/util/property_utils.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 
-import { EntityCollection, FieldConfig, PropertiesOrBuilders, PropertyOrBuilder, ResolvedProperty } from "../../types";
+import { EntityCollection, PropertyConfig, PropertiesOrBuilders, PropertyOrBuilder, ResolvedProperty } from "../../types";
 import { getFieldConfig } from "../form_field_configs";
 import { isPropertyBuilder } from "./entities";
 import { resolveProperty } from "./resolutions";
 import { CircleIcon, FunctionsIcon } from "../../icons";
 
 export function isReferenceProperty(propertyOrBuilder: PropertyOrBuilder,
-                                    fields: Record<string, FieldConfig>) {
+                                    fields: Record<string, PropertyConfig>) {
     const resolvedProperty = resolveProperty({
         propertyKey: "ignore", // TODO
         propertyOrBuilder,
@@ -28,7 +28,7 @@ export function getIdIcon(size: "small" | "medium" | "large"): React.ReactNode {
     return <CircleIcon size={size}/>;
 }
 
-export function getIconForWidget(widget: FieldConfig | undefined,
+export function getIconForWidget(widget: PropertyConfig | undefined,
                                  size: "small" | "medium" | "large") {
     const Icon = widget?.Icon ?? CircleIcon;
     return <Icon size={size}/>;
@@ -37,7 +37,7 @@ export function getIconForWidget(widget: FieldConfig | undefined,
 export function getIconForProperty(
     property: PropertyOrBuilder | ResolvedProperty,
     size: "small" | "medium" | "large" = "small",
-    fields: Record<string, FieldConfig> = {}
+    fields: Record<string, PropertyConfig> = {}
 ): React.ReactNode {
 
     if (isPropertyBuilder(property)) {
@@ -48,7 +48,7 @@ export function getIconForProperty(
     }
 }
 
-export function getColorForProperty(property: PropertyOrBuilder, fields: Record<string, FieldConfig>): string {
+export function getColorForProperty(property: PropertyOrBuilder, fields: Record<string, PropertyConfig>): string {
     if (isPropertyBuilder(property)) {
         return "#888";
     } else {

package/src/core/util/references.ts

@@ -1,9 +1,9 @@
-import { EntityCollection, FieldConfig } from "../../types";
+import { EntityCollection, PropertyConfig } from "../../types";
 import { isReferenceProperty } from "./property_utils";
 import { isPropertyBuilder } from "./entities";
 
 export function getReferencePreviewKeys(targetCollection: EntityCollection<any>,
-                                        fields: Record<string, FieldConfig>,
+                                        fields: Record<string, PropertyConfig>,
                                         previewProperties?: string[],
                                         limit = 3) {
     const allProperties = Object.keys(targetCollection.properties);

package/src/core/util/resolutions.ts

@@ -1,11 +1,12 @@
 import {
     ArrayProperty,
     CMSType,
-    EntityCollection, EntityCustomView,
+    EntityCollection,
+    EntityCustomView,
     EntityValues,
     EnumValueConfig,
     EnumValues,
-    FieldConfig,
+    PropertyConfig,
     NumberProperty,
     Properties,
     PropertiesOrBuilders,
@@ -43,7 +44,7 @@ export const resolveCollection = <M extends Record<string, any>, >
     values?: Partial<EntityValues<M>>,
     previousValues?: Partial<EntityValues<M>>,
     userConfigPersistence?: UserConfigurationPersistence;
-    fields?: Record<string, FieldConfig>;
+    fields?: Record<string, PropertyConfig>;
 }): ResolvedEntityCollection<M> => {
 
     const collectionOverride = userConfigPersistence?.getCollectionConfig<M>(path);
@@ -107,7 +108,7 @@ export function resolveProperty<T extends CMSType = CMSType, M extends Record<st
     entityId?: string,
     index?: number,
     fromBuilder?: boolean;
-    fields?: Record<string, FieldConfig<any>>;
+    fields?: Record<string, PropertyConfig<any>>;
 }): ResolvedProperty<T> | null {
 
     if (typeof propertyOrBuilder === "object" && "resolved" in propertyOrBuilder) {
@@ -176,17 +177,21 @@ export function resolveProperty<T extends CMSType = CMSType, M extends Record<st
         } as ResolvedProperty<T>;
     }
 
-    if (resolvedProperty.fieldConfig && !isDefaultFieldConfigId(resolvedProperty.fieldConfig)) {
+    if (resolvedProperty.propertyConfig && !isDefaultFieldConfigId(resolvedProperty.propertyConfig)) {
         const cmsFields = props.fields;
         if (!cmsFields) {
-            throw Error(`Trying to resolve a property with key ${resolvedProperty.fieldConfig} that inherits from a custom field but no custom fields were provided. Use the property 'fields' in your top level component to provide them`);
+            throw Error(`Trying to resolve a property with key ${resolvedProperty.propertyConfig} that inherits from a custom field but no custom fields were provided. Use the property 'fields' in your top level component to provide them`);
         }
-        const customField: FieldConfig<any> = cmsFields[resolvedProperty.fieldConfig];
+        const customField: PropertyConfig<any> = cmsFields[resolvedProperty.propertyConfig];
         if (!customField)
-            throw Error(`Trying to resolve a property that inherits from a custom field but no custom field with id ${resolvedProperty.fieldConfig} was found. Check the \`fields\` in your top level component`);
+            throw Error(`Trying to resolve a property that inherits from a custom field but no custom field with id ${resolvedProperty.propertyConfig} was found. Check the \`fields\` in your top level component`);
         if (customField.property) {
+            const configPropertyOrBuilder = customField.property;
+            if ("propertyConfig" in configPropertyOrBuilder) {
+                delete configPropertyOrBuilder.propertyConfig;
+            }
             const customFieldProperty = resolveProperty<any>({
-                propertyOrBuilder: customField.property,
+                propertyOrBuilder: configPropertyOrBuilder,
                 propertyValue,
                 ...props
             });
@@ -220,7 +225,7 @@ export function resolveArrayProperty<T extends any[], M>({
     entityId?: string,
     index?: number,
     fromBuilder?: boolean;
-    fields?: Record<string, FieldConfig>;
+    fields?: Record<string, PropertyConfig>;
 }): ResolvedArrayProperty {
 
     if (property.of) {
@@ -326,7 +331,7 @@ export function resolveProperties<M extends Record<string, any>>({
     entityId?: string,
     index?: number,
     fromBuilder?: boolean;
-    fields?: Record<string, FieldConfig>;
+    fields?: Record<string, PropertyConfig>;
 }): ResolvedProperties<M> {
     return Object.entries<PropertyOrBuilder>(properties as Record<string, PropertyOrBuilder>)
         .map(([key, property]) => {

package/src/form/EntityForm.tsx

@@ -315,7 +315,7 @@ function EntityFormInternal<M extends Record<string, any>>({
                                                                         name,
                                                                         value,
                                                                         property
-                                                                    }) => dataSource.checkUniqueField(path, name, value, property, entityId),
+                                                                    }) => dataSource.checkUniqueField(path, name, value, entityId),
         [dataSource, path, entityId]);
 
     const validationSchema = useMemo(() => entityId

package/src/form/PropertyFieldBinding.tsx

@@ -121,13 +121,13 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, CustomProps =
                         Component = resolvedProperty.Field as ComponentType<FieldProps<any>>;
                     }
                 } else {
-                    const fieldConfig = getFieldConfig(resolvedProperty, fireCMSContext.fields);
-                    if (!fieldConfig) {
-                        console.log("INTERNAL: Could not find field config for property", { propertyKey, resolvedProperty, fields: fireCMSContext.fields, fieldConfig });
+                    const propertyConfig = getFieldConfig(resolvedProperty, fireCMSContext.fields);
+                    if (!propertyConfig) {
+                        console.log("INTERNAL: Could not find field config for property", { propertyKey, resolvedProperty, fields: fireCMSContext.fields, propertyConfig });
                         throw new Error(`INTERNAL: Could not find field config for property ${propertyKey}`);
                     }
                     const configProperty = resolveProperty({
-                        propertyOrBuilder: fieldConfig.property,
+                        propertyOrBuilder: propertyConfig.property,
                         propertyValue: fieldProps.field.value,
                         values: fieldProps.form.values,
                         path: context.path,

package/src/form/field_bindings/KeyValueFieldBinding.tsx

@@ -164,7 +164,7 @@ function MapEditView<T extends Record<string, any>>({
                         }
 
                         const newValue = { ...(value ?? {}) } as T;
-                        if (originalValue.current && fieldKey in originalValue.current) {
+                        if (typeof originalValue.current === "object" && fieldKey in originalValue.current) {
                             // @ts-ignore
                             newValue[fieldKey] = undefined; // set to undefined to remove from the object, the datasource will remove it from the backend
                         } else {

package/src/form/field_bindings/ReadOnlyFieldBinding.tsx

@@ -3,12 +3,10 @@ import React from "react";
 import { Entity, FieldProps } from "../../types";
 
 import { PropertyPreview } from "../../preview";
-import { LabelWithIcon } from "../components";
-import { ErrorBoundary } from "../../core/components/ErrorBoundary";
-import { getIconForProperty } from "../../core";
+import { FieldHelperText, LabelWithIcon } from "../components";
+import { ErrorBoundary, getIconForProperty } from "../../core";
 import { paperMixin } from "../../styles";
-import { FieldHelperText } from "../components/FieldHelperText";
-import { cn } from "../../components/util/cn";
+import { cn } from "../../components";
 
 /**
  *
@@ -49,7 +47,7 @@ export function ReadOnlyFieldBinding({
             }
 
             <div
-                className={cn(paperMixin, "min-h-14 p-4 md:p-6")}>
+                className={cn(paperMixin, "min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar")}>
 
                 <ErrorBoundary>
                     <PropertyPreview propertyKey={propertyKey}

package/src/hooks/index.tsx

@@ -22,3 +22,4 @@ export * from "./useLargeLayout";
 
 export * from "./useReferenceDialog";
 export * from "./useBrowserTitleAndIcon";
+export * from "./useBuildDataSource";

package/src/hooks/useBuildDataSource.ts

@@ -0,0 +1,351 @@
+import { useCallback } from "react";
+import {
+    DataSource,
+    DataSourceDelegate, DeleteEntityProps,
+    Entity,
+    EntityCollection,
+    EntityReference,
+    EntityValues,
+    FetchCollectionProps,
+    FetchEntityProps,
+    FilterValues,
+    GeoPoint,
+    ListenCollectionProps,
+    ListenEntityProps,
+    PropertyConfig,
+    ResolvedProperties,
+    SaveEntityProps
+} from "../types";
+import { resolveCollection, updateDateAutoValues } from "../core";
+
+/**
+ * Use this hook to build a {@link DataSource} based on Firestore
+ * @param firebaseApp
+ * @param textSearchController
+ * @param collectionRegistry
+ * @category Firebase
+ */
+export function useBuildDataSource({
+                                       delegate,
+                                       customFields
+                                   }: {
+    delegate: DataSourceDelegate,
+    customFields: Record<string, PropertyConfig>;
+}): DataSource {
+
+    return {
+
+        /**
+         * Fetch entities in a Firestore path
+         * @param path
+         * @param collection
+         * @param filter
+         * @param limit
+         * @param startAfter
+         * @param searchString
+         * @param orderBy
+         * @param order
+         * @return Function to cancel subscription
+         * @see useCollectionFetch if you need this functionality implemented as a hook
+         * @category Firestore
+         */
+        fetchCollection: useCallback(<M extends Record<string, any>>({
+                                                                         path,
+                                                                         collection,
+                                                                         filter,
+                                                                         limit,
+                                                                         startAfter,
+                                                                         searchString,
+                                                                         orderBy,
+                                                                         order
+                                                                     }: FetchCollectionProps<M>
+        ): Promise<Entity<M>[]> => {
+
+            return delegate.fetchCollection<M>({
+                path,
+                filter,
+                limit,
+                startAfter,
+                searchString,
+                orderBy,
+                order
+            });
+        }, [delegate]),
+
+        /**
+         * Listen to a entities in a given path
+         * @param path
+         * @param collection
+         * @param onError
+         * @param filter
+         * @param limit
+         * @param startAfter
+         * @param searchString
+         * @param orderBy
+         * @param order
+         * @param onUpdate
+         * @return Function to cancel subscription
+         * @see useCollectionFetch if you need this functionality implemented as a hook
+         * @category Firestore
+         */
+        listenCollection: delegate.listenCollection
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            ? useCallback(<M extends Record<string, any>>(
+                {
+                    path,
+                    collection,
+                    filter,
+                    limit,
+                    startAfter,
+                    searchString,
+                    orderBy,
+                    order,
+                    onUpdate,
+                    onError
+                }: ListenCollectionProps<M>
+            ): () => void => {
+
+                const isCollectionGroup = Boolean(collection.collectionGroup) ?? false;
+                if (!delegate.listenCollection)
+                    throw Error("useBuildDataSource delegate not initialised");
+
+                return delegate.listenCollection<M>({
+                    path,
+                    filter,
+                    limit,
+                    startAfter,
+                    searchString,
+                    orderBy,
+                    order,
+                    onUpdate,
+                    onError,
+                    isCollectionGroup
+                });
+            }, [delegate])
+            : undefined,
+
+        /**
+         * Retrieve an entity given a path and a collection
+         * @param path
+         * @param entityId
+         * @param collection
+         * @category Firestore
+         */
+        fetchEntity: useCallback(<M extends Record<string, any>>({
+                                                                     path,
+                                                                     entityId
+                                                                 }: FetchEntityProps<M>
+        ): Promise<Entity<M> | undefined> => delegate.fetchEntity({
+            path,
+            entityId
+        }), [delegate]),
+
+        /**
+         *
+         * @param path
+         * @param entityId
+         * @param collection
+         * @param onUpdate
+         * @param onError
+         * @return Function to cancel subscription
+         * @category Firestore
+         */
+        listenEntity: delegate.listenEntity
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            ? useCallback(<M extends Record<string, any>>(
+                {
+                    path,
+                    entityId,
+                    collection,
+                    onUpdate,
+                    onError
+                }: ListenEntityProps<M>): () => void => {
+                if (!delegate.listenEntity)
+                    throw Error("useBuildDataSource delegate not initialised");
+
+                return delegate.listenEntity<M>({
+                    path,
+                    entityId,
+                    onUpdate,
+                    onError
+                })
+            }, [delegate.listenEntity]) : undefined,
+
+        /**
+         * Save entity to the specified path. Note that Firestore does not allow
+         * undefined values.
+         * @param path
+         * @param entityId
+         * @param values
+         * @param schemaId
+         * @param collection
+         * @param status
+         * @category Firestore
+         */
+        saveEntity: useCallback(<M extends Record<string, any>>(
+            {
+                path,
+                entityId,
+                values,
+                collection,
+                status
+            }: SaveEntityProps<M>): Promise<Entity<M>> => {
+
+            const resolvedCollection = resolveCollection<M>({
+                collection,
+                path,
+                entityId,
+                fields: customFields
+            });
+
+            const properties: ResolvedProperties<M> = resolvedCollection.properties;
+
+            const firestoreValues = cmsToDelegateModel(
+                values,
+                delegate.buildReference,
+                delegate.buildGeoPoint,
+                delegate.buildDate,
+                delegate.buildDeleteFieldValue
+            );
+            const updatedFirestoreValues: EntityValues<M> = updateDateAutoValues(
+                {
+                    inputValues: firestoreValues,
+                    properties,
+                    status,
+                    timestampNowValue: delegate.currentTime(),
+                    setDateToMidnight: delegate.setDateToMidnight
+                });
+
+            console.debug("Saving entity", path, entityId, updatedFirestoreValues);
+
+            return delegate.saveEntity({
+                path,
+                entityId,
+                values: updatedFirestoreValues,
+                status
+            }).then((res) => {
+                return {
+                    id: res.id,
+                    path: res.path,
+                    values: delegate.delegateToCMSModel(updatedFirestoreValues)
+                } as Entity<M>;
+            });
+        }, [delegate.saveEntity]),
+
+        /**
+         * Delete an entity
+         * @param entity
+         * @param collection
+         * @category Firestore
+         */
+        deleteEntity: useCallback(<M extends Record<string, any>>(
+            {
+                entity
+            }: DeleteEntityProps<M>
+        ): Promise<void> => {
+            return delegate.deleteEntity({entity});
+        }, [delegate.deleteEntity]),
+
+        /**
+         * Check if the given property is unique in the given collection
+         * @param path Collection path
+         * @param name of the property
+         * @param value
+         * @param property
+         * @param entityId
+         * @return `true` if there are no other fields besides the given entity
+         * @category Firestore
+         */
+        checkUniqueField: useCallback((
+            path: string,
+            name: string,
+            value: any,
+            entityId?: string
+        ): Promise<boolean> => {
+            return delegate.checkUniqueField(path, name, value, entityId);
+        }, [delegate.checkUniqueField]),
+
+        generateEntityId: useCallback((path: string): string => {
+            return delegate.generateEntityId(path, );
+        }, [delegate.generateEntityId]),
+
+        countEntities: useCallback(async ({
+                                              path,
+                                              collection,
+                                              filter,
+                                              order,
+                                              orderBy
+                                          }: {
+            path: string,
+            collection: EntityCollection<any>,
+            filter?: FilterValues<Extract<keyof any, string>>,
+            orderBy?: string,
+            order?: "desc" | "asc",
+        }): Promise<number> => {
+            return delegate.countEntities({
+                path,
+                filter,
+                orderBy,
+                order,
+                isCollectionGroup: Boolean(collection.collectionGroup) ?? false
+            });
+        }, [delegate.countEntities]),
+
+        isFilterCombinationValid: useCallback(({
+                                                   path,
+                                                   filterValues,
+                                                   sortBy
+                                               }: {
+            path: string,
+            filterValues: FilterValues<any>,
+            sortBy?: [string, "asc" | "desc"]
+        }): boolean => {
+            if (!delegate.isFilterCombinationValid)
+                return true;
+            return delegate.isFilterCombinationValid(
+                {
+                    path,
+                    filterValues,
+                    sortBy
+                }
+            )
+        }, [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
+ * @category 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 (Array.isArray(data)) {
+        return data.map(v => cmsToDelegateModel(v, buildReference, buildGeoPoint, buildDate, buildDelete));
+    } else if (data instanceof EntityReference) {
+        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/property_previews/StringPropertyPreview.tsx

@@ -45,13 +45,15 @@ export function StringPropertyPreview({
         if (!value) return <></>;
         const lines = value.split("\n");
         return value && value.includes("\n")
-            ? <div>
+            ? <div className={"overflow-x-scroll"}>
                 {lines.map((str, index) =>
                     <React.Fragment key={`string_preview_${index}`}>
                         <span>{str}</span>
                         {index !== lines.length - 1 && <br/>}
                     </React.Fragment>)}
             </div>
-            : <>{value}</>;
+            : <>
+                {value}
+            </>;
     }
 }