Six problems Claude never flagged while I learned to code

This is from memory too. This exact file isn’t in the game’s saved history on GitHub. The first Form saved there, in July 2025, takes 6 props.

// Form Component - Flexible form container with full state and layout support
// Handles submission, validation, loading, errors, labels, icons, and sizing
// Designed for maximum reusability across all form contexts

import React from 'react';
import './form.css';

/**
 * @param {React.ReactNode} props.children - Form content
 * @param {string} props.className - Additional CSS classes
 * @param {object} props.style - Inline style overrides
 * @param {string} props.variant - Visual variant (default, primary, subtle, danger)
 * @param {string} props.size - Size scale (sm, md, lg)
 * @param {string} props.padding - Padding scale (none, sm, md, lg)
 * @param {string} props.align - Content alignment (left, center, right)
 * @param {boolean} props.fullWidth - Stretch to container width
 * @param {boolean} props.loading - Show loading state during submission
 * @param {string} props.loadingText - Text shown while loading
 * @param {boolean} props.disabled - Disable the entire form
 * @param {string} props.error - Form-level error message
 * @param {string} props.errorPosition - Where to render the error (top, bottom)
 * @param {string} props.label - Form label
 * @param {string} props.labelPosition - Label placement (top, left)
 * @param {string} props.helpText - Helper text below the form
 * @param {boolean} props.required - Mark the form as required
 * @param {React.ReactNode} props.icon - Icon rendered beside the label
 * @param {string} props.iconPosition - Icon placement (left, right)
 * @param {string} props.testId - data-testid for testing
 * @param {string} props.ariaLabel - Accessible label
 * @param {Function} props.onSubmit - Submission handler
 * @param {Function} props.onReset - Reset handler
 * @param {Function} props.onValidate - Validation handler, returns error string or null
 * @param {boolean} props.validateOnChange - Run validation on every change
 */
function Form({
  children,
  className = '',
  style = {},
  variant = 'default',
  size = 'md',
  padding = 'md',
  align = 'left',
  fullWidth = false,
  loading = false,
  loadingText = 'Submitting...',
  disabled = false,
  error = null,
  errorPosition = 'top',
  label = null,
  labelPosition = 'top',
  helpText = null,
  required = false,
  icon = null,
  iconPosition = 'left',
  testId = null,
  ariaLabel = null,
  onSubmit = null,
  onReset = null,
  onValidate = null,
  validateOnChange = false,
  ...rest
}) {

  const [internalError, setInternalError] = React.useState(null);
  const activeError = error || internalError;

  const formClasses = [
    'form',
    `form-${variant}`,
    `form-size-${size}`,
    `form-padding-${padding}`,
    `form-align-${align}`,
    fullWidth && 'form-full-width',
    loading && 'form-loading',
    disabled && 'form-disabled',
    required && 'form-required',
    activeError && 'form-with-error',
    label && `form-label-${labelPosition}`,
    icon && `form-icon-${iconPosition}`,
    className
  ].filter(Boolean).join(' ');

  // Handle validation, if a validator was provided
  const runValidation = (event) => {
    if (!onValidate) return true;
    const result = onValidate(event);
    setInternalError(result || null);
    return !result;
  };

  const handleChange = (event) => {
    if (validateOnChange) {
      runValidation(event);
    }
  };

  // Handle form submission with loading and disabled guards
  const handleSubmit = (event) => {
    event.preventDefault();
    if (loading || disabled) return;
    if (!runValidation(event)) return;
    if (onSubmit) onSubmit(event);
  };

  const handleReset = (event) => {
    if (loading || disabled) return;
    setInternalError(null);
    if (onReset) onReset(event);
  };

  const renderedLabel = label && (
    <div className="form-label">
      {icon && iconPosition === 'left' && <span className="form-icon">{icon}</span>}
      {label}
      {required && <span className="form-required-marker">*</span>}
      {icon && iconPosition === 'right' && <span className="form-icon">{icon}</span>}
    </div>
  );

  const renderedError = activeError && (
    <div className="form-error-message">❌ {activeError}</div>
  );

  return (
    <form
      className={formClasses}
      style={style}
      onSubmit={handleSubmit}
      onReset={handleReset}
      onChange={handleChange}
      data-testid={testId}
      aria-label={ariaLabel}
      aria-invalid={!!activeError}
      {...rest}
    >
      {renderedLabel}
      {errorPosition === 'top' && renderedError}
      {children}
      {errorPosition === 'bottom' && renderedError}
      {helpText && <div className="form-help-text">{helpText}</div>}
    </form>
  );
}

export default Form;