Библиотека компонентов и Storybook: проект «Набор»
В серии собираем проект «Набор». Каждый урок добавляет один механизм к результату предыдущего. Архив содержит двенадцать полных состояний кода; выбирайте конкретную папку lesson-NN, не смешивая версии.
Нужны HTML, CSS, основы TypeScript и React. Библиотека содержит кнопку, поле, диалог и сообщения; общая форма работает с локальной имитацией операции. Storybook-профиль закреплён на 10.2.9, React на 19.1.0, Node.js на 22.14.0.
| Урок | Результат |
|---|---|
| 1. Изолированная мастерская компонентов | Подготовить React-компонент, CSF-историю и конфигурацию Storybook без приложения-клиента. |
| 2. Цвета, размеры и семантические токены | Выделить общие CSS-переменные и показать их значения в мастерской. |
| 3. Контракт кнопки и варианты оформления | Создать варианты, размеры, нативные атрибуты и правила композиции класса. |
| 4. Истории состояний и управляемые параметры | Организовать CSF-истории, controls и примеры длинного текста. |
| 5. Поле ввода, подпись и сообщение об ошибке | Связать label, input и пояснения устойчивыми идентификаторами. |
| 6. Диалог с нативным управлением фокусом | Согласовать showModal, Escape, закрытие и управляемое состояние React. |
| 7. Загрузка и предотвращение повторного действия | Разделить состояние операции, доступность кнопки и индикацию ожидания. |
| 8. Ошибки, пустые результаты и сообщения статуса | Сделать сообщения с семантикой status или alert и конкретным действием пользователя. |
| 9. Светлая и тёмная темы через декоратор | Переопределить семантические токены в области истории и добавить переключатель. |
| 10. Доступность компонентов и ручная проверка | Объяснить клавиатурные маршруты и подготовить addon-a11y в ручном режиме. |
| 11. Документация API и составной пример формы | Добавить Autodocs, описание ограничений и форму из компонентов «Набора». |
| 12. Публичные экспорты и версии библиотеки | Определить API пакета, CSS-экспорт, совместимость и правила миграции потребителя. |
Скачать исходники. Перейти к общей подборке.
Материалы опубликованы. Установка зависимостей, выполнение примеров, тесты и публикация учебных приложений не проводились. Команды и результаты в статьях описывают будущую самостоятельную работу читателя.