@rebasepro/ui 0.17.3 → 0.18.1

package/src/views/CollectionView/CollectionKanbanView.tsx

@@ -1,246 +0,0 @@
-"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 { resolveTitlePropertyKey } from "./resolveTitleProperty";
-
-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(
-        () => resolveTitlePropertyKey(order, properties, idProperty, titleProperty),
-        [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

@@ -1,240 +0,0 @@
-"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 { resolveTitlePropertyKey } from "./resolveTitleProperty";
-
-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(
-        () => resolveTitlePropertyKey(order, properties, idProperty, titleProperty),
-        [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>
-    );
-}