@object-ui/plugin-aggrid 0.5.0 → 2.0.0

package/src/field-renderers.test.tsx

@@ -0,0 +1,383 @@
+/**
+ * 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, vi, beforeEach, afterEach } from 'vitest';
+import type { ICellRendererParams, ICellEditorParams } from 'ag-grid-community';
+import type { FieldMetadata } from '@object-ui/types';
+import { 
+  FieldWidgetCellRenderer, 
+  FieldWidgetCellEditor,
+  createFieldCellRenderer,
+  createFieldCellEditor 
+} from './field-renderers';
+
+describe('field-renderers', () => {
+  describe('FieldWidgetCellRenderer', () => {
+    let renderer: FieldWidgetCellRenderer;
+
+    beforeEach(() => {
+      renderer = new FieldWidgetCellRenderer();
+    });
+
+    afterEach(() => {
+      renderer.destroy();
+    });
+
+    it('should initialize with a field widget for supported types', () => {
+      const field: FieldMetadata = {
+        name: 'testField',
+        label: 'Test Field',
+        type: 'text',
+      };
+
+      const params = {
+        value: 'test value',
+        field,
+      } as ICellRendererParams & { field: FieldMetadata };
+
+      renderer.init(params);
+
+      expect(renderer.eGui).toBeDefined();
+      expect(renderer.eGui.className).toBe('field-widget-cell');
+      expect(renderer.root).toBeDefined();
+    });
+
+    it('should initialize with fallback for unsupported types', () => {
+      const field = {
+        name: 'testField',
+        label: 'Test Field',
+        type: 'unsupported_type',
+      } as unknown as FieldMetadata;
+
+      const params = {
+        value: 'fallback value',
+        field,
+      } as ICellRendererParams & { field: FieldMetadata };
+
+      renderer.init(params);
+
+      expect(renderer.eGui).toBeDefined();
+      expect(renderer.eGui.textContent).toBe('fallback value');
+      expect(renderer.root).toBeNull();
+    });
+
+    it('should handle null values in fallback mode', () => {
+      const field = {
+        name: 'testField',
+        label: 'Test Field',
+        type: 'unsupported_type',
+      } as unknown as FieldMetadata;
+
+      const params = {
+        value: null,
+        field,
+      } as ICellRendererParams & { field: FieldMetadata };
+
+      renderer.init(params);
+
+      expect(renderer.eGui.textContent).toBe('');
+    });
+
+    it('should return the GUI element', () => {
+      const field: FieldMetadata = {
+        name: 'testField',
+        label: 'Test Field',
+        type: 'text',
+      };
+
+      const params = {
+        value: 'test',
+        field,
+      } as ICellRendererParams & { field: FieldMetadata };
+
+      renderer.init(params);
+      const gui = renderer.getGui();
+
+      expect(gui).toBe(renderer.eGui);
+    });
+
+    it('should refresh with new value for supported field type', () => {
+      const field: FieldMetadata = {
+        name: 'testField',
+        label: 'Test Field',
+        type: 'text',
+      };
+
+      const initParams = {
+        value: 'initial value',
+        field,
+      } as ICellRendererParams & { field: FieldMetadata };
+
+      renderer.init(initParams);
+
+      const refreshParams = {
+        value: 'updated value',
+        field,
+      } as ICellRendererParams & { field: FieldMetadata };
+
+      const result = renderer.refresh(refreshParams);
+
+      expect(result).toBe(true);
+    });
+
+    it('should refresh with new value for unsupported field type', () => {
+      const field = {
+        name: 'testField',
+        label: 'Test Field',
+        type: 'unsupported_type',
+      } as unknown as FieldMetadata;
+
+      const initParams = {
+        value: 'initial value',
+        field,
+      } as ICellRendererParams & { field: FieldMetadata };
+
+      renderer.init(initParams);
+
+      const refreshParams = {
+        value: 'updated value',
+        field,
+      } as ICellRendererParams & { field: FieldMetadata };
+
+      const result = renderer.refresh(refreshParams);
+
+      expect(result).toBe(true);
+      expect(renderer.eGui.textContent).toBe('updated value');
+    });
+
+    it('should clean up root on destroy', () => {
+      const field: FieldMetadata = {
+        name: 'testField',
+        label: 'Test Field',
+        type: 'text',
+      };
+
+      const params = {
+        value: 'test',
+        field,
+      } as ICellRendererParams & { field: FieldMetadata };
+
+      renderer.init(params);
+      
+      const unmountSpy = vi.spyOn(renderer.root!, 'unmount');
+      renderer.destroy();
+
+      expect(unmountSpy).toHaveBeenCalled();
+    });
+
+    it('should handle destroy when root is null', () => {
+      const field = {
+        name: 'testField',
+        label: 'Test Field',
+        type: 'unsupported_type',
+      } as unknown as FieldMetadata;
+
+      const params = {
+        value: 'test',
+        field,
+      } as ICellRendererParams & { field: FieldMetadata };
+
+      renderer.init(params);
+      
+      // Should not throw
+      expect(() => renderer.destroy()).not.toThrow();
+    });
+  });
+
+  describe('FieldWidgetCellEditor', () => {
+    let editor: FieldWidgetCellEditor;
+
+    beforeEach(() => {
+      editor = new FieldWidgetCellEditor();
+    });
+
+    afterEach(() => {
+      editor.destroy();
+    });
+
+    it('should initialize with a field widget for supported types', () => {
+      const field: FieldMetadata = {
+        name: 'testField',
+        label: 'Test Field',
+        type: 'text',
+      };
+
+      const params = {
+        value: 'initial value',
+        field,
+      } as ICellEditorParams & { field: FieldMetadata };
+
+      editor.init(params);
+
+      expect(editor.eGui).toBeDefined();
+      expect(editor.eGui.className).toBe('field-widget-editor');
+      expect(editor.root).toBeDefined();
+      expect(editor.currentValue).toBe('initial value');
+    });
+
+    it('should initialize with fallback input for unsupported types', () => {
+      const field = {
+        name: 'testField',
+        label: 'Test Field',
+        type: 'unsupported_type',
+      } as unknown as FieldMetadata;
+
+      const params = {
+        value: 'fallback value',
+        field,
+      } as ICellEditorParams & { field: FieldMetadata };
+
+      editor.init(params);
+
+      expect(editor.eGui).toBeDefined();
+      expect(editor.root).toBeNull();
+      const input = editor.eGui.querySelector('input');
+      expect(input).toBeDefined();
+      expect(input?.value).toBe('fallback value');
+    });
+
+    it('should return current value', () => {
+      const field: FieldMetadata = {
+        name: 'testField',
+        label: 'Test Field',
+        type: 'text',
+      };
+
+      const params = {
+        value: 'test value',
+        field,
+      } as ICellEditorParams & { field: FieldMetadata };
+
+      editor.init(params);
+
+      expect(editor.getValue()).toBe('test value');
+    });
+
+    it('should return the GUI element', () => {
+      const field: FieldMetadata = {
+        name: 'testField',
+        label: 'Test Field',
+        type: 'text',
+      };
+
+      const params = {
+        value: 'test',
+        field,
+      } as ICellEditorParams & { field: FieldMetadata };
+
+      editor.init(params);
+      const gui = editor.getGui();
+
+      expect(gui).toBe(editor.eGui);
+    });
+
+    it('should return true for popup editors for specific field types', () => {
+      const popupTypes = ['date', 'datetime', 'select', 'lookup', 'color'] as const;
+
+      popupTypes.forEach(type => {
+        const field: FieldMetadata = {
+          name: 'testField',
+          label: 'Test Field',
+          type,
+        };
+
+        const params = {
+          value: 'test',
+          field,
+        } as ICellEditorParams & { field: FieldMetadata };
+
+        const testEditor = new FieldWidgetCellEditor();
+        testEditor.init(params);
+
+        expect(testEditor.isPopup()).toBe(true);
+        testEditor.destroy();
+      });
+    });
+
+    it('should return false for popup editors for non-popup field types', () => {
+      const field: FieldMetadata = {
+        name: 'testField',
+        label: 'Test Field',
+        type: 'text',
+      };
+
+      const params = {
+        value: 'test',
+        field,
+      } as ICellEditorParams & { field: FieldMetadata };
+
+      editor.init(params);
+
+      expect(editor.isPopup()).toBe(false);
+    });
+
+    it('should clean up root on destroy', () => {
+      const field: FieldMetadata = {
+        name: 'testField',
+        label: 'Test Field',
+        type: 'text',
+      };
+
+      const params = {
+        value: 'test',
+        field,
+      } as ICellEditorParams & { field: FieldMetadata };
+
+      editor.init(params);
+      
+      const unmountSpy = vi.spyOn(editor.root!, 'unmount');
+      editor.destroy();
+
+      expect(unmountSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe('createFieldCellRenderer', () => {
+    it('should create a renderer class with field metadata', () => {
+      const field: FieldMetadata = {
+        name: 'testField',
+        label: 'Test Field',
+        type: 'text',
+      };
+
+      const RendererClass = createFieldCellRenderer(field);
+      const renderer = new RendererClass();
+
+      const params = {
+        value: 'test value',
+      } as ICellRendererParams;
+
+      renderer.init(params);
+
+      expect(renderer.eGui).toBeDefined();
+      renderer.destroy();
+    });
+  });
+
+  describe('createFieldCellEditor', () => {
+    it('should create an editor class with field metadata', () => {
+      const field: FieldMetadata = {
+        name: 'testField',
+        label: 'Test Field',
+        type: 'text',
+      };
+
+      const EditorClass = createFieldCellEditor(field);
+      const editor = new EditorClass();
+
+      const params = {
+        value: 'test value',
+      } as ICellEditorParams;
+
+      editor.init(params);
+
+      expect(editor.eGui).toBeDefined();
+      editor.destroy();
+    });
+  });
+});

package/src/field-renderers.tsx

@@ -0,0 +1,224 @@
+/**
+ * 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 { createRoot, type Root } from 'react-dom/client';
+import type { ICellRendererParams, ICellEditorParams } from 'ag-grid-community';
+import type { FieldMetadata } from '@object-ui/types';
+
+// Import field widgets
+import {
+  TextField,
+  NumberField,
+  BooleanField,
+  SelectField,
+  DateField,
+  DateTimeField,
+  TimeField,
+  EmailField,
+  PhoneField,
+  UrlField,
+  CurrencyField,
+  PercentField,
+  PasswordField,
+  TextAreaField,
+  ColorField,
+  RatingField,
+  ImageField,
+  AvatarField,
+  LookupField,
+  SliderField,
+  CodeField,
+} from '@object-ui/fields';
+
+/**
+ * Map field type to field widget component
+ * Defined at module level to avoid recreating on every call
+ */
+const widgetMap: Record<string, React.ComponentType<any>> = {
+  text: TextField,
+  textarea: TextAreaField,
+  number: NumberField,
+  currency: CurrencyField,
+  percent: PercentField,
+  boolean: BooleanField,
+  select: SelectField,
+  date: DateField,
+  datetime: DateTimeField,
+  time: TimeField,
+  email: EmailField,
+  phone: PhoneField,
+  url: UrlField,
+  password: PasswordField,
+  color: ColorField,
+  rating: RatingField,
+  image: ImageField,
+  avatar: AvatarField,
+  lookup: LookupField,
+  slider: SliderField,
+  code: CodeField,
+};
+
+function getFieldWidget(fieldType: string): React.ComponentType<any> | null {
+  return widgetMap[fieldType] || null;
+}
+
+/**
+ * AG Grid Cell Renderer using Field Widgets (Read-only mode)
+ */
+export class FieldWidgetCellRenderer {
+  public eGui!: HTMLDivElement;
+  public root: Root | null = null;
+
+  init(params: ICellRendererParams & { field: FieldMetadata }) {
+    const { value, field } = params;
+    const FieldWidget = getFieldWidget(field.type);
+
+    this.eGui = document.createElement('div');
+    this.eGui.className = 'field-widget-cell';
+
+    if (FieldWidget) {
+      this.root = createRoot(this.eGui);
+      this.root.render(
+        <FieldWidget
+          value={value}
+          onChange={() => {}} // No-op for read-only mode
+          field={field}
+          readonly={true}
+        />
+      );
+    } else {
+      // Fallback to text display
+      this.eGui.textContent = value != null ? String(value) : '';
+    }
+  }
+
+  getGui() {
+    return this.eGui;
+  }
+
+  refresh(params: ICellRendererParams & { field: FieldMetadata }): boolean {
+    const { value, field } = params;
+    const FieldWidget = getFieldWidget(field.type);
+
+    if (FieldWidget && this.root) {
+      this.root.render(
+        <FieldWidget
+          value={value}
+          onChange={() => {}} // No-op for read-only mode
+          field={field}
+          readonly={true}
+        />
+      );
+      return true;
+    }
+
+    // Fallback to text display when no FieldWidget is available
+    if (this.eGui) {
+      this.eGui.textContent = value != null ? String(value) : '';
+      return true;
+    }
+
+    return false;
+  }
+
+  destroy() {
+    if (this.root) {
+      this.root.unmount();
+    }
+  }
+}
+
+/**
+ * AG Grid Cell Editor using Field Widgets (Edit mode)
+ */
+export class FieldWidgetCellEditor {
+  public eGui!: HTMLDivElement;
+  public root: Root | null = null;
+  public currentValue: unknown;
+  public params!: ICellEditorParams & { field: FieldMetadata };
+
+  init(params: ICellEditorParams & { field: FieldMetadata }) {
+    this.params = params;
+    this.currentValue = params.value;
+    const { field } = params;
+    const FieldWidget = getFieldWidget(field.type);
+
+    this.eGui = document.createElement('div');
+    this.eGui.className = 'field-widget-editor';
+
+    if (FieldWidget) {
+      this.root = createRoot(this.eGui);
+      this.root.render(
+        <FieldWidget
+          value={this.currentValue}
+          onChange={(newValue: any) => {
+            this.currentValue = newValue;
+          }}
+          field={field}
+          readonly={false}
+        />
+      );
+    } else {
+      // Fallback to input element
+      const input = document.createElement('input');
+      input.value = this.currentValue != null ? String(this.currentValue) : '';
+      input.className = 'ag-input-field-input ag-text-field-input';
+      input.addEventListener('input', (e) => {
+        this.currentValue = (e.target as HTMLInputElement).value;
+      });
+      this.eGui.appendChild(input);
+      setTimeout(() => input.focus(), 0);
+    }
+  }
+
+  getGui() {
+    return this.eGui;
+  }
+
+  getValue() {
+    return this.currentValue;
+  }
+
+  destroy() {
+    if (this.root) {
+      this.root.unmount();
+    }
+  }
+
+  isPopup(): boolean {
+    // Return true for complex widgets that need more space
+    const popupTypes = ['date', 'datetime', 'select', 'lookup', 'color'];
+    return popupTypes.includes(this.params.field.type);
+  }
+}
+
+/**
+ * Factory function to create cell renderer with field metadata
+ */
+export function createFieldCellRenderer(field: FieldMetadata) {
+  return class extends FieldWidgetCellRenderer {
+    init(params: ICellRendererParams) {
+      super.init({ ...params, field });
+    }
+    refresh(params: ICellRendererParams): boolean {
+      return super.refresh({ ...params, field });
+    }
+  };
+}
+
+/**
+ * Factory function to create cell editor with field metadata
+ */
+export function createFieldCellEditor(field: FieldMetadata) {
+  return class extends FieldWidgetCellEditor {
+    init(params: ICellEditorParams) {
+      super.init({ ...params, field });
+    }
+  };
+}

package/src/index.tsx

@@ -19,10 +19,10 @@ 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';
+export type { AgGridSchema, SimpleColumnDef, AgGridCallbacks, ExportConfig, StatusBarConfig, ColumnConfig, ContextMenuConfig, TreeDataConfig, RowGroupingConfig, ExcelExportConfig } from './types';
 export type { ObjectAgGridSchema } from './object-aggrid.types';
 
-import type { AgGridCallbacks, ExportConfig, StatusBarConfig, ColumnConfig, ContextMenuConfig } from './types';
+import type { AgGridCallbacks, ExportConfig, StatusBarConfig, ColumnConfig, ContextMenuConfig, TreeDataConfig, RowGroupingConfig, ExcelExportConfig } from './types';
 import type { DataSource } from '@object-ui/types';
 
 // 🚀 Lazy load the implementation file
@@ -56,6 +56,9 @@ export interface AgGridRendererProps {
     enableRangeSelection?: boolean;
     enableCharts?: boolean;
     contextMenu?: ContextMenuConfig;
+    treeData?: TreeDataConfig;
+    rowGrouping?: RowGroupingConfig;
+    excelExport?: ExcelExportConfig;
   };
 }
 
@@ -89,6 +92,9 @@ export const AgGridRenderer: React.FC<AgGridRendererProps> = ({ schema }) => {
         enableRangeSelection={schema.enableRangeSelection}
         enableCharts={schema.enableCharts}
         contextMenu={schema.contextMenu}
+        treeData={schema.treeData}
+        rowGrouping={schema.rowGrouping}
+        excelExport={schema.excelExport}
       />
     </Suspense>
   );
@@ -247,6 +253,27 @@ ComponentRegistry.register(
         description: 'Configure right-click menu: { enabled: true, items: ["copy", "export"] }',
         advanced: true
       },
+      { 
+        name: 'treeData', 
+        type: 'code', 
+        label: 'Tree Data Config (JSON)',
+        description: 'Configure tree data: { enabled: true, pathField: "orgHierarchy" }',
+        advanced: true
+      },
+      { 
+        name: 'rowGrouping', 
+        type: 'code', 
+        label: 'Row Grouping Config (JSON)',
+        description: 'Configure row grouping: { enabled: true, groupByFields: ["category"] }',
+        advanced: true
+      },
+      { 
+        name: 'excelExport', 
+        type: 'code', 
+        label: 'Excel Export Config (JSON)',
+        description: 'Configure Excel export: { enabled: true, fileName: "data.xlsx" }',
+        advanced: true
+      },
       { 
         name: 'gridOptions', 
         type: 'code', 
@@ -390,7 +417,7 @@ ComponentRegistry.register(
     namespace: 'plugin-aggrid',
     label: 'Object AG Grid',
     icon: 'Table',
-    category: 'plugin',
+    category: 'view',
     inputs: [
       { 
         name: 'objectName',