@firecms/core 3.0.0-canary.173 → 3.0.0-canary.175

package/dist/types/properties.d.ts

@@ -211,11 +211,11 @@ export type PropertyBuilder<T extends CMSType = any, M extends Record<string, an
 /**
  * @group Entity properties
  */
-export type PropertyOrBuilder<T extends CMSType = CMSType, M extends Record<string, any> = Record<string, any>> = Property<T> | PropertyBuilder<T, M>;
+export type PropertyOrBuilder<T extends CMSType = CMSType, M extends Record<string, any> = any> = Property<T> | PropertyBuilder<T, M>;
 /**
  * @group Entity properties
  */
-export type PropertiesOrBuilders<M extends Record<string, any> = Record<string, any>> = {
+export type PropertiesOrBuilders<M extends Record<string, any> = any> = {
     [k in keyof M]: PropertyOrBuilder<M[k], M>;
 };
 /**

package/dist/util/builders.d.ts

@@ -12,7 +12,7 @@ export declare function buildCollection<M extends Record<string, any> = any, USE
  * @param property
  * @group Builder
  */
-export declare 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;
+export declare function buildProperty<T extends CMSType = CMSType, P extends PropertyOrBuilder<T> = PropertyOrBuilder<T>, M extends Record<string, any> = 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;
 /**
  * Identity function we use to defeat the type system of Typescript and preserve
  * the properties keys.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-canary.173",
+  "version": "3.0.0-canary.175",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -50,24 +50,24 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@firecms/editor": "^3.0.0-canary.173",
-    "@firecms/formex": "^3.0.0-canary.173",
-    "@firecms/ui": "^3.0.0-canary.173",
+    "@firecms/editor": "^3.0.0-canary.175",
+    "@firecms/formex": "^3.0.0-canary.175",
+    "@firecms/ui": "^3.0.0-canary.175",
     "@hello-pangea/dnd": "^17.0.0",
-    "@radix-ui/react-portal": "^1.1.2",
+    "@radix-ui/react-portal": "^1.1.3",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
     "fuse.js": "^7.0.0",
     "history": "^5.3.0",
     "markdown-it": "^14.1.0",
-    "notistack": "^3.0.1",
+    "notistack": "^3.0.2",
     "object-hash": "^3.0.0",
     "react-dropzone": "^14.3.5",
     "react-fast-compare": "^3.2.2",
     "react-image-file-resizer": "^0.4.8",
     "react-transition-group": "^4.4.5",
     "react-use-measure": "^2.1.1",
-    "react-window": "^1.8.10",
+    "react-window": "^1.8.11",
     "yup": "^0.32.11"
   },
   "peerDependencies": {
@@ -78,13 +78,13 @@
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
-    "@testing-library/react": "^16.0.1",
-    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
-    "@types/node": "^20.17.9",
+    "@types/node": "^20.17.14",
     "@types/object-hash": "^3.0.6",
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.0",
     "@types/react-measure": "^2.0.12",
     "@vitejs/plugin-react": "^4.3.4",
     "babel-plugin-react-compiler": "beta",
@@ -92,19 +92,19 @@
     "eslint-plugin-react-compiler": "beta",
     "jest": "^29.7.0",
     "npm-run-all": "^4.1.5",
-    "react-router": "^6.28.0",
-    "react-router-dom": "^6.28.0",
+    "react-router": "^6.28.2",
+    "react-router-dom": "^6.28.2",
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
     "tsd": "^0.31.2",
-    "typescript": "^5.7.2",
-    "vite": "^5.4.11"
+    "typescript": "^5.7.3",
+    "vite": "^5.4.14"
   },
   "files": [
     "dist",
     "src"
   ],
-  "gitHead": "e406bf233e041e7361697bd583e622894a0bd631",
+  "gitHead": "0fd5d55e8bba65c5bd992606c3f8c61e0ad75ed7",
   "publishConfig": {
     "access": "public"
   },

package/src/core/EntityEditView.tsx

@@ -76,12 +76,12 @@ import {
 } from "@firecms/ui";
 import { Formex, FormexController, getIn, setIn, useCreateFormex } from "@firecms/formex";
 import { useAnalyticsController } from "../hooks/useAnalyticsController";
-import { CustomIdField } from "../form/components/CustomIdField";
 import { CustomFieldValidator, getYupEntitySchema } from "../form/validation";
-import { ErrorFocus } from "../form/components/ErrorFocus";
 import { LabelWithIconAndTooltip, PropertyFieldBinding } from "../form";
 import { ValidationError } from "yup";
 import { getEntityFromCache, removeEntityFromCache, saveEntityToCache } from "../util/entity_cache";
+import { CustomIdField } from "../form/components/CustomIdField";
+import { ErrorFocus } from "../form/components/ErrorFocus";
 
 const MAIN_TAB_VALUE = "main_##Q$SC^#S6";
 
@@ -158,6 +158,46 @@ export function EntityEditView<M extends Record<string, any>, USER extends User>
     />;
 }
 
+function FormLayout({
+                        id,
+                        formex,
+                        children,
+                        className
+                    }: {
+    id?: string,
+    formex: FormexController<any>,
+    children: React.ReactNode,
+    className?: string
+}) {
+
+    return <div
+        role="tabpanel"
+        id={id}
+        className={cls("relative flex flex-row max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-5xl w-full h-fit", className)}>
+
+        <div className={cls("flex flex-col w-full pt-12 pb-16 px-4 sm:px-8 md:px-10")}>
+
+            {formex.dirty
+                ? <Tooltip title={"Unsaved changes"}
+                           className={"self-end sticky top-4 z-10"}>
+                    <Chip size={"small"} colorScheme={"orangeDarker"}>
+                        <EditIcon size={"smallest"}/>
+                    </Chip>
+                </Tooltip>
+                : <Tooltip title={"In sync with the database"}
+                           className={"self-end sticky top-4 z-10"}>
+                    <Chip size={"small"}>
+                        <CheckIcon size={"smallest"}/>
+                    </Chip>
+                </Tooltip>}
+
+            {children}
+
+        </div>
+
+    </div>
+}
+
 export function EntityEditViewInner<M extends Record<string, any>>({
                                                                        path,
                                                                        entityId: entityIdProp,
@@ -535,7 +575,37 @@ export function EntityEditViewInner<M extends Record<string, any>>({
     const selectedEntityView = resolvedEntityViews.find(e => e.key === selectedTab);
     const shouldShowEntityActions = !autoSave && (selectedTab === MAIN_TAB_VALUE || selectedEntityView?.includeActions);
 
+    const secondaryForms: React.ReactNode[] | undefined = customViews && resolvedEntityViews
+        .filter(e => e.includeActions)
+        .map(
+            (customView, colIndex) => {
+                if (!customView)
+                    return null;
+                const Builder = customView.Builder;
+                if (!Builder) {
+                    console.error("customView.Builder is not defined");
+                    return null;
+                }
+
+                return <FormLayout
+                    key={`custom_view_${customView.key}`}
+                    className={selectedTab !== customView.key ? "hidden" : ""}
+                    formex={formex}>
+                    <ErrorBoundary>
+                        {formContext && <Builder
+                            collection={collection}
+                            entity={usedEntity}
+                            modifiedValues={formex.values ?? usedEntity?.values}
+                            formContext={formContext}
+                        />}
+                    </ErrorBoundary>
+                </FormLayout>
+
+            }
+        ).filter(Boolean);
+
     const customViewsView: React.ReactNode[] | undefined = customViews && resolvedEntityViews
+        .filter(e => !e.includeActions)
         .map(
             (customView, colIndex) => {
                 if (!customView)
@@ -545,6 +615,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                     console.error("customView.Builder is not defined");
                     return null;
                 }
+
                 return <div
                     className={cls(defaultBorderMixin,
                         "relative flex-grow w-full h-full overflow-auto",
@@ -572,12 +643,10 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         (subcollection, colIndex) => {
             const subcollectionId = subcollection.id ?? subcollection.path;
             const fullPath = usedEntity ? `${path}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollectionId)}` : undefined;
+            if (selectedTab !== subcollectionId) return null;
             return (
                 <div
-                    className={cls("relative flex-grow h-full overflow-auto w-full",
-                        {
-                            "hidden": selectedTab !== subcollectionId
-                        })}
+                    className={"relative flex-grow h-full overflow-auto w-full"}
                     key={`subcol_${subcollectionId}`}
                     role="tabpanel">
 
@@ -882,22 +951,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         : (!readOnly
             ? (
                 <ErrorBoundary>
-                    <div className="flex flex-col w-full pt-12 pb-16 px-4 sm:px-8 md:px-10">
-
-                        {formex.dirty
-                            ? <Tooltip title={"Unsaved changes"}
-                                       className={"self-end sticky top-4 z-10"}>
-                                <Chip size={"small"} colorScheme={"orangeDarker"}>
-                                    <EditIcon size={"smallest"}/>
-                                </Chip>
-                            </Tooltip>
-                            : <Tooltip title={"In sync with the database"}
-                                       className={"self-end sticky top-4 z-10"}>
-                                <Chip size={"small"}>
-                                    <CheckIcon size={"smallest"}/>
-                                </Chip>
-                            </Tooltip>}
-
+                    <>
                         <div
                             className={"w-full py-2 flex flex-col items-start mt-4 lg:mt-8 mb-8"}>
 
@@ -929,12 +983,11 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                                 <ErrorFocus containerRef={formRef}/>
 
                             </div>
-
-                            {actionsAtTheBottom && <div className="h-16"/>}
-
                         </>}
 
-                    </div>
+                        {actionsAtTheBottom && <div className="h-16"/>}
+
+                    </>
                 </ErrorBoundary>
             )
             : (
@@ -1028,29 +1081,26 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             noValidate
             className={"flex-1 flex flex-row w-full overflow-y-auto justify-center"}>
 
-            <div
-                role="tabpanel"
-                hidden={!mainViewVisible}
+            <FormLayout
+                className={!mainViewVisible ? "hidden" : ""}
                 id={`form_${path}`}
-                className={cls("relative flex flex-row max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-5xl w-full h-fit", {
-                    "hidden": !mainViewVisible
-                })}>
-
+                formex={formex}>
                 {globalLoading
-                    ? <div className="w-full pt-12 pb-16 px-4 sm:px-8 md:px-10"><CircularProgressCenter/></div>
+                    ? <div className="w-full pt-12 pb-16 px-4 sm:px-8 md:px-10">
+                        <CircularProgressCenter/>
+                    </div>
                     : entityView}
+            </FormLayout>
 
-            </div>
-
-            {mainViewVisible && shouldShowEntityActions && !actionsAtTheBottom && dialogActions}
+            {secondaryForms}
 
-            {customViewsView}
+            {shouldShowEntityActions && dialogActions}
 
-            {subCollectionsViews}
+        </form>
 
-            {shouldShowEntityActions && actionsAtTheBottom && dialogActions}
+        {customViewsView}
 
-        </form>
+        {subCollectionsViews}
 
     </div>;
 

package/src/form/PropertyFieldBinding.tsx

@@ -74,7 +74,7 @@ export const PropertyFieldBinding = React.memo(PropertyFieldBindingInternal, (a:
     return false;
 }) as typeof PropertyFieldBindingInternal;
 
-function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Record<string, any> = Record<string, any>>
+function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Record<string, any> = any>
 ({
      propertyKey,
      property,
@@ -175,7 +175,7 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
 
 }
 
-type ResolvedPropertyFieldBindingProps<T extends CMSType = CMSType, M extends Record<string, any> = Record<string, any>> =
+type ResolvedPropertyFieldBindingProps<T extends CMSType = CMSType, M extends Record<string, any> = any> =
     Omit<PropertyFieldBindingProps<T, M>, "property">
     & {
     property: ResolvedProperty<T>

package/src/routes/FireCMSRoute.tsx

@@ -11,7 +11,7 @@ import {
 } from "../util/navigation_from_path";
 import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
 import { toArray } from "../util/arrays";
-import { EntityCollectionView } from "../components";
+import { EntityCollectionView, NotFoundPage } from "../components";
 import { UnsavedChangesDialog } from "../components/UnsavedChangesDialog";
 
 export function FireCMSRoute() {
@@ -191,11 +191,11 @@ function EntityFullScreenRoute({
     const lastCollectionEntry = navigationEntries.findLast((entry) => entry.type === "collection");
 
     if (isNew && !lastCollectionEntry) {
-        throw new Error("No collection found in the navigation");
+        throw new Error("INTERNAL: No collection found in the navigation");
     }
 
     if (!isNew && !lastEntityEntry) {
-        throw new Error("No entity found in the navigation");
+        return <NotFoundPage/>;
     }
 
     const collection = isNew ? lastCollectionEntry!.collection : lastEntityEntry!.parentCollection;

package/src/types/properties.ts

@@ -285,14 +285,14 @@ export type PropertyBuilder<T extends CMSType = any, M extends Record<string, an
 /**
  * @group Entity properties
  */
-export type PropertyOrBuilder<T extends CMSType = CMSType, M extends Record<string, any> = Record<string, any>> =
+export type PropertyOrBuilder<T extends CMSType = CMSType, M extends Record<string, any> = any> =
     Property<T>
     | PropertyBuilder<T, M>;
 
 /**
  * @group Entity properties
  */
-export type PropertiesOrBuilders<M extends Record<string, any> = Record<string, any>> =
+export type PropertiesOrBuilders<M extends Record<string, any> = any> =
     {
         [k in keyof M]: PropertyOrBuilder<M[k], M>;
     };

package/src/util/builders.ts

@@ -26,8 +26,10 @@ import {
  * @param collection
  * @group Builder
  */
-export function buildCollection<M extends Record<string, any> = any,
-    USER extends User = User>(
+export function buildCollection<
+    M extends Record<string, any> = any,
+    USER extends User = User>
+(
     collection: EntityCollection<M, USER>
 ): EntityCollection<M, USER> {
     return collection;
@@ -39,7 +41,7 @@ export function buildCollection<M extends Record<string, any> = any,
  * @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>>(
+export function buildProperty<T extends CMSType = CMSType, P extends PropertyOrBuilder<T> = PropertyOrBuilder<T>, M extends Record<string, any> = any>(
     property: P
 ):
     P extends StringProperty ? StringProperty :