290 lines
9.0 KiB
Markdown
290 lines
9.0 KiB
Markdown
# ViteKit Universal
|
||
|
||
Современный универсальный сборщик проектов с Vite + Twig + компонентами для быстрой разработки веб-приложений.
|
||
|
||
## 🚀 Особенности
|
||
|
||
- **Быстрая сборка** с Vite
|
||
- **Шаблонизация** с Twig
|
||
- **Готовые UI компоненты** (модалы, табы, аккордеон, уведомления)
|
||
- **Адаптивная верстка** с SCSS и Flexbox/Grid
|
||
- **Оптимизация изображений** и SVG спрайты
|
||
- **Качество кода** с ESLint, Prettier, Stylelint
|
||
- **Модульная архитектура**
|
||
|
||
## 📦 Установка и запуск
|
||
|
||
```bash
|
||
# Установка зависимостей
|
||
npm install
|
||
|
||
# Запуск сервера разработки
|
||
npm run dev
|
||
|
||
# Сборка для продакшена
|
||
npm run build
|
||
|
||
# Предварительный просмотр сборки
|
||
npm run preview
|
||
```
|
||
|
||
## 🏗️ Структура проекта
|
||
|
||
```
|
||
src/
|
||
├── components/ # UI компоненты
|
||
│ ├── ui/ # Базовые компоненты
|
||
│ └── blocks/ # Блоки страниц
|
||
├── layouts/ # Шаблоны страниц
|
||
├── pages/ # Страницы Twig
|
||
├── data/ # JSON данные для Twig
|
||
├── assets/ # Статические ресурсы
|
||
│ ├── images/ # Изображения
|
||
│ ├── icons/ # SVG иконки для спрайтов
|
||
│ └── fonts/ # Шрифты
|
||
├── styles/ # SCSS стили
|
||
│ ├── abstracts/ # Переменные, миксины
|
||
│ ├── base/ # Сброс стилей, типографика
|
||
│ ├── components/ # Стили компонентов
|
||
│ ├── layout/ # Стили макета
|
||
│ └── pages/ # Стили страниц
|
||
└── scripts/ # JavaScript
|
||
├── components/ # JS компоненты
|
||
└── utils/ # Утилиты
|
||
```
|
||
|
||
## 🎯 Компоненты
|
||
|
||
### Toast Уведомления ✨
|
||
- **Исправлены стили позиционирования** - правильный z-index и анимации
|
||
- **Автоматическое скрытие** через настраиваемое время
|
||
- **Адаптивность** для мобильных устройств
|
||
- **Типизация**: success, error, warning, info
|
||
|
||
```javascript
|
||
ToastComponent.success('Операция успешна!', {
|
||
title: 'Готово!',
|
||
duration: 4000
|
||
});
|
||
```
|
||
|
||
### Модальные окна (MicroModal)
|
||
- Доступные модальные окна с ARIA
|
||
- Анимации открытия/закрытия
|
||
- Поддержка клавиатуры и фокуса
|
||
|
||
```html
|
||
<button data-micromodal-trigger="modal-id">Открыть модал</button>
|
||
```
|
||
|
||
### Табы (Адаптивные)
|
||
- **Автоматическое превращение в аккордеон** на мобильных
|
||
- Клавиатурная навигация (Arrow keys, Home, End)
|
||
- Плавные анимации переключения
|
||
|
||
```html
|
||
<div class="tabs" data-tabs>
|
||
<div class="tabs__nav">
|
||
<button class="tabs__tab tabs__tab--active">Вкладка 1</button>
|
||
</div>
|
||
<div class="tabs__content">
|
||
<div class="tabs__panel tabs__panel--active">Содержимое</div>
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
### Аккордеон
|
||
- Плавные CSS анимации с автоматическим расчетом высоты
|
||
- Поддержка множественного раскрытия
|
||
- Полная клавиатурная навигация и ARIA
|
||
|
||
```html
|
||
<div class="accordion" data-accordion>
|
||
<div class="accordion__item">
|
||
<button class="accordion__header">Заголовок</button>
|
||
<div class="accordion__content">Содержимое</div>
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
## 🎨 SCSS Утилиты
|
||
|
||
### Миксины для медиа-запросов
|
||
```scss
|
||
@include media-up('md') { /* >= 768px */ }
|
||
@include media-down('lg') { /* < 992px */ }
|
||
@include media-only('sm') { /* только для small */ }
|
||
```
|
||
|
||
### Flexbox утилиты
|
||
```scss
|
||
@include flex-center; // выравнивание по центру
|
||
@include flex-between; // space-between
|
||
@include flex-column; // flex-direction: column
|
||
```
|
||
|
||
### Grid утилиты
|
||
```scss
|
||
@include grid-container(12, $spacing-base); // 12 колонок
|
||
@include grid-column(6); // span 6 колонок
|
||
```
|
||
|
||
## 🔧 Конфигурация
|
||
|
||
### Vite
|
||
Настроен для работы с:
|
||
- Twig шаблонами
|
||
- SCSS с автоимпортом переменных
|
||
- Оптимизацией изображений
|
||
- SVG спрайтами
|
||
- Legacy поддержкой для старых браузеров
|
||
|
||
### Linting
|
||
- **ESLint** для JavaScript
|
||
- **Stylelint** для SCSS
|
||
- **Prettier** для форматирования
|
||
- **Husky** для pre-commit хуков
|
||
|
||
## 📱 Адаптивность
|
||
|
||
Проект использует mobile-first подход с брейкпоинтами:
|
||
- `sm`: 576px
|
||
- `md`: 768px
|
||
- `lg`: 992px
|
||
- `xl`: 1200px
|
||
- `2xl`: 1400px
|
||
|
||
## 🏗️ Page Controller Архитектура
|
||
|
||
ViteKit использует **Page Controller Pattern** для организации кода по страницам:
|
||
|
||
### Автоматическая загрузка
|
||
```javascript
|
||
// Файл: src/scripts/pages/about.js
|
||
// Загружается автоматически для about.html
|
||
|
||
export default class AboutPage extends Component {
|
||
constructor() {
|
||
super(document.body);
|
||
}
|
||
|
||
beforeInit() {
|
||
// Логика до инициализации
|
||
}
|
||
|
||
bindEvents() {
|
||
// События страницы
|
||
this.addEventListener('click', this.handleClick);
|
||
}
|
||
|
||
afterInit() {
|
||
// Логика после инициализации
|
||
}
|
||
}
|
||
```
|
||
|
||
### EventBus для связи компонентов
|
||
```javascript
|
||
import { eventBus } from '../core/EventBus.js';
|
||
|
||
// Подписка на события
|
||
eventBus.on('user:login', this.onUserLogin.bind(this));
|
||
|
||
// Испускание событий
|
||
eventBus.emit('page:ready', { page: 'home' });
|
||
```
|
||
|
||
### Утилиты производительности
|
||
```javascript
|
||
import { debounce, throttle, memoize } from '@scripts/utils/performance.js';
|
||
|
||
// Debounce для поиска
|
||
const search = debounce(this.performSearch.bind(this), 300);
|
||
|
||
// Throttle для скролла
|
||
const onScroll = throttle(this.updateScrollPosition.bind(this), 16);
|
||
|
||
// Мемоизация тяжелых вычислений
|
||
const expensiveCalculation = memoize(this.calculate.bind(this));
|
||
```
|
||
|
||
## 🎛️ API компонентов
|
||
|
||
### TabsComponent
|
||
```javascript
|
||
const tabs = new TabsComponent(element, {
|
||
activeClass: 'tabs__tab--active',
|
||
keyboardNavigation: true,
|
||
autoResponsive: true
|
||
});
|
||
|
||
tabs.next(); // следующая вкладка
|
||
tabs.prev(); // предыдущая вкладка
|
||
tabs.goTo(2); // перейти к вкладке по индексу
|
||
```
|
||
|
||
### AccordionComponent
|
||
```javascript
|
||
const accordion = new AccordionComponent(element, {
|
||
allowMultiple: false,
|
||
animationDuration: 300,
|
||
keyboardNavigation: true
|
||
});
|
||
|
||
accordion.open(0); // открыть первый элемент
|
||
accordion.close(0); // закрыть первый элемент
|
||
accordion.closeAll(); // закрыть все элементы
|
||
```
|
||
|
||
### ToastComponent
|
||
```javascript
|
||
// Базовые методы
|
||
ToastComponent.success('Успех!');
|
||
ToastComponent.error('Ошибка!');
|
||
ToastComponent.warning('Предупреждение!');
|
||
ToastComponent.info('Информация');
|
||
|
||
// Расширенные возможности
|
||
ToastComponent.promise(fetchData(), {
|
||
loading: 'Загрузка...',
|
||
success: 'Данные загружены!',
|
||
error: 'Ошибка загрузки'
|
||
});
|
||
|
||
ToastComponent.confirm('Удалить элемент?').then(confirmed => {
|
||
if (confirmed) {
|
||
// Действие подтверждено
|
||
}
|
||
});
|
||
```
|
||
|
||
## 🚀 Развертывание
|
||
|
||
```bash
|
||
# Сборка для продакшена
|
||
npm run build
|
||
|
||
# Файлы сборки будут в папке dist/
|
||
```
|
||
|
||
## 🤝 Вклад в проект
|
||
|
||
1. Fork проект
|
||
2. Создайте feature ветку
|
||
3. Commit изменения
|
||
4. Push в ветку
|
||
5. Создайте Pull Request
|
||
|
||
## 📝 Лицензия
|
||
|
||
MIT License - смотри файл [LICENSE](LICENSE) для деталей.
|
||
|
||
## 🛠️ Технологии
|
||
|
||
- [Vite](https://vitejs.dev/) - Сборщик
|
||
- [Twig](https://twig.symfony.com/) - Шаблонизатор
|
||
- [SCSS](https://sass-lang.com/) - CSS препроцессор
|
||
- [MicroModal](https://micromodal.vercel.app/) - Модальные окна
|
||
- [Toastify](https://apvarun.github.io/toastify-js/) - Уведомления
|
||
- [ESLint](https://eslint.org/) - Линтер JavaScript
|
||
- [Prettier](https://prettier.io/) - Форматирование кода |