@jmruthers/pace-core 0.5.135 → 0.5.137

package/examples/components 2/DataTable/HierarchicalExample.tsx

@@ -0,0 +1,475 @@
+/**
+ * @file Hierarchical DataTable Example
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Examples
+ * @since 0.4.35
+ * 
+ * Example demonstrating hierarchical parent/child row functionality in DataTable.
+ * This example shows a dishes management system with dishes as parent rows
+ * and recipe ingredients as child rows.
+ * 
+ * Key Features Demonstrated:
+ * - Parent rows collapsed by default (defaultExpanded: false)
+ * - Hierarchical sorting: parent rows stay in place, children sort within groups
+ * - Column-specific rendering for parent vs child rows
+ * - Custom expand/collapse buttons
+ * - Visual indentation for child rows
+ */
+
+import React from 'react';
+import { DataTable } from '../DataTable';
+import type { DataTableColumn } from '../types';
+import { ExpandButton, ExpandButtonMinimal } from '../components/ExpandButton';
+import type { HierarchicalDataRow, HierarchicalConfig } from '../types';
+
+// ============================================================================
+// DATA TYPES
+// ============================================================================
+
+interface Dish extends HierarchicalDataRow {
+  id: string;
+  isParent: boolean;
+  parentId?: string;
+  code: string;
+  name: string;
+  type: string;
+  diet?: string;
+  item?: string;
+  brand?: string;
+  quantity?: number;
+  unit?: string;
+  uptake?: number;
+}
+
+// ============================================================================
+// SAMPLE DATA
+// ============================================================================
+
+const hierarchicalData: Dish[] = [
+  // Parent rows (dishes)
+  {
+    id: 'dish-1',
+    isParent: true,
+    code: 'D001',
+    name: 'Chicken Caesar Salad',
+    type: 'Salad',
+  },
+  {
+    id: 'dish-2',
+    isParent: true,
+    code: 'D002',
+    name: 'Beef Stir Fry',
+    type: 'Main Course',
+  },
+  {
+    id: 'dish-3',
+    isParent: true,
+    code: 'D003',
+    name: 'Chocolate Cake',
+    type: 'Dessert',
+  },
+  
+  // Child rows (ingredients) for Chicken Caesar Salad
+  {
+    id: 'ingredient-1-1',
+    isParent: false,
+    parentId: 'dish-1',
+    code: '',
+    name: '',
+    type: '',
+    diet: 'Regular',
+    item: 'Chicken Breast',
+    brand: 'Farm Fresh',
+    quantity: 200,
+    unit: 'g',
+    uptake: 0.95,
+  },
+  {
+    id: 'ingredient-1-2',
+    isParent: false,
+    parentId: 'dish-1',
+    code: '',
+    name: '',
+    type: '',
+    diet: 'Regular',
+    item: 'Romaine Lettuce',
+    brand: 'Green Valley',
+    quantity: 150,
+    unit: 'g',
+    uptake: 0.90,
+  },
+  {
+    id: 'ingredient-1-3',
+    isParent: false,
+    parentId: 'dish-1',
+    code: '',
+    name: '',
+    type: '',
+    diet: 'Regular',
+    item: 'Caesar Dressing',
+    brand: 'Classic',
+    quantity: 30,
+    unit: 'ml',
+    uptake: 0.85,
+  },
+  
+  // Child rows (ingredients) for Beef Stir Fry
+  {
+    id: 'ingredient-2-1',
+    isParent: false,
+    parentId: 'dish-2',
+    code: '',
+    name: '',
+    type: '',
+    diet: 'Regular',
+    item: 'Beef Strips',
+    brand: 'Premium',
+    quantity: 250,
+    unit: 'g',
+    uptake: 0.98,
+  },
+  {
+    id: 'ingredient-2-2',
+    isParent: false,
+    parentId: 'dish-2',
+    code: '',
+    name: '',
+    type: '',
+    diet: 'Regular',
+    item: 'Mixed Vegetables',
+    brand: 'Fresh Farm',
+    quantity: 200,
+    unit: 'g',
+    uptake: 0.92,
+  },
+  {
+    id: 'ingredient-2-3',
+    isParent: false,
+    parentId: 'dish-2',
+    code: '',
+    name: '',
+    type: '',
+    diet: 'Regular',
+    item: 'Soy Sauce',
+    brand: 'Asian Kitchen',
+    quantity: 20,
+    unit: 'ml',
+    uptake: 0.88,
+  },
+  
+  // Child rows (ingredients) for Chocolate Cake
+  {
+    id: 'ingredient-3-1',
+    isParent: false,
+    parentId: 'dish-3',
+    code: '',
+    name: '',
+    type: '',
+    diet: 'Vegetarian',
+    item: 'Flour',
+    brand: 'Baker\'s Choice',
+    quantity: 300,
+    unit: 'g',
+    uptake: 1.0,
+  },
+  {
+    id: 'ingredient-3-2',
+    isParent: false,
+    parentId: 'dish-3',
+    code: '',
+    name: '',
+    type: '',
+    diet: 'Vegetarian',
+    item: 'Cocoa Powder',
+    brand: 'Premium',
+    quantity: 50,
+    unit: 'g',
+    uptake: 0.95,
+  },
+  {
+    id: 'ingredient-3-3',
+    isParent: false,
+    parentId: 'dish-3',
+    code: '',
+    name: '',
+    type: '',
+    diet: 'Vegetarian',
+    item: 'Sugar',
+    brand: 'Sweet',
+    quantity: 200,
+    unit: 'g',
+    uptake: 0.98,
+  },
+];
+
+// ============================================================================
+// COLUMN DEFINITIONS
+// ============================================================================
+
+const columns: DataTableColumn<Dish>[] = [
+  {
+    accessorKey: 'code',
+    header: 'Code',
+    sortable: true,
+    searchable: true,
+    renderForParent: (row: Dish) => (
+      <div className="flex items-center gap-2">
+        <strong className="text-main-700">{row.code}</strong>
+      </div>
+    ),
+    renderForChild: () => '', // Blank for child rows
+    hideForChild: true,
+  },
+  {
+    accessorKey: 'name',
+    header: 'Name',
+    sortable: true,
+    searchable: true,
+    renderForParent: (row: Dish) => (
+      <strong className="text-main-800">{row.name}</strong>
+    ),
+    renderForChild: () => '', // Blank for child rows
+    hideForChild: true,
+  },
+  {
+    accessorKey: 'type',
+    header: 'Type',
+    sortable: true,
+    enableGrouping: true,
+    renderForParent: (row: Dish) => (
+      <span className="px-2 py-1 bg-main-100 text-main-800 rounded text-xs font-medium">
+        {row.type}
+      </span>
+    ),
+    renderForChild: () => '', // Blank for child rows
+    hideForChild: true,
+  },
+  {
+    accessorKey: 'diet',
+    header: 'Diet',
+    sortable: true,
+    renderForParent: () => '', // Blank for parent rows
+    renderForChild: (row: Dish) => (
+      <span className="ml-4 px-2 py-1 bg-sec-100 text-sec-800 rounded text-xs">
+        {row.diet}
+      </span>
+    ),
+    hideForParent: true,
+  },
+  {
+    accessorKey: 'item',
+    header: 'Item',
+    sortable: true,
+    searchable: true,
+    renderForParent: () => '', // Blank for parent rows
+    renderForChild: (row: Dish) => (
+      <span className="ml-4 text-sec-700">{row.item}</span>
+    ),
+    hideForParent: true,
+  },
+  {
+    accessorKey: 'brand',
+    header: 'Brand',
+    sortable: true,
+    renderForParent: () => '', // Blank for parent rows
+    renderForChild: (row: Dish) => (
+      <span className="ml-4 text-sec-600 text-sm">{row.brand}</span>
+    ),
+    hideForParent: true,
+  },
+  {
+    accessorKey: 'quantity',
+    header: 'Quantity',
+    sortable: true,
+    renderForParent: () => '', // Blank for parent rows
+    renderForChild: (row: Dish) => (
+      <span className="ml-4 text-sec-700 font-mono">
+        {row.quantity} {row.unit}
+      </span>
+    ),
+    hideForParent: true,
+  },
+  {
+    accessorKey: 'uptake',
+    header: 'Uptake',
+    sortable: true,
+    renderForParent: () => '', // Blank for parent rows
+    renderForChild: (row: Dish) => (
+      <span className="ml-4 text-sec-700 font-mono">
+        {(row.uptake! * 100).toFixed(1)}%
+      </span>
+    ),
+    hideForParent: true,
+  },
+];
+
+// ============================================================================
+// HIERARCHICAL CONFIGURATION
+// ============================================================================
+
+const hierarchicalConfig: HierarchicalConfig = {
+  enabled: true,
+  defaultExpanded: false, // Start collapsed
+  onExpandedChange: (expandedIds) => {
+    // Expanded rows changed
+  },
+  expandButton: ExpandButton, // Use default expand button
+  indentSize: 24, // 24px indentation for child rows
+  parentRowClassName: 'bg-main-50 hover:bg-main-100 font-medium border-l-4 border-l-main-500',
+  childRowClassName: 'bg-sec-25 hover:bg-sec-50 text-sec-700',
+};
+
+// ============================================================================
+// EXAMPLE COMPONENT
+// ============================================================================
+
+export function HierarchicalExample() {
+  return (
+    <div className="p-6 space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-main-900 mb-2">
+          Hierarchical DataTable Example
+        </h1>
+        <p className="text-sec-600">
+          This example demonstrates hierarchical parent/child rows in DataTable.
+          Parent rows represent dishes, child rows represent recipe ingredients.
+          Click the expand/collapse buttons to show/hide child rows.
+        </p>
+      </div>
+
+      <DataTable
+        data={hierarchicalData}
+        columns={columns}
+        title="Dishes & Ingredients"
+        description="Manage dishes and their recipe ingredients with hierarchical view"
+        rbac={{ pageId: 'dishes' }}
+        features={{
+          search: true,
+          pagination: true,
+          sorting: true,
+          filtering: true,
+          hierarchical: true,
+          selection: false,
+          creation: false,
+          editing: false,
+          deletion: false,
+          deleteSelected: false,
+          grouping: true,
+          columnVisibility: true,
+          columnReordering: false,
+          import: false,
+          export: true,
+        }}
+        hierarchical={hierarchicalConfig}
+        variant="default"
+        className="border border-sec-200 rounded-lg"
+      />
+    </div>
+  );
+}
+
+// ============================================================================
+// ALTERNATIVE EXAMPLES
+// ============================================================================
+
+/**
+ * Example with minimal expand buttons and different styling
+ */
+export function HierarchicalExampleMinimal() {
+  const minimalConfig: HierarchicalConfig = {
+    ...hierarchicalConfig,
+    expandButton: ExpandButtonMinimal,
+    parentRowClassName: 'bg-acc-50 hover:bg-acc-100 font-semibold',
+    childRowClassName: 'bg-acc-25 hover:bg-acc-50',
+  };
+
+  return (
+    <div className="p-6 space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-main-900 mb-2">
+          Hierarchical DataTable - Minimal Style
+        </h1>
+        <p className="text-sec-600">
+          Same data with minimal expand buttons and different styling.
+        </p>
+      </div>
+
+      <DataTable
+        data={hierarchicalData}
+        columns={columns}
+        title="Dishes & Ingredients (Minimal)"
+        rbac={{ pageId: 'dishes' }}
+        features={{
+          search: true,
+          pagination: true,
+          sorting: true,
+          filtering: true,
+          hierarchical: true,
+          selection: false,
+          creation: false,
+          editing: false,
+          deletion: false,
+          deleteSelected: false,
+          grouping: true,
+          columnVisibility: true,
+          columnReordering: false,
+          import: false,
+          export: true,
+        }}
+        hierarchical={minimalConfig}
+        variant="compact"
+        className="border border-sec-200 rounded-lg"
+      />
+    </div>
+  );
+}
+
+/**
+ * Example with all rows expanded by default
+ */
+export function HierarchicalExampleExpanded() {
+  const expandedConfig: HierarchicalConfig = {
+    ...hierarchicalConfig,
+    defaultExpanded: true, // All rows expanded by default
+  };
+
+  return (
+    <div className="p-6 space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-main-900 mb-2">
+          Hierarchical DataTable - Expanded by Default
+        </h1>
+        <p className="text-sec-600">
+          Same data with all parent rows expanded by default.
+        </p>
+      </div>
+
+      <DataTable
+        data={hierarchicalData}
+        columns={columns}
+        title="Dishes & Ingredients (Expanded)"
+        rbac={{ pageId: 'dishes' }}
+        features={{
+          search: true,
+          pagination: true,
+          sorting: true,
+          filtering: true,
+          hierarchical: true,
+          selection: false,
+          creation: false,
+          editing: false,
+          deletion: false,
+          deleteSelected: false,
+          grouping: true,
+          columnVisibility: true,
+          columnReordering: false,
+          import: false,
+          export: true,
+        }}
+        hierarchical={expandedConfig}
+        variant="spacious"
+        className="border border-sec-200 rounded-lg"
+      />
+    </div>
+  );
+}

package/examples/components 2/DataTable/InitialPageSizeExample.tsx

@@ -0,0 +1,177 @@
+/**
+ * @file Initial Page Size Example
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Examples
+ * @since 0.4.37
+ * 
+ * Example demonstrating how to use the initialPageSize prop with DataTable
+ */
+
+import React from 'react';
+import { DataTable, type DataTableColumn } from '@jmruthers/pace-core';
+
+interface User {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+  status: 'active' | 'inactive';
+  [key: string]: unknown;
+}
+
+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: '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>
+    ),
+  },
+];
+
+// Generate sample data
+const generateUsers = (count: number): User[] => {
+  return Array.from({ length: count }, (_, i) => ({
+    id: `user-${i + 1}`,
+    name: `User ${i + 1}`,
+    email: `user${i + 1}@example.com`,
+    role: ['admin', 'user', 'guest'][i % 3],
+    status: i % 4 === 0 ? 'inactive' : 'active',
+  }));
+};
+
+const sampleData = generateUsers(50);
+
+export function InitialPageSizeExample() {
+  return (
+    <div className="space-y-8">
+      <div>
+        <h2 className="text-2xl font-bold mb-4">DataTable with Custom Initial Page Size</h2>
+        <p className="text-muted-foreground mb-4">
+          This example shows how to set a custom initial page size for the DataTable.
+          The table will start with 25 items per page instead of the default 10.
+        </p>
+        
+        <DataTable
+          data={sampleData}
+          columns={columns}
+          title="Users with Custom Page Size"
+          description="This table starts with 25 items per page"
+          rbac={{ pageId: 'users' }}
+          features={{
+            search: true,
+            pagination: true,
+            sorting: true,
+            filtering: true,
+            import: false,
+            export: false,
+            selection: false,
+            creation: false,
+            editing: false,
+            deletion: false,
+            deleteSelected: false,
+            grouping: false,
+            columnReordering: false,
+            hierarchical: false,
+            columnVisibility: false
+          }}
+          initialPageSize={25} // Set initial page size to 25
+        />
+      </div>
+
+      <div>
+        <h3 className="text-xl font-semibold mb-4">Default Page Size (10 items)</h3>
+        <p className="text-muted-foreground mb-4">
+          This table uses the default page size of 10 items per page.
+        </p>
+        
+        <DataTable
+          data={sampleData}
+          columns={columns}
+          title="Users with Default Page Size"
+          description="This table uses the default page size of 10"
+          rbac={{ pageId: 'users' }}
+          features={{
+            search: true,
+            pagination: true,
+            sorting: true,
+            filtering: true,
+            import: false,
+            export: false,
+            selection: false,
+            creation: false,
+            editing: false,
+            deletion: false,
+            deleteSelected: false,
+            grouping: false,
+            columnReordering: false,
+            hierarchical: false,
+            columnVisibility: false
+          }}
+          // No initialPageSize prop - uses default of 10
+        />
+      </div>
+
+      <div>
+        <h3 className="text-xl font-semibold mb-4">Invalid Page Size (with validation)</h3>
+        <p className="text-muted-foreground mb-4">
+          This table tries to use an invalid page size (15) which is not in the available options.
+          The component will automatically use the closest valid option (10) and show a warning in the console.
+        </p>
+        
+        <DataTable
+          data={sampleData}
+          columns={columns}
+          title="Users with Invalid Page Size"
+          description="This table tries to use page size 15, but will fallback to 10"
+          rbac={{ pageId: 'users' }}
+          features={{
+            search: true,
+            pagination: true,
+            sorting: true,
+            filtering: true,
+            import: false,
+            export: false,
+            selection: false,
+            creation: false,
+            editing: false,
+            deletion: false,
+            deleteSelected: false,
+            grouping: false,
+            columnReordering: false,
+            hierarchical: false,
+            columnVisibility: false
+          }}
+          initialPageSize={15} // This will be validated and fallback to closest valid option
+        />
+      </div>
+    </div>
+  );
+}
+
+export default InitialPageSizeExample;