Componentes Compuestos — Diseña APIs de componentes multi-parte que comparten estado implícito a través de contexto

// Componente compuesto: Select con estado compartido
const SelectContext = createContext<{
  value: string;
  onChange: (value: string) => void;
} | null>(null);
 
function Select({ value, onChange, children }: {
  value: string;
  onChange: (value: string) => void;
  children: React.ReactNode;
}) {
  return (
    <SelectContext value={{ value, onChange }}>
      <div role="listbox">{children}</div>
    </SelectContext>
  );
}
 
function Option({ value, children }: { value: string; children: React.ReactNode }) {
  const ctx = use(SelectContext);
  if (!ctx) throw new Error("Option debe usarse dentro de Select");
  const isSelected = ctx.value === value;
  return (
    <div
      role="option"
      aria-selected={isSelected}
      onClick={() => ctx.onChange(value)}
      className={isSelected ? "bg-blue-100 font-semibold" : ""}
    >
      {children}
    </div>
  );
}
 
Select.Option = Option;
 
// Uso — se lee como una API declarativa
<Select value={selected} onChange={setSelected}>
  <Select.Option value="react">React</Select.Option>
  <Select.Option value="vue">Vue</Select.Option>
  <Select.Option value="svelte">Svelte</Select.Option>
</Select>

import { createContext, use, useState, useId, type ReactNode } from "react";
 
// --- Componente compuesto Accordion ---
 
interface AccordionContextValue {
  openItems: Set<string>;
  toggle: (id: string) => void;
  multiple: boolean;
}
 
const AccordionContext = createContext<AccordionContextValue | null>(null);
 
function useAccordion() {
  const ctx = use(AccordionContext);
  if (!ctx) throw new Error("Los sub-componentes de Accordion deben usarse dentro de <Accordion>");
  return ctx;
}
 
// Raíz
function Accordion({
  children,
  multiple = false,
  defaultOpen = [],
}: {
  children: ReactNode;
  multiple?: boolean;
  defaultOpen?: string[];
}) {
  const [openItems, setOpenItems] = useState<Set<string>>(
    () => new Set(defaultOpen)
  );
 
  const toggle = (id: string) => {
    setOpenItems((prev) => {
      const next = new Set(prev);
      if (next.has(id)) {
        next.delete(id);
      } else {
        if (!multiple) next.clear();
        next.add(id);
      }
      return next;
    });
  };
 
  return (
    <AccordionContext value={{ openItems, toggle, multiple }}>
      <div className="divide-y border rounded-lg">{children}</div>
    </AccordionContext>
  );
}
 
// Elemento
interface ItemContextValue {
  itemId: string;
  isOpen: boolean;
}
 
const ItemContext = createContext<ItemContextValue | null>(null);
 
function Item({ id, children }: { id: string; children: ReactNode }) {
  const { openItems } = useAccordion();
  const isOpen = openItems.has(id);
 
  return (
    <ItemContext value={{ itemId: id, isOpen }}>
      <div>{children}</div>
    </ItemContext>
  );
}
 
function useItem() {
  const ctx = use(ItemContext);
  if (!ctx) throw new Error("Debe usarse dentro de <Accordion.Item>");
  return ctx;
}
 
// Disparador
function Trigger({ children }: { children: ReactNode }) {
  const { toggle } = useAccordion();
  const { itemId, isOpen } = useItem();
  const contentId = `accordion-content-${itemId}`;
 
  return (
    <button
      className="w-full text-left p-4 flex justify-between items-center"
      onClick={() => toggle(itemId)}
      aria-expanded={isOpen}
      aria-controls={contentId}
    >
      {children}
      <span className={`transition-transform ${isOpen ? "rotate-180" : ""}`}>
        ▼
      </span>
    </button>
  );
}
 
// Contenido
function Content({ children }: { children: ReactNode }) {
  const { itemId, isOpen } = useItem();
  const contentId = `accordion-content-${itemId}`;
 
  if (!isOpen) return null;
 
  return (
    <div id={contentId} role="region" className="p-4 pt-0 text-gray-600">
      {children}
    </div>
  );
}
 
// Adjunta sub-componentes
Accordion.Item = Item;
Accordion.Trigger = Trigger;
Accordion.Content = Content;
 
// --- Uso ---
function FAQPage() {
  return (
    <Accordion defaultOpen={["general"]}>
      <Accordion.Item id="general">
        <Accordion.Trigger>¿Qué es React?</Accordion.Trigger>
        <Accordion.Content>
          React es una biblioteca de JavaScript para crear interfaces de usuario.
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item id="hooks">
        <Accordion.Trigger>¿Qué son los hooks?</Accordion.Trigger>
        <Accordion.Content>
          Los hooks te permiten usar state y otras características de React en componentes de función.
        </Accordion.Content>
      </Accordion.Item>
    </Accordion>
  );
}

// Los componentes compuestos basados en contexto funcionan a cualquier profundidad
<Accordion>
  <div className="custom-wrapper">
    {/* Funciona porque Item lee contexto, no elementos secundarios directos */}
    <Accordion.Item id="nested">
      <Accordion.Trigger>Todavía funciona</Accordion.Trigger>
      <Accordion.Content>El contexto fluye a través de cualquier profundidad</Accordion.Content>
    </Accordion.Item>
  </div>
</Accordion>

function Accordion({
  openItems,
  onToggle,
  children,
}: {
  openItems: Set<string>;
  onToggle: (id: string) => void;
  children: ReactNode;
}) {
  return (
    <AccordionContext value={{ openItems, toggle: onToggle, multiple: true }}>
      <div>{children}</div>
    </AccordionContext>
  );
}