@rebasepro/ui 0.6.1 → 0.7.0

package/src/views/CollectionView/CollectionViewToolbar.tsx

@@ -0,0 +1,229 @@
+"use client";
+import React, { useCallback, useState } from "react";
+import { LayoutList, Table2, LayoutGrid, Kanban, Settings2 } from "lucide-react";
+import { iconSize } from "../../icons/Icon";
+import { SearchBar } from "../../components/SearchBar";
+import { Popover } from "../../components/Popover";
+import { ToggleButtonGroup } from "../../components/ToggleButtonGroup";
+import type { ToggleButtonOption } from "../../components/ToggleButtonGroup";
+import { Typography } from "../../components/Typography";
+import { Select, SelectItem } from "../../components/Select";
+import { IconButton } from "../../components/IconButton";
+import { cls } from "../../util";
+import type { CollectionViewMode, CollectionViewSize, KanbanPropertyOption } from "./CollectionViewTypes";
+
+/**
+ * Props for the {@link CollectionViewToolbar} component.
+ * @group Collection View
+ */
+export type CollectionViewToolbarProps = {
+    viewMode: CollectionViewMode;
+    onViewModeChange?: (mode: CollectionViewMode) => void;
+    enabledViews?: CollectionViewMode[];
+    size?: CollectionViewSize;
+    onSizeChange?: (size: CollectionViewSize) => void;
+    searchString?: string;
+    onSearchChange?: (search?: string) => void;
+    loading?: boolean;
+    actionsStart?: React.ReactNode;
+    actionsEnd?: React.ReactNode;
+    compact?: boolean;
+    kanbanPropertyOptions?: KanbanPropertyOption[];
+    selectedKanbanProperty?: string;
+    onKanbanPropertyChange?: (property: string) => void;
+};
+
+const VIEW_MODE_ICONS: Record<CollectionViewMode, React.ReactNode> = {
+    list: <LayoutList size={iconSize.small} />,
+    table: <Table2 size={iconSize.small} />,
+    cards: <LayoutGrid size={iconSize.small} />,
+    kanban: <Kanban size={iconSize.small} />,
+};
+
+const VIEW_MODE_LABELS: Record<CollectionViewMode, string> = {
+    list: "List",
+    table: "Table",
+    cards: "Cards",
+    kanban: "Board",
+};
+
+const SIZE_LABELS: Record<CollectionViewSize, string> = {
+    xs: "Extra Small",
+    s: "Small",
+    m: "Medium",
+    l: "Large",
+    xl: "Extra Large",
+};
+
+/**
+ * Toolbar for the headless CollectionView.
+ *
+ * Renders a search bar, view mode toggle (popover with toggle button group),
+ * optional size selector, optional kanban property selector, and action slots.
+ *
+ * @group Collection View
+ */
+export function CollectionViewToolbar({
+    viewMode,
+    onViewModeChange,
+    enabledViews = ["list", "table", "cards", "kanban"],
+    size = "m",
+    onSizeChange,
+    searchString,
+    onSearchChange,
+    loading,
+    actionsStart,
+    actionsEnd,
+    compact,
+    kanbanPropertyOptions,
+    selectedKanbanProperty,
+    onKanbanPropertyChange,
+}: CollectionViewToolbarProps) {
+    const [popoverOpen, setPopoverOpen] = useState(false);
+
+    const viewOptions: ToggleButtonOption<CollectionViewMode>[] = enabledViews.map((mode) => ({
+        value: mode,
+        label: VIEW_MODE_LABELS[mode],
+        icon: VIEW_MODE_ICONS[mode],
+    }));
+
+    const handleViewModeChange = useCallback(
+        (mode: CollectionViewMode) => {
+            onViewModeChange?.(mode);
+        },
+        [onViewModeChange]
+    );
+
+    const handleSizeChange = useCallback(
+        (value: string) => {
+            onSizeChange?.(value as CollectionViewSize);
+        },
+        [onSizeChange]
+    );
+
+    const handleKanbanPropertyChange = useCallback(
+        (value: string) => {
+            onKanbanPropertyChange?.(value);
+        },
+        [onKanbanPropertyChange]
+    );
+
+    const showViewToggle = onViewModeChange && enabledViews.length > 1;
+    const showSizeSelector = onSizeChange && viewMode !== "kanban";
+    const showKanbanSelector =
+        kanbanPropertyOptions &&
+        kanbanPropertyOptions.length > 0 &&
+        viewMode === "kanban" &&
+        onKanbanPropertyChange;
+    const showPopover = showViewToggle || showSizeSelector || showKanbanSelector;
+
+    return (
+        <div
+            className={cls(
+                "flex items-center gap-2 px-2 flex-shrink-0",
+                "border-b border-surface-200 dark:border-surface-800",
+                compact ? "py-0.5 gap-1" : "py-1"
+            )}
+        >
+            {actionsStart}
+
+            {onSearchChange && (
+                <SearchBar
+                    onTextSearch={onSearchChange}
+                    size="small"
+                    initialValue={searchString}
+                    loading={loading}
+                    expandable
+                />
+            )}
+
+            <div className="flex-1" />
+
+            {actionsEnd}
+
+            {showPopover && (
+                <Popover
+                    open={popoverOpen}
+                    onOpenChange={setPopoverOpen}
+                    side="bottom"
+                    align="end"
+                    trigger={
+                        <IconButton
+                            size="small"
+                            onClick={() => setPopoverOpen((prev) => !prev)}
+                        >
+                            <Settings2 size={iconSize.small} />
+                        </IconButton>
+                    }
+                >
+                    <div className="p-3 min-w-[200px] flex flex-col gap-3">
+                        {showViewToggle && (
+                            <div className="flex flex-col gap-1">
+                                <Typography
+                                    variant="caption"
+                                    color="secondary"
+                                    className="font-medium uppercase tracking-wider"
+                                >
+                                    View
+                                </Typography>
+                                <ToggleButtonGroup<CollectionViewMode>
+                                    value={viewMode}
+                                    onValueChange={handleViewModeChange}
+                                    options={viewOptions}
+                                />
+                            </div>
+                        )}
+
+                        {showSizeSelector && (
+                            <div className="flex flex-col gap-1">
+                                <Typography
+                                    variant="caption"
+                                    color="secondary"
+                                    className="font-medium uppercase tracking-wider"
+                                >
+                                    Size
+                                </Typography>
+                                <Select
+                                    value={size}
+                                    onValueChange={handleSizeChange}
+                                    size="small"
+                                >
+                                    {(Object.keys(SIZE_LABELS) as CollectionViewSize[]).map(
+                                        (sizeKey) => (
+                                            <SelectItem key={sizeKey} value={sizeKey}>
+                                                {SIZE_LABELS[sizeKey]}
+                                            </SelectItem>
+                                        )
+                                    )}
+                                </Select>
+                            </div>
+                        )}
+
+                        {showKanbanSelector && (
+                            <div className="flex flex-col gap-1">
+                                <Typography
+                                    variant="caption"
+                                    color="secondary"
+                                    className="font-medium uppercase tracking-wider"
+                                >
+                                    Group by
+                                </Typography>
+                                <Select
+                                    value={selectedKanbanProperty}
+                                    onValueChange={handleKanbanPropertyChange}
+                                    size="small"
+                                >
+                                    {kanbanPropertyOptions.map((option) => (
+                                        <SelectItem key={option.key} value={option.key}>
+                                            {option.label}
+                                        </SelectItem>
+                                    ))}
+                                </Select>
+                            </div>
+                        )}
+                    </div>
+                </Popover>
+            )}
+        </div>
+    );
+}

package/src/views/CollectionView/CollectionViewTypes.ts

@@ -0,0 +1,137 @@
+import React from "react";
+
+/** Supported view modes */
+export type CollectionViewMode = "table" | "cards" | "kanban" | "list";
+
+/** Supported collection sizes */
+export type CollectionViewSize = "xs" | "s" | "m" | "l" | "xl";
+
+/**
+ * Enum value configuration.
+ * Simple form: string label
+ * Extended form: object with label + optional color + disabled
+ */
+export type CollectionEnumValueConfig = string | {
+    label: string;
+    color?: string;
+    disabled?: boolean;
+};
+
+/**
+ * A data-agnostic property definition for rendering columns/cells.
+ * This is a UI-only type — it describes HOW to render, not WHERE data lives.
+ *
+ * This shape is deliberately compatible with Rebase's Property type,
+ * so the connected wrapper can pass properties with minimal mapping.
+ */
+export interface CollectionPropertyConfig {
+    /** Property data type — determines how cells are rendered */
+    type: "string" | "number" | "boolean" | "date" | "array" | "map" | "reference" | "relation" | "geopoint";
+
+    /** Display name shown in column headers and card labels */
+    name: string;
+
+    /** Optional description, shown as tooltip on column header */
+    description?: string;
+
+    // —— Display configuration ——
+    /** Column width in pixels */
+    columnWidth?: number;
+    /** If true, this property is not shown in collection views */
+    hideFromCollection?: boolean;
+
+    // —— Enum support ——
+    /** Map of value → label/config for enum properties */
+    enum?: Record<string, CollectionEnumValueConfig> | Map<string | number, CollectionEnumValueConfig>;
+
+    // —— String-specific ——
+    multiline?: boolean;
+    previewAsTag?: boolean;
+    url?: boolean | string;
+    markdown?: boolean;
+    storage?: boolean;
+    email?: boolean;
+
+    // —— Array-specific ——
+    of?: CollectionPropertyConfig;
+
+    // —— Map-specific ——
+    properties?: Record<string, CollectionPropertyConfig>;
+    propertiesOrder?: string[];
+
+    // —— Date-specific ——
+    mode?: "date" | "date_time";
+
+    // —— UI overrides ——
+    /** Custom preview component for this property */
+    Preview?: React.ComponentType<CellRendererProps>;
+}
+
+/**
+ * Data controller interface — the headless view reads data and state through this.
+ * Consumer apps can build their own implementation.
+ */
+export interface CollectionDataController<T = Record<string, unknown>> {
+    data: T[];
+    loading: boolean;
+    noMoreToLoad: boolean;
+    error?: Error;
+
+    filterValues?: Record<string, [string, unknown]>;
+    setFilterValues?: (values: Record<string, [string, unknown]> | undefined) => void;
+
+    sortBy?: [string, "asc" | "desc"];
+    setSortBy?: (sort?: [string, "asc" | "desc"]) => void;
+
+    searchString?: string;
+    setSearchString?: (search?: string) => void;
+    clearFilter?: () => void;
+
+    initialScroll?: number;
+    onScroll?: (props: {
+        scrollDirection: "forward" | "backward";
+        scrollOffset: number;
+        scrollUpdateWasRequested: boolean;
+    }) => void;
+
+    paginationEnabled?: boolean;
+    pageSize?: number;
+    itemCount?: number;
+    setItemCount?: (count: number) => void;
+}
+
+/**
+ * Props passed to cell renderers.
+ */
+export interface CellRendererProps<T = Record<string, unknown>> {
+    row: T;
+    propertyKey: string;
+    property: CollectionPropertyConfig;
+    value: unknown;
+    size?: "small" | "medium" | "large" | "tiny";
+    width?: number;
+    height?: number;
+}
+
+/**
+ * Custom cell renderer function type.
+ * Return undefined to fall through to the default renderer.
+ */
+export type CellRendererOverride<T = Record<string, unknown>> =
+    (props: CellRendererProps<T>) => React.ReactNode | undefined;
+
+/**
+ * Selection controller for the headless view.
+ */
+export interface CollectionSelectionController<T = Record<string, unknown>> {
+    selectedItems: T[];
+    setSelectedItems: React.Dispatch<React.SetStateAction<T[]>>;
+}
+
+/**
+ * Kanban property option for the view mode toggle.
+ */
+export interface KanbanPropertyOption {
+    key: string;
+    label: string;
+}