@rebasepro/ui 0.6.0 → 0.7.0

package/src/views/CollectionView/DefaultCellRenderer.tsx

@@ -0,0 +1,404 @@
+import React from "react";
+import { ImageIcon } from "lucide-react";
+import { cls } from "../../util";
+import { Typography } from "../../components/Typography";
+import { Chip } from "../../components/Chip";
+import { BooleanSwitch } from "../../components/BooleanSwitch";
+import { Markdown } from "../../components/Markdown";
+import { Tooltip } from "../../components/Tooltip";
+import { iconSize } from "../../icons";
+import type { CellRendererProps, CollectionPropertyConfig, CollectionEnumValueConfig } from "./CollectionViewTypes";
+
+// ——— Helpers ———
+
+/**
+ * Resolve an enum key to its display label and optional color.
+ */
+function resolveEnumLabel(
+    enumValues: CollectionPropertyConfig["enum"],
+    value: unknown
+): { label: string; color?: string } | undefined {
+    if (!enumValues) return undefined;
+    const key = String(value);
+    if (enumValues instanceof Map) {
+        const config: CollectionEnumValueConfig | undefined = enumValues.get(value as string | number);
+        if (!config) return undefined;
+        if (typeof config === "string") return { label: config };
+        return { label: config.label, color: config.color };
+    }
+    const config: CollectionEnumValueConfig | undefined = enumValues[key];
+    if (!config) return undefined;
+    if (typeof config === "string") return { label: config };
+    return { label: config.label, color: config.color };
+}
+
+/**
+ * Format a date value using Intl.DateTimeFormat.
+ */
+function formatDate(value: unknown, includeTime: boolean): string {
+    if (value == null) return "—";
+    const date = value instanceof Date ? value : new Date(String(value));
+    if (isNaN(date.getTime())) return String(value);
+
+    const options: Intl.DateTimeFormatOptions = includeTime
+        ? { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" }
+        : { year: "numeric", month: "short", day: "numeric" };
+
+    return new Intl.DateTimeFormat(undefined, options).format(date);
+}
+
+/**
+ * Type guard for geopoint-like objects.
+ */
+function isGeoPoint(value: unknown): value is { lat: number; lng: number } {
+    if (typeof value !== "object" || value === null) return false;
+    const obj = value as Record<string, unknown>;
+    return typeof obj.lat === "number" && typeof obj.lng === "number";
+}
+
+// ——— Component ———
+
+/**
+ * Default cell renderer for the headless CollectionView.
+ * Handles all built-in property types without depending on any Rebase core types.
+ *
+ * @group Preview components
+ */
+export function DefaultCellRenderer({
+    row,
+    propertyKey,
+    property,
+    value,
+    size,
+    width,
+    height
+}: CellRendererProps) {
+
+    // 1. Null / undefined → em-dash
+    if (value === null || value === undefined) {
+        return (
+            <Typography variant="body2"
+                        color="secondary"
+                        className="px-1">
+                —
+            </Typography>
+        );
+    }
+
+    // 2. Custom Preview component override
+    if (property.Preview) {
+        const PreviewComponent = property.Preview;
+        return (
+            <PreviewComponent
+                row={row}
+                propertyKey={propertyKey}
+                property={property}
+                value={value}
+                size={size}
+                width={width}
+                height={height}
+            />
+        );
+    }
+
+    // ——— Type-specific renderers ———
+
+    switch (property.type) {
+        case "string":
+            return renderString(property, value);
+
+        case "number":
+            return renderNumber(property, value);
+
+        case "boolean":
+            return renderBoolean(value);
+
+        case "date":
+            return renderDate(property, value);
+
+        case "array":
+            return renderArray(property, value);
+
+        case "map":
+            return renderMap(value);
+
+        case "reference":
+        case "relation":
+            return renderReference(value);
+
+        case "geopoint":
+            return renderGeopoint(value);
+
+        default:
+            return (
+                <Typography variant="body2"
+                            color="secondary"
+                            noWrap
+                            className="px-1">
+                    {JSON.stringify(value)}
+                </Typography>
+            );
+    }
+}
+
+// ——— Per-type render functions ———
+
+function renderString(property: CollectionPropertyConfig, value: unknown): React.ReactElement {
+    const strValue = String(value);
+
+    // Enum → Chip
+    if (property.enum) {
+        const resolved = resolveEnumLabel(property.enum, value);
+        return (
+            <Chip size="small"
+                  colorScheme={resolved?.color ? { color: resolved.color, text: "#fff" } : undefined}>
+                {resolved?.label ?? strValue}
+            </Chip>
+        );
+    }
+
+    // Preview as tag → Chip
+    if (property.previewAsTag) {
+        return (
+            <Chip size="small">
+                {strValue}
+            </Chip>
+        );
+    }
+
+    // URL → clickable link
+    if (property.url) {
+        const href = typeof property.url === "string" ? property.url : strValue;
+        return (
+            <Typography variant="body2"
+                        noWrap
+                        component="a"
+                        href={href}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className={cls(
+                            "px-1 text-primary hover:underline cursor-pointer"
+                        )}>
+                {strValue}
+            </Typography>
+        );
+    }
+
+    // Email → mailto link
+    if (property.email) {
+        return (
+            <Typography variant="body2"
+                        noWrap
+                        component="a"
+                        href={`mailto:${strValue}`}
+                        className={cls(
+                            "px-1 text-primary hover:underline cursor-pointer"
+                        )}>
+                {strValue}
+            </Typography>
+        );
+    }
+
+    // Markdown → rendered markdown
+    if (property.markdown) {
+        return (
+            <div className="px-1 max-h-[100px] overflow-hidden">
+                <Markdown source={strValue} size="small" />
+            </div>
+        );
+    }
+
+    // Storage → image preview with fallback
+    if (property.storage) {
+        return (
+            <div className={cls(
+                "px-1 flex items-center justify-center",
+                "w-[40px] h-[40px] rounded overflow-hidden"
+            )}>
+                {strValue ? (
+                    <img
+                        src={strValue}
+                        alt=""
+                        className="w-full h-full object-cover"
+                        onError={(e) => {
+                            const target = e.currentTarget;
+                            target.style.display = "none";
+                            const fallback = target.nextElementSibling;
+                            if (fallback instanceof HTMLElement) {
+                                fallback.style.display = "flex";
+                            }
+                        }}
+                    />
+                ) : null}
+                <div className={cls(
+                    "w-full h-full items-center justify-center rounded",
+                    "bg-surface-100 dark:bg-surface-800 text-text-secondary dark:text-text-secondary-dark",
+                    strValue ? "hidden" : "flex"
+                )}>
+                    <ImageIcon size={iconSize.small} />
+                </div>
+            </div>
+        );
+    }
+
+    // Default string → truncated text
+    return (
+        <Tooltip title={strValue.length > 50 ? strValue : undefined}
+                 side="bottom">
+            <Typography variant="body2"
+                        noWrap
+                        className="px-1">
+                {strValue}
+            </Typography>
+        </Tooltip>
+    );
+}
+
+function renderNumber(property: CollectionPropertyConfig, value: unknown): React.ReactElement {
+    const numStr = String(value);
+
+    // Enum → Chip
+    if (property.enum) {
+        const resolved = resolveEnumLabel(property.enum, value);
+        return (
+            <Chip size="small"
+                  colorScheme={resolved?.color ? { color: resolved.color, text: "#fff" } : undefined}>
+                {resolved?.label ?? numStr}
+            </Chip>
+        );
+    }
+
+    // Default → right-aligned
+    return (
+        <Typography variant="body2"
+                    noWrap
+                    align="right"
+                    className="px-1 tabular-nums">
+            {numStr}
+        </Typography>
+    );
+}
+
+function renderBoolean(value: unknown): React.ReactElement {
+    return (
+        <div className="px-1 flex items-center">
+            <BooleanSwitch value={!!value}
+                           size="small"
+                           disabled />
+        </div>
+    );
+}
+
+function renderDate(property: CollectionPropertyConfig, value: unknown): React.ReactElement {
+    const includeTime = property.mode === "date_time";
+    const formatted = formatDate(value, includeTime);
+
+    return (
+        <Typography variant="body2"
+                    noWrap
+                    className="px-1 tabular-nums">
+            {formatted}
+        </Typography>
+    );
+}
+
+function renderArray(property: CollectionPropertyConfig, value: unknown): React.ReactElement {
+    if (!Array.isArray(value)) {
+        return (
+            <Typography variant="body2"
+                        color="secondary"
+                        className="px-1">
+                —
+            </Typography>
+        );
+    }
+
+    // Array of enum values → row of chips
+    if (property.of?.enum && value.length > 0) {
+        return (
+            <div className="px-1 flex flex-wrap gap-1 overflow-hidden">
+                {value.map((item, i) => {
+                    const resolved = resolveEnumLabel(property.of!.enum, item);
+                    return (
+                        <Chip key={i}
+                              size="smallest"
+                              colorScheme={resolved?.color ? { color: resolved.color, text: "#fff" } : undefined}>
+                            {resolved?.label ?? String(item)}
+                        </Chip>
+                    );
+                })}
+            </div>
+        );
+    }
+
+    // Array of strings → comma-separated
+    if (value.length > 0 && value.every((item) => typeof item === "string")) {
+        return (
+            <Typography variant="body2"
+                        noWrap
+                        className="px-1">
+                {(value as string[]).join(", ")}
+            </Typography>
+        );
+    }
+
+    // Generic array → item count
+    return (
+        <Typography variant="body2"
+                    color="secondary"
+                    className="px-1">
+            {value.length} {value.length === 1 ? "item" : "items"}
+        </Typography>
+    );
+}
+
+function renderMap(value: unknown): React.ReactElement {
+    if (typeof value !== "object" || value === null) {
+        return (
+            <Typography variant="body2"
+                        color="secondary"
+                        className="px-1">
+                —
+            </Typography>
+        );
+    }
+
+    const fieldCount = Object.keys(value as Record<string, unknown>).length;
+    return (
+        <Typography variant="body2"
+                    color="secondary"
+                    className="px-1">
+            {fieldCount} {fieldCount === 1 ? "field" : "fields"}
+        </Typography>
+    );
+}
+
+function renderReference(value: unknown): React.ReactElement {
+    return (
+        <Typography variant="body2"
+                    noWrap
+                    className="px-1">
+            {String(value)}
+        </Typography>
+    );
+}
+
+function renderGeopoint(value: unknown): React.ReactElement {
+    if (isGeoPoint(value)) {
+        return (
+            <Typography variant="body2"
+                        noWrap
+                        className="px-1 tabular-nums">
+                {value.lat.toFixed(6)}, {value.lng.toFixed(6)}
+            </Typography>
+        );
+    }
+
+    return (
+        <Typography variant="body2"
+                    color="secondary"
+                    className="px-1">
+            {String(value)}
+        </Typography>
+    );
+}

package/src/views/CollectionView/index.ts

@@ -0,0 +1,44 @@
+/**
+ * Headless Collection View components.
+ *
+ * Data-agnostic collection rendering — table, card, list, and kanban views
+ * driven entirely by property configurations and callbacks.
+ *
+ * Zero imports from any entity or data layer.
+ *
+ * @module CollectionView
+ */
+
+// Types
+export type {
+    CollectionViewMode,
+    CollectionViewSize,
+    CollectionEnumValueConfig,
+    CollectionPropertyConfig,
+    CollectionDataController,
+    CellRendererProps,
+    CellRendererOverride,
+    CollectionSelectionController,
+    KanbanPropertyOption
+} from "./CollectionViewTypes";
+
+// Components
+export { CollectionView } from "./CollectionView";
+export type { CollectionViewProps } from "./CollectionView";
+
+export { CollectionViewToolbar } from "./CollectionViewToolbar";
+export type { CollectionViewToolbarProps } from "./CollectionViewToolbar";
+
+export { CollectionTableView } from "./CollectionTableView";
+export type { CollectionTableViewProps } from "./CollectionTableView";
+
+export { CollectionCardView } from "./CollectionCardView";
+export type { CollectionCardViewProps } from "./CollectionCardView";
+
+export { CollectionListView } from "./CollectionListView";
+export type { CollectionListViewProps } from "./CollectionListView";
+
+export { CollectionKanbanView } from "./CollectionKanbanView";
+export type { CollectionKanbanViewProps } from "./CollectionKanbanView";
+
+export { DefaultCellRenderer } from "./DefaultCellRenderer";

package/src/views/CollectionView/utils.ts

@@ -0,0 +1,14 @@
+/**
+ * Traverse an object by dot-separated path.
+ * Returns `undefined` if any segment is missing.
+ */
+export function getValueInPath(obj: Record<string, unknown> | undefined, path: string): unknown {
+    if (!obj) return undefined;
+    const parts = path.split(".");
+    let current: unknown = obj;
+    for (const part of parts) {
+        if (current === null || current === undefined || typeof current !== "object") return undefined;
+        current = (current as Record<string, unknown>)[part];
+    }
+    return current;
+}