S.Gromov
e77e7dfcf1
- Удалён shiki (9.5→0 МБ), создан regex-токенизатор для html/css/xml - CLI переведён с аргументов на конфиг-файл svg-sprites.config.ts - Превью переработано: React-приложение вместо инлайн HTML - Добавлен футер с названием пакета и ссылкой на репозиторий - Исправлена загрузка dev-data.js для Vite 8 - Футер прижат к низу, содержимое центрировано
97 lines
7.2 KiB
Markdown
97 lines
7.2 KiB
Markdown
# Стайлгайд — Разработка
|
||
|
||
Правила и стандарты разработки на Next.js и TypeScript.
|
||
|
||
## Как работать
|
||
|
||
1. **Изучи обязательные правила** (таблица ниже) — они действуют при любой задаче.
|
||
2. Найди задачу в таблицах триггеров → открой триггер.
|
||
3. Триггер укажет какие прикладные разделы прочитать и какие шаги выполнить.
|
||
4. Перед каждой подзадачей возвращайся к триггерам — проверяй, нет ли готового.
|
||
5. Если триггера нет — ищи прикладной раздел по области задачи.
|
||
|
||
---
|
||
|
||
## Обязательные правила
|
||
|
||
Прочитай эти разделы **до начала работы**. Соблюдай при написании любого кода.
|
||
|
||
| Раздел | Файл | Что внутри |
|
||
|--------|------|------------|
|
||
| Структура проекта | applied/project-structure.md | Организация папок и файлов |
|
||
| Архитектура | basics/architecture.md | SLM Design: слои, модули, сегменты |
|
||
| Стиль кода | basics/code-style.md | Форматирование, импорты, отступы |
|
||
| Именование | basics/naming.md | Имена файлов, переменных, событий |
|
||
| Типизация | basics/typing.md | type vs interface, generic, any/unknown |
|
||
| Документирование | basics/documentation.md | JSDoc для функций, компонентов, типов |
|
||
| Технологии | basics/tech-stack.md | Допустимые библиотеки и зависимости |
|
||
|
||
---
|
||
|
||
## Прикладные разделы
|
||
|
||
Справочник по областям. Читай тот раздел, который относится к текущей задаче.
|
||
|
||
| Область | Файл | Когда читать |
|
||
|---------|------|--------------|
|
||
| Компоненты | applied/components.md | Создание или редактирование React-компонентов |
|
||
| Стили | applied/styles.md | CSS Modules, PostCSS, переменные, медиа-запросы |
|
||
| Файлы роутинга | applied/page-level.md | page.tsx, layout.tsx, error.tsx, not-found.tsx |
|
||
| Шаблоны и генерация | applied/templates-generation.md | Генерация кода из шаблонов |
|
||
| Настройка VS Code | applied/vscode.md | Расширения, settings.json, сниппеты |
|
||
| SVG-спрайты | applied/svg-sprites.md | Работа с SVG-иконками и спрайтами |
|
||
| Хуки | applied/hooks.md | Создание и использование кастомных хуков *(в разработке)* |
|
||
| Сторы | applied/stores.md | Глобальное состояние, Zustand *(в разработке)* |
|
||
| API | applied/api.md | Запросы, клиенты, обработка ответов *(в разработке)* |
|
||
| Локализация | applied/localization.md | i18next, переводы *(в разработке)* |
|
||
| Изображения | applied/images-sprites.md | Подключение и оптимизация изображений *(в разработке)* |
|
||
| Шрифты | applied/fonts.md | Подключение и настройка шрифтов *(в разработке)* |
|
||
| Видео | applied/video.md | Встраивание видео *(в разработке)* |
|
||
|
||
---
|
||
|
||
## Триггеры
|
||
|
||
Пошаговые инструкции. Найди задачу → открой триггер → выполняй по шагам.
|
||
|
||
### Создание
|
||
|
||
| Задача | Триггер | Описание |
|
||
|--------|---------|----------|
|
||
| Создать компонент | triggers/develop/create-component.md | Переиспользуемый UI-элемент без бизнес-логики |
|
||
| Создать фичу | triggers/develop/create-feature.md | Самодостаточный блок с бизнес-логикой и UI |
|
||
| Создать виджет | triggers/develop/create-widget.md | Композиция нескольких фичей и сущностей |
|
||
| Создать сущность | triggers/develop/create-entity.md | Бизнес-объект с моделью данных и UI-представлением |
|
||
| Создать хук | triggers/develop/create-hook.md | Кастомный React-хук с переиспользуемой логикой |
|
||
| Создать стор | triggers/develop/create-store.md | Глобальное или модульное состояние через Zustand |
|
||
| Создать страницу | triggers/develop/create-page.md | Новый route в Next.js — экран + page.tsx |
|
||
| Создать layout | triggers/develop/create-layout.md | Общая обёртка layout.tsx для группы страниц |
|
||
| Создать проект | triggers/develop/create-project.md | Инициализация нового проекта из шаблона |
|
||
| Сгенерировать модуль | triggers/develop/generate-module.md | Создание модуля из шаблонов `.templates/` |
|
||
|
||
### Стилизация и ресурсы
|
||
|
||
| Задача | Триггер | Описание |
|
||
|--------|---------|----------|
|
||
| Стилизовать компонент | triggers/develop/style-component.md | Выбор подхода и написание CSS для компонента |
|
||
| Добавить иконку | triggers/develop/add-icon.md | SVG-иконка через спрайт-систему |
|
||
| Добавить изображение | triggers/develop/add-image.md | Растровое изображение (png, jpg, webp) |
|
||
| Добавить видео | triggers/develop/add-video.md | Встраивание видео на страницу |
|
||
| Подключить шрифт | triggers/develop/add-font.md | Подключение нового шрифта в проект |
|
||
|
||
### Данные и состояние
|
||
|
||
| Задача | Триггер | Описание |
|
||
|--------|---------|----------|
|
||
| Добавить API-запрос | triggers/develop/add-api-request.md | Клиентский запрос данных через SWR |
|
||
| Подключить стор | triggers/develop/connect-store.md | Подключение существующего стора к компоненту |
|
||
| Серверные данные (RSC) | triggers/develop/add-server-data.md | Получение данных в серверных компонентах |
|
||
|
||
### Инфраструктура
|
||
|
||
| Задача | Триггер | Описание |
|
||
|--------|---------|----------|
|
||
| Добавить перевод | triggers/develop/add-localization.md | Ключи перевода и подключение i18next |
|
||
| Добавить зависимость | triggers/develop/add-dependency.md | Подключение новой npm-библиотеки |
|
||
| Настроить VS Code | triggers/develop/setup-vscode.md | Расширения, настройки редактора, сниппеты |
|