@object-ui/plugin-dashboard 0.5.0 → 2.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 {

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;AAU/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,CA2LlE,CAAC"}

package/dist/src/index.d.ts

@@ -2,10 +2,7 @@ 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;
@@ -15,8 +12,5 @@ export declare const dashboardComponents: {
     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": "2.0.0",
   "type": "module",
   "license": "MIT",
   "description": "Dashboard plugin for Object UI",
@@ -19,19 +19,19 @@
     "lucide-react": "^0.563.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "react-grid-layout": "^1.4.4",
+    "react-grid-layout": "^2.2.2",
     "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"
+    "@object-ui/components": "2.0.0",
+    "@object-ui/core": "2.0.0",
+    "@object-ui/react": "2.0.0",
+    "@object-ui/types": "2.0.0"
   },
   "peerDependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@types/react-grid-layout": "^1.3.5",
+    "@types/react-grid-layout": "^2.1.0",
     "@vitejs/plugin-react": "^5.1.3",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",

package/src/DashboardGridLayout.tsx

@@ -1,13 +1,11 @@
 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 type { DashboardSchema, DashboardWidgetSchema } from '@object-ui/types';
 
-const ResponsiveGridLayout = WidthProvider(Responsive);
-
 const CHART_COLORS = [
   'hsl(var(--chart-1))',
   'hsl(var(--chart-2))',
@@ -29,6 +27,7 @@ export const DashboardGridLayout: React.FC<DashboardGridLayoutProps> = ({
   onLayoutChange,
   persistLayoutKey = 'dashboard-layout',
 }) => {
+  const { width, containerRef, mounted } = useContainerWidth();
   const [editMode, setEditMode] = React.useState(false);
   const [layouts, setLayouts] = React.useState<{ lg: RGLLayout[] }>(() => {
     // Try to load saved layout
@@ -56,9 +55,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 +121,7 @@ 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">
       <div className="mb-4 flex items-center justify-between">
         <h2 className="text-2xl font-bold">{schema.title || 'Dashboard'}</h2>
         <div className="flex gap-2">
@@ -149,62 +148,64 @@ export const DashboardGridLayout: React.FC<DashboardGridLayoutProps> = ({
         </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';
+      {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", !widget.title ? "p-4" : "p-4")}>
-                      <SchemaRenderer schema={componentSchema} />
-                    </div>
-                  </CardContent>
-                </Card>
-              )}
-            </div>
-          );
-        })}
-      </ResponsiveGridLayout>
+            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.tsx

@@ -21,14 +21,14 @@ const CHART_COLORS = [
 ];
 
 export const DashboardRenderer = forwardRef<HTMLDivElement, { schema: DashboardSchema; className?: string; [key: string]: any }>(
-  ({ schema, className, ...props }, ref) => {
+  ({ schema, className, dataSource, ...props }, ref) => {
     const columns = schema.columns || 4; // Default to 4 columns for better density
     const gap = schema.gap || 4;
 
     return (
-      <div 
-        ref={ref} 
-        className={cn("grid auto-rows-min", className)} 
+      <div
+        ref={ref}
+        className={cn("grid auto-rows-min", className)}
         style={{
             gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
             gap: `${gap * 0.25}rem`

package/src/index.tsx

@@ -11,18 +11,15 @@ 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 };
 
 // Register dashboard component
 ComponentRegistry.register(
   'dashboard',
   DashboardRenderer,
   {
-    namespace: 'plugin-dashboard',
+    namespace: 'view',
     label: 'Dashboard',
     category: 'Complex',
     icon: 'layout-dashboard',
@@ -80,57 +77,6 @@ ComponentRegistry.register(
   }
 );
 
-// Register report component (legacy)
-ComponentRegistry.register(
-  'report',
-  ReportRenderer,
-  {
-    namespace: 'plugin-dashboard',
-    label: 'Report',
-    category: 'Dashboard',
-    inputs: [
-        { name: 'title', type: 'string', label: 'Title' },
-        { name: 'description', type: 'string', label: 'Description' },
-        { name: 'chart', type: 'code', label: 'Chart Configuration' },
-    ]
-  }
-);
-
-// Register report viewer component
-ComponentRegistry.register(
-  'report-viewer',
-  ReportViewer,
-  {
-    namespace: 'plugin-dashboard',
-    label: 'Report Viewer',
-    category: 'Reports',
-    inputs: [
-        { name: 'report', type: 'code', label: 'Report Configuration', required: true },
-        { name: 'data', type: 'code', label: 'Report Data' },
-        { name: 'showToolbar', type: 'boolean', label: 'Show Toolbar', defaultValue: true },
-        { name: 'allowExport', type: 'boolean', label: 'Allow Export', defaultValue: true },
-        { name: 'allowPrint', type: 'boolean', label: 'Allow Print', defaultValue: true },
-    ]
-  }
-);
-
-// Register report builder component
-ComponentRegistry.register(
-  'report-builder',
-  ReportBuilder,
-  {
-    namespace: 'plugin-dashboard',
-    label: 'Report Builder',
-    category: 'Reports',
-    inputs: [
-        { name: 'report', type: 'code', label: 'Initial Report Config' },
-        { name: 'dataSources', type: 'code', label: 'Available Data Sources' },
-        { name: 'availableFields', type: 'code', label: 'Available Fields' },
-        { name: 'showPreview', type: 'boolean', label: 'Show Preview', defaultValue: true },
-    ]
-  }
-);
-
 // Register dashboard grid layout component
 ComponentRegistry.register(
   'dashboard-grid',
@@ -159,8 +105,4 @@ export const dashboardComponents = {
   DashboardGridLayout,
   MetricWidget,
   MetricCard,
-  ReportRenderer,
-  ReportViewer,
-  ReportBuilder,
 };
-

package/dist/src/ReportBuilder.d.ts

@@ -1,11 +0,0 @@
-import { default as React } from 'react';
-import { ReportBuilderSchema } from '../../types/src';
-export interface ReportBuilderProps {
-    schema: ReportBuilderSchema;
-}
-/**
- * ReportBuilder - Interactive report builder component
- * Allows users to configure report fields, filters, grouping, sections, and export settings
- */
-export declare const ReportBuilder: React.FC<ReportBuilderProps>;
-//# sourceMappingURL=ReportBuilder.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ReportBuilder.d.ts","sourceRoot":"","sources":["../../src/ReportBuilder.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,mBAAmB,EAAyE,MAAM,kBAAkB,CAAC;AAInI,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,mBAAmB,CAAC;CAC7B;AAED;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA0lBtD,CAAC"}

package/dist/src/ReportRenderer.d.ts

@@ -1,15 +0,0 @@
-import { default as React } from 'react';
-export interface ReportRendererProps {
-    schema: {
-        type: string;
-        id?: string;
-        title?: string;
-        description?: string;
-        chart?: any;
-        data?: any[];
-        columns?: any[];
-        className?: string;
-    };
-}
-export declare const ReportRenderer: React.FC<ReportRendererProps>;
-//# sourceMappingURL=ReportRenderer.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ReportRenderer.d.ts","sourceRoot":"","sources":["../../src/ReportRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,KAAK,CAAC,EAAE,GAAG,CAAC;QACZ,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACb,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;QAChB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;CACH;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAuExD,CAAC"}

package/dist/src/ReportViewer.d.ts

@@ -1,11 +0,0 @@
-import { default as React } from 'react';
-import { ReportViewerSchema } from '../../types/src';
-export interface ReportViewerProps {
-    schema: ReportViewerSchema;
-}
-/**
- * ReportViewer - Display a generated report with optional toolbar
- * Supports rendering report sections, charts, tables, and export functionality
- */
-export declare const ReportViewer: React.FC<ReportViewerProps>;
-//# sourceMappingURL=ReportViewer.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ReportViewer.d.ts","sourceRoot":"","sources":["../../src/ReportViewer.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,kBAAkB,EAAiB,MAAM,kBAAkB,CAAC;AAG1E,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,kBAAkB,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAgNpD,CAAC"}