Учебник Radix UI

Введение
- Что такое Radix UI
- История и философия проекта
- Преимущества использования
- Архитектура библиотеки
- Установка и настройка окружения
- Первый компонент
- Структура документации
Основы работы с Radix UI
- Принципы работы unstyled компонентов
- Композиция и переиспользование
- Управление состоянием компонентов
- Работа с data-атрибутами
- Стилизация компонентов
- Интеграция с CSS-in-JS библиотеками
- Tailwind CSS и Radix UI
- Переопределение стандартного поведения
- Типизация в TypeScript
Accordion
- Базовая структура компонента
- Root, Item, Header, Trigger, Content
- Управление раскрытием элементов
- Режимы single и multiple
- Контроль состояния извне
- Анимация переходов
- Доступность и клавиатурная навигация
- Вложенные аккордеоны
Alert Dialog
- Структура модального окна
- Root, Trigger, Portal, Overlay, Content
- Управление открытием и закрытием
- Фокус и захват клавиатуры
- Обработка действий пользователя
- Кастомизация overlay
- Предотвращение закрытия
- Программное управление
Aspect Ratio
- Сохранение пропорций элементов
- Работа с изображениями
- Responsive поведение
- Интеграция с другими компонентами
Avatar
- Компоненты Image, Fallback
- Обработка ошибок загрузки
- Placeholder и индикаторы
- Группировка аватаров
- Статусы и badges
Checkbox
- Root и Indicator
- Управление состоянием checked
- Промежуточное состояние indeterminate
- Группы чекбоксов
- Валидация
- Доступность и label
Collapsible
- Root, Trigger, Content
- Анимация открытия и закрытия
- Использование в сложных интерфейсах
Context Menu
- Структура контекстного меню
- Root, Trigger, Portal, Content
- Элементы меню: Item, CheckboxItem, RadioGroup
- Сепараторы и Labels
- Подменю и вложенность
- Обработка выбора
- Позиционирование
- Клавиатурная навигация
Dialog
- Отличия от Alert Dialog
- Неблокирующие диалоги
- Portal и рендеринг
- Overlay и backdrop
- Управление scroll
- Множественные диалоги
- Accessibility best practices
Dropdown Menu
- Структура элементов меню
- Работа с подменю
- Arrow и кастомизация
- Позиционирование относительно триггера
- Обработка событий
Form
- Root и Field
- Control и Label
- Message и валидация
- Submit и обработка отправки
- Интеграция с валидационными библиотеками
- Серверные ошибки
- Доступность форм
Hover Card
- Задержки открытия и закрытия
- Позиционирование карточки
- Обработка hover состояния
- Предотвращение мерцания
Label
- Связывание с контролами
- Клики и фокус
- Стилизация состояний
Menubar
- Root, Menu, Trigger
- Горизонтальная навигация
- Элементы подменю
- RadioGroup и CheckboxItem
- Множественные меню
Navigation Menu
- Root, List, Item, Trigger
- Content и Viewport
- Link и активные состояния
- Мегаменю и сложные структуры
- Адаптивность
Popover
- Root, Trigger, Anchor, Portal, Content
- Arrow и настройка
- Управление состоянием
- Закрытие по клику вне
- Modal режим
Progress
- Определенный и неопределенный прогресс
- Анимация загрузки
- Доступность и aria-атрибуты
Radio Group
- Root, Item, Indicator
- Валидация в формах
- Ориентация группы
Scroll Area
- Root, Viewport, Scrollbar
- Thumb и кастомизация
- Горизонтальный и вертикальный скролл
- Кроссбраузерность
- Производительность
Select
- Root, Trigger, Value, Icon
- Portal, Content, Viewport
- Item, ItemText, ItemIndicator
- Group и Label
- Позиционирование списка
- Поиск по вводу
- Виртуализация длинных списков
- Множественный выбор
Separator
- Горизонтальные и вертикальные разделители
- Декоративные элементы
- Семантика и доступность
Slider
- Root, Track, Range, Thumb
- Одиночные и множественные значения
- Шаг и границы
- Инвертирование
- Доступность
Switch
- Root и Thumb
- Связка с формами
- Доступность toggle-контролов
Tabs
- Root, List, Trigger
- Content для каждой вкладки
- Управление активной вкладкой
- Ориентация списка
- Ленивая загрузка контента
Toast
- Provider, Viewport, Root
- Title, Description, Action
- Close кнопка
- Позиционирование уведомлений
- Очередь и приоритеты
- Swipe для закрытия
- Таймеры автозакрытия
- Программное создание
Toggle
- Root компонент
- Pressed состояние
- Группы переключателей
Toggle Group
- Root, Item
- Single и multiple режимы
- Управление выбором
- Ориентация
- Доступность групп
Toolbar
- Root, Button, Link
- Separator и Toggle Group
- Ориентация панели
- Группировка инструментов
Tooltip
- Provider, Root, Trigger
- Portal и Content
- Arrow компонент
- Задержки показа
- Доступность подсказок
Продвинутые техники
- Композиция сложных компонентов
- Создание собственных примитивов
- Расширение функциональности
- Обработка edge cases
- Оптимизация производительности
- Управление z-index
- Координация порталов
- Работа с анимациями
Стилизация
- CSS Modules
- Styled Components
- Emotion
- Stitches интеграция
- Vanilla Extract
- CSS Variables
- Темизация компонентов
- Адаптивный дизайн
- Темная тема
Доступность
- ARIA атрибуты и роли
- Screen readers
- Focus management
- Семантика HTML
- Тестирование доступности
- WCAG соответствие
Интеграция с фреймворками
- React и hooks
- Next.js особенности
- Remix интеграция
- Server components
- Gatsby
- SSR и гидратация
Формы и валидация
- React Hook Form
- Formik
- Zod схемы
- Yup валидация
- Обработка ошибок
- Серверная валидация
Тестирование
- Unit тесты компонентов
- Testing Library
- Accessibility тесты
- E2E тестирование
- Visual regression
- Моки и stubs
Производительность
- React.memo и оптимизация
- Виртуализация списков
- Code splitting
- Lazy loading
- Bundle size оптимизация
- Профилирование
Миграция и обновление
- Переход с других библиотек
- Версионирование
- Breaking changes
- Постепенная миграция
- Совместимость версий
Лучшие практики
- Архитектура приложения
- Организация кода
- Переиспользование компонентов
- Именование и структура
- Документирование компонентов
- Code review чеклисты
Отладка
- React DevTools
- Частые ошибки
- Performance profiling
Экосистема
- Инструменты разработки
- Ресурсы для обучения