@object-ui/plugin-dashboard 0.5.0 → 3.0.0

package/src/ReportRenderer.tsx

@@ -1,89 +0,0 @@
-import React from 'react';
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@object-ui/components';
-import { ComponentRegistry } from '@object-ui/core';
-
-export interface ReportRendererProps {
-  schema: {
-    type: string;
-    id?: string;
-    title?: string;
-    description?: string;
-    chart?: any; // Chart definition
-    data?: any[]; // Report data
-    columns?: any[]; // Report columns
-    className?: string;
-  };
-}
-
-export const ReportRenderer: React.FC<ReportRendererProps> = ({ schema }) => {
-  const { title, description, data, columns } = schema;
-  
-  // Get chart component type but don't store the component itself
-  const chartType = schema.chart?.type || 'chart';
-  const hasChart = !!schema.chart;
-  
-  // In test environment, force fallback to simple table to avoid AG Grid complexity in JSDOM
-  const isTest = process.env.NODE_ENV === 'test';
-  const showGrid = !isTest;
-
-  return (
-    <Card className={`h-full flex flex-col ${schema.className || ''}`}>
-      <CardHeader>
-        {title && <CardTitle>{title}</CardTitle>}
-        {description && <CardDescription>{description}</CardDescription>}
-      </CardHeader>
-      <CardContent className="flex-1 overflow-auto space-y-4">
-        {/* Render Chart Section if present */}
-        {hasChart && (() => {
-          const ChartComponent = ComponentRegistry.get(chartType);
-          return ChartComponent ? (
-            <div className="min-h-[300px] border rounded-md p-4 bg-white/50">
-              <ChartComponent schema={{ ...schema.chart, data }} />
-            </div>
-          ) : null;
-        })()}
-
-        {/* Render Data Grid Section */}
-        {data && data.length > 0 && (
-          <div className="border rounded-md">
-             {(() => {
-               const GridComponent = showGrid ? (ComponentRegistry.get('aggrid') || ComponentRegistry.get('table')) : null;
-               return GridComponent ? (
-                  <GridComponent 
-                    schema={{ 
-                      type: 'aggrid', 
-                      rowData: data, 
-                      columnDefs: columns,
-                      domLayout: 'autoHeight'
-                    }}
-                  />
-              ) : (
-                 // Simple Fallback Table if Grid plugin missing
-                 <div className="overflow-x-auto">
-                     <table className="w-full text-sm text-left">
-                         <thead className="text-xs uppercase bg-gray-50">
-                             <tr>
-                                 {columns?.map((col: any) => (
-                                     <th key={col.field} className="px-6 py-3">{col.headerName || col.label || col.field}</th>
-                                 ))}
-                             </tr>
-                         </thead>
-                         <tbody>
-                             {data.map((row: any, i: number) => (
-                                 <tr key={i} className="bg-white border-b">
-                                     {columns?.map((col: any) => (
-                                         <td key={col.field} className="px-6 py-4">{row[col.field]}</td>
-                                     ))}
-                                 </tr>
-                             ))}
-                         </tbody>
-                     </table>
-                 </div>
-              );
-             })()}
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-};

package/src/ReportViewer.tsx

@@ -1,232 +0,0 @@
-/**
- * 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 React from 'react';
-import { Card, CardContent, CardHeader, CardTitle, CardDescription, Button } from '@object-ui/components';
-import { SchemaRenderer } from '@object-ui/react';
-import { ComponentRegistry } from '@object-ui/core';
-import type { ReportViewerSchema, ReportSection } from '@object-ui/types';
-import { Download, Printer, RefreshCw } from 'lucide-react';
-
-export interface ReportViewerProps {
-  schema: ReportViewerSchema;
-}
-
-/**
- * ReportViewer - Display a generated report with optional toolbar
- * Supports rendering report sections, charts, tables, and export functionality
- */
-export const ReportViewer: React.FC<ReportViewerProps> = ({ schema }) => {
-  const { 
-    report, 
-    data, 
-    showToolbar = true, 
-    allowExport = true, 
-    allowPrint = true, 
-    loading = false 
-  } = schema;
-
-  const handleExport = (format: string) => {
-    console.log('Export report as:', format);
-    // TODO: Implement export functionality
-    alert(`Export to ${format.toUpperCase()} - Feature coming soon!`);
-  };
-
-  const handlePrint = () => {
-    console.log('Print report');
-    window.print();
-  };
-
-  const handleRefresh = () => {
-    console.log('Refresh report');
-    // TODO: Trigger data refresh
-  };
-
-  if (!report) {
-    return (
-      <Card>
-        <CardContent className="p-8 text-center text-muted-foreground">
-          No report to display
-        </CardContent>
-      </Card>
-    );
-  }
-
-  return (
-    <div className="space-y-4">
-      {/* Toolbar */}
-      {showToolbar && (
-        <div className="flex items-center justify-between gap-2 p-4 bg-card rounded-lg border">
-          <div>
-            <h2 className="text-lg font-semibold">{report.title}</h2>
-            {report.description && (
-              <p className="text-sm text-muted-foreground">{report.description}</p>
-            )}
-          </div>
-          <div className="flex items-center gap-2">
-            {report.refreshInterval && (
-              <Button variant="outline" size="sm" onClick={handleRefresh}>
-                <RefreshCw className="h-4 w-4 mr-2" />
-                Refresh
-              </Button>
-            )}
-            {allowPrint && (
-              <Button variant="outline" size="sm" onClick={handlePrint}>
-                <Printer className="h-4 w-4 mr-2" />
-                Print
-              </Button>
-            )}
-            {allowExport && report.showExportButtons && (
-              <>
-                <Button 
-                  variant="outline" 
-                  size="sm" 
-                  onClick={() => handleExport(report.defaultExportFormat || 'pdf')}
-                >
-                  <Download className="h-4 w-4 mr-2" />
-                  Export
-                </Button>
-              </>
-            )}
-          </div>
-        </div>
-      )}
-
-      {/* Report Content */}
-      <Card>
-        <CardHeader>
-          {!showToolbar && report.title && <CardTitle>{report.title}</CardTitle>}
-          {!showToolbar && report.description && <CardDescription>{report.description}</CardDescription>}
-        </CardHeader>
-        <CardContent className="space-y-6">
-          {loading && (
-            <div className="text-center py-8 text-muted-foreground">
-              Loading report data...
-            </div>
-          )}
-
-          {!loading && report.sections?.map((section: ReportSection, index: number) => {
-            // Check visibility condition
-            if (section.visible === false) {
-              return null;
-            }
-
-            return (
-              <div key={index} className="space-y-2">
-                {/* Section Title */}
-                {section.title && (
-                  <h3 className="text-lg font-semibold border-b pb-2">{section.title}</h3>
-                )}
-
-                {/* Section Content */}
-                {section.type === 'header' && section.title && (
-                  <div className="text-2xl font-bold py-4">{section.title}</div>
-                )}
-
-                {section.type === 'summary' && (
-                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                    {report.fields
-                      ?.filter(f => f.showInSummary)
-                      .map((field, idx) => (
-                        <Card key={idx}>
-                          <CardContent className="p-4">
-                            <div className="text-sm text-muted-foreground">{field.label || field.name}</div>
-                            <div className="text-2xl font-bold">
-                              {/* Calculate aggregation from data */}
-                              {field.aggregation === 'count' && data?.length}
-                              {field.aggregation === 'sum' && data?.reduce((sum, item) => sum + (item[field.name] || 0), 0)}
-                              {/* TODO: Implement other aggregations */}
-                            </div>
-                          </CardContent>
-                        </Card>
-                      ))}
-                  </div>
-                )}
-
-                {section.type === 'chart' && section.chart && (
-                  <div className="min-h-[300px]">
-                    <SchemaRenderer schema={{ ...section.chart, data: data || section.chart.data }} />
-                  </div>
-                )}
-
-                {section.type === 'table' && (
-                  <div className="border rounded-lg overflow-hidden">
-                    <table className="w-full text-sm">
-                      <thead className="bg-muted">
-                        <tr>
-                          {section.columns?.map((col, idx) => (
-                            <th key={idx} className="px-4 py-2 text-left font-medium">
-                              {col.label || col.name}
-                            </th>
-                          ))}
-                        </tr>
-                      </thead>
-                      <tbody>
-                        {data?.map((row, rowIdx) => (
-                          <tr key={rowIdx} className="border-t">
-                            {section.columns?.map((col, colIdx) => (
-                              <td key={colIdx} className="px-4 py-2">
-                                {row[col.name]}
-                              </td>
-                            ))}
-                          </tr>
-                        ))}
-                      </tbody>
-                    </table>
-                  </div>
-                )}
-
-                {section.type === 'text' && section.text && (
-                  <div className="prose max-w-none">
-                    <p>{section.text}</p>
-                  </div>
-                )}
-
-                {section.type === 'page-break' && (
-                  <div className="border-t-2 border-dashed my-8 print:page-break-after-always" />
-                )}
-
-                {section.content && (
-                  <SchemaRenderer schema={section.content} />
-                )}
-              </div>
-            );
-          })}
-
-          {/* Fallback: Show data if no sections defined */}
-          {!report.sections && data && data.length > 0 && (
-            <div className="border rounded-lg overflow-hidden">
-              <table className="w-full text-sm">
-                <thead className="bg-muted">
-                  <tr>
-                    {report.fields?.map((field, idx) => (
-                      <th key={idx} className="px-4 py-2 text-left font-medium">
-                        {field.label || field.name}
-                      </th>
-                    ))}
-                  </tr>
-                </thead>
-                <tbody>
-                  {data.map((row, rowIdx) => (
-                    <tr key={rowIdx} className="border-t">
-                      {report.fields?.map((field, colIdx) => (
-                        <td key={colIdx} className="px-4 py-2">
-                          {row[field.name]}
-                        </td>
-                      ))}
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )}
-        </CardContent>
-      </Card>
-    </div>
-  );
-};

package/src/__tests__/ReportBuilder.test.tsx

@@ -1,115 +0,0 @@
-/**
- * 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 { ReportBuilder } from '../ReportBuilder';
-import type { ReportBuilderSchema } from '@object-ui/types';
-
-describe('ReportBuilder', () => {
-  it('should render report builder with title', () => {
-    const schema: ReportBuilderSchema = {
-      type: 'report-builder',
-      availableFields: [],
-    };
-
-    render(<ReportBuilder schema={schema} />);
-    
-    expect(screen.getByText('Report Builder')).toBeInTheDocument();
-    expect(screen.getByText(/Configure your report settings/)).toBeInTheDocument();
-  });
-
-  it('should render with initial report configuration', () => {
-    const schema: ReportBuilderSchema = {
-      type: 'report-builder',
-      report: {
-        type: 'report',
-        title: 'Sales Report',
-        description: 'Monthly sales data',
-        fields: [],
-      },
-      availableFields: [],
-    };
-
-    render(<ReportBuilder schema={schema} />);
-    
-    const titleInput = screen.getByDisplayValue('Sales Report');
-    expect(titleInput).toBeInTheDocument();
-    
-    const descInput = screen.getByDisplayValue('Monthly sales data');
-    expect(descInput).toBeInTheDocument();
-  });
-
-  it('should render save and cancel buttons', () => {
-    const schema: ReportBuilderSchema = {
-      type: 'report-builder',
-      availableFields: [],
-    };
-
-    render(<ReportBuilder schema={schema} />);
-    
-    expect(screen.getByText('Save Report')).toBeInTheDocument();
-    expect(screen.getByText('Cancel')).toBeInTheDocument();
-  });
-
-  it('should display empty state when no fields selected in fields tab', async () => {
-    const schema: ReportBuilderSchema = {
-      type: 'report-builder',
-      availableFields: [
-        { name: 'revenue', label: 'Revenue', type: 'number' },
-        { name: 'units', label: 'Units Sold', type: 'number' },
-      ],
-    };
-
-    const { container } = render(<ReportBuilder schema={schema} />);
-    
-    // The empty state message exists in the DOM (just in a hidden tab)
-    // Check the component structure instead
-    expect(container.querySelector('.space-y-4')).toBeInTheDocument();
-  });
-
-  it('should render preview section when enabled', () => {
-    const schema: ReportBuilderSchema = {
-      type: 'report-builder',
-      availableFields: [],
-      showPreview: true,
-    };
-
-    render(<ReportBuilder schema={schema} />);
-    
-    expect(screen.getByText('Preview')).toBeInTheDocument();
-  });
-
-  it('should render all tab sections', () => {
-    const schema: ReportBuilderSchema = {
-      type: 'report-builder',
-      availableFields: [],
-    };
-
-    render(<ReportBuilder schema={schema} />);
-    
-    expect(screen.getByRole('tab', { name: /Basic/i })).toBeInTheDocument();
-    expect(screen.getByRole('tab', { name: /Fields/i })).toBeInTheDocument();
-    expect(screen.getByRole('tab', { name: /Filters/i })).toBeInTheDocument();
-    expect(screen.getByRole('tab', { name: /Group By/i })).toBeInTheDocument();
-    expect(screen.getByRole('tab', { name: /Sections/i })).toBeInTheDocument();
-  });
-
-  it('should render export format options in basic tab', () => {
-    const schema: ReportBuilderSchema = {
-      type: 'report-builder',
-      availableFields: [],
-    };
-
-    render(<ReportBuilder schema={schema} />);
-    
-    expect(screen.getByText('Default Export Format')).toBeInTheDocument();
-    expect(screen.getByText('Export Options')).toBeInTheDocument();
-  });
-});

package/src/__tests__/ReportViewer.test.tsx

@@ -1,107 +0,0 @@
-/**
- * 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();
-  });
-});