@firecms/core 3.0.1 → 3.1.0-canary.24c8270

package/src/preview/property_previews/ArrayPropertyPreview.tsx

@@ -12,12 +12,12 @@ import { ErrorBoundary } from "../../components";
  * @group Preview components
  */
 export function ArrayPropertyPreview({
-                                         propertyKey,
-                                         value,
-                                         property: inputProperty,
-                                         // entity,
-                                         size
-                                     }: PropertyPreviewProps<any[]>) {
+    propertyKey,
+    value,
+    property: inputProperty,
+    // entity,
+    size
+}: PropertyPreviewProps<any[]>) {
 
     const authController = useAuthController();
     const customizationController = useCustomizationController();
@@ -28,6 +28,8 @@ export function ArrayPropertyPreview({
         authController
     });
 
+    if (!property) return null;
+
     if (!property.of) {
         throw Error(`You need to specify an 'of' prop (or specify a custom field) in your array property ${propertyKey}`);
     }
@@ -45,24 +47,24 @@ export function ArrayPropertyPreview({
         <div className="w-full flex flex-col gap-2">
             {values &&
                 values.map((value, index) => {
-                        const of: ResolvedProperty = property.resolvedProperties[index] ??
-                            (property.resolvedProperties[index] ?? (Array.isArray(property.of) ? property.of[index] : property.of));
-                        return of
-                            ? <React.Fragment
-                                key={"preview_array_" + index}>
-                                <div className={cls(defaultBorderMixin, "m-1 border-b last:border-b-0")}>
-                                    <ErrorBoundary>
-                                        <PropertyPreview
-                                            propertyKey={propertyKey}
-                                            // entity={entity}
-                                            value={value}
-                                            property={of}
-                                            size={childSize}/>
-                                    </ErrorBoundary>
-                                </div>
-                            </React.Fragment>
-                            : null;
-                    }
+                    const of: ResolvedProperty = property.resolvedProperties[index] ??
+                        (property.resolvedProperties[index] ?? (Array.isArray(property.of) ? property.of[index] : property.of));
+                    return of
+                        ? <React.Fragment
+                            key={"preview_array_" + index}>
+                            <div className={cls(defaultBorderMixin, "m-1 border-b last:border-b-0")}>
+                                <ErrorBoundary>
+                                    <PropertyPreview
+                                        propertyKey={propertyKey}
+                                        // entity={entity}
+                                        value={value}
+                                        property={of}
+                                        size={childSize} />
+                                </ErrorBoundary>
+                            </div>
+                        </React.Fragment>
+                        : null;
+                }
                 )}
         </div>
     );

package/src/preview/property_previews/SkeletonPropertyComponent.tsx

@@ -19,9 +19,9 @@ export interface SkeletonPropertyComponentProps {
  * @group Preview components
  */
 export function SkeletonPropertyComponent({
-                                              property,
-                                              size
-                                          }: SkeletonPropertyComponentProps
+    property,
+    size
+}: SkeletonPropertyComponentProps
 ) {
 
     if (!property) {
@@ -101,7 +101,7 @@ function renderMap<T extends Record<string, any>>(property: ResolvedMapProperty<
                         {property.properties && property.properties[key] &&
                             <SkeletonPropertyComponent
                                 property={property.properties[key]}
-                                size={"medium"}/>}
+                                size={"medium"} />}
                     </div>
                 ))}
             </div>
@@ -110,29 +110,29 @@ function renderMap<T extends Record<string, any>>(property: ResolvedMapProperty<
     return (
         <table className="table-auto">
             <tbody>
-            {mapPropertyKeys &&
-                mapPropertyKeys.map((key, index) => {
-                    return (
-                        <tr
-                            key={`map_preview_table__${index}`}
-                            className="border-b last:border-b-0">
-                            <th key={`table-cell-title--${key}`}
-                                className="align-top"
-                                style={{ width: "30%" }}>
-                                <p className="text-xs text-secondary">
-                                    {property.properties![key].name}
-                                </p>
-                            </th>
-                            <th key={`table-cell-${key}`}
-                                style={{ width: "70%" }}>
-                                {property.properties && property.properties[key] &&
-                                    <SkeletonPropertyComponent
-                                        property={property.properties[key]}
-                                        size={"medium"}/>}
-                            </th>
-                        </tr>
-                    );
-                })}
+                {mapPropertyKeys &&
+                    mapPropertyKeys.map((key, index) => {
+                        return (
+                            <tr
+                                key={`map_preview_table__${index}`}
+                                className="border-b last:border-b-0">
+                                <th key={`table-cell-title--${key}`}
+                                    className="align-top"
+                                    style={{ width: "30%" }}>
+                                    <p className="text-xs text-secondary">
+                                        {property.properties![key].name}
+                                    </p>
+                                </th>
+                                <th key={`table-cell-${key}`}
+                                    style={{ width: "70%" }}>
+                                    {property.properties && property.properties[key] &&
+                                        <SkeletonPropertyComponent
+                                            property={property.properties[key]}
+                                            size={"medium"} />}
+                                </th>
+                            </tr>
+                        );
+                    })}
             </tbody>
         </table>
     );
@@ -149,24 +149,24 @@ function renderArrayOfMaps<M extends Record<string, any>>(properties: ResolvedPr
     return (
         <table className="table-auto">
             <tbody>
-            {
-                [0, 1, 2].map((value, index) => {
-                    return (
-                        <tr key={`table_${value}_${index}`}>
-                            {tableProperties && tableProperties.map(
-                                (key) => (
-                                    <th
-                                        key={`table-cell-${key}`}
-                                    >
-                                        <SkeletonPropertyComponent
-                                            property={(properties)[key]}
-                                            size={"medium"}/>
-                                    </th>
-                                )
-                            )}
-                        </tr>
-                    );
-                })}
+                {
+                    [0, 1, 2].map((value, index) => {
+                        return (
+                            <tr key={`table_${value}_${index}`}>
+                                {tableProperties && tableProperties.map(
+                                    (key) => (
+                                        <th
+                                            key={`table-cell-${key}`}
+                                        >
+                                            <SkeletonPropertyComponent
+                                                property={(properties)[key]}
+                                                size={"medium"} />
+                                        </th>
+                                    )
+                                )}
+                            </tr>
+                        );
+                    })}
             </tbody>
         </table>
     );
@@ -203,14 +203,14 @@ function renderGenericArrayCell(
     return (
 
         <div key={"array_index_" + index}
-             className={"flex flex-col gap-2"}>
+            className={"flex flex-col gap-2"}>
 
             {
                 [0, 1].map((value, index) =>
                     <>
                         <SkeletonPropertyComponent key={`i_${index}`}
-                                                   property={property}
-                                                   size={"medium"}/>
+                            property={property}
+                            size={"medium"} />
                     </>
                 )}
         </div>
@@ -220,16 +220,21 @@ function renderGenericArrayCell(
 function renderUrlAudioComponent() {
     return (
         <Skeleton width={300}
-                  height={100}/>
+            height={100} />
     );
 }
 
-export function renderSkeletonImageThumbnail(size: PreviewSize) {
+export function renderSkeletonImageThumbnail(size: PreviewSize, fill?: boolean) {
+    if (fill) {
+        return (
+            <Skeleton className="w-full h-full" />
+        );
+    }
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const imageSize = size === "small" ? 40 : size === "medium" ? 100 : 200;
     return (
         <Skeleton width={imageSize}
-                  height={imageSize}/>
+            height={imageSize} />
     );
 }
 
@@ -237,12 +242,12 @@ function renderUrlVideo(size: PreviewSize) {
 
     return (
         <Skeleton width={size !== "large" ? 300 : 500}
-                  height={size !== "large" ? 200 : 250}/>
+            height={size !== "large" ? 200 : 250} />
     );
 }
 
 function renderReference() {
-    return <Skeleton width={200} height={100}/>;
+    return <Skeleton width={200} height={100} />;
 }
 
 function renderUrlComponent(property: ResolvedStringProperty, size: PreviewSize = "large") {
@@ -270,14 +275,14 @@ function renderUrlFile(size: PreviewSize) {
 }
 
 export function renderSkeletonText(index?: number, width = 120) {
-    return <Skeleton width={width} key={`skeleton_${index}`}/>;
+    return <Skeleton width={width} key={`skeleton_${index}`} />;
 }
 
 export function renderSkeletonCaptionText(index?: number) {
     return <Skeleton
-        height={20}/>;
+        height={20} />;
 }
 
 export function renderSkeletonIcon() {
-    return <Skeleton width={24} height={24}/>;
+    return <Skeleton width={24} height={24} />;
 }

package/src/routes/CustomCMSRoute.tsx

@@ -13,6 +13,7 @@ export function CustomCMSRoute({ cmsView }: {
             breadcrumbs: [{
                 title: cmsView.name,
                 url: cmsView.path
+                // count: undefined (not applicable for custom views)
             }]
         });
     }, [cmsView.path]);

package/src/routes/FireCMSRoute.tsx

@@ -35,22 +35,34 @@ export function FireCMSRoute() {
     });
 
     useEffect(() => {
+        const lastEntry = navigationEntries[navigationEntries.length - 1];
+        const isViewingCollection = lastEntry?.type === "collection";
+
         breadcrumbs.set({
-            breadcrumbs: navigationEntries.map(entry => {
+            breadcrumbs: navigationEntries.map((entry, index) => {
+                const isLastEntry = index === navigationEntries.length - 1;
+
                 if (entry.type === "entity") {
                     return ({
                         title: entry.entityId,
                         url: navigation.buildUrlCollectionPath(entry.fullPath)
+                        // count: undefined (not applicable for entities)
                     });
                 } else if (entry.type === "custom_view") {
                     return ({
                         title: entry.view.name,
                         url: navigation.buildUrlCollectionPath(entry.fullPath)
+                        // count: undefined (not applicable for custom views)
                     });
                 } else if (entry.type === "collection") {
+                    // Only show count badge (loading state) when viewing this collection directly
+                    // Don't show count for parent collections when viewing an entity
+                    const showCount = isLastEntry && isViewingCollection;
                     return ({
                         title: entry.collection.name,
-                        url: navigation.buildUrlCollectionPath(entry.fullPath)
+                        url: navigation.buildUrlCollectionPath(entry.fullPath),
+                        id: entry.fullPath,
+                        ...(showCount ? { count: null } : {}) // null = loading, undefined = no badge
                     });
                 } else {
                     throw new Error("Unexpected navigation entry type");
@@ -59,6 +71,7 @@ export function FireCMSRoute() {
         });
     }, [navigationEntries.map(entry => entry.path).join(",")]);
 
+
     if (isNew) {
         return <EntityFullScreenRoute
             pathname={pathname}
@@ -83,7 +96,7 @@ export function FireCMSRoute() {
             fullIdPath={collection.id}
             updateUrl={true}
             {...collection}
-            Actions={toArray(collection.Actions)}/>
+            Actions={toArray(collection.Actions)} />
     }
 
     if (isSidePanel) {
@@ -104,7 +117,7 @@ export function FireCMSRoute() {
                 fullPath={collection.path}
                 updateUrl={true}
                 {...collection}
-                Actions={toArray(collection.Actions)}/>;
+                Actions={toArray(collection.Actions)} />;
         }
     }
 
@@ -131,11 +144,11 @@ function getSelectedTabFromUrl(isNew: boolean, lastCustomView: NavigationViewCol
 }
 
 function EntityFullScreenRoute({
-                                   pathname,
-                                   navigationEntries,
-                                   isNew,
-                                   isCopy
-                               }: {
+    pathname,
+    navigationEntries,
+    isNew,
+    isCopy
+}: {
     pathname: string;
     navigationEntries: NavigationViewInternal[],
     isNew: boolean,
@@ -178,8 +191,8 @@ function EntityFullScreenRoute({
     let blocker: Blocker | undefined = undefined;
     try {
         blocker = useBlocker(({
-                                  nextLocation
-                              }) => {
+            nextLocation
+        }) => {
             if (nextLocation.pathname.startsWith(entityPath))
                 return false;
             return blocked.current;
@@ -195,7 +208,7 @@ function EntityFullScreenRoute({
     }
 
     if (!isNew && !lastEntityEntry) {
-        return <NotFoundPage/>;
+        return <NotFoundPage />;
     }
 
     const collection = isNew ? lastCollectionEntry!.collection : lastEntityEntry!.parentCollection;
@@ -240,7 +253,7 @@ function EntityFullScreenRoute({
             open={blocker?.state === "blocked"}
             handleOk={() => blocker?.proceed?.()}
             handleCancel={() => blocker?.reset?.()}
-            body={"You have unsaved changes in this entity."}/>
+            body={"You have unsaved changes in this entity."} />
 
     </>;
 }

package/src/types/analytics.ts

@@ -34,5 +34,15 @@ export type CMSAnalyticsEvent =
 
     | "collection_inline_editing"
 
+    | "view_mode_changed"
+
+    | "kanban_card_moved"
+    | "kanban_column_reorder"
+    | "kanban_property_changed"
+    | "kanban_new_entity_in_column"
+    | "kanban_backfill_order"
+
+    | "card_view_entity_click"
+
     | "unmapped_event"
     ;

package/src/types/collections.ts

@@ -364,8 +364,61 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
      * Defaults to `manual_apply`.
      */
     localChangesBackup?: "manual_apply" | "auto_apply" | false;
+
+    /**
+     * Default view mode for displaying this collection.
+     * - "table": Display entities in a spreadsheet-like table (default)
+     * - "cards": Display entities as a grid of cards with thumbnails
+     * - "kanban": Display entities in a Kanban board grouped by a property
+     * Defaults to "table".
+     */
+    defaultViewMode?: ViewMode;
+
+    /**
+     * Which view modes are available for this collection.
+     * Possible values: "table", "cards", "kanban".
+     * Defaults to all three: ["table", "cards", "kanban"].
+     * Note: "kanban" will only be available if the collection has at least
+     * one string property with enumValues defined, regardless of this setting.
+     */
+    enabledViews?: ViewMode[];
+
+    /**
+     * Configuration for Kanban board view mode.
+     * When set, the Kanban view mode becomes available.
+     */
+    kanban?: KanbanConfig<M>;
+
+    /**
+     * Property key to use for ordering items.
+     * Must reference a number property. When items are reordered,
+     * this property will be updated to reflect the new order using
+     * fractional indexing. Used by Kanban view for ordering within columns
+     * and can be used for general ordering purposes.
+     */
+    orderProperty?: Extract<keyof M, string>;
+}
+
+/**
+ * Configuration for Kanban board view mode.
+ * @group Collections
+ */
+export interface KanbanConfig<M extends Record<string, any> = any> {
+    /**
+     * Property key to use for Kanban board columns.
+     * Must reference a string property with enumValues defined.
+     * Entities will be grouped into columns based on this property's value.
+     * The column order is determined by the order of enumValues in the property.
+     */
+    columnProperty: Extract<keyof M, string>;
 }
 
+/**
+ * View mode for displaying a collection.
+ * @group Collections
+ */
+export type ViewMode = "table" | "cards" | "kanban";
+
 /**
  * Parameter passed to the `Actions` prop in the collection configuration.
  * The component will receive this prop when it is rendered in the collection
@@ -413,9 +466,10 @@ export interface CollectionActionsProps<M extends Record<string, any> = any, USE
     context: FireCMSContext<USER>;
 
     /**
-     * Count of the entities in this collection
+     * Count of the entities in this collection.
+     * undefined means the count is still loading.
      */
-    collectionEntitiesCount: number;
+    collectionEntitiesCount?: number;
 
 }
 
@@ -647,7 +701,7 @@ export type EntityTableController<M extends Record<string, any> = any> = {
     paginationEnabled?: boolean;
     pageSize?: number;
     checkFilterCombination?: (filterValues: FilterValues<any>,
-                              sortBy?: [string, "asc" | "desc"]) => boolean;
+        sortBy?: [string, "asc" | "desc"]) => boolean;
     popupCell?: SelectedCellProps<M>;
     setPopupCell?: (popupCell?: SelectedCellProps<M>) => void;
 

package/src/types/datasource.ts

@@ -19,9 +19,9 @@ export interface FetchEntityProps<M extends Record<string, any> = any> {
 export type ListenEntityProps<M extends Record<string, any> = any> =
     FetchEntityProps<M>
     & {
-    onUpdate: (entity: Entity<M>) => void,
-    onError?: (error: Error) => void,
-}
+        onUpdate: (entity: Entity<M>) => void,
+        onError?: (error: Error) => void,
+    }
 
 /**
  * @group Datasource
@@ -88,15 +88,15 @@ export interface DataSource {
      * @see useCollectionFetch if you need this functionality implemented as a hook
      */
     fetchCollection<M extends Record<string, any> = any>({
-                                                             path,
-                                                             collection,
-                                                             filter,
-                                                             limit,
-                                                             startAfter,
-                                                             orderBy,
-                                                             order,
-                                                             searchString
-                                                         }: FetchCollectionProps<M>
+        path,
+        collection,
+        filter,
+        limit,
+        startAfter,
+        orderBy,
+        order,
+        searchString
+    }: FetchCollectionProps<M>
     ): Promise<Entity<M>[]>;
 
     /**
@@ -137,11 +137,11 @@ export interface DataSource {
      * @param collection
      */
     fetchEntity<M extends Record<string, any> = any>({
-                                                         path,
-                                                         entityId,
-                                                         databaseId,
-                                                         collection
-                                                     }: FetchEntityProps<M>
+        path,
+        entityId,
+        databaseId,
+        collection
+    }: FetchEntityProps<M>
     ): Promise<Entity<M> | undefined>;
 
     /**
@@ -154,12 +154,12 @@ export interface DataSource {
      * @return Function to cancel subscription
      */
     listenEntity?<M extends Record<string, any> = any>({
-                                                           path,
-                                                           entityId,
-                                                           collection,
-                                                           onUpdate,
-                                                           onError
-                                                       }: ListenEntityProps<M>): () => void;
+        path,
+        entityId,
+        collection,
+        onUpdate,
+        onError
+    }: ListenEntityProps<M>): () => void;
 
     /**
      * Save entity to the specified path
@@ -274,14 +274,14 @@ export interface DataSourceDelegate {
      * @see useCollectionFetch if you need this functionality implemented as a hook
      */
     fetchCollection<M extends Record<string, any> = any>({
-                                                             path,
-                                                             filter,
-                                                             limit,
-                                                             startAfter,
-                                                             orderBy,
-                                                             order,
-                                                             searchString
-                                                         }: FetchCollectionDelegateProps<M>): Promise<Entity<M>[]>;
+        path,
+        filter,
+        limit,
+        startAfter,
+        orderBy,
+        order,
+        searchString
+    }: FetchCollectionDelegateProps<M>): Promise<Entity<M>[]>;
 
     /**
      * Listen to a collection in a given path. If you don't implement this method
@@ -299,16 +299,16 @@ export interface DataSourceDelegate {
      * @see useCollectionFetch if you need this functionality implemented as a hook
      */
     listenCollection?<M extends Record<string, any> = any>({
-                                                               path,
-                                                               filter,
-                                                               limit,
-                                                               startAfter,
-                                                               searchString,
-                                                               orderBy,
-                                                               order,
-                                                               onUpdate,
-                                                               onError
-                                                           }: ListenCollectionDelegateProps<M>): () => void;
+        path,
+        filter,
+        limit,
+        startAfter,
+        searchString,
+        orderBy,
+        order,
+        onUpdate,
+        onError
+    }: ListenCollectionDelegateProps<M>): () => void;
 
     /**
      * Retrieve an entity given a path and a collection
@@ -316,9 +316,9 @@ export interface DataSourceDelegate {
      * @param entityId
      */
     fetchEntity<M extends Record<string, any> = any>({
-                                                         path,
-                                                         entityId,
-                                                     }: FetchEntityProps<M>): Promise<Entity<M> | undefined>;
+        path,
+        entityId,
+    }: FetchEntityProps<M>): Promise<Entity<M> | undefined>;
 
     /**
      * Get realtime updates on one entity.
@@ -330,11 +330,11 @@ export interface DataSourceDelegate {
      * @return Function to cancel subscription
      */
     listenEntity?<M extends Record<string, any> = any>({
-                                                           path,
-                                                           entityId,
-                                                           onUpdate,
-                                                           onError
-                                                       }: ListenEntityProps<M>): () => void;
+        path,
+        entityId,
+        onUpdate,
+        onError
+    }: ListenEntityProps<M>): () => void;
 
     /**
      * Save entity to the specified path
@@ -344,11 +344,11 @@ export interface DataSourceDelegate {
      * @param status
      */
     saveEntity<M extends Record<string, any> = any>({
-                                                        path,
-                                                        entityId,
-                                                        values,
-                                                        status
-                                                    }: SaveEntityDelegateProps<M>): Promise<Entity<M>>;
+        path,
+        entityId,
+        values,
+        status
+    }: SaveEntityDelegateProps<M>): Promise<Entity<M>>;
 
     /**
      * Delete an entity
@@ -395,8 +395,6 @@ export interface DataSourceDelegate {
 
     cmsToDelegateModel: (data: any) => any;
 
-    setDateToMidnight: (input?: any) => any;
-
     initTextSearch?: (props: {
         context: FireCMSContext,
         path: string,