@rebasepro/ui 0.17.3 → 0.18.0

package/src/views/CollectionView/CollectionViewToolbar.tsx

@@ -1,242 +0,0 @@
-"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[];
-    /**
-     * Custom view modes, supplying the label and icon for their switcher
-     * entries. Without these an `enabledViews` key outside the four built-ins
-     * has no label and no icon to draw.
-     */
-    customViews?: { key: string, name: string, icon?: React.ReactNode }[];
-    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<string, 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<string, 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"],
-    customViews,
-    size = "m",
-    onSizeChange,
-    searchString,
-    onSearchChange,
-    loading,
-    actionsStart,
-    actionsEnd,
-    compact,
-    kanbanPropertyOptions,
-    selectedKanbanProperty,
-    onKanbanPropertyChange,
-}: CollectionViewToolbarProps) {
-    const [popoverOpen, setPopoverOpen] = useState(false);
-
-    // A key outside the four built-ins takes its label and icon from the
-    // custom view that declared it; without one it falls back to the key
-    // itself and the list glyph, so an entry is never blank.
-    const viewOptions: ToggleButtonOption<CollectionViewMode>[] = enabledViews.map((mode) => {
-        const custom = customViews?.find((entry) => entry.key === mode);
-        return {
-            value: mode,
-            label: VIEW_MODE_LABELS[mode] ?? custom?.name ?? mode,
-            icon: VIEW_MODE_ICONS[mode] ?? custom?.icon ?? <LayoutList size={iconSize.small} />,
-        };
-    });
-
-    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

@@ -1,181 +0,0 @@
-import React from "react";
-import type { VirtualTableSortKey } from "../../components/VirtualTable/VirtualTableProps";
-
-/**
- * Supported view modes.
- *
- * Any other string is a key into the `customViews` prop. The `(string & {})`
- * arm keeps the four built-ins in autocomplete while admitting those keys.
- */
-export type CollectionViewMode = "table" | "cards" | "kanban" | "list" | (string & {});
-
-/** 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;
-
-    /** The sort keys in order of significance; the second breaks ties on the first. */
-    sortBy?: VirtualTableSortKey[];
-    setSortBy?: (sort?: VirtualTableSortKey[]) => 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;
-}
-
-/**
- * What a custom view's component receives — the same set the built-in table,
- * card, list and kanban views are given, so a custom view starts at parity
- * with them and inherits the toolbar's search, the empty state and selection.
- */
-export interface CollectionCustomViewProps<T = Record<string, unknown>> {
-    dataController: CollectionDataController<T>;
-    properties: Record<string, CollectionPropertyConfig>;
-    propertiesOrder?: string[];
-    idProperty?: string;
-    titleProperty?: string;
-    onRowClick?: (row: T) => void;
-    onRowCreate?: (defaults?: Record<string, unknown>) => void;
-    canCreate?: boolean;
-    cellRenderer?: CellRendererOverride<T>;
-    selectionEnabled?: boolean;
-    selectionController?: CollectionSelectionController<T>;
-    highlightedItems?: T[];
-    emptyComponent?: React.ReactNode;
-    size?: CollectionViewSize;
-}
-
-/**
- * A custom view registration. Either the component on its own, or the
- * component with the label and icon its switcher entry should carry.
- *
- * Without a `name` the switcher falls back to the key, which is legible but
- * rarely what you want on screen.
- */
-export type CollectionCustomViewEntry<T = Record<string, unknown>> =
-    | React.ComponentType<CollectionCustomViewProps<T>>
-    | {
-        name?: string;
-        icon?: React.ReactNode;
-        Component: React.ComponentType<CollectionCustomViewProps<T>>;
-    };