@object-ui/plugin-dashboard 2.0.0 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/plugin-dashboard",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "type": "module",
   "license": "MIT",
   "description": "Dashboard plugin for Object UI",
@@ -15,16 +15,16 @@
     }
   },
   "dependencies": {
-    "clsx": "^2.1.0",
+    "clsx": "^2.1.1",
     "lucide-react": "^0.563.0",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
     "react-grid-layout": "^2.2.2",
-    "tailwind-merge": "^2.2.1",
-    "@object-ui/components": "2.0.0",
-    "@object-ui/core": "2.0.0",
-    "@object-ui/react": "2.0.0",
-    "@object-ui/types": "2.0.0"
+    "tailwind-merge": "^2.6.1",
+    "@object-ui/components": "3.0.0",
+    "@object-ui/core": "3.0.0",
+    "@object-ui/react": "3.0.0",
+    "@object-ui/types": "3.0.0"
   },
   "peerDependencies": {
     "react": "^18.0.0",
@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@types/react-grid-layout": "^2.1.0",
-    "@vitejs/plugin-react": "^5.1.3",
+    "@vitejs/plugin-react": "^5.1.4",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"

package/src/DashboardGridLayout.tsx

@@ -2,10 +2,26 @@ import * as React from 'react';
 import { ResponsiveGridLayout, useContainerWidth, type LayoutItem as RGLLayout, type Layout, type ResponsiveLayouts } 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 { Edit, GripVertical, Save, X, RefreshCw } from 'lucide-react';
+import { SchemaRenderer, useHasDndProvider, useDnd } from '@object-ui/react';
 import type { DashboardSchema, DashboardWidgetSchema } from '@object-ui/types';
 
+/** Bridges editMode transitions to the ObjectUI DnD system when a DndProvider is present. */
+function DndEditModeBridge({ editMode }: { editMode: boolean }) {
+  const dnd = useDnd();
+
+  React.useEffect(() => {
+    if (editMode) {
+      dnd.startDrag({ id: 'dashboard-layout', type: 'dashboard-widget', data: {} });
+      return () => { dnd.endDrag(); };
+    } else {
+      dnd.endDrag('dashboard');
+    }
+  }, [editMode, dnd]);
+
+  return null;
+}
+
 const CHART_COLORS = [
   'hsl(var(--chart-1))',
   'hsl(var(--chart-2))',
@@ -19,6 +35,8 @@ export interface DashboardGridLayoutProps {
   className?: string;
   onLayoutChange?: (layout: RGLLayout[]) => void;
   persistLayoutKey?: string;
+  /** Callback invoked when dashboard refresh is triggered (manual or auto) */
+  onRefresh?: () => void;
 }
 
 export const DashboardGridLayout: React.FC<DashboardGridLayoutProps> = ({
@@ -26,9 +44,29 @@ export const DashboardGridLayout: React.FC<DashboardGridLayoutProps> = ({
   className,
   onLayoutChange,
   persistLayoutKey = 'dashboard-layout',
+  onRefresh,
 }) => {
   const { width, containerRef, mounted } = useContainerWidth();
   const [editMode, setEditMode] = React.useState(false);
+  const [refreshing, setRefreshing] = React.useState(false);
+  const hasDndProvider = useHasDndProvider();
+  const intervalRef = React.useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const handleRefresh = React.useCallback(() => {
+    if (!onRefresh) return;
+    setRefreshing(true);
+    onRefresh();
+    setTimeout(() => setRefreshing(false), 600);
+  }, [onRefresh]);
+
+  // Auto-refresh interval
+  React.useEffect(() => {
+    if (!schema.refreshInterval || schema.refreshInterval <= 0 || !onRefresh) return;
+    intervalRef.current = setInterval(handleRefresh, schema.refreshInterval * 1000);
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [schema.refreshInterval, onRefresh, handleRefresh]);
   const [layouts, setLayouts] = React.useState<{ lg: RGLLayout[] }>(() => {
     // Try to load saved layout
     if (typeof window !== 'undefined' && persistLayoutKey) {
@@ -122,6 +160,7 @@ export const DashboardGridLayout: React.FC<DashboardGridLayoutProps> = ({
 
   return (
     <div ref={containerRef} className={cn("w-full", className)} data-testid="grid-layout">
+      {hasDndProvider && <DndEditModeBridge editMode={editMode} />}
       <div className="mb-4 flex items-center justify-between">
         <h2 className="text-2xl font-bold">{schema.title || 'Dashboard'}</h2>
         <div className="flex gap-2">
@@ -140,10 +179,24 @@ export const DashboardGridLayout: React.FC<DashboardGridLayoutProps> = ({
               </Button>
             </>
           ) : (
-            <Button onClick={() => setEditMode(true)} size="sm" variant="outline">
-              <Edit className="h-4 w-4 mr-2" />
-              Edit Layout
-            </Button>
+            <>
+              {onRefresh && (
+                <Button
+                  onClick={handleRefresh}
+                  size="sm"
+                  variant="outline"
+                  disabled={refreshing}
+                  aria-label="Refresh dashboard"
+                >
+                  <RefreshCw className={cn("h-4 w-4 mr-2", refreshing && "animate-spin")} />
+                  {refreshing ? 'Refreshing…' : 'Refresh All'}
+                </Button>
+              )}
+              <Button onClick={() => setEditMode(true)} size="sm" variant="outline">
+                <Edit className="h-4 w-4 mr-2" />
+                Edit Layout
+              </Button>
+            </>
           )}
         </div>
       </div>

package/src/DashboardRenderer.stories.tsx

@@ -0,0 +1,173 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '@object-ui/react';
+import type { BaseSchema } from '@object-ui/types';
+
+const meta = {
+  title: 'Plugins/DashboardRenderer',
+  component: SchemaRenderer,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    schema: { table: { disable: true } },
+  },
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const renderStory = (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />;
+
+export const Default: Story = {
+  render: renderStory,
+  args: {
+    type: 'dashboard',
+    columns: 3,
+    gap: 4,
+    widgets: [
+      {
+        id: 'metric-1',
+        component: {
+          type: 'metric',
+          label: 'Total Revenue',
+          value: '$128,430',
+        },
+      },
+      {
+        id: 'metric-2',
+        component: {
+          type: 'metric',
+          label: 'Active Users',
+          value: '3,842',
+        },
+      },
+      {
+        id: 'metric-3',
+        component: {
+          type: 'metric',
+          label: 'Conversion Rate',
+          value: '4.2%',
+        },
+      },
+    ],
+  } as any,
+};
+
+export const WithMetricCards: Story = {
+  render: renderStory,
+  args: {
+    type: 'dashboard',
+    columns: 3,
+    gap: 4,
+    widgets: [
+      {
+        id: 'mc-1',
+        component: {
+          type: 'metric-card',
+          title: 'Monthly Revenue',
+          value: '$52,489',
+          icon: 'DollarSign',
+          trend: 'up',
+          trendValue: '+14.2%',
+          description: 'vs last month',
+        },
+        layout: { x: 0, y: 0, w: 1, h: 1 },
+      },
+      {
+        id: 'mc-2',
+        component: {
+          type: 'metric-card',
+          title: 'New Signups',
+          value: '1,205',
+          icon: 'Users',
+          trend: 'up',
+          trendValue: '+8.1%',
+          description: 'vs last month',
+        },
+        layout: { x: 1, y: 0, w: 1, h: 1 },
+      },
+      {
+        id: 'mc-3',
+        component: {
+          type: 'metric-card',
+          title: 'Churn Rate',
+          value: '1.8%',
+          icon: 'TrendingDown',
+          trend: 'down',
+          trendValue: '-0.3%',
+          description: 'vs last month',
+        },
+        layout: { x: 2, y: 0, w: 1, h: 1 },
+      },
+    ],
+  } as any,
+};
+
+export const WithChartsAndMetrics: Story = {
+  render: renderStory,
+  args: {
+    type: 'dashboard',
+    columns: 3,
+    gap: 4,
+    widgets: [
+      {
+        id: 'd-m1',
+        component: {
+          type: 'metric-card',
+          title: 'Total Orders',
+          value: '1,284',
+          icon: 'ShoppingCart',
+          trend: 'up',
+          trendValue: '+11%',
+        },
+        layout: { x: 0, y: 0, w: 1, h: 1 },
+      },
+      {
+        id: 'd-m2',
+        component: {
+          type: 'metric-card',
+          title: 'Avg Order Value',
+          value: '$86.50',
+          icon: 'DollarSign',
+          trend: 'up',
+          trendValue: '+3.2%',
+        },
+        layout: { x: 1, y: 0, w: 1, h: 1 },
+      },
+      {
+        id: 'd-m3',
+        component: {
+          type: 'metric-card',
+          title: 'Return Rate',
+          value: '2.1%',
+          icon: 'TrendingDown',
+          trend: 'down',
+          trendValue: '-0.8%',
+        },
+        layout: { x: 2, y: 0, w: 1, h: 1 },
+      },
+      {
+        id: 'd-chart',
+        title: 'Weekly Sales',
+        component: {
+          type: 'chart',
+          chartType: 'bar',
+          data: [
+            { day: 'Mon', sales: 120 },
+            { day: 'Tue', sales: 180 },
+            { day: 'Wed', sales: 150 },
+            { day: 'Thu', sales: 210 },
+            { day: 'Fri', sales: 190 },
+          ],
+          xAxisKey: 'day',
+          series: [{ dataKey: 'sales' }],
+          config: {
+            sales: { label: 'Sales', color: '#3b82f6' },
+          },
+        },
+        layout: { x: 0, y: 1, w: 3, h: 2 },
+      },
+    ],
+  } as any,
+};

package/src/DashboardRenderer.tsx

@@ -8,8 +8,9 @@
 
 import type { DashboardSchema, DashboardWidgetSchema } from '@object-ui/types';
 import { SchemaRenderer } from '@object-ui/react';
-import { cn, Card, CardHeader, CardTitle, CardContent } from '@object-ui/components';
-import { forwardRef } from 'react';
+import { cn, Card, CardHeader, CardTitle, CardContent, Button } from '@object-ui/components';
+import { forwardRef, useState, useEffect, useCallback, useRef } from 'react';
+import { RefreshCw } from 'lucide-react';
 
 // Color palette for charts
 const CHART_COLORS = [
@@ -20,117 +21,178 @@ const CHART_COLORS = [
   'hsl(var(--chart-5))',
 ];
 
-export const DashboardRenderer = forwardRef<HTMLDivElement, { schema: DashboardSchema; className?: string; [key: string]: any }>(
-  ({ schema, className, dataSource, ...props }, ref) => {
+export interface DashboardRendererProps {
+  schema: DashboardSchema;
+  className?: string;
+  /** Callback invoked when dashboard refresh is triggered (manual or auto) */
+  onRefresh?: () => void;
+  [key: string]: any;
+}
+
+export const DashboardRenderer = forwardRef<HTMLDivElement, DashboardRendererProps>(
+  ({ schema, className, dataSource, onRefresh, ...props }, ref) => {
     const columns = schema.columns || 4; // Default to 4 columns for better density
     const gap = schema.gap || 4;
+    const [refreshing, setRefreshing] = useState(false);
+    const [isMobile, setIsMobile] = useState(false);
+    const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
-    return (
-      <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) => {
-            // 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.
+    useEffect(() => {
+      const checkMobile = () => setIsMobile(window.innerWidth < 640);
+      checkMobile();
+      window.addEventListener('resize', checkMobile);
+      return () => window.removeEventListener('resize', checkMobile);
+    }, []);
+
+    const handleRefresh = useCallback(() => {
+      if (!onRefresh) return;
+      setRefreshing(true);
+      onRefresh();
+      // Reset refreshing indicator after a short delay
+      setTimeout(() => setRefreshing(false), 600);
+    }, [onRefresh]);
+
+    // Auto-refresh interval
+    useEffect(() => {
+      if (!schema.refreshInterval || schema.refreshInterval <= 0 || !onRefresh) return;
+      intervalRef.current = setInterval(handleRefresh, schema.refreshInterval * 1000);
+      return () => {
+        if (intervalRef.current) clearInterval(intervalRef.current);
+      };
+    }, [schema.refreshInterval, onRefresh, handleRefresh]);
+
+    const renderWidget = (widget: DashboardWidgetSchema) => {
+        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') {
+                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 {
-                    ...widget,
-                    ...((widget as any).options || {})
+                    type: 'chart',
+                    chartType: widgetType,
+                    data: dataItems,
+                    xAxisKey: xAxisKey,
+                    series: [{ dataKey: yField }],
+                    colors: CHART_COLORS,
+                    className: "h-[200px] sm:h-[250px] md:h-[300px]"
+                };
+            }
+
+            if (widgetType === 'table') {
+                return {
+                    type: 'data-table',
+                    ...(widget as any).options,
+                    data: (widget as any).data?.items || [],
+                    searchable: false,
+                    pagination: false,
+                    className: "border-0"
                 };
-            };
-            
-            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 {
+                ...widget,
+                ...((widget as any).options || {})
+            };
+        };
+        
+        const componentSchema = getComponentSchema();
+        const isSelfContained = (widget as any).type === 'metric';
+
+        if (isSelfContained) {
             return (
-                <Card 
+                <div 
                     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 ? {
+                    className={cn("h-full w-full", isMobile && "w-[85vw] shrink-0 snap-center")}
+                    style={!isMobile && 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>
+                     <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",
+                    isMobile && "w-[85vw] shrink-0 snap-center"
+                )}
+                style={!isMobile && 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 px-3 sm:px-6">
+                        <CardTitle className="text-sm sm: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", "p-3 sm:p-4 md:p-6")}>
+                        <SchemaRenderer schema={componentSchema} />
+                    </div>
+                </CardContent>
+            </Card>
+        );
+    };
+
+    const refreshButton = onRefresh && (
+      <div className={cn(isMobile ? "flex justify-end mb-2" : "col-span-full flex justify-end mb-2")}>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleRefresh}
+          disabled={refreshing}
+          aria-label="Refresh dashboard"
+        >
+          <RefreshCw className={cn("h-4 w-4 mr-2", refreshing && "animate-spin")} />
+          {refreshing ? 'Refreshing…' : 'Refresh All'}
+        </Button>
+      </div>
+    );
+
+    if (isMobile) {
+      return (
+        <div ref={ref} className={cn("flex flex-col", className)} {...props}>
+          {refreshButton}
+          <div
+            className="flex overflow-x-auto snap-x snap-mandatory gap-3 pb-4 [-webkit-overflow-scrolling:touch]"
+            style={{ scrollPaddingLeft: '0.75rem' }}
+          >
+            {schema.widgets?.map((widget: DashboardWidgetSchema) => renderWidget(widget))}
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "grid auto-rows-min",
+          "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
+          className
+        )}
+        style={{
+            ...(columns > 4 && { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }),
+            gap: `${gap * 0.25}rem`
+        }}
+        {...props}
+      >
+        {refreshButton}
+        {schema.widgets?.map((widget: DashboardWidgetSchema) => renderWidget(widget))}
       </div>
     );
   }