@object-ui/plugin-dashboard 3.3.0 → 3.3.1

package/src/MetricCard.tsx

@@ -1,102 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React from 'react';
-import { Card, CardContent, CardHeader, CardTitle } from '@object-ui/components';
-import { cn } from '@object-ui/components';
-import { ArrowDownIcon, ArrowUpIcon, MinusIcon, AlertCircle, Loader2 } from 'lucide-react';
-import * as LucideIcons from 'lucide-react';
-
-/** Resolve an I18nLabel (string or {key, defaultValue}) to a plain string. */
-function resolveLabel(label: string | { key?: string; defaultValue?: string } | undefined): string | undefined {
-  if (label === undefined || label === null) return undefined;
-  if (typeof label === 'string') return label;
-  return label.defaultValue || label.key;
-}
-
-export interface MetricCardProps {
-  title?: string | { key?: string; defaultValue?: string };
-  value: string | number;
-  icon?: string;
-  trend?: 'up' | 'down' | 'neutral';
-  trendValue?: string;
-  description?: string | { key?: string; defaultValue?: string };
-  className?: string;
-  /** When true, the card is in a loading state (fetching data from server). */
-  loading?: boolean;
-  /** Error message from a failed data fetch. When set, the card shows an error state. */
-  error?: string | null;
-}
-
-/**
- * MetricCard - Standalone metric card component for dashboard KPIs
- * Displays a metric value with optional icon, trend indicator, and description
- */
-export const MetricCard: React.FC<MetricCardProps> = ({
-  title,
-  value,
-  icon,
-  trend,
-  trendValue,
-  description,
-  className,
-  loading,
-  error,
-  ...props
-}) => {
-  // Resolve icon from lucide-react
-  const IconComponent = icon && (LucideIcons as any)[icon];
-
-  return (
-    <Card className={cn("h-full", className)} {...props}>
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle className="text-sm font-medium">
-          {resolveLabel(title)}
-        </CardTitle>
-        {IconComponent && (
-          <IconComponent className="h-4 w-4 text-muted-foreground" />
-        )}
-      </CardHeader>
-      <CardContent>
-        {loading ? (
-          <div className="flex items-center gap-2 text-muted-foreground" data-testid="metric-card-loading">
-            <Loader2 className="h-4 w-4 animate-spin" />
-            <span className="text-sm">Loading…</span>
-          </div>
-        ) : error ? (
-          <div className="flex items-center gap-2" data-testid="metric-card-error" role="alert">
-            <AlertCircle className="h-4 w-4 text-destructive shrink-0" />
-            <span className="text-xs text-destructive truncate">{error}</span>
-          </div>
-        ) : (
-          <>
-            <div className="text-2xl font-bold">{value}</div>
-            {(trend || trendValue || description) && (
-              <p className="text-xs text-muted-foreground flex items-center mt-1">
-                {trend && trendValue && (
-                  <span className={cn(
-                    "flex items-center mr-2",
-                    trend === 'up' && "text-green-500",
-                    trend === 'down' && "text-red-500",
-                    trend === 'neutral' && "text-yellow-500"
-                  )}>
-                    {trend === 'up' && <ArrowUpIcon className="h-3 w-3 mr-1" />}
-                    {trend === 'down' && <ArrowDownIcon className="h-3 w-3 mr-1" />}
-                    {trend === 'neutral' && <MinusIcon className="h-3 w-3 mr-1" />}
-                    {trendValue}
-                  </span>
-                )}
-                {resolveLabel(description)}
-              </p>
-            )}
-          </>
-        )}
-      </CardContent>
-    </Card>
-  );
-};

package/src/MetricWidget.tsx

@@ -1,96 +0,0 @@
-import React, { useMemo } from 'react';
-import { Card, CardContent, CardHeader, CardTitle } from '@object-ui/components';
-import { cn } from '@object-ui/components';
-import { ArrowDownIcon, ArrowUpIcon, MinusIcon, AlertCircle, Loader2 } from 'lucide-react';
-import * as LucideIcons from 'lucide-react';
-
-/** Resolve an I18nLabel (string or {key, defaultValue}) to a plain string. */
-function resolveLabel(label: string | { key?: string; defaultValue?: string } | undefined): string | undefined {
-  if (label === undefined || label === null) return undefined;
-  if (typeof label === 'string') return label;
-  return label.defaultValue || label.key;
-}
-
-export interface MetricWidgetProps {
-  label: string | { key?: string; defaultValue?: string };
-  value: string | number;
-  trend?: {
-    value: number;
-    label?: string | { key?: string; defaultValue?: string };
-    direction?: 'up' | 'down' | 'neutral';
-  };
-  icon?: React.ReactNode | string;
-  className?: string;
-  description?: string | { key?: string; defaultValue?: string };
-  /** When true, the widget is in a loading state (fetching data from server). */
-  loading?: boolean;
-  /** Error message from a failed data fetch. When set, the widget shows an error state. */
-  error?: string | null;
-}
-
-export const MetricWidget = ({
-  label,
-  value,
-  trend,
-  icon,
-  className,
-  description,
-  loading,
-  error,
-  ...props
-}: MetricWidgetProps) => {
-  // Resolve icon if it's a string
-  const resolvedIcon = useMemo(() => {
-    if (typeof icon === 'string') {
-        const IconComponent = (LucideIcons as any)[icon];
-        return IconComponent ? <IconComponent className="h-4 w-4 text-muted-foreground" /> : null;
-    }
-    return icon;
-  }, [icon]);
-
-  return (
-    <Card className={cn("h-full overflow-hidden", className)} {...props}>
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle className="text-sm font-medium truncate">
-          {resolveLabel(label)}
-        </CardTitle>
-        {resolvedIcon && <div className="h-4 w-4 text-muted-foreground shrink-0">{resolvedIcon}</div>}
-      </CardHeader>
-      <CardContent>
-        {loading ? (
-          <div className="flex items-center gap-2 text-muted-foreground" data-testid="metric-loading">
-            <Loader2 className="h-4 w-4 animate-spin" />
-            <span className="text-sm">Loading…</span>
-          </div>
-        ) : error ? (
-          <div className="flex items-center gap-2" data-testid="metric-error" role="alert">
-            <AlertCircle className="h-4 w-4 text-destructive shrink-0" />
-            <span className="text-xs text-destructive truncate">{error}</span>
-          </div>
-        ) : (
-          <>
-            <div className="text-2xl font-bold truncate">{value}</div>
-            {(trend || description) && (
-              <p className="text-xs text-muted-foreground flex items-center mt-1 truncate">
-                {trend && (
-                  <span className={cn(
-                    "flex items-center mr-2 shrink-0",
-                    trend.direction === 'up' && "text-green-500",
-                    trend.direction === 'down' && "text-red-500",
-                    trend.direction === 'neutral' && "text-yellow-500"
-                  )}>
-                    {trend.direction === 'up' && <ArrowUpIcon className="h-3 w-3 mr-1" />}
-                    {trend.direction === 'down' && <ArrowDownIcon className="h-3 w-3 mr-1" />}
-                    {trend.direction === 'neutral' && <MinusIcon className="h-3 w-3 mr-1" />}
-                    {trend.value}%
-                  </span>
-                )}
-                <span className="truncate">{resolveLabel(description) || resolveLabel(trend?.label)}</span>
-              </p>
-            )}
-          </>
-        )}
-      </CardContent>
-    </Card>
-  );
-};

package/src/ObjectDataTable.tsx

@@ -1,226 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React, { useState, useEffect, useContext, useMemo } from 'react';
-import { useDataScope, SchemaRendererContext, SchemaRenderer } from '@object-ui/react';
-import { extractRecords } from '@object-ui/core';
-import { Skeleton, cn } from '@object-ui/components';
-
-export interface ObjectDataTableProps {
-  schema: {
-    type: string;
-    objectName?: string;
-    dataProvider?: { provider: string; object?: string };
-    bind?: string;
-    filter?: any;
-    data?: any[];
-    columns?: any[];
-    searchable?: boolean;
-    pagination?: boolean;
-    className?: string;
-    [key: string]: any;
-  };
-  dataSource?: any;
-  className?: string;
-}
-
-/** A column definition after normalization, with header and accessor key. */
-interface NormalizedColumn {
-  header: string;
-  accessorKey: string;
-  [key: string]: any;
-}
-
-/**
- * Normalize columns to support both string[] shorthand and object[] formats.
- *
- * - `string[]` entries are converted to `{ header, accessorKey }` objects,
- *   handling both snake_case and camelCase for header generation.
- * - Object entries are returned as-is.
- */
-export function normalizeColumns(columns: (string | Record<string, any>)[]): NormalizedColumn[] {
-  return columns.map((col) => {
-    if (typeof col === 'string') {
-      return {
-        header: col
-          // snake_case → spaces
-          .replace(/_/g, ' ')
-          // camelCase → spaces before uppercase letters
-          .replace(/([A-Z])/g, ' $1')
-          .trim()
-          // Title Case each word
-          .replace(/\b\w/g, (c: string) => c.toUpperCase()),
-        accessorKey: col,
-      };
-    }
-    return col;
-  });
-}
-
-/**
- * ObjectDataTable — Async-aware wrapper for data-table.
- *
- * When `objectName` is provided and a `dataSource` is available via context
- * or props, fetches records automatically and passes them to the registered
- * `data-table` component via SchemaRenderer.
- *
- * Also auto-derives columns from fetched data keys when no explicit columns
- * are configured.
- *
- * Lifecycle states:
- * - **Loading** → skeleton placeholder
- * - **Error** → error message
- * - **Empty** → friendly "No data available" message
- * - **Data** → data-table with fetched rows
- */
-export const ObjectDataTable: React.FC<ObjectDataTableProps> = ({ schema, dataSource: propDataSource, className }) => {
-  const context = useContext(SchemaRendererContext);
-  const dataSource = propDataSource || context?.dataSource;
-  const boundData = useDataScope(schema.bind);
-
-  const [fetchedData, setFetchedData] = useState<any[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    let isMounted = true;
-
-    const fetchData = async () => {
-      if (!dataSource || !schema.objectName) return;
-      if (isMounted) {
-        setLoading(true);
-        setError(null);
-      }
-      try {
-        let data: any[];
-
-        if (typeof dataSource.find === 'function') {
-          const results = await dataSource.find(schema.objectName, {
-            $filter: schema.filter,
-          });
-          data = extractRecords(results);
-        } else {
-          return;
-        }
-
-        if (isMounted) {
-          setFetchedData(data);
-        }
-      } catch (e) {
-        console.error('[ObjectDataTable] Fetch error:', e);
-        if (isMounted) {
-          setError(e instanceof Error ? e.message : 'Failed to load data');
-        }
-      } finally {
-        if (isMounted) setLoading(false);
-      }
-    };
-
-    if (schema.objectName && !boundData && (!schema.data || schema.data.length === 0)) {
-      fetchData();
-    }
-
-    return () => { isMounted = false; };
-  }, [schema.objectName, dataSource, boundData, schema.data, schema.filter]);
-
-  // Resolve data: bound data > static schema data > fetched data
-  const rawData = boundData || schema.data || fetchedData;
-  const finalData = Array.isArray(rawData) ? rawData : [];
-
-  // Auto-derive columns from data keys when none are provided
-  const derivedColumns = useMemo(() => {
-    if (schema.columns && schema.columns.length > 0) {
-      return normalizeColumns(schema.columns);
-    }
-    if (finalData.length === 0) return [];
-    // Exclude internal/private fields (prefixed with '_') from auto-derived columns
-    const keys = Object.keys(finalData[0]).filter(k => !k.startsWith('_'));
-    // Convert camelCase keys to human-readable headers (e.g. firstName → First Name)
-    return keys.map(k => ({
-      header: k.charAt(0).toUpperCase() + k.slice(1).replace(/([A-Z])/g, ' $1'),
-      accessorKey: k,
-    }));
-  }, [schema.columns, finalData]);
-
-  // Loading skeleton
-  if (loading && finalData.length === 0) {
-    return (
-      <div className={cn('overflow-auto', className)} data-testid="table-loading">
-        <div className="space-y-2 p-2">
-          <div className="flex gap-2">
-            <Skeleton className="h-6 w-1/4" />
-            <Skeleton className="h-6 w-1/4" />
-            <Skeleton className="h-6 w-1/4" />
-            <Skeleton className="h-6 w-1/4" />
-          </div>
-          {[1, 2, 3, 4].map((i) => (
-            <div key={i} className="flex gap-2">
-              <Skeleton className="h-5 w-1/4" />
-              <Skeleton className="h-5 w-1/4" />
-              <Skeleton className="h-5 w-1/4" />
-              <Skeleton className="h-5 w-1/4" />
-            </div>
-          ))}
-        </div>
-      </div>
-    );
-  }
-
-  // Error state
-  if (error) {
-    return (
-      <div className={cn('overflow-auto', className)} data-testid="table-error">
-        <div className="flex flex-col items-center justify-center py-8 text-destructive" data-testid="table-error-message">
-          <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 mb-2 opacity-60" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-            <circle cx="12" cy="12" r="10" />
-            <line x1="12" y1="8" x2="12" y2="12" />
-            <line x1="12" y1="16" x2="12.01" y2="16" />
-          </svg>
-          <p className="text-xs">{error}</p>
-        </div>
-      </div>
-    );
-  }
-
-  // No data source available but objectName configured
-  if (!dataSource && schema.objectName && finalData.length === 0) {
-    return (
-      <div className={cn('overflow-auto', className)}>
-        <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
-          <p className="text-xs">No data source available for &ldquo;{schema.objectName}&rdquo;</p>
-        </div>
-      </div>
-    );
-  }
-
-  // Empty state
-  if (finalData.length === 0) {
-    return (
-      <div className={cn('overflow-auto', className)} data-testid="table-empty-state">
-        <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
-          <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 mb-2 opacity-40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-            <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
-            <line x1="3" y1="9" x2="21" y2="9" />
-            <line x1="9" y1="21" x2="9" y2="9" />
-          </svg>
-          <p className="text-xs">No data available</p>
-        </div>
-      </div>
-    );
-  }
-
-  // Delegate to data-table via SchemaRenderer
-  const tableSchema = {
-    ...schema,
-    type: 'data-table',
-    data: finalData,
-    columns: derivedColumns,
-  };
-
-  return <SchemaRenderer schema={tableSchema} className={className} />;
-};

package/src/ObjectMetricWidget.tsx

@@ -1,159 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React, { useState, useEffect, useContext, useCallback } from 'react';
-import { SchemaRendererContext } from '@object-ui/react';
-import { MetricWidget } from './MetricWidget';
-
-/**
- * ObjectMetricWidget — Data-bound metric widget.
- *
- * When a metric widget has an `object` binding and a `dataSource` is available,
- * this component attempts to fetch the metric value from the server using
- * aggregation. If the fetch fails, it shows an error state instead of
- * silently displaying stale/hardcoded data.
- *
- * Lifecycle states:
- * - **Loading** → spinner placeholder
- * - **Error** → error message (API failure is surfaced, not hidden)
- * - **Data** → actual metric value from server
- * - **Fallback** → when no dataSource is available, renders the static
- *   `options.value` as provided in the widget config (demo/fallback mode)
- */
-export interface ObjectMetricWidgetProps {
-  /** The object/resource name to query */
-  objectName: string;
-  /** Aggregation config (field, function, groupBy) */
-  aggregate?: { field: string; function: string; groupBy?: string };
-  /** Filter conditions */
-  filter?: any;
-  /** Static label for the metric */
-  label: string | { key?: string; defaultValue?: string };
-  /** Fallback static value (used when no dataSource or in demo mode) */
-  fallbackValue?: string | number;
-  /** Trend info */
-  trend?: {
-    value: number;
-    label?: string | { key?: string; defaultValue?: string };
-    direction?: 'up' | 'down' | 'neutral';
-  };
-  /** Icon name or ReactNode */
-  icon?: React.ReactNode | string;
-  /** Additional CSS class */
-  className?: string;
-  /** Description */
-  description?: string | { key?: string; defaultValue?: string };
-  /** External data source (overrides context) */
-  dataSource?: any;
-}
-
-export const ObjectMetricWidget: React.FC<ObjectMetricWidgetProps> = ({
-  objectName,
-  aggregate,
-  filter,
-  label,
-  fallbackValue,
-  trend,
-  icon,
-  className,
-  description,
-  dataSource: propDataSource,
-}) => {
-  const context = useContext(SchemaRendererContext);
-  const dataSource = propDataSource || context?.dataSource;
-
-  const [fetchedValue, setFetchedValue] = useState<string | number | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const fetchMetric = useCallback(async (ds: any, mounted: { current: boolean }) => {
-    if (!ds || !objectName) return;
-    if (mounted.current) {
-      setLoading(true);
-      setError(null);
-    }
-
-    try {
-      let value: string | number;
-
-      if (aggregate && typeof ds.aggregate === 'function') {
-        // Server-side aggregation
-        const results = await ds.aggregate(objectName, {
-          field: aggregate.field,
-          function: aggregate.function,
-          groupBy: aggregate.groupBy || '_all',
-          filter,
-        });
-        const data = Array.isArray(results) ? results : [];
-
-        if (data.length === 0) {
-          value = 0;
-        } else if (aggregate.function === 'count') {
-          // Sum all count results
-          value = data.reduce((sum: number, r: any) => sum + (Number(r[aggregate.field]) || Number(r.count) || 0), 0);
-        } else {
-          // Take the first result's value
-          value = data[0][aggregate.field] ?? 0;
-        }
-      } else if (typeof ds.find === 'function') {
-        // Fallback: count records
-        const results = await ds.find(objectName, { $filter: filter });
-        const records = Array.isArray(results) ? results : results?.data || results?.records || [];
-        value = records.length;
-      } else {
-        return;
-      }
-
-      if (mounted.current) {
-        setFetchedValue(value);
-      }
-    } catch (e) {
-      console.error('[ObjectMetricWidget] Fetch error:', e);
-      if (mounted.current) {
-        setError(e instanceof Error ? e.message : 'Failed to load metric');
-      }
-    } finally {
-      if (mounted.current) setLoading(false);
-    }
-  }, [objectName, aggregate, filter]);
-
-  useEffect(() => {
-    const mounted = { current: true };
-
-    if (dataSource && objectName) {
-      fetchMetric(dataSource, mounted);
-    } else {
-      // Reset state when dataSource becomes unavailable so we fall back
-      // to the static fallbackValue instead of showing stale server data.
-      setFetchedValue(null);
-      setError(null);
-    }
-
-    return () => { mounted.current = false; };
-  }, [dataSource, objectName, fetchMetric]);
-
-  // Determine the display value:
-  // - If we fetched a value from the server, use it
-  // - If there's no data source, use the fallback (demo/static value)
-  const displayValue = fetchedValue !== null
-    ? fetchedValue
-    : (!dataSource ? (fallbackValue ?? '—') : '—');
-
-  return (
-    <MetricWidget
-      label={label}
-      value={displayValue}
-      trend={trend}
-      icon={icon}
-      className={className}
-      description={description}
-      loading={loading}
-      error={error}
-    />
-  );
-};