@jmruthers/pace-core 0.5.134 → 0.5.136

package/examples/components/Dialog/HtmlDialogExample.tsx

@@ -0,0 +1,202 @@
+/**
+ * @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/Dialog/ScrollableDialogExample.tsx

@@ -0,0 +1,290 @@
+/**
+ * @file Scrollable Dialog Example with Height and Width Constraints
+ * @package @jmruthers/pace-core
+ * @module Components/Dialog/Examples
+ * @since 0.1.0
+ * 
+ * Complete example demonstrating Dialog component with:
+ * - Scrolling enabled
+ * - Height constraints (percentage and fixed)
+ * - Width constraints (percentage and fixed)
+ * - Sticky headers and footers
+ */
+
+import React from 'react';
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogBody,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  Button,
+  Card,
+} from '../../../index';
+
+/**
+ * Example demonstrating Dialog with scrolling, height, and width constraints
+ */
+export function ScrollableDialogExample() {
+  // Generate long content for scrolling demonstration
+  const generateLongContent = (count: number) => {
+    return Array.from({ length: count }, (_, i) => (
+      <Card key={i} className="p-4">
+        <h4>Content Section {i + 1}</h4>
+        <p>
+          This is content section {i + 1}. In a real application, this could be form fields,
+          data displays, tables, or any other content that might make the dialog tall.
+          The dialog will automatically show a scrollbar when content exceeds the height constraints.
+        </p>
+        <p>
+          You can scroll through all the content while the header and footer remain visible
+          at the top and bottom of the dialog.
+        </p>
+      </Card>
+    ));
+  };
+
+  return (
+    <div className="p-6 space-y-6">
+      <div>
+        <h2>Scrollable Dialog with Constraints</h2>
+        <p>Examples demonstrating dialogs with scrolling, height, and width constraints.</p>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {/* Example 1: Percentage-based constraints */}
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button variant="outline" className="w-full">
+              Percentage Constraints
+            </Button>
+          </DialogTrigger>
+          <DialogContent
+            enableScrolling={true}
+            maxHeightPercent={80}
+            maxWidthPercent={90}
+          >
+            <DialogHeader sticky={true}>
+              <DialogTitle>Percentage-Based Constraints</DialogTitle>
+              <DialogDescription>
+                This dialog uses 90% of viewport width and 80% of viewport height.
+                Content will scroll when it exceeds these constraints.
+              </DialogDescription>
+            </DialogHeader>
+            <DialogBody>
+              <div className="space-y-4">
+                {generateLongContent(25)}
+              </div>
+            </DialogBody>
+            <DialogFooter sticky={true}>
+              <Button variant="outline">Cancel</Button>
+              <Button>Save Changes</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+
+        {/* Example 2: Fixed pixel constraints */}
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button variant="outline" className="w-full">
+              Fixed Pixel Constraints
+            </Button>
+          </DialogTrigger>
+          <DialogContent
+            enableScrolling={true}
+            maxHeight="600px"
+            maxWidth="800px"
+          >
+            <DialogHeader sticky={true}>
+              <DialogTitle>Fixed Pixel Constraints</DialogTitle>
+              <DialogDescription>
+                This dialog has a fixed maximum height of 600px and width of 800px.
+                Perfect for consistent sizing regardless of viewport size.
+              </DialogDescription>
+            </DialogHeader>
+            <DialogBody>
+              <div className="space-y-4">
+                {generateLongContent(20)}
+              </div>
+            </DialogBody>
+            <DialogFooter sticky={true}>
+              <Button variant="outline">Cancel</Button>
+              <Button>Confirm</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+
+        {/* Example 3: Mixed constraints (percentage height, fixed width) */}
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button variant="outline" className="w-full">
+              Mixed Constraints
+            </Button>
+          </DialogTrigger>
+          <DialogContent
+            enableScrolling={true}
+            maxHeightPercent={75}
+            maxWidth="700px"
+          >
+            <DialogHeader sticky={true}>
+              <DialogTitle>Mixed Constraints</DialogTitle>
+              <DialogDescription>
+                This dialog uses 75% of viewport height but has a fixed width of 700px.
+                You can mix percentage and fixed constraints as needed.
+              </DialogDescription>
+            </DialogHeader>
+            <DialogBody>
+              <div className="space-y-4">
+                {generateLongContent(30)}
+              </div>
+            </DialogBody>
+            <DialogFooter sticky={true}>
+              <Button variant="outline">Close</Button>
+              <Button>Apply</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+
+        {/* Example 4: Minimum and maximum constraints */}
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button variant="outline" className="w-full">
+              Min/Max Constraints
+            </Button>
+          </DialogTrigger>
+          <DialogContent
+            enableScrolling={true}
+            maxHeightPercent={85}
+            maxWidthPercent={80}
+            minHeight="400px"
+            minWidth="500px"
+          >
+            <DialogHeader sticky={true}>
+              <DialogTitle>Min/Max Constraints</DialogTitle>
+              <DialogDescription>
+                This dialog has both minimum (400px height, 500px width) and maximum
+                (85% height, 80% width) constraints. It will never be smaller than
+                the minimums or larger than the maximums.
+              </DialogDescription>
+            </DialogHeader>
+            <DialogBody>
+              <div className="space-y-4">
+                {generateLongContent(15)}
+              </div>
+            </DialogBody>
+            <DialogFooter sticky={true}>
+              <Button variant="outline">Cancel</Button>
+              <Button>Save</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+
+        {/* Example 5: Narrow dialog with tall content */}
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button variant="outline" className="w-full">
+              Narrow & Tall
+            </Button>
+          </DialogTrigger>
+          <DialogContent
+            enableScrolling={true}
+            maxHeightPercent={90}
+            maxWidth="500px"
+          >
+            <DialogHeader sticky={true}>
+              <DialogTitle>Narrow Dialog with Tall Content</DialogTitle>
+              <DialogDescription>
+                A narrow dialog (500px) that uses 90% of viewport height.
+                Great for side panels or detail views.
+              </DialogDescription>
+            </DialogHeader>
+            <DialogBody>
+              <div className="space-y-4">
+                {generateLongContent(40)}
+              </div>
+            </DialogBody>
+            <DialogFooter sticky={true}>
+              <Button variant="outline">Close</Button>
+              <Button>Done</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+
+        {/* Example 6: Wide dialog with moderate height */}
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button variant="outline" className="w-full">
+              Wide & Moderate Height
+            </Button>
+          </DialogTrigger>
+          <DialogContent
+            enableScrolling={true}
+            maxHeight="500px"
+            maxWidthPercent={95}
+          >
+            <DialogHeader sticky={true}>
+              <DialogTitle>Wide Dialog with Moderate Height</DialogTitle>
+              <DialogDescription>
+                A wide dialog (95% width) with a fixed height of 500px.
+                Perfect for data tables or wide forms.
+              </DialogDescription>
+            </DialogHeader>
+            <DialogBody>
+              <div className="space-y-4">
+                {generateLongContent(18)}
+              </div>
+            </DialogBody>
+            <DialogFooter sticky={true}>
+              <Button variant="outline">Cancel</Button>
+              <Button>Submit</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+
+      <Card className="p-6">
+        <h3>Key Features Demonstrated:</h3>
+        <ul className="list-disc list-inside space-y-2">
+          <li>
+            <strong>enableScrolling={true}:</strong> Enables the flex layout and scrolling
+            functionality. Required for proper scroll behavior.
+          </li>
+          <li>
+            <strong>maxHeightPercent:</strong> Maximum height as a percentage of viewport
+            height (0-100). Automatically capped at 95% to ensure margins.
+          </li>
+          <li>
+            <strong>maxWidthPercent:</strong> Maximum width as a percentage of viewport
+            width (0-100). Automatically capped at 95% to ensure margins.
+          </li>
+          <li>
+            <strong>maxHeight:</strong> Fixed maximum height in CSS units (e.g., "600px",
+            "50vh", "20rem"). Overrides maxHeightPercent if both are provided.
+          </li>
+          <li>
+            <strong>maxWidth:</strong> Fixed maximum width in CSS units. Overrides
+            maxWidthPercent and size prop if provided.
+          </li>
+          <li>
+            <strong>minHeight:</strong> Minimum height in CSS units. Ensures dialog
+            never gets smaller than this value.
+          </li>
+          <li>
+            <strong>minWidth:</strong> Minimum width in CSS units. Ensures dialog
+            never gets smaller than this value.
+          </li>
+          <li>
+            <strong>sticky={true}:</strong> On DialogHeader and DialogFooter, keeps
+            these elements visible while scrolling through content.
+          </li>
+        </ul>
+      </Card>
+    </div>
+  );
+}
+
+export default ScrollableDialogExample;
+

package/examples/components/Dialog/SimpleHtmlTest.tsx

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