Учебник Chakra UI

Введение
- Что такое Chakra UI
- История и философия библиотеки
- Преимущества и недостатки
- Сравнение с другими UI-библиотеками
- Требования и предварительные знания
Установка и начальная настройка
- Установка через npm и yarn
- Настройка ChakraProvider
- Базовая конфигурация проекта
- Интеграция с Create React App
- Интеграция с Next.js
- Интеграция с Vite
- Интеграция с Gatsby
- Работа с TypeScript
Система тем
- Концепция темизации в Chakra UI
- Структура объекта темы
- Настройка цветовой палитры
- Работа с типографикой
- Настройка отступов и размеров
- Настройка границ и радиусов
- Настройка теней
- Настройка переходов и анимаций
- Создание кастомной темы
- Расширение базовой темы
- Переопределение компонентов темы
- Работа с цветовыми режимами
- Светлая и темная темы
- Переключение между темами
- Адаптивные значения в теме
Система стилизации
- Принципы Style Props
- Margin и padding
- Цвета и фоны
- Типографические свойства
- Layout-свойства
- Flexbox-свойства
- Grid-свойства
- Позиционирование
- Границы
- Эффекты и фильтры
- Псевдоклассы и псевдоэлементы
- Адаптивные стили
- Использование breakpoints
- Сокращенные записи свойств
Responsive Design
- Концепция адаптивности в Chakra UI
- Массивы значений для breakpoints
- Объектная нотация для breakpoints
- Хук useBreakpointValue
- Компонент Show и Hide
- Адаптивная типографика
- Адаптивные отступы и размеры
- Мобильный подход Mobile First
Layout-компоненты
- Box
- Container
- Flex
- Grid
- SimpleGrid
- Stack, HStack, VStack
- Wrap
- Center, Square, Circle
- Spacer
- AspectRatio
- Divider
Типографика
- Text
- Heading
- Highlight
- Kbd
- Link
- ListItem, OrderedList, UnorderedList
- Настройка шрифтов
- Работа с веб-шрифтами
- Типографические утилиты
Формы и элементы ввода
- FormControl
- FormLabel, FormHelperText, FormErrorMessage
- Input
- NumberInput
- Textarea
- Select
- Checkbox
- Radio и RadioGroup
- Switch
- Slider
- RangeSlider
- PinInput
- Editable
- Валидация форм
- Управляемые и неуправляемые компоненты
- Работа с библиотеками форм
Кнопки и интерактивные элементы
- Button
- IconButton
- ButtonGroup
- CloseButton
- Стилизация кнопок
- Размеры и варианты кнопок
- Состояния loading и disabled
- Кастомные кнопки
Компоненты отображения данных
- Badge
- Tag
- Avatar и AvatarGroup
- Card
- Stat
- Table
- List
- Code блоки
- Kbd для горячих клавиш
Оверлеи и модальные окна
- Modal
- Drawer
- Popover
- Tooltip
- Menu
- AlertDialog
- Toast и уведомления
- Portal
- Управление фокусом в оверлеях
- Анимации открытия и закрытия
Навигация
- Breadcrumb
- Link и навигационные ссылки
- Tabs
- Stepper
- SkipNav
- Интеграция с React Router
- Интеграция с Next.js Link
Обратная связь
- Alert
- CircularProgress
- Progress
- Skeleton
- Spinner
- Toast-уведомления
- Кастомизация компонентов обратной связи
Медиа и иконки
- Image
- Icon
- Интеграция с React Icons
- Создание кастомных иконок
- SVG-иконки
- Оптимизация изображений
Раскрытие контента
- Accordion
- Visually Hidden
- Collapse
- Управление состоянием раскрытия
Хуки
- useDisclosure
- useToast
- useClipboard
- useBreakpointValue
- useColorMode и useColorModeValue
- useMediaQuery
- useTheme
- useToken
- useBoolean
- useConst
- useControllableState
- useOutsideClick
- usePrefersReducedMotion
- Создание кастомных хуков
Утилиты и хелперы
- VisuallyHidden
- Transitions
- Focus Lock
- Click Outside
- Escape Keydown
- Утилиты для работы с цветом
- Утилиты для работы с темой
Доступность
- ARIA-атрибуты в компонентах
- Управление фокусом
- Навигация с клавиатуры
- Screen reader support
- Семантическая разметка
- Цветовой контраст
- Тестирование доступности
Анимации и переходы
- Встроенные анимации
- Framer Motion интеграция
- Кастомные анимации
- Управление производительностью анимаций
- Respect для prefers-reduced-motion
Кастомизация компонентов
- Создание составных компонентов
- Переопределение стилей компонентов
- Использование sx prop
- Создание вариантов компонентов
- Создание размеров компонентов
- Theme components API
- Наследование стилей
Паттерны и архитектура
- Композиция компонентов
- Compound components pattern
- Render props
- Controlled vs Uncontrolled
- Управление состоянием
- Организация структуры проекта
- Переиспользуемые компоненты
Производительность
- Оптимизация рендеринга
- Code splitting
- Lazy loading компонентов
- Мемоизация
- Профилирование производительности
- Bundle size оптимизация
Тестирование
- Unit-тестирование компонентов
- Integration-тестирование
- Testing Library интеграция
- Snapshot-тестирование
- E2E-тестирование
Интеграция с экосистемой
- Formik
- React Hook Form
- Redux и state management
- Apollo Client
- React Query
- Next.js специфика
- Remix специфика
Миграция и обновление
- Миграция с других библиотек
- Обновление между версиями Chakra UI
- Breaking changes
- Стратегии постепенной миграции
- Совместимость с legacy-кодом
Production-готовность
- Build-конфигурация
- SSR и SSG
- SEO-оптимизация
- Кеширование и CDN
- Monitoring и логирование
- Performance budgets
- Accessibility audit
Расширенные техники
- Создание дизайн-системы
- Генерация компонентов
- CLI-инструменты
- Автоматизация темизации
- Multi-brand поддержка
- Динамическая загрузка тем
- A/B тестирование стилей
Отладка и troubleshooting
- Распространенные ошибки
- Debugging стилей
- DevTools для Chakra UI
- Конфликты стилей
- Проблемы с SSR
- Решение проблем с TypeScript
Лучшие практики
- Code style и конвенции
- Именование компонентов
- Структура файлов
- Документирование компонентов
- Переиспользование и DRY
- Performance best practices
- Accessibility checklist
- Security considerations