@object-ui/plugin-list 0.5.0

package/src/ViewSwitcher.tsx

@@ -0,0 +1,92 @@
+/**
+ * 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 * as React from 'react';
+import { cn } from '@object-ui/components';
+import { 
+  Grid, 
+  LayoutGrid, 
+  Calendar, 
+  Images,    // gallery
+  Activity,  // timeline
+  GanttChartSquare, // gantt
+  Map,        // map
+} from 'lucide-react';
+
+export type ViewType = 
+  | 'grid' 
+  | 'kanban' 
+  | 'gallery' 
+  | 'calendar' 
+  | 'timeline'
+  | 'gantt'
+  | 'map';
+
+export interface ViewSwitcherProps {
+  currentView: ViewType;
+  availableViews?: ViewType[];
+  onViewChange: (view: ViewType) => void;
+  className?: string;
+}
+
+const VIEW_ICONS: Record<ViewType, React.ReactNode> = {
+  grid: <Grid className="h-4 w-4" />,
+  kanban: <LayoutGrid className="h-4 w-4" />,
+  gallery: <Images className="h-4 w-4" />,
+  calendar: <Calendar className="h-4 w-4" />,
+  timeline: <Activity className="h-4 w-4" />,
+  gantt: <GanttChartSquare className="h-4 w-4" />,
+  map: <Map className="h-4 w-4" />,
+};
+
+const VIEW_LABELS: Record<ViewType, string> = {
+  grid: 'Grid',
+  kanban: 'Kanban',
+  gallery: 'Gallery',
+  calendar: 'Calendar',
+  timeline: 'Timeline',
+  gantt: 'Gantt',
+  map: 'Map',
+};
+
+export const ViewSwitcher: React.FC<ViewSwitcherProps> = ({
+  currentView,
+  availableViews = ['grid', 'kanban'],
+  onViewChange,
+  className,
+}) => {
+  return (
+    <div className={cn("flex items-center gap-1 bg-transparent", className)}>
+      {availableViews.map((view) => {
+        const isActive = currentView === view;
+        return (
+          <button
+            key={view}
+            type="button"
+            onClick={() => onViewChange(view)}
+            aria-label={VIEW_LABELS[view]}
+            title={VIEW_LABELS[view]}
+            aria-pressed={isActive}
+            data-state={isActive ? 'on' : 'off'}
+            className={cn(
+              "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+              "hover:bg-muted hover:text-muted-foreground",
+              "gap-2 px-3 py-2",
+              "data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-sm border-transparent border data-[state=on]:border-border/50",
+            )}
+          >
+            {VIEW_ICONS[view]}
+            <span className="hidden sm:inline-block text-xs font-medium">
+              {VIEW_LABELS[view]}
+            </span>
+          </button>
+        );
+      })}
+    </div>
+  );
+};

package/src/__tests__/ListView.test.tsx

@@ -0,0 +1,215 @@
+/**
+ * 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 { render, screen, fireEvent } from '@testing-library/react';
+import { ListView } from '../ListView';
+import type { ListViewSchema } from '@object-ui/types';
+import { SchemaRendererProvider } from '@object-ui/react';
+
+// Mock localStorage
+const localStorageMock = (() => {
+  let store: Record<string, string> = {};
+  return {
+    getItem: (key: string) => store[key] || null,
+    setItem: (key: string, value: string) => { store[key] = value; },
+    clear: () => { store = {}; },
+    removeItem: (key: string) => { delete store[key]; },
+  };
+})();
+
+const mockDataSource = {
+  find: vi.fn().mockResolvedValue([]),
+  findOne: vi.fn(),
+  create: vi.fn(),
+  update: vi.fn(),
+  delete: vi.fn(),
+};
+
+const renderWithProvider = (component: React.ReactNode) => {
+  return render(
+    <SchemaRendererProvider dataSource={mockDataSource}>
+      {component}
+    </SchemaRendererProvider>
+  );
+};
+
+Object.defineProperty(window, 'localStorage', { value: localStorageMock });
+
+describe('ListView', () => {
+  beforeEach(() => {
+    localStorageMock.clear();
+  });
+
+  it('should be exported', () => {
+    expect(ListView).toBeDefined();
+  });
+
+  it('should be a function', () => {
+    expect(typeof ListView).toBe('function');
+  });
+
+  it('should render with basic schema', () => {
+    const schema: ListViewSchema = {
+      type: 'list-view',
+      objectName: 'contacts',
+      viewType: 'grid',
+      fields: ['name', 'email'],
+    };
+
+    const { container } = renderWithProvider(<ListView schema={schema} />);
+    expect(container).toBeTruthy();
+  });
+
+  it('should render search input', () => {
+    const schema: ListViewSchema = {
+      type: 'list-view',
+      objectName: 'contacts',
+      viewType: 'grid',
+      fields: ['name', 'email'],
+    };
+
+    renderWithProvider(<ListView schema={schema} />);
+    const searchInput = screen.getByPlaceholderText(/find/i);
+    expect(searchInput).toBeInTheDocument();
+  });
+
+  it('should call onSearchChange when search input changes', () => {
+    const onSearchChange = vi.fn();
+    const schema: ListViewSchema = {
+      type: 'list-view',
+      objectName: 'contacts',
+      viewType: 'grid',
+      fields: ['name', 'email'],
+    };
+
+    renderWithProvider(<ListView schema={schema} onSearchChange={onSearchChange} />);
+    const searchInput = screen.getByPlaceholderText(/find/i);
+    
+    fireEvent.change(searchInput, { target: { value: 'test' } });
+    expect(onSearchChange).toHaveBeenCalledWith('test');
+  });
+
+  it('should persist view preference to localStorage', () => {
+    const schema: ListViewSchema = {
+      type: 'list-view',
+      objectName: 'contacts',
+      viewType: 'grid',
+      fields: ['name', 'email'],
+      options: {
+        kanban: {
+          groupField: 'status',
+        },
+      },
+    };
+
+    renderWithProvider(<ListView schema={schema} />);
+    
+    // Find kanban view button and click it
+    // ViewSwitcher uses buttons with aria-label
+    const kanbanButton = screen.getByLabelText('Kanban');
+
+    fireEvent.click(kanbanButton);
+    
+    // localStorage should be set with new view
+    const storageKey = 'listview-contacts-view';
+    expect(localStorageMock.getItem(storageKey)).toBe('kanban');
+  });
+
+  it('should call onViewChange when view is changed', () => {
+    const onViewChange = vi.fn();
+    const schema: ListViewSchema = {
+      type: 'list-view',
+      objectName: 'contacts',
+      viewType: 'grid',
+      fields: ['name', 'email'],
+    };
+
+    renderWithProvider(<ListView schema={schema} onViewChange={onViewChange} />);
+    
+    // Simulate view change by updating the view prop in ViewSwitcher
+    // Since we can't easily trigger the actual view switcher in tests,
+    // we verify the callback is properly passed to the component
+    expect(onViewChange).toBeDefined();
+    
+    // If we could trigger view change, we would expect:
+    // expect(onViewChange).toHaveBeenCalledWith('list');
+  });
+
+  it('should toggle filter panel when filter button is clicked', () => {
+    const schema: ListViewSchema = {
+      type: 'list-view',
+      objectName: 'contacts',
+      viewType: 'grid',
+      fields: ['name', 'email'],
+    };
+
+    renderWithProvider(<ListView schema={schema} />);
+    
+    // Find filter button (by icon or aria-label)
+    const buttons = screen.getAllByRole('button');
+    const filterButton = buttons.find(btn => 
+      btn.querySelector('svg') !== null
+    );
+    
+    if (filterButton) {
+      fireEvent.click(filterButton);
+      // After click, filter panel should be visible
+    }
+  });
+
+  it('should handle sort order toggle', () => {
+    const onSortChange = vi.fn();
+    const schema: ListViewSchema = {
+      type: 'list-view',
+      objectName: 'contacts',
+      viewType: 'grid',
+      fields: ['name', 'email'],
+      sort: [{ field: 'name', order: 'asc' }],
+    };
+
+    renderWithProvider(<ListView schema={schema} onSortChange={onSortChange} />);
+    
+    // Find sort button
+    const buttons = screen.getAllByRole('button');
+    const sortButton = buttons.find(btn => 
+      btn.querySelector('svg') !== null
+    );
+    
+    if (sortButton) {
+      fireEvent.click(sortButton);
+      // onSortChange should be called with new order
+    }
+  });
+
+  it('should clear search when clear button is clicked', () => {
+    const schema: ListViewSchema = {
+      type: 'list-view',
+      objectName: 'contacts',
+      viewType: 'grid',
+      fields: ['name', 'email'],
+    };
+
+    renderWithProvider(<ListView schema={schema} />);
+    const searchInput = screen.getByPlaceholderText(/find/i) as HTMLInputElement;
+    
+    // Type in search
+    fireEvent.change(searchInput, { target: { value: 'test' } });
+    expect(searchInput.value).toBe('test');
+    
+    // Find and click clear button
+    const buttons = screen.getAllByRole('button');
+    const clearButton = buttons.find(btn => 
+      btn.querySelector('svg') !== null && searchInput.value !== ''
+    );
+    
+    if (clearButton) {
+      fireEvent.click(clearButton);
+    }
+  });
+});

package/src/__tests__/ListViewPersistence.test.tsx

@@ -0,0 +1,126 @@
+/**
+ * ObjectUI -- Persistence Tests
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ListView } from '../ListView';
+import type { ListViewSchema } from '@object-ui/types';
+import { SchemaRendererProvider } from '@object-ui/react';
+
+// Mock localStorage
+const localStorageMock = (() => {
+  let store: Record<string, string> = {};
+  return {
+    getItem: (key: string) => store[key] || null,
+    setItem: (key: string, value: string) => { store[key] = value; },
+    clear: () => { store = {}; },
+    removeItem: (key: string) => { delete store[key]; },
+  };
+})();
+
+const mockDataSource = {
+  find: vi.fn().mockResolvedValue([]),
+  findOne: vi.fn(),
+  create: vi.fn(),
+  update: vi.fn(),
+  delete: vi.fn(),
+};
+
+const renderWithProvider = (component: React.ReactNode) => {
+  return render(
+    <SchemaRendererProvider dataSource={mockDataSource}>
+      {component}
+    </SchemaRendererProvider>
+  );
+};
+
+Object.defineProperty(window, 'localStorage', { value: localStorageMock });
+
+describe('ListView Persistence', () => {
+  beforeEach(() => {
+    localStorageMock.clear();
+    vi.clearAllMocks();
+  });
+
+  it('should use unique storage key when schema.id is provided', () => {
+    const schema: ListViewSchema = {
+      type: 'list-view',
+      id: 'my-custom-view',
+      objectName: 'tasks',
+      viewType: 'grid', // Start with grid
+      options: {
+        kanban: {
+          groupField: 'status',
+        },
+      },
+    };
+
+    renderWithProvider(<ListView schema={schema} />);
+    
+    // Simulate changing to kanban view
+    const kanbanButton = screen.getByLabelText('Kanban'); 
+    fireEvent.click(kanbanButton);
+    
+    // Check scoped storage key
+    const expectedKey = 'listview-tasks-my-custom-view-view';
+    expect(localStorageMock.getItem(expectedKey)).toBe('kanban');
+    
+    // Check fallback key is NOT set
+    expect(localStorageMock.getItem('listview-tasks-view')).toBeNull();
+  });
+
+  it('should not conflict with other views of the same object', () => {
+     // Setup: View A (Global/Default) prefers Grid
+     localStorageMock.setItem('listview-tasks-view', 'grid');
+     
+     // Setup: View B (Special) prefers Kanban
+     // We define View B with valid options for Kanban to force it to render the button
+     
+     const viewB_Schema: ListViewSchema = {
+        type: 'list-view',
+        id: 'special-view',
+        objectName: 'tasks',
+        viewType: 'kanban', // Default to Kanban
+        options: {
+          kanban: {
+            groupField: 'status',
+          },
+        },
+     };
+
+     renderWithProvider(<ListView schema={viewB_Schema} />);
+     
+     // Should use the schema default 'kanban' (since no storage exists for THIS view id)
+     // It should NOT use 'grid' from the global/default view.
+     
+     const kanbanButton = screen.getByLabelText('Kanban');
+     expect(kanbanButton.getAttribute('data-state')).toBe('on');
+     
+     const gridButton = screen.getByLabelText('Grid');
+     expect(gridButton.getAttribute('data-state')).toBe('off');
+  });
+  
+  it('should switch correctly when storage has a value for THIS view', () => {
+      // Setup: This specific view was previously set to 'kanban'
+      localStorageMock.setItem('listview-tasks-my-board-view', 'kanban');
+      
+      const schema: ListViewSchema = {
+          type: 'list-view',
+          id: 'my-board',
+          objectName: 'tasks',
+          viewType: 'grid', // Default in schema is grid
+          options: {
+            kanban: {
+              groupField: 'status',
+            },
+          },
+      };
+      
+      renderWithProvider(<ListView schema={schema} />);
+      
+      // Should respect storage ('kanban') over schema ('grid')
+      const kanbanButton = screen.getByLabelText('Kanban');
+      expect(kanbanButton.getAttribute('data-state')).toBe('on');
+  });
+});

package/src/index.tsx

@@ -0,0 +1,47 @@
+/**
+ * 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 { ComponentRegistry } from '@object-ui/core';
+import { ListView } from './ListView';
+import { ViewSwitcher } from './ViewSwitcher';
+import { ObjectGallery } from './ObjectGallery';
+import type { ListViewSchema } from '@object-ui/types';
+
+export { ListView, ViewSwitcher, ObjectGallery };
+export type { ListViewProps } from './ListView';
+export type { ViewSwitcherProps, ViewType } from './ViewSwitcher';
+
+// Register ListView component
+ComponentRegistry.register('list-view', ListView, {
+  namespace: 'plugin-list',
+  label: 'List View',
+  category: 'Views',
+  icon: 'LayoutList',
+  inputs: [
+    { name: 'objectName', type: 'string', label: 'Object Name', required: true },
+    { name: 'viewType', type: 'enum', label: 'Default View', enum: [
+      { label: 'Grid', value: 'grid' },
+      { label: 'List', value: 'list' },
+      { label: 'Kanban', value: 'kanban' },
+      { label: 'Calendar', value: 'calendar' },
+      { label: 'Chart', value: 'chart' }
+    ], defaultValue: 'grid' },
+    { name: 'fields', type: 'array', label: 'Fields' },
+    { name: 'filters', type: 'array', label: 'Filters' },
+    { name: 'sort', type: 'array', label: 'Sort' },
+    { name: 'options', type: 'object', label: 'View Options' },
+  ],
+  defaultProps: {
+    objectName: '',
+    viewType: 'grid',
+    fields: [],
+    filters: [],
+    sort: [],
+    options: {},
+  }
+});

package/src/registration.test.tsx

@@ -0,0 +1,9 @@
+import { describe, it, expect, beforeAll } from 'vitest';
+import { ComponentRegistry } from '@object-ui/core';
+import { ListView } from './index';
+
+describe('Plugin List Registration', () => {
+  it('exports ListView component', () => {
+    expect(ListView).toBeDefined();
+  });
+});

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "noEmit": false,
+    "declaration": true,
+    "composite": true,
+    "declarationMap": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist", "**/*.test.ts", "**/*.test.tsx"]
+}

package/vite.config.ts

@@ -0,0 +1,56 @@
+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,
+      outDir: 'dist',
+      tsconfigPath: './tsconfig.json',
+    }),
+  ],
+  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: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.tsx'),
+      name: 'ObjectUIPluginList',
+      formats: ['es', 'umd'],
+      fileName: (format) => `index.${format === 'es' ? 'js' : 'umd.cjs'}`,
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', 'react/jsx-runtime'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          'react/jsx-runtime': 'jsxRuntime',
+        },
+      },
+    },
+  },
+  test: {
+    globals: true,
+    environment: 'happy-dom',
+    setupFiles: ['../../vitest.setup.tsx'],
+    passWithNoTests: true,
+    css: {
+      modules: {
+        classNameStrategy: 'non-scoped',
+      },
+    },
+  },
+});

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';