@jmruthers/pace-core 0.5.134 → 0.5.136

package/examples/components/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/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/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/examples/{public-pages → features/public-pages}/CorrectPublicPageImplementation.tsx

@@ -23,7 +23,7 @@ import {
   usePublicEvent,
   usePublicRouteParams,
   PublicLoadingSpinner
-} from '../../src';
+} from '../../../src';
 
 /**
  * MAIN APPLICATION - This is your main app with authentication

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

@@ -39,7 +39,7 @@ import {
   usePublicRouteParams,
   PublicLoadingSpinner,
   PublicErrorBoundary
-} from '../../src';
+} from '../../../src';
 
 /**
  * Complete public event page example

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

@@ -43,7 +43,7 @@ import {
   usePublicRouteParams,
   PublicLoadingSpinner,
   PublicErrorBoundary
-} from '../../src';
+} from '../../../src';
 
 /**
  * Complete public page application that works independently

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

@@ -34,7 +34,7 @@ import {
   usePublicRouteParams,
   PublicLoadingSpinner,
   PublicErrorBoundary
-} from '../../src';
+} from '../../../src';
 
 /**
  * Correct usage pattern for public pages

package/examples/index.ts

@@ -11,12 +11,20 @@
  *
  * @example
  * ```tsx
+ * // Import feature examples
  * import { PublicPageUsageExample } from '@jmruthers/pace-core/examples';
  * import { EventBasedApp } from '@jmruthers/pace-core/examples';
+ * 
+ * // Import component examples
+ * import { HierarchicalExample } from '@jmruthers/pace-core/examples/components/DataTable';
+ * import { HtmlDialogExample } from '@jmruthers/pace-core/examples/components/Dialog';
  * ```
  */
 
-// Export all examples from subdirectories
-export * from './rbac';
-export * from './public-pages';
+// Export all feature examples
+export * from './features/rbac';
+export * from './features/public-pages';
+
+// Export all component examples
+export * from './components';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jmruthers/pace-core",
-  "version": "0.5.134",
+  "version": "0.5.136",
   "description": "Clean, modern React component library with Tailwind v4 styling and native utilities",
   "private": false,
   "publishConfig": {
@@ -106,15 +106,35 @@
       "import": "./dist/examples/index.js",
       "default": "./dist/examples/index.js"
     },
-    "./examples/rbac": {
-      "types": "./dist/examples/rbac/index.d.ts",
-      "import": "./dist/examples/rbac/index.js",
-      "default": "./dist/examples/rbac/index.js"
-    },
-    "./examples/public-pages": {
-      "types": "./dist/examples/public-pages/index.d.ts",
-      "import": "./dist/examples/public-pages/index.js",
-      "default": "./dist/examples/public-pages/index.js"
+    "./examples/features": {
+      "types": "./dist/examples/features/index.d.ts",
+      "import": "./dist/examples/features/index.js",
+      "default": "./dist/examples/features/index.js"
+    },
+    "./examples/features/rbac": {
+      "types": "./dist/examples/features/rbac/index.d.ts",
+      "import": "./dist/examples/features/rbac/index.js",
+      "default": "./dist/examples/features/rbac/index.js"
+    },
+    "./examples/features/public-pages": {
+      "types": "./dist/examples/features/public-pages/index.d.ts",
+      "import": "./dist/examples/features/public-pages/index.js",
+      "default": "./dist/examples/features/public-pages/index.js"
+    },
+    "./examples/components": {
+      "types": "./dist/examples/components/index.d.ts",
+      "import": "./dist/examples/components/index.js",
+      "default": "./dist/examples/components/index.js"
+    },
+    "./examples/components/DataTable": {
+      "types": "./dist/examples/components/DataTable/index.d.ts",
+      "import": "./dist/examples/components/DataTable/index.js",
+      "default": "./dist/examples/components/DataTable/index.js"
+    },
+    "./examples/components/Dialog": {
+      "types": "./dist/examples/components/Dialog/index.d.ts",
+      "import": "./dist/examples/components/Dialog/index.js",
+      "default": "./dist/examples/components/Dialog/index.js"
     },
     "./source/examples": {
       "import": "./examples/index.ts",

package/src/components/Alert/Alert.tsx

@@ -47,7 +47,7 @@
 
 import * as React from "react"
 
-import { cn } from "../../utils/cn"
+import { cn } from "../../utils/core/cn"
 
 // Context to share variant with child components
 const AlertContext = React.createContext<{ variant?: "default" | "destructive" | "inline" | null }>({ variant: "default" })

package/src/components/Avatar/Avatar.tsx

@@ -37,7 +37,7 @@
 import * as React from "react"
 import * as AvatarPrimitive from "@radix-ui/react-avatar"
 
-import { cn } from "../../utils/cn"
+import { cn } from "../../utils/core/cn"
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,

package/src/components/Button/Button.tsx

@@ -46,7 +46,7 @@
 
 import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
-import { cn } from '../../utils/cn';
+import { cn } from '../../utils/core/cn';
 import { Tooltip } from '../Tooltip';
 
 // ============================================================================

package/src/components/Card/Card.tsx

@@ -62,7 +62,7 @@
  */
 
 import * as React from "react"
-import { cn } from "../../utils/cn"
+import { cn } from "../../utils/core/cn"
 
 export interface CardProps extends React.HTMLAttributes<HTMLElement> {
   /** Visual variant of the card */

package/src/components/Checkbox/Checkbox.tsx

@@ -49,7 +49,7 @@ import * as React from "react"
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 import { Check } from "lucide-react"
 
-import { cn } from "../../utils/cn"
+import { cn } from "../../utils/core/cn"
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,

package/src/components/DataTable/DataTable.test.tsx

@@ -49,7 +49,7 @@ const mockLogger = {
 };
 
 // Note: Must define mock inside factory due to hoisting
-vi.mock('../../utils/logger', () => {
+vi.mock('../../utils/core/logger', () => {
   return {
     createLogger: () => mockLogger,
   };

package/src/components/DataTable/DataTable.tsx

@@ -282,7 +282,7 @@
 
 import React from 'react';
 import { DataTableCore } from './components/DataTableCore';
-import { createLogger } from '../../utils/logger';
+import { createLogger } from '../../utils/core/logger';
 import { normalizeDataTableFeatures } from './types';
 import type {
   DataRecord,
@@ -471,41 +471,12 @@ export function DataTable<TData extends DataRecord>(props: DataTableProps<TData>
     [features]
   );
 
-  React.useEffect(() => {
-    if (!features && import.meta.env?.MODE === 'development') {
-      logger.info('DataTable: no features provided; all capabilities default to disabled. Pass a features object to enable functionality.');
-    }
-  }, [features, logger]);
-
   React.useEffect(() => {
     if (normalizedFeatures.deleteSelected && !normalizedFeatures.deletion) {
       logger.warn('deleteSelected requires deletion to be enabled');
     }
   }, [normalizedFeatures.deleteSelected, normalizedFeatures.deletion, logger]);
 
-  // Debug logging for onExport prop
-  const allPropsKeys = Object.keys(props);
-  const allRestKeys = Object.keys(rest);
-  const tableTitle = props.title || props.description || 'unnamed';
-  
-  // Log all prop keys explicitly so we can see them in console
-  console.log(`[DataTable] Wrapper prop check (${tableTitle}):`, {
-    'onExport in props': !!props.onExport,
-    'onExport in rest': !!rest.onExport,
-    'onExport type': typeof rest.onExport,
-    'rest keys': Object.keys(rest).filter(k => k.includes('Export') || k.includes('export')),
-    'all rest keys': allRestKeys, // All keys for debugging
-    'props keys': allPropsKeys, // All props keys
-    'has onExport key': 'onExport' in props,
-    'has onExport in rest': 'onExport' in rest,
-    'props.onExport value': props.onExport,
-    'rest.onExport value': rest.onExport,
-  });
-  
-  // Also log the keys as separate arrays for easier inspection
-  console.log(`[DataTable] All props keys for ${tableTitle}:`, allPropsKeys);
-  console.log(`[DataTable] All rest keys for ${tableTitle}:`, allRestKeys);
-
   return <DataTableCore {...rest} features={normalizedFeatures} />;
 }