Урок 7: Storybook — визуальный источник истины

Чтобы проверить `Button` в состоянии `ghost` с ошибкой, вы входите в приложение, открываете форму, вводите неверные данные и ждёте. И всё это ради одного компонента. Этот урок научит вас `Storybook`: файлу историй, который отрисовывает каждый вариант изолированно, на одной странице, — визуальному ис

Storybook — как демонстрационный зал портного: каждый вариант одежды на своём манекене, выстроенные в ряд, так что вы осматриваете каждый по отдельности — не одевая целого человека и не отправляя его расхаживать по магазину.

Storybook: Инструмент, который отрисовывает компоненты изолированно, вне приложения, каждый со своими вариантами на одной странице, — визуальный источник истины для разработки, ревью и документирования дизайн-системы.
история (story): Единственное состояние компонента, экспортируемое из файла `*.stories.tsx`, — обычно один вариант с его args (`export const Ghost = { args: { variant: 'ghost' } }`).
изолированная разработка: Создание и тестирование компонента отдельно от приложения, без необходимости добираться до него через экраны, вход и данные, — это сокращает цикл обратной связи.
визуальная регрессия: Непреднамеренное визуальное изменение, случайно проскользнувшее (компонент, который визуально «сломался»). Storybook позволяет легко его поймать, потому что все варианты видны вместе.