@jmruthers/pace-core 0.2.7 → 0.4.1

package/src/components/Form/__tests__/FormFieldset.unit.test.tsx

@@ -1,241 +0,0 @@
-import { errorTestingUtils, TestErrorBoundary } from '../../__tests__/ErrorTesting.enhanced.test';
-import { userEvent } from '@testing-library/user-event';
-import { describe, it, expect } from 'vitest';
-import { screen, waitFor } from '@testing-library/react';
-import { edgeCaseUtils } from '../../__tests__/EdgeCaseTesting.enhanced.test';
-import { renderWithProviders } from '../../../__tests__/shared';
-import { FormFieldset } from '../FormFieldset';
-import { Form } from '../Form';
-
-describe('FormFieldset', () => {
-  it('renders a fieldset with a legend', () => {
-    renderWithProviders(
-      <FormFieldset legend="Test Legend">
-        <div>Test Content</div>
-      </FormFieldset>
-    );
-
-    const fieldset = screen.getByRole('group', { name: 'Test Legend' });
-    expect(fieldset).toBeInTheDocument();
-    expect(screen.getByText('Test Content')).toBeInTheDocument();
-  });
-
-  it('renders children correctly', () => {
-    renderWithProviders(
-      <FormFieldset legend="Test Legend">
-        <input type="text" id="test-input" />
-      </FormFieldset>
-    );
-
-    const input = screen.getByRole('textbox');
-    expect(input).toBeInTheDocument();
-  });
-describe('Form Error Handling', () => {
-  const user = userEvent.setup();
-  let restoreConsole: (() => void) | null = null;
-
-  beforeEach(() => {
-    restoreConsole = errorTestingUtils.suppressConsoleErrors();
-  });
-
-  afterEach(() => {
-    if (restoreConsole) {
-      restoreConsole();
-    }
-  });
-
-  it('should handle component errors gracefully', () => {
-    const ErrorComponent = () => {
-      throw new Error('Form component error');
-    };
-
-    renderWithProviders(
-      <TestErrorBoundary>
-        <ErrorComponent />
-      </TestErrorBoundary>
-    );
-
-    expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
-    expect(screen.getByText('Error: Form component error')).toBeInTheDocument();
-  });
-
-  it('should handle async errors', async () => {
-    const AsyncErrorComponent = ({ shouldFail }: { shouldFail: boolean }) => {
-      const [error, setError] = React.useState<Error | null>(null);
-
-      React.useEffect(() => {
-        if (shouldFail) {
-          setError(new Error('Async error'));
-        }
-      }, [shouldFail]);
-
-      if (error) {
-        throw error;
-      }
-
-      return <div>Async component</div>;
-    };
-
-    renderWithProviders(
-      <TestErrorBoundary>
-        <AsyncErrorComponent shouldFail={true} />
-      </TestErrorBoundary>
-    );
-
-    await waitFor(() => {
-      expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
-    });
-  });
-
-  it('should handle user interaction errors', async () => {
-    const ErrorComponent = errorTestingUtils.createErrorThrowingComponent(
-      'Form interaction error',
-      'click'
-    );
-
-    renderWithProviders(
-      <TestErrorBoundary>
-        <ErrorComponent />
-      </TestErrorBoundary>
-    );
-
-    await user.click(screen.getByTestId('error-button'));
-
-    await waitFor(() => {
-      expect(screen.getByTestId('error-display')).toBeInTheDocument();
-    });
-  });
-
-  it('should recover from errors when props change', async () => {
-    const TestComponent = ({ shouldError }: { shouldError: boolean }) => {
-      if (shouldError) {
-        throw new Error('Form prop error');
-      }
-      return <div>Normal content</div>;
-    };
-
-    await errorTestingUtils.testErrorRecovery(
-      TestComponent,
-      { shouldError: true },
-      { shouldError: false }
-    );
-
-    expect(screen.getByText('Normal content')).toBeInTheDocument();
-  });
-});
-describe('Form Edge Cases', () => {
-  describe('Extreme Data Values', () => {
-    it('should handle very long strings', () => {
-      const longString = edgeCaseUtils.generateExtremeData.longString(1000);
-      
-      const { container } = renderWithProviders(<Form>{longString}</Form>);
-      expect(container.querySelector('form')).toBeInTheDocument();
-    });
-
-    it('should handle empty and null values', () => {
-      const emptyValues = edgeCaseUtils.generateExtremeData.emptyValues();
-      
-      emptyValues.forEach(value => {
-        const { container, unmount } = renderWithProviders(<Form>{value as any}</Form>);
-        expect(container.querySelector('form')).toBeInTheDocument();
-        unmount();
-      });
-    });
-
-    it('should handle special characters', () => {
-      const specialChars = edgeCaseUtils.generateExtremeData.specialChars();
-      
-      const { container } = renderWithProviders(<Form>{specialChars}</Form>);
-      expect(container.querySelector('form')).toBeInTheDocument();
-    });
-
-    it('should handle unicode characters', () => {
-      const unicodeChars = edgeCaseUtils.generateExtremeData.unicodeChars();
-      
-      const { container } = renderWithProviders(<Form>{unicodeChars}</Form>);
-      expect(container.querySelector('form')).toBeInTheDocument();
-    });
-  });
-
-  describe('Extreme Numbers', () => {
-    it('should handle very large numbers', () => {
-      const largeNumbers = edgeCaseUtils.generateExtremeData.largeNumbers();
-      
-      largeNumbers.forEach(number => {
-        const { container, unmount } = renderWithProviders(<Form value={number} />);
-        expect(container.querySelector('form')).toBeInTheDocument();
-        unmount();
-      });
-    });
-
-    it('should handle very small numbers', () => {
-      const smallNumbers = edgeCaseUtils.generateExtremeData.smallNumbers();
-      
-      smallNumbers.forEach(number => {
-        const { container, unmount } = renderWithProviders(<Form value={number} />);
-        expect(container.querySelector('form')).toBeInTheDocument();
-        unmount();
-      });
-    });
-  });
-
-  describe('Rapid State Changes', () => {
-    it('should handle rapid prop changes', async () => {
-      const stateProps = [
-        { children: 'State 1' },
-        { children: 'State 2' },
-        { children: 'State 3' },
-        { children: 'State 4' },
-        { children: 'State 5' },
-      ];
-
-      await edgeCaseUtils.testRapidStateChanges(Form, stateProps);
-    });
-
-    it('should handle rapid user interactions', async () => {
-      const { container } = renderWithProviders(<Form />);
-      
-      const form = container.querySelector('form');
-      
-      // Form should render successfully
-      expect(form).toBeInTheDocument();
-    });
-  });
-
-  describe('Memory Management', () => {
-    it('should not leak memory with repeated renders', () => {
-      edgeCaseUtils.testMemoryLeaks(Form, { children: 'Memory test' });
-    });
-  });
-
-  describe('Boundary Conditions', () => {
-    it('should handle boundary prop values', () => {
-      const boundaryProps = [
-        { children: '' },
-        { children: 0 },
-        { children: false },
-        { children: [] },{ className: '' },
-        { 'data-testid': '' },
-      ];
-
-      edgeCaseUtils.testBoundaryConditions(Form, boundaryProps);
-    });
-  });
-
-  describe('Complex Data Structures', () => {
-    it('should handle deeply nested objects', () => {
-      const deepObject = edgeCaseUtils.generateExtremeData.deepObject(5);
-      
-      const { container } = renderWithProviders(<Form data={deepObject} />);
-      expect(container.querySelector('form')).toBeInTheDocument();
-    });
-
-    it('should handle large arrays', () => {
-      const largeArray = edgeCaseUtils.generateExtremeData.largeArray(1000);
-      
-      const { container } = renderWithProviders(<Form items={largeArray} />);
-      expect(container.querySelector('form')).toBeInTheDocument();
-    });
-  });
-});
-});

package/src/components/Form/index.ts

@@ -1,26 +0,0 @@
-/**
- * @file Form component exports
- * @package @jmruthers/pace-core
- * @module Form
- * @since 0.1.0
- */
-
-// Main Form component
-export { Form } from './Form';
-export type { FormProps } from './Form';
-
-// Form Field component
-export { FormField } from './FormField';
-export type { FormFieldProps } from './FormField';
-
-// Form Error Summary component
-export { FormErrorSummary } from './FormErrorSummary';
-export type { FormErrorSummaryProps } from './FormErrorSummary';
-
-// Form Live Region component
-export { FormLiveRegion } from './FormLiveRegion';
-export type { FormLiveRegionProps } from './FormLiveRegion';
-
-// Form Fieldset component
-export { FormFieldset } from './FormFieldset';
-export type { FormFieldsetProps } from './FormFieldset';

package/src/components/Header/Header.tsx

@@ -1,301 +0,0 @@
-/**
- * @file Header Component
- * @package @jmruthers/pace-core
- * @module Components/Header
- * @since 0.1.0
- *
- * A comprehensive header component for application layouts with navigation,
- * user menu, event selector, and customizable branding.
- *
- * Features:
- * - Customizable logo (URL or component)
- * - Navigation menu integration
- * - User menu with authentication
- * - Event selector for multi-tenant applications
- * - Custom actions support
- * - Responsive design
- * - Accessibility compliant
- * - Backdrop blur effects
- * - Flexible layout options
- *
- * @example
- * ```tsx
- * // Basic header with logo and user menu
- * <Header
- *   logoUrl="/logo.svg"
- *   logoAlt="My App"
- *   user={currentUser}
- *   onSignOut={handleSignOut}
- * />
- * 
- * // Header with navigation and custom actions
- * <Header
- *   logo={<CustomLogo />}
- *   navItems={[
- *     { id: 'dashboard', label: 'Dashboard', href: '/dashboard' },
- *     { id: 'users', label: 'Users', href: '/users' },
- *     { id: 'settings', label: 'Settings', href: '/settings' }
- *   ]}
- *   currentPath="/dashboard"
- *   actions={
- *     <div className="flex gap-2">
- *       <Button variant="outline">Export</Button>
- *       <Button>New Item</Button>
- *     </div>
- *   }
- *   user={currentUser}
- *   onSignOut={handleSignOut}
- * />
- * 
- * // Header without event selector
- * <Header
- *   logoUrl="/logo.svg"
- *   showEventSelector={false}
- *   user={currentUser}
- *   onSignOut={handleSignOut}
- * />
- * 
- * // Header with custom user menu
- * <Header
- *   logoUrl="/logo.svg"
- *   userMenu={<CustomUserMenu user={currentUser} />}
- *   showUserMenu={true}
- * />
- * ```
- *
- * @accessibility
- * - WCAG 2.1 AA compliant
- * - Proper semantic HTML with role="banner"
- * - Screen reader friendly navigation
- * - Keyboard navigation support
- * - High contrast support
- * - Focus management
- *
- * @dependencies
- * - @supabase/supabase-js - User authentication
- * - React 18+ - Component framework
- * - Tailwind CSS - Styling
- * - NavigationMenu component
- * - UserMenu component
- * - EventSelector component
- */
-
-import React from 'react';
-import { User } from '@supabase/supabase-js';
-import { cn } from '../../utils/cn';
-import { EventSelector } from '../EventSelector';
-import { UserMenu } from '../UserMenu';
-import { NavigationMenu } from '../NavigationMenu';
-import type { NavigationItem } from '../NavigationMenu';
-
-/**
- * Props for the Header component
- */
-export interface HeaderProps {
-  /** URL to the app logo image */
-  logoUrl?: string;
-  /** Alt text for the logo */
-  logoAlt?: string;
-  /** Custom logo component (overrides logoUrl) */
-  logo?: React.ReactNode;
-  /** Navigation items for the menu - uses NavigationItem interface */
-  navItems?: NavigationItem[];
-  /** Current user for the user menu */
-  user?: User | null;
-  /** Sign out handler for user menu */
-  onSignOut?: () => Promise<void>;
-  /** Password change handler for user menu */
-  onChangePassword?: (newPassword: string, confirmPassword: string) => Promise<{ error: any }>;
-  /** Additional actions to display (will be placed between event selector and user menu) */
-  actions?: React.ReactNode;
-  /** Custom user menu component (overrides default UserMenu) */
-  userMenu?: React.ReactNode;
-  /** Custom className */
-  className?: string;
-  /** Show/hide event selector */
-  showEventSelector?: boolean;
-  /** Show/hide user menu */
-  showUserMenu?: boolean;
-  /** Current path for navigation highlighting */
-  currentPath?: string;
-  /** Custom navigation handler */
-  onNavigate?: (item: NavigationItem) => void;
-}
-
-/**
- * Header component for application layouts with comprehensive navigation, user management, 
- * and customizable branding support.
- * 
- * A flexible header component that supports various configurations including custom logos,
- * navigation menus, user authentication, event selection, and custom actions.
- * 
- * Features:
- * - Customizable logo (URL or custom component)
- * - Navigation menu integration with highlighting
- * - User menu with authentication and password management
- * - Event selector for multi-tenant applications
- * - Custom actions support
- * - Responsive design with mobile considerations
- * - Accessibility compliant with proper ARIA attributes
- * - Backdrop blur effects for modern UI
- * - Flexible layout with configurable sections
- * 
- * @example
- * Basic header with logo and navigation:
- * ```tsx
- * import { Header } from '@jmruthers/pace-core';
- * import { useNavigate, useLocation } from 'react-router-dom';
- * 
- * function AppHeader() {
- *   const navigate = useNavigate();
- *   const location = useLocation();
- * 
- *   const navItems = [
- *     { id: 'dashboard', label: 'Dashboard', href: '/dashboard' },
- *     { id: 'meals', label: 'Meals', href: '/meals' },
- *     { id: 'settings', label: 'Settings', href: '/settings' }
- *   ];
- * 
- *   return (
- *     <Header
- *       logoUrl="/company-logo.svg"
- *       logoAlt="My Company"
- *       navItems={navItems}
- *       currentPath={location.pathname}
- *       onNavigate={(item) => navigate(item.href)}
- *       user={currentUser}
- *       onSignOut={handleSignOut}
- *     />
- *   );
- * }
- * ```
- * 
- * @example
- * Header with custom actions:
- * ```tsx
- * import { Header, Button } from '@jmruthers/pace-core';
- * 
- * function HeaderWithActions() {
- *   const customActions = (
- *     <div className="flex items-center gap-2">
- *       <Button variant="outline" size="sm">Export</Button>
- *       <Button size="sm">New Item</Button>
- *     </div>
- *   );
- * 
- *   return (
- *     <Header
- *       logoUrl="/logo.svg"
- *       navItems={navigationItems}
- *       actions={customActions}
- *       user={currentUser}
- *       onSignOut={handleSignOut}
- *     />
- *   );
- * }
- * ```
- * 
- * @example
- * Minimal header configuration:
- * ```tsx
- * function MinimalHeader() {
- *   return (
- *     <Header
- *       logoUrl="/simple-logo.svg"
- *       logoAlt="Simple App"
- *       showEventSelector={false}
- *       user={currentUser}
- *       onSignOut={handleSignOut}
- *     />
- *   );
- * }
- * ```
- * 
- * @param props - Header configuration including logo, navigation, user settings, and custom content
- * @returns React element with complete header functionality
- * 
- * @since 0.1.0
- */
-export function Header({
-  logoUrl,
-  logoAlt = 'Logo',
-  logo,
-  navItems = [],
-  user,
-  onSignOut,
-  onChangePassword,
-  actions,
-  userMenu,
-  className,
-  showEventSelector = true,
-  showUserMenu = true,
-  currentPath,
-  onNavigate
-}: HeaderProps) {
-  return (
-    <header className={cn(
-      "w-full border-b border-main-200 h-16 shadow-sm bg-main-100 ",
-      className
-    )} role="banner">
-      <nav className="px-4 w-[min(var(--app-width),100%)] mx-auto grid grid-cols-[auto_auto_1fr_auto] gap-4 h-full items-center">
-          {/* Logo */}
-          {logo ? (
-            logo
-          ) : logoUrl ? (
-            <img
-              src={logoUrl}
-              alt={logoAlt || 'Logo'}
-              className="h-[2.15rem] w-auto max-w-[200px] object-contain rounded-md shadow-md bg-transparent"
-            />
-          ) : (
-            <img
-              src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23000'/%3E%3Ctext x='16' y='20' text-anchor='middle' fill='white' font-family='Arial' font-size='14' font-weight='bold'%3EL%3C/text%3E%3C/svg%3E"
-              alt={logoAlt || 'Logo'}
-              className="h-8 w-8 shadow-md"
-            />
-          )}
-
-          {/* Navigation Menu */}
-          {navItems && navItems.length > 0 && (
-            <NavigationMenu
-              items={navItems}
-              currentPath={currentPath}
-              onNavigate={onNavigate}
-              buttonText="Menu"
-              className="w-48"
-            />
-          )}
-        
-
-        {/* Right side: Event Selector, Actions, and User Menu */}
-
-          {/* Event Selector */}
-          {showEventSelector && (
-            <EventSelector 
-              placeholder="Select event" 
-              className="justify-self-end hidden sm:block w-96" 
-              data-testid="event-selector" 
-            />
-          )}
-          
-          {/* Custom Actions */}
-          {actions}
-          
-          {/* User Menu */}
-          {showUserMenu && (
-            userMenu ? (
-              userMenu
-            ) : (
-              <UserMenu
-                user={user || null}
-                onSignOut={onSignOut}
-                onChangePassword={onChangePassword}
-                className="w-70"
-              />
-            )
-          )}
-
-      </nav>
-    </header>
-  );
-}