@object-ui/plugin-dashboard 3.1.5 → 3.3.1

package/src/MetricCard.tsx

@@ -1,82 +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 } 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;
-}
-
-/**
- * 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,
-  ...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>
-        <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,76 +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 } 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 };
-}
-
-export const MetricWidget = ({
-  label,
-  value,
-  trend,
-  icon,
-  className,
-  description,
-  ...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>
-        <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/ObjectPivotTable.tsx

@@ -1,160 +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 } from 'react';
-import { useDataScope, SchemaRendererContext } from '@object-ui/react';
-import { extractRecords } from '@object-ui/core';
-import { Skeleton, cn } from '@object-ui/components';
-import { PivotTable } from './PivotTable';
-import type { PivotTableSchema } from '@object-ui/types';
-
-export interface ObjectPivotTableProps {
-  schema: PivotTableSchema & {
-    objectName?: string;
-    dataProvider?: { provider: string; object?: string };
-    bind?: string;
-    filter?: any;
-  };
-  dataSource?: any;
-  className?: string;
-}
-
-/**
- * ObjectPivotTable — Async-aware wrapper around PivotTable.
- *
- * When `objectName` is provided and a `dataSource` is available via context
- * or props, fetches records automatically and passes them to PivotTable.
- *
- * Lifecycle states:
- * - **Loading** → skeleton placeholder
- * - **Error** → error message
- * - **Empty** → friendly "No data available" (delegated to PivotTable)
- * - **Data** → PivotTable with fetched rows
- */
-export const ObjectPivotTable: React.FC<ObjectPivotTableProps> = ({ 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('[ObjectPivotTable] 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 : [];
-
-  // Loading skeleton
-  if (loading && finalData.length === 0) {
-    return (
-      <div className={cn('overflow-auto', className)} data-testid="pivot-loading">
-        {schema.title && (
-          <h3 className="text-sm font-semibold mb-2">{schema.title}</h3>
-        )}
-        <div className="space-y-2 p-2">
-          <div className="flex gap-2">
-            <Skeleton className="h-6 w-24" />
-            <Skeleton className="h-6 w-20" />
-            <Skeleton className="h-6 w-20" />
-            <Skeleton className="h-6 w-20" />
-          </div>
-          {[1, 2, 3].map((i) => (
-            <div key={i} className="flex gap-2">
-              <Skeleton className="h-5 w-24" />
-              <Skeleton className="h-5 w-20" />
-              <Skeleton className="h-5 w-20" />
-              <Skeleton className="h-5 w-20" />
-            </div>
-          ))}
-        </div>
-      </div>
-    );
-  }
-
-  // Error state
-  if (error) {
-    return (
-      <div className={cn('overflow-auto', className)} data-testid="pivot-error">
-        {schema.title && (
-          <h3 className="text-sm font-semibold mb-2">{schema.title}</h3>
-        )}
-        <div className="flex flex-col items-center justify-center py-8 text-destructive" data-testid="pivot-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)}>
-        {schema.title && (
-          <h3 className="text-sm font-semibold mb-2">{schema.title}</h3>
-        )}
-        <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>
-    );
-  }
-
-  // Delegate to PivotTable with resolved data
-  const finalSchema: PivotTableSchema = {
-    ...schema,
-    data: finalData,
-  };
-
-  return <PivotTable schema={finalSchema} className={className} />;
-};