@jmruthers/pace-core 0.5.135 → 0.5.137

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

@@ -0,0 +1,322 @@
+/**
+ * @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/Dialog/index.ts

@@ -0,0 +1,15 @@
+/**
+ * @file Dialog Examples
+ * @package @jmruthers/pace-core
+ * @module Examples/Components/Dialog
+ * @since 1.0.0
+ *
+ * Dialog component examples demonstrating various features and use cases.
+ */
+
+export { HtmlDialogExample } from './HtmlDialogExample';
+export { ScrollableDialogExample } from './ScrollableDialogExample';
+export { SmartDialogExample } from './SmartDialogExample';
+export { SimpleHtmlTest } from './SimpleHtmlTest';
+export { BasicHtmlTest } from './BasicHtmlTest';
+export { DebugHtmlExample } from './DebugHtmlExample';

package/examples/components 2/index.ts

@@ -0,0 +1,11 @@
+/**
+ * @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

@@ -0,0 +1,12 @@
+/**
+ * @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';
+

package/{src/examples → examples/features/public-pages}/CorrectPublicPageImplementation.tsx

@@ -19,12 +19,11 @@ import {
   PublicPageLayout, 
   PublicPageHeader, 
   PublicPageFooter,
-  FileDisplay,
+  EventLogo,
   usePublicEvent,
   usePublicRouteParams,
   PublicLoadingSpinner
-} from '../index';
-import { FileCategory } from '../types/file-reference';
+} from '../../../src';
 
 /**
  * MAIN APPLICATION - This is your main app with authentication
@@ -220,13 +219,12 @@ function PublicRecipeGridReportPage() {
           {/* Event Logo */}
           <div className="flex justify-center lg:justify-start">
             <div className="text-center">
-              <FileDisplay
-                table_name="event"
-                record_id={event.event_id}
-                organisation_id={event.organisation_id}
-                category={FileCategory.EVENT_LOGOS}
-                showDelete={false}
-                className="rounded-lg shadow-lg [&_img]:h-20 [&_img]:w-20 [&_img]:object-contain"
+              <EventLogo
+                eventId={event.event_id}
+                eventName={event.event_name}
+                organisationId={event.organisation_id}
+                size="2xl"
+                className="rounded-lg shadow-lg"
               />
               <p className="mt-4 text-sm text-sec-600">Event Logo</p>
             </div>
@@ -261,13 +259,12 @@ function PublicEventPage() {
       
       <main className="max-w-4xl mx-auto px-4 py-6">
         <div className="text-center mb-6">
-          <FileDisplay
-            table_name="event"
-            record_id={event.event_id}
-            organisation_id={event.organisation_id}
-            category={FileCategory.EVENT_LOGOS}
-            showDelete={false}
-            className="mx-auto mb-4 [&_img]:h-16 [&_img]:w-16 [&_img]:object-contain"
+          <EventLogo
+            eventId={event.event_id}
+            eventName={event.event_name}
+            organisationId={event.organisation_id}
+            size="xl"
+            className="mx-auto mb-4"
           />
           <h1 className="text-2xl font-bold text-sec-900">{event.event_name}</h1>
           {event.event_date && (

package/{src/examples → examples/features/public-pages}/PublicEventPage.tsx

@@ -34,13 +34,12 @@ import {
   PublicPageLayout, 
   PublicPageHeader, 
   PublicPageFooter,
-  FileDisplay,
+  EventLogo,
   usePublicEvent,
   usePublicRouteParams,
   PublicLoadingSpinner,
   PublicErrorBoundary
-} from '../index';
-import { FileCategory } from '../types/file-reference';
+} from '../../../src';
 
 /**
  * Complete public event page example
@@ -171,13 +170,12 @@ export function PublicEventPage() {
             {/* Event Logo */}
             <div className="flex justify-center lg:justify-start">
               <div className="text-center">
-                <FileDisplay
-                  table_name="event"
-                  record_id={event.event_id}
-                  organisation_id={event.organisation_id}
-                  category={FileCategory.EVENT_LOGOS}
-                  showDelete={false}
-                  className="rounded-lg shadow-lg [&_img]:h-20 [&_img]:w-20 [&_img]:object-contain"
+                <EventLogo
+                  eventId={event.event_id}
+                  eventName={event.event_name}
+                  organisationId={event.organisation_id}
+                  size="2xl"
+                  className="rounded-lg shadow-lg"
                 />
                 <p className="mt-4 text-sm text-sec-600">Event Logo</p>
               </div>
@@ -233,23 +231,12 @@ export function PublicEventPageCompact() {
         
         <main className="max-w-4xl mx-auto px-4 py-6">
           <div className="text-center mb-6">
-            <FileDisplay
-              table_name="event"
-              record_id={event.event_id}
-              organisation_id={event.organisation_id}
-              category={FileCategory.EVENT_LOGOS}
-              displayOnly={true}
-              showFallback={true}
-              fallbackSize="xl"
-              className="h-24 w-24 mx-auto mb-4 object-contain rounded"
-              generateFallbackText={(fileName) => {
-                if (!event.event_name) return 'EV';
-                return event.event_name
-                  .split(/[\s\-_]+/)
-                  .map(word => word.charAt(0).toUpperCase())
-                  .join('')
-                  .substring(0, 3);
-              }}
+            <EventLogo
+              eventId={event.event_id}
+              eventName={event.event_name}
+              organisationId={event.organisation_id}
+              size="xl"
+              className="mx-auto mb-4"
             />
             <h1 className="text-2xl font-bold text-sec-900">{event.event_name}</h1>
             {event.event_date && (

package/{src/examples → examples/features/public-pages}/PublicPageApp.tsx

@@ -38,13 +38,12 @@ import {
   PublicPageLayout, 
   PublicPageHeader, 
   PublicPageFooter,
-  FileDisplay,
+  EventLogo,
   usePublicEvent,
   usePublicRouteParams,
   PublicLoadingSpinner,
   PublicErrorBoundary
-} from '../index';
-import { FileCategory } from '../types/file-reference';
+} from '../../../src';
 
 /**
  * Complete public page application that works independently
@@ -210,13 +209,12 @@ function PublicRecipeGridReportPage() {
           {/* Event Logo */}
           <div className="flex justify-center lg:justify-start">
             <div className="text-center">
-              <FileDisplay
-                table_name="event"
-                record_id={event.event_id}
-                organisation_id={event.organisation_id}
-                category={FileCategory.EVENT_LOGOS}
-                showDelete={false}
-                className="rounded-lg shadow-lg [&_img]:h-20 [&_img]:w-20 [&_img]:object-contain"
+              <EventLogo
+                eventId={event.event_id}
+                eventName={event.event_name}
+                organisationId={event.organisation_id}
+                size="2xl"
+                className="rounded-lg shadow-lg"
               />
               <p className="mt-4 text-sm text-sec-600">Event Logo</p>
             </div>
@@ -250,24 +248,13 @@ function PublicEventPage() {
       
       <main className="max-w-4xl mx-auto px-4 py-6">
         <div className="text-center mb-6">
-            <FileDisplay
-              table_name="event"
-              record_id={event.event_id}
-              organisation_id={event.organisation_id}
-              category={FileCategory.EVENT_LOGOS}
-              displayOnly={true}
-              showFallback={true}
-              fallbackSize="xl"
-              className="h-24 w-24 mx-auto mb-4 object-contain rounded"
-              generateFallbackText={(fileName) => {
-                if (!event.event_name) return 'EV';
-                return event.event_name
-                  .split(/[\s\-_]+/)
-                  .map(word => word.charAt(0).toUpperCase())
-                  .join('')
-                  .substring(0, 3);
-              }}
-            />
+          <EventLogo
+            eventId={event.event_id}
+            eventName={event.event_name}
+            organisationId={event.organisation_id}
+            size="xl"
+            className="mx-auto mb-4"
+          />
           <h1 className="text-2xl font-bold text-sec-900">{event.event_name}</h1>
           {event.event_date && (
             <p className="text-sec-600 mt-2">

package/{src/examples → examples/features/public-pages}/PublicPageUsageExample.tsx

@@ -29,13 +29,12 @@ import {
   PublicPageLayout, 
   PublicPageHeader, 
   PublicPageFooter,
-  FileDisplay,
+  EventLogo,
   usePublicEvent,
   usePublicRouteParams,
   PublicLoadingSpinner,
   PublicErrorBoundary
-} from '../index';
-import { FileCategory } from '../types/file-reference';
+} from '../../../src';
 
 /**
  * Correct usage pattern for public pages
@@ -171,13 +170,12 @@ export function PublicPageUsageExample() {
             {/* Event Logo */}
             <div className="flex justify-center lg:justify-start">
               <div className="text-center">
-                <FileDisplay
-                  table_name="event"
-                  record_id={event.event_id}
-                  organisation_id={event.organisation_id}
-                  category={FileCategory.EVENT_LOGOS}
-                  showDelete={false}
-                  className="rounded-lg shadow-lg [&_img]:h-20 [&_img]:w-20 [&_img]:object-contain"
+                <EventLogo
+                  eventId={event.event_id}
+                  eventName={event.event_name}
+                  organisationId={event.organisation_id}
+                  size="2xl"
+                  className="rounded-lg shadow-lg"
                 />
                 <p className="mt-4 text-sm text-sec-600">Event Logo</p>
               </div>

package/examples/features/public-pages/index.ts

@@ -0,0 +1,14 @@
+/**
+ * @file Public Pages Examples
+ * @package @jmruthers/pace-core
+ * @module Examples/PublicPages
+ * @since 1.0.0
+ *
+ * Public page workflow examples
+ */
+
+export { PublicPageUsageExample } from './PublicPageUsageExample';
+export { PublicEventPage, PublicEventPageCompact } from './PublicEventPage';
+export { PublicPageApp } from './PublicPageApp';
+export { RootApp as CorrectPublicPageImplementation } from './CorrectPublicPageImplementation';
+