Учебник SvelteKit UI libs

Введение в SvelteKit UI Libraries
- Что такое SvelteKit и его экосистема UI-библиотек
- Философия реактивности в Svelte
- Сравнение с React, Vue и Angular экосистемами
- Выбор подходящей UI-библиотеки для проекта
- Установка и настройка окружения разработки
Основы работы с компонентными библиотеками
- Импорт и регистрация компонентов
- Передача props и реактивность данных
- Слоты и композиция компонентов
- События и обработчики в UI-компонентах
- Стилизация и темизация компонентов
- SSR и гидратация компонентов
Skeleton UI
- Архитектура и философия Skeleton
- Установка и базовая конфигурация
- Система дизайн-токенов
- Утилитарные классы и Tailwind интеграция
- Компоненты форм
- Навигационные компоненты
- Модальные окна и оверлеи
- Drawer и боковые панели
- Уведомления и alerts
- Работа с таблицами и списками
- Прогресс-индикаторы и загрузчики
- Кастомизация темы
- Создание собственных компонентов на базе Skeleton
Carbon Components Svelte
- Обзор IBM Carbon Design System
- Интеграция Carbon в SvelteKit проект
- Типографика и иконки
- Кнопки и интерактивные элементы
- Формы и валидация
- Датапикеры и селекторы
- Аккордеоны и tabs
- Breadcrumbs и pagination
- Модальные окна и notifications
- Работа с данными в таблицах
- Графики и визуализация
- Accessibility в Carbon компонентах
- Темы и кастомизация
Flowbite Svelte
- Введение в Flowbite экосистему
- Настройка проекта с Flowbite
- Компоненты навигации
- Формы и input-элементы
- Карточки и контейнеры
- Модальные окна и drawers
- Дропдауны и меню
- Tabs и аккордеоны
- Timeline компоненты
- Rating и badges
- Tooltips и popovers
- Spinner и skeleton loaders
- Интеграция с Tailwind CSS
- Расширение функционала компонентов
Melt UI
- Концепция headless UI-компонентов
- Builders и композиция функциональности
- Работа с состоянием через stores
- Accessibility patterns
- Компонент Accordion
- Компонент Dialog
- Компонент Dropdown Menu
- Компонент Popover
- Компонент Tooltip
- Компонент Combobox
- Компонент Select
- Компонент Tabs
- Компонент Toggle Group
- Компонент Slider
- Компонент Radio Group
- Компонент Checkbox
- Создание кастомных builders
- Интеграция со сторонними UI-фреймворками
Shadcn-svelte
- Философия копируемых компонентов
- Установка CLI и scaffolding
- Структура компонентов
- Интеграция с Tailwind и class-variance-authority
- Alert и AlertDialog
- Avatar и Badge
- Button и ButtonGroup
- Card компоненты
- Checkbox и Switch
- Combobox и Select
- Command палитра
- ContextMenu и DropdownMenu
- Dialog и Sheet
- Form и валидация с superforms
- Input и Textarea
- Label и комбинации с формами
- Menubar и Navigation Menu
- Popover и Tooltip
- Progress и Slider
- Radio Group
- ScrollArea
- Separator и Divider
- Skeleton loader
- Table компоненты
- Toast notifications
- Toggle и ToggleGroup
- Кастомизация и расширение компонентов
Bits UI
- Headless компоненты от Melt UI команды
- Установка и базовая настройка
- Паттерны композиции
- Accordion компонент
- Alert Dialog
- Avatar
- Collapsible
- Combobox
- Context Menu
- Date Picker и Calendar
- Dialog
- Dropdown Menu
- Label
- Link Preview
- Menubar
- Navigation Menu
- Pagination
- Pin Input
- Progress
- Range Calendar
- Scroll Area
- Select
- Separator
- Slider
- Tabs
- Toggle и Toggle Group
- Toolbar
- Tooltip
- Интеграция с системами стилей
SMUI (Svelte Material UI)
- Material Design в Svelte
- Настройка темы Material
- Компоненты макета
- Кнопки и FAB
- Карточки
- Chips
- Data Tables
- Dialogs
- Drawers
- Формы и инпуты
- Lists
- Menus
- Paper и elevation
- Progress индикаторы
- Selection controls
- Snackbars
- Textfields
- Top App Bar
- Кастомизация Material компонентов
Smelte
- Tailwind-first подход в UI
- Установка и конфигурация
- Навигация и меню
- Модальные окна
- Уведомления
- Таблицы
- Карточки и layout
- Утилиты и helpers
Svelte Headless UI
- Безстилевые компоненты
- Accessibility из коробки
- Disclosure
- Listbox
- Menu
- Switch
- Transition компоненты
Работа с формами
- Svelte native формы
- Библиотека superforms
- Валидация с Zod
- Обработка ошибок
- File uploads
- Multi-step формы
- Form actions в SvelteKit
- Оптимистичные обновления
Анимации и переходы
- Svelte transitions
- Svelte/animate модуль
- Библиотека svelte-motion
- GSAP интеграция
- Shared element transitions
- Page transitions в SvelteKit
Управление состоянием
- Svelte stores
- Writable и readable stores
- Derived stores
- Custom stores
- Контекст и prop drilling
- Библиотека svelte-query
- Работа с localStorage
Accessibility
- ARIA атрибуты в компонентах
- Навигация с клавиатуры
- Screen readers поддержка
- Focus management
- Color contrast и типографика
- Тестирование accessibility
- Svelte-a11y плагин
Стилизация и темизация
- CSS переменные и темы
- Tailwind CSS интеграция
- CSS-in-JS подходы
- Глобальные и scoped стили
- Динамическая смена тем
- Responsive дизайн
- Dark mode реализация
Оптимизация производительности
- Code splitting компонентов
- Lazy loading
- Виртуализация списков
- Debounce и throttle
- Bundle size анализ
- SSR оптимизации
Тестирование UI-компонентов
- Unit тесты с Vitest
- Component Testing Library
- E2E тесты с Playwright
- Visual regression тесты
- Accessibility тестирование
- Мокирование зависимостей
Создание собственной UI-библиотеки
- Архитектура компонентной библиотеки
- Настройка сборки и bundling
- TypeScript интеграция
- Документация компонентов
- Storybook для Svelte
- Публикация в npm
- Версионирование и changelog
- Поддержка tree-shaking
Интеграция сторонних библиотек
- Chart.js и данные визуализация
- Date-fns и работа с датами
- i18n интернационализация
- Rich text редакторы
- Drag and drop библиотеки
- Map компоненты
- Video и audio плееры
Работа с API и данными
- Fetch и обработка запросов
- SvelteKit load функции
- Streaming и real-time данные
- GraphQL клиенты
- REST API интеграция
- Кэширование и stale-while-revalidate
- Optimistic UI patterns
Продвинутые паттерны
- Compound components
- Render props паттерн
- Higher-order components
- Portal компоненты
- Polymorphic компоненты
- Compound stores
- Action паттерны
Миграция между библиотеками
- Переход с Material UI
- Переход с Bootstrap
- Переход с Chakra UI
- Стратегии постепенной миграции
- Совместимость и breaking changes
Production deployment
- Оптимизация для продакшена
- SEO соображения
- Performance monitoring
- Error tracking
- Analytics интеграция
- CDN и assets оптимизация