@jmruthers/pace-core 0.5.181 → 0.5.182

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>
-  );
-}

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

@@ -1,322 +0,0 @@
-/**
- * @file Smart Dialog Example
- * @package @jmruthers/pace-core
- * @module Components/Dialog/Examples
- * @since 0.1.0
- */
-
-import React, { useState } from 'react';
-import {
-  Dialog,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogBody,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-  Button,
-  Input,
-  Label,
-} from '../../../index';
-
-/**
- * Example demonstrating the enhanced Dialog component with all advanced features
- */
-export function SmartDialogExample() {
-  const [formData, setFormData] = useState({
-    name: '',
-    email: '',
-    message: ''
-  });
-
-  // Generate long content for scrolling demo
-  const longContent = Array.from({ length: 50 }, (_, i) => (
-    <div key={i} className="p-4 border rounded-lg mb-4">
-      <h4>Content Section {i + 1}</h4>
-      <p className="text-sm text-muted-foreground">
-        This is content section {i + 1}. In a real application, this could be form fields,
-        data displays, or any other content that might make the dialog tall.
-      </p>
-    </div>
-  ));
-
-  return (
-    <div className="p-6 space-y-6">
-      <div>
-        <h2 className="text-2xl font-bold">Enhanced Dialog Examples</h2>
-        <p className="text-muted-foreground">
-          Demonstrating all the advanced features of the Dialog component including smart height management, 
-          scrolling, responsive behavior, and accessibility features.
-        </p>
-      </div>
-
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-        {/* Basic Dialog */}
-        <Dialog>
-          <DialogTrigger asChild>
-            <Button variant="outline" className="w-full">Basic Dialog</Button>
-          </DialogTrigger>
-          <DialogContent size="md">
-            <DialogHeader>
-              <DialogTitle>Basic Dialog</DialogTitle>
-              <DialogDescription>
-                This is a standard dialog without scrolling enabled.
-              </DialogDescription>
-            </DialogHeader>
-            <DialogBody>
-              <section className="py-4">
-                <p>Simple content that fits nicely in the dialog.</p>
-              </section>
-            </DialogBody>
-            <DialogFooter>
-              <Button variant="outline">Cancel</Button>
-              <Button>Save</Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-
-        {/* Scrollable Dialog with Sticky Elements */}
-        <Dialog>
-          <DialogTrigger asChild>
-            <Button variant="outline" className="w-full">Scrollable Dialog</Button>
-          </DialogTrigger>
-          <DialogContent 
-            size="lg" 
-            enableScrolling={true}
-            maxHeightPercent={80}
-          >
-            <DialogHeader sticky={true}>
-              <DialogTitle>Scrollable Dialog</DialogTitle>
-              <DialogDescription>
-                This dialog has lots of content and will scroll if needed.
-                The header stays sticky at the top.
-              </DialogDescription>
-            </DialogHeader>
-            <DialogBody>
-              <div className="space-y-4">
-                {longContent.slice(0, 30)}
-              </div>
-            </DialogBody>
-            <DialogFooter sticky={true}>
-              <Button variant="outline">Cancel</Button>
-              <Button>Save Changes</Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-
-        {/* Custom Height Dialog */}
-        <Dialog>
-          <DialogTrigger asChild>
-            <Button variant="outline" className="w-full">Custom Height</Button>
-          </DialogTrigger>
-          <DialogContent 
-            size="xl" 
-            enableScrolling={true}
-            maxHeight="400px"
-          >
-            <DialogHeader>
-              <DialogTitle>Custom Height Dialog</DialogTitle>
-              <DialogDescription>
-                This dialog has a fixed maximum height of 400px.
-              </DialogDescription>
-            </DialogHeader>
-            <DialogBody>
-              <div className="space-y-4">
-                {longContent.slice(0, 20)}
-              </div>
-            </DialogBody>
-            <DialogFooter>
-              <Button>Done</Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-
-        {/* Auto-Sizing Dialog */}
-        <Dialog>
-          <DialogTrigger asChild>
-            <Button variant="outline" className="w-full">Auto Size</Button>
-          </DialogTrigger>
-          <DialogContent size="auto">
-            <DialogHeader>
-              <DialogTitle>Auto-Sized Dialog</DialogTitle>
-              <DialogDescription>
-                This dialog automatically adjusts its width to fit the content.
-              </DialogDescription>
-            </DialogHeader>
-            <DialogBody>
-              <section className="space-y-4">
-                <p>Content that determines the dialog width...</p>
-                <div className="p-4 bg-muted rounded-lg">
-                  <p className="text-sm">This dialog will size itself based on this content.</p>
-                </div>
-              </section>
-            </DialogBody>
-            <DialogFooter>
-              <Button>Close</Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-
-        {/* Form Dialog with Custom Dimensions */}
-        <Dialog>
-          <DialogTrigger asChild>
-            <Button variant="outline" className="w-full">Form Dialog</Button>
-          </DialogTrigger>
-          <DialogContent 
-            maxWidth="600px"
-            maxHeight="500px"
-            enableScrolling={true}
-          >
-            <DialogHeader>
-              <DialogTitle>Contact Form</DialogTitle>
-              <DialogDescription>
-                Fill out the form below to get in touch with us.
-              </DialogDescription>
-            </DialogHeader>
-            <DialogBody>
-              <section className="space-y-4">
-                <div className="space-y-2">
-                  <Label htmlFor="name">Name</Label>
-                  <Input 
-                    id="name"
-                    value={formData.name}
-                    onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
-                    placeholder="Enter your name"
-                  />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="email">Email</Label>
-                  <Input 
-                    id="email"
-                    type="email"
-                    value={formData.email}
-                    onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value }))}
-                    placeholder="Enter your email"
-                  />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="message">Message</Label>
-                  <textarea
-                    id="message"
-                    value={formData.message}
-                    onChange={(e) => setFormData(prev => ({ ...prev, message: e.target.value }))}
-                    placeholder="Enter your message"
-                    className="w-full min-h-[100px] p-2 border rounded-md resize-none"
-                  />
-                </div>
-              </section>
-            </DialogBody>
-            <DialogFooter>
-              <Button variant="outline">Cancel</Button>
-              <Button>Send Message</Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-
-        {/* Dialog with Prevented Close Actions */}
-        <Dialog>
-          <DialogTrigger asChild>
-            <Button variant="outline" className="w-full">Important Dialog</Button>
-          </DialogTrigger>
-          <DialogContent 
-            size="lg"
-            preventCloseOnEscape={true}
-            preventCloseOnOutsideClick={true}
-            showCloseButton={false}
-          >
-            <DialogHeader>
-              <DialogTitle>Important Action Required</DialogTitle>
-              <DialogDescription>
-                This dialog cannot be closed accidentally. You must complete the action below.
-              </DialogDescription>
-            </DialogHeader>
-            <DialogBody>
-              <section className="space-y-4">
-                <p>Please confirm that you want to proceed with this important action.</p>
-                <div className="p-4 bg-destructive/10 border border-destructive/20 rounded-lg">
-                  <p className="text-sm text-destructive font-medium">
-                    ⚠️ This action cannot be undone.
-                  </p>
-                </div>
-              </section>
-            </DialogBody>
-            <DialogFooter>
-              <Button 
-                variant="destructive"
-                onClick={() => {
-                  alert('Action completed!');
-                  // In a real app, you'd close the dialog here
-                }}
-              >
-                Confirm Action
-              </Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-
-        {/* Full Screen Dialog */}
-        <Dialog>
-          <DialogTrigger asChild>
-            <Button variant="outline" className="w-full">Full Screen</Button>
-          </DialogTrigger>
-          <DialogContent size="full" enableScrolling={true}>
-            <DialogHeader sticky={true}>
-              <DialogTitle>Full Screen Dialog</DialogTitle>
-              <DialogDescription>
-                This dialog takes up the full screen on mobile and large size on desktop.
-              </DialogDescription>
-            </DialogHeader>
-            <DialogBody>
-              <div className="space-y-6">
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                  <div className="space-y-4">
-                    <h3 className="text-lg font-semibold">Left Column</h3>
-                    {longContent.slice(0, 15)}
-                  </div>
-                  <div className="space-y-4">
-                    <h3 className="text-lg font-semibold">Right Column</h3>
-                    {longContent.slice(15, 30)}
-                  </div>
-                </div>
-              </div>
-            </DialogBody>
-            <DialogFooter sticky={true}>
-              <Button variant="outline">Cancel</Button>
-              <Button>Save All Changes</Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-      </div>
-
-      <div className="mt-8 p-6 bg-muted rounded-lg">
-        <h3 className="text-lg font-semibold mb-4">Key Features Demonstrated:</h3>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div>
-            <h4 className="font-medium mb-2">Core Features</h4>
-            <ul className="list-disc list-inside space-y-1 text-sm text-muted-foreground">
-              <li><strong>Semantic HTML Structure:</strong> Native dialog element with proper landmarks</li>
-              <li><strong>Accessibility First:</strong> WCAG 2.1 AA compliant with screen reader support</li>
-              <li><strong>Focus Management:</strong> Automatic focus trapping and restoration</li>
-              <li><strong>Keyboard Navigation:</strong> Escape to close, Tab for focus management</li>
-              <li><strong>Responsive Design:</strong> Adapts to all screen sizes</li>
-            </ul>
-          </div>
-          <div>
-            <h4 className="font-medium mb-2">Advanced Features</h4>
-            <ul className="list-disc list-inside space-y-1 text-sm text-muted-foreground">
-              <li><strong>Smart Height Management:</strong> Automatic viewport-based constraints</li>
-              <li><strong>Scrollable Content:</strong> Long content scrolls while keeping headers/footers visible</li>
-              <li><strong>Sticky Headers/Footers:</strong> Important UI elements remain accessible</li>
-              <li><strong>Custom Dimensions:</strong> Fine-grained control over width and height</li>
-              <li><strong>Configurable Close Behavior:</strong> Control escape key and outside click</li>
-              <li><strong>Multiple Size Variants:</strong> sm, md, lg, xl, full, auto sizing options</li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default SmartDialogExample; 

package/examples/components 2/index.ts

@@ -1,11 +0,0 @@
-/**
- * @file Component Examples
- * @package @jmruthers/pace-core
- * @module Examples/Components
- * @since 1.0.0
- *
- * Component-specific examples organized by component.
- */
-
-export * from './DataTable';
-export * from './Dialog';

package/examples/features/index.ts

@@ -1,12 +0,0 @@
-/**
- * @file Feature Examples
- * @package @jmruthers/pace-core
- * @module Examples/Features
- * @since 1.0.0
- *
- * Feature-based examples that demonstrate cross-component workflows.
- */
-
-export * from './rbac';
-export * from './public-pages';
-