@firecms/core 3.0.1 → 3.1.0-canary.7d91b7c

package/src/components/EntityCollectionView/ViewModeToggle.tsx

@@ -0,0 +1,199 @@
+import React, { useMemo } from "react";
+import { CollectionSize, ViewMode } from "../../types";
+import {
+    AppsIcon,
+    Button,
+    ListIcon,
+    Popover,
+    Select,
+    SelectItem,
+    ToggleButtonGroup,
+    ToggleButtonOption,
+    ViewColumnIcon,
+    ViewKanbanIcon
+} from "@firecms/ui";
+
+export type KanbanPropertyOption = {
+    key: string;
+    label: string;
+};
+
+export type ViewModeToggleProps = {
+    viewMode?: ViewMode;
+    onViewModeChange?: (mode: ViewMode) => void;
+    /**
+     * Which view modes are enabled for this collection.
+     * Only these modes will appear in the toggle.
+     * Defaults to all three: ["table", "cards", "kanban"].
+     */
+    enabledViews?: ViewMode[];
+    /**
+     * Current size for card/table views
+     */
+    size?: CollectionSize;
+    /**
+     * Callback when size changes
+     */
+    onSizeChanged?: (size: CollectionSize) => void;
+    /**
+     * Controlled open state for the popover
+     */
+    open?: boolean;
+    /**
+     * Callback when popover open state changes
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Available properties that can be used for kanban columns (enum properties)
+     */
+    kanbanPropertyOptions?: KanbanPropertyOption[];
+    /**
+     * Currently selected property for kanban columns
+     */
+    selectedKanbanProperty?: string;
+    /**
+     * Callback when the kanban column property changes
+     */
+    onKanbanPropertyChange?: (property: string) => void;
+}
+
+const ALL_VIEW_MODES: ViewMode[] = ["table", "cards", "kanban"];
+
+export function ViewModeToggle({
+    viewMode = "table",
+    onViewModeChange,
+    enabledViews = ALL_VIEW_MODES,
+    size,
+    onSizeChanged,
+    open,
+    onOpenChange,
+    kanbanPropertyOptions,
+    selectedKanbanProperty,
+    onKanbanPropertyChange
+}: ViewModeToggleProps) {
+
+    if (!onViewModeChange) {
+        return null;
+    }
+
+    // Get icon for current view mode
+    const getViewModeIcon = () => {
+        if (viewMode === "kanban") return <ViewKanbanIcon size="small" />;
+        if (viewMode === "cards") return <AppsIcon size="small" />;
+        return <ListIcon size="small" />;
+    };
+
+    const getViewModeName = () => {
+        if (viewMode === "kanban") return "Board";
+        if (viewMode === "cards") return "Cards";
+        return "List";
+    };
+
+    const showSizeSelector = size && onSizeChanged && (viewMode === "table" || viewMode === "cards");
+    const showKanbanPropertySelector = viewMode === "kanban" &&
+        kanbanPropertyOptions &&
+        kanbanPropertyOptions.length > 0 &&
+        onKanbanPropertyChange;
+
+    // Build toggle options based on enabledViews
+    const viewModeOptions: ToggleButtonOption<ViewMode>[] = useMemo(() => {
+        const allOptions: ToggleButtonOption<ViewMode>[] = [
+            {
+                value: "table",
+                label: "List",
+                icon: <ListIcon size="small" />
+            },
+            {
+                value: "cards",
+                label: "Cards",
+                icon: <AppsIcon size="small" />
+            },
+            {
+                value: "kanban",
+                label: "Board",
+                icon: <ViewKanbanIcon size="small" />
+            }
+        ];
+
+        return allOptions.filter(option => enabledViews.includes(option.value));
+    }, [enabledViews]);
+
+    // Don't render if only one view is enabled
+    if (viewModeOptions.length <= 1 && !showSizeSelector) {
+        return null;
+    }
+
+    return (
+        <Popover
+            open={open}
+            onOpenChange={onOpenChange}
+            modal={true}
+            trigger={
+                <Button size="small">
+                    {getViewModeIcon()}
+                    <span className="ml-1 text-sm">{getViewModeName()}</span>
+                </Button>
+            }
+        >
+            <div className="p-3 flex flex-col gap-3 min-w-[240px]">
+                {/* View mode toggle using ToggleButtonGroup */}
+                {viewModeOptions.length > 1 && (
+                    <ToggleButtonGroup
+                        value={viewMode}
+                        onValueChange={onViewModeChange}
+                        options={viewModeOptions}
+                    />
+                )}
+
+                {/* Size selector */}
+                {showSizeSelector && (
+                    <div className="flex flex-row items-center justify-between gap-2">
+                        <div className="flex items-center gap-2 text-sm text-surface-600 dark:text-surface-300">
+                            <ViewColumnIcon size="small" />
+                            <span>Size</span>
+                        </div>
+                        <Select
+                            value={size}
+                            size="small"
+                            className="w-20"
+                            onValueChange={(v) => onSizeChanged?.(v as CollectionSize)}
+                            renderValue={(v) => <span className="font-medium">{v.toUpperCase()}</span>}
+                        >
+                            {["xs", "s", "m", "l", "xl"].map((s) => (
+                                <SelectItem key={s} value={s} className="font-medium text-center">
+                                    {s.toUpperCase()}
+                                </SelectItem>
+                            ))}
+                        </Select>
+                    </div>
+                )}
+
+                {/* Kanban column property selector */}
+                {showKanbanPropertySelector && (
+                    <div className="flex flex-row items-center justify-between gap-2">
+                        <div className="flex items-center gap-2 text-sm text-surface-600 dark:text-surface-300">
+                            <ViewKanbanIcon size="small" />
+                            <span>Group by</span>
+                        </div>
+                        <Select
+                            value={selectedKanbanProperty}
+                            size="small"
+                            className="w-32"
+                            onValueChange={(v) => onKanbanPropertyChange?.(v)}
+                            renderValue={(v) => {
+                                const option = kanbanPropertyOptions?.find(o => o.key === v);
+                                return <span className="font-medium truncate">{option?.label ?? v}</span>;
+                            }}
+                        >
+                            {kanbanPropertyOptions?.map((option) => (
+                                <SelectItem key={option.key} value={option.key}>
+                                    {option.label}
+                                </SelectItem>
+                            ))}
+                        </Select>
+                    </div>
+                )}
+            </div>
+        </Popover>
+    );
+}

package/src/components/EntityCollectionView/board_types.ts

@@ -0,0 +1,113 @@
+import { CSSProperties } from "react";
+import { ChipColorKey, ChipColorScheme } from "@firecms/ui";
+import { Entity } from "../../types";
+
+/**
+ * Item wrapper for entities in the Board component
+ */
+export interface BoardItem<M extends Record<string, any> = any> {
+    id: string;
+    entity: Entity<M>;
+}
+
+/**
+ * Map of column keys to arrays of board items
+ */
+export interface BoardItemMap<M extends Record<string, any> = any> {
+    [columnKey: string]: BoardItem<M>[];
+}
+
+/**
+ * Props passed to custom item render components
+ */
+export interface BoardItemViewProps<M extends Record<string, any> = any> {
+    item: BoardItem<M>;
+    isDragging: boolean;
+    isClone?: boolean;
+    isGroupedOver?: boolean;
+    style?: CSSProperties;
+    index?: number;
+}
+
+/**
+ * Per-column loading state
+ */
+export interface ColumnLoadingState {
+    [columnKey: string]: {
+        loading: boolean;
+        hasMore: boolean;
+        itemCount: number;
+        /** Total count of entities in column (may differ from itemCount if some lack orderProperty) */
+        totalCount?: number;
+    };
+}
+
+/**
+ * Props for the Board component
+ */
+export interface BoardProps<M extends Record<string, any>, COLUMN extends string> {
+    /**
+     * Array of board items (entities wrapped with id)
+     */
+    data: BoardItem<M>[];
+    /**
+     * Array of column keys/identifiers
+     */
+    columns: COLUMN[];
+    /**
+     * Labels for each column (optional, uses column key if not provided)
+     */
+    columnLabels?: Record<COLUMN, string>;
+    /**
+     * Colors for each column from enum values (optional)
+     */
+    columnColors?: Record<COLUMN, ChipColorKey | ChipColorScheme | undefined>;
+    /**
+     * CSS class name for the board container
+     */
+    className?: string;
+    /**
+     * Function to determine which column an item belongs to
+     */
+    assignColumn: (item: BoardItem<M>) => COLUMN;
+    /**
+     * Whether column reordering is allowed.
+     * Set to true only when a plugin provides persistence for column order.
+     */
+    allowColumnReorder?: boolean;
+    /**
+     * Callback when columns are reordered
+     */
+    onColumnReorder?: (columns: COLUMN[]) => void;
+    /**
+     * Callback when items are reordered or moved between columns
+     */
+    onItemsReorder?: (
+        items: BoardItem<M>[],
+        moveInfo?: {
+            itemId: string;
+            sourceColumn: COLUMN;
+            targetColumn: COLUMN;
+        }
+    ) => void;
+    /**
+     * Component to render individual items
+     */
+    ItemComponent: React.ComponentType<BoardItemViewProps<M>>;
+    /**
+     * Per-column loading state for pagination
+     */
+    columnLoadingState?: ColumnLoadingState;
+    /**
+     * Callback to load more items for a column
+     */
+    onLoadMoreColumn?: (column: COLUMN) => void;
+    /**
+     * Callback to add a new item to a specific column
+     */
+    onAddItemToColumn?: (column: COLUMN) => void;
+    /**
+     * Optional component to render at the end of the board for adding new columns
+     */
+    AddColumnComponent?: React.ReactNode;
+}