@object-ui/plugin-aggrid 0.4.1 → 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.test.ts

@@ -13,7 +13,7 @@ describe('Plugin AgGrid', () => {
   // Import all renderers to register them
   beforeAll(async () => {
     await import('./index');
-  });
+  }, 15000); // Increase timeout to 15 seconds for async import
 
   describe('aggrid component', () => {
     it('should be registered in ComponentRegistry', () => {