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 | Расширения, настройки редактора, сниппеты |
|