@jmruthers/pace-core 0.4.1 → 0.5.1

package/src/components/DataTable/examples/HierarchicalActionsExample.tsx

@@ -0,0 +1,419 @@
+/**
+ * @file Hierarchical Actions DataTable Example
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Examples
+ * @since 0.4.36
+ * 
+ * Example demonstrating hierarchical actions in DataTable components.
+ * Shows different action icons and labels for parent vs child rows.
+ */
+
+import React from 'react';
+import { DataTable } from '../DataTable';
+import type { DataTableColumn, DataTableAction } from '../types';
+import { Button } from '../../Button';
+import { 
+  PlusIcon, 
+  PencilIcon, 
+  TrashIcon, 
+  EyeIcon, 
+  CopyIcon,
+  DownloadIcon,
+  UploadIcon,
+  SettingsIcon,
+  InfoIcon,
+  StarIcon
+} from 'lucide-react';
+import type { HierarchicalDataRow } from '../types';
+
+// ============================================================================
+// DATA TYPES
+// ============================================================================
+
+interface Dish extends HierarchicalDataRow {
+  id: string;
+  isParent: boolean;
+  parentId?: string;
+  // Parent row fields (dishes)
+  code?: string;
+  name?: string;
+  type?: string;
+  // Child row fields (ingredients)
+  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: 'ing-1-1',
+    isParent: false,
+    parentId: 'dish-1',
+    diet: 'Standard',
+    item: 'Lettuce',
+    brand: 'Fresh Farms',
+    quantity: 200,
+    unit: 'g',
+    uptake: 1.0,
+  },
+  {
+    id: 'ing-1-2',
+    isParent: false,
+    parentId: 'dish-1',
+    diet: 'Standard',
+    item: 'Chicken Breast',
+    brand: 'Premium Poultry',
+    quantity: 150,
+    unit: 'g',
+    uptake: 0.9,
+  },
+  {
+    id: 'ing-1-3',
+    isParent: false,
+    parentId: 'dish-1',
+    diet: 'GF & Vegan',
+    item: 'Caesar Dressing',
+    brand: 'Vegan Delights',
+    quantity: 50,
+    unit: 'ml',
+    uptake: 0.8,
+  },
+  
+  // Child rows (ingredients) for Beef Stir Fry
+  {
+    id: 'ing-2-1',
+    isParent: false,
+    parentId: 'dish-2',
+    diet: 'Halal',
+    item: 'Beef Strips',
+    brand: 'Halal Meats',
+    quantity: 250,
+    unit: 'g',
+    uptake: 1.0,
+  },
+  {
+    id: 'ing-2-2',
+    isParent: false,
+    parentId: 'dish-2',
+    diet: 'Standard',
+    item: 'Mixed Vegetables',
+    brand: 'Garden Fresh',
+    quantity: 200,
+    unit: 'g',
+    uptake: 0.95,
+  },
+  
+  // Child rows (ingredients) for Chocolate Cake
+  {
+    id: 'ing-3-1',
+    isParent: false,
+    parentId: 'dish-3',
+    diet: 'Standard',
+    item: 'Flour',
+    brand: 'Baker\'s Choice',
+    quantity: 300,
+    unit: 'g',
+    uptake: 1.0,
+  },
+  {
+    id: 'ing-3-2',
+    isParent: false,
+    parentId: 'dish-3',
+    diet: 'Dairy Free',
+    item: 'Cocoa Powder',
+    brand: 'Pure Cocoa',
+    quantity: 50,
+    unit: 'g',
+    uptake: 1.0,
+  },
+];
+
+// ============================================================================
+// HIERARCHICAL ACTIONS
+// ============================================================================
+
+const hierarchicalActions: DataTableAction<Dish>[] = [
+  // View action - different icons for parent vs child
+  {
+    label: 'View Details',
+    icon: EyeIcon,
+    parentIcon: EyeIcon,
+    childIcon: InfoIcon,
+    parentLabel: 'View Dish',
+    childLabel: 'View Ingredient',
+    onClick: (row) => {
+      console.log('Viewing:', row.isParent ? 'Dish' : 'Ingredient', row.name || row.item);
+    },
+    variant: 'default',
+    testId: 'view',
+  },
+  
+  // Edit action - different icons and labels
+  {
+    label: 'Edit',
+    icon: PencilIcon,
+    parentIcon: SettingsIcon,
+    childIcon: PencilIcon,
+    parentLabel: 'Edit Recipe',
+    childLabel: 'Edit Ingredient',
+    onClick: (row) => {
+      console.log('Editing:', row.isParent ? 'Recipe' : 'Ingredient', row.name || row.item);
+    },
+    variant: 'default',
+    testId: 'edit',
+  },
+  
+  // Copy action - only for parent rows (dishes)
+  {
+    label: 'Copy Recipe',
+    icon: CopyIcon,
+    parentIcon: CopyIcon,
+    parentLabel: 'Duplicate Recipe',
+    onClick: (row) => {
+      console.log('Copying recipe:', row.name);
+    },
+    variant: 'outline',
+    testId: 'copy',
+    showForParent: true,
+  },
+  
+  // Add ingredient action - only for parent rows
+  {
+    label: 'Add Ingredient',
+    icon: PlusIcon,
+    parentIcon: PlusIcon,
+    parentLabel: 'Add Ingredient',
+    onClick: (row) => {
+      console.log('Adding ingredient to recipe:', row.name);
+    },
+    variant: 'secondary',
+    testId: 'add-ingredient',
+    showForParent: true,
+  },
+  
+  // Export action - only for child rows (ingredients)
+  {
+    label: 'Export',
+    icon: DownloadIcon,
+    childIcon: DownloadIcon,
+    childLabel: 'Export Ingredient',
+    onClick: (row) => {
+      console.log('Exporting ingredient:', row.item);
+    },
+    variant: 'ghost',
+    testId: 'export',
+    showForChild: true,
+  },
+  
+  // Star action - different behavior for parent vs child
+  {
+    label: 'Star',
+    icon: StarIcon,
+    parentIcon: StarIcon,
+    childIcon: StarIcon,
+    parentLabel: 'Favorite Recipe',
+    childLabel: 'Favorite Ingredient',
+    onClick: (row) => {
+      console.log('Starring:', row.isParent ? 'Recipe' : 'Ingredient', row.name || row.item);
+    },
+    variant: 'ghost',
+    testId: 'star',
+  },
+  
+  // Delete action - different labels and icons
+  {
+    label: 'Delete',
+    icon: TrashIcon,
+    parentIcon: TrashIcon,
+    childIcon: TrashIcon,
+    parentLabel: 'Delete Recipe',
+    childLabel: 'Remove Ingredient',
+    onClick: (row) => {
+      console.log('Deleting:', row.isParent ? 'Recipe' : 'Ingredient', row.name || row.item);
+    },
+    variant: 'destructive',
+    testId: 'delete',
+  },
+];
+
+// ============================================================================
+// COLUMNS
+// ============================================================================
+
+const columns: DataTableColumn<Dish>[] = [
+  {
+    accessorKey: 'code',
+    header: 'Code',
+    renderForParent: (row) => <strong className="text-main-700">{row.code}</strong>,
+    renderForChild: () => '', // Blank for child rows
+    hideForChild: true,
+  },
+  {
+    accessorKey: 'name',
+    header: 'Name',
+    renderForParent: (row) => <strong className="text-main-700">{row.name}</strong>,
+    renderForChild: () => '', // Blank for child rows
+    hideForChild: true,
+  },
+  {
+    accessorKey: 'type',
+    header: 'Type',
+    renderForParent: (row) => (
+      <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-main-100 text-main-800">
+        {row.type}
+      </span>
+    ),
+    renderForChild: () => '', // Blank for child rows
+    hideForChild: true,
+  },
+  {
+    accessorKey: 'diet',
+    header: 'Diet',
+    renderForParent: () => '', // Blank for parent rows
+    renderForChild: (row) => (
+      <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-sec-100 text-sec-800">
+        {row.diet}
+      </span>
+    ),
+    hideForParent: true,
+  },
+  {
+    accessorKey: 'item',
+    header: 'Item',
+    renderForParent: () => '', // Blank for parent rows
+    renderForChild: (row) => <span className="text-sec-700">{row.item}</span>,
+    hideForParent: true,
+  },
+  {
+    accessorKey: 'brand',
+    header: 'Brand',
+    renderForParent: () => '', // Blank for parent rows
+    renderForChild: (row) => <span className="text-sec-600 text-sm">{row.brand}</span>,
+    hideForParent: true,
+  },
+  {
+    accessorKey: 'quantity',
+    header: 'Quantity',
+    renderForParent: () => '', // Blank for parent rows
+    renderForChild: (row) => (
+      <span className="font-mono text-sm">
+        {row.quantity} {row.unit}
+      </span>
+    ),
+    hideForParent: true,
+  },
+  {
+    accessorKey: 'uptake',
+    header: 'Uptake',
+    renderForParent: () => '', // Blank for parent rows
+    renderForChild: (row) => (
+      <span className="font-mono text-sm">
+        {row.uptake?.toFixed(2) || 'N/A'}
+      </span>
+    ),
+    hideForParent: true,
+  },
+];
+
+// ============================================================================
+// EXAMPLE COMPONENT
+// ============================================================================
+
+export function HierarchicalActionsExample() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold text-main-900">Hierarchical Actions Example</h2>
+        <p className="text-main-600 mt-2">
+          This example demonstrates different action icons and labels for parent vs child rows in a hierarchical DataTable.
+        </p>
+      </div>
+
+      <div className="bg-sec-50 p-4 rounded-lg">
+        <h3 className="font-semibold text-sec-800 mb-2">Action Features:</h3>
+        <ul className="text-sm text-sec-700 space-y-1">
+          <li>• <strong>Expand/Collapse All:</strong> Button in header (▶️/🔽) to expand/collapse all parent rows</li>
+          <li>• <strong>View Details:</strong> Different icons (👁️ for dishes, ℹ️ for ingredients)</li>
+          <li>• <strong>Edit:</strong> Different icons (⚙️ for dishes, ✏️ for ingredients)</li>
+          <li>• <strong>Copy Recipe:</strong> Only shows for parent rows (dishes)</li>
+          <li>• <strong>Add Ingredient:</strong> Only shows for parent rows (dishes)</li>
+          <li>• <strong>Export:</strong> Only shows for child rows (ingredients)</li>
+          <li>• <strong>Star:</strong> Different labels ("Favorite Recipe" vs "Favorite Ingredient")</li>
+          <li>• <strong>Delete:</strong> Different labels ("Delete Recipe" vs "Remove Ingredient")</li>
+        </ul>
+      </div>
+
+      <DataTable
+        data={hierarchicalData}
+        columns={columns}
+        title="Dishes & Ingredients"
+        rbac={{ resource: 'dishes' }}
+        features={{
+          search: true,
+          pagination: true,
+          sorting: true,
+          filtering: true,
+          hierarchical: true,
+          editing: true,
+          deletion: true,
+          import: false,
+          export: false,
+          selection: false,
+          creation: false,
+          deleteSelected: false,
+          grouping: false,
+          columnVisibility: false,
+          columnReordering: false,
+        }}
+        hierarchical={{
+          enabled: true,
+          defaultExpanded: false,
+          onExpandedChange: (expandedIds) => {
+            console.log('Expanded rows:', expandedIds);
+          },
+          parentRowClassName: 'bg-main-50 hover:bg-main-100 font-medium',
+          childRowClassName: 'bg-sec-25 hover:bg-sec-50',
+          indentSize: 24,
+        }}
+        actions={hierarchicalActions}
+        onEditRow={(row, data) => {
+          console.log('Edit row:', row, data);
+        }}
+        onDeleteRow={(row) => {
+          console.log('Delete row:', row);
+        }}
+      />
+    </div>
+  );
+}