@rebasepro/plugin-insights 0.2.3 → 0.2.5

package/dist/ui/src/components/VirtualTable/VirtualTableProps.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { FilterFormFieldProps } from "./VirtualTableHeader";
-export type OnRowClickParams<T extends Record<string, any>> = {
+export type OnRowClickParams<T extends Record<string, unknown>> = {
     rowData: T;
     rowIndex: number;
     event: React.SyntheticEvent;
@@ -9,7 +9,7 @@ export type OnRowClickParams<T extends Record<string, any>> = {
  * @see Table
  * @group Components
  */
-export interface VirtualTableProps<T extends Record<string, any>> {
+export interface VirtualTableProps<T extends Record<string, unknown>> {
     /**
      * Array of arbitrary data
      */
@@ -61,12 +61,12 @@ export interface VirtualTableProps<T extends Record<string, any>> {
     /**
      * In case this table should have some filters set by default
      */
-    filter?: VirtualTableFilterValues<any>;
+    filter?: VirtualTableFilterValues<string>;
     /**
      * Callback used when filters are updated
      * @param filter
      */
-    onFilterUpdate?: (filter?: VirtualTableFilterValues<any> | undefined) => void;
+    onFilterUpdate?: (filter?: VirtualTableFilterValues<string> | undefined) => void;
     /**
      * Callback when the table is scrolled
      * @param props
@@ -111,7 +111,7 @@ export interface VirtualTableProps<T extends Record<string, any>> {
      * Callback to create a filter field, displayed in the header as a dropdown
      * @param props
      */
-    createFilterField?: (props: FilterFormFieldProps<any>) => React.ReactNode;
+    createFilterField?: (props: FilterFormFieldProps<unknown>) => React.ReactNode;
     /**
      * Class name applied to the table
      */
@@ -141,9 +141,9 @@ export interface VirtualTableProps<T extends Record<string, any>> {
     /**
      * Extra data passed to the cell renderer
      */
-    extraData?: any;
+    extraData?: unknown;
 }
-export type CellRendererParams<T = any> = {
+export type CellRendererParams<T = unknown> = {
     column: VirtualTableColumn;
     columns: VirtualTableColumn[];
     columnIndex: number;
@@ -153,17 +153,17 @@ export type CellRendererParams<T = any> = {
     isScrolling?: boolean;
     sortableNodeRef?: (node: HTMLElement | null) => void;
     sortableStyle?: React.CSSProperties;
-    sortableAttributes?: Record<string, any>;
+    sortableAttributes?: Record<string, unknown>;
     isDragging?: boolean;
     isDraggable?: boolean;
     frozen?: boolean;
-    extraData?: any;
+    extraData?: unknown;
 };
 /**
  * @see Table
  * @group Components
  */
-export interface VirtualTableColumn<CustomProps = any> {
+export interface VirtualTableColumn<CustomProps = unknown> {
     /**
      * Data key for the cell value, could be "a.b.c"
      */
@@ -233,7 +233,7 @@ export type VirtualTableSort = "asc" | "desc" | undefined;
  * @see Table
  * @group Components
  */
-export type VirtualTableFilterValues<Key extends string> = Partial<Record<Key, [VirtualTableWhereFilterOp, any]>>;
+export type VirtualTableFilterValues<Key extends string> = Partial<Record<Key, [VirtualTableWhereFilterOp, unknown]>>;
 /**
  * Filter conditions in a `Query.where()` clause are specified using the
  * strings `<`, `<=`, `==`, `>=`, `>`, `array-contains`, `in`, and `array-contains-any`.

package/dist/ui/src/components/VirtualTable/VirtualTableRow.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { VirtualTableRowProps } from "./types";
-export declare const VirtualTableRow: React.NamedExoticComponent<VirtualTableRowProps<any>>;
+export declare const VirtualTableRow: React.NamedExoticComponent<VirtualTableRowProps<Record<string, unknown>>>;

package/dist/ui/src/components/VirtualTable/types.d.ts

@@ -1,12 +1,12 @@
 import React from "react";
 import { CellRendererParams, OnRowClickParams, OnVirtualTableColumnResizeParams, VirtualTableColumn, VirtualTableFilterValues, VirtualTableWhereFilterOp } from "./VirtualTableProps";
 import { FilterFormFieldProps } from "./VirtualTableHeader";
-export type VirtualTableRowProps<T> = {
-    style: any;
+export type VirtualTableRowProps<T extends Record<string, unknown>> = {
+    style: React.CSSProperties;
     rowHeight: number;
     rowData: T;
     rowIndex: number;
-    onRowClick?: (props: OnRowClickParams<any>) => void;
+    onRowClick?: (props: OnRowClickParams<Record<string, unknown>>) => void;
     children: React.ReactNode[];
     columns: VirtualTableColumn[];
     hoverRow?: boolean;
@@ -19,20 +19,20 @@ export type VirtualTableContextProps<T> = {
     columns: VirtualTableColumn[];
     cellRenderer: React.ComponentType<CellRendererParams<T>>;
     currentSort: "asc" | "desc" | undefined;
-    filter?: VirtualTableFilterValues<any>;
-    onRowClick?: (props: OnRowClickParams<any>) => void;
-    onColumnSort: (key: string) => any;
+    filter?: VirtualTableFilterValues<string>;
+    onRowClick?: (props: OnRowClickParams<Record<string, unknown>>) => void;
+    onColumnSort: (key: string) => void;
     onColumnResize: (params: OnVirtualTableColumnResizeParams) => void;
     onColumnResizeEnd: (params: OnVirtualTableColumnResizeParams) => void;
-    onFilterUpdate: (column: VirtualTableColumn, filterForProperty?: [VirtualTableWhereFilterOp, any]) => void;
+    onFilterUpdate: (column: VirtualTableColumn, filterForProperty?: [VirtualTableWhereFilterOp, unknown]) => void;
     sortByProperty?: string;
     customView?: React.ReactNode;
     hoverRow: boolean;
-    createFilterField?: (props: FilterFormFieldProps<any>) => React.ReactNode;
+    createFilterField?: (props: FilterFormFieldProps<unknown>) => React.ReactNode;
     rowClassName?: (rowData: T) => string | undefined;
     endAdornment?: React.ReactNode;
     AddColumnComponent?: React.ComponentType;
     onColumnsOrderChange?: (columns: VirtualTableColumn[]) => void;
     draggingColumnId?: string | null;
-    extraData?: Record<string, any>;
+    extraData?: unknown;
 };

package/dist/ui/src/hooks/useDebounceCallback.d.ts

@@ -1 +1 @@
-export declare function useDebounceCallback<T extends (...args: any[]) => any>(callback?: T, delay?: number): T;
+export declare function useDebounceCallback<T extends (...args: any[]) => unknown>(callback?: T, delay?: number): T;

package/dist/ui/src/util/debounce.d.ts

@@ -1,7 +1,7 @@
 /**
  * @ignore
  */
-export declare function debounce<T extends (...args: any[]) => any>(func: T, wait?: number): T & Cancelable;
+export declare function debounce<T extends (...args: any[]) => unknown>(func: T, wait?: number): T & Cancelable;
 /**
  * @ignore
  */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/plugin-insights",
   "type": "module",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -16,8 +16,9 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@rebasepro/core": "0.2.3",
-    "@rebasepro/types": "0.2.3"
+    "@rebasepro/types": "0.2.5",
+    "@rebasepro/ui": "0.2.5",
+    "@rebasepro/core": "0.2.5"
   },
   "peerDependencies": {
     "react": ">=19.0.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/src/engine/InsightsCache.test.ts

@@ -0,0 +1,56 @@
+import { InsightsCache } from "./InsightsCache";
+import type { InsightDataResult } from "../types";
+
+describe("InsightsCache", () => {
+    it("should set and get values from cache", () => {
+        const cache = new InsightsCache();
+        const data: InsightDataResult = {
+            data: [{ count: 10 }],
+            columns: ["count"]
+        };
+        cache.set("query_key", data);
+        expect(cache.get("query_key")).toEqual(data);
+    });
+
+    it("should return null for expired keys", () => {
+        const cache = new InsightsCache(-1); // -1ms TTL to force immediate expiry
+        const data: InsightDataResult = {
+            data: [{ count: 10 }],
+            columns: ["count"]
+        };
+        cache.set("query_key", data);
+        // Expired immediately
+        expect(cache.get("query_key")).toBeNull();
+    });
+
+    it("should manage inflight requests", () => {
+        const cache = new InsightsCache();
+        const promise = Promise.resolve({
+            data: [],
+            columns: []
+        });
+        expect(cache.getInflight("query_key")).toBeNull();
+        
+        cache.setInflight("query_key", promise);
+        expect(cache.getInflight("query_key")).toBe(promise);
+
+        // Setting a result should remove the inflight reference
+        const data: InsightDataResult = { data: [], columns: [] };
+        cache.set("query_key", data);
+        expect(cache.getInflight("query_key")).toBeNull();
+    });
+
+    it("should invalidate entries", () => {
+        const cache = new InsightsCache();
+        const data: InsightDataResult = { data: [], columns: [] };
+        cache.set("key_1", data);
+        cache.set("key_2", data);
+
+        cache.invalidate("key_1");
+        expect(cache.get("key_1")).toBeNull();
+        expect(cache.get("key_2")).toEqual(data);
+
+        cache.invalidate();
+        expect(cache.get("key_2")).toBeNull();
+    });
+});

package/src/engine/useInsightsData.ts

@@ -83,6 +83,7 @@ export function useInsightsData(
                 }
             })
             .catch((err) => {
+                cache.invalidate(cacheKey);
                 if (!cancelled) {
                     setError(err instanceof Error ? err : new Error(String(err)));
                 }

package/dist/core/src/hooks/useValidateAuthenticator.d.ts

@@ -1,21 +0,0 @@
-import { AuthController, Authenticator, RebaseData, StorageSource, User } from "@rebasepro/types";
-/**
- * This hook is used internally for validating an authenticator.
- *
- * @param authController
- * @param authentication
- * @param storageSource
- * @param data
- */
-export declare function useValidateAuthenticator<USER extends User = any>({ disabled, authController, authenticator, storageSource, data }: {
-    disabled?: boolean;
-    authController: AuthController<USER>;
-    authenticator?: boolean | Authenticator<USER>;
-    data: RebaseData;
-    storageSource: StorageSource;
-}): {
-    canAccessMainView: boolean;
-    authLoading: boolean;
-    notAllowedError: any;
-    authVerified: boolean;
-};

package/dist/core/src/util/icon_synonyms.d.ts

@@ -1 +0,0 @@
-export declare const iconSynonyms: Record<string, string>;

package/dist/core/src/util/useTraceUpdate.d.ts

@@ -1,2 +0,0 @@
-export declare function printChanged(props: any, prev: any, path?: string | undefined, depth?: number | undefined, maxDepth?: number | undefined): void;
-export declare function useTraceUpdate(props: any, maxDepth?: number): void;

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

@@ -1,22 +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;
-    /**
-     * Permissions related to editing the collections
-     */
-    config?: {
-        createCollections?: boolean;
-        editCollections?: boolean | "own";
-        deleteCollections?: boolean | "own";
-    };
-};