Forms and Navigation

/**
 * Enhanced HTML form component with progressive enhancement
 * Automatically handles form submission, validation, and server communication
 * @param props - Form configuration and HTML form attributes
 * @returns React form element with enhanced functionality
 */
function Form(props: RemixFormProps): ReactElement;

interface RemixFormProps extends Omit<FormHTMLAttributes<HTMLFormElement>, "onSubmit"> {
  /** HTTP method for form submission */
  method?: "get" | "post" | "put" | "patch" | "delete";
  /** URL to submit the form to (defaults to current route) */
  action?: string;
  /** Route discovery behavior */
  discover?: "render" | "none";
  /** Encoding type for form data */
  encType?: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain";
  /** Whether to replace the current history entry instead of pushing a new one */
  replace?: boolean;
  /** Whether to prevent automatic scroll restoration after form submission */
  preventScrollReset?: boolean;
  /** Whether to trigger a full page reload instead of client-side handling */
  reloadDocument?: boolean;
  /** Whether to trigger navigation after successful submission */
  navigate?: boolean;
  /** Callback for form submission */
  onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
}

import { Form } from "@remix-run/react";

// Basic form with POST action
function ContactForm() {
  return (
    <Form method="post">
      <input type="email" name="email" required />
      <textarea name="message" required />
      <button type="submit">Send Message</button>
    </Form>
  );
}

// Form with file upload
function UploadForm() {
  return (
    <Form method="post" encType="multipart/form-data">
      <input type="file" name="document" accept=".pdf,.doc" />
      <button type="submit">Upload</button>
    </Form>
  );
}

// Form with custom submission handling
function SearchForm() {
  return (
    <Form 
      method="get" 
      action="/search"
      preventScrollReset
      onSubmit={(event) => {
        // Optional custom handling before submission
        console.log("Submitting search...");
      }}
    >
      <input type="search" name="q" placeholder="Search..." />
      <button type="submit">Search</button>
    </Form>
  );
}

/**
 * Enhanced anchor tag with prefetching and client-side navigation
 * Automatically handles client-side routing and resource prefetching
 * @param props - Link configuration and HTML anchor attributes
 * @returns React anchor element with enhanced functionality
 */
function Link(props: RemixLinkProps): ReactElement;

interface RemixLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
  /** URL to navigate to */
  to: string | Partial<Path>;
  /** Route discovery behavior */
  discover?: "render" | "none";
  /** Whether to prefetch the route data and assets */
  prefetch?: "none" | "intent" | "render" | "viewport";
  /** Whether to replace the current history entry */
  replace?: boolean;
  /** State object to pass with the navigation */
  state?: any;
  /** Whether to prevent the scroll from resetting to the top */
  preventScrollReset?: boolean;
  /** Relative path resolution behavior */
  relative?: "route" | "path";
  /** Whether to reload the document instead of client-side navigation */
  reloadDocument?: boolean;
  /** Function to determine if the link should be prefetched */
  unstable_viewTransition?: boolean;
}

import { Link } from "@remix-run/react";

// Basic navigation link
function Navigation() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/contact">Contact</Link>
    </nav>
  );
}

// Link with prefetching
function ProductCard({ product }) {
  return (
    <div>
      <h3>{product.name}</h3>
      <Link 
        to={`/products/${product.id}`}
        prefetch="intent"
        state={{ from: "catalog" }}
      >
        View Details
      </Link>
    </div>
  );
}

// External link with document reload
function ExternalLink() {
  return (
    <Link 
      to="https://example.com"
      reloadDocument
      target="_blank"
      rel="noopener noreferrer"
    >
      External Site
    </Link>
  );
}

/**
 * Navigation link with automatic active state styling
 * Automatically applies active classes and aria attributes based on current location
 * @param props - NavLink configuration and HTML anchor attributes
 * @returns React anchor element with active state functionality
 */
function NavLink(props: RemixNavLinkProps): ReactElement;

interface RemixNavLinkProps extends RemixLinkProps {
  /** Function to determine active state styling */
  className?: string | ((props: { isActive: boolean; isPending: boolean }) => string);
  /** Function to determine active state inline styles */
  style?: CSSProperties | ((props: { isActive: boolean; isPending: boolean }) => CSSProperties);
  /** Function to determine active state for child content */
  children?: ReactNode | ((props: { isActive: boolean; isPending: boolean }) => ReactNode);
  /** Whether the link should match the end of the path exactly */
  end?: boolean;
  /** Case sensitivity for path matching */
  caseSensitive?: boolean;
}

import { NavLink } from "@remix-run/react";

// Basic navigation with active styling
function MainNavigation() {
  return (
    <nav>
      <NavLink 
        to="/"
        className={({ isActive }) => 
          isActive ? "nav-link active" : "nav-link"
        }
        end
      >
        Home
      </NavLink>
      <NavLink 
        to="/blog"
        style={({ isActive, isPending }) => ({
          color: isActive ? "red" : isPending ? "orange" : "blue",
        })}
      >
        Blog
      </NavLink>
    </nav>
  );
}

// Dynamic content based on active state
function SidebarLink({ to, children }) {
  return (
    <NavLink to={to}>
      {({ isActive, isPending }) => (
        <>
          {isActive && <span>👉 </span>}
          {children}
          {isPending && <span> ⏳</span>}
        </>
      )}
    </NavLink>
  );
}

/**
 * Prefetches page resources for improved navigation performance
 * Loads route modules and data for specified pages
 * @param props - Prefetch configuration
 * @returns React element containing prefetch link tags
 */
function PrefetchPageLinks(props: PrefetchPageLinksProps): ReactElement;

interface PrefetchPageLinksProps {
  /** Page path to prefetch */
  page: string;
}

import { PrefetchPageLinks } from "@remix-run/react";

// Prefetch critical pages
function App() {
  return (
    <html>
      <head>
        <Meta />
        <Links />
        {/* Prefetch commonly accessed pages */}
        <PrefetchPageLinks page="/dashboard" />
        <PrefetchPageLinks page="/profile" />
      </head>
      <body>{/* app content */}</body>
    </html>
  );
}

interface Path {
  /** The URL pathname */
  pathname: string;
  /** The URL search string */
  search: string;
  /** The URL hash fragment */
  hash: string;
}

type PrefetchBehavior = 
  | "none"       // No prefetching
  | "intent"     // Prefetch when user shows intent to navigate (hover, focus)
  | "render"     // Prefetch when the link is rendered
  | "viewport";  // Prefetch when the link enters the viewport