@jmruthers/pace-core 0.5.181 → 0.5.183

package/src/components/Form/FormFieldset.tsx

@@ -1,127 +0,0 @@
-/**
- * @file FormFieldset Component
- * @package @jmruthers/pace-core
- * @module Components/Form
- * @since 0.1.0
- *
- * A form fieldset component that groups related form fields together with a legend
- * and optional description. Provides semantic structure and accessibility for form sections.
- *
- * Features:
- * - Semantic fieldset grouping for related form fields
- * - Accessible legend with required indicator
- * - Optional description text with proper ARIA association
- * - Consistent styling with design system
- * - Forwarded ref support
- * - Customizable styling via className
- * - Required field indication
- * - Responsive design
- *
- * @example
- * ```tsx
- * // Basic fieldset
- * <FormFieldset legend="Personal Information">
- *   <FormField name="firstName" label="First Name" />
- *   <FormField name="lastName" label="Last Name" />
- *   <FormField name="email" label="Email" />
- * </FormFieldset>
- * 
- * // Fieldset with description
- * <FormFieldset 
- *   legend="Contact Details" 
- *   description="We'll use this information to contact you about your order"
- * >
- *   <FormField name="phone" label="Phone Number" />
- *   <FormField name="address" label="Address" />
- * </FormFieldset>
- * 
- * // Required fieldset
- * <FormFieldset 
- *   legend="Account Settings" 
- *   required={true}
- *   description="These settings are required for account creation"
- * >
- *   <FormField name="username" label="Username" required />
- *   <FormField name="password" label="Password" type="password" required />
- * </FormFieldset>
- * 
- * // With custom styling
- * <FormFieldset 
- *   legend="Preferences"
- *   className="bg-sec-50 border-sec-200"
- * >
- *   <FormField name="newsletter" label="Subscribe to newsletter" type="checkbox" />
- *   <FormField name="notifications" label="Enable notifications" type="checkbox" />
- * </FormFieldset>
- * ```
- *
- * @accessibility
- * - Proper semantic HTML with fieldset and legend
- * - ARIA describedby association for descriptions
- * - Required field indication with asterisk
- * - Screen reader friendly structure
- * - Keyboard navigation support
- * - WCAG 2.1 AA compliant
- *
- * @dependencies
- * - React 18+ - Component framework and hooks
- * - Tailwind CSS - Styling
- * - cn utility - Class name merging
- */
-
-import React from 'react';
-import { cn } from '../../utils/core/cn';
-
-export interface FormFieldsetProps extends React.FieldsetHTMLAttributes<HTMLFieldSetElement> {
-  /** The legend text for the fieldset */
-  legend: string;
-  /** Optional description text below the legend */
-  description?: string;
-  /** Whether the fieldset contains required fields */
-  required?: boolean;
-  /** Form fields to group within the fieldset */
-  children: React.ReactNode;
-}
-
-/**
- * FormFieldset component for grouping related form fields
- * 
- * This component provides semantic grouping for form fields with proper
- * accessibility support and consistent styling. Use it to organize
- * related form inputs into logical sections.
- * 
- * @param props - Component configuration
- * @param props.legend - The legend text for the fieldset
- * @param props.description - Optional description text
- * @param props.required - Whether the fieldset contains required fields
- * @param props.children - Form fields to group
- * @param ref - Forwarded ref to the fieldset element
- * @returns JSX.Element - The rendered fieldset with legend and fields
- */
-export const FormFieldset = React.forwardRef<HTMLFieldSetElement, FormFieldsetProps>(
-  ({ legend, description, required, className, children, ...props }, ref) => {
-    const descriptionId = React.useId();
-    
-    return (
-      <fieldset
-        ref={ref}
-        className={cn("space-y-4 border border-input rounded-lg p-4", className)}
-        aria-describedby={description ? descriptionId : undefined}
-        {...props}
-      >
-        <legend className="px-2">
-          {legend}
-          {required && <span className="text-destructive ml-1">*</span>}
-        </legend>
-        {description && (
-          <p id={descriptionId} className="text-muted-foreground">
-            {description}
-          </p>
-        )}
-        {children}
-      </fieldset>
-    );
-  }
-);
-
-FormFieldset.displayName = "FormFieldset";

package/src/components/Form/FormLiveRegion.tsx

@@ -1,198 +0,0 @@
-/**
- * @file FormLiveRegion Component
- * @package @jmruthers/pace-core
- * @module Components/Form
- * @since 0.1.0
- *
- * An accessible live region component for form validation announcements.
- * Provides real-time feedback to screen readers about form validation states
- * and error messages, improving accessibility for users with assistive technologies.
- *
- * Features:
- * - Real-time form validation announcements
- * - Configurable politeness levels (polite/assertive)
- * - Customizable delay timing
- * - Field-level and form-level announcements
- * - Success message customization
- * - Automatic error counting and field identification
- * - Accessibility compliant with ARIA live regions
- * - Integration with React Hook Form
- *
- * @example
- * ```tsx
- * // Basic live region
- * const { control, formState } = useForm();
- * 
- * <Form onSubmit={handleSubmit}>
- *   <FormField name="email" label="Email" />
- *   <FormField name="password" label="Password" />
- *   <FormLiveRegion form={{ control, formState }} />
- *   <Button type="submit">Submit</Button>
- * </Form>
- * 
- * // With custom configuration
- * <FormLiveRegion
- *   form={{ control, formState }}
- *   politeness="assertive"
- *   delay={1000}
- *   successMessage="Your form was submitted successfully!"
- *   enableFieldAnnouncements={true}
- * />
- * 
- * // In a complex form
- * function ComplexForm() {
- *   const methods = useForm({
- *     defaultValues: { name: '', email: '', message: '' }
- *   });
- *   
- *   return (
- *     <FormProvider {...methods}>
- *       <form onSubmit={methods.handleSubmit(onSubmit)}>
- *         <FormField name="name" label="Name" />
- *         <FormField name="email" label="Email" />
- *         <FormField name="message" label="Message" />
- *         <FormLiveRegion 
- *           form={methods}
- *           politeness="polite"
- *           delay={300}
- *         />
- *         <Button type="submit">Send Message</Button>
- *       </form>
- *     </FormProvider>
- *   );
- * }
- * ```
- *
- * @accessibility
- * - ARIA live region for screen reader announcements
- * - Configurable politeness levels for different message types
- * - Automatic error counting and field identification
- * - Non-intrusive validation feedback
- * - WCAG 2.1 AA compliant
- * - Screen reader friendly error announcements
- *
- * @dependencies
- * - react-hook-form - Form state management
- * - React 18+ - Hooks and effects
- * - Tailwind CSS - Styling
- */
-
-import React, { useEffect, useState } from 'react';
-import { UseFormReturn, FieldValues } from 'react-hook-form';
-import { cn } from '../../utils/core/cn';
-
-/**
- * Props for the FormLiveRegion component
- */
-export interface FormLiveRegionProps<T extends FieldValues> {
-  /** React Hook Form instance */
-  form: UseFormReturn<T>;
-  /** ARIA live region politeness level */
-  politeness?: 'polite' | 'assertive';
-  /** Delay before announcing messages (in ms) */
-  delay?: number;
-  /** Custom success message */
-  successMessage?: string;
-  /** Custom class name */
-  className?: string;
-  /** Enable field-level validation announcements */
-  enableFieldAnnouncements?: boolean;
-}
-
-/**
- * FormLiveRegion component for accessible form validation announcements
- */
-export function FormLiveRegion<T extends FieldValues>({
-  form,
-  politeness = 'polite',
-  delay = 500,
-  successMessage = 'Form submitted successfully',
-  className,
-  enableFieldAnnouncements = true
-}: FormLiveRegionProps<T>): React.ReactElement {
-  const [message, setMessage] = useState<string>('');
-  const { formState } = form;
-
-  // Handle form-level announcements
-  useEffect(() => {
-    let timeoutId: NodeJS.Timeout;
-
-    if (formState.isSubmitting) {
-      setMessage('Submitting form...');
-    } else if (formState.isSubmitSuccessful) {
-      timeoutId = setTimeout(() => {
-        setMessage(successMessage);
-      }, delay);
-    } else if (formState.errors && Object.keys(formState.errors).length > 0) {
-      const errorCount = Object.keys(formState.errors).length;
-      const errorFields = Object.keys(formState.errors).join(', ');
-      setMessage(`Form has ${errorCount} error${errorCount === 1 ? '' : 's'} in: ${errorFields}`);
-    } else if (formState.isValid && formState.isDirty) {
-      setMessage('Form is valid');
-    } else {
-      setMessage('');
-    }
-
-    return () => {
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
-    };
-  }, [formState, delay, successMessage]);
-
-  // Handle field-level announcements
-  useEffect(() => {
-    if (!enableFieldAnnouncements) return;
-
-    let timeoutId: NodeJS.Timeout;
-    
-    const fieldErrors = formState.errors;
-    const touchedFields = formState.touchedFields;
-    
-    // Find newly touched fields with errors
-    const newErrors = Object.keys(fieldErrors).filter(field => {
-      // Type-safe access to touchedFields
-      const touchedField = touchedFields as Record<string, boolean>;
-      return touchedField[field] && fieldErrors[field as keyof typeof fieldErrors];
-    });
-
-    if (newErrors.length > 0) {
-      timeoutId = setTimeout(() => {
-        const errorField = newErrors[0];
-        const errorData = fieldErrors[errorField as keyof typeof fieldErrors];
-        const errorMessage = errorData?.message;
-        if (errorMessage) {
-          setMessage(`${errorField}: ${errorMessage}`);
-        }
-      }, delay);
-    }
-
-    return () => {
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
-    };
-  }, [formState.errors, formState.touchedFields, enableFieldAnnouncements, delay]);
-
-  if (!message) {
-    return <></>;
-  }
-
-  return (
-    <div
-      role="status"
-      aria-live={politeness}
-      aria-atomic="true"
-      className={cn('sr-only', className)}
-      style={{
-        position: 'absolute',
-        left: '-10000px',
-        width: '1px',
-        height: '1px',
-        overflow: 'hidden'
-      }}
-    >
-      {message}
-    </div>
-  );
-}

package/src/components/Input/__mocks__/Input.tsx

@@ -1,2 +0,0 @@
-import React from 'react';
-export const Input = (props: any) => <input data-testid="input-component" {...props} />; 

package/src/components/NavigationMenu/types.ts

@@ -1,85 +0,0 @@
-/**
- * @file NavigationMenu Types
- * @package @jmruthers/pace-core
- * @module NavigationMenu
- * @since 0.1.0
- */
-
-/**
- * Navigation item configuration
- * Supports both flat and hierarchical navigation structures
- */
-export interface NavigationItem {
-  /** Unique identifier for the navigation item */
-  id: string;
-  /** Display text for the navigation item */
-  label: string;
-  /** URL or path to navigate to (optional for parent items in hierarchical mode) */
-  href?: string;
-  /** Optional Lucide icon name for the navigation item */
-  icon?: string;
-  /** Child navigation items for hierarchical mode */
-  children?: NavigationItem[];
-  /** Whether this item is currently active (auto-detected if not provided) */
-  isActive?: boolean;
-  
-  // NEW: Phase 2 - Enhanced Security Features
-  /** Permissions required for this navigation item */
-  permissions?: string[];
-  /** Roles that can access this navigation item */
-  roles?: string[];
-  /** Minimum access level required */
-  accessLevel?: string;
-  /** Page ID for permission checking */
-  pageId?: string;
-  /** Enable strict mode for this navigation item */
-  strictMode?: boolean;
-  /** Navigation item metadata */
-  meta?: {
-    title?: string;
-    description?: string;
-    hidden?: boolean;
-    order?: number;
-  };
-}
-
-/**
- * Navigation mode configuration
- */
-export type NavigationMode = 'dropdown' | 'hierarchical';
-
-/**
- * NavigationMenu component props
- */
-export interface NavigationMenuProps {
-  /** Array of navigation items to display */
-  items: NavigationItem[];
-  /** Navigation mode: 'dropdown' for menu button style, 'hierarchical' for expandable tree */
-  mode?: NavigationMode;
-  /** Current page path for highlighting active item */
-  currentPath?: string;
-  /** Optional callback when navigation item is clicked */
-  onNavigate?: (item: NavigationItem) => void;
-  /** Additional CSS classes */
-  className?: string;
-  /** Whether the menu is disabled (dropdown mode only) */
-  disabled?: boolean;
-  /** Custom button text for dropdown mode (defaults to "Menu") */
-  buttonText?: string;
-  /** Whether to show icons in the navigation (dropdown mode only) */
-  showIcons?: boolean;
-  /** Custom navigation label for screen readers */
-  navigationLabel?: string;
-  
-  // NEW: Phase 2 - Enhanced Security Features
-  /** Enable strict mode to prevent bypassing navigation protection (default: true) */
-  strictMode?: boolean;
-  /** Enable audit logging for all navigation access attempts (default: true) */
-  auditLog?: boolean;
-  /** Callback when navigation access is denied */
-  onNavigationAccessDenied?: (itemId: string, reason: string) => void;
-  /** Callback when strict mode violation occurs */
-  onStrictModeViolation?: (itemId: string, reason: string) => void;
-  /** Enable automatic filtering of navigation items based on permissions */
-  filterByPermissions?: boolean;
-}