@object-ui/plugin-grid 0.3.0 → 0.5.0

package/src/VirtualGrid.tsx

@@ -0,0 +1,183 @@
+/**
+ * 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.
+ */
+
+/**
+ * VirtualGrid Component
+ * 
+ * Implements virtual scrolling using @tanstack/react-virtual for efficient
+ * rendering of large datasets. Only renders visible rows, dramatically improving
+ * performance with datasets of 1000+ items.
+ * 
+ * Features:
+ * - Virtual scrolling for rows
+ * - Configurable row height
+ * - Overscan for smooth scrolling
+ * - Minimal DOM nodes (only visible items)
+ */
+
+import React, { useRef } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+
+export interface VirtualGridColumn {
+  header: string;
+  accessorKey: string;
+  cell?: (value: any, row: any) => React.ReactNode;
+  width?: number | string;
+  align?: 'left' | 'center' | 'right';
+}
+
+export interface VirtualGridProps {
+  data: any[];
+  columns: VirtualGridColumn[];
+  rowHeight?: number;
+  height?: number | string;
+  className?: string;
+  headerClassName?: string;
+  rowClassName?: string | ((row: any, index: number) => string);
+  onRowClick?: (row: any, index: number) => void;
+  overscan?: number;
+}
+
+/**
+ * Virtual scrolling grid component
+ * 
+ * @example
+ * ```tsx
+ * <VirtualGrid
+ *   data={items}
+ *   columns={[
+ *     { header: 'Name', accessorKey: 'name' },
+ *     { header: 'Age', accessorKey: 'age' },
+ *   ]}
+ *   rowHeight={40}
+ * />
+ * ```
+ */
+export const VirtualGrid: React.FC<VirtualGridProps> = ({
+  data,
+  columns,
+  rowHeight = 40,
+  height = 600,
+  className = '',
+  headerClassName = '',
+  rowClassName,
+  onRowClick,
+  overscan = 5,
+}) => {
+  const parentRef = useRef<HTMLDivElement>(null);
+
+  const virtualizer = useVirtualizer({
+    count: data.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => rowHeight,
+    overscan,
+  });
+
+  const items = virtualizer.getVirtualItems();
+
+  return (
+    <div className={className}>
+      {/* Header */}
+      <div
+        className={`grid border-b sticky top-0 bg-background z-10 ${headerClassName}`}
+        style={{
+          gridTemplateColumns: columns
+            .map((col) => col.width || '1fr')
+            .join(' '),
+        }}
+      >
+        {columns.map((column, index) => (
+          <div
+            key={index}
+            className={`px-4 py-2 font-semibold text-sm ${
+              column.align === 'center'
+                ? 'text-center'
+                : column.align === 'right'
+                ? 'text-right'
+                : 'text-left'
+            }`}
+          >
+            {column.header}
+          </div>
+        ))}
+      </div>
+
+      {/* Virtual scrolling container */}
+      <div
+        ref={parentRef}
+        className="overflow-auto"
+        style={{ 
+          height: typeof height === 'number' ? `${height}px` : height,
+          contain: 'strict' 
+        }}
+      >
+        <div
+          style={{
+            height: `${virtualizer.getTotalSize()}px`,
+            width: '100%',
+            position: 'relative',
+          }}
+        >
+          {items.map((virtualRow) => {
+            const row = data[virtualRow.index];
+            const rowClasses =
+              typeof rowClassName === 'function'
+                ? rowClassName(row, virtualRow.index)
+                : rowClassName || '';
+
+            return (
+              <div
+                key={virtualRow.key}
+                className={`grid border-b hover:bg-muted/50 cursor-pointer ${rowClasses}`}
+                style={{
+                  position: 'absolute',
+                  top: 0,
+                  left: 0,
+                  width: '100%',
+                  height: `${virtualRow.size}px`,
+                  transform: `translateY(${virtualRow.start}px)`,
+                  gridTemplateColumns: columns
+                    .map((col) => col.width || '1fr')
+                    .join(' '),
+                }}
+                onClick={() => onRowClick?.(row, virtualRow.index)}
+              >
+                {columns.map((column, colIndex) => {
+                  const value = row[column.accessorKey];
+                  const cellContent = column.cell
+                    ? column.cell(value, row)
+                    : value;
+
+                  return (
+                    <div
+                      key={colIndex}
+                      className={`px-4 py-2 text-sm flex items-center ${
+                        column.align === 'center'
+                          ? 'text-center justify-center'
+                          : column.align === 'right'
+                          ? 'text-right justify-end'
+                          : 'text-left justify-start'
+                      }`}
+                    >
+                      {cellContent}
+                    </div>
+                  );
+                })}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Footer info */}
+      <div className="px-4 py-2 text-xs text-muted-foreground border-t">
+        Showing {items.length} of {data.length} rows (virtual scrolling enabled)
+      </div>
+    </div>
+  );
+};

package/src/index.test.tsx

@@ -0,0 +1,29 @@
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { SchemaRendererProvider } from '@object-ui/react';
+import * as ObjectGridModule from './ObjectGrid';
+import { ObjectGridRenderer } from './index';
+
+describe('Plugin Grid Registration', () => {
+  it('renderer passes dataSource from context', async () => {
+    // Spy and mock implementation
+    vi.spyOn(ObjectGridModule, 'ObjectGrid').mockImplementation(
+      (({ dataSource }: any) => (
+        <div data-testid="grid-mock">
+            {dataSource ? `DataSource: ${dataSource.type}` : 'No DataSource'}
+        </div>
+      )) as any
+    );
+
+    render(
+      <SchemaRendererProvider dataSource={{ type: 'mock-datasource' } as any}>
+        <ObjectGridRenderer schema={{ type: 'object-grid' }} />
+      </SchemaRendererProvider>
+    );
+    
+    // Use findByTestId for async safety
+    const element = await screen.findByTestId('grid-mock', {}, { timeout: 5000 });
+    expect(element).toHaveTextContent('DataSource: mock-datasource');
+  });
+});

package/src/index.tsx

@@ -8,15 +8,33 @@
 
 import React from 'react';
 import { ComponentRegistry } from '@object-ui/core';
+import { useSchemaContext } from '@object-ui/react';
 import { ObjectGrid } from './ObjectGrid';
+import { VirtualGrid } from './VirtualGrid';
 
-export { ObjectGrid };
+export { ObjectGrid, VirtualGrid };
 export type { ObjectGridProps } from './ObjectGrid';
+export type { VirtualGridProps, VirtualGridColumn } from './VirtualGrid';
 
 // Register object-grid component
-const ObjectGridRenderer: React.FC<{ schema: any }> = ({ schema }) => {
-  return <ObjectGrid schema={schema} dataSource={null as any} />;
+export const ObjectGridRenderer: React.FC<{ schema: any; [key: string]: any }> = ({ schema, ...props }) => {
+  const { dataSource } = useSchemaContext() || {};
+  return <ObjectGrid schema={schema} dataSource={dataSource} {...props} />;
 };
 
-ComponentRegistry.register('object-grid', ObjectGridRenderer);
-ComponentRegistry.register('grid', ObjectGridRenderer); // Alias
+ComponentRegistry.register('object-grid', ObjectGridRenderer, {
+  namespace: 'plugin-grid',
+  label: 'Object Grid',
+  category: 'plugin'
+});
+
+// Alias for view namespace - this allows using { type: 'view:grid' } in schemas
+// which is semantically meaningful for data display components
+ComponentRegistry.register('grid', ObjectGridRenderer, {
+  namespace: 'view',
+  label: 'Data Grid',
+  category: 'view'
+});
+
+// Note: 'grid' type is handled by @object-ui/components Grid layout component
+// This plugin only handles 'object-grid' which integrates with ObjectQL/ObjectStack

package/vite.config.ts

@@ -11,6 +11,18 @@ export default defineConfig({
       include: ['src'],
     }),
   ],
+  resolve: {
+    alias: {
+      '@object-ui/core': resolve(__dirname, '../core/src'),
+      '@object-ui/types': resolve(__dirname, '../types/src'),
+      '@object-ui/data-objectstack': resolve(__dirname, '../data-objectstack/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: {
     lib: {
       entry: resolve(__dirname, 'src/index.tsx'),
@@ -36,4 +48,10 @@ export default defineConfig({
       },
     },
   },
+  test: {
+    globals: true,
+    environment: 'happy-dom',
+    setupFiles: ['../../vitest.setup.tsx'],
+    passWithNoTests: true,
+  },
 });

package/vitest.config.ts

@@ -0,0 +1,13 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'happy-dom',
+    globals: true,
+    setupFiles: ['./vitest.setup.ts'],
+  },
+});

package/vitest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/plugin-grid/src/index.d.ts

@@ -1,3 +0,0 @@
-import { ObjectGrid } from './ObjectGrid';
-export { ObjectGrid };
-export type { ObjectGridProps } from './ObjectGrid';