@object-ui/plugin-aggrid 0.4.0

package/src/index.test.ts

@@ -0,0 +1,139 @@
+/**
+ * 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, beforeAll } from 'vitest';
+import { ComponentRegistry } from '@object-ui/core';
+
+describe('Plugin AgGrid', () => {
+  // Import all renderers to register them
+  beforeAll(async () => {
+    await import('./index');
+  });
+
+  describe('aggrid component', () => {
+    it('should be registered in ComponentRegistry', () => {
+      const aggridRenderer = ComponentRegistry.get('aggrid');
+      expect(aggridRenderer).toBeDefined();
+    });
+
+    it('should have proper metadata', () => {
+      const config = ComponentRegistry.getConfig('aggrid');
+      expect(config).toBeDefined();
+      expect(config?.label).toBe('AG Grid');
+      expect(config?.icon).toBe('Table');
+      expect(config?.category).toBe('plugin');
+      expect(config?.inputs).toBeDefined();
+      expect(config?.defaultProps).toBeDefined();
+    });
+
+    it('should have expected inputs', () => {
+      const config = ComponentRegistry.getConfig('aggrid');
+      const inputNames = config?.inputs?.map((input: any) => input.name) || [];
+      
+      // Original inputs
+      expect(inputNames).toContain('rowData');
+      expect(inputNames).toContain('columnDefs');
+      expect(inputNames).toContain('pagination');
+      expect(inputNames).toContain('paginationPageSize');
+      expect(inputNames).toContain('theme');
+      expect(inputNames).toContain('height');
+      expect(inputNames).toContain('rowSelection');
+      expect(inputNames).toContain('domLayout');
+      expect(inputNames).toContain('animateRows');
+      expect(inputNames).toContain('gridOptions');
+      expect(inputNames).toContain('className');
+      
+      // New inputs for enterprise features
+      expect(inputNames).toContain('editable');
+      expect(inputNames).toContain('singleClickEdit');
+      expect(inputNames).toContain('exportConfig');
+      expect(inputNames).toContain('statusBar');
+      expect(inputNames).toContain('callbacks');
+      expect(inputNames).toContain('columnConfig');
+      expect(inputNames).toContain('enableRangeSelection');
+      expect(inputNames).toContain('enableCharts');
+      expect(inputNames).toContain('contextMenu');
+    });
+
+    it('should have rowData and columnDefs as required inputs', () => {
+      const config = ComponentRegistry.getConfig('aggrid');
+      const rowDataInput = config?.inputs?.find((input: any) => input.name === 'rowData');
+      const columnDefsInput = config?.inputs?.find((input: any) => input.name === 'columnDefs');
+      
+      expect(rowDataInput).toBeDefined();
+      expect(rowDataInput?.required).toBe(true);
+      expect(rowDataInput?.type).toBe('array');
+      
+      expect(columnDefsInput).toBeDefined();
+      expect(columnDefsInput?.required).toBe(true);
+      expect(columnDefsInput?.type).toBe('array');
+    });
+
+    it('should have theme as enum input', () => {
+      const config = ComponentRegistry.getConfig('aggrid');
+      const themeInput = config?.inputs?.find((input: any) => input.name === 'theme');
+      
+      expect(themeInput).toBeDefined();
+      expect(themeInput?.type).toBe('enum');
+      expect(themeInput?.enum).toBeDefined();
+      expect(Array.isArray(themeInput?.enum)).toBe(true);
+      
+      const enumValues = themeInput?.enum?.map((e: any) => e.value) || [];
+      expect(enumValues).toContain('quartz');
+      expect(enumValues).toContain('alpine');
+      expect(enumValues).toContain('balham');
+      expect(enumValues).toContain('material');
+    });
+
+    it('should have sensible default props', () => {
+      const config = ComponentRegistry.getConfig('aggrid');
+      const defaults = config?.defaultProps;
+      
+      expect(defaults).toBeDefined();
+      expect(defaults?.pagination).toBe(true);
+      expect(defaults?.paginationPageSize).toBe(10);
+      expect(defaults?.theme).toBe('quartz');
+      expect(defaults?.height).toBe(500);
+      expect(defaults?.animateRows).toBe(true);
+      expect(defaults?.domLayout).toBe('normal');
+      expect(defaults?.rowData).toBeDefined();
+      expect(Array.isArray(defaults?.rowData)).toBe(true);
+      expect(defaults?.rowData.length).toBeGreaterThan(0);
+      expect(defaults?.columnDefs).toBeDefined();
+      expect(Array.isArray(defaults?.columnDefs)).toBe(true);
+      expect(defaults?.columnDefs.length).toBeGreaterThan(0);
+    });
+
+    it('should have default columnDefs with proper structure', () => {
+      const config = ComponentRegistry.getConfig('aggrid');
+      const defaults = config?.defaultProps;
+      const columnDefs = defaults?.columnDefs || [];
+      
+      expect(columnDefs.length).toBeGreaterThan(0);
+      
+      // Verify each column has required properties
+      columnDefs.forEach((col: any) => {
+        expect(col.field).toBeDefined();
+        expect(typeof col.field).toBe('string');
+      });
+    });
+
+    it('should have default rowData with proper structure', () => {
+      const config = ComponentRegistry.getConfig('aggrid');
+      const defaults = config?.defaultProps;
+      const rowData = defaults?.rowData || [];
+      
+      expect(rowData.length).toBeGreaterThan(0);
+      
+      // Verify first row has expected properties
+      const firstRow = rowData[0];
+      expect(firstRow).toBeDefined();
+      expect(typeof firstRow).toBe('object');
+    });
+  });
+});

package/src/index.tsx

@@ -0,0 +1,305 @@
+/**
+ * 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, { Suspense } from 'react';
+import { ComponentRegistry } from '@object-ui/core';
+import { Skeleton } from '@object-ui/components';
+
+// Import AG Grid CSS - These must be imported at the entry point for Next.js
+// Importing them in the lazy-loaded component doesn't work properly
+import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-quartz.css';
+import 'ag-grid-community/styles/ag-theme-alpine.css';
+import 'ag-grid-community/styles/ag-theme-balham.css';
+import 'ag-grid-community/styles/ag-theme-material.css';
+
+// Export types for external use
+export type { AgGridSchema, SimpleColumnDef, AgGridCallbacks, ExportConfig, StatusBarConfig, ColumnConfig, ContextMenuConfig } from './types';
+
+import type { AgGridCallbacks, ExportConfig, StatusBarConfig, ColumnConfig, ContextMenuConfig } from './types';
+
+// 🚀 Lazy load the implementation file
+// This ensures AG Grid is only loaded when the component is actually rendered
+const LazyAgGrid = React.lazy(() => import('./AgGridImpl'));
+
+export interface AgGridRendererProps {
+  schema: {
+    type: string;
+    id?: string;
+    className?: string;
+    rowData?: any[];
+    columnDefs?: any[];
+    gridOptions?: any;
+    pagination?: boolean;
+    paginationPageSize?: number;
+    domLayout?: 'normal' | 'autoHeight' | 'print';
+    animateRows?: boolean;
+    rowSelection?: 'single' | 'multiple';
+    theme?: 'alpine' | 'balham' | 'material' | 'quartz';
+    height?: number | string;
+    editable?: boolean;
+    editType?: 'fullRow';
+    singleClickEdit?: boolean;
+    stopEditingWhenCellsLoseFocus?: boolean;
+    exportConfig?: ExportConfig;
+    statusBar?: StatusBarConfig;
+    callbacks?: AgGridCallbacks;
+    columnConfig?: ColumnConfig;
+    enableRangeSelection?: boolean;
+    enableCharts?: boolean;
+    contextMenu?: ContextMenuConfig;
+  };
+}
+
+/**
+ * AgGridRenderer - The public API for the AG Grid component
+ * This wrapper handles lazy loading internally using React.Suspense
+ */
+export const AgGridRenderer: React.FC<AgGridRendererProps> = ({ schema }) => {
+  return (
+    <Suspense fallback={<Skeleton className="w-full h-[500px]" />}>
+      <LazyAgGrid
+        rowData={schema.rowData}
+        columnDefs={schema.columnDefs}
+        gridOptions={schema.gridOptions}
+        pagination={schema.pagination}
+        paginationPageSize={schema.paginationPageSize}
+        domLayout={schema.domLayout}
+        animateRows={schema.animateRows}
+        rowSelection={schema.rowSelection}
+        theme={schema.theme}
+        height={schema.height}
+        className={schema.className}
+        editable={schema.editable}
+        editType={schema.editType}
+        singleClickEdit={schema.singleClickEdit}
+        stopEditingWhenCellsLoseFocus={schema.stopEditingWhenCellsLoseFocus}
+        exportConfig={schema.exportConfig}
+        statusBar={schema.statusBar}
+        callbacks={schema.callbacks}
+        columnConfig={schema.columnConfig}
+        enableRangeSelection={schema.enableRangeSelection}
+        enableCharts={schema.enableCharts}
+        contextMenu={schema.contextMenu}
+      />
+    </Suspense>
+  );
+};
+
+// Register the component with the ComponentRegistry
+ComponentRegistry.register(
+  'aggrid',
+  AgGridRenderer,
+  {
+    label: 'AG Grid',
+    icon: 'Table',
+    category: 'plugin',
+    inputs: [
+      { 
+        name: 'rowData', 
+        type: 'array', 
+        label: 'Row Data',
+        description: 'Array of objects to display in the grid',
+        required: true
+      },
+      { 
+        name: 'columnDefs', 
+        type: 'array', 
+        label: 'Column Definitions',
+        description: 'Array of column definitions',
+        required: true
+      },
+      { 
+        name: 'pagination', 
+        type: 'boolean', 
+        label: 'Enable Pagination',
+        defaultValue: false
+      },
+      { 
+        name: 'paginationPageSize', 
+        type: 'number', 
+        label: 'Page Size',
+        defaultValue: 10,
+        description: 'Number of rows per page when pagination is enabled'
+      },
+      {
+        name: 'theme',
+        type: 'enum',
+        label: 'Theme',
+        enum: [
+          { label: 'Quartz', value: 'quartz' },
+          { label: 'Alpine', value: 'alpine' },
+          { label: 'Balham', value: 'balham' },
+          { label: 'Material', value: 'material' }
+        ],
+        defaultValue: 'quartz'
+      },
+      {
+        name: 'rowSelection',
+        type: 'enum',
+        label: 'Row Selection',
+        enum: [
+          { label: 'None', value: undefined },
+          { label: 'Single', value: 'single' },
+          { label: 'Multiple', value: 'multiple' }
+        ],
+        defaultValue: undefined,
+        advanced: true
+      },
+      {
+        name: 'domLayout',
+        type: 'enum',
+        label: 'DOM Layout',
+        enum: [
+          { label: 'Normal', value: 'normal' },
+          { label: 'Auto Height', value: 'autoHeight' },
+          { label: 'Print', value: 'print' }
+        ],
+        defaultValue: 'normal',
+        advanced: true
+      },
+      { 
+        name: 'animateRows', 
+        type: 'boolean', 
+        label: 'Animate Rows',
+        defaultValue: true,
+        advanced: true
+      },
+      { 
+        name: 'height', 
+        type: 'number', 
+        label: 'Height (px)',
+        defaultValue: 500
+      },
+      { 
+        name: 'editable', 
+        type: 'boolean', 
+        label: 'Enable Editing',
+        defaultValue: false,
+        description: 'Allow cells to be edited inline',
+        advanced: true
+      },
+      { 
+        name: 'singleClickEdit', 
+        type: 'boolean', 
+        label: 'Single Click Edit',
+        defaultValue: false,
+        description: 'Start editing on single click instead of double click',
+        advanced: true
+      },
+      { 
+        name: 'exportConfig', 
+        type: 'code', 
+        label: 'Export Config (JSON)',
+        description: 'Configure CSV export: { enabled: true, fileName: "data.csv" }',
+        advanced: true
+      },
+      { 
+        name: 'statusBar', 
+        type: 'code', 
+        label: 'Status Bar Config (JSON)',
+        description: 'Configure status bar: { enabled: true, aggregations: ["count", "sum", "avg"] }',
+        advanced: true
+      },
+      { 
+        name: 'callbacks', 
+        type: 'code', 
+        label: 'Event Callbacks (JSON)',
+        description: 'Event handlers for cell clicks, selection changes, etc.',
+        advanced: true
+      },
+      { 
+        name: 'columnConfig', 
+        type: 'code', 
+        label: 'Column Config (JSON)',
+        description: 'Global column settings: { resizable: true, sortable: true, filterable: true }',
+        advanced: true
+      },
+      { 
+        name: 'enableRangeSelection', 
+        type: 'boolean', 
+        label: 'Enable Range Selection',
+        defaultValue: false,
+        description: 'Allow selecting ranges of cells (like Excel)',
+        advanced: true
+      },
+      { 
+        name: 'enableCharts', 
+        type: 'boolean', 
+        label: 'Enable Charts',
+        defaultValue: false,
+        description: 'Enable integrated charting (requires AG Grid Enterprise)',
+        advanced: true
+      },
+      { 
+        name: 'contextMenu', 
+        type: 'code', 
+        label: 'Context Menu Config (JSON)',
+        description: 'Configure right-click menu: { enabled: true, items: ["copy", "export"] }',
+        advanced: true
+      },
+      { 
+        name: 'gridOptions', 
+        type: 'code', 
+        label: 'Grid Options (JSON)',
+        description: 'Advanced AG Grid options',
+        advanced: true
+      },
+      { 
+        name: 'className', 
+        type: 'string', 
+        label: 'CSS Class' 
+      }
+    ],
+    defaultProps: {
+      rowData: [
+        { make: 'Tesla', model: 'Model Y', price: 64950, electric: true },
+        { make: 'Ford', model: 'F-Series', price: 33850, electric: false },
+        { make: 'Toyota', model: 'Corolla', price: 29600, electric: false },
+        { make: 'Mercedes', model: 'EQA', price: 48890, electric: true },
+        { make: 'Fiat', model: '500', price: 15774, electric: false },
+        { make: 'Nissan', model: 'Juke', price: 20675, electric: false },
+        { make: 'Vauxhall', model: 'Corsa', price: 18460, electric: false },
+        { make: 'Volvo', model: 'XC90', price: 72835, electric: false },
+        { make: 'Mercedes', model: 'GLA', price: 47825, electric: false },
+        { make: 'Ford', model: 'Puma', price: 27420, electric: false },
+        { make: 'Volkswagen', model: 'Golf', price: 28850, electric: false },
+        { make: 'Kia', model: 'Sportage', price: 31095, electric: false }
+      ],
+      columnDefs: [
+        { field: 'make', headerName: 'Make', sortable: true, filter: true },
+        { field: 'model', headerName: 'Model', sortable: true, filter: true },
+        { 
+          field: 'price', 
+          headerName: 'Price', 
+          sortable: true, 
+          filter: 'number',
+          valueFormatter: (params: any) => params.value != null ? '$' + params.value.toLocaleString() : ''
+        },
+        { 
+          field: 'electric', 
+          headerName: 'Electric', 
+          sortable: true, 
+          filter: true,
+          cellRenderer: (params: any) => params.value === true ? '⚡ Yes' : 'No'
+        }
+      ],
+      pagination: true,
+      paginationPageSize: 10,
+      theme: 'quartz',
+      height: 500,
+      animateRows: true,
+      domLayout: 'normal'
+    }
+  }
+);
+
+// Standard Export Protocol - for manual integration
+export const aggridComponents = {
+  'aggrid': AgGridRenderer,
+};

package/src/types.ts

@@ -0,0 +1,128 @@
+/**
+ * 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 type { ColDef, GridOptions, CellClickedEvent, RowClickedEvent, SelectionChangedEvent, CellValueChangedEvent } from 'ag-grid-community';
+
+/**
+ * Event callback types
+ */
+export interface AgGridCallbacks {
+  onCellClicked?: (event: CellClickedEvent) => void;
+  onRowClicked?: (event: RowClickedEvent) => void;
+  onSelectionChanged?: (event: SelectionChangedEvent) => void;
+  onCellValueChanged?: (event: CellValueChangedEvent) => void;
+  onExport?: (data: any[], format: 'csv') => void;
+  onContextMenuAction?: (action: string, rowData: any) => void;
+}
+
+/**
+ * Export configuration
+ */
+export interface ExportConfig {
+  enabled?: boolean;
+  fileName?: string;
+  skipColumnHeaders?: boolean;
+  allColumns?: boolean;
+  onlySelected?: boolean;
+}
+
+/**
+ * Status bar configuration
+ */
+export interface StatusBarConfig {
+  enabled?: boolean;
+  aggregations?: ('sum' | 'avg' | 'count' | 'min' | 'max')[];
+}
+
+/**
+ * Column configuration enhancements
+ */
+export interface ColumnConfig {
+  resizable?: boolean;
+  sortable?: boolean;
+  filterable?: boolean;
+}
+
+/**
+ * Context menu configuration
+ */
+export interface ContextMenuConfig {
+  enabled?: boolean;
+  items?: ('copy' | 'copyWithHeaders' | 'paste' | 'separator' | 'export' | 'autoSizeAll' | 'resetColumns' | string)[];
+  customItems?: Array<{
+    name: string;
+    action: string;
+    disabled?: boolean;
+  }>;
+}
+
+/**
+ * AG Grid schema for ObjectUI
+ */
+export interface AgGridSchema {
+  type: 'aggrid';
+  id?: string;
+  className?: string;
+  
+  // Data
+  rowData?: any[];
+  
+  // Column definitions
+  columnDefs?: ColDef[];
+  
+  // Grid configuration
+  gridOptions?: GridOptions;
+  
+  // Common options
+  pagination?: boolean;
+  paginationPageSize?: number;
+  domLayout?: 'normal' | 'autoHeight' | 'print';
+  animateRows?: boolean;
+  rowSelection?: 'single' | 'multiple';
+  
+  // Editing
+  editable?: boolean;
+  editType?: 'fullRow';
+  singleClickEdit?: boolean;
+  stopEditingWhenCellsLoseFocus?: boolean;
+  
+  // Export
+  exportConfig?: ExportConfig;
+  
+  // Status bar
+  statusBar?: StatusBarConfig;
+  
+  // Column features
+  columnConfig?: ColumnConfig;
+  enableRangeSelection?: boolean;
+  enableCharts?: boolean;
+  
+  // Context menu
+  contextMenu?: ContextMenuConfig;
+  
+  // Event callbacks
+  callbacks?: AgGridCallbacks;
+  
+  // Styling
+  theme?: 'alpine' | 'balham' | 'material' | 'quartz';
+  height?: number | string;
+}
+
+/**
+ * Column definition with simplified schema
+ */
+export interface SimpleColumnDef {
+  field: string;
+  headerName?: string;
+  width?: number;
+  sortable?: boolean;
+  filter?: boolean | 'text' | 'number' | 'date';
+  editable?: boolean;
+  cellRenderer?: string;
+  valueFormatter?: (params: any) => string;
+}

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "noImplicitAny": true,
+    "noEmit": false,
+    "declaration": true,
+    "composite": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}

package/vite.config.ts

@@ -0,0 +1,50 @@
+/**
+ * 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 { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import { resolve } from 'path';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    dts({
+      insertTypesEntry: true,
+      include: ['src'],
+      exclude: ['**/*.test.ts', '**/*.test.tsx', 'node_modules'],
+      skipDiagnostics: true,
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+    },
+  },
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.tsx'),
+      name: 'ObjectUIPluginAgGrid',
+      fileName: 'index',
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', '@object-ui/components', '@object-ui/core', '@object-ui/react', 'ag-grid-community', 'ag-grid-react'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          '@object-ui/components': 'ObjectUIComponents',
+          '@object-ui/core': 'ObjectUICore',
+          '@object-ui/react': 'ObjectUIReact',
+          'ag-grid-community': 'AgGridCommunity',
+          'ag-grid-react': 'AgGridReact',
+        },
+      },
+    },
+  },
+});