@rebasepro/ui 0.6.1 → 0.8.0

package/src/views/CollectionView/CollectionKanbanView.tsx

@@ -0,0 +1,251 @@
+"use client";
+import React, { useCallback, useMemo } from "react";
+import { KanbanView } from "../KanbanView";
+import type { BoardItem, BoardItemViewProps } from "../KanbanView";
+import { Card } from "../../components/Card";
+import { Typography } from "../../components/Typography";
+import { DefaultCellRenderer } from "./DefaultCellRenderer";
+import { cls } from "../../util";
+import { cardClickableMixin, cardSelectedMixin } from "../../styles";
+import type {
+    CollectionPropertyConfig,
+    CollectionDataController,
+    CellRendererOverride,
+    CollectionSelectionController,
+    CollectionEnumValueConfig,
+} from "./CollectionViewTypes";
+
+import { getValueInPath } from "./utils";
+
+function getEnumLabel(enumConfig: CollectionPropertyConfig["enum"], key: string): string {
+    if (!enumConfig) return key;
+    if (enumConfig instanceof Map) {
+        const cfg: CollectionEnumValueConfig | undefined = enumConfig.get(key);
+        if (!cfg) return key;
+        return typeof cfg === "string" ? cfg : cfg.label;
+    }
+    const cfg: CollectionEnumValueConfig | undefined = enumConfig[key];
+    if (!cfg) return key;
+    return typeof cfg === "string" ? cfg : cfg.label;
+}
+
+/**
+ * Props for the {@link CollectionKanbanView} component.
+ * @group Collection View
+ */
+export type CollectionKanbanViewProps<T = Record<string, unknown>> = {
+    dataController: CollectionDataController<T>;
+    properties: Record<string, CollectionPropertyConfig>;
+    propertiesOrder?: string[];
+    idProperty?: string;
+    titleProperty?: string;
+    kanbanProperty: string;
+    onRowClick?: (row: T) => void;
+    cellRenderer?: CellRendererOverride<T>;
+    selectionEnabled?: boolean;
+    selectionController?: CollectionSelectionController<T>;
+    highlightedItems?: T[];
+    emptyComponent?: React.ReactNode;
+    onRowCreate?: (defaults?: Record<string, unknown>) => void;
+    className?: string;
+};
+
+/**
+ * Headless kanban view that wraps {@link KanbanView}.
+ *
+ * Groups data by a kanban property's enum values into columns.
+ * Each card displays a title and 1–2 preview properties.
+ *
+ * @group Collection View
+ */
+export function CollectionKanbanView<T extends Record<string, unknown> = Record<string, unknown>>({
+    dataController,
+    properties,
+    propertiesOrder,
+    idProperty = "id",
+    titleProperty,
+    kanbanProperty,
+    onRowClick,
+    cellRenderer,
+    emptyComponent,
+    onRowCreate,
+    className,
+}: CollectionKanbanViewProps<T>) {
+    const order = useMemo(
+        () => propertiesOrder ?? Object.keys(properties),
+        [propertiesOrder, properties]
+    );
+
+    // ── Resolve kanban columns ───────────────────────────────────────
+    const columns = useMemo<string[]>(() => {
+        const kanbanConfig = properties[kanbanProperty];
+        if (kanbanConfig?.enum) {
+            if (kanbanConfig.enum instanceof Map) {
+                return Array.from(kanbanConfig.enum.keys()).map(String);
+            }
+            return Object.keys(kanbanConfig.enum);
+        }
+        // Deduce from data
+        const seen = new Set<string>();
+        for (const row of dataController.data) {
+            const val = getValueInPath(row as Record<string, unknown>, kanbanProperty);
+            if (val !== null && val !== undefined) {
+                seen.add(String(val));
+            }
+        }
+        return Array.from(seen);
+    }, [properties, kanbanProperty, dataController.data]);
+
+    // ── Column labels ────────────────────────────────────────────────
+    const columnLabels = useMemo(() => {
+        const kanbanConfig = properties[kanbanProperty];
+        const labels: Record<string, string> = {};
+        for (const col of columns) {
+            labels[col] = getEnumLabel(kanbanConfig?.enum, col);
+        }
+        return labels;
+    }, [properties, kanbanProperty, columns]);
+
+    // ── Resolve title property ───────────────────────────────────────
+    const titlePropertyKey = useMemo(() => {
+        if (titleProperty) return titleProperty;
+        for (const key of order) {
+            const prop = properties[key];
+            if (prop && prop.type === "string" && !prop.hideFromCollection && !prop.storage) {
+                return key;
+            }
+        }
+        return idProperty;
+    }, [titleProperty, order, properties, idProperty]);
+
+    // ── Preview properties (up to 2) ─────────────────────────────────
+    const previewProperties = useMemo(() => {
+        const result: { key: string; property: CollectionPropertyConfig }[] = [];
+        for (const key of order) {
+            if (key === titlePropertyKey || key === kanbanProperty) continue;
+            const prop = properties[key];
+            if (prop && !prop.hideFromCollection) {
+                result.push({ key, property: prop });
+                if (result.length >= 2) break;
+            }
+        }
+        return result;
+    }, [order, properties, titlePropertyKey, kanbanProperty]);
+
+    // ── Convert data to BoardItem<T>[] ───────────────────────────────
+    const boardItems = useMemo<BoardItem<T>[]>(() => {
+        return dataController.data.map((row, index) => {
+            const id = getValueInPath(row as Record<string, unknown>, idProperty);
+            return {
+                id: id !== null && id !== undefined ? String(id) : String(index),
+                data: row,
+            };
+        });
+    }, [dataController.data, idProperty]);
+
+    // ── Assign column ────────────────────────────────────────────────
+    const assignColumn = useCallback(
+        (item: BoardItem<T>): string => {
+            const val = getValueInPath(item.data as Record<string, unknown>, kanbanProperty);
+            const strVal = val !== null && val !== undefined ? String(val) : "";
+            if (columns.includes(strVal)) return strVal;
+            return columns[0] ?? "";
+        },
+        [kanbanProperty, columns]
+    );
+
+    // ── Item component ───────────────────────────────────────────────
+    const ItemComponent = useMemo(() => {
+        function KanbanCard(props: BoardItemViewProps<T>) {
+            const { item } = props;
+            const titleValue = getValueInPath(
+                item.data as Record<string, unknown>,
+                titlePropertyKey
+            );
+
+            return (
+                <Card
+                    onClick={() => onRowClick?.(item.data)}
+                    className={cls(
+                        "p-3",
+                        cardClickableMixin,
+                        props.isDragging && cardSelectedMixin,
+                        props.isDragging && "shadow-lg opacity-75"
+                    )}
+                >
+                    <Typography variant="subtitle2" noWrap>
+                        {String(titleValue ?? "")}
+                    </Typography>
+                    {previewProperties.map(({ key, property }) => {
+                        const value = getValueInPath(
+                            item.data as Record<string, unknown>,
+                            key
+                        );
+
+                        if (cellRenderer) {
+                            const custom = cellRenderer({
+                                row: item.data,
+                                propertyKey: key,
+                                property,
+                                value,
+                                size: "tiny",
+                            });
+                            if (custom !== undefined) {
+                                return (
+                                    <div key={key} className="mt-1">
+                                        {custom}
+                                    </div>
+                                );
+                            }
+                        }
+
+                        return (
+                            <div key={key} className="mt-1">
+                                <DefaultCellRenderer
+                                    row={item.data}
+                                    propertyKey={key}
+                                    property={property}
+                                    value={value}
+                                    size="tiny"
+                                />
+                            </div>
+                        );
+                    })}
+                </Card>
+            );
+        }
+        return KanbanCard;
+    }, [titlePropertyKey, previewProperties, cellRenderer, onRowClick]);
+
+    // ── Add item to column ───────────────────────────────────────────
+    const handleAddItemToColumn = useCallback(
+        (column: string) => {
+            onRowCreate?.({ [kanbanProperty]: column });
+        },
+        [onRowCreate, kanbanProperty]
+    );
+
+    if (columns.length === 0 && !dataController.loading) {
+        return (
+            <div className="flex items-center justify-center p-8">
+                {emptyComponent ?? (
+                    <Typography variant="body2" color="secondary">
+                        No columns available for kanban view.
+                    </Typography>
+                )}
+            </div>
+        );
+    }
+
+    return (
+        <KanbanView<T, string>
+            columns={columns}
+            columnLabels={columnLabels as Record<string, string>}
+            data={boardItems}
+            assignColumn={assignColumn}
+            ItemComponent={ItemComponent}
+            onAddItemToColumn={onRowCreate ? handleAddItemToColumn : undefined}
+            className={className}
+        />
+    );
+}

package/src/views/CollectionView/CollectionListView.tsx

@@ -0,0 +1,245 @@
+"use client";
+import React, { useCallback, useMemo } from "react";
+import { ListView } from "../ListView";
+import { Typography } from "../../components/Typography";
+import { Checkbox } from "../../components/Checkbox";
+import { DefaultCellRenderer } from "./DefaultCellRenderer";
+import { cls } from "../../util";
+import type {
+    CollectionPropertyConfig,
+    CollectionDataController,
+    CellRendererOverride,
+    CollectionViewSize,
+    CollectionSelectionController,
+} from "./CollectionViewTypes";
+
+import { getValueInPath } from "./utils";
+
+/**
+ * Props for the {@link CollectionListView} component.
+ * @group Collection View
+ */
+export type CollectionListViewProps<T = Record<string, unknown>> = {
+    dataController: CollectionDataController<T>;
+    properties: Record<string, CollectionPropertyConfig>;
+    propertiesOrder?: string[];
+    idProperty?: string;
+    titleProperty?: string;
+    onRowClick?: (row: T) => void;
+    cellRenderer?: CellRendererOverride<T>;
+    size?: CollectionViewSize;
+    selectionEnabled?: boolean;
+    selectionController?: CollectionSelectionController<T>;
+    highlightedItems?: T[];
+    emptyComponent?: React.ReactNode;
+    className?: string;
+};
+
+/**
+ * Headless list view that wraps {@link ListView}.
+ *
+ * Each row displays a title (bold), subtitle with 1–2 secondary property values,
+ * and optional selection support.
+ *
+ * @group Collection View
+ */
+export function CollectionListView<T extends Record<string, unknown> = Record<string, unknown>>({
+    dataController,
+    properties,
+    propertiesOrder,
+    idProperty = "id",
+    titleProperty,
+    onRowClick,
+    cellRenderer,
+    size = "m",
+    selectionEnabled,
+    selectionController,
+    highlightedItems,
+    emptyComponent,
+    className,
+}: CollectionListViewProps<T>) {
+    const order = useMemo(
+        () => propertiesOrder ?? Object.keys(properties),
+        [propertiesOrder, properties]
+    );
+
+    // ── Resolve title property ───────────────────────────────────────
+    const titlePropertyKey = useMemo(() => {
+        if (titleProperty) return titleProperty;
+        for (const key of order) {
+            const prop = properties[key];
+            if (prop && prop.type === "string" && !prop.hideFromCollection && !prop.storage) {
+                return key;
+            }
+        }
+        return idProperty;
+    }, [titleProperty, order, properties, idProperty]);
+
+    // ── Subtitle properties (up to 2) ────────────────────────────────
+    const subtitleProperties = useMemo(() => {
+        const result: { key: string; property: CollectionPropertyConfig }[] = [];
+        for (const key of order) {
+            if (key === titlePropertyKey) continue;
+            const prop = properties[key];
+            if (prop && !prop.hideFromCollection) {
+                result.push({ key, property: prop });
+                if (result.length >= 2) break;
+            }
+        }
+        return result;
+    }, [order, properties, titlePropertyKey]);
+
+    // ── Selection IDs ────────────────────────────────────────────────
+    const selectedIds = useMemo(() => {
+        if (!selectionController?.selectedItems) return undefined;
+        const ids = new Set<string | number>();
+        for (const item of selectionController.selectedItems) {
+            const id = getValueInPath(item as Record<string, unknown>, idProperty);
+            if (id !== undefined && id !== null) {
+                ids.add(id as string | number);
+            }
+        }
+        return ids;
+    }, [selectionController?.selectedItems, idProperty]);
+
+    // ── Highlighted IDs ──────────────────────────────────────────────
+    const highlightedIds = useMemo(() => {
+        if (!highlightedItems) return undefined;
+        const ids = new Set<string | number>();
+        for (const item of highlightedItems) {
+            const id = getValueInPath(item as Record<string, unknown>, idProperty);
+            if (id !== undefined && id !== null) {
+                ids.add(id as string | number);
+            }
+        }
+        return ids;
+    }, [highlightedItems, idProperty]);
+
+    // ── Selection handler ────────────────────────────────────────────
+    const handleSelectionChange = useCallback(
+        (item: T, selected: boolean) => {
+            if (!selectionController) return;
+            selectionController.setSelectedItems((prev) => {
+                if (selected) {
+                    return [...prev, item];
+                }
+                const itemId = getValueInPath(item as Record<string, unknown>, idProperty);
+                return prev.filter((existing) => {
+                    const existingId = getValueInPath(existing as Record<string, unknown>, idProperty);
+                    return existingId !== itemId;
+                });
+            });
+        },
+        [selectionController, idProperty]
+    );
+
+    // ── Render row ───────────────────────────────────────────────────
+    const renderRow = useCallback(
+        (params: {
+            item: T;
+            index: number;
+            style: React.CSSProperties;
+            className: string;
+            selected: boolean;
+            highlighted: boolean;
+            isLast: boolean;
+            onClick: (e: React.MouseEvent) => void;
+            onSelectionChange: (selected: boolean) => void;
+        }): React.ReactNode => {
+            const { item, style, className: rowClassName, selected, highlighted, onClick, onSelectionChange } = params;
+            const titleValue = getValueInPath(item as Record<string, unknown>, titlePropertyKey);
+
+            return (
+                <div
+                    style={style}
+                    className={cls(
+                        "flex items-center gap-3 px-4 cursor-pointer",
+                        "hover:bg-surface-50 dark:hover:bg-surface-700",
+                        "transition-colors duration-100",
+                        selected && "bg-primary-50 dark:bg-primary-900/20",
+                        highlighted && "bg-surface-100 dark:bg-surface-800",
+                        rowClassName
+                    )}
+                    onClick={onClick}
+                >
+                    {/* Selection checkbox */}
+                    {selectionEnabled && (
+                        <div className="flex-shrink-0" onClick={(e) => e.stopPropagation()}>
+                            <Checkbox
+                                checked={selected}
+                                onCheckedChange={onSelectionChange}
+                                size="small"
+                            />
+                        </div>
+                    )}
+
+                    {/* Content */}
+                    <div className="flex-1 min-w-0 py-1">
+                        {/* Title */}
+                        <Typography variant="subtitle2" noWrap>
+                            {String(titleValue ?? "")}
+                        </Typography>
+
+                        {/* Subtitle properties */}
+                        {subtitleProperties.length > 0 && (
+                            <div className="flex items-center gap-2">
+                                {subtitleProperties.map(({ key, property }) => {
+                                    const value = getValueInPath(item as Record<string, unknown>, key);
+
+                                    if (cellRenderer) {
+                                        const custom = cellRenderer({
+                                            row: item,
+                                            propertyKey: key,
+                                            property,
+                                            value,
+                                            size: "tiny",
+                                        });
+                                        if (custom !== undefined) {
+                                            return <React.Fragment key={key}>{custom}</React.Fragment>;
+                                        }
+                                    }
+
+                                    return (
+                                        <React.Fragment key={key}>
+                                            <DefaultCellRenderer
+                                                row={item}
+                                                propertyKey={key}
+                                                property={property}
+                                                value={value}
+                                                size="tiny"
+                                            />
+                                        </React.Fragment>
+                                    );
+                                })}
+                            </div>
+                        )}
+                    </div>
+                </div>
+            );
+        },
+        [titlePropertyKey, subtitleProperties, cellRenderer, selectionEnabled]
+    );
+
+    return (
+        <div className={cls("w-full h-full overflow-auto", className)}>
+            <ListView<T>
+                data={dataController.data}
+                dataLoading={dataController.loading}
+                noMoreToLoad={dataController.noMoreToLoad}
+                dataLoadingError={dataController.error}
+                itemCount={dataController.itemCount}
+                setItemCount={dataController.setItemCount}
+                pageSize={dataController.pageSize}
+                paginationEnabled={dataController.paginationEnabled}
+                onItemClick={onRowClick}
+                selectedIds={selectedIds}
+                highlightedIds={highlightedIds}
+                selectionEnabled={!!selectionEnabled}
+                onSelectionChange={handleSelectionChange}
+                size={size}
+                renderRow={renderRow}
+                emptyComponent={emptyComponent}
+            />
+        </div>
+    );
+}