@object-ui/plugin-dashboard 0.5.0 → 3.0.0

package/dist/src/DashboardGridLayout.d.ts

@@ -1,4 +1,4 @@
-import { Layout as RGLLayout } from 'react-grid-layout';
+import { LayoutItem as RGLLayout } from 'react-grid-layout';
 import { DashboardSchema } from '../../types/src';
 import * as React from 'react';
 export interface DashboardGridLayoutProps {
@@ -6,6 +6,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 declare const DashboardGridLayout: React.FC<DashboardGridLayoutProps>;
 //# sourceMappingURL=DashboardGridLayout.d.ts.map

package/dist/src/DashboardGridLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardGridLayout.d.ts","sourceRoot":"","sources":["../../src/DashboardGridLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAA6B,MAAM,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnF,OAAO,kCAAkC,CAAC;AAI1C,OAAO,KAAK,EAAE,eAAe,EAAyB,MAAM,kBAAkB,CAAC;AAY/E,MAAM,WAAW,wBAAwB;IACvC,MAAM,EAAE,eAAe,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;IAC/C,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAwLlE,CAAC"}
+{"version":3,"file":"DashboardGridLayout.d.ts","sourceRoot":"","sources":["../../src/DashboardGridLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAA2C,KAAK,UAAU,IAAI,SAAS,EAAuC,MAAM,mBAAmB,CAAC;AAC/I,OAAO,kCAAkC,CAAC;AAI1C,OAAO,KAAK,EAAE,eAAe,EAAyB,MAAM,kBAAkB,CAAC;AA0B/E,MAAM,WAAW,wBAAwB;IACvC,MAAM,EAAE,eAAe,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;IAC/C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA8NlE,CAAC"}

package/dist/src/DashboardRenderer.d.ts

@@ -1,7 +1,10 @@
 import { DashboardSchema } from '../../types/src';
-export declare const DashboardRenderer: import('react').ForwardRefExoticComponent<Omit<{
-    [key: string]: any;
+export interface DashboardRendererProps {
     schema: DashboardSchema;
     className?: string;
-}, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    /** Callback invoked when dashboard refresh is triggered (manual or auto) */
+    onRefresh?: () => void;
+    [key: string]: any;
+}
+export declare const DashboardRenderer: import('react').ForwardRefExoticComponent<Omit<DashboardRendererProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=DashboardRenderer.d.ts.map

package/dist/src/DashboardRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardRenderer.d.ts","sourceRoot":"","sources":["../../src/DashboardRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAyB,MAAM,kBAAkB,CAAC;AAc/E,eAAO,MAAM,iBAAiB;;YAAwC,eAAe;gBAAc,MAAM;0DAkHxG,CAAC"}
+{"version":3,"file":"DashboardRenderer.d.ts","sourceRoot":"","sources":["../../src/DashboardRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAyB,MAAM,kBAAkB,CAAC;AAe/E,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,eAAe,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,eAAO,MAAM,iBAAiB,gIAuK7B,CAAC"}

package/dist/src/DashboardRenderer.stories.d.ts

@@ -0,0 +1,24 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<Omit<{
+        schema: import('../../core/src').SchemaNode;
+    } & Record<string, any>, "ref"> & import('react').RefAttributes<any>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        schema: {
+            table: {
+                disable: true;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithMetricCards: Story;
+export declare const WithChartsAndMetrics: Story;
+//# sourceMappingURL=DashboardRenderer.stories.d.ts.map

package/dist/src/DashboardRenderer.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardRenderer.stories.d.ts","sourceRoot":"","sources":["../../src/DashboardRenderer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;CAUW,CAAC;AAEtB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAInC,eAAO,MAAM,OAAO,EAAE,KAiCrB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAgD7B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAkElC,CAAC"}

package/dist/src/index.d.ts

@@ -2,21 +2,11 @@ import { DashboardRenderer } from './DashboardRenderer';
 import { DashboardGridLayout } from './DashboardGridLayout';
 import { MetricWidget } from './MetricWidget';
 import { MetricCard } from './MetricCard';
-import { ReportRenderer } from './ReportRenderer';
-import { ReportViewer } from './ReportViewer';
-import { ReportBuilder } from './ReportBuilder';
-export { DashboardRenderer, DashboardGridLayout, MetricWidget, MetricCard, ReportRenderer, ReportViewer, ReportBuilder };
+export { DashboardRenderer, DashboardGridLayout, MetricWidget, MetricCard };
 export declare const dashboardComponents: {
-    DashboardRenderer: import('react').ForwardRefExoticComponent<Omit<{
-        [key: string]: any;
-        schema: import('../../types/src').DashboardSchema;
-        className?: string;
-    }, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    DashboardRenderer: import('react').ForwardRefExoticComponent<Omit<import('./DashboardRenderer').DashboardRendererProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
     DashboardGridLayout: import('react').FC<import('./DashboardGridLayout').DashboardGridLayoutProps>;
     MetricWidget: ({ label, value, trend, icon, className, description, ...props }: import('./MetricWidget').MetricWidgetProps) => import("react/jsx-runtime").JSX.Element;
     MetricCard: import('react').FC<import('./MetricCard').MetricCardProps>;
-    ReportRenderer: import('react').FC<import('./ReportRenderer').ReportRendererProps>;
-    ReportViewer: import('react').FC<import('./ReportViewer').ReportViewerProps>;
-    ReportBuilder: import('react').FC<import('./ReportBuilder').ReportBuilderProps>;
 };
 //# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,YAAY,EAAE,aAAa,EAAE,CAAC;AA2IzH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;CAQ/B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,YAAY,EAAE,UAAU,EAAE,CAAC;AAwF5E,eAAO,MAAM,mBAAmB;;;;;CAK/B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/plugin-dashboard",
-  "version": "0.5.0",
+  "version": "3.0.0",
   "type": "module",
   "license": "MIT",
   "description": "Dashboard plugin for Object UI",
@@ -15,24 +15,24 @@
     }
   },
   "dependencies": {
-    "clsx": "^2.1.0",
+    "clsx": "^2.1.1",
     "lucide-react": "^0.563.0",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "react-grid-layout": "^1.4.4",
-    "tailwind-merge": "^2.2.1",
-    "@object-ui/components": "0.5.0",
-    "@object-ui/core": "0.5.0",
-    "@object-ui/react": "0.5.0",
-    "@object-ui/types": "0.5.0"
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "react-grid-layout": "^2.2.2",
+    "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",
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@types/react-grid-layout": "^1.3.5",
-    "@vitejs/plugin-react": "^5.1.3",
+    "@types/react-grid-layout": "^2.1.0",
+    "@vitejs/plugin-react": "^5.1.4",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"

package/src/DashboardGridLayout.tsx

@@ -1,12 +1,26 @@
 import * as React from 'react';
-import { Responsive, WidthProvider, Layout as RGLLayout } from 'react-grid-layout';
+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';
 
-const ResponsiveGridLayout = WidthProvider(Responsive);
+/** 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))',
@@ -21,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> = ({
@@ -28,8 +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) {
@@ -56,9 +93,9 @@ export const DashboardGridLayout: React.FC<DashboardGridLayoutProps> = ({
   });
 
   const handleLayoutChange = React.useCallback(
-    (layout: RGLLayout[], allLayouts: { lg: RGLLayout[] }) => {
-      setLayouts(allLayouts);
-      onLayoutChange?.(layout);
+    (layout: Layout, allLayouts: ResponsiveLayouts) => {
+      setLayouts(allLayouts as { lg: RGLLayout[] });
+      onLayoutChange?.(layout as RGLLayout[]);
     },
     [onLayoutChange]
   );
@@ -122,7 +159,8 @@ export const DashboardGridLayout: React.FC<DashboardGridLayoutProps> = ({
   }, []);
 
   return (
-    <div className={cn("w-full", className)} data-testid="grid-layout">
+    <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">
@@ -141,70 +179,86 @@ 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>
 
-      <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>
+      {mounted && (
+        <ResponsiveGridLayout
+          className="layout"
+          width={width}
+          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}
+          dragConfig={{ enabled: editMode, handle: ".drag-handle" }}
+          resizeConfig={{ enabled: editMode }}
+          onLayoutChange={handleLayoutChange}
+        >
+          {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 p-4")}>
+                        <SchemaRenderer schema={componentSchema} />
+                      </div>
+                    </CardContent>
+                  </Card>
+                )}
+              </div>
+            );
+          })}
+        </ResponsiveGridLayout>
+      )}
     </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,
+};