@qwickapps/react-framework 1.3.1 → 1.3.3

package/src/stories/Breadcrumbs.stories.tsx

@@ -0,0 +1,304 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Breadcrumbs, useBreadcrumbs, type BreadcrumbItem } from '../components/Breadcrumbs';
+import React from 'react';
+
+// Icons for demo
+const HomeIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
+  </svg>
+);
+
+const FolderIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/>
+  </svg>
+);
+
+const FileIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
+  </svg>
+);
+
+// Demo component with navigation simulation
+const BreadcrumbDemo = () => {
+  const { breadcrumbs, setBreadcrumbs, addBreadcrumb, removeBreadcrumb, clearBreadcrumbs } = useBreadcrumbs();
+  const [currentPath, setCurrentPath] = React.useState('Home > Documents > Projects');
+
+  const samplePaths = [
+    'Home',
+    'Home > Documents',
+    'Home > Documents > Projects',
+    'Home > Documents > Projects > QwickApps',
+    'Home > Documents > Projects > QwickApps > Framework',
+    'Home > Store > Products',
+    'Home > Store > Products > Electronics > Computers',
+  ];
+
+  const pathToBreadcrumbs = (path: string): BreadcrumbItem[] => {
+    const parts = path.split(' > ');
+    return parts.map((part, index) => ({
+      label: part,
+      href: `/${part.toLowerCase().replace(/\s+/g, '-')}`,
+      icon: index === 0 ? <HomeIcon /> : 
+            index === parts.length - 1 ? <FileIcon /> : 
+            <FolderIcon />,
+      current: index === parts.length - 1
+    }));
+  };
+
+  React.useEffect(() => {
+    setBreadcrumbs(pathToBreadcrumbs(currentPath));
+  }, [currentPath, setBreadcrumbs]);
+
+  const handleNavigate = (item: BreadcrumbItem, index: number) => {
+    const newPath = breadcrumbs.slice(0, index + 1).map(b => b.label).join(' > ');
+    setCurrentPath(newPath);
+    alert(`Navigated to: ${item.label}`);
+  };
+
+  return (
+    <div style={{ padding: '2rem' }}>
+      <h2>Interactive Breadcrumbs Demo</h2>
+      
+      <div style={{ marginBottom: '2rem' }}>
+        <h3>Current Navigation:</h3>
+        <Breadcrumbs items={breadcrumbs} onNavigate={handleNavigate} />
+      </div>
+
+      <div style={{ marginBottom: '2rem' }}>
+        <h3>Navigate to Different Paths:</h3>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+          {samplePaths.map((path) => (
+            <button
+              key={path}
+              onClick={() => setCurrentPath(path)}
+              style={{
+                padding: '0.5rem 1rem',
+                background: path === currentPath ? '#007cba' : '#f0f0f0',
+                color: path === currentPath ? 'white' : 'black',
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+                textAlign: 'left',
+                cursor: 'pointer'
+              }}
+            >
+              {path}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div>
+        <h3>Breadcrumb Controls:</h3>
+        <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
+          <button
+            onClick={() => addBreadcrumb({ label: 'New Item', href: '/new' })}
+            style={{ padding: '0.5rem 1rem', background: '#28a745', color: 'white', border: 'none', borderRadius: '4px' }}
+          >
+            Add Item
+          </button>
+          <button
+            onClick={() => removeBreadcrumb(breadcrumbs.length - 1)}
+            style={{ padding: '0.5rem 1rem', background: '#dc3545', color: 'white', border: 'none', borderRadius: '4px' }}
+          >
+            Remove Last
+          </button>
+          <button
+            onClick={clearBreadcrumbs}
+            style={{ padding: '0.5rem 1rem', background: '#6c757d', color: 'white', border: 'none', borderRadius: '4px' }}
+          >
+            Clear All
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const meta: Meta<typeof Breadcrumbs> = {
+  title: 'Components/Breadcrumbs',
+  component: Breadcrumbs,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A navigation breadcrumb component that shows the current page location within the application hierarchy. Supports accessibility, keyboard navigation, and customization.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    items: {
+      description: 'Array of breadcrumb items to display',
+    },
+    separator: {
+      description: 'Custom separator between breadcrumb items',
+      control: 'text',
+    },
+    className: {
+      description: 'Additional CSS classes to apply',
+      control: 'text',
+    },
+    onNavigate: {
+      description: 'Callback function when a breadcrumb is clicked',
+      action: 'navigate',
+    },
+    maxItems: {
+      description: 'Maximum number of items to show (truncates with ellipsis)',
+      control: { type: 'number', min: 1, max: 10 },
+    },
+    showRoot: {
+      description: 'Whether to show the root (first) item',
+      control: 'boolean',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Sample breadcrumb data
+const sampleBreadcrumbs: BreadcrumbItem[] = [
+  { label: 'Home', href: '/', icon: <HomeIcon /> },
+  { label: 'Products', href: '/products', icon: <FolderIcon /> },
+  { label: 'Electronics', href: '/products/electronics', icon: <FolderIcon /> },
+  { label: 'Laptop', href: '/products/electronics/laptop', icon: <FileIcon />, current: true },
+];
+
+// Default story
+export const Default: Story = {
+  args: {
+    items: sampleBreadcrumbs,
+  },
+};
+
+// Story with custom separator
+export const CustomSeparator: Story = {
+  args: {
+    items: sampleBreadcrumbs,
+    separator: '→',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Breadcrumbs with a custom arrow separator instead of the default slash.',
+      },
+    },
+  },
+};
+
+// Story with emoji separator
+export const EmojiSeparator: Story = {
+  args: {
+    items: sampleBreadcrumbs,
+    separator: '🏠',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Breadcrumbs with an emoji separator for a more playful look.',
+      },
+    },
+  },
+};
+
+// Story with max items (truncation)
+export const TruncatedItems: Story = {
+  args: {
+    items: [
+      { label: 'Home', href: '/' },
+      { label: 'Level 1', href: '/level1' },
+      { label: 'Level 2', href: '/level1/level2' },
+      { label: 'Level 3', href: '/level1/level2/level3' },
+      { label: 'Level 4', href: '/level1/level2/level3/level4' },
+      { label: 'Current Page', href: '/level1/level2/level3/level4/current', current: true },
+    ],
+    maxItems: 4,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'When there are too many items, middle items are replaced with ellipsis.',
+      },
+    },
+  },
+};
+
+// Story without root item
+export const WithoutRoot: Story = {
+  args: {
+    items: sampleBreadcrumbs,
+    showRoot: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Breadcrumbs without showing the root (first) item.',
+      },
+    },
+  },
+};
+
+// Story without icons
+export const WithoutIcons: Story = {
+  args: {
+    items: [
+      { label: 'Home', href: '/' },
+      { label: 'Products', href: '/products' },
+      { label: 'Electronics', href: '/products/electronics' },
+      { label: 'Laptop', href: '/products/electronics/laptop', current: true },
+    ],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Simple breadcrumbs without icons, just text navigation.',
+      },
+    },
+  },
+};
+
+// Story with navigation handler
+export const WithNavigation: Story = {
+  args: {
+    items: sampleBreadcrumbs,
+    onNavigate: (item, index) => {
+      alert(`Clicked on "${item.label}" at index ${index}`);
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Breadcrumbs with a navigation handler that prevents default link behavior.',
+      },
+    },
+  },
+};
+
+// Interactive demo story
+export const InteractiveDemo: Story = {
+  render: () => <BreadcrumbDemo />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Interactive demo showing breadcrumb navigation with the useBreadcrumbs hook.',
+      },
+    },
+  },
+};
+
+// Accessibility showcase
+export const AccessibilityShowcase: Story = {
+  args: {
+    items: sampleBreadcrumbs,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'This breadcrumb component includes proper ARIA labels, keyboard navigation, and screen reader support. Try using Tab and Enter keys to navigate.',
+      },
+    },
+  },
+};

package/src/stories/ErrorBoundary.stories.tsx

@@ -0,0 +1,159 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ErrorBoundary, withErrorBoundary } from '../components/ErrorBoundary';
+import React from 'react';
+
+// Test component that throws an error
+const ThrowError = ({ shouldThrow = false }: { shouldThrow?: boolean }) => {
+  if (shouldThrow) {
+    throw new Error('Intentional error for testing ErrorBoundary');
+  }
+  return <div>This component is working fine!</div>;
+};
+
+const meta: Meta<typeof ErrorBoundary> = {
+  title: 'Framework/ErrorBoundary',
+  component: ErrorBoundary,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A React Error Boundary component that catches JavaScript errors and displays a user-friendly fallback UI with recovery options.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    fallback: {
+      description: 'Custom fallback UI to display when an error occurs',
+    },
+    onError: {
+      description: 'Callback function called when an error is caught',
+      action: 'onError',
+    },
+    showErrorDetails: {
+      description: 'Whether to show error details (overrides development mode detection)',
+      control: 'boolean',
+    },
+    children: {
+      description: 'Child components to wrap with error boundary',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story with working component
+export const Default: Story = {
+  args: {
+    children: <div>This is a working component wrapped in ErrorBoundary</div>,
+  },
+};
+
+// Story that demonstrates error handling
+export const WithError: Story = {
+  args: {
+    children: <ThrowError shouldThrow={true} />,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates ErrorBoundary catching an error and displaying the fallback UI.',
+      },
+    },
+  },
+};
+
+// Story with custom fallback UI
+export const CustomFallback: Story = {
+  args: {
+    children: <ThrowError shouldThrow={true} />,
+    fallback: (
+      <div style={{ 
+        padding: '2rem', 
+        textAlign: 'center', 
+        background: '#ffe6e6',
+        border: '2px solid #ff9999',
+        borderRadius: '8px',
+        color: '#cc0000'
+      }}>
+        <h3>🚨 Custom Error UI</h3>
+        <p>Something went wrong, but we have a custom fallback!</p>
+      </div>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows how to provide a custom fallback UI instead of the default error message.',
+      },
+    },
+  },
+};
+
+// Story showing error details in development mode
+export const WithErrorDetails: Story = {
+  args: {
+    children: <ThrowError shouldThrow={true} />,
+    showErrorDetails: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows error details including stack trace (normally only shown in development mode).',
+      },
+    },
+  },
+};
+
+// Story demonstrating the HOC
+const TestComponent = () => <div>Component enhanced with ErrorBoundary HOC</div>;
+const EnhancedComponent = withErrorBoundary(TestComponent);
+
+export const HigherOrderComponent: Story = {
+  render: () => <EnhancedComponent />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates using the withErrorBoundary Higher-Order Component to wrap any component with error handling.',
+      },
+    },
+  },
+};
+
+// Interactive story for testing retry functionality
+export const Interactive: Story = {
+  render: () => {
+    const [shouldThrow, setShouldThrow] = React.useState(false);
+    
+    return (
+      <div style={{ padding: '2rem' }}>
+        <button 
+          onClick={() => setShouldThrow(!shouldThrow)}
+          style={{ 
+            marginBottom: '1rem', 
+            padding: '0.5rem 1rem',
+            background: shouldThrow ? '#ff4444' : '#44aa44',
+            color: 'white',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: 'pointer'
+          }}
+        >
+          {shouldThrow ? 'Fix Component' : 'Break Component'}
+        </button>
+        
+        <ErrorBoundary>
+          <ThrowError shouldThrow={shouldThrow} />
+        </ErrorBoundary>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Interactive demo where you can break and fix the component to see ErrorBoundary in action.',
+      },
+    },
+  },
+};

package/src/stories/{form/FormComponents.stories.tsx → FormComponents.stories.tsx}

@@ -4,13 +4,13 @@
 
 import { Box, Paper, Typography } from '@mui/material';
 import type { Meta, StoryObj } from '@storybook/react';
-import { Button } from '../../components/buttons/Button';
-import { TextField } from '../../components/input/TextField';
-import { GridCell } from '../../components/layout/GridCell';
-import GridLayout from '../../components/layout/GridLayout';
+import { Button } from '../components/buttons/Button';
+import { TextField } from '../components/input/TextField';
+import { GridCell } from '../components/layout/GridCell';
+import GridLayout from '../components/layout/GridLayout';
 
 const meta: Meta = {
-  title: 'Form/Enhanced Components',
+  title: 'Forms/Enhanced Components',
   parameters: {
     layout: 'padded',
     docs: {
@@ -43,14 +43,14 @@ export const BasicTextField: StoryObj = {
       <TextField
         label="Small Width"
         width="small"
-        margin="medium"
+        margin="normal"
         padding="small"
       />
       <br />
       <TextField
         label="Large Width"
         width="large"
-        margin="medium"
+        margin="normal"
         padding="large"
         background="primary.light"
       />
@@ -73,7 +73,7 @@ export const BasicButton: StoryObj = {
       <Button
         variant="contained"
         width="large"
-        margin="medium"
+        margin="normal"
         padding="large"
       >
         Large Width

package/src/templates/TemplateResolver.ts

@@ -4,7 +4,7 @@
 * 
 * Copyright (c) 2025 QwickApps.com. All rights reserved.
 */
-import { Logger } from '@qwickapps/logging';
+import { Logger, createLogger } from '../utils/logger';
 import { CachedDataProvider, DataResponse, ICacheProvider, IDataProvider, MemoryCacheProvider, Model, MustacheTemplateProvider, SelectOptions } from '@qwickapps/schema';
 import {
   DataProxy,
@@ -51,11 +51,7 @@ export class TemplateResolver implements ITemplateResolver {
   private log: Logger;
 
   constructor(config: TemplateResolverConfig) {
-    this.log = new Logger({
-      namespace: 'ContentResolver',
-      enabled: config.enableLogging || false
-    });
-
+    this.log = createLogger('ContentResolver');
     this.enableLogging = config.enableLogging || false;
     this.templateResolver = config.templateResolver || new MustacheTemplateProvider();
     if (config.cacheProvider === true) {

package/src/utils/__tests__/nested-dom-fix.test.tsx

@@ -0,0 +1,53 @@
+/**
+ * Test for DOM nesting fix in HTML transformation
+ */
+
+import { transformHtmlToReact, defaultMarkdownRules } from '../htmlTransform';
+
+describe('DOM nesting fix', () => {
+  it('should fix invalid paragraph nesting with block elements', () => {
+    // This is the problematic HTML that marked.js creates from mixed content
+    const invalidHtml = `
+      <p>You can mix HTML with Markdown when needed:</p>
+      <p><div style="padding: 16px; border: 1px solid #ccc;">
+        This is <strong>HTML with Markdown</strong> inside it!
+      </div></p>
+      <p>Back to regular content.</p>
+    `;
+
+    // Should not throw React error
+    expect(() => {
+      const result = transformHtmlToReact(invalidHtml, { rules: defaultMarkdownRules });
+      expect(result).toBeDefined();
+      expect(Array.isArray(result)).toBe(true);
+    }).not.toThrow();
+  });
+
+  it('should preserve valid nesting', () => {
+    const validHtml = `
+      <p>This is a valid paragraph with <strong>inline elements</strong>.</p>
+      <div>This is a valid div with block content.</div>
+    `;
+
+    const result = transformHtmlToReact(validHtml, { rules: defaultMarkdownRules });
+    expect(result).toBeDefined();
+    expect(result.length).toBeGreaterThan(0);
+  });
+
+  it('should handle deeply nested invalid structures', () => {
+    const deeplyNested = `
+      <p>
+        Outer paragraph
+        <div>
+          Block in paragraph
+          <p>Paragraph in div in paragraph</p>
+        </div>
+      </p>
+    `;
+
+    expect(() => {
+      const result = transformHtmlToReact(deeplyNested, { rules: defaultMarkdownRules });
+      expect(result).toBeDefined();
+    }).not.toThrow();
+  });
+});

package/src/utils/__tests__/optional-logging.test.ts

@@ -0,0 +1,83 @@
+/**
+ * Test for optional logging dependency fallback
+ */
+
+import { createLogger, loggers } from '../logger';
+
+// Mock the require function to simulate missing @qwickapps/logging package
+const originalRequire = require;
+
+describe('Optional logging dependency', () => {
+  beforeEach(() => {
+    // Reset console spy before each test
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    // Restore original require
+    (global as any).require = originalRequire;
+  });
+
+  it('should use console fallback when @qwickapps/logging is not available', () => {
+    // Mock require to throw an error (simulating missing package)
+    (global as any).require = jest.fn().mockImplementation((module: string) => {
+      if (module === '@qwickapps/logging') {
+        throw new Error('Cannot find module');
+      }
+      return originalRequire(module);
+    });
+
+    // Spy on console methods
+    const consoleSpy = jest.spyOn(console, 'info').mockImplementation();
+
+    // Create a new logger (should use fallback)
+    const logger = createLogger('TestLogger');
+    logger.info('Test message');
+
+    expect(consoleSpy).toHaveBeenCalledWith('[TestLogger] Test message');
+    consoleSpy.mockRestore();
+  });
+
+  it('should have all framework loggers available', () => {
+    expect(loggers).toHaveProperty('scaffold');
+    expect(loggers).toHaveProperty('navigation');
+    expect(loggers).toHaveProperty('auth');
+    expect(loggers).toHaveProperty('theme');
+    expect(loggers).toHaveProperty('palette');
+    expect(loggers).toHaveProperty('form');
+    expect(loggers).toHaveProperty('layout');
+    expect(loggers).toHaveProperty('menu');
+    expect(loggers).toHaveProperty('router');
+
+    // Each logger should have the required methods
+    Object.values(loggers).forEach(logger => {
+      expect(typeof logger.debug).toBe('function');
+      expect(typeof logger.info).toBe('function');
+      expect(typeof logger.warn).toBe('function');
+      expect(typeof logger.error).toBe('function');
+    });
+  });
+
+  it('should suppress debug logs in production', () => {
+    const originalEnv = process.env.NODE_ENV;
+    process.env.NODE_ENV = 'production';
+
+    // Mock require to throw an error (use fallback)
+    (global as any).require = jest.fn().mockImplementation((module: string) => {
+      if (module === '@qwickapps/logging') {
+        throw new Error('Cannot find module');
+      }
+      return originalRequire(module);
+    });
+
+    const debugSpy = jest.spyOn(console, 'debug').mockImplementation();
+    
+    const logger = createLogger('TestLogger');
+    logger.debug('Debug message');
+
+    expect(debugSpy).not.toHaveBeenCalled();
+    
+    debugSpy.mockRestore();
+    process.env.NODE_ENV = originalEnv;
+  });
+});