@rebasepro/ui 0.17.3 → 0.18.0

package/src/views/CollectionView/DefaultCellRenderer.tsx

@@ -1,404 +0,0 @@
-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

@@ -1,39 +0,0 @@
-/**
- * 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
-//
-// `CollectionView` is the entry point. The per-mode views
-// (table/card/list/kanban), the toolbar and the default cell renderer are
-// internal: `CollectionView` selects and wires them from `mode`, and nothing
-// outside this package consumed them directly. Their prop types stay exported
-// so callers can still type overrides.
-export { CollectionView } from "./CollectionView";
-export type { CollectionViewProps } from "./CollectionView";
-
-export type { CollectionViewToolbarProps } from "./CollectionViewToolbar";
-export type { CollectionTableViewProps } from "./CollectionTableView";
-export type { CollectionCardViewProps } from "./CollectionCardView";
-export type { CollectionListViewProps } from "./CollectionListView";
-export type { CollectionKanbanViewProps } from "./CollectionKanbanView";

package/src/views/CollectionView/resolveTitleProperty.ts

@@ -1,52 +0,0 @@
-import type { CollectionPropertyConfig } from "./CollectionViewTypes";
-
-/**
- * Pick the property that acts as a row's title.
- *
- * Headless mirror of the ranking in `@rebasepro/common`: identifiers are kept
- * out of the title slot structurally (the id property, images, hidden fields),
- * and among what is left a plain text field beats a description, an enum or a
- * relation. Falls back to the id property only when a collection has nothing
- * else to show.
- */
-export function resolveTitlePropertyKey(
-    order: string[],
-    properties: Record<string, CollectionPropertyConfig>,
-    idProperty: string,
-    titleProperty?: string
-): string {
-    if (titleProperty) return titleProperty;
-
-    const SCORE = {
-        RELATION: 10,
-        LONG_TEXT: 20,
-        ENUM: 30,
-        EMAIL: 45,
-        PLAIN_TEXT: 60,
-        NAMED: 100
-    };
-    const titleLikeKeys = new Set(["name", "fullname", "displayname", "title", "label", "heading", "subject", "username", "nickname"]);
-
-    let best: { key: string; score: number } | undefined;
-
-    order.forEach(key => {
-        const property = properties[key];
-        if (!property || property.hideFromCollection) return;
-        if (key === idProperty) return;
-        if (property.storage || property.url === "image") return;
-
-        let score: number;
-        if (property.type === "relation" || property.type === "reference") score = SCORE.RELATION;
-        else if (property.type !== "string") return;
-        else if (property.enum) score = SCORE.ENUM;
-        else if (property.multiline || property.markdown) score = SCORE.LONG_TEXT;
-        else if (property.email) score = SCORE.EMAIL;
-        else if (titleLikeKeys.has(key.toLowerCase().replace(/[^a-z0-9]/g, ""))) score = SCORE.NAMED;
-        else score = SCORE.PLAIN_TEXT;
-
-        if (!best || score > best.score) best = { key,
-score };
-    });
-
-    return best?.key ?? idProperty;
-}

package/src/views/CollectionView/utils.ts

@@ -1,14 +0,0 @@
-/**
- * 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;
-}