feat(plugin-report): add ReportRenderer and ReportViewer components with rendering logic for charts and tables

- Implemented ReportRenderer to display reports with optional charts and data tables.
- Added ReportViewer for displaying generated reports with a toolbar for export and print functionalities.
- Introduced ReportBuilder for configuring reports with available fields and sections.
- Created unit tests for ReportBuilder, ReportRenderer, and ReportViewer to ensure proper rendering and functionality.
- Registered components in ComponentRegistry for use within the ObjectUI framework.
- Configured TypeScript and Vite for building and testing the plugin.

Author: hotlong

apps/console/package.json

@@ -42,6 +42,7 @@
     "@object-ui/plugin-kanban": "workspace:*",
     "@object-ui/plugin-list": "workspace:*",
     "@object-ui/plugin-map": "workspace:*",
+    "@object-ui/plugin-report": "workspace:*",
     "@object-ui/plugin-timeline": "workspace:*",
     "@object-ui/react": "workspace:*",
     "@object-ui/types": "workspace:*",

apps/console/src/components/ReportView.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { ReportViewer } from '@object-ui/plugin-dashboard';
+import { ReportViewer } from '@object-ui/plugin-report';
 import { Empty, EmptyTitle, EmptyDescription, Button } from '@object-ui/components';
 import { Code2 } from 'lucide-react';
 import appConfig from '../../objectstack.shared';

apps/console/src/index.css

@@ -7,6 +7,7 @@
 @source '../../../packages/fields/src/**/*.{ts,tsx}';
 @source '../../../packages/react/src/**/*.{ts,tsx}';
 @source '../../../packages/plugin-dashboard/src/**/*.{ts,tsx}';
+@source '../../../packages/plugin-report/src/**/*.{ts,tsx}';
 @source '../../../packages/plugin-form/src/**/*.{ts,tsx}';
 @source '../../../packages/plugin-grid/src/**/*.{ts,tsx}';
 @source '../../../packages/plugin-calendar/src/**/*.{ts,tsx}';

apps/console/vite.config.ts

@@ -20,6 +20,7 @@ export default defineConfig({
       '@object-ui/fields': path.resolve(__dirname, '../../packages/fields/src'),
       '@object-ui/layout': path.resolve(__dirname, '../../packages/layout/src'),
       '@object-ui/plugin-dashboard': path.resolve(__dirname, '../../packages/plugin-dashboard/src'),
+      '@object-ui/plugin-report': path.resolve(__dirname, '../../packages/plugin-report/src'),
       '@object-ui/plugin-form': path.resolve(__dirname, '../../packages/plugin-form/src'),
       '@object-ui/plugin-grid': path.resolve(__dirname, '../../packages/plugin-grid/src'),
       '@object-ui/react': path.resolve(__dirname, '../../packages/react/src'),

packages/plugin-dashboard/src/index.tsx

@@ -11,11 +11,8 @@ 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(
@@ -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,
 };
-

packages/plugin-report/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@object-ui/plugin-report",
+  "version": "0.1.0",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "clean": "rm -rf dist",
+    "test": "vitest run",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "@object-ui/core": "workspace:*",
+    "@object-ui/types": "workspace:*",
+    "@object-ui/components": "workspace:*",
+    "@object-ui/react": "workspace:*",
+    "@object-ui/fields": "workspace:*"
+  },
+  "dependencies": {
+    "clsx": "^2.1.0",
+    "lucide-react": "^0.344.0",
+    "tailwind-merge": "^2.2.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.24",
+    "@types/react": "^18.2.61",
+    "@types/react-dom": "^18.2.19",
+    "@vitejs/plugin-react": "^4.2.1",
+    "vite": "^5.1.4",
+    "vite-plugin-dts": "^3.7.3",
+    "vitest": "^1.3.1"
+  }
+}