@rebasepro/plugin-insights 0.3.0 → 0.5.0

package/src/components/InsightWidget.tsx

@@ -1,14 +1,36 @@
 import React from "react";
-import type { InsightDefinition, DataRow } from "../types";
+import type { InsightDefinition, DataRow, ScorecardConfig } from "../types";
 import { useInsightsData } from "../engine/useInsightsData";
 import { InsightsScorecardView } from "./InsightsScorecardView";
 import { InsightWidgetSkeleton } from "./InsightWidgetSkeleton";
 
+/**
+ * Compute a deterministic fixed height for a standard scorecard based
+ * on which optional elements the config declares.  This eliminates
+ * layout shift between skeleton and loaded states.
+ *
+ * Breakdown (non-compact, non-small):
+ *   py-4 padding:     16 + 16 = 32
+ *   title row:        16.5  (text-xs leading-snug)
+ *   mb-2 margin:      8
+ *   value:            30    (text-2xl leading-tight)
+ *   ---
+ *   base:             86.5
+ *   + dateRange:      +16   (14px text + 2px mt-0.5)
+ *   + comparison:     +20   (16px text + 4px mt-1)
+ */
+function computeFixedHeight(config: ScorecardConfig): number {
+    let h = 86.5; // base: padding + title + mb-2 + value
+    if (config.dateRange) h += 16;
+    if (config.comparison) h += 20;
+    return Math.ceil(h);
+}
+
 /**
  * Single insight widget orchestrator.
  *
- * Fetches data via the engine, renders the scorecard visualization,
- * and manages loading/error states.
+ * Wraps skeleton and loaded states in a fixed-height container
+ * (computed from the scorecard config) to prevent layout shift.
  *
  * All theme-awareness is handled via Tailwind `dark:` classes.
  */
@@ -30,14 +52,19 @@ export function InsightWidget({
 }) {
     const { data, loading, error } = useInsightsData(definition, { path, collectionSlug, parentCollectionSlugs });
 
+    // For non-compact, non-embedded standard scorecards, use a fixed height
+    // derived from the config to prevent layout shift between skeleton → loaded.
+    const fixedHeight = (!compact && !embedded) ? computeFixedHeight(definition.scorecard) : undefined;
+
     if (loading) {
-        return <InsightWidgetSkeleton config={definition.scorecard} compact={compact} embedded={embedded} />;
+        return <InsightWidgetSkeleton config={definition.scorecard} compact={compact} embedded={embedded} fixedHeight={fixedHeight} />;
     }
 
     if (error) {
         return (
             <div
                 className={`text-red-500/70 dark:text-red-400/70 text-[0.8125rem] ${embedded ? "px-5 py-4 h-full" : `rounded-lg bg-red-500/5 dark:bg-red-400/5 border border-red-500/10 dark:border-red-400/10 ${compact ? "px-3.5 py-3" : "px-5 py-4"}`}`}
+                style={fixedHeight ? { height: fixedHeight } : undefined}
             >
                 <div className="font-semibold mb-1">{definition.title}</div>
                 <div>{error.message}</div>
@@ -49,6 +76,7 @@ export function InsightWidget({
         return (
             <div
                 className={`text-surface-400 dark:text-surface-500 text-[0.8125rem] ${embedded ? "px-5 py-4 h-full" : `rounded-lg bg-surface-100 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 ${compact ? "px-3.5 py-3" : "px-5 py-4"}`}`}
+                style={fixedHeight ? { height: fixedHeight } : undefined}
             >
                 {definition.title} — No data
             </div>
@@ -62,6 +90,7 @@ export function InsightWidget({
             title={definition.title}
             compact={compact}
             embedded={embedded}
+            fixedHeight={fixedHeight}
         />
     );
 }

package/src/components/InsightWidgetSkeleton.tsx

@@ -21,12 +21,15 @@ export function InsightWidgetSkeleton({
     config,
     compact = false,
     embedded = false,
+    fixedHeight,
 }: {
     /** Scorecard config — used to match optional elements (comparison, dateRange, icon). */
     config: ScorecardConfig;
     compact?: boolean;
     /** When true, skip own border since the parent card provides it. */
     embedded?: boolean;
+    /** Explicit height to prevent layout shift between skeleton → loaded. */
+    fixedHeight?: number;
 }) {
     const hasComparison = Boolean(config.comparison);
     const hasIcon = Boolean(config.icon);
@@ -74,6 +77,7 @@ export function InsightWidgetSkeleton({
         hasIcon={hasIcon}
         hasDateRange={hasDateRange}
         embedded={embedded}
+        fixedHeight={fixedHeight}
     />;
 }
 
@@ -112,11 +116,13 @@ function StandardSkeleton({
     hasIcon,
     hasDateRange,
     embedded,
+    fixedHeight,
 }: {
     hasComparison: boolean;
     hasIcon: boolean;
     hasDateRange: boolean;
     embedded: boolean;
+    fixedHeight?: number;
 }) {
     const containerRef = useRef<HTMLDivElement>(null);
     const [containerWidth, setContainerWidth] = useState<number | null>(null);
@@ -158,7 +164,7 @@ function StandardSkeleton({
         <div
             ref={containerRef}
             className={cls("animate-pulse", baseClass)}
-            style={embedded ? undefined : { minHeight: isSmall ? 68 : 92 }}
+            style={embedded ? undefined : fixedHeight ? { height: fixedHeight } : { minHeight: isSmall ? 68 : 92 }}
         >
             {/* Title row — identical flex structure to InsightsScorecardView */}
             <div className={`flex items-center justify-between ${isSmall ? "mb-1" : "mb-2"}`}>

package/src/components/InsightsScorecardView.tsx

@@ -39,6 +39,7 @@ export function InsightsScorecardView({
     title,
     compact = false,
     embedded = false,
+    fixedHeight,
 }: {
     config: ScorecardConfig;
     data: DataRow;
@@ -46,6 +47,8 @@ export function InsightsScorecardView({
     compact?: boolean;
     /** When true, skip own border/bg since the parent card provides them. */
     embedded?: boolean;
+    /** Explicit height to prevent layout shift between skeleton → loaded. */
+    fixedHeight?: number;
 }) {
     const containerRef = useRef<HTMLDivElement>(null);
     const [containerWidth, setContainerWidth] = useState<number | null>(null);
@@ -124,7 +127,7 @@ export function InsightsScorecardView({
         : cls("rounded-lg flex flex-col min-w-0 bg-transparent border", defaultBorderMixin, isSmall ? "px-3.5 py-3" : "px-5 py-4");
 
     return (
-        <div ref={containerRef} className={baseClass} style={embedded ? undefined : { minHeight: isSmall ? 68 : 92 }}>
+        <div ref={containerRef} className={baseClass} style={embedded ? undefined : fixedHeight ? { height: fixedHeight } : { minHeight: isSmall ? 68 : 92 }}>
             {/* Title row */}
             <div className={`flex items-center justify-between ${isSmall ? "mb-1" : "mb-2"}`}>
                 <div className="flex flex-col min-w-0">

package/dist/types/src/users/roles.d.ts

@@ -1,14 +0,0 @@
-export type Role = {
-    /**
-     * ID of the role
-     */
-    id: string;
-    /**
-     * Name of the role
-     */
-    name: string;
-    /**
-     * If this flag is true, the user can perform any action
-     */
-    isAdmin?: boolean;
-};