@jmruthers/pace-core 0.5.180 → 0.5.182

package/src/components/Dialog/examples/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/src/components/Dialog/examples/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/src/components/Dialog/examples/ScrollableDialogExample.tsx

@@ -1,290 +0,0 @@
-/**
- * @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/src/components/Dialog/examples/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/src/components/Dialog/examples/__tests__/HtmlDialogExample.test.tsx

@@ -1,71 +0,0 @@
-/**
- * @file HtmlDialogExample Unit Tests
- * @package @jmruthers/pace-core
- * @module Components/Dialog/Examples/Tests
- * @since 0.4.36
- */
-
-import React from 'react';
-import { screen } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
-import '@testing-library/jest-dom';
-import { renderWithProviders } from '../../../../__tests__/helpers/test-utils';
-import { HtmlDialogExample } from '../HtmlDialogExample';
-
-describe('HtmlDialogExample Component', () => {
-  describe('Rendering', () => {
-    it('renders without crashing', () => {
-      renderWithProviders(<HtmlDialogExample />);
-      expect(screen.getByText('HTML Dialog Examples')).toBeInTheDocument();
-    });
-
-    it('renders the title and buttons', () => {
-      renderWithProviders(<HtmlDialogExample />);
-      
-      expect(screen.getByText('HTML Dialog Examples')).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'Import Instructions' })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'Welcome Message' })).toBeInTheDocument();
-    });
-
-    it('renders all dialog trigger buttons', () => {
-      renderWithProviders(<HtmlDialogExample />);
-      
-      expect(screen.getByRole('button', { name: 'Import Instructions' })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'Welcome Message' })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'Mixed Content' })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'Security Demo' })).toBeInTheDocument();
-    });
-  });
-
-  describe('Dialog Configuration', () => {
-    it('renders dialog triggers with proper attributes', () => {
-      renderWithProviders(<HtmlDialogExample />);
-      
-      const triggers = screen.getAllByRole('button');
-      expect(triggers.length).toBeGreaterThan(0);
-      
-      // Check that at least one button has dialog attributes
-      const firstTrigger = triggers[0];
-      expect(firstTrigger).toHaveAttribute('aria-haspopup', 'dialog');
-      expect(firstTrigger).toHaveAttribute('aria-expanded', 'false');
-    });
-  });
-
-  describe('Component Structure', () => {
-    it('has proper heading structure', () => {
-      renderWithProviders(<HtmlDialogExample />);
-      
-      expect(screen.getByRole('heading', { level: 2, name: 'HTML Dialog Examples' })).toBeInTheDocument();
-    });
-
-    it('displays dialog trigger buttons', () => {
-      renderWithProviders(<HtmlDialogExample />);
-      
-      expect(screen.getByRole('button', { name: 'Import Instructions' })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'Welcome Message' })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'Mixed Content' })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'Security Demo' })).toBeInTheDocument();
-    });
-  });
-});
-

package/src/components/Dialog/examples/__tests__/SimpleHtmlTest.test.tsx

@@ -1,122 +0,0 @@
-/**
- * @file SimpleHtmlTest Unit Tests
- * @package @jmruthers/pace-core
- * @module Components/Dialog/Examples/Tests
- * @since 0.4.37
- */
-
-import React from 'react';
-import { screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, it, expect } from 'vitest';
-import '@testing-library/jest-dom';
-import { renderWithProviders } from '../../../../__tests__/helpers/test-utils';
-import { SimpleHtmlTest } from '../SimpleHtmlTest';
-
-describe('SimpleHtmlTest Component', () => {
-  const user = userEvent.setup();
-
-  describe('Rendering', () => {
-    it('renders without crashing', () => {
-      renderWithProviders(<SimpleHtmlTest />);
-      expect(screen.getByText('Simple HTML Test')).toBeInTheDocument();
-    });
-
-    it('renders the title and test section', () => {
-      renderWithProviders(<SimpleHtmlTest />);
-      
-      expect(screen.getByText('Simple HTML Test')).toBeInTheDocument();
-      expect(screen.getByText('Test HTML:')).toBeInTheDocument();
-      expect(screen.getByText('Expected Result:')).toBeInTheDocument();
-    });
-
-    it('displays HTML code in pre tag', () => {
-      renderWithProviders(<SimpleHtmlTest />);
-      
-      const preElements = document.querySelectorAll('pre');
-      expect(preElements.length).toBeGreaterThan(0);
-      
-      const htmlCode = Array.from(preElements).find(el => 
-        el.textContent?.includes('Hello <strong>world</strong>!')
-      );
-      expect(htmlCode).toBeTruthy();
-    });
-
-    it('renders the test button', () => {
-      renderWithProviders(<SimpleHtmlTest />);
-      expect(screen.getByRole('button', { name: 'Test HTML Rendering' })).toBeInTheDocument();
-    });
-  });
-
-  describe('Interactive Elements', () => {
-    it('opens dialog when button is clicked', async () => {
-      renderWithProviders(<SimpleHtmlTest />);
-      
-      const button = screen.getByRole('button', { name: 'Test HTML Rendering' });
-      await user.click(button);
-      
-      await waitFor(() => {
-        expect(screen.getByText('HTML Test')).toBeInTheDocument();
-      });
-    });
-
-    it('displays HTML content in dialog when opened', async () => {
-      renderWithProviders(<SimpleHtmlTest />);
-      
-      const button = screen.getByRole('button', { name: 'Test HTML Rendering' });
-      await user.click(button);
-      
-      await waitFor(() => {
-        expect(screen.getByText('HTML Test')).toBeInTheDocument();
-      });
-    });
-
-    it('renders button as enabled', () => {
-      renderWithProviders(<SimpleHtmlTest />);
-      
-      const button = screen.getByRole('button', { name: 'Test HTML Rendering' });
-      expect(button).toBeEnabled();
-    });
-  });
-
-  describe('Component Structure', () => {
-    it('has proper heading structure', () => {
-      renderWithProviders(<SimpleHtmlTest />);
-      
-      expect(screen.getByRole('heading', { level: 2, name: 'Simple HTML Test' })).toBeInTheDocument();
-      expect(screen.getByRole('heading', { level: 3, name: 'Test HTML:' })).toBeInTheDocument();
-      expect(screen.getByRole('heading', { level: 3, name: 'Expected Result:' })).toBeInTheDocument();
-    });
-
-    it('displays pre-formatted code', () => {
-      renderWithProviders(<SimpleHtmlTest />);
-      
-      const codeBlock = screen.getByText(/Hello <strong>world<\/strong>!/).closest('pre');
-      expect(codeBlock).toBeInTheDocument();
-      expect(codeBlock?.className).toContain('bg-sec-100');
-    });
-  });
-
-  describe('HTML Rendering Test', () => {
-    it('shows expected rendered output container', () => {
-      renderWithProviders(<SimpleHtmlTest />);
-      
-      // Should show the expected result container with proper styling
-      const resultContainers = document.querySelectorAll('.bg-main-50');
-      expect(resultContainers.length).toBeGreaterThan(0);
-    });
-
-    it('displays expected output with HTML content', () => {
-      renderWithProviders(<SimpleHtmlTest />);
-      
-      // The expected result should have "Hello" text
-      const expectedResult = document.querySelector('.bg-main-50');
-      expect(expectedResult).toBeTruthy();
-      
-      // Should contain a strong element
-      const strongElements = document.querySelectorAll('.bg-main-50 strong');
-      expect(strongElements.length).toBeGreaterThan(0);
-    });
-  });
-});
-