@object-ui/plugin-aggrid 0.4.1 → 0.5.0

package/src/index.tsx

@@ -20,12 +20,15 @@ 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 { ObjectAgGridSchema } from './object-aggrid.types';
 
 import type { AgGridCallbacks, ExportConfig, StatusBarConfig, ColumnConfig, ContextMenuConfig } from './types';
+import type { DataSource } from '@object-ui/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'));
+const LazyObjectAgGrid = React.lazy(() => import('./ObjectAgGridImpl'));
 
 export interface AgGridRendererProps {
   schema: {
@@ -96,6 +99,7 @@ ComponentRegistry.register(
   'aggrid',
   AgGridRenderer,
   {
+    namespace: 'plugin-aggrid',
     label: 'AG Grid',
     icon: 'Table',
     category: 'plugin',
@@ -299,7 +303,185 @@ ComponentRegistry.register(
   }
 );
 
+/**
+ * ObjectAgGridRenderer - The public API for the metadata-driven AG Grid component
+ * This wrapper handles lazy loading internally using React.Suspense
+ */
+export interface ObjectAgGridRendererProps {
+  schema: {
+    type: string;
+    id?: string;
+    className?: string;
+    objectName: string;
+    dataSource?: DataSource;
+    fields?: any[];
+    fieldNames?: string[];
+    filters?: Record<string, any>;
+    sort?: Record<string, 'asc' | 'desc'>;
+    pageSize?: number;
+    pagination?: boolean;
+    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 & {
+      onDataLoaded?: (data: any[]) => void;
+      onDataError?: (error: Error) => void;
+    };
+    columnConfig?: ColumnConfig;
+    enableRangeSelection?: boolean;
+    enableCharts?: boolean;
+    contextMenu?: ContextMenuConfig;
+  };
+}
+
+export const ObjectAgGridRenderer: React.FC<ObjectAgGridRendererProps> = ({ schema }) => {
+  return (
+    <Suspense fallback={<Skeleton className="w-full h-[500px]" />}>
+      <LazyObjectAgGrid
+        objectName={schema.objectName}
+        dataSource={schema.dataSource}
+        fields={schema.fields}
+        fieldNames={schema.fieldNames}
+        filters={schema.filters}
+        sort={schema.sort}
+        pageSize={schema.pageSize}
+        pagination={schema.pagination}
+        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>
+  );
+};
+
 // Standard Export Protocol - for manual integration
 export const aggridComponents = {
   'aggrid': AgGridRenderer,
+  'object-aggrid': ObjectAgGridRenderer,
 };
+
+// Register the ObjectAgGrid component with the ComponentRegistry
+ComponentRegistry.register(
+  'object-aggrid',
+  ObjectAgGridRenderer,
+  {
+    namespace: 'plugin-aggrid',
+    label: 'Object AG Grid',
+    icon: 'Table',
+    category: 'plugin',
+    inputs: [
+      { 
+        name: 'objectName', 
+        type: 'string', 
+        label: 'Object Name',
+        description: 'Name of the object to fetch metadata and data from',
+        required: true
+      },
+      { 
+        name: 'dataSource', 
+        type: 'object', 
+        label: 'Data Source',
+        description: 'ObjectStack data source adapter instance',
+        required: true
+      },
+      { 
+        name: 'fieldNames', 
+        type: 'array', 
+        label: 'Field Names',
+        description: 'Optional: Specify which fields to show (defaults to all fields)',
+      },
+      { 
+        name: 'filters', 
+        type: 'object', 
+        label: 'Filters',
+        description: 'Query filters to apply to the data',
+      },
+      { 
+        name: 'sort', 
+        type: 'object', 
+        label: 'Sort',
+        description: 'Sorting configuration: { fieldName: "asc" | "desc" }',
+      },
+      { 
+        name: 'pagination', 
+        type: 'boolean', 
+        label: 'Enable Pagination',
+        defaultValue: true
+      },
+      { 
+        name: 'pageSize', 
+        type: 'number', 
+        label: 'Page Size',
+        defaultValue: 10,
+        description: 'Number of rows per page'
+      },
+      {
+        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: '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: 'exportConfig', 
+        type: 'code', 
+        label: 'Export Config (JSON)',
+        description: 'Configure CSV export: { enabled: true, fileName: "data.csv" }',
+        advanced: true
+      },
+      { 
+        name: 'columnConfig', 
+        type: 'code', 
+        label: 'Column Config (JSON)',
+        description: 'Global column settings: { resizable: true, sortable: true, filterable: true }',
+        advanced: true
+      },
+      { 
+        name: 'className', 
+        type: 'string', 
+        label: 'CSS Class' 
+      }
+    ]
+  }
+);

package/src/object-aggrid.test.ts

@@ -0,0 +1,99 @@
+/**
+ * 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 } from 'vitest';
+import { ObjectAgGridRenderer } from './index';
+import type { DataSource } from '@object-ui/types';
+
+describe('ObjectAgGridRenderer', () => {
+  let mockDataSource: DataSource;
+
+  beforeEach(() => {
+    mockDataSource = {
+      find: vi.fn().mockResolvedValue({
+        data: [
+          { id: '1', name: 'Test 1', email: 'test1@example.com' },
+          { id: '2', name: 'Test 2', email: 'test2@example.com' }
+        ],
+        total: 2,
+        page: 1,
+        pageSize: 10,
+        hasMore: false
+      }),
+      findOne: vi.fn(),
+      create: vi.fn(),
+      update: vi.fn(),
+      delete: vi.fn(),
+      bulk: vi.fn(),
+      getObjectSchema: vi.fn().mockResolvedValue({
+        name: 'contacts',
+        label: 'Contacts',
+        fields: {
+          name: {
+            name: 'name',
+            label: 'Name',
+            type: 'text',
+            sortable: true,
+            filterable: true
+          },
+          email: {
+            name: 'email',
+            label: 'Email',
+            type: 'email',
+            sortable: true,
+            filterable: true
+          }
+        }
+      })
+    } as any;
+  });
+
+  it('should be defined', () => {
+    expect(ObjectAgGridRenderer).toBeDefined();
+  });
+
+  it('should accept schema with objectName and dataSource', () => {
+    const schema = {
+      type: 'object-aggrid',
+      objectName: 'contacts',
+      dataSource: mockDataSource
+    };
+
+    expect(() => {
+      ObjectAgGridRenderer({ schema });
+    }).not.toThrow();
+  });
+
+  it('should accept optional pagination settings', () => {
+    const schema = {
+      type: 'object-aggrid',
+      objectName: 'contacts',
+      dataSource: mockDataSource,
+      pagination: true,
+      pageSize: 20
+    };
+
+    expect(() => {
+      ObjectAgGridRenderer({ schema });
+    }).not.toThrow();
+  });
+
+  it('should accept optional filters and sorting', () => {
+    const schema = {
+      type: 'object-aggrid',
+      objectName: 'contacts',
+      dataSource: mockDataSource,
+      filters: { status: 'active' },
+      sort: { name: 'asc' as const }
+    };
+
+    expect(() => {
+      ObjectAgGridRenderer({ schema });
+    }).not.toThrow();
+  });
+});

package/src/object-aggrid.types.ts

@@ -0,0 +1,123 @@
+/**
+ * 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 } from 'ag-grid-community';
+import type { DataSource } from '@object-ui/types';
+import type { FieldMetadata } from '@object-ui/types';
+import type { AgGridCallbacks, ExportConfig, StatusBarConfig, ColumnConfig, ContextMenuConfig } from './types';
+
+/**
+ * Object AgGrid schema for metadata-driven grid
+ */
+export interface ObjectAgGridSchema {
+  type: 'object-aggrid';
+  id?: string;
+  className?: string;
+  
+  // Object metadata
+  objectName: string;
+  dataSource: DataSource;  // Required for metadata-driven grid
+  
+  // Optional field configuration override
+  fields?: FieldMetadata[];
+  fieldNames?: string[]; // Show only specific fields
+  
+  // Query parameters
+  filters?: Record<string, any>;
+  sort?: Record<string, 'asc' | 'desc'>;
+  pageSize?: number;
+  
+  // Grid configuration (same as aggrid)
+  pagination?: boolean;
+  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 & {
+    onDataLoaded?: (data: any[]) => void;
+    onDataError?: (error: Error) => void;
+  };
+  
+  // Styling
+  theme?: 'alpine' | 'balham' | 'material' | 'quartz';
+  height?: number | string;
+}
+
+/**
+ * Props for ObjectAgGridImpl component
+ */
+export interface ObjectAgGridImplProps {
+  objectName: string;
+  dataSource?: DataSource;  // Optional in props, but required for functionality
+  fields?: FieldMetadata[];
+  fieldNames?: string[];
+  filters?: Record<string, any>;
+  sort?: Record<string, 'asc' | 'desc'>;
+  pageSize?: number;
+  pagination?: boolean;
+  domLayout?: 'normal' | 'autoHeight' | 'print';
+  animateRows?: boolean;
+  rowSelection?: 'single' | 'multiple';
+  theme?: 'alpine' | 'balham' | 'material' | 'quartz';
+  height?: number | string;
+  className?: string;
+  editable?: boolean;
+  editType?: 'fullRow';
+  singleClickEdit?: boolean;
+  stopEditingWhenCellsLoseFocus?: boolean;
+  exportConfig?: ExportConfig;
+  statusBar?: StatusBarConfig;
+  callbacks?: AgGridCallbacks & {
+    onDataLoaded?: (data: any[]) => void;
+    onDataError?: (error: Error) => void;
+  };
+  columnConfig?: ColumnConfig;
+  enableRangeSelection?: boolean;
+  enableCharts?: boolean;
+  contextMenu?: ContextMenuConfig;
+}
+
+/**
+ * Field type to AG Grid filter type mapping
+ */
+export const FIELD_TYPE_TO_FILTER_TYPE: Record<string, string | boolean> = {
+  text: 'agTextColumnFilter',
+  textarea: 'agTextColumnFilter',
+  number: 'agNumberColumnFilter',
+  currency: 'agNumberColumnFilter',
+  percent: 'agNumberColumnFilter',
+  boolean: 'agSetColumnFilter',
+  date: 'agDateColumnFilter',
+  datetime: 'agDateColumnFilter',
+  time: 'agTextColumnFilter',
+  email: 'agTextColumnFilter',
+  phone: 'agTextColumnFilter',
+  url: 'agTextColumnFilter',
+  select: 'agSetColumnFilter',
+};

package/vite.config.ts

@@ -24,6 +24,13 @@ export default defineConfig({
   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-dashboard': resolve(__dirname, '../plugin-dashboard/src'),
+      '@object-ui/plugin-grid': resolve(__dirname, '../plugin-grid/src'),
     },
   },
   build: {
@@ -47,4 +54,10 @@ export default defineConfig({
       },
     },
   },
+  test: {
+    globals: true,
+    environment: 'happy-dom',
+    setupFiles: ['../../vitest.setup.tsx'],
+    passWithNoTests: true,
+  },
 });