@rebasepro/ui 0.10.0 → 0.10.1-canary.14e53ae

package/dist/views/CollectionView/resolveTitleProperty.d.ts

@@ -0,0 +1,11 @@
+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 declare function resolveTitlePropertyKey(order: string[], properties: Record<string, CollectionPropertyConfig>, idProperty: string, titleProperty?: string): string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/ui",
   "type": "module",
-  "version": "0.10.0",
+  "version": "0.10.1-canary.14e53ae",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"

package/src/components/Alert.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { cls } from "../util";
+import { AlertCircleIcon, AlertTriangleIcon, CheckCircleIcon, InfoIcon, XIcon } from "../icons";
 
 export interface AlertProps {
     children: React.ReactNode;
@@ -15,27 +16,61 @@ export interface AlertProps {
 const getSizeClasses = (size: "small" | "medium" | "large") => {
     switch (size) {
         case "small":
-            return "px-4 py-1";
+            return "px-3 py-1.5 text-xs gap-2 rounded-md";
         case "large":
-            return "px-4 py-4";
+            return "px-4 py-3.5 text-sm gap-3 rounded-lg";
         case "medium":
         default:
-            return "px-4 py-2";
+            return "px-3.5 py-2.5 text-sm gap-2.5 rounded-lg";
     }
 }
+
+const getIconSize = (size: "small" | "medium" | "large") => size === "small" ? 16 : 18;
+
 const getColorClasses = (severity: string) => {
     switch (severity) {
         case "error":
-            return "bg-red-50 dark:bg-red-800 dark:text-red-100 text-red-900 border-l-[3px] border-l-red-500";
+            return "bg-red-500/8 dark:bg-red-500/12 text-red-800 dark:text-red-200 border border-red-500/20 dark:border-red-500/25";
+        case "warning":
+            return "bg-amber-500/8 dark:bg-amber-500/12 text-amber-800 dark:text-amber-200 border border-amber-500/20 dark:border-amber-500/25";
+        case "info":
+            return "bg-blue-500/8 dark:bg-blue-500/12 text-blue-800 dark:text-blue-200 border border-blue-500/20 dark:border-blue-500/25";
+        case "success":
+            return "bg-emerald-500/8 dark:bg-emerald-500/12 text-emerald-800 dark:text-emerald-200 border border-emerald-500/20 dark:border-emerald-500/25";
+        case "base":
+        default:
+            return "bg-surface-accent-500/8 dark:bg-surface-accent-400/10 text-surface-accent-800 dark:text-surface-accent-100 border border-surface-accent-500/15 dark:border-surface-accent-400/20";
+    }
+};
+
+const getIconColor = (severity: string) => {
+    switch (severity) {
+        case "error":
+            return "text-red-500 dark:text-red-400";
         case "warning":
-            return "bg-amber-50 dark:bg-amber-800 dark:text-amber-100 text-amber-900 border-l-[3px] border-l-amber-500";
+            return "text-amber-500 dark:text-amber-400";
         case "info":
-            return "bg-blue-100 dark:bg-blue-800 dark:text-blue-100 text-blue-900 border-l-[3px] border-l-blue-500";
+            return "text-blue-500 dark:text-blue-400";
         case "success":
-            return "bg-emerald-50 dark:bg-emerald-800 dark:text-emerald-100 text-emerald-900 border-l-[3px] border-l-emerald-500";
+            return "text-emerald-500 dark:text-emerald-400";
         case "base":
         default:
-            return "bg-surface-accent-50 dark:bg-surface-accent-800 dark:text-white text-surface-accent-900 border-l-[3px] border-l-surface-accent-400";
+            return "text-surface-accent-500 dark:text-surface-accent-400";
+    }
+};
+
+const getIcon = (severity: string, size: number, className: string) => {
+    switch (severity) {
+        case "error":
+            return <AlertCircleIcon size={size} className={className}/>;
+        case "warning":
+            return <AlertTriangleIcon size={size} className={className}/>;
+        case "success":
+            return <CheckCircleIcon size={size} className={className}/>;
+        case "info":
+        case "base":
+        default:
+            return <InfoIcon size={size} className={className}/>;
     }
 };
 
@@ -50,6 +85,7 @@ export const Alert: React.FC<AlertProps> = ({
                                                 style
                                             }) => {
     const classes = getColorClasses(color);
+    const iconSize = getIconSize(size);
 
     return (
         <div
@@ -57,19 +93,26 @@ export const Alert: React.FC<AlertProps> = ({
             className={cls(
                 getSizeClasses(size),
                 "w-full",
-                "font-medium",
-                "rounded-lg flex items-center gap-2",
+                "font-medium leading-snug",
+                "flex items-start",
                 classes,
                 outerClassName)}>
-            <div className={cls("grow", className)}>{children}</div>
+            <span className={cls("shrink-0 mt-px", getIconColor(color))}>
+                {getIcon(color, iconSize, "")}
+            </span>
+            <div className={cls("grow min-w-0 self-center", className)}>{children}</div>
+            {action}
             {onDismiss && (
                 <button
-                    className="text-surface-accent-400 hover:text-surface-accent-600 dark:text-surface-accent-500 dark:hover:text-surface-accent-400"
+                    type="button"
+                    aria-label="Dismiss"
+                    className={cls(
+                        "shrink-0 rounded p-0.5 opacity-60 transition-opacity hover:opacity-100",
+                        "focus:outline-none focus-visible:ring-2 focus-visible:ring-current/40")}
                     onClick={onDismiss}>
-                    &times;
+                    <XIcon size={iconSize - 2}/>
                 </button>
             )}
-            {action}
         </div>
     );
 };

package/src/views/CollectionView/CollectionCardView.tsx

@@ -14,6 +14,7 @@ import type {
     CollectionViewSize,
     CollectionSelectionController,
 } from "./CollectionViewTypes";
+import { resolveTitlePropertyKey } from "./resolveTitleProperty";
 
 import { getValueInPath } from "./utils";
 
@@ -66,16 +67,10 @@ export function CollectionCardView<T extends Record<string, unknown> = Record<st
     );
 
     // ── Resolve title property ───────────────────────────────────────
-    const titlePropertyKey = useMemo(() => {
-        if (titleProperty) return titleProperty;
-        for (const key of order) {
-            const prop = properties[key];
-            if (prop && prop.type === "string" && !prop.hideFromCollection && !prop.storage) {
-                return key;
-            }
-        }
-        return idProperty;
-    }, [titleProperty, order, properties, idProperty]);
+    const titlePropertyKey = useMemo(
+        () => resolveTitlePropertyKey(order, properties, idProperty, titleProperty),
+        [titleProperty, order, properties, idProperty]
+    );
 
     // ── Resolve image property ───────────────────────────────────────
     const imageProperty = useMemo(() => {

package/src/views/CollectionView/CollectionKanbanView.tsx

@@ -14,6 +14,7 @@ import type {
     CollectionSelectionController,
     CollectionEnumValueConfig,
 } from "./CollectionViewTypes";
+import { resolveTitlePropertyKey } from "./resolveTitleProperty";
 
 import { getValueInPath } from "./utils";
 
@@ -107,16 +108,10 @@ export function CollectionKanbanView<T extends Record<string, unknown> = Record<
     }, [properties, kanbanProperty, columns]);
 
     // ── Resolve title property ───────────────────────────────────────
-    const titlePropertyKey = useMemo(() => {
-        if (titleProperty) return titleProperty;
-        for (const key of order) {
-            const prop = properties[key];
-            if (prop && prop.type === "string" && !prop.hideFromCollection && !prop.storage) {
-                return key;
-            }
-        }
-        return idProperty;
-    }, [titleProperty, order, properties, idProperty]);
+    const titlePropertyKey = useMemo(
+        () => resolveTitlePropertyKey(order, properties, idProperty, titleProperty),
+        [titleProperty, order, properties, idProperty]
+    );
 
     // ── Preview properties (up to 2) ─────────────────────────────────
     const previewProperties = useMemo(() => {

package/src/views/CollectionView/CollectionListView.tsx

@@ -12,6 +12,7 @@ import type {
     CollectionViewSize,
     CollectionSelectionController,
 } from "./CollectionViewTypes";
+import { resolveTitlePropertyKey } from "./resolveTitleProperty";
 
 import { getValueInPath } from "./utils";
 
@@ -64,16 +65,10 @@ export function CollectionListView<T extends Record<string, unknown> = Record<st
     );
 
     // ── Resolve title property ───────────────────────────────────────
-    const titlePropertyKey = useMemo(() => {
-        if (titleProperty) return titleProperty;
-        for (const key of order) {
-            const prop = properties[key];
-            if (prop && prop.type === "string" && !prop.hideFromCollection && !prop.storage) {
-                return key;
-            }
-        }
-        return idProperty;
-    }, [titleProperty, order, properties, idProperty]);
+    const titlePropertyKey = useMemo(
+        () => resolveTitlePropertyKey(order, properties, idProperty, titleProperty),
+        [titleProperty, order, properties, idProperty]
+    );
 
     // ── Subtitle properties (up to 2) ────────────────────────────────
     const subtitleProperties = useMemo(() => {

package/src/views/CollectionView/resolveTitleProperty.ts

@@ -0,0 +1,52 @@
+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/ListView.tsx

@@ -240,7 +240,7 @@ export function ListView<T>({
                                     {renderRow({
                                         item,
                                         index: actualIndex,
-                                        style: { height: estimatedRowHeight },
+                                        style: { height: estimatedRowHeight, overflow: "hidden" },
                                         className: cls(
                                             !isLast && "border-b",
                                             !isLast && borderMixinClass