@rebasepro/ui 0.6.1 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (68) hide show
  1. package/dist/components/VirtualTable/fields/VirtualTableDateField.d.ts +13 -0
  2. package/dist/components/VirtualTable/fields/VirtualTableInput.d.ts +10 -0
  3. package/dist/components/VirtualTable/fields/VirtualTableNumberInput.d.ts +9 -0
  4. package/dist/components/VirtualTable/fields/VirtualTableSelect.d.ts +17 -0
  5. package/dist/components/VirtualTable/fields/VirtualTableSwitch.d.ts +8 -0
  6. package/dist/components/VirtualTable/index.d.ts +7 -0
  7. package/dist/components/VirtualTable/selection/SelectionContext.d.ts +11 -0
  8. package/dist/components/VirtualTable/selection/SelectionStore.d.ts +14 -0
  9. package/dist/icons/index.d.ts +1 -1
  10. package/dist/index.d.ts +13 -3
  11. package/dist/index.es.js +2322 -23
  12. package/dist/index.es.js.map +1 -1
  13. package/dist/styles.d.ts +1 -1
  14. package/dist/views/CardView.d.ts +32 -0
  15. package/dist/views/CollectionView/CollectionCardView.d.ts +30 -0
  16. package/dist/views/CollectionView/CollectionKanbanView.d.ts +31 -0
  17. package/dist/views/CollectionView/CollectionListView.d.ts +30 -0
  18. package/dist/views/CollectionView/CollectionTableView.d.ts +37 -0
  19. package/dist/views/CollectionView/CollectionView.d.ts +121 -0
  20. package/dist/views/CollectionView/CollectionViewToolbar.d.ts +31 -0
  21. package/dist/views/CollectionView/CollectionViewTypes.d.ts +106 -0
  22. package/dist/views/CollectionView/DefaultCellRenderer.d.ts +9 -0
  23. package/dist/views/CollectionView/index.d.ts +24 -0
  24. package/dist/views/CollectionView/utils.d.ts +5 -0
  25. package/dist/views/Kanban/Board.d.ts +3 -0
  26. package/dist/views/Kanban/BoardColumn.d.ts +20 -0
  27. package/dist/views/Kanban/BoardColumnTitle.d.ts +8 -0
  28. package/dist/views/Kanban/BoardSortableList.d.ts +14 -0
  29. package/dist/views/Kanban/board_types.d.ts +61 -0
  30. package/dist/views/Kanban/index.d.ts +5 -0
  31. package/dist/views/KanbanView.d.ts +24 -0
  32. package/dist/views/ListView.d.ts +40 -0
  33. package/dist/views/TableView.d.ts +6 -0
  34. package/dist/views/index.d.ts +5 -0
  35. package/package.json +1 -1
  36. package/src/components/Sheet.tsx +8 -4
  37. package/src/components/VirtualTable/fields/VirtualTableDateField.tsx +32 -0
  38. package/src/components/VirtualTable/fields/VirtualTableInput.tsx +82 -0
  39. package/src/components/VirtualTable/fields/VirtualTableNumberInput.tsx +71 -0
  40. package/src/components/VirtualTable/fields/VirtualTableSelect.tsx +107 -0
  41. package/src/components/VirtualTable/fields/VirtualTableSwitch.tsx +28 -0
  42. package/src/components/VirtualTable/index.tsx +7 -0
  43. package/src/components/VirtualTable/selection/SelectionContext.tsx +36 -0
  44. package/src/components/VirtualTable/selection/SelectionStore.ts +54 -0
  45. package/src/icons/index.ts +3 -0
  46. package/src/index.ts +43 -3
  47. package/src/styles.ts +1 -1
  48. package/src/views/CardView.tsx +281 -0
  49. package/src/views/CollectionView/CollectionCardView.tsx +270 -0
  50. package/src/views/CollectionView/CollectionKanbanView.tsx +251 -0
  51. package/src/views/CollectionView/CollectionListView.tsx +245 -0
  52. package/src/views/CollectionView/CollectionTableView.tsx +229 -0
  53. package/src/views/CollectionView/CollectionView.tsx +388 -0
  54. package/src/views/CollectionView/CollectionViewToolbar.tsx +229 -0
  55. package/src/views/CollectionView/CollectionViewTypes.ts +137 -0
  56. package/src/views/CollectionView/DefaultCellRenderer.tsx +404 -0
  57. package/src/views/CollectionView/index.ts +44 -0
  58. package/src/views/CollectionView/utils.ts +14 -0
  59. package/src/views/Kanban/Board.tsx +421 -0
  60. package/src/views/Kanban/BoardColumn.tsx +135 -0
  61. package/src/views/Kanban/BoardColumnTitle.tsx +47 -0
  62. package/src/views/Kanban/BoardSortableList.tsx +170 -0
  63. package/src/views/Kanban/board_types.ts +70 -0
  64. package/src/views/Kanban/index.tsx +5 -0
  65. package/src/views/KanbanView.tsx +32 -0
  66. package/src/views/ListView.tsx +281 -0
  67. package/src/views/TableView.tsx +7 -0
  68. package/src/views/index.ts +5 -0
package/dist/styles.d.ts CHANGED
@@ -5,7 +5,7 @@ export declare const fieldBackgroundMixin = "bg-surface-accent-200/50 dark:bg-bl
5
5
  export declare const fieldBackgroundInvisibleMixin = "bg-surface-accent-200/0 dark:bg-black/0";
6
6
  export declare const fieldBackgroundDisabledMixin = "bg-surface-accent-200/50 dark:bg-black/20";
7
7
  export declare const fieldBackgroundHoverMixin = "hover:bg-surface-accent-200/70 hover:dark:bg-black/50";
8
- export declare const defaultBorderMixin = "border-surface-200 dark:border-surface-700 ";
8
+ export declare const defaultBorderMixin = "border-surface-200 dark:border-surface-700/60 ";
9
9
  export declare const paperMixin = "bg-white rounded-lg dark:bg-surface-900 border border-surface-200 dark:border-surface-700";
10
10
  export declare const cardMixin = "bg-white dark:bg-surface-900 rounded-lg border border-surface-200 dark:border-surface-700";
11
11
  export declare const cardClickableMixin = "hover:bg-primary/5 dark:hover:bg-primary/5 cursor-pointer transition-colors duration-150";
@@ -0,0 +1,32 @@
1
+ import React from "react";
2
+ import { CollectionSize } from "./ListView";
3
+ export type CardViewProps<T> = {
4
+ data: T[];
5
+ dataLoading?: boolean;
6
+ noMoreToLoad?: boolean;
7
+ dataLoadingError?: Error;
8
+ itemCount?: number;
9
+ setItemCount?: (itemCount: number) => void;
10
+ pageSize?: number;
11
+ paginationEnabled?: boolean;
12
+ onItemClick?: (item: T) => void;
13
+ selectedIds?: Set<string | number>;
14
+ highlightedIds?: Set<string | number>;
15
+ selectionEnabled?: boolean;
16
+ onSelectionChange?: (item: T, selected: boolean) => void;
17
+ onScroll?: (props: {
18
+ scrollDirection: "forward" | "backward";
19
+ scrollOffset: number;
20
+ scrollUpdateWasRequested: boolean;
21
+ }) => void;
22
+ initialScroll?: number;
23
+ size?: CollectionSize;
24
+ renderCard: (item: T, extra: {
25
+ selected: boolean;
26
+ highlighted: boolean;
27
+ onSelectionChange: (selected: boolean) => void;
28
+ onClick: (e: React.MouseEvent) => void;
29
+ }) => React.ReactNode;
30
+ emptyComponent?: React.ReactNode;
31
+ };
32
+ export declare function CardView<T>({ data, dataLoading, noMoreToLoad, dataLoadingError, itemCount, setItemCount, pageSize, paginationEnabled, onItemClick, selectedIds, highlightedIds, selectionEnabled, onSelectionChange, onScroll, initialScroll, size, renderCard, emptyComponent }: CardViewProps<T>): React.JSX.Element;
@@ -0,0 +1,30 @@
1
+ import React from "react";
2
+ import type { CollectionPropertyConfig, CollectionDataController, CellRendererOverride, CollectionViewSize, CollectionSelectionController } from "./CollectionViewTypes";
3
+ /**
4
+ * Props for the {@link CollectionCardView} component.
5
+ * @group Collection View
6
+ */
7
+ export type CollectionCardViewProps<T = Record<string, unknown>> = {
8
+ dataController: CollectionDataController<T>;
9
+ properties: Record<string, CollectionPropertyConfig>;
10
+ propertiesOrder?: string[];
11
+ idProperty?: string;
12
+ titleProperty?: string;
13
+ onRowClick?: (row: T) => void;
14
+ cellRenderer?: CellRendererOverride<T>;
15
+ size?: CollectionViewSize;
16
+ selectionEnabled?: boolean;
17
+ selectionController?: CollectionSelectionController<T>;
18
+ highlightedItems?: T[];
19
+ emptyComponent?: React.ReactNode;
20
+ className?: string;
21
+ };
22
+ /**
23
+ * Headless card grid view that wraps {@link CardView}.
24
+ *
25
+ * Renders each item as a card with an optional image, title,
26
+ * preview properties, and selection support.
27
+ *
28
+ * @group Collection View
29
+ */
30
+ export declare function CollectionCardView<T extends Record<string, unknown> = Record<string, unknown>>({ dataController, properties, propertiesOrder, idProperty, titleProperty, onRowClick, cellRenderer, size, selectionEnabled, selectionController, highlightedItems, emptyComponent, className, }: CollectionCardViewProps<T>): React.JSX.Element;
@@ -0,0 +1,31 @@
1
+ import React from "react";
2
+ import type { CollectionPropertyConfig, CollectionDataController, CellRendererOverride, CollectionSelectionController } from "./CollectionViewTypes";
3
+ /**
4
+ * Props for the {@link CollectionKanbanView} component.
5
+ * @group Collection View
6
+ */
7
+ export type CollectionKanbanViewProps<T = Record<string, unknown>> = {
8
+ dataController: CollectionDataController<T>;
9
+ properties: Record<string, CollectionPropertyConfig>;
10
+ propertiesOrder?: string[];
11
+ idProperty?: string;
12
+ titleProperty?: string;
13
+ kanbanProperty: string;
14
+ onRowClick?: (row: T) => void;
15
+ cellRenderer?: CellRendererOverride<T>;
16
+ selectionEnabled?: boolean;
17
+ selectionController?: CollectionSelectionController<T>;
18
+ highlightedItems?: T[];
19
+ emptyComponent?: React.ReactNode;
20
+ onRowCreate?: (defaults?: Record<string, unknown>) => void;
21
+ className?: string;
22
+ };
23
+ /**
24
+ * Headless kanban view that wraps {@link KanbanView}.
25
+ *
26
+ * Groups data by a kanban property's enum values into columns.
27
+ * Each card displays a title and 1–2 preview properties.
28
+ *
29
+ * @group Collection View
30
+ */
31
+ export declare function CollectionKanbanView<T extends Record<string, unknown> = Record<string, unknown>>({ dataController, properties, propertiesOrder, idProperty, titleProperty, kanbanProperty, onRowClick, cellRenderer, emptyComponent, onRowCreate, className, }: CollectionKanbanViewProps<T>): React.JSX.Element;
@@ -0,0 +1,30 @@
1
+ import React from "react";
2
+ import type { CollectionPropertyConfig, CollectionDataController, CellRendererOverride, CollectionViewSize, CollectionSelectionController } from "./CollectionViewTypes";
3
+ /**
4
+ * Props for the {@link CollectionListView} component.
5
+ * @group Collection View
6
+ */
7
+ export type CollectionListViewProps<T = Record<string, unknown>> = {
8
+ dataController: CollectionDataController<T>;
9
+ properties: Record<string, CollectionPropertyConfig>;
10
+ propertiesOrder?: string[];
11
+ idProperty?: string;
12
+ titleProperty?: string;
13
+ onRowClick?: (row: T) => void;
14
+ cellRenderer?: CellRendererOverride<T>;
15
+ size?: CollectionViewSize;
16
+ selectionEnabled?: boolean;
17
+ selectionController?: CollectionSelectionController<T>;
18
+ highlightedItems?: T[];
19
+ emptyComponent?: React.ReactNode;
20
+ className?: string;
21
+ };
22
+ /**
23
+ * Headless list view that wraps {@link ListView}.
24
+ *
25
+ * Each row displays a title (bold), subtitle with 1–2 secondary property values,
26
+ * and optional selection support.
27
+ *
28
+ * @group Collection View
29
+ */
30
+ export declare function CollectionListView<T extends Record<string, unknown> = Record<string, unknown>>({ dataController, properties, propertiesOrder, idProperty, titleProperty, onRowClick, cellRenderer, size, selectionEnabled, selectionController, highlightedItems, emptyComponent, className, }: CollectionListViewProps<T>): React.JSX.Element;
@@ -0,0 +1,37 @@
1
+ import React from "react";
2
+ import type { CollectionPropertyConfig, CollectionDataController, CellRendererOverride, CollectionViewSize, CollectionSelectionController } from "./CollectionViewTypes";
3
+ /**
4
+ * Props for the {@link CollectionTableView} component.
5
+ * @group Collection View
6
+ */
7
+ export type CollectionTableViewProps<T = Record<string, unknown>> = {
8
+ dataController: CollectionDataController<T>;
9
+ properties: Record<string, CollectionPropertyConfig>;
10
+ propertiesOrder?: string[];
11
+ displayedColumnIds?: string[];
12
+ idProperty?: string;
13
+ titleProperty?: string;
14
+ onRowClick?: (row: T) => void;
15
+ cellRenderer?: CellRendererOverride<T>;
16
+ size?: CollectionViewSize;
17
+ selectionEnabled?: boolean;
18
+ selectionController?: CollectionSelectionController<T>;
19
+ highlightedItems?: T[];
20
+ emptyComponent?: React.ReactNode;
21
+ hoverRow?: boolean;
22
+ className?: string;
23
+ onColumnResize?: (params: {
24
+ key: string;
25
+ width: number;
26
+ }) => void;
27
+ onColumnsOrderChange?: (keys: string[]) => void;
28
+ };
29
+ /**
30
+ * Headless table view that wraps {@link VirtualTable}.
31
+ *
32
+ * Converts property configurations into virtual table columns and wires up
33
+ * sorting, pagination, and cell rendering without coupling to any data layer.
34
+ *
35
+ * @group Collection View
36
+ */
37
+ export declare function CollectionTableView<T extends Record<string, unknown> = Record<string, unknown>>({ dataController, properties, propertiesOrder, displayedColumnIds, onRowClick, cellRenderer, size, emptyComponent, hoverRow, className, onColumnResize, onColumnsOrderChange, }: CollectionTableViewProps<T>): React.JSX.Element;
@@ -0,0 +1,121 @@
1
+ import React from "react";
2
+ import type { CollectionViewMode, CollectionViewSize, CollectionPropertyConfig, CollectionDataController, CellRendererOverride, CollectionSelectionController, KanbanPropertyOption } from "./CollectionViewTypes";
3
+ /**
4
+ * Props for the headless {@link CollectionView} component.
5
+ *
6
+ * This component is data-agnostic — it renders collection data based on
7
+ * property configurations and callbacks, with ZERO coupling to any entity
8
+ * or data layer.
9
+ *
10
+ * @group Collection View
11
+ */
12
+ export interface CollectionViewProps<T = Record<string, unknown>> {
13
+ /**
14
+ * Data controller providing rows, loading state, pagination,
15
+ * filter/sort/search state and setters.
16
+ */
17
+ dataController: CollectionDataController<T>;
18
+ /**
19
+ * Property definitions keyed by property key.
20
+ * Drives column rendering, cell formatting, and filter UI.
21
+ */
22
+ properties: Record<string, CollectionPropertyConfig>;
23
+ /**
24
+ * Display order of properties. If omitted, uses Object.keys(properties).
25
+ */
26
+ propertiesOrder?: string[];
27
+ /**
28
+ * Subset of property keys to actually display as columns.
29
+ * If omitted, all non-hidden properties are shown.
30
+ */
31
+ displayedColumnIds?: string[];
32
+ /** Property key used as row identifier. Default: "id" */
33
+ idProperty?: string;
34
+ /** Property key used as the display title in card/list views */
35
+ titleProperty?: string;
36
+ /** Title displayed above the collection. `false` to hide. */
37
+ title?: string | false;
38
+ /** Controlled view mode. If omitted, internal state is used. */
39
+ viewMode?: CollectionViewMode;
40
+ /** Default view mode when uncontrolled. Default: "list" */
41
+ defaultViewMode?: CollectionViewMode;
42
+ /** Which view modes are available in the toggle */
43
+ enabledViews?: CollectionViewMode[];
44
+ /** Callback when view mode changes */
45
+ onViewModeChange?: (mode: CollectionViewMode) => void;
46
+ /** Controlled size. If omitted, internal state is used. */
47
+ size?: CollectionViewSize;
48
+ /** Default size. Default: "m" */
49
+ defaultSize?: CollectionViewSize;
50
+ /** Callback when size changes */
51
+ onSizeChange?: (size: CollectionViewSize) => void;
52
+ /** Property key for kanban column grouping */
53
+ kanbanProperty?: string;
54
+ /** Available kanban property options (shown in view toggle) */
55
+ kanbanPropertyOptions?: KanbanPropertyOption[];
56
+ /** Callback when kanban column property changes */
57
+ onKanbanPropertyChange?: (property: string) => void;
58
+ /** Called when a row is clicked */
59
+ onRowClick?: (row: T) => void;
60
+ /** Called when the "create" button is clicked */
61
+ onRowCreate?: (defaults?: Record<string, unknown>) => void;
62
+ /** Whether creation is allowed (shows the + button) */
63
+ canCreate?: boolean;
64
+ /** Enable row selection checkboxes */
65
+ selectionEnabled?: boolean;
66
+ /** Selection controller */
67
+ selectionController?: CollectionSelectionController<T>;
68
+ /** Highlighted items (e.g. recently clicked) */
69
+ highlightedItems?: T[];
70
+ /** Callback for bulk delete */
71
+ onMultipleDelete?: (rows: T[]) => void;
72
+ /**
73
+ * Custom cell renderer override. Return undefined to use default.
74
+ * This is how the connected wrapper injects PropertyPreview.
75
+ */
76
+ cellRenderer?: CellRendererOverride<T>;
77
+ /** Custom empty state component */
78
+ emptyComponent?: React.ReactNode;
79
+ /** Actions rendered at the start (left) of the toolbar */
80
+ toolbarActionsStart?: React.ReactNode;
81
+ /** Actions rendered at the end (right) of the toolbar */
82
+ toolbarActionsEnd?: React.ReactNode;
83
+ /** Hide the built-in toolbar entirely */
84
+ hideToolbar?: boolean;
85
+ /** Enable row hover highlight in table view */
86
+ hoverRow?: boolean;
87
+ /** Callback when table columns are resized */
88
+ onColumnResize?: (params: {
89
+ key: string;
90
+ width: number;
91
+ }) => void;
92
+ /** Callback when table columns are reordered */
93
+ onColumnsOrderChange?: (keys: string[]) => void;
94
+ /** CSS class for the outer container */
95
+ className?: string;
96
+ }
97
+ /**
98
+ * A data-agnostic collection view component that orchestrates table, card,
99
+ * list, and kanban views — driven entirely by props.
100
+ *
101
+ * Zero imports from any entity or data layer. This component lives in
102
+ * `@rebasepro/ui` and can be used with any data source.
103
+ *
104
+ * @example
105
+ * ```tsx
106
+ * import { CollectionView } from "@rebasepro/ui";
107
+ *
108
+ * <CollectionView
109
+ * dataController={{ data: myRows, loading: false, noMoreToLoad: true }}
110
+ * properties={{
111
+ * name: { type: "string", name: "Name" },
112
+ * email: { type: "string", name: "Email" },
113
+ * }}
114
+ * title="Contacts"
115
+ * onRowClick={(row) => openDetail(row.id)}
116
+ * />
117
+ * ```
118
+ *
119
+ * @group Collection View
120
+ */
121
+ export declare function CollectionView<T extends Record<string, unknown> = Record<string, unknown>>({ dataController, properties, propertiesOrder, displayedColumnIds, idProperty, titleProperty, title, viewMode: viewModeProp, defaultViewMode, enabledViews, onViewModeChange: onViewModeChangeProp, size: sizeProp, defaultSize, onSizeChange: onSizeChangeProp, kanbanProperty: kanbanPropertyProp, kanbanPropertyOptions, onKanbanPropertyChange: onKanbanPropertyChangeProp, onRowClick, onRowCreate, canCreate, selectionEnabled, selectionController, highlightedItems, onMultipleDelete, cellRenderer, emptyComponent, toolbarActionsStart, toolbarActionsEnd, hideToolbar, hoverRow, onColumnResize, onColumnsOrderChange, className }: CollectionViewProps<T>): React.JSX.Element;
@@ -0,0 +1,31 @@
1
+ import React from "react";
2
+ import type { CollectionViewMode, CollectionViewSize, KanbanPropertyOption } from "./CollectionViewTypes";
3
+ /**
4
+ * Props for the {@link CollectionViewToolbar} component.
5
+ * @group Collection View
6
+ */
7
+ export type CollectionViewToolbarProps = {
8
+ viewMode: CollectionViewMode;
9
+ onViewModeChange?: (mode: CollectionViewMode) => void;
10
+ enabledViews?: CollectionViewMode[];
11
+ size?: CollectionViewSize;
12
+ onSizeChange?: (size: CollectionViewSize) => void;
13
+ searchString?: string;
14
+ onSearchChange?: (search?: string) => void;
15
+ loading?: boolean;
16
+ actionsStart?: React.ReactNode;
17
+ actionsEnd?: React.ReactNode;
18
+ compact?: boolean;
19
+ kanbanPropertyOptions?: KanbanPropertyOption[];
20
+ selectedKanbanProperty?: string;
21
+ onKanbanPropertyChange?: (property: string) => void;
22
+ };
23
+ /**
24
+ * Toolbar for the headless CollectionView.
25
+ *
26
+ * Renders a search bar, view mode toggle (popover with toggle button group),
27
+ * optional size selector, optional kanban property selector, and action slots.
28
+ *
29
+ * @group Collection View
30
+ */
31
+ export declare function CollectionViewToolbar({ viewMode, onViewModeChange, enabledViews, size, onSizeChange, searchString, onSearchChange, loading, actionsStart, actionsEnd, compact, kanbanPropertyOptions, selectedKanbanProperty, onKanbanPropertyChange, }: CollectionViewToolbarProps): React.JSX.Element;
@@ -0,0 +1,106 @@
1
+ import React from "react";
2
+ /** Supported view modes */
3
+ export type CollectionViewMode = "table" | "cards" | "kanban" | "list";
4
+ /** Supported collection sizes */
5
+ export type CollectionViewSize = "xs" | "s" | "m" | "l" | "xl";
6
+ /**
7
+ * Enum value configuration.
8
+ * Simple form: string label
9
+ * Extended form: object with label + optional color + disabled
10
+ */
11
+ export type CollectionEnumValueConfig = string | {
12
+ label: string;
13
+ color?: string;
14
+ disabled?: boolean;
15
+ };
16
+ /**
17
+ * A data-agnostic property definition for rendering columns/cells.
18
+ * This is a UI-only type — it describes HOW to render, not WHERE data lives.
19
+ *
20
+ * This shape is deliberately compatible with Rebase's Property type,
21
+ * so the connected wrapper can pass properties with minimal mapping.
22
+ */
23
+ export interface CollectionPropertyConfig {
24
+ /** Property data type — determines how cells are rendered */
25
+ type: "string" | "number" | "boolean" | "date" | "array" | "map" | "reference" | "relation" | "geopoint";
26
+ /** Display name shown in column headers and card labels */
27
+ name: string;
28
+ /** Optional description, shown as tooltip on column header */
29
+ description?: string;
30
+ /** Column width in pixels */
31
+ columnWidth?: number;
32
+ /** If true, this property is not shown in collection views */
33
+ hideFromCollection?: boolean;
34
+ /** Map of value → label/config for enum properties */
35
+ enum?: Record<string, CollectionEnumValueConfig> | Map<string | number, CollectionEnumValueConfig>;
36
+ multiline?: boolean;
37
+ previewAsTag?: boolean;
38
+ url?: boolean | string;
39
+ markdown?: boolean;
40
+ storage?: boolean;
41
+ email?: boolean;
42
+ of?: CollectionPropertyConfig;
43
+ properties?: Record<string, CollectionPropertyConfig>;
44
+ propertiesOrder?: string[];
45
+ mode?: "date" | "date_time";
46
+ /** Custom preview component for this property */
47
+ Preview?: React.ComponentType<CellRendererProps>;
48
+ }
49
+ /**
50
+ * Data controller interface — the headless view reads data and state through this.
51
+ * Consumer apps can build their own implementation.
52
+ */
53
+ export interface CollectionDataController<T = Record<string, unknown>> {
54
+ data: T[];
55
+ loading: boolean;
56
+ noMoreToLoad: boolean;
57
+ error?: Error;
58
+ filterValues?: Record<string, [string, unknown]>;
59
+ setFilterValues?: (values: Record<string, [string, unknown]> | undefined) => void;
60
+ sortBy?: [string, "asc" | "desc"];
61
+ setSortBy?: (sort?: [string, "asc" | "desc"]) => void;
62
+ searchString?: string;
63
+ setSearchString?: (search?: string) => void;
64
+ clearFilter?: () => void;
65
+ initialScroll?: number;
66
+ onScroll?: (props: {
67
+ scrollDirection: "forward" | "backward";
68
+ scrollOffset: number;
69
+ scrollUpdateWasRequested: boolean;
70
+ }) => void;
71
+ paginationEnabled?: boolean;
72
+ pageSize?: number;
73
+ itemCount?: number;
74
+ setItemCount?: (count: number) => void;
75
+ }
76
+ /**
77
+ * Props passed to cell renderers.
78
+ */
79
+ export interface CellRendererProps<T = Record<string, unknown>> {
80
+ row: T;
81
+ propertyKey: string;
82
+ property: CollectionPropertyConfig;
83
+ value: unknown;
84
+ size?: "small" | "medium" | "large" | "tiny";
85
+ width?: number;
86
+ height?: number;
87
+ }
88
+ /**
89
+ * Custom cell renderer function type.
90
+ * Return undefined to fall through to the default renderer.
91
+ */
92
+ export type CellRendererOverride<T = Record<string, unknown>> = (props: CellRendererProps<T>) => React.ReactNode | undefined;
93
+ /**
94
+ * Selection controller for the headless view.
95
+ */
96
+ export interface CollectionSelectionController<T = Record<string, unknown>> {
97
+ selectedItems: T[];
98
+ setSelectedItems: React.Dispatch<React.SetStateAction<T[]>>;
99
+ }
100
+ /**
101
+ * Kanban property option for the view mode toggle.
102
+ */
103
+ export interface KanbanPropertyOption {
104
+ key: string;
105
+ label: string;
106
+ }
@@ -0,0 +1,9 @@
1
+ import React from "react";
2
+ import type { CellRendererProps } from "./CollectionViewTypes";
3
+ /**
4
+ * Default cell renderer for the headless CollectionView.
5
+ * Handles all built-in property types without depending on any Rebase core types.
6
+ *
7
+ * @group Preview components
8
+ */
9
+ export declare function DefaultCellRenderer({ row, propertyKey, property, value, size, width, height }: CellRendererProps): React.JSX.Element;
@@ -0,0 +1,24 @@
1
+ /**
2
+ * Headless Collection View components.
3
+ *
4
+ * Data-agnostic collection rendering — table, card, list, and kanban views
5
+ * driven entirely by property configurations and callbacks.
6
+ *
7
+ * Zero imports from any entity or data layer.
8
+ *
9
+ * @module CollectionView
10
+ */
11
+ export type { CollectionViewMode, CollectionViewSize, CollectionEnumValueConfig, CollectionPropertyConfig, CollectionDataController, CellRendererProps, CellRendererOverride, CollectionSelectionController, KanbanPropertyOption } from "./CollectionViewTypes";
12
+ export { CollectionView } from "./CollectionView";
13
+ export type { CollectionViewProps } from "./CollectionView";
14
+ export { CollectionViewToolbar } from "./CollectionViewToolbar";
15
+ export type { CollectionViewToolbarProps } from "./CollectionViewToolbar";
16
+ export { CollectionTableView } from "./CollectionTableView";
17
+ export type { CollectionTableViewProps } from "./CollectionTableView";
18
+ export { CollectionCardView } from "./CollectionCardView";
19
+ export type { CollectionCardViewProps } from "./CollectionCardView";
20
+ export { CollectionListView } from "./CollectionListView";
21
+ export type { CollectionListViewProps } from "./CollectionListView";
22
+ export { CollectionKanbanView } from "./CollectionKanbanView";
23
+ export type { CollectionKanbanViewProps } from "./CollectionKanbanView";
24
+ export { DefaultCellRenderer } from "./DefaultCellRenderer";
@@ -0,0 +1,5 @@
1
+ /**
2
+ * Traverse an object by dot-separated path.
3
+ * Returns `undefined` if any segment is missing.
4
+ */
5
+ export declare function getValueInPath(obj: Record<string, unknown> | undefined, path: string): unknown;
@@ -0,0 +1,3 @@
1
+ import React from "react";
2
+ import { BoardProps } from "./board_types";
3
+ export declare function Board<T, COLUMN extends string>({ data, columns: columnsProp, columnLabels, columnColors, className, assignColumn, allowColumnReorder, onColumnReorder, onItemsReorder, ItemComponent, columnLoadingState, onLoadMoreColumn, onAddItemToColumn, AddColumnComponent }: BoardProps<T, COLUMN>): React.JSX.Element;
@@ -0,0 +1,20 @@
1
+ import React from "react";
2
+ import { BoardItem, BoardItemViewProps } from "./board_types";
3
+ export interface BoardColumnProps<T> {
4
+ id: string;
5
+ title: string;
6
+ items: BoardItem<T>[];
7
+ index: number;
8
+ ItemComponent: React.ComponentType<BoardItemViewProps<T>>;
9
+ isDragging: boolean;
10
+ isDragOverColumn: boolean;
11
+ allowReorder?: boolean;
12
+ loading?: boolean;
13
+ hasMore?: boolean;
14
+ onLoadMore?: () => void;
15
+ onAddItem?: () => void;
16
+ totalCount?: number;
17
+ color?: any;
18
+ style?: React.CSSProperties;
19
+ }
20
+ export declare const BoardColumn: <T>(props: BoardColumnProps<T>) => React.ReactElement;
@@ -0,0 +1,8 @@
1
+ import React from "react";
2
+ export interface BoardColumnTitleProps {
3
+ children: React.ReactNode;
4
+ className?: string;
5
+ "aria-label"?: string;
6
+ color?: any;
7
+ }
8
+ export declare function BoardColumnTitle({ children, className, color, ...props }: BoardColumnTitleProps): React.JSX.Element;
@@ -0,0 +1,14 @@
1
+ import React from "react";
2
+ import { BoardItem, BoardItemViewProps } from "./board_types";
3
+ interface BoardSortableListProps<T> {
4
+ columnId: string;
5
+ items: BoardItem<T>[];
6
+ ItemComponent: React.ComponentType<BoardItemViewProps<T>>;
7
+ isDragging: boolean;
8
+ isDragOverColumn: boolean;
9
+ loading?: boolean;
10
+ hasMore?: boolean;
11
+ onLoadMore?: () => void;
12
+ }
13
+ export declare function BoardSortableList<T>({ columnId, items, ItemComponent, isDragging, isDragOverColumn, loading, hasMore, onLoadMore }: BoardSortableListProps<T>): React.JSX.Element;
14
+ export {};
@@ -0,0 +1,61 @@
1
+ import { CSSProperties } from "react";
2
+ export type ChipColorKey = "primary" | "secondary" | "success" | "warning" | "error" | "info" | "neutral" | string;
3
+ export type ChipColorScheme = "filled" | "outlined" | "tinted" | string;
4
+ /**
5
+ * Item wrapper for elements in the Board component
6
+ */
7
+ export interface BoardItem<T = any> {
8
+ id: string;
9
+ data: T;
10
+ }
11
+ /**
12
+ * Map of column keys to arrays of board items
13
+ */
14
+ export interface BoardItemMap<T = any> {
15
+ [columnKey: string]: BoardItem<T>[];
16
+ }
17
+ /**
18
+ * Props passed to custom item render components
19
+ */
20
+ export interface BoardItemViewProps<T = any> {
21
+ item: BoardItem<T>;
22
+ isDragging: boolean;
23
+ isClone?: boolean;
24
+ isGroupedOver?: boolean;
25
+ style?: CSSProperties;
26
+ index?: number;
27
+ }
28
+ /**
29
+ * Per-column loading state
30
+ */
31
+ export interface ColumnLoadingState {
32
+ [columnKey: string]: {
33
+ loading: boolean;
34
+ hasMore: boolean;
35
+ itemCount: number;
36
+ totalCount?: number;
37
+ };
38
+ }
39
+ /**
40
+ * Props for the Board component
41
+ */
42
+ export interface BoardProps<T, COLUMN extends string> {
43
+ data: BoardItem<T>[];
44
+ columns: COLUMN[];
45
+ columnLabels?: Record<COLUMN, string>;
46
+ columnColors?: Record<COLUMN, any>;
47
+ className?: string;
48
+ assignColumn: (item: BoardItem<T>) => COLUMN;
49
+ allowColumnReorder?: boolean;
50
+ onColumnReorder?: (columns: COLUMN[]) => void;
51
+ onItemsReorder?: (items: BoardItem<T>[], moveInfo?: {
52
+ itemId: string;
53
+ sourceColumn: COLUMN;
54
+ targetColumn: COLUMN;
55
+ }) => void;
56
+ ItemComponent: React.ComponentType<BoardItemViewProps<T>>;
57
+ columnLoadingState?: ColumnLoadingState;
58
+ onLoadMoreColumn?: (column: COLUMN) => void;
59
+ onAddItemToColumn?: (column: COLUMN) => void;
60
+ AddColumnComponent?: React.ReactNode;
61
+ }
@@ -0,0 +1,5 @@
1
+ export * from "./board_types";
2
+ export * from "./BoardColumnTitle";
3
+ export * from "./BoardSortableList";
4
+ export * from "./BoardColumn";
5
+ export * from "./Board";
@@ -0,0 +1,24 @@
1
+ import React from "react";
2
+ import { BoardItem, BoardItemViewProps, ColumnLoadingState } from "./Kanban/board_types";
3
+ export type KanbanViewProps<T, COLUMN extends string> = {
4
+ columns: COLUMN[];
5
+ columnLabels?: Record<COLUMN, string>;
6
+ columnColors?: Record<COLUMN, any>;
7
+ className?: string;
8
+ assignColumn: (item: BoardItem<T>) => COLUMN;
9
+ allowColumnReorder?: boolean;
10
+ onColumnReorder?: (columns: COLUMN[]) => void;
11
+ onItemsReorder?: (items: BoardItem<T>[], moveInfo?: {
12
+ itemId: string;
13
+ sourceColumn: COLUMN;
14
+ targetColumn: COLUMN;
15
+ }) => void;
16
+ ItemComponent: React.ComponentType<BoardItemViewProps<T>>;
17
+ columnLoadingState?: ColumnLoadingState;
18
+ onLoadMoreColumn?: (column: COLUMN) => void;
19
+ onAddItemToColumn?: (column: COLUMN) => void;
20
+ AddColumnComponent?: React.ReactNode;
21
+ data: BoardItem<T>[];
22
+ };
23
+ export declare function KanbanView<T, COLUMN extends string>(props: KanbanViewProps<T, COLUMN>): React.JSX.Element;
24
+ export type { BoardItem, BoardItemViewProps, ColumnLoadingState };
@@ -0,0 +1,40 @@
1
+ import React from "react";
2
+ export type CollectionSize = "xs" | "s" | "m" | "l" | "xl";
3
+ export type ListViewColumnDef<T> = {
4
+ key: string;
5
+ label: string;
6
+ align?: "left" | "center" | "right";
7
+ width?: string;
8
+ renderCell: (item: T) => React.ReactNode;
9
+ isTitle?: boolean;
10
+ };
11
+ export type ListViewProps<T> = {
12
+ data: T[];
13
+ dataLoading?: boolean;
14
+ noMoreToLoad?: boolean;
15
+ dataLoadingError?: Error;
16
+ itemCount?: number;
17
+ setItemCount?: (itemCount: number) => void;
18
+ pageSize?: number;
19
+ paginationEnabled?: boolean;
20
+ onItemClick?: (item: T) => void;
21
+ selectedIds?: Set<string | number>;
22
+ highlightedIds?: Set<string | number>;
23
+ selectionEnabled?: boolean;
24
+ onSelectionChange?: (item: T, selected: boolean) => void;
25
+ emptyComponent?: React.ReactNode;
26
+ size?: CollectionSize;
27
+ selectedEntityId?: string | number;
28
+ renderRow: (params: {
29
+ item: T;
30
+ index: number;
31
+ style: React.CSSProperties;
32
+ className: string;
33
+ selected: boolean;
34
+ highlighted: boolean;
35
+ isLast: boolean;
36
+ onClick: (e: React.MouseEvent) => void;
37
+ onSelectionChange: (selected: boolean) => void;
38
+ }) => React.ReactNode;
39
+ };
40
+ export declare function ListView<T>({ data, dataLoading, noMoreToLoad, dataLoadingError, itemCount, setItemCount, pageSize, paginationEnabled, onItemClick, selectedIds, highlightedIds, selectionEnabled, onSelectionChange, emptyComponent, size, selectedEntityId, renderRow }: ListViewProps<T>): React.JSX.Element;