@qwickapps/react-framework 1.3.2 → 1.3.3

package/src/stories/AccessibilityProvider.stories.tsx

@@ -0,0 +1,284 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AccessibilityProvider, useAccessibility } from '../components/AccessibilityProvider';
+import React from 'react';
+
+// Demo component that uses accessibility features
+const AccessibilityDemo = () => {
+  const {
+    highContrast,
+    reducedMotion,
+    largeText,
+    isKeyboardUser,
+    issues,
+    setHighContrast,
+    setReducedMotion,
+    setLargeText,
+    announce,
+    announcePolite,
+    announceAssertive,
+    runAudit,
+    clearIssues
+  } = useAccessibility();
+
+  const [message, setMessage] = React.useState('');
+
+  return (
+    <div style={{ padding: '2rem', fontFamily: 'system-ui, sans-serif' }}>
+      <h2>Accessibility Provider Demo</h2>
+      
+      {/* System Status */}
+      <div style={{ 
+        marginBottom: '2rem', 
+        padding: '1rem', 
+        background: '#f5f5f5', 
+        borderRadius: '8px' 
+      }}>
+        <h3>System Status</h3>
+        <ul style={{ listStyle: 'none', padding: 0 }}>
+          <li>🎨 High Contrast: {highContrast ? '✅ Enabled' : '❌ Disabled'}</li>
+          <li>⚡ Reduced Motion: {reducedMotion ? '✅ Enabled' : '❌ Disabled'}</li>
+          <li>🔤 Large Text: {largeText ? '✅ Enabled' : '❌ Disabled'}</li>
+          <li>⌨️ Keyboard User: {isKeyboardUser ? '✅ Yes' : '❌ No'}</li>
+          <li>🚨 Issues Found: {issues.length}</li>
+        </ul>
+      </div>
+
+      {/* Controls */}
+      <div style={{ marginBottom: '2rem' }}>
+        <h3>Accessibility Controls</h3>
+        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+          <button
+            onClick={() => setHighContrast(!highContrast)}
+            style={{ 
+              padding: '0.5rem 1rem',
+              background: highContrast ? '#000' : '#007cba',
+              color: 'white',
+              border: 'none',
+              borderRadius: '4px'
+            }}
+          >
+            Toggle High Contrast
+          </button>
+          
+          <button
+            onClick={() => setReducedMotion(!reducedMotion)}
+            style={{ 
+              padding: '0.5rem 1rem',
+              background: reducedMotion ? '#666' : '#007cba',
+              color: 'white',
+              border: 'none',
+              borderRadius: '4px'
+            }}
+          >
+            Toggle Reduced Motion
+          </button>
+          
+          <button
+            onClick={() => setLargeText(!largeText)}
+            style={{ 
+              padding: '0.5rem 1rem',
+              background: largeText ? '#0073aa' : '#007cba',
+              color: 'white',
+              border: 'none',
+              borderRadius: '4px',
+              fontSize: largeText ? '1.2em' : '1em'
+            }}
+          >
+            Toggle Large Text
+          </button>
+        </div>
+      </div>
+
+      {/* Announcements */}
+      <div style={{ marginBottom: '2rem' }}>
+        <h3>Screen Reader Announcements</h3>
+        <div style={{ marginBottom: '1rem' }}>
+          <input
+            type="text"
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            placeholder="Type a message to announce..."
+            style={{ 
+              padding: '0.5rem', 
+              marginRight: '0.5rem', 
+              width: '300px',
+              border: '1px solid #ccc',
+              borderRadius: '4px'
+            }}
+          />
+        </div>
+        <div style={{ display: 'flex', gap: '0.5rem' }}>
+          <button
+            onClick={() => announcePolite(message || 'Polite announcement test')}
+            style={{ 
+              padding: '0.5rem 1rem',
+              background: '#28a745',
+              color: 'white',
+              border: 'none',
+              borderRadius: '4px'
+            }}
+          >
+            Announce Polite
+          </button>
+          
+          <button
+            onClick={() => announceAssertive(message || 'Assertive announcement test')}
+            style={{ 
+              padding: '0.5rem 1rem',
+              background: '#dc3545',
+              color: 'white',
+              border: 'none',
+              borderRadius: '4px'
+            }}
+          >
+            Announce Assertive
+          </button>
+        </div>
+      </div>
+
+      {/* Audit Controls */}
+      <div style={{ marginBottom: '2rem' }}>
+        <h3>Accessibility Audit</h3>
+        <div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1rem' }}>
+          <button
+            onClick={runAudit}
+            style={{ 
+              padding: '0.5rem 1rem',
+              background: '#6f42c1',
+              color: 'white',
+              border: 'none',
+              borderRadius: '4px'
+            }}
+          >
+            Run Audit
+          </button>
+          
+          <button
+            onClick={clearIssues}
+            style={{ 
+              padding: '0.5rem 1rem',
+              background: '#6c757d',
+              color: 'white',
+              border: 'none',
+              borderRadius: '4px'
+            }}
+          >
+            Clear Issues
+          </button>
+        </div>
+        
+        {issues.length > 0 && (
+          <div style={{ 
+            padding: '1rem', 
+            background: '#fff3cd', 
+            border: '1px solid #ffeaa7',
+            borderRadius: '8px' 
+          }}>
+            <h4>Accessibility Issues ({issues.length})</h4>
+            <ul>
+              {issues.map((issue, index) => (
+                <li key={index} style={{ color: issue.level === 'error' ? '#dc3545' : '#856404' }}>
+                  <strong>{issue.type}</strong>: {issue.message}
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
+
+      {/* Test elements that might have accessibility issues */}
+      <div style={{ marginTop: '2rem', padding: '1rem', background: '#e9ecef', borderRadius: '8px' }}>
+        <h3>Test Elements for Audit</h3>
+        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='50'%3E%3Crect width='100' height='50' fill='%23ddd'/%3E%3C/svg%3E" />
+        <button>Unlabeled Button</button>
+        <input type="text" placeholder="Unlabeled Input" />
+      </div>
+    </div>
+  );
+};
+
+const meta: Meta<typeof AccessibilityProvider> = {
+  title: 'Framework/AccessibilityProvider',
+  component: AccessibilityProvider,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Provides comprehensive accessibility context and utilities including system preference detection, keyboard navigation, ARIA announcements, and accessibility auditing.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    enableAudit: {
+      description: 'Whether to enable automatic accessibility auditing (defaults to development mode)',
+      control: 'boolean',
+    },
+    children: {
+      description: 'Child components that will have access to accessibility context',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story with full demo
+export const Default: Story = {
+  args: {
+    children: <AccessibilityDemo />,
+    enableAudit: true,
+  },
+};
+
+// Story showing basic usage without audit
+export const BasicUsage: Story = {
+  args: {
+    enableAudit: false,
+    children: (
+      <div style={{ padding: '2rem' }}>
+        <h2>Basic AccessibilityProvider Usage</h2>
+        <p>This provider automatically detects system preferences and manages keyboard navigation.</p>
+        <button>Try tabbing to this button</button>
+        <br /><br />
+        <input type="text" placeholder="Type here and use Tab key" />
+      </div>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Basic usage of AccessibilityProvider without auditing enabled.',
+      },
+    },
+  },
+};
+
+// Story demonstrating keyboard navigation
+export const KeyboardNavigation: Story = {
+  args: {
+    children: (
+      <div style={{ padding: '2rem' }}>
+        <h2>Keyboard Navigation Test</h2>
+        <p>Press Tab to navigate between elements. When using keyboard, focus indicators will be enhanced.</p>
+        <button>Button 1</button>
+        <br /><br />
+        <input type="text" placeholder="Input field" />
+        <br /><br />
+        <select>
+          <option>Option 1</option>
+          <option>Option 2</option>
+        </select>
+        <br /><br />
+        <a href="#" onClick={(e) => e.preventDefault()}>Link element</a>
+      </div>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Test keyboard navigation to see enhanced focus indicators when using Tab key.',
+      },
+    },
+  },
+};

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.',
+      },
+    },
+  },
+};