@jmruthers/pace-core 0.5.135 → 0.5.136

package/examples/README.md

@@ -4,29 +4,45 @@ This directory contains runnable examples demonstrating how to use various featu
 
 ## Structure
 
-- **rbac/** - RBAC and permission system examples
-- **public-pages/** - Public page workflow examples
-- **authentication/** - Authentication examples (coming soon)
+Examples are organized into two main categories:
+
+### Features (`features/`)
+Cross-component workflow examples that demonstrate how to use multiple components together:
+- **`features/rbac/`** - RBAC and permission system examples
+- **`features/public-pages/`** - Public page workflow examples
+- **`features/authentication/`** - Authentication examples (coming soon)
+
+### Components (`components/`)
+Component-specific examples that demonstrate individual component features:
+- **`components/DataTable/`** - DataTable component examples
+- **`components/Dialog/`** - Dialog component examples
 
 ## Usage
 
-Import examples directly from the package:
+### Import Feature Examples
 
 ```tsx
-// Import from specific category
-import { PublicPageUsageExample } from '@jmruthers/pace-core/examples/public-pages';
-import { EventBasedApp } from '@jmruthers/pace-core/examples/rbac';
-
-// Or import from main examples export
+// Import from main examples export (recommended)
 import { PublicPageUsageExample, EventBasedApp } from '@jmruthers/pace-core/examples';
+
+// Or import from specific feature category
+import { PublicPageUsageExample } from '@jmruthers/pace-core/examples/features/public-pages';
+import { EventBasedApp } from '@jmruthers/pace-core/examples/features/rbac';
+
+// Or import all features
+import * as Features from '@jmruthers/pace-core/examples/features';
 ```
 
-## Component-Specific Examples
+### Import Component Examples
+
+```tsx
+// Import from specific component
+import { HierarchicalExample } from '@jmruthers/pace-core/examples/components/DataTable';
+import { HtmlDialogExample } from '@jmruthers/pace-core/examples/components/Dialog';
 
-For component-specific examples, see the component directories:
-- DataTable: `@jmruthers/pace-core/components/DataTable/examples`
-- Dialog: `@jmruthers/pace-core/components/Dialog/examples`
-- Print Components: `@jmruthers/pace-core/components/Print*/examples`
+// Or import all component examples
+import * as Components from '@jmruthers/pace-core/examples/components';
+```
 
 ## Documentation
 

package/examples/STRUCTURE.md

@@ -0,0 +1,125 @@
+# Examples Directory Structure
+
+This document describes the organization of examples in the pace-core package.
+
+## Overview
+
+All examples are consolidated in the `/packages/core/examples/` directory, organized into two main categories:
+
+1. **Features** (`features/`) - Cross-component workflow examples
+2. **Components** (`components/`) - Component-specific examples
+
+## Directory Structure
+
+```
+examples/
+├── README.md                    # Main examples documentation
+├── index.ts                     # Central export point
+│
+├── features/                    # Feature-based examples (cross-component)
+│   ├── index.ts
+│   ├── rbac/                    # RBAC examples
+│   │   ├── index.ts
+│   │   ├── EventBasedApp.tsx
+│   │   ├── CompleteRBACExample.tsx
+│   │   └── PermissionExample.tsx
+│   │
+│   └── public-pages/            # Public page workflow examples
+│       ├── index.ts
+│       ├── PublicPageUsageExample.tsx
+│       ├── PublicEventPage.tsx
+│       ├── PublicPageApp.tsx
+│       └── CorrectPublicPageImplementation.tsx
+│
+└── components/                  # Component-specific examples
+    ├── index.ts
+    ├── DataTable/
+    │   ├── index.ts
+    │   ├── HierarchicalExample.tsx
+    │   ├── HierarchicalActionsExample.tsx
+    │   ├── InitialPageSizeExample.tsx
+    │   └── PerformanceExample.tsx
+    │
+    └── Dialog/
+        ├── index.ts
+        ├── HtmlDialogExample.tsx
+        ├── ScrollableDialogExample.tsx
+        ├── SmartDialogExample.tsx
+        ├── SimpleHtmlTest.tsx
+        ├── BasicHtmlTest.tsx
+        └── DebugHtmlExample.tsx
+```
+
+## Import Paths
+
+### Feature Examples
+
+```tsx
+// Main export (recommended)
+import { PublicPageUsageExample, EventBasedApp } from '@jmruthers/pace-core/examples';
+
+// Specific feature
+import { PublicPageUsageExample } from '@jmruthers/pace-core/examples/features/public-pages';
+import { EventBasedApp } from '@jmruthers/pace-core/examples/features/rbac';
+```
+
+### Component Examples
+
+```tsx
+// Specific component
+import { HierarchicalExample } from '@jmruthers/pace-core/examples/components/DataTable';
+import { HtmlDialogExample } from '@jmruthers/pace-core/examples/components/Dialog';
+```
+
+## Migration Notes
+
+### Removed Locations
+
+- ❌ `/packages/core/src/examples/` - Duplicates moved to `examples/features/public-pages/`
+- ❌ `/packages/core/examples/RBAC/` - Moved to `examples/features/rbac/`
+- ❌ `/packages/core/examples/public-pages/` - Moved to `examples/features/public-pages/`
+- ❌ `/packages/core/examples/Components/`, `DataTable/`, `Dialog/`, `PublicPages/` - Empty folders removed
+
+### Component Examples
+
+Component examples were previously located in:
+- `/packages/core/src/components/DataTable/examples/`
+- `/packages/core/src/components/Dialog/examples/`
+
+These have been moved to:
+- `/packages/core/examples/components/DataTable/`
+- `/packages/core/examples/components/Dialog/`
+
+**Note:** Test files remain in the original component directories (`src/components/*/examples/__tests__/`) as they are part of the component's test suite.
+
+## Adding New Examples
+
+### Feature Examples
+
+1. Create a new directory under `examples/features/`
+2. Add your example files
+3. Create an `index.ts` file exporting your examples
+4. Update `examples/features/index.ts` to export from your new directory
+5. Update `examples/index.ts` if needed
+6. Update `package.json` exports if you want a dedicated import path
+
+### Component Examples
+
+1. Create a new directory under `examples/components/[ComponentName]/`
+2. Add your example files
+3. Create an `index.ts` file exporting your examples
+4. Update `examples/components/index.ts` to export from your new directory
+5. Update `package.json` exports if you want a dedicated import path
+
+## Package Exports
+
+The following export paths are available in `package.json`:
+
+- `@jmruthers/pace-core/examples` - Main export (all examples)
+- `@jmruthers/pace-core/examples/features` - All feature examples
+- `@jmruthers/pace-core/examples/features/rbac` - RBAC examples
+- `@jmruthers/pace-core/examples/features/public-pages` - Public pages examples
+- `@jmruthers/pace-core/examples/components` - All component examples
+- `@jmruthers/pace-core/examples/components/DataTable` - DataTable examples
+- `@jmruthers/pace-core/examples/components/Dialog` - Dialog examples
+

package/examples/components/DataTable/HierarchicalActionsExample.tsx

@@ -0,0 +1,421 @@
+/**
+ * @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 { createLogger } from '../../../utils/logger';
+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) => {
+      // View action
+    },
+    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) => {
+      // Edit action
+    },
+    variant: 'default',
+    testId: 'edit',
+  },
+  
+  // Copy action - only for parent rows (dishes)
+  {
+    label: 'Copy Recipe',
+    icon: CopyIcon,
+    parentIcon: CopyIcon,
+    parentLabel: 'Duplicate Recipe',
+    onClick: (row) => {
+      // Copy recipe action
+    },
+    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) => {
+      // Add ingredient action
+    },
+    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) => {
+      // Export ingredient action
+    },
+    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) => {
+      // Star action
+    },
+    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) => {
+      // Delete action
+    },
+    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() {
+  const logger = createLogger('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={{ pageId: '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) => {
+            // Expanded rows changed
+          },
+          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) => {
+          // Edit row action
+        }}
+        onDeleteRow={(row) => {
+          // Delete row action
+        }}
+      />
+    </div>
+  );
+}