Патерн Compound Components

<Accordion>
  <Accordion.Item id="html">
    <Accordion.Trigger>
      Що таке HTML?
    </Accordion.Trigger>

    <Accordion.Panel>
      <p>HTML описує структуру вебсторінки.</p>
    </Accordion.Panel>
  </Accordion.Item>

  <Accordion.Item id="css">
    <Accordion.Trigger>
      Що таке CSS?
    </Accordion.Trigger>

    <Accordion.Panel>
      <p>CSS відповідає за стилізацію вебсторінки.</p>
    </Accordion.Panel>
  </Accordion.Item>
</Accordion>

const AccordionContext = createContext(null);

function Accordion({ children, defaultOpenId = null }) {
  const [openId, setOpenId] = useState(defaultOpenId);

  function toggleItem(id) {
    setOpenId((currentId) => {
      return currentId === id ? null : id;
    });
  }

  const value = {
    openId,
    toggleItem,
  };

  return (
    <AccordionContext.Provider value={value}>
      <div>{children}</div>
    </AccordionContext.Provider>
  );
}

const AccordionItemContext = createContext(null);

function AccordionItem({ id, children }) {
  const accordion = useContext(AccordionContext);

  if (!accordion) {
    throw new Error("Accordion.Item має бути всередині Accordion");
  }

  const { openId } = accordion;
  const isOpen = openId === id;

  const value = {
    id,
    isOpen,
  };

  return (
    <AccordionItemContext.Provider value={value}>
      <section data-open={isOpen}>
        {children}
      </section>
    </AccordionItemContext.Provider>
  );
}

function AccordionTrigger({ children }) {
  const accordion = useContext(AccordionContext);
  const item = useContext(AccordionItemContext);

  if (!accordion) {
    throw new Error("Accordion.Trigger має бути всередині Accordion");
  }

  if (!item) {
    throw new Error("Accordion.Trigger має бути всередині Accordion.Item");
  }

  const { toggleItem } = accordion;
  const { id, isOpen } = item;

  const buttonId = `accordion-trigger-${id}`;
  const panelId = `accordion-panel-${id}`;

  return (
    <h3>
      <button
        id={buttonId}
        type="button"
        aria-expanded={isOpen}
        aria-controls={panelId}
        onClick={() => toggleItem(id)}
      >
        {children}
      </button>
    </h3>
  );
}

function AccordionPanel({ children }) {
  const item = useContext(AccordionItemContext);

  if (!item) {
    throw new Error("Accordion.Panel має бути всередині Accordion.Item");
  }

  const { id, isOpen } = item;

  const buttonId = `accordion-trigger-${id}`;
  const panelId = `accordion-panel-${id}`;

  return (
    <div
      id={panelId}
      role="region"
      aria-labelledby={buttonId}
      hidden={!isOpen}
    >
      {children}
    </div>
  );
}

Accordion.Item = AccordionItem;
Accordion.Trigger = AccordionTrigger;
Accordion.Panel = AccordionPanel;

<Accordion>
  <Accordion.Item id="first">
    <Accordion.Trigger>Перший пункт</Accordion.Trigger>
    <Accordion.Panel>Вміст першого пункту</Accordion.Panel>
  </Accordion.Item>
</Accordion>

import { createContext, useContext, useState } from "react";

const AccordionContext = createContext(null);
const AccordionItemContext = createContext(null);

function Accordion({ children, defaultOpenId = null }) {
  const [openId, setOpenId] = useState(defaultOpenId);

  function toggleItem(id) {
    setOpenId((currentId) => {
      return currentId === id ? null : id;
    });
  }

  const value = {
    openId,
    toggleItem,
  };

  return (
    <AccordionContext.Provider value={value}>
      <div>{children}</div>
    </AccordionContext.Provider>
  );
}

function AccordionItem({ id, children }) {
  const accordion = useContext(AccordionContext);

  if (!accordion) {
    throw new Error("Accordion.Item має бути всередині Accordion");
  }

  const isOpen = accordion.openId === id;

  return (
    <AccordionItemContext.Provider value={{ id, isOpen }}>
      <section data-open={isOpen}>{children}</section>
    </AccordionItemContext.Provider>
  );
}

function AccordionTrigger({ children }) {
  const accordion = useContext(AccordionContext);
  const item = useContext(AccordionItemContext);

  if (!accordion) {
    throw new Error("Accordion.Trigger має бути всередині Accordion");
  }

  if (!item) {
    throw new Error("Accordion.Trigger має бути всередині Accordion.Item");
  }

  const { id, isOpen } = item;

  return (
    <h3>
      <button
        id={`accordion-trigger-${id}`}
        type="button"
        aria-expanded={isOpen}
        aria-controls={`accordion-panel-${id}`}
        onClick={() => accordion.toggleItem(id)}
      >
        {children}
      </button>
    </h3>
  );
}

function AccordionPanel({ children }) {
  const item = useContext(AccordionItemContext);

  if (!item) {
    throw new Error("Accordion.Panel має бути всередині Accordion.Item");
  }

  const { id, isOpen } = item;

  return (
    <div
      id={`accordion-panel-${id}`}
      role="region"
      aria-labelledby={`accordion-trigger-${id}`}
      hidden={!isOpen}
    >
      {children}
    </div>
  );
}

Accordion.Item = AccordionItem;
Accordion.Trigger = AccordionTrigger;
Accordion.Panel = AccordionPanel;

export default function App() {
  return (
    <main>
      <h1>Поширені запитання</h1>

      <Accordion defaultOpenId="react">
        <Accordion.Item id="html">
          <Accordion.Trigger>Що таке HTML?</Accordion.Trigger>

          <Accordion.Panel>
            <p>
              HTML описує структуру та семантику вмісту вебсторінки.
            </p>
          </Accordion.Panel>
        </Accordion.Item>

        <Accordion.Item id="css">
          <Accordion.Trigger>Що таке CSS?</Accordion.Trigger>

          <Accordion.Panel>
            <p>
              CSS використовується для стилізації та компонування
              вебсторінок.
            </p>
          </Accordion.Panel>
        </Accordion.Item>

        <Accordion.Item id="react">
          <Accordion.Trigger>Що таке React?</Accordion.Trigger>

          <Accordion.Panel>
            <p>
              React — бібліотека для створення користувацьких інтерфейсів.
            </p>
          </Accordion.Panel>
        </Accordion.Item>
      </Accordion>
    </main>
  );
}

<Accordion.Item id="react">
  <Accordion.Trigger>
    <span>Що таке React?</span>
    <span aria-hidden="true">+</span>
  </Accordion.Trigger>

  <p>Бібліотека для створення інтерфейсів.</p>

  <Accordion.Panel>
    <article>
      <p>
        React допомагає створювати інтерфейси з незалежних компонентів.
      </p>
    </article>
  </Accordion.Panel>
</Accordion.Item>

function QuestionMeta({ children }) {
  return <small>{children}</small>;
}

function App() {
  return (
    <Accordion>
      <Accordion.Item id="react">
        <Accordion.Trigger>
          Що таке React?
        </Accordion.Trigger>

        <QuestionMeta>Основи фронтенду</QuestionMeta>

        <Accordion.Panel>
          <p>React використовується для створення інтерфейсів.</p>
        </Accordion.Panel>
      </Accordion.Item>
    </Accordion>
  );
}

<Accordion
  openId={openId}
  onToggle={toggleItem}
>
  <AccordionItem
    id="react"
    openId={openId}
    onToggle={toggleItem}
  >
    <AccordionTrigger
      id="react"
      isOpen={isOpen}
      onToggle={toggleItem}
    />
  </AccordionItem>
</Accordion>

const accordion = useContext(AccordionContext);
const item = useContext(AccordionItemContext);

<Alert title="Помилка" message="Спробуйте ще раз" />

<Menu>
  <Menu.Button>Дії</Menu.Button>
  <Menu.List>
    <Menu.Item>Редагувати</Menu.Item>
    <Menu.Item>Видалити</Menu.Item>
  </Menu.List>
</Menu>

<Accordion defaultOpenId="react">
  {/* ... */}
</Accordion>

<Accordion
  openId={openId}
  onOpenChange={setOpenId}
>
  {/* ... */}
</Accordion>

function AccordionItem() {
  const [isOpen, setIsOpen] = useState(false);

  // ...
}

if (!item) {
  throw new Error("Accordion.Trigger має бути всередині Accordion.Item");
}

<Accordion.Item id="html">
  {/* ... */}
</Accordion.Item>