@object-ui/plugin-dashboard 0.1.1 → 0.5.0

package/src/__tests__/ReportViewer.test.tsx

@@ -0,0 +1,107 @@
+/**
+ * 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 { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ReportViewer } from '../ReportViewer';
+import type { ReportViewerSchema } from '@object-ui/types';
+
+describe('ReportViewer', () => {
+  it('should render empty state when no report is provided', () => {
+    const schema: ReportViewerSchema = {
+      type: 'report-viewer',
+    };
+
+    render(<ReportViewer schema={schema} />);
+    
+    expect(screen.getByText('No report to display')).toBeInTheDocument();
+  });
+
+  it('should render report with title and description', () => {
+    const schema: ReportViewerSchema = {
+      type: 'report-viewer',
+      report: {
+        type: 'report',
+        title: 'Sales Report',
+        description: 'Monthly sales analysis',
+        fields: [],
+        sections: [],
+      },
+      showToolbar: true,
+    };
+
+    render(<ReportViewer schema={schema} />);
+    
+    expect(screen.getByText('Sales Report')).toBeInTheDocument();
+    expect(screen.getByText('Monthly sales analysis')).toBeInTheDocument();
+  });
+
+  it('should render export and print buttons when enabled', () => {
+    const schema: ReportViewerSchema = {
+      type: 'report-viewer',
+      report: {
+        type: 'report',
+        title: 'Test Report',
+        showExportButtons: true,
+        fields: [],
+        sections: [],
+      },
+      showToolbar: true,
+      allowExport: true,
+      allowPrint: true,
+    };
+
+    render(<ReportViewer schema={schema} />);
+    
+    expect(screen.getByText('Export')).toBeInTheDocument();
+    expect(screen.getByText('Print')).toBeInTheDocument();
+  });
+
+  it('should render loading state', () => {
+    const schema: ReportViewerSchema = {
+      type: 'report-viewer',
+      report: {
+        type: 'report',
+        title: 'Test Report',
+        fields: [],
+        sections: [],
+      },
+      loading: true,
+    };
+
+    render(<ReportViewer schema={schema} />);
+    
+    expect(screen.getByText('Loading report data...')).toBeInTheDocument();
+  });
+
+  it('should render report data in table when no sections defined', () => {
+    const schema: ReportViewerSchema = {
+      type: 'report-viewer',
+      report: {
+        type: 'report',
+        title: 'User Report',
+        fields: [
+          { name: 'name', label: 'Name' },
+          { name: 'email', label: 'Email' },
+        ],
+      },
+      data: [
+        { name: 'John Doe', email: 'john@example.com' },
+        { name: 'Jane Smith', email: 'jane@example.com' },
+      ],
+    };
+
+    render(<ReportViewer schema={schema} />);
+    
+    expect(screen.getByText('Name')).toBeInTheDocument();
+    expect(screen.getByText('Email')).toBeInTheDocument();
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+    expect(screen.getByText('jane@example.com')).toBeInTheDocument();
+  });
+});

package/src/index.tsx

@@ -8,15 +8,21 @@
 
 import { ComponentRegistry } from '@object-ui/core';
 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, MetricWidget };
+export { DashboardRenderer, DashboardGridLayout, MetricWidget, MetricCard, ReportRenderer, ReportViewer, ReportBuilder };
 
 // Register dashboard component
 ComponentRegistry.register(
   'dashboard',
   DashboardRenderer,
   {
+    namespace: 'plugin-dashboard',
     label: 'Dashboard',
     category: 'Complex',
     icon: 'layout-dashboard',
@@ -32,12 +38,13 @@ ComponentRegistry.register(
   }
 );
 
-// Register metric component
+// Register metric widget (legacy)
 ComponentRegistry.register(
   'metric',
   MetricWidget,
   {
-    label: 'Metric Card',
+    namespace: 'plugin-dashboard',
+    label: 'Metric Widget',
     category: 'Dashboard',
     inputs: [
         { name: 'label', type: 'string', label: 'Label' },
@@ -45,3 +52,115 @@ ComponentRegistry.register(
     ]
   }
 );
+
+// Register metric card (new standalone component)
+ComponentRegistry.register(
+  'metric-card',
+  MetricCard,
+  {
+    namespace: 'plugin-dashboard',
+    label: 'Metric Card',
+    category: 'Dashboard',
+    inputs: [
+        { name: 'title', type: 'string', label: 'Title' },
+        { name: 'value', type: 'string', label: 'Value', required: true },
+        { name: 'icon', type: 'string', label: 'Icon (Lucide name)' },
+        { name: 'trend', type: 'enum', label: 'Trend', enum: [
+          { label: 'Up', value: 'up' },
+          { label: 'Down', value: 'down' },
+          { label: 'Neutral', value: 'neutral' }
+        ]},
+        { name: 'trendValue', type: 'string', label: 'Trend Value (e.g., +12%)' },
+        { name: 'description', type: 'string', label: 'Description' },
+    ],
+    defaultProps: {
+      title: 'Metric',
+      value: '0'
+    }
+  }
+);
+
+// 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',
+  DashboardGridLayout,
+  {
+    namespace: 'plugin-dashboard',
+    label: 'Dashboard Grid (Editable)',
+    category: 'Complex',
+    icon: 'layout-grid',
+    inputs: [
+      { name: 'title', type: 'string', label: 'Title' },
+      { name: 'persistLayoutKey', type: 'string', label: 'Layout Storage Key', defaultValue: 'dashboard-layout' },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+        title: 'Dashboard',
+        widgets: [],
+        persistLayoutKey: 'dashboard-layout',
+    }
+  }
+);
+
+// Standard Export Protocol - for manual integration
+export const dashboardComponents = {
+  DashboardRenderer,
+  DashboardGridLayout,
+  MetricWidget,
+  MetricCard,
+  ReportRenderer,
+  ReportViewer,
+  ReportBuilder,
+};
+

package/vite.config.ts

@@ -9,8 +9,21 @@ export default defineConfig({
     dts({
       insertTypesEntry: true,
       include: ['src'],
+      exclude: ['**/*.test.ts', '**/*.test.tsx', 'node_modules'],
+      skipDiagnostics: true,
     }),
   ],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+      '@object-ui/core': resolve(__dirname, '../core/src'),
+      '@object-ui/types': resolve(__dirname, '../types/src'),
+      '@object-ui/react': resolve(__dirname, '../react/src'),
+      '@object-ui/components': resolve(__dirname, '../components/src'),
+      '@object-ui/fields': resolve(__dirname, '../fields/src'),
+      '@object-ui/plugin-grid': resolve(__dirname, '../plugin-grid/src'),
+    },
+  },
   build: {
     lib: {
       entry: resolve(__dirname, 'src/index.tsx'),
@@ -41,4 +54,10 @@ export default defineConfig({
       },
     },
   },
+  test: {
+    globals: true,
+    environment: 'happy-dom',
+    setupFiles: ['./vitest.setup.tsx'],
+    passWithNoTests: true,
+  },
 });

package/vitest.config.ts

@@ -0,0 +1,9 @@
+import { mergeConfig } from 'vitest/config';
+import rootConfig from '../../vitest.config.mts';
+import viteConfig from './vite.config';
+
+export default mergeConfig(rootConfig, mergeConfig(viteConfig, {
+  test: {
+    environment: 'jsdom',
+  },
+}));

package/vitest.setup.tsx

@@ -0,0 +1,18 @@
+/**
+ * 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 { expect, afterEach } from 'vitest';
+import { cleanup } from '@testing-library/react';
+import * as matchers from '@testing-library/jest-dom/matchers';
+import '@testing-library/jest-dom';
+
+expect.extend(matchers);
+
+afterEach(() => {
+  cleanup();
+});