@firecms/core 3.0.0-alpha.20 → 3.0.0-alpha.21

package/dist/types/firecms.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { User } from "./user";
 import { AuthController } from "./auth";
 import { DataSource } from "./datasource";
@@ -108,11 +109,6 @@ export type FireCMSProps<UserType extends User> = {
      * Delegate for implementing your auth operations.
      */
     authController: AuthController<UserType>;
-    /**
-     * Optional link builder you can add to generate a button in your entity forms.
-     * The function must return a URL that gets opened when the button is clicked
-     */
-    entityLinkBuilder?: EntityLinkBuilder;
     /**
      * Path under the navigation routes of the CMS will be created. Defaults to `/`.
      * Internally FireCMS uses `react-router` to create the routes, the base path is attached to the
@@ -139,4 +135,17 @@ export type FireCMSProps<UserType extends User> = {
      * Callback used to get analytics events from the CMS
      */
     onAnalyticsEvent?: (event: CMSAnalyticsEvent, data?: object) => void;
+    /**
+     * Optional link builder you can add to generate a button in your entity forms.
+     * The function must return a URL that gets opened when the button is clicked
+     */
+    entityLinkBuilder?: EntityLinkBuilder;
+    components?: {
+        /**
+         * Component to render when a reference is missing
+         */
+        missingReference?: React.ComponentType<{
+            path: string;
+        }>;
+    };
 };

package/dist/types/firecms_context.d.ts

@@ -92,4 +92,12 @@ export type FireCMSContext<UserType extends User = User, AuthControllerType exte
      * You can also define an entity view from the UI.
      */
     entityViews?: EntityCustomView[];
+    components?: {
+        /**
+         * Component to render when a reference is missing
+         */
+        missingReference?: React.ComponentType<{
+            path: string;
+        }>;
+    };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@firecms/core",
-    "version": "3.0.0-alpha.20",
+    "version": "3.0.0-alpha.21",
     "description": "Awesome Firebase/Firestore-based headless open-source CMS",
     "funding": {
         "url": "https://github.com/sponsors/firecmsco"
@@ -132,7 +132,7 @@
         "dist",
         "src"
     ],
-    "gitHead": "7b74c47b5ea9f490bd0ba3d2b479108484a19411",
+    "gitHead": "4a18047fa8fd4ddaa157ec2d415fcab89cf34d65",
     "publishConfig": {
         "access": "public"
     }

package/src/components/Select.tsx

@@ -185,18 +185,6 @@ export function Select({
                     </SelectPrimitive.Viewport>
                 </SelectPrimitive.Content>
             </SelectPrimitive.Portal>
-            {/*<SelectPrimitive.Portal>*/}
-            {/*    <SelectPrimitive.Content*/}
-            {/*        className={cn("z-50 relative border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-800 p-2 rounded-lg shadow-lg ",*/}
-            {/*            // "overflow-auto"*/}
-            {/*        )}*/}
-            {/*        position={position}*/}
-            {/*        align={"center"}>*/}
-            {/*        <SelectPrimitive.Viewport>*/}
-            {/*                {children}*/}
-            {/*        </SelectPrimitive.Viewport>*/}
-            {/*    </SelectPrimitive.Content>*/}
-            {/*</SelectPrimitive.Portal>*/}
         </SelectPrimitive.Root>
     );
 }

package/src/core/FireCMS.tsx

@@ -53,7 +53,8 @@ export function FireCMS<UserType extends User>(props: FireCMSProps<UserType>) {
         plugins,
         onAnalyticsEvent,
         fields,
-        entityViews
+        entityViews,
+        components
     } = props;
 
     useLocaleConfig(locale);
@@ -81,8 +82,9 @@ export function FireCMS<UserType extends User>(props: FireCMSProps<UserType>) {
         plugins,
         onAnalyticsEvent,
         entityViews: entityViews ?? [],
-        fields: fields ?? {}
-    }), [dateTimeFormat, locale, plugins, entityViews, fields]);
+        fields: fields ?? {},
+        components
+    }), [dateTimeFormat, locale, plugins, entityViews, fields, components]);
 
     if (navigation.navigationLoadingError) {
         return (

package/src/core/components/EntityCollectionTable/fields/TableReferenceField.tsx

@@ -1,14 +1,14 @@
 import React, { useCallback, useState } from "react";
 import { ReferencePreview, ReferencePreviewContainer } from "../../../../preview";
-import { CollectionSize, Entity, EntityReference, FilterValues } from "../../../../types";
+import { CollectionSize, Entity, EntityCollection, EntityReference, FilterValues } from "../../../../types";
 
 import { getPreviewSizeFrom } from "../../../../preview/util";
 import { getReferenceFrom } from "../../../util";
-import { useNavigationContext, useReferenceDialog } from "../../../../hooks";
+import { useFireCMSContext, useNavigationContext, useReferenceDialog } from "../../../../hooks";
 import { ErrorView } from "../../ErrorView";
 import { Button } from "../../../../components/Button";
 
-export function TableReferenceField(props: {
+type TableReferenceFieldProps = {
     name: string;
     disabled: boolean;
     internalValue: EntityReference | EntityReference[] | undefined | null;
@@ -19,8 +19,27 @@ export function TableReferenceField(props: {
     title?: string;
     path: string;
     forceFilter?: FilterValues<string>;
-}) {
+};
+
+export function TableReferenceField(props: TableReferenceFieldProps) {
+
+    const context = useFireCMSContext();
+    const navigationContext = useNavigationContext();
+    const { path } = props;
+    const collection = navigationContext.getCollection<EntityCollection>(path);
+    if (!collection) {
+        if (context.components?.missingReference) {
+            return <context.components.missingReference path={path}/>;
+        } else {
+            throw Error(`Couldn't find the corresponding collection view for the path: ${path}`);
+        }
+    }
+    return <TableReferenceFieldSuccess {...props} collection={collection}/>;
+}
 
+function TableReferenceFieldSuccess(props: TableReferenceFieldProps & {
+    collection: EntityCollection;
+}) {
     const {
         name,
         internalValue,
@@ -31,7 +50,8 @@ export function TableReferenceField(props: {
         previewProperties,
         title,
         disabled,
-        forceFilter
+        forceFilter,
+        collection
     } = props;
 
     const [onHover, setOnHover] = useState(false);
@@ -39,13 +59,6 @@ export function TableReferenceField(props: {
     const hoverTrue = useCallback(() => setOnHover(true), []);
     const hoverFalse = useCallback(() => setOnHover(false), []);
 
-    const navigationContext = useNavigationContext();
-
-    const collection = navigationContext.getCollection(path);
-    if (!collection) {
-        throw Error(`Couldn't find the corresponding collection view for the path: ${path}`);
-    }
-
     const onSingleEntitySelected = useCallback((entity: Entity<any>) => {
         updateValue(entity ? getReferenceFrom(entity) : null);
     }, [updateValue]);

package/src/core/util/index.ts

@@ -17,3 +17,4 @@ export * from "./plurals";
 export * from "./references";
 export * from "./debounce";
 export * from "./flatten_object";
+export * from "./make_properties_editable";

package/src/core/util/make_properties_editable.ts

@@ -0,0 +1,11 @@
+import { Properties } from "../../types";
+
+export function makePropertiesEditable(properties: Properties) {
+    Object.keys(properties).forEach((key) => {
+        const property = properties[key];
+        property.editable = true;
+        if (property.dataType === "map" && property.properties) {
+            makePropertiesEditable(property.properties as Properties);
+        }
+    });
+}

package/src/preview/components/ReferencePreview.tsx

@@ -61,15 +61,35 @@ function ReferencePreviewInternal<M extends Record<string, any>>({
                                                                  }: ReferencePreviewProps) {
 
     const context = useFireCMSContext();
-
     const navigationContext = useNavigationContext();
-    const sideEntityController = useSideEntityController();
 
     const collection = navigationContext.getCollection<EntityCollection<M>>(reference.path);
     if (!collection) {
-        throw Error(`Couldn't find the corresponding collection view for the path: ${reference.path}`);
+        if (context.components?.missingReference) {
+            return <context.components.missingReference path={reference.path}/>;
+        } else {
+            throw Error(`Couldn't find the corresponding collection view for the path: ${reference.path}`);
+        }
     }
 
+    return <ReferencePreviewExisting
+        reference={reference}
+        collection={collection}
+        previewProperties={previewProperties}
+        size={size}
+        disabled={disabled}
+        allowEntityNavigation={allowEntityNavigation}
+        onClick={onClick}
+        onHover={onHover}/>
+}
+
+function ReferencePreviewExisting<M extends Record<string, any> = any>({ reference, collection, previewProperties, size, disabled, allowEntityNavigation, onClick, onHover }: ReferencePreviewProps & {
+    collection: EntityCollection<M>
+}) {
+
+    const context = useFireCMSContext();
+    const sideEntityController = useSideEntityController();
+
     const {
         entity,
         dataLoading,

package/src/types/firecms.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { User } from "./user";
 import { AuthController } from "./auth";
 import { DataSource } from "./datasource";
@@ -123,12 +124,6 @@ export type FireCMSProps<UserType extends User> = {
      */
     authController: AuthController<UserType>;
 
-    /**
-     * Optional link builder you can add to generate a button in your entity forms.
-     * The function must return a URL that gets opened when the button is clicked
-     */
-    entityLinkBuilder?: EntityLinkBuilder;
-
     /**
      * Path under the navigation routes of the CMS will be created. Defaults to `/`.
      * Internally FireCMS uses `react-router` to create the routes, the base path is attached to the
@@ -160,4 +155,21 @@ export type FireCMSProps<UserType extends User> = {
      */
     onAnalyticsEvent?: (event: CMSAnalyticsEvent, data?: object) => void;
 
+    /**
+     * Optional link builder you can add to generate a button in your entity forms.
+     * The function must return a URL that gets opened when the button is clicked
+     */
+    entityLinkBuilder?: EntityLinkBuilder;
+
+    components?: {
+
+        /**
+         * Component to render when a reference is missing
+         */
+        missingReference?: React.ComponentType<{
+            path: string,
+        }>;
+
+    }
+
 };

package/src/types/firecms_context.tsx

@@ -108,4 +108,13 @@ export type FireCMSContext<UserType extends User = User, AuthControllerType exte
      * You can also define an entity view from the UI.
      */
     entityViews?: EntityCustomView[];
+
+    components?: {
+
+        /**
+         * Component to render when a reference is missing
+         */
+        missingReference?: React.ComponentType<{ path: string }>;
+
+    }
 };