@jmruthers/pace-core 0.5.180 → 0.5.182

package/examples/RBAC/PermissionExample.tsx

@@ -1,151 +0,0 @@
-/**
- * @file Permission System Example
- * @package @jmruthers/pace-core
- * @module Examples/RBAC/PermissionExample
- * @since 0.4.0
- *
- * Example component demonstrating the hybrid permission system
- * that supports both direct app access and event-based permissions.
- */
-
-import React from 'react';
-import { useUnifiedAuth } from '../../src/providers';
-import { useAppConfig } from '../../src/hooks';
-import { AccessLevel } from '../../src/types';
-
-export function PermissionExample() {
-  const { 
-    user, 
-    isAuthenticated, 
-    hasPermission, 
-    hasAccessLevel, 
-    accessLevel,
-    selectedEventId,
-    setSelectedEventId 
-  } = useUnifiedAuth();
-  
-  const { supportsDirectAccess, requiresEvent, isLoading, appName } = useAppConfig();
-
-  if (!isAuthenticated) {
-    return <div>Please log in to see permissions</div>;
-  }
-
-  if (isLoading) {
-    return <div>Loading app configuration...</div>;
-  }
-
-  return (
-    <div className="p-6 max-w-2xl">
-      <h2>Permission System Example</h2>
-      
-      {/* App Configuration Info */}
-      <div className="mb-6 p-4 bg-sec-100 rounded-lg">
-        <h3>App Configuration: {appName}</h3>
-        <div className="space-y-1">
-          <div>Supports Direct Access: {supportsDirectAccess ? '✅' : '❌'}</div>
-          <div>Requires Event: {requiresEvent ? '✅' : '❌'}</div>
-          <div>Current Access Level: {accessLevel}</div>
-        </div>
-      </div>
-
-      {/* Event Selection */}
-      {requiresEvent && (
-        <div className="mb-6 p-4 border rounded-lg">
-          <h3>Event Context</h3>
-          <div className="space-y-2">
-            <div>Selected Event: {selectedEventId || 'None'}</div>
-            <div className="space-x-2">
-              <button 
-                onClick={() => setSelectedEventId('event-123')}
-                className="px-3 py-1 bg-main-500 text-main-50 rounded"
-              >
-                Select Event 123
-              </button>
-              <button 
-                onClick={() => setSelectedEventId(null)}
-                className="px-3 py-1 bg-sec-500 text-main-50 rounded"
-              >
-                Clear Event
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Permission Examples */}
-      <div className="space-y-4">
-        <h3>Permission Examples</h3>
-        
-        <div className="grid gap-4 md:grid-cols-2">
-          {/* Basic Permissions */}
-          <div className="p-4 border rounded-lg">
-            <h4>Basic Permissions</h4>
-            <div className="space-y-1 text-sm">
-              <div>Can Read: {hasPermission('app:read') ? '✅' : '❌'}</div>
-              <div>Can Write: {hasPermission('app:write') ? '✅' : '❌'}</div>
-              <div>Can Delete: {hasPermission('app:delete') ? '✅' : '❌'}</div>
-            </div>
-          </div>
-
-          {/* Access Level Checks */}
-          <div className="p-4 border rounded-lg">
-            <h4>Access Level Checks</h4>
-            <div className="space-y-1 text-sm">
-              <div>Is Editor+: {hasAccessLevel(AccessLevel.EDITOR) ? '✅' : '❌'}</div>
-              <div>Is Planner+: {hasAccessLevel(AccessLevel.PLANNER) ? '✅' : '❌'}</div>
-              <div>Is Admin: {hasAccessLevel(AccessLevel.ADMIN) ? '✅' : '❌'}</div>
-            </div>
-          </div>
-        </div>
-
-        {/* Conditional Rendering Examples */}
-        <div className="p-4 border rounded-lg">
-          <h4>Conditional UI Elements</h4>
-          <div className="space-y-2">
-            {hasPermission('app:read') && (
-              <div className="p-2 bg-main-100 text-main-800 rounded">
-                ✅ You can see this because you have read permission
-              </div>
-            )}
-            
-            {hasPermission('app:write') && (
-              <button className="px-4 py-2 bg-main-500 text-main-50 rounded">
-                Edit (Available with write permission)
-              </button>
-            )}
-            
-            {hasAccessLevel(AccessLevel.ADMIN) && (
-              <div className="p-2 bg-acc-100 text-acc-800 rounded">
-                🔒 Admin-only content visible
-              </div>
-            )}
-            
-            {!hasPermission('app:delete') && (
-              <div className="p-2 bg-acc-100 text-acc-800 rounded">
-                ⚠️ Delete functionality not available for your access level
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Status Summary */}
-        <div className="p-4 bg-main-50 rounded-lg">
-          <h4>Current Status</h4>
-          <div className="text-sm space-y-1">
-            <div>User: {user?.email}</div>
-            <div>App: {appName}</div>
-            <div>Event: {selectedEventId || 'Direct Access'}</div>
-            <div>
-              Permission Model: {
-                selectedEventId ? 'Event-based' : 
-                supportsDirectAccess ? 'Direct Access' : 
-                'No Access (requires event)'
-              }
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-

package/examples/STRUCTURE.md

@@ -1,125 +0,0 @@
-# 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 2/Dialog/BasicHtmlTest.tsx

@@ -1,55 +0,0 @@
-/**
- * @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 2/Dialog/DebugHtmlExample.tsx

@@ -1,68 +0,0 @@
-/**
- * @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>
-  );
-}

package/examples/components 2/Dialog/HtmlDialogExample.tsx

@@ -1,202 +0,0 @@
-/**
- * @file HTML Dialog Example
- * @package @jmruthers/pace-core
- * @module Components/Dialog/Examples
- * @since 0.4.36
- * 
- * Example demonstrating HTML content rendering in Dialog components.
- * Shows how to use htmlContent prop for rich text formatting.
- */
-
-import React from 'react';
-import { 
-  Dialog, 
-  DialogTrigger, 
-  DialogContent, 
-  DialogHeader, 
-  DialogTitle, 
-  DialogDescription,
-  DialogBody,
-  DialogFooter
-} from '../Dialog';
-import { Button } from '../../Button';
-
-export function HtmlDialogExample() {
-  const importInstructionsHtml = `
-    <h2>Import Dishes or Recipes</h2>
-    <p>Upload a CSV file with dish or recipe data. The system will automatically detect the format based on your column headers.</p>
-    
-    <h3>DISH FORMAT (3 columns):</h3>
-    <ul>
-      <li><strong>Required:</strong> <code>dish_code</code>, <code>dish_name</code>, <code>mealtype_name</code></li>
-      <li><strong>Optional:</strong> <code>dish_description</code></li>
-    </ul>
-    
-    <h4>Examples:</h4>
-    <ul>
-      <li><code>dish_code</code>: BBQ, PC, CTY</li>
-      <li><code>dish_name</code>: BBQ hamburgers and potato salad</li>
-      <li><code>mealtype_name</code>: Breakfast, Lunch, Dinner</li>
-    </ul>
-    
-    <h3>RECIPE FORMAT (8 columns):</h3>
-    <ul>
-      <li><strong>Required:</strong> <code>dish_code</code>, <code>dish_name</code>, <code>mealtype_name</code>, <code>diettype_name</code>, <code>item_name</code>, <code>recipe_qtypp</code>, <code>recipe_uptake</code></li>
-      <li><strong>Optional:</strong> <code>item_brand</code></li>
-    </ul>
-    
-    <h4>Examples:</h4>
-    <ul>
-      <li><code>dish_code</code>: BBQ</li>
-      <li><code>dish_name</code>: BBQ hamburgers and potato salad</li>
-      <li><code>mealtype_name</code>: Dinner</li>
-      <li><code>diettype_name</code>: Standard, Gluten Free, Vegan</li>
-      <li><code>item_name</code>: Lettuce iceberg shredded</li>
-      <li><code>item_brand</code>: Masterfoods, Coles</li>
-      <li><code>recipe_qtypp</code>: 35, 1.66</li>
-      <li><code>recipe_uptake</code>: 1.0, 0.75</li>
-    </ul>
-    
-    <div style="background-color: #fef3c7; padding: 12px; border-radius: 6px; margin: 16px 0;">
-      <strong>⚠️ IMPORTANT:</strong> Recipe imports will replace all existing recipe data for dishes in the file.
-    </div>
-  `;
-
-  const welcomeMessageHtml = `
-    <h1>Welcome to <strong>PACE Core</strong>!</h1>
-    <p>This dialog demonstrates the new <em>HTML content rendering</em> feature.</p>
-    
-    <h2>Features:</h2>
-    <ul>
-      <li>✅ <strong>Safe HTML rendering</strong> with automatic sanitization</li>
-      <li>✅ <strong>Rich text formatting</strong> (bold, italic, lists, etc.)</li>
-      <li>✅ <strong>Code highlighting</strong> with <code>&lt;code&gt;</code> tags</li>
-      <li>✅ <strong>Custom styling</strong> with inline styles</li>
-      <li>✅ <strong>Security first</strong> - dangerous content is automatically removed</li>
-    </ul>
-    
-    <h3>Supported HTML Elements:</h3>
-    <p>You can use most common HTML elements including:</p>
-    <ul>
-      <li>Headings: <code>h1</code> through <code>h6</code></li>
-      <li>Text formatting: <strong>strong</strong>, <em>em</em>, <u>underline</u></li>
-      <li>Lists: <code>ul</code>, <code>ol</code>, <code>li</code></li>
-      <li>Code: <code>code</code>, <code>pre</code></li>
-      <li>Links: <a href="#" onclick="return false;">example link</a></li>
-      <li>Tables: <code>table</code>, <code>tr</code>, <code>td</code></li>
-    </ul>
-  `;
-
-  return (
-    <div className="space-y-4">
-      <h2 className="text-2xl font-bold">HTML Dialog Examples</h2>
-      
-      {/* Example 1: Import Instructions Dialog */}
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button variant="outline">Import Instructions</Button>
-        </DialogTrigger>
-        <DialogContent size="lg" enableScrolling={true} maxHeightPercent={80}>
-          <DialogHeader>
-            <DialogTitle htmlContent="Import Dishes or Recipes" />
-            <DialogDescription htmlContent="Follow the instructions below to upload your CSV file with the correct format." />
-          </DialogHeader>
-          <DialogBody 
-            htmlContent={importInstructionsHtml}
-            allowHtml={true}
-            strictSanitization={true}
-            logWarnings={true}
-          />
-          <DialogFooter>
-            <Button variant="outline">Cancel</Button>
-            <Button>Select CSV File</Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      {/* Example 2: Welcome Message Dialog */}
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button>Welcome Message</Button>
-        </DialogTrigger>
-        <DialogContent size="md">
-          <DialogHeader>
-            <DialogTitle htmlContent="🎉 New Feature Available!" />
-            <DialogDescription htmlContent="Learn about the new HTML content rendering capabilities." />
-          </DialogHeader>
-          <DialogBody 
-            htmlContent={welcomeMessageHtml}
-            allowHtml={true}
-          />
-          <DialogFooter>
-            <Button variant="outline">Learn More</Button>
-            <Button>Get Started</Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      {/* Example 3: Mixed Content Dialog */}
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button variant="secondary">Mixed Content</Button>
-        </DialogTrigger>
-        <DialogContent size="lg">
-          <DialogHeader>
-            <DialogTitle>Mixed Content Example</DialogTitle>
-            <DialogDescription htmlContent="This dialog shows <strong>HTML in the description</strong> and <em>React children</em> in the body." />
-          </DialogHeader>
-          <DialogBody>
-            <div className="space-y-4">
-              <h3 className="text-lg font-semibold">React Children Content</h3>
-              <p>This content is rendered using React children, not HTML strings.</p>
-              <div className="bg-main-50 p-4 rounded-lg">
-                <p className="text-main-800">
-                  You can mix HTML content (via <code>htmlContent</code> prop) 
-                  with React children for maximum flexibility.
-                </p>
-              </div>
-            </div>
-          </DialogBody>
-          <DialogFooter>
-            <Button variant="outline">Cancel</Button>
-            <Button>Continue</Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      {/* Example 4: Security Demo */}
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button variant="destructive">Security Demo</Button>
-        </DialogTrigger>
-        <DialogContent size="md">
-          <DialogHeader>
-            <DialogTitle>Security Demonstration</DialogTitle>
-            <DialogDescription>This shows how dangerous HTML is automatically sanitized.</DialogDescription>
-          </DialogHeader>
-          <DialogBody 
-            htmlContent={`
-              <h3>Safe Content</h3>
-              <p>This content is safe and will be rendered normally.</p>
-              
-              <h3>Dangerous Content (Will Be Removed)</h3>
-              <p>The following dangerous elements will be automatically removed:</p>
-              <ul>
-                <li>Script tags: <script>alert('This will be removed')</script></li>
-                <li>Event handlers: <span onclick="alert('This will be removed')">Click me</span></li>
-                <li>JavaScript protocols: <a href="javascript:alert('This will be removed')">Dangerous link</a></li>
-              </ul>
-              
-              <p><strong>Result:</strong> Only the safe content above will be displayed!</p>
-            `}
-            allowHtml={true}
-            logWarnings={true}
-          />
-          <DialogFooter>
-            <Button>Got it!</Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </div>
-  );
-}

package/examples/components 2/Dialog/SimpleHtmlTest.tsx

@@ -1,61 +0,0 @@
-/**
- * @file Simple 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 SimpleHtmlTest() {
-  const [isOpen, setIsOpen] = useState(false);
-
-  // Very simple HTML test
-  const simpleHtml = '<p>Hello <strong>world</strong>!</p>';
-
-  return (
-    <div className="p-4">
-      <h2 className="text-xl font-bold mb-4">Simple HTML Test</h2>
-      
-      <div className="mb-4">
-        <h3 className="font-semibold mb-2">Test HTML:</h3>
-        <pre className="bg-sec-100 p-2 rounded text-xs">
-          {simpleHtml}
-        </pre>
-      </div>
-
-      <div className="mb-4">
-        <h3 className="font-semibold mb-2">Expected Result:</h3>
-        <div className="bg-main-50 p-2 rounded">
-          Hello <strong>world</strong>!
-        </div>
-      </div>
-
-      <Button onClick={() => setIsOpen(true)}>
-        Test HTML Rendering
-      </Button>
-
-      <Dialog open={isOpen} onOpenChange={setIsOpen}>
-        <DialogContent size="md">
-          <DialogHeader>
-            <DialogTitle>HTML Test</DialogTitle>
-          </DialogHeader>
-          
-          <DialogBody htmlContent={simpleHtml} 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>
-  );
-}