@jmruthers/pace-core 0.5.135 → 0.5.136

package/examples/components/DataTable/PerformanceExample.tsx

@@ -0,0 +1,506 @@
+/**
+ * @file Enhanced DataTable Performance Example
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Examples/Performance
+ * @since 0.3.0
+ */
+
+import React, { useState, useMemo } from 'react';
+import { 
+  type DataTableColumn,
+  type ServerSideConfig,
+  type PerformanceConfig,
+  type ServerSideParams,
+  type ServerSideResponse,
+  type DataTableFeatureConfig
+} from '../types';
+import { DataTable } from '../DataTable';
+
+// Sample data interface
+interface User {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+  department: string;
+  status: 'active' | 'inactive';
+  lastLogin: string;
+  createdAt: string;
+  [key: string]: unknown;
+}
+
+// Generate large dataset for testing
+const generateLargeDataset = (size: number): User[] => {
+  const roles = ['Admin', 'User', 'Manager', 'Developer', 'Designer'];
+  const departments = ['Engineering', 'Marketing', 'Sales', 'HR', 'Finance'];
+  const statuses: ('active' | 'inactive')[] = ['active', 'inactive'];
+  
+  return Array.from({ length: size }, (_, index) => ({
+    id: `user-${index + 1}`,
+    name: `User ${index + 1}`,
+    email: `user${index + 1}@example.com`,
+    role: roles[index % roles.length],
+    department: departments[index % departments.length],
+    status: statuses[index % statuses.length],
+    lastLogin: new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000).toISOString(),
+    createdAt: new Date(Date.now() - Math.random() * 365 * 24 * 60 * 60 * 1000).toISOString(),
+  }));
+};
+
+/**
+ * Example 1: Client-side performance optimization for medium datasets (1,000-10,000 records)
+ */
+export function ClientSidePerformanceExample() {
+  const data = useMemo(() => generateLargeDataset(5000), []);
+  
+  const columns: DataTableColumn<User>[] = [
+    {
+      accessorKey: 'name',
+      header: 'Name',
+      sortable: true,
+      searchable: true,
+    },
+    {
+      accessorKey: 'email',
+      header: 'Email',
+      sortable: true,
+      searchable: true,
+    },
+    {
+      accessorKey: 'role',
+      header: 'Role',
+      sortable: true,
+      enableGrouping: true,
+    },
+    {
+      accessorKey: 'department',
+      header: 'Department',
+      sortable: true,
+      enableGrouping: true,
+    },
+    {
+      accessorKey: 'status',
+      header: 'Status',
+      sortable: true,
+      cell: ({ row }) => (
+        <span
+          className={`px-2 py-1 rounded text-xs ${
+            row.original.status === 'active'
+              ? 'bg-main-100 text-main-800'
+              : 'bg-acc-100 text-acc-800'
+          }`}
+        >
+          {row.original.status}
+        </span>
+      ),
+    },
+    {
+      accessorKey: 'lastLogin',
+      header: 'Last Login',
+      sortable: true,
+      cell: ({ row }) => new Date(row.original.lastLogin).toLocaleDateString(),
+    },
+  ];
+
+  const performanceConfig: PerformanceConfig = {
+    virtualScrolling: true,
+    overscan: 5,
+    memoizeCells: true,
+    debounceSearch: 300,
+    enableChunking: true,
+    chunkSize: 1000,
+  };
+
+  const features: DataTableFeatureConfig = {
+    // Core Features
+    search: true,
+    pagination: true,
+    sorting: true,
+    filtering: true,
+    
+    // Data Management
+    import: false,
+    export: true,
+    
+    // Row Operations
+    selection: false,
+    creation: false,
+    editing: false,
+    deletion: false,
+    deleteSelected: false,
+    
+    // Table Customization
+    grouping: true,
+    columnVisibility: true,
+    columnReordering: false,
+    hierarchical: false,
+    
+    // Performance
+    // Virtualization is automatically enabled for large datasets
+    
+    // Advanced Features
+    // bulkOperations removed - no longer supported
+  };
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h2>Client-Side Performance Example</h2>
+        <p className="text-sec-600">
+          5,000 records with virtual scrolling and performance optimizations
+        </p>
+      </div>
+
+      <DataTable
+        data={data}
+        columns={columns}
+        title="Users Management"
+        description="High-performance client-side data table"
+        rbac={{ pageId: 'users' }}
+        features={features}
+        
+        // All features configured via features prop above
+        
+      />
+    </div>
+  );
+}
+
+/**
+ * Example 2: Server-side performance for large datasets (100,000+ records)
+ */
+export function ServerSidePerformanceExample() {
+  const [isLoading, setIsLoading] = useState(false);
+  
+  // Mock server-side data fetching
+  const serverSideConfig: ServerSideConfig<User> = {
+    fetchData: async (params: ServerSideParams) => {
+      setIsLoading(true);
+      
+      // Simulate API delay
+      await new Promise(resolve => setTimeout(resolve, 500));
+      
+      // Mock server response
+      const totalCount = 100000;
+      const pageCount = Math.ceil(totalCount / params.pageSize);
+      
+      // Generate data for current page
+      const startIndex = params.pageIndex * params.pageSize;
+      const data = generateLargeDataset(params.pageSize).map((user, index) => ({
+        ...user,
+        id: `user-${startIndex + index + 1}`,
+        name: `User ${startIndex + index + 1}`,
+        email: `user${startIndex + index + 1}@example.com`,
+      }));
+      
+      setIsLoading(false);
+      
+      const response: ServerSideResponse<User> = {
+        data,
+        totalCount,
+        pageIndex: params.pageIndex,
+        pageSize: params.pageSize,
+        pageCount,
+        hasNextPage: params.pageIndex < pageCount - 1,
+        hasPreviousPage: params.pageIndex > 0,
+      };
+      
+      return response;
+    },
+    enableServerSorting: true,
+    enableServerFiltering: true,
+    enableServerSearch: true,
+    enableServerPagination: true,
+    debounceMs: 300,
+    cacheMs: 60000,
+  };
+
+  const serverFeatures: DataTableFeatureConfig = {
+    // Core Features
+    search: true,
+    pagination: true,
+    sorting: true,
+    filtering: true,
+    
+    // Data Management
+    import: false,
+    export: true,
+    
+    // Row Operations
+    selection: false,
+    creation: false,
+    editing: false,
+    deletion: false,
+    deleteSelected: false,
+    
+    // Table Customization
+    grouping: false,
+    columnVisibility: false,
+    columnReordering: false,
+    hierarchical: false,
+    
+    // Performance
+    // Virtualization is automatically enabled for large datasets
+    
+    // Advanced Features
+    // bulkOperations removed - no longer supported
+  };
+
+  const columns: DataTableColumn<User>[] = [
+    {
+      accessorKey: 'name',
+      header: 'Name',
+      sortable: true,
+      searchable: true,
+    },
+    {
+      accessorKey: 'email',
+      header: 'Email',
+      sortable: true,
+      searchable: true,
+    },
+    {
+      accessorKey: 'role',
+      header: 'Role',
+      sortable: true,
+    },
+    {
+      accessorKey: 'department',
+      header: 'Department',
+      sortable: true,
+    },
+    {
+      accessorKey: 'status',
+      header: 'Status',
+      sortable: true,
+      cell: ({ row }) => (
+        <span
+          className={`px-2 py-1 rounded text-xs ${
+            row.original.status === 'active'
+              ? 'bg-main-100 text-main-800'
+              : 'bg-acc-100 text-acc-800'
+          }`}
+        >
+          {row.original.status}
+        </span>
+      ),
+    },
+  ];
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h2>Server-Side Performance Example</h2>
+        <p className="text-sec-600">
+          100,000+ records with server-side pagination, sorting, and filtering
+        </p>
+      </div>
+
+      <DataTable
+        data={[]} // Empty array - data comes from server
+        columns={columns}
+        title="Large Dataset Management"
+        description="Server-side data processing for maximum performance"
+        rbac={{ pageId: 'users' }}
+        features={serverFeatures}
+        
+        // Server-side configuration
+        serverSide={serverSideConfig}
+        
+        // All features configured via features prop above
+        isLoading={isLoading}
+        
+      />
+    </div>
+  );
+}
+
+/**
+ * Example 3: Hybrid mode for balanced performance (10,000-50,000 records)
+ */
+export function HybridPerformanceExample() {
+  const data = useMemo(() => generateLargeDataset(25000), []);
+  
+  const hybridFeatures: DataTableFeatureConfig = {
+    // Core Features
+    search: true,
+    pagination: true,
+    sorting: true,
+    filtering: true,
+    
+    // Data Management
+    import: false,
+    export: true,
+    
+    // Row Operations
+    selection: false,
+    creation: false,
+    editing: false,
+    deletion: false,
+    deleteSelected: false,
+    
+    // Table Customization
+    grouping: true,
+    columnVisibility: true,
+    columnReordering: false,
+    hierarchical: false,
+    
+    // Performance
+    // Virtualization is automatically enabled for large datasets
+    
+    // Advanced Features
+    // bulkOperations removed - no longer supported
+  };
+  
+  const columns: DataTableColumn<User>[] = [
+    {
+      accessorKey: 'name',
+      header: 'Name',
+      sortable: true,
+      searchable: true,
+    },
+    {
+      accessorKey: 'email',
+      header: 'Email',
+      sortable: true,
+      searchable: true,
+    },
+    {
+      accessorKey: 'role',
+      header: 'Role',
+      sortable: true,
+      enableGrouping: true,
+    },
+    {
+      accessorKey: 'department',
+      header: 'Department',
+      sortable: true,
+      enableGrouping: true,
+    },
+    {
+      accessorKey: 'status',
+      header: 'Status',
+      sortable: true,
+    },
+  ];
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h2>Hybrid Performance Example</h2>
+        <p className="text-sec-600">
+          25,000 records with intelligent chunking and hybrid processing
+        </p>
+      </div>
+
+      <DataTable
+        data={data}
+        columns={columns}
+        title="Hybrid Data Processing"
+        description="Balanced approach for medium-large datasets"
+        rbac={{ pageId: 'users' }}
+        features={hybridFeatures}
+        
+        // All features configured via features prop above
+        
+      />
+    </div>
+  );
+}
+
+/**
+ * Example 4: Performance comparison dashboard
+ */
+export function PerformanceComparisonExample() {
+  const [selectedExample, setSelectedExample] = useState<'client' | 'server' | 'hybrid'>('client');
+  
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1>DataTable Performance Examples</h1>
+        <p className="text-sec-600">
+          Compare different performance optimization strategies for various dataset sizes
+        </p>
+      </div>
+
+      {/* Mode Selector */}
+      <div className="flex space-x-4">
+        <button
+          onClick={() => setSelectedExample('client')}
+          className={`px-4 py-2 rounded ${
+            selectedExample === 'client'
+              ? 'bg-main-500 text-main-50'
+              : 'bg-sec-200 text-sec-700 hover:bg-sec-300'
+          }`}
+        >
+          Client-Side (5K records)
+        </button>
+        <button
+          onClick={() => setSelectedExample('hybrid')}
+          className={`px-4 py-2 rounded ${
+            selectedExample === 'hybrid'
+              ? 'bg-main-500 text-main-50'
+              : 'bg-sec-200 text-sec-700 hover:bg-sec-300'
+          }`}
+        >
+          Hybrid (25K records)
+        </button>
+        <button
+          onClick={() => setSelectedExample('server')}
+          className={`px-4 py-2 rounded ${
+            selectedExample === 'server'
+              ? 'bg-main-500 text-main-50'
+              : 'bg-sec-200 text-sec-700 hover:bg-sec-300'
+          }`}
+        >
+          Server-Side (100K+ records)
+        </button>
+      </div>
+
+      {/* Performance Strategy Info */}
+      <div className="bg-main-50 border border-main-200 rounded-lg p-4">
+        <h3 className="text-main-900">
+          {selectedExample === 'client' && 'Client-Side Strategy'}
+          {selectedExample === 'hybrid' && 'Hybrid Strategy'}
+          {selectedExample === 'server' && 'Server-Side Strategy'}
+        </h3>
+        <div className="text-sm text-main-800">
+          {selectedExample === 'client' && (
+            <ul className="list-disc list-inside space-y-1">
+              <li>Virtual scrolling for smooth rendering</li>
+              <li>Memoized cell components to prevent re-renders</li>
+              <li>Search indexing for instant search results</li>
+              <li>Data chunking for memory management</li>
+              <li>Debounced search to reduce processing</li>
+            </ul>
+          )}
+          {selectedExample === 'hybrid' && (
+            <ul className="list-disc list-inside space-y-1">
+              <li>Intelligent data chunking with LRU cache</li>
+              <li>Progressive loading for better UX</li>
+              <li>Enhanced virtual scrolling with larger overscan</li>
+              <li>Optimized page sizes for balanced performance</li>
+              <li>Advanced search indexing with fuzzy matching</li>
+            </ul>
+          )}
+          {selectedExample === 'server' && (
+            <ul className="list-disc list-inside space-y-1">
+              <li>Server-side pagination, sorting, and filtering</li>
+              <li>Debounced API requests to prevent excessive calls</li>
+              <li>Response caching for improved performance</li>
+              <li>Loading states and error handling</li>
+              <li>Optimized page sizes for server processing</li>
+            </ul>
+          )}
+        </div>
+      </div>
+
+      {/* Render Selected Example */}
+      {selectedExample === 'client' && <ClientSidePerformanceExample />}
+      {selectedExample === 'hybrid' && <HybridPerformanceExample />}
+      {selectedExample === 'server' && <ServerSidePerformanceExample />}
+    </div>
+  );
+}
+
+export default PerformanceComparisonExample; 

package/examples/components/DataTable/index.ts

@@ -0,0 +1,13 @@
+/**
+ * @file DataTable Examples
+ * @package @jmruthers/pace-core
+ * @module Examples/Components/DataTable
+ * @since 1.0.0
+ *
+ * DataTable component examples demonstrating various features and use cases.
+ */
+
+export { HierarchicalExample } from './HierarchicalExample';
+export { HierarchicalActionsExample } from './HierarchicalActionsExample';
+export { InitialPageSizeExample } from './InitialPageSizeExample';
+export { PerformanceExample } from './PerformanceExample';

package/examples/components/Dialog/BasicHtmlTest.tsx

@@ -0,0 +1,55 @@
+/**
+ * @file Basic HTML Test
+ * @package @jmruthers/pace-core
+ * @module Components/Dialog/Examples
+ * @since 0.4.37
+ */
+
+import React, { useState } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogFooter } from '../Dialog';
+import { Button } from '../../Button';
+
+export function BasicHtmlTest() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="p-4">
+      <h2 className="text-xl font-bold mb-4">Basic HTML Test</h2>
+      
+      <div className="mb-4">
+        <h3 className="font-semibold mb-2">Test 1: Direct dangerouslySetInnerHTML</h3>
+        <div 
+          dangerouslySetInnerHTML={{ __html: '<p>Hello <strong>world</strong>!</p>' }}
+          className="bg-main-50 p-2 rounded"
+        />
+      </div>
+
+      <div className="mb-4">
+        <h3 className="font-semibold mb-2">Test 2: Dialog with HTML content</h3>
+        <Button onClick={() => setIsOpen(true)}>
+          Open Dialog
+        </Button>
+      </div>
+
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogContent size="md">
+          <DialogHeader>
+            <DialogTitle>HTML Test</DialogTitle>
+          </DialogHeader>
+          
+          <DialogBody htmlContent="<p>Hello <strong>world</strong>!</p>" allowHtml={true}>
+            <div className="text-acc-500">
+              HTML content failed to render. This is fallback content.
+            </div>
+          </DialogBody>
+          
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsOpen(false)}>
+              Close
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

package/examples/components/Dialog/DebugHtmlExample.tsx

@@ -0,0 +1,68 @@
+/**
+ * @file Debug HTML Content Example
+ * @package @jmruthers/pace-core
+ * @module Components/Dialog/Examples
+ * @since 0.4.37
+ */
+
+import React, { useState } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogFooter } from '../Dialog';
+import { Button } from '../../Button';
+
+export function DebugHtmlExample() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const testHtml = `
+    <p class="text-sm text-sec-600 mb-4">Upload a CSV file with dish or recipe data. The system will automatically detect the format based on your column headers.</p>
+    
+    <div class="bg-main-50 p-4 rounded-lg">
+      <h3 class="font-semibold text-main-900 mb-2">Dish Format (3 columns)</h3>
+      <p class="text-sm text-main-800 mb-2">Perfect for importing basic dish information:</p>
+      <div class="space-y-1">
+        <p class="text-sm"><strong>Required:</strong> <code>dish_code</code>, <code>dish_name</code>, <code>mealtype_name</code></p>
+        <p class="text-sm"><strong>Optional:</strong> <code>dish_description</code></p>
+      </div>
+    </div>
+  `;
+
+  return (
+    <div className="p-4">
+      <h2 className="text-xl font-bold mb-4">Debug HTML Content</h2>
+      
+      <div className="mb-4">
+        <h3 className="font-semibold mb-2">Raw HTML String:</h3>
+        <pre className="bg-sec-100 p-2 rounded text-xs overflow-auto">
+          {testHtml}
+        </pre>
+      </div>
+
+      <Button onClick={() => setIsOpen(true)}>
+        Open Dialog with HTML Content
+      </Button>
+
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogContent size="lg">
+          <DialogHeader>
+            <DialogTitle>Import Dishes or Recipes</DialogTitle>
+          </DialogHeader>
+          
+          <DialogBody htmlContent={testHtml} allowHtml={true}>
+            {/* Fallback content if HTML rendering fails */}
+            <div className="text-acc-500">
+              HTML content failed to render. This is fallback content.
+            </div>
+          </DialogBody>
+          
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={() => setIsOpen(false)}>
+              Import Data
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}