@object-ui/plugin-dashboard 0.1.1 → 2.0.0

package/src/DashboardRenderer.tsx

@@ -6,43 +6,131 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { ComponentRegistry } from '@object-ui/core';
 import type { DashboardSchema, DashboardWidgetSchema } from '@object-ui/types';
 import { SchemaRenderer } from '@object-ui/react';
-import { cn } from '@object-ui/components';
+import { cn, Card, CardHeader, CardTitle, CardContent } from '@object-ui/components';
 import { forwardRef } from 'react';
 
+// Color palette for charts
+const CHART_COLORS = [
+  'hsl(var(--chart-1))',
+  'hsl(var(--chart-2))',
+  'hsl(var(--chart-3))',
+  'hsl(var(--chart-4))',
+  'hsl(var(--chart-5))',
+];
+
 export const DashboardRenderer = forwardRef<HTMLDivElement, { schema: DashboardSchema; className?: string; [key: string]: any }>(
-  ({ schema, className, ...props }, ref) => {
-    const columns = schema.columns || 3;
+  ({ schema, className, dataSource, ...props }, ref) => {
+    const columns = schema.columns || 4; // Default to 4 columns for better density
     const gap = schema.gap || 4;
 
-    // Use style to convert gap number to pixels or use tailwind classes if possible
-    // Here using inline style for grid gap which maps to 0.25rem * 4 * gap = gap rem
-    
     return (
-      <div 
-        ref={ref} 
-        className={cn("grid", className)} 
+      <div
+        ref={ref}
+        className={cn("grid auto-rows-min", className)}
         style={{
             gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
             gap: `${gap * 0.25}rem`
         }}
         {...props}
       >
-        {schema.widgets?.map((widget: DashboardWidgetSchema) => (
-            <div 
-                key={widget.id} 
-                className={cn("border rounded-lg p-4 bg-card text-card-foreground shadow-sm")}
-                style={widget.layout ? {
-                    gridColumn: `span ${widget.layout.w}`,
-                    gridRow: `span ${widget.layout.h}`
-                }: undefined}
-            >
-                {widget.title && <h3 className="font-semibold mb-2">{widget.title}</h3>}
-                <SchemaRenderer schema={widget.component} />
-            </div>
-        ))}
+        {schema.widgets?.map((widget: DashboardWidgetSchema) => {
+            // Logic to determine what to render
+            // Supports both Component Schema (widget.component) and Shorthand (widget.type)
+            
+            const getComponentSchema = () => {
+                if (widget.component) return widget.component;
+
+                // Handle Shorthand Registry Mappings
+                const widgetType = (widget as any).type;
+                if (widgetType === 'bar' || widgetType === 'line' || widgetType === 'area' || widgetType === 'pie' || widgetType === 'donut') {
+                    // Extract data from 'data.items' or 'data' array
+                    const dataItems = Array.isArray((widget as any).data) ? (widget as any).data : (widget as any).data?.items || [];
+                    
+                    // Map xField/yField to ChartRenderer expectations
+                    const options = (widget as any).options || {};
+                    const xAxisKey = options.xField || 'name';
+                    const yField = options.yField || 'value';
+                    
+                    return {
+                        type: 'chart',
+                        chartType: widgetType,
+                        data: dataItems,
+                        xAxisKey: xAxisKey,
+                        series: [{ dataKey: yField }],
+                        colors: CHART_COLORS,
+                        className: "h-[300px]" // Enforce height
+                    };
+                }
+
+                if (widgetType === 'table') {
+                    // Map to ObjectGrid
+                    return {
+                        type: 'data-table',
+                        ...(widget as any).options,
+                        data: (widget as any).data?.items || [],
+                        searchable: false, // Simple table for dashboard
+                        pagination: false,
+                        className: "border-0"
+                    };
+                }
+
+                // For generic widgets (like 'metric'), we simply spread the options into the schema
+                // so they appear as top-level props for the component.
+                return {
+                    ...widget,
+                    ...((widget as any).options || {})
+                };
+            };
+            
+            const componentSchema = getComponentSchema();
+
+            // Check if the widget is self-contained (like a Metric Card) to avoid double borders
+            const isSelfContained = (widget as any).type === 'metric';
+
+            if (isSelfContained) {
+                return (
+                    <div 
+                        key={widget.id || widget.title}
+                        className="h-full w-full"
+                        style={widget.layout ? {
+                            gridColumn: `span ${widget.layout.w}`,
+                            gridRow: `span ${widget.layout.h}`
+                        }: undefined}
+                    >
+                         <SchemaRenderer schema={componentSchema} className="h-full w-full" />
+                    </div>
+                );
+            }
+
+            return (
+                <Card 
+                    key={widget.id || widget.title}
+                    className={cn(
+                        "overflow-hidden border-border/50 shadow-sm transition-all hover:shadow-md",
+                        "bg-card/50 backdrop-blur-sm"
+                    )}
+                    style={widget.layout ? {
+                        gridColumn: `span ${widget.layout.w}`,
+                        gridRow: `span ${widget.layout.h}`
+                    }: undefined}
+                >
+                    {widget.title && (
+                        <CardHeader className="pb-2 border-b border-border/40 bg-muted/20">
+                            <CardTitle className="text-base font-medium tracking-tight truncate" title={widget.title}>
+                                {widget.title}
+                            </CardTitle>
+                        </CardHeader>
+                    )}
+                    <CardContent className="p-0">
+                        <div className={cn("h-full w-full", !widget.title ? "p-4" : "p-4")}>
+                            <SchemaRenderer schema={componentSchema} />
+                        </div>
+                    </CardContent>
+                </Card>
+            );
+        })}
       </div>
     );
   }

package/src/MetricCard.tsx

@@ -0,0 +1,75 @@
+/**
+ * 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';
+
+export interface MetricCardProps {
+  title?: string;
+  value: string | number;
+  icon?: string;
+  trend?: 'up' | 'down' | 'neutral';
+  trendValue?: string;
+  description?: 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">
+          {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>
+            )}
+            {description}
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  );
+};

package/src/MetricWidget.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
+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';
 
 export interface MetricWidgetProps {
   label: string;
@@ -11,7 +12,7 @@ export interface MetricWidgetProps {
     label?: string;
     direction?: 'up' | 'down' | 'neutral';
   };
-  icon?: React.ReactNode;
+  icon?: React.ReactNode | string;
   className?: string;
   description?: string;
 }
@@ -25,13 +26,22 @@ export const MetricWidget = ({
   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", className)} {...props}>
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
         <CardTitle className="text-sm font-medium">
           {label}
         </CardTitle>
-        {icon && <div className="h-4 w-4 text-muted-foreground">{icon}</div>}
+        {resolvedIcon && <div className="h-4 w-4 text-muted-foreground">{resolvedIcon}</div>}
       </CardHeader>
       <CardContent>
         <div className="text-2xl font-bold">{value}</div>

package/src/__tests__/DashboardGridLayout.test.tsx

@@ -0,0 +1,199 @@
+/**
+ * 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 { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { DashboardGridLayout } from '../DashboardGridLayout';
+import type { DashboardSchema } from '@object-ui/types';
+
+// Mock localStorage
+const localStorageMock = (() => {
+  let store: Record<string, string> = {};
+  return {
+    getItem: (key: string) => store[key] || null,
+    setItem: (key: string, value: string) => { store[key] = value; },
+    clear: () => { store = {}; },
+    removeItem: (key: string) => { delete store[key]; },
+  };
+})();
+
+Object.defineProperty(window, 'localStorage', { value: localStorageMock });
+
+// Mock react-grid-layout
+vi.mock('react-grid-layout', () => ({
+  Responsive: ({ children }: any) => <div data-testid="grid-layout">{children}</div>,
+  WidthProvider: (Component: any) => Component,
+}));
+
+describe('DashboardGridLayout', () => {
+  beforeEach(() => {
+    localStorageMock.clear();
+  });
+
+  const mockSchema: DashboardSchema = {
+    type: 'dashboard',
+    name: 'test_dashboard',
+    title: 'Test Dashboard',
+    widgets: [
+      {
+        id: 'widget-1',
+        type: 'metric-card',
+        title: 'Total Sales',
+        layout: { x: 0, y: 0, w: 3, h: 2 },
+      },
+      {
+        id: 'widget-2',
+        type: 'bar',
+        title: 'Revenue by Month',
+        layout: { x: 3, y: 0, w: 6, h: 4 },
+      },
+    ],
+  };
+
+  it('should render without crashing', () => {
+    const { container } = render(<DashboardGridLayout schema={mockSchema} />);
+    expect(container).toBeTruthy();
+  });
+
+  it('should render dashboard title', () => {
+    render(<DashboardGridLayout schema={mockSchema} />);
+    expect(screen.getByText('Test Dashboard')).toBeInTheDocument();
+  });
+
+  it('should render all widgets', () => {
+    render(<DashboardGridLayout schema={mockSchema} />);
+    
+    expect(screen.getAllByText('Total Sales').length).toBeGreaterThan(0);
+    expect(screen.getByText('Revenue by Month')).toBeInTheDocument();
+  });
+
+  it('should render edit mode button', () => {
+    render(<DashboardGridLayout schema={mockSchema} />);
+    
+    const editButton = screen.getByRole('button', { name: /edit/i });
+    expect(editButton).toBeInTheDocument();
+  });
+
+  it('should toggle edit mode when edit button is clicked', () => {
+    render(<DashboardGridLayout schema={mockSchema} />);
+    
+    const editButton = screen.getByRole('button', { name: /edit/i });
+    fireEvent.click(editButton);
+    
+    // In edit mode, should show Save and Cancel buttons
+    expect(screen.getByRole('button', { name: /save/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
+  });
+
+  it('should save layout to localStorage when save button is clicked', () => {
+    render(<DashboardGridLayout schema={mockSchema} persistLayoutKey="test-layout" />);
+    
+    const editButton = screen.getByRole('button', { name: /edit/i });
+    fireEvent.click(editButton);
+    
+    const saveButton = screen.getByRole('button', { name: /save/i });
+    fireEvent.click(saveButton);
+    
+    // Check that layout was saved to localStorage
+    const saved = localStorageMock.getItem('test-layout');
+    expect(saved).toBeTruthy();
+  });
+
+  it('should restore layout from localStorage', () => {
+    const savedLayout = {
+      lg: [
+        { i: 'widget-1', x: 0, y: 0, w: 3, h: 2 },
+        { i: 'widget-2', x: 3, y: 0, w: 6, h: 4 },
+      ],
+    };
+    
+    localStorageMock.setItem('test-layout', JSON.stringify(savedLayout));
+    
+    render(<DashboardGridLayout schema={mockSchema} persistLayoutKey="test-layout" />);
+    
+    // Component should render with saved layout
+    expect(screen.getByText('Test Dashboard')).toBeInTheDocument();
+  });
+
+  it('should call onLayoutChange when layout changes', () => {
+    const onLayoutChange = vi.fn();
+    render(<DashboardGridLayout schema={mockSchema} onLayoutChange={onLayoutChange} />);
+    
+    // Trigger layout change (this would normally happen through drag/drop)
+    // In our mock, we can't easily trigger this, but we verify the callback exists
+    expect(onLayoutChange).toBeDefined();
+  });
+
+  it('should cancel edit mode when cancel button is clicked', () => {
+    render(<DashboardGridLayout schema={mockSchema} />);
+    
+    const editButton = screen.getByRole('button', { name: /edit/i });
+    fireEvent.click(editButton);
+    
+    const cancelButton = screen.getByRole('button', { name: /cancel/i });
+    fireEvent.click(cancelButton);
+    
+    // Should exit edit mode
+    expect(screen.getByRole('button', { name: /edit/i })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /save/i })).not.toBeInTheDocument();
+  });
+
+  it('should reset layout when reset button is clicked', () => {
+    render(<DashboardGridLayout schema={mockSchema} />);
+    
+    const editButton = screen.getByRole('button', { name: /edit/i });
+    fireEvent.click(editButton);
+    
+    // Look for reset button (might be in a dropdown or menu)
+    const buttons = screen.getAllByRole('button');
+    const resetButton = buttons.find(btn => btn.textContent?.includes('Reset'));
+    
+    if (resetButton) {
+      fireEvent.click(resetButton);
+    }
+  });
+
+  it('should render grid layout container', () => {
+    render(<DashboardGridLayout schema={mockSchema} />);
+    
+    const gridLayout = screen.getByTestId('grid-layout');
+    expect(gridLayout).toBeInTheDocument();
+  });
+
+  it('should handle empty widgets array', () => {
+    const emptySchema: DashboardSchema = {
+      type: 'dashboard',
+      name: 'empty_dashboard',
+      title: 'Empty Dashboard',
+      widgets: [],
+    };
+    
+    const { container } = render(<DashboardGridLayout schema={emptySchema} />);
+    expect(container).toBeTruthy();
+  });
+
+  it('should apply custom className', () => {
+    const { container } = render(
+      <DashboardGridLayout schema={mockSchema} className="custom-class" />
+    );
+    
+    const dashboardContainer = container.querySelector('.custom-class');
+    expect(dashboardContainer).toBeTruthy();
+  });
+
+  it('should render drag handles in edit mode', () => {
+    const { container } = render(<DashboardGridLayout schema={mockSchema} />);
+    
+    const editButton = screen.getByRole('button', { name: /edit/i });
+    fireEvent.click(editButton);
+    
+    // In edit mode, widgets should have drag handles (GripVertical icons)
+    const gripIcons = container.querySelectorAll('svg');
+    expect(gripIcons.length).toBeGreaterThan(0);
+  });
+});

package/src/__tests__/MetricCard.test.tsx

@@ -0,0 +1,59 @@
+/**
+ * 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 { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { MetricCard } from '../MetricCard';
+
+describe('MetricCard', () => {
+  it('should render metric card with title and value', () => {
+    render(<MetricCard title="Total Users" value="1,234" />);
+    
+    expect(screen.getByText('Total Users')).toBeInTheDocument();
+    expect(screen.getByText('1,234')).toBeInTheDocument();
+  });
+
+  it('should render trend indicator when trend is provided', () => {
+    render(
+      <MetricCard
+        title="Revenue"
+        value="$45,231"
+        trend="up"
+        trendValue="+12%"
+        description="vs last month"
+      />
+    );
+    
+    expect(screen.getByText('Revenue')).toBeInTheDocument();
+    expect(screen.getByText('$45,231')).toBeInTheDocument();
+    expect(screen.getByText('+12%')).toBeInTheDocument();
+    expect(screen.getByText('vs last month')).toBeInTheDocument();
+  });
+
+  it('should render description without trend', () => {
+    render(
+      <MetricCard
+        title="Active Sessions"
+        value="432"
+        description="current users online"
+      />
+    );
+    
+    expect(screen.getByText('Active Sessions')).toBeInTheDocument();
+    expect(screen.getByText('432')).toBeInTheDocument();
+    expect(screen.getByText('current users online')).toBeInTheDocument();
+  });
+
+  it('should handle numeric values', () => {
+    render(<MetricCard title="Count" value={1234} />);
+    
+    expect(screen.getByText('Count')).toBeInTheDocument();
+    expect(screen.getByText('1234')).toBeInTheDocument();
+  });
+});

package/src/index.tsx

@@ -8,15 +8,18 @@
 
 import { ComponentRegistry } from '@object-ui/core';
 import { DashboardRenderer } from './DashboardRenderer';
+import { DashboardGridLayout } from './DashboardGridLayout';
 import { MetricWidget } from './MetricWidget';
+import { MetricCard } from './MetricCard';
 
-export { DashboardRenderer, MetricWidget };
+export { DashboardRenderer, DashboardGridLayout, MetricWidget, MetricCard };
 
 // Register dashboard component
 ComponentRegistry.register(
   'dashboard',
   DashboardRenderer,
   {
+    namespace: 'view',
     label: 'Dashboard',
     category: 'Complex',
     icon: 'layout-dashboard',
@@ -32,12 +35,13 @@ ComponentRegistry.register(
   }
 );
 
-// Register metric component
+// Register metric widget (legacy)
 ComponentRegistry.register(
   'metric',
   MetricWidget,
   {
-    label: 'Metric Card',
+    namespace: 'plugin-dashboard',
+    label: 'Metric Widget',
     category: 'Dashboard',
     inputs: [
         { name: 'label', type: 'string', label: 'Label' },
@@ -45,3 +49,60 @@ ComponentRegistry.register(
     ]
   }
 );
+
+// Register metric card (new standalone component)
+ComponentRegistry.register(
+  'metric-card',
+  MetricCard,
+  {
+    namespace: 'plugin-dashboard',
+    label: 'Metric Card',
+    category: 'Dashboard',
+    inputs: [
+        { name: 'title', type: 'string', label: 'Title' },
+        { name: 'value', type: 'string', label: 'Value', required: true },
+        { name: 'icon', type: 'string', label: 'Icon (Lucide name)' },
+        { name: 'trend', type: 'enum', label: 'Trend', enum: [
+          { label: 'Up', value: 'up' },
+          { label: 'Down', value: 'down' },
+          { label: 'Neutral', value: 'neutral' }
+        ]},
+        { name: 'trendValue', type: 'string', label: 'Trend Value (e.g., +12%)' },
+        { name: 'description', type: 'string', label: 'Description' },
+    ],
+    defaultProps: {
+      title: 'Metric',
+      value: '0'
+    }
+  }
+);
+
+// Register dashboard grid layout component
+ComponentRegistry.register(
+  'dashboard-grid',
+  DashboardGridLayout,
+  {
+    namespace: 'plugin-dashboard',
+    label: 'Dashboard Grid (Editable)',
+    category: 'Complex',
+    icon: 'layout-grid',
+    inputs: [
+      { name: 'title', type: 'string', label: 'Title' },
+      { name: 'persistLayoutKey', type: 'string', label: 'Layout Storage Key', defaultValue: 'dashboard-layout' },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+        title: 'Dashboard',
+        widgets: [],
+        persistLayoutKey: 'dashboard-layout',
+    }
+  }
+);
+
+// Standard Export Protocol - for manual integration
+export const dashboardComponents = {
+  DashboardRenderer,
+  DashboardGridLayout,
+  MetricWidget,
+  MetricCard,
+};

package/vite.config.ts

@@ -9,8 +9,21 @@ export default defineConfig({
     dts({
       insertTypesEntry: true,
       include: ['src'],
+      exclude: ['**/*.test.ts', '**/*.test.tsx', 'node_modules'],
+      skipDiagnostics: true,
     }),
   ],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+      '@object-ui/core': resolve(__dirname, '../core/src'),
+      '@object-ui/types': resolve(__dirname, '../types/src'),
+      '@object-ui/react': resolve(__dirname, '../react/src'),
+      '@object-ui/components': resolve(__dirname, '../components/src'),
+      '@object-ui/fields': resolve(__dirname, '../fields/src'),
+      '@object-ui/plugin-grid': resolve(__dirname, '../plugin-grid/src'),
+    },
+  },
   build: {
     lib: {
       entry: resolve(__dirname, 'src/index.tsx'),
@@ -41,4 +54,10 @@ export default defineConfig({
       },
     },
   },
+  test: {
+    globals: true,
+    environment: 'happy-dom',
+    setupFiles: ['./vitest.setup.tsx'],
+    passWithNoTests: true,
+  },
 });

package/vitest.config.ts

@@ -0,0 +1,9 @@
+import { mergeConfig } from 'vitest/config';
+import rootConfig from '../../vitest.config.mts';
+import viteConfig from './vite.config';
+
+export default mergeConfig(rootConfig, mergeConfig(viteConfig, {
+  test: {
+    environment: 'jsdom',
+  },
+}));