@jmruthers/pace-core 0.5.181 → 0.5.182

package/src/components/Dialog/utils/safeHtml.ts

@@ -1,185 +0,0 @@
-/**
- * @file Safe HTML Utilities for Dialog Component
- * @package @jmruthers/pace-core
- * @module Components/Dialog/Utils/safeHtml
- * @since 0.4.36
- * 
- * Utilities for safely rendering HTML content in Dialog components.
- * Provides sanitization and validation for basic HTML elements.
- */
-
-/**
- * Allowed HTML tags for safe rendering in Dialog components
- */
-const ALLOWED_TAGS = [
-  'p', 'div', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
-  'strong', 'em', 'b', 'i', 'u', 's', 'mark', 'small', 'sub', 'sup',
-  'ul', 'ol', 'li', 'dl', 'dt', 'dd',
-  'blockquote', 'pre', 'code', 'kbd', 'samp',
-  'a', 'br', 'hr',
-  'table', 'thead', 'tbody', 'tfoot', 'tr', 'th', 'td',
-  'img', 'figure', 'figcaption',
-  'section', 'article', 'aside', 'header', 'footer', 'main', 'nav',
-  'details', 'summary'
-] as const;
-
-/**
- * Allowed HTML attributes for safe rendering
- */
-const ALLOWED_ATTRIBUTES = [
-  'id', 'class', 'style', 'title', 'lang', 'dir',
-  'href', 'target', 'rel', 'download',
-  'src', 'alt', 'width', 'height', 'loading',
-  'colspan', 'rowspan', 'scope', 'headers',
-  'open', 'datetime', 'cite'
-] as const;
-
-/**
- * Basic HTML sanitization function using regex-based approach
- * Removes potentially dangerous elements and attributes while preserving basic formatting
- * This approach is more reliable in SSR environments and doesn't require DOM manipulation
- * 
- * @param html - The HTML string to sanitize
- * @returns Sanitized HTML string safe for rendering
- * 
- * @example
- * ```tsx
- * const safeHtml = sanitizeHtml('<p>Hello <strong>world</strong>!</p>');
- * // Returns: '<p>Hello <strong>world</strong>!</p>'
- * 
- * const dangerousHtml = sanitizeHtml('<script>alert("xss")</script><p>Safe content</p>');
- * // Returns: '<p>Safe content</p>'
- * ```
- */
-export function sanitizeHtml(html: string): string {
-  if (!html || typeof html !== 'string') {
-    return '';
-  }
-
-  // For debugging, let's just return the HTML as-is for now
-  // This will help us see if the issue is with sanitization or rendering
-  console.log('🔍 sanitizeHtml input:', html);
-  
-  // Basic safety: just remove script tags and dangerous attributes
-  let sanitized = html
-    // Remove script tags (including self-closing and malformed)
-    .replace(/<script\b[^>]*>.*?<\/script>/gi, '')
-    .replace(/<script\b[^>]*\/>/gi, '')
-    // Remove iframe tags (including self-closing and malformed)
-    .replace(/<iframe\b[^>]*>.*?<\/iframe>/gi, '')
-    .replace(/<iframe\b[^>]*\/>/gi, '')
-    // Remove object tags (including self-closing and malformed)
-    .replace(/<object\b[^>]*>.*?<\/object>/gi, '')
-    .replace(/<object\b[^>]*\/>/gi, '')
-    // Remove embed tags (including self-closing)
-    .replace(/<embed\b[^>]*\/?>/gi, '')
-    // Remove form tags (including self-closing and malformed)
-    .replace(/<form\b[^>]*>.*?<\/form>/gi, '')
-    .replace(/<form\b[^>]*\/>/gi, '')
-    // Remove input tags (including self-closing)
-    .replace(/<input\b[^>]*\/?>/gi, '')
-    // Remove button tags (including self-closing and malformed)
-    .replace(/<button\b[^>]*>.*?<\/button>/gi, '')
-    .replace(/<button\b[^>]*\/>/gi, '')
-    // Remove event handlers from any remaining tags - correct pattern
-    .replace(/\s*on\w+\s*=\s*["'][^"']*["']/gi, '')
-    // Remove javascript: protocols - correct pattern
-    .replace(/javascript:[^"'\s>]*/gi, '')
-    // Remove data: protocols - correct pattern
-    .replace(/data:[^"'\s>]*/gi, '');
-
-  console.log('🔍 sanitizeHtml output:', sanitized);
-  return sanitized;
-}
-
-/**
- * Validates if HTML content is safe for rendering
- * 
- * @param html - The HTML string to validate
- * @returns Object with validation result and any warnings
- * 
- * @example
- * ```tsx
- * const validation = validateHtml('<p>Safe content</p>');
- * console.log(validation.isValid); // true
- * console.log(validation.warnings); // []
- * ```
- */
-export function validateHtml(html: string): { isValid: boolean; warnings: string[] } {
-  const warnings: string[] = [];
-  
-  if (!html || typeof html !== 'string') {
-    return { isValid: false, warnings: ['HTML content must be a non-empty string'] };
-  }
-
-  // Check for potentially dangerous patterns
-  const dangerousPatterns = [
-    { pattern: /<script\b[^>]*>.*?<\/script>/gi, message: 'Script tags are not allowed' },
-    { pattern: /<script\b[^>]*\/>/gi, message: 'Script tags are not allowed' },
-    { pattern: /<iframe\b[^>]*>.*?<\/iframe>/gi, message: 'Iframe tags are not allowed' },
-    { pattern: /<iframe\b[^>]*\/>/gi, message: 'Iframe tags are not allowed' },
-    { pattern: /<object\b[^>]*>.*?<\/object>/gi, message: 'Object tags are not allowed' },
-    { pattern: /<object\b[^>]*\/>/gi, message: 'Object tags are not allowed' },
-    { pattern: /<embed\b[^>]*\/?>/gi, message: 'Embed tags are not allowed' },
-    { pattern: /<form\b[^>]*>.*?<\/form>/gi, message: 'Form tags are not allowed' },
-    { pattern: /<form\b[^>]*\/>/gi, message: 'Form tags are not allowed' },
-    { pattern: /<input\b[^>]*\/?>/gi, message: 'Input tags are not allowed' },
-    { pattern: /<button\b[^>]*>.*?<\/button>/gi, message: 'Button tags are not allowed' },
-    { pattern: /<button\b[^>]*\/>/gi, message: 'Button tags are not allowed' },
-    { pattern: /on\w+\s*=/gi, message: 'Event handlers are not allowed' },
-    { pattern: /javascript:/gi, message: 'JavaScript protocols are not allowed' },
-    { pattern: /data:/gi, message: 'Data protocols are not allowed' }
-  ];
-
-  dangerousPatterns.forEach(({ pattern, message }) => {
-    if (pattern.test(html)) {
-      warnings.push(message);
-    }
-  });
-
-  return {
-    isValid: warnings.length === 0,
-    warnings
-  };
-}
-
-/**
- * Safely renders HTML content with sanitization
- * 
- * @param html - The HTML string to render
- * @param options - Rendering options
- * @returns Object with sanitized HTML and validation info
- * 
- * @example
- * ```tsx
- * const result = renderSafeHtml('<p>Hello <strong>world</strong>!</p>');
- * console.log(result.html); // Sanitized HTML
- * console.log(result.isValid); // true
- * ```
- */
-export function renderSafeHtml(
-  html: string, 
-  options: { 
-    strict?: boolean; 
-    logWarnings?: boolean;
-  } = {}
-): { 
-  html: string; 
-  isValid: boolean; 
-  warnings: string[] 
-} {
-  const { strict = true, logWarnings = false } = options;
-  
-  const validation = validateHtml(html);
-  const sanitizedHtml = sanitizeHtml(html);
-  
-  if (logWarnings && validation.warnings.length > 0) {
-    console.warn('Dialog HTML content warnings:', validation.warnings);
-  }
-  
-  return {
-    html: sanitizedHtml,
-    isValid: validation.isValid,
-    warnings: validation.warnings
-  };
-}

package/src/components/EventSelector/types.ts

@@ -1,79 +0,0 @@
-/**
- * @file Types for event selector component
- */
-import type { SupabaseClient } from '@supabase/supabase-js';
-import { Event } from '../../types/unified';
-
-interface ColorLCH {
-  L: number;
-  C: number;
-  H: number;
-}
-
-interface ColorPalette {
-  [shade: string]: ColorLCH;
-}
-
-export interface EventColors {
-  [paletteKey: string]: ColorPalette;
-}
-
-/**
- * Props for EventSelector component
- */
-export interface EventSelectorProps {
-  /**
-   * Events data to be displayed in the dropdown
-   */
-  events?: Event[];
-  
-  /**
-   * ID of the currently selected event
-   */
-  currentEventId?: string;
-  
-  /**
-   * Function called when an event is selected
-   */
-  onSelectEvent?: (eventId: string) => void;
-  
-  /**
-   * Custom CSS class for styling
-   */
-  className?: string;
-  
-  /**
-   * Whether to display in compact mode
-   */
-  compact?: boolean;
-  
-  /**
-   * Function called when an event is changed with full event object
-   */
-  onEventChange?: (event: Event | null) => void;
-
-  /**
-   * Supabase client instance
-   */
-  supabaseClient?: SupabaseClient;
-
-  /**
-   * Application name for session tracking
-   */
-  appName?: string;
-}
-
-/**
- * Props for EventTheme component
- */
-export interface EventThemeProps {
-  /**
-   * Event ID to use for theming
-   */
-  eventId?: string;
-  
-  /**
-   * Children to apply the theme to
-   */
-  children: React.ReactNode;
-}

package/src/components/Form/FormErrorSummary.tsx

@@ -1,113 +0,0 @@
-
-/**
- * @file FormErrorSummary Component
- * @package @jmruthers/pace-core
- * @module Components/Form
- * @since 0.1.0
- *
- * A form error summary component that displays validation errors in a user-friendly format.
- * Provides a centralized location for users to see all form errors at once.
- *
- * Features:
- * - Displays all form errors in one place
- * - Configurable error display format
- * - Optional field name display
- * - Accessible error presentation
- * - Consistent styling with Alert component
- * - Automatic error filtering
- * - Responsive design
- *
- * @example
- * ```tsx
- * // Basic error summary
- * <FormErrorSummary errors={formErrors} />
- * 
- * // With custom title
- * <FormErrorSummary 
- *   errors={formErrors}
- *   title="Please correct the following issues:"
- * />
- * 
- * // Show field names with errors
- * <FormErrorSummary 
- *   errors={formErrors}
- *   showFieldNames={true}
- * />
- * 
- * // In a form with React Hook Form
- * const { formState: { errors } } = useForm();
- * 
- * <Form onSubmit={handleSubmit}>
- *   <FormField name="email" label="Email" />
- *   <FormField name="password" label="Password" />
- *   <FormErrorSummary errors={errors} />
- *   <Button type="submit">Submit</Button>
- * </Form>
- * ```
- *
- * @accessibility
- * - Uses Alert component for consistent accessibility
- * - Proper heading hierarchy with h3
- * - List structure for error items
- * - Screen reader friendly error announcements
- * - High contrast support via Alert component
- *
- * @dependencies
- * - Alert component for consistent styling
- * - React 18+ - Component framework
- * - Tailwind CSS - Styling
- */
-
-import { Alert } from '../Alert';
-
-export interface FormErrorSummaryProps {
-  /** Form validation errors object */
-  errors?: Record<string, any>;
-  /** Title displayed above the error list */
-  title?: string;
-  /** Whether to show field names alongside error messages */
-  showFieldNames?: boolean;
-}
-
-/**
- * FormErrorSummary component for displaying form validation errors
- * 
- * This component provides a user-friendly way to display all form errors
- * in one centralized location, improving the user experience by making
- * it clear what needs to be fixed.
- * 
- * @param props - Component configuration
- * @param props.errors - Form validation errors object
- * @param props.title - Title displayed above the error list
- * @param props.showFieldNames - Whether to show field names with errors
- * @returns JSX.Element - The rendered error summary or null if no errors
- */
-export function FormErrorSummary({ 
-  errors = {}, 
-  title = "Please fix the following errors:",
-  showFieldNames = false 
-}: FormErrorSummaryProps) {
-  const errorEntries = Object.entries(errors).filter(([, value]) => Boolean(value));
-
-  if (errorEntries.length === 0) {
-    return null;
-  }
-
-  return (
-    <Alert variant="destructive" className="mb-4">
-      <div>
-        <h3>{title}</h3>
-        <ul className="list-disc list-inside space-y-1">
-          {errorEntries.map(([field, error], index) => {
-            const message = typeof error === 'object' && error.message ? error.message : String(error);
-            return (
-              <li key={index} className="text-sm">
-                {showFieldNames ? `${field}: ${message}` : message}
-              </li>
-            );
-          })}
-        </ul>
-      </div>
-    </Alert>
-  );
-}

package/src/components/Form/FormField.tsx

@@ -1,249 +0,0 @@
-/**
- * @file FormField Component
- * @package @jmruthers/pace-core
- * @module Components/Form
- * @since 0.1.0
- *
- * A flexible form field component that integrates with React Hook Form and provides
- * built-in validation, error handling, and accessibility features.
- *
- * Features:
- * - React Hook Form integration with Controller
- * - Built-in validation with error display
- * - Accessible labels and error messages
- * - Custom render function support
- * - TypeScript support with generic field paths
- * - Consistent styling with error states
- * - Test ID support for testing
- * - Flexible input types and props
- *
- * @example
- * ```tsx
- * // Basic text field
- * <FormField
- *   name="username"
- *   label="Username"
- *   placeholder="Enter your username"
- *   validation={{ required: true }}
- * />
- * 
- * // Email field with custom validation
- * <FormField
- *   name="email"
- *   label="Email Address"
- *   type="email"
- *   validation={{
- *     required: true,
- *     pattern: {
- *       value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
- *       message: "Invalid email address"
- *     }
- *   }}
- * />
- * 
- * // Custom render function
- * <FormField
- *   name="avatar"
- *   label="Profile Picture"
- *   render={({ field }) => (
- *     <input
- *       {...field}
- *       type="file"
- *       accept="image/*"
- *       className="file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-sec-50 file:text-sec-700 hover:file:bg-sec-100"
- *     />
- *   )}
- * />
- * 
- * // With test ID for testing
- * <FormField
- *   name="password"
- *   label="Password"
- *   type="password"
- *   data-testid="password-field"
- *   validation={{
- *     required: true,
- *     minLength: {
- *       value: 8,
- *       message: "Password must be at least 8 characters"
- *     }
- *   }}
- * />
- * ```
- *
- * @accessibility
- * - Proper label association with htmlFor
- * - Error messages with role="alert"
- * - Required field indicators
- * - Focus management
- * - Screen reader friendly error announcements
- * - Keyboard navigation support
- *
- * @dependencies
- * - react-hook-form - Form integration
- * - React 18+ - Hooks and context
- * - Tailwind CSS - Styling
- */
-
-import React from 'react';
-import { useFormContext, Controller, FieldPath, FieldValues } from 'react-hook-form';
-import { cn } from '../../utils/core/cn';
-import { Label } from '../Label';
-
-export interface FormFieldProps<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
-> {
-  /**
-   * Field name
-   */
-  name: TName;
-  
-  /**
-   * Field label
-   */
-  label?: string;
-  
-  /**
-   * Field type
-   */
-  type?: string;
-  
-  /**
-   * Placeholder text
-   */
-  placeholder?: string;
-  
-  /**
-   * Additional props for the input
-   */
-  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
-  
-  /**
-   * Validation rules
-   */
-  validation?: {
-    required?: boolean;
-    pattern?: {
-      value: RegExp;
-      message: string;
-    };
-    minLength?: {
-      value: number;
-      message: string;
-    };
-    maxLength?: {
-      value: number;
-      message: string;
-    };
-  };
-  
-  /**
-   * Custom render function
-   */
-  render?: ({ field }: { field: any }) => React.ReactElement;
-  
-  /**
-   * Test ID
-   */
-  'data-testid'?: string;
-  
-  /**
-   * Class name
-   */
-  className?: string;
-}
-
-/**
- * FormField component for React Hook Form integration
- * 
- * @template TFieldValues - The type of form field values
- * @template TName - The type of the field name (must be a valid field path)
- * @param props - Form field configuration and validation
- * @returns JSX.Element - The rendered form field with validation
- * 
- * @example
- * ```tsx
- * <FormField
- *   name="email"
- *   label="Email"
- *   type="email"
- *   validation={{
- *     required: true,
- *     pattern: {
- *       value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
- *       message: "Please enter a valid email address"
- *     }
- *   }}
- * />
- * ```
- */
-export function FormField<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
->({
-  name,
-  label,
-  type = "text",
-  placeholder,
-  inputProps,
-  validation,
-  render,
-  'data-testid': testId,
-  className,
-}: FormFieldProps<TFieldValues, TName>) {
-  const { control, formState: { errors } } = useFormContext<TFieldValues>();
-  const fieldError = errors[name];
-
-  // Safely extract error message
-  const errorMessage = fieldError && typeof fieldError === 'object' && 'message' in fieldError 
-    ? String(fieldError.message) 
-    : undefined;
-
-  return (
-    <div className={cn("space-y-2", className)}>
-      {label && (
-        <Label htmlFor={name}>
-          {label}
-          {validation?.required && (
-            <span className="text-destructive ml-1" aria-label="required">
-              *
-            </span>
-          )}
-        </Label>
-      )}
-      
-      <Controller
-        name={name}
-        control={control}
-        rules={validation}
-        render={({ field }) => {
-          if (render) {
-            return render({ field });
-          }
-          
-          return (
-            <input
-              {...field}
-              id={name}
-              type={type}
-              placeholder={placeholder}
-              data-testid={testId}
-              className={cn(
-                "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-                fieldError && "border-destructive focus-visible:ring-destructive"
-              )}
-              {...inputProps}
-            />
-          );
-        }}
-      />
-      
-      {errorMessage && (
-        <p className="text-destructive" role="alert">
-          {errorMessage}
-        </p>
-      )}
-    </div>
-  );
-}