@firecms/core 3.0.0-alpha.35 → 3.0.0-alpha.36

package/src/form/PropertyFieldBinding.tsx

@@ -102,7 +102,7 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, CustomProps =
                     values: fieldProps.form.values,
                     path: context.path,
                     entityId: context.entityId,
-                    fields: fireCMSContext.fields
+                    fields: fireCMSContext.propertyConfigs
                 });
 
                 if (resolvedProperty === null || isHidden(resolvedProperty)) {
@@ -114,9 +114,9 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, CustomProps =
                         Component = resolvedProperty.Field as ComponentType<FieldProps<any>>;
                     }
                 } else {
-                    const propertyConfig = getFieldConfig(resolvedProperty, fireCMSContext.fields);
+                    const propertyConfig = getFieldConfig(resolvedProperty, fireCMSContext.propertyConfigs);
                     if (!propertyConfig) {
-                        console.log("INTERNAL: Could not find field config for property", { propertyKey, resolvedProperty, fields: fireCMSContext.fields, propertyConfig });
+                        console.log("INTERNAL: Could not find field config for property", { propertyKey, resolvedProperty, fields: fireCMSContext.propertyConfigs, propertyConfig });
                         throw new Error(`INTERNAL: Could not find field config for property ${propertyKey}`);
                     }
                     const configProperty = resolveProperty({
@@ -125,7 +125,7 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, CustomProps =
                         values: fieldProps.form.values,
                         path: context.path,
                         entityId: context.entityId,
-                        fields: fireCMSContext.fields
+                        fields: fireCMSContext.propertyConfigs
                     });
                     Component = configProperty.Field as ComponentType<FieldProps<T>>;
                 }

package/src/form/components/ReferenceWidget.tsx

@@ -135,7 +135,7 @@ export function ReferenceWidget<M extends Record<string, any>>({
         } else {
             if (validValue) {
 
-                const listProperties = getReferencePreviewKeys(collection, fireCMSContext.fields, previewProperties, 3);
+                const listProperties = getReferencePreviewKeys(collection, fireCMSContext.propertyConfigs, previewProperties, 3);
 
                 body = (
                     <div className="flex flex-col flex-grow ml-4 mr-4">

package/src/form/field_bindings/ArrayCustomShapedFieldBinding.tsx

@@ -28,7 +28,7 @@ export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
                                                                         disabled
                                                                     }: FieldProps<T, any, any>) {
 
-    const { fields } = useFireCMSContext();
+    const { propertyConfigs } = useFireCMSContext();
     if (!Array.isArray(property.resolvedProperties))
         throw Error("ArrayCustomShapedFieldBinding misconfiguration. Property `of` not set");
 

package/src/form/field_bindings/ReferenceFieldBinding.tsx

@@ -60,8 +60,8 @@ function ReferenceFieldBindingInternal<M extends Record<string, any>>({
         throw Error(`Couldn't find the corresponding collection for the path: ${property.path}`);
     }
 
-    const onSingleEntitySelected = useCallback((e: Entity<any>) => {
-        setValue(getReferenceFrom(e));
+    const onSingleEntitySelected = useCallback((e: Entity<any> | null) => {
+        setValue(e ? getReferenceFrom(e) : null);
     }, [setValue]);
 
     const referenceDialogController = useReferenceDialog({

package/src/form/form_field_configs.tsx

@@ -313,7 +313,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
     }
 };
 
-export function getFieldConfig(property: Property | ResolvedProperty, customFields: Record<string, PropertyConfig<any>>): PropertyConfig | undefined {
+export function getFieldConfig(property: Property | ResolvedProperty, propertyConfigs: Record<string, PropertyConfig<any>>): PropertyConfig | undefined {
     const fieldId = getFieldId(property);
     const defaultFieldId = getDefaultFieldId(property);
     // console.log("fieldId", { fieldId });
@@ -322,7 +322,7 @@ export function getFieldConfig(property: Property | ResolvedProperty, customFiel
         return undefined;
     }
     const defaultFieldConfig = DEFAULT_FIELD_CONFIGS[defaultFieldId];
-    const customField = fieldId ? customFields[fieldId] : undefined;
+    const customField = fieldId ? propertyConfigs[fieldId] : undefined;
     return mergeDeep(defaultFieldConfig ?? {}, customField ?? {});
 }
 

package/src/hooks/data/save.ts

@@ -72,7 +72,7 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, Use
                 path,
                 values: previousValues as EntityValues<M>,
                 entityId,
-                fields: context.fields
+                fields: context.propertyConfigs
             });
             updatedValues = await callbacks.onPreSave({
                 collection: resolvedCollection,
@@ -109,7 +109,7 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, Use
                     path,
                     values: updatedValues as EntityValues<M>,
                     entityId,
-                    fields: context.fields
+                    fields: context.propertyConfigs
                 });
                 callbacks.onSaveSuccess({
                     collection: resolvedCollection,
@@ -137,7 +137,7 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, Use
                     path,
                     values: updatedValues as EntityValues<M>,
                     entityId,
-                    fields: context.fields
+                    fields: context.propertyConfigs
                 });
                 callbacks.onSaveFailure({
                     collection: resolvedCollection,

package/src/hooks/useBuildDataSource.ts

@@ -22,16 +22,14 @@ import { resolveCollection, updateDateAutoValues } from "../util";
 /**
  * Use this hook to build a {@link DataSource} based on Firestore
  * @param firebaseApp
- * @param textSearchController
- * @param collectionRegistry
  * @group Firebase
  */
 export function useBuildDataSource({
                                        delegate,
-                                       customFields
+                                       propertyConfigs
                                    }: {
     delegate: DataSourceDelegate,
-    customFields: Record<string, PropertyConfig>;
+    propertyConfigs?: Record<string, PropertyConfig>;
 }): DataSource {
 
     return {
@@ -196,7 +194,7 @@ export function useBuildDataSource({
                 collection,
                 path,
                 entityId,
-                fields: customFields
+                fields: propertyConfigs
             });
 
             const properties: ResolvedProperties<M> = resolvedCollection.properties;

package/src/preview/PropertyPreview.tsx

@@ -52,7 +52,7 @@ export function PropertyPreview<T extends CMSType>(props: PropertyPreviewProps<T
         propertyKey,
         propertyOrBuilder: inputProperty,
         propertyValue: value,
-        fields: fireCMSContext.fields
+        fields: fireCMSContext.propertyConfigs
     });
 
     if (value === undefined || property === null) {

package/src/preview/components/ReferencePreview.tsx

@@ -111,10 +111,10 @@ function ReferencePreviewExisting<M extends Record<string, any> = any>({ referen
         collection,
         path: reference.path,
         values: usedEntity?.values,
-        fields: context.fields
+        fields: context.propertyConfigs
     }), [collection]);
 
-    const listProperties = useMemo(() => getReferencePreviewKeys(resolvedCollection, context.fields, previewProperties, size === "small" || size === "medium" ? 3 : 1),
+    const listProperties = useMemo(() => getReferencePreviewKeys(resolvedCollection, context.propertyConfigs, previewProperties, size === "small" || size === "medium" ? 3 : 1),
         [previewProperties, resolvedCollection, size]);
 
     let body: React.ReactNode;

package/src/preview/property_previews/ArrayOfMapsPreview.tsx

@@ -21,7 +21,7 @@ export function ArrayOfMapsPreview({
         propertyKey,
         property: inputProperty,
         propertyValue: value,
-        fields: fireCMSContext.fields
+        fields: fireCMSContext.propertyConfigs
     });
 
     if (Array.isArray(property?.of)) {

package/src/preview/property_previews/ArrayOfReferencesPreview.tsx

@@ -19,7 +19,7 @@ export function ArrayOfReferencesPreview({
         propertyKey,
         property: inputProperty,
         propertyValue: value,
-        fields: fireCMSContext.fields
+        fields: fireCMSContext.propertyConfigs
     });
 
     if (Array.isArray(property?.of)) {

package/src/preview/property_previews/ArrayOfStorageComponentsPreview.tsx

@@ -24,7 +24,7 @@ export function ArrayOfStorageComponentsPreview({
         propertyKey,
         property: inputProperty,
         propertyValue: value,
-        fields: fireCMSContext.fields
+        fields: fireCMSContext.propertyConfigs
     });
 
     if (Array.isArray(property.of)) {

package/src/preview/property_previews/ArrayOfStringsPreview.tsx

@@ -22,7 +22,7 @@ export function ArrayOfStringsPreview({
         propertyKey,
         property: inputProperty,
         propertyValue: value,
-        fields: fireCMSContext.fields
+        fields: fireCMSContext.propertyConfigs
     });
 
     if (Array.isArray(property.of)) {

package/src/preview/property_previews/ArrayOneOfPreview.tsx

@@ -25,7 +25,7 @@ export function ArrayOneOfPreview({
         propertyKey,
         property: inputProperty,
         propertyValue: value,
-        fields: fireCMSContext.fields
+        fields: fireCMSContext.propertyConfigs
     });
 
     if (property?.dataType !== "array")

package/src/preview/property_previews/ArrayPropertyPreview.tsx

@@ -25,7 +25,7 @@ export function ArrayPropertyPreview({
         propertyKey,
         property: inputProperty,
         propertyValue: value,
-        fields: fireCMSContext.fields
+        fields: fireCMSContext.propertyConfigs
     });
 
     if (!property.of) {

package/src/types/firecms.tsx

@@ -86,7 +86,7 @@ export type FireCMSProps<UserType extends User, EC extends EntityCollection> = {
      * You can use the key to reference the custom field in
      * the `propertyConfig` prop of a property in a collection.
      */
-    fields?: Record<string, PropertyConfig>;
+    propertyConfigs?: Record<string, PropertyConfig>;
 
     /**
      * List of additional custom views for entities.

package/src/types/firecms_context.tsx

@@ -106,7 +106,7 @@ export type FireCMSContext<UserType extends User = User, AuthControllerType exte
      * You can use the key to reference the custom field in
      * the `propertyConfig` prop of a property in a collection.
      */
-    fields: Record<string, PropertyConfig>;
+    propertyConfigs: Record<string, PropertyConfig>;
 
     /**
      * List of additional custom views for entities.
@@ -117,6 +117,7 @@ export type FireCMSContext<UserType extends User = User, AuthControllerType exte
      */
     entityViews?: EntityCustomView[];
 
+
     components?: {
 
         /**

package/src/types/plugins.tsx

@@ -77,6 +77,7 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
     homePage?: {
 
         additionalChildrenStart?: React.ReactNode;
+        additionalChildrenEnd?: React.ReactNode;
         /**
          * Use this component to add custom actions to the navigation card
          * in the home page.

package/src/ui/Select.tsx

@@ -179,8 +179,11 @@ export function Select({
             <SelectPrimitive.Portal>
                 <SelectPrimitive.Content
                     position={position}
-                    className="z-50 overflow-hidden relative border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-800 p-2 rounded-lg shadow-lg">
-                    <SelectPrimitive.Viewport>
+                    className="z-50 max-h-[var(--radix-select-content-available-height)] overflow-hidden relative border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-800 p-2 rounded-lg shadow-lg">
+                    <SelectPrimitive.Viewport
+                        className={"p-1 max-h-[var(--radix-select-content-available-height)]"}
+                        style={{
+                    }}>
                         {children}
                     </SelectPrimitive.Viewport>
                 </SelectPrimitive.Content>
@@ -255,10 +258,3 @@ export function SelectGroup({
         {children}
     </>;
 }
-
-function selectOnChangeEventAdapter(fn: (event: React.ChangeEvent<HTMLSelectElement>) => void): (value: string) => void {
-    return (value: string) => {
-        const event = { target: { value } } as React.ChangeEvent<HTMLSelectElement>;
-        fn(event);
-    };
-}

package/src/util/builders.ts

@@ -0,0 +1,138 @@
+import {
+    AdditionalFieldDelegate,
+    ArrayProperty,
+    BooleanProperty,
+    CMSType,
+    DateProperty,
+    EntityCallbacks, EntityCollection,
+    EnumValueConfig,
+    EnumValues,
+    GeopointProperty,
+    MapProperty,
+    NumberProperty,
+    PropertiesOrBuilders,
+    PropertyBuilder,
+    PropertyConfig,
+    PropertyOrBuilder,
+    ReferenceProperty,
+    StringProperty,
+    User
+} from "../types";
+
+/**
+ * Identity function we use to defeat the type system of Typescript and build
+ * collection views with all its properties
+ * @param collection
+ * @group Builder
+ */
+export function buildCollection<M extends Record<string, any> = any,
+    UserType extends User = User>(
+    collection: EntityCollection<M, UserType>
+): EntityCollection<M, UserType> {
+    return collection;
+}
+
+/**
+ * Identity function we use to defeat the type system of Typescript and preserve
+ * the property keys.
+ * @param property
+ * @group Builder
+ */
+export function buildProperty<T extends CMSType = CMSType, P extends PropertyOrBuilder<T> = PropertyOrBuilder<T>, M extends Record<string, any> = Record<string, any>>(
+    property: P
+):
+    P extends StringProperty ? StringProperty :
+        P extends NumberProperty ? NumberProperty :
+            P extends BooleanProperty ? BooleanProperty :
+                P extends DateProperty ? DateProperty :
+                    P extends GeopointProperty ? GeopointProperty :
+                        P extends ReferenceProperty ? ReferenceProperty :
+                            P extends ArrayProperty ? ArrayProperty :
+                                P extends MapProperty ? MapProperty :
+                                    P extends PropertyBuilder<T, M> ? PropertyBuilder<T, M> : never {
+    return property as any;
+}
+
+/**
+ * Identity function we use to defeat the type system of Typescript and preserve
+ * the properties keys.
+ * @param properties
+ * @group Builder
+ */
+export function buildProperties<M extends Record<string, any>>(
+    properties: PropertiesOrBuilders<M>
+): PropertiesOrBuilders<M> {
+    return properties;
+}
+
+/**
+ * Identity function we use to defeat the type system of Typescript and preserve
+ * the properties keys.
+ * @param propertiesOrBuilder
+ * @group Builder
+ */
+export function buildPropertiesOrBuilder<M extends Record<string, any>>(
+    propertiesOrBuilder: PropertiesOrBuilders<M>
+): PropertiesOrBuilders<M> {
+    return propertiesOrBuilder;
+}
+
+/**
+ * Identity function we use to defeat the type system of Typescript and preserve
+ * the properties keys.
+ * @param enumValues
+ * @group Builder
+ */
+export function buildEnumValues(
+    enumValues: EnumValues
+): EnumValues {
+    return enumValues;
+}
+
+/**
+ * Identity function we use to defeat the type system of Typescript and preserve
+ * the properties keys.
+ * @param enumValueConfig
+ * @group Builder
+ */
+export function buildEnumValueConfig(
+    enumValueConfig: EnumValueConfig
+): EnumValueConfig {
+    return enumValueConfig;
+}
+
+/**
+ * Identity function we use to defeat the type system of Typescript and preserve
+ * the properties keys.
+ * @param callbacks
+ * @group Builder
+ */
+export function buildEntityCallbacks<M extends Record<string, any> = any>(
+    callbacks: EntityCallbacks<M>
+): EntityCallbacks<M> {
+    return callbacks;
+}
+
+/**
+ * Identity function we use to defeat the type system of Typescript and build
+ * additional field delegates views with all its properties
+ * @param additionalFieldDelegate
+ * @group Builder
+ */
+export function buildAdditionalFieldDelegate<M extends Record<string, any>, UserType extends User = User>(
+    additionalFieldDelegate: AdditionalFieldDelegate<M, UserType>
+): AdditionalFieldDelegate<M, UserType> {
+    return additionalFieldDelegate;
+}
+
+/**
+ * Identity function we use to defeat the type system of Typescript and build
+ * additional field delegates views with all its properties
+ * @param propertyConfig
+ * @group Builder
+ */
+export function buildFieldConfig<T extends CMSType = CMSType>(
+    propertyConfig: PropertyConfig<T>
+): PropertyConfig<T> {
+    return propertyConfig;
+}

package/src/util/index.ts

@@ -19,3 +19,4 @@ export * from "./debounce";
 export * from "./flatten_object";
 export * from "./make_properties_editable";
 export * from "./join_collections";
+export * from "./builders";

package/src/util/objects.ts

@@ -143,3 +143,26 @@ export function isEmptyObject(obj: object) {
         Object.getPrototypeOf(obj) === Object.prototype &&
         Object.keys(obj).length === 0
 }
+
+export function removePropsIfExisting(source: any, comparison: any) {
+    const isObject = (val: any) => typeof val === "object" && val !== null;
+    const isArray = (val: any) => Array.isArray(val);
+
+    if (!isObject(source) || !isObject(comparison)) {
+        return source;
+    }
+
+    const res = isArray(source) ? [...source] : { ...source };
+
+    Object.keys(comparison).forEach(key => {
+        if (key in res) {
+            if (isObject(res[key]) && isObject(comparison[key])) {
+                res[key] = removePropsIfExisting(res[key], comparison[key]);
+            } else if (res[key] === comparison[key]) {
+                isArray(res) ? res.splice(key, 1) : delete res[key];
+            }
+        }
+    });
+
+    return res;
+}

package/src/util/resolutions.ts

@@ -180,11 +180,14 @@ export function resolveProperty<T extends CMSType = CMSType, M extends Record<st
     if (resolvedProperty.propertyConfig && !isDefaultFieldConfigId(resolvedProperty.propertyConfig)) {
         const cmsFields = props.fields;
         if (!cmsFields) {
-            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`);
+            throw Error(`Trying to resolve a property with key ${resolvedProperty.propertyConfig} that inherits from a custom property config but no custom property configs were provided. Use the property \`propertyConfigs\` in your app config to provide them`);
         }
         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.propertyConfig} was found. Check the \`fields\` in your top level component`);
+        if (!customField) {
+            console.warn(`Trying to resolve a property with key ${resolvedProperty.propertyConfig} that inherits from a custom property config but no custom property config with that key was found. Check the \`propertyConfigs\` in your app config`)
+            console.warn("Available property configs", cmsFields);
+            return null;
+        }
         if (customField.property) {
             const configPropertyOrBuilder = customField.property;
             if ("propertyConfig" in configPropertyOrBuilder) {