@object-ui/plugin-dashboard 0.1.1 → 0.5.0

package/src/DashboardGridLayout.tsx

@@ -0,0 +1,210 @@
+import * as React from 'react';
+import { Responsive, WidthProvider, Layout as RGLLayout } from 'react-grid-layout';
+import 'react-grid-layout/css/styles.css';
+import { cn, Card, CardHeader, CardTitle, CardContent, Button } from '@object-ui/components';
+import { Edit, GripVertical, Save, X } from 'lucide-react';
+import { SchemaRenderer } from '@object-ui/react';
+import type { DashboardSchema, DashboardWidgetSchema } from '@object-ui/types';
+
+const ResponsiveGridLayout = WidthProvider(Responsive);
+
+const CHART_COLORS = [
+  'hsl(var(--chart-1))',
+  'hsl(var(--chart-2))',
+  'hsl(var(--chart-3))',
+  'hsl(var(--chart-4))',
+  'hsl(var(--chart-5))',
+];
+
+export interface DashboardGridLayoutProps {
+  schema: DashboardSchema;
+  className?: string;
+  onLayoutChange?: (layout: RGLLayout[]) => void;
+  persistLayoutKey?: string;
+}
+
+export const DashboardGridLayout: React.FC<DashboardGridLayoutProps> = ({
+  schema,
+  className,
+  onLayoutChange,
+  persistLayoutKey = 'dashboard-layout',
+}) => {
+  const [editMode, setEditMode] = React.useState(false);
+  const [layouts, setLayouts] = React.useState<{ lg: RGLLayout[] }>(() => {
+    // Try to load saved layout
+    if (typeof window !== 'undefined' && persistLayoutKey) {
+      const saved = localStorage.getItem(persistLayoutKey);
+      if (saved) {
+        try {
+          return JSON.parse(saved);
+        } catch (e) {
+          console.error('Failed to parse saved layout:', e);
+        }
+      }
+    }
+
+    // Default layout from schema
+    return {
+      lg: schema.widgets?.map((widget: DashboardWidgetSchema, index: number) => ({
+        i: widget.id || `widget-${index}`,
+        x: widget.layout?.x || (index % 4) * 3,
+        y: widget.layout?.y || Math.floor(index / 4) * 4,
+        w: widget.layout?.w || 3,
+        h: widget.layout?.h || 4,
+      })) || [],
+    };
+  });
+
+  const handleLayoutChange = React.useCallback(
+    (layout: RGLLayout[], allLayouts: { lg: RGLLayout[] }) => {
+      setLayouts(allLayouts);
+      onLayoutChange?.(layout);
+    },
+    [onLayoutChange]
+  );
+
+  const handleSaveLayout = React.useCallback(() => {
+    if (typeof window !== 'undefined' && persistLayoutKey) {
+      localStorage.setItem(persistLayoutKey, JSON.stringify(layouts));
+    }
+    setEditMode(false);
+  }, [layouts, persistLayoutKey]);
+
+  const handleResetLayout = React.useCallback(() => {
+    const defaultLayouts = {
+      lg: schema.widgets?.map((widget: DashboardWidgetSchema, index: number) => ({
+        i: widget.id || `widget-${index}`,
+        x: widget.layout?.x || (index % 4) * 3,
+        y: widget.layout?.y || Math.floor(index / 4) * 4,
+        w: widget.layout?.w || 3,
+        h: widget.layout?.h || 4,
+      })) || [],
+    };
+    setLayouts(defaultLayouts);
+    if (typeof window !== 'undefined' && persistLayoutKey) {
+      localStorage.removeItem(persistLayoutKey);
+    }
+  }, [schema.widgets, persistLayoutKey]);
+
+  const getComponentSchema = React.useCallback((widget: DashboardWidgetSchema) => {
+    if (widget.component) return widget.component;
+
+    const widgetType = (widget as any).type;
+    if (widgetType === 'bar' || widgetType === 'line' || widgetType === 'area' || widgetType === 'pie' || widgetType === 'donut') {
+      const dataItems = Array.isArray((widget as any).data) ? (widget as any).data : (widget as any).data?.items || [];
+      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-full"
+      };
+    }
+
+    if (widgetType === 'table') {
+      return {
+        type: 'data-table',
+        ...(widget as any).options,
+        data: (widget as any).data?.items || [],
+        searchable: false,
+        pagination: false,
+        className: "border-0"
+      };
+    }
+
+    return widget;
+  }, []);
+
+  return (
+    <div className={cn("w-full", className)} data-testid="grid-layout">
+      <div className="mb-4 flex items-center justify-between">
+        <h2 className="text-2xl font-bold">{schema.title || 'Dashboard'}</h2>
+        <div className="flex gap-2">
+          {editMode ? (
+            <>
+              <Button onClick={handleSaveLayout} size="sm" variant="default">
+                <Save className="h-4 w-4 mr-2" />
+                Save Layout
+              </Button>
+              <Button onClick={handleResetLayout} size="sm" variant="outline">
+                <X className="h-4 w-4 mr-2" />
+                Reset
+              </Button>
+              <Button onClick={() => setEditMode(false)} size="sm" variant="ghost">
+                Cancel
+              </Button>
+            </>
+          ) : (
+            <Button onClick={() => setEditMode(true)} size="sm" variant="outline">
+              <Edit className="h-4 w-4 mr-2" />
+              Edit Layout
+            </Button>
+          )}
+        </div>
+      </div>
+
+      <ResponsiveGridLayout
+        className="layout"
+        layouts={layouts}
+        breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
+        cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
+        rowHeight={60}
+        isDraggable={editMode}
+        isResizable={editMode}
+        onLayoutChange={handleLayoutChange}
+        draggableHandle=".drag-handle"
+      >
+        {schema.widgets?.map((widget, index) => {
+          const widgetId = widget.id || `widget-${index}`;
+          const componentSchema = getComponentSchema(widget);
+          const isSelfContained = (widget as any).type === 'metric';
+
+          return (
+            <div key={widgetId} className="h-full">
+              {isSelfContained ? (
+                <div className="h-full w-full relative">
+                  {editMode && (
+                    <div className="drag-handle absolute top-2 right-2 z-10 cursor-move p-1 bg-background/80 rounded border border-border">
+                      <GripVertical className="h-4 w-4" />
+                    </div>
+                  )}
+                  <SchemaRenderer schema={componentSchema} className="h-full w-full" />
+                </div>
+              ) : (
+                <Card className={cn(
+                  "h-full overflow-hidden border-border/50 shadow-sm transition-all",
+                  "bg-card/50 backdrop-blur-sm",
+                  editMode && "ring-2 ring-primary/20"
+                )}>
+                  {widget.title && (
+                    <CardHeader className="pb-2 border-b border-border/40 bg-muted/20 flex flex-row items-center justify-between">
+                      <CardTitle className="text-base font-medium tracking-tight truncate" title={widget.title}>
+                        {widget.title}
+                      </CardTitle>
+                      {editMode && (
+                        <div className="drag-handle cursor-move p-1 hover:bg-muted/40 rounded">
+                          <GripVertical className="h-4 w-4" />
+                        </div>
+                      )}
+                    </CardHeader>
+                  )}
+                  <CardContent className="p-0 h-full">
+                    <div className={cn("h-full w-full overflow-auto", !widget.title ? "p-4" : "p-4")}>
+                      <SchemaRenderer schema={componentSchema} />
+                    </div>
+                  </CardContent>
+                </Card>
+              )}
+            </div>
+          );
+        })}
+      </ResponsiveGridLayout>
+    </div>
+  );
+};

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;
+    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)} 
+        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>