docs: обновить разделы на архитектуру SLM Design
- заменены все упоминания FSD на SLM Design в 10 файлах документации - обновлены слои features/ и entities/ на business/, infrastructure/, ui/ - обновлены таблицы генерации кода и CLI-примеры - обновлены примеры путей и деревья файлов (naming, project-structure) - исправлен YAML frontmatter в architecture.md (двоеточие без кавычек) - перегенерированы RULES.md и README
This commit is contained in:
@@ -18,7 +18,7 @@
|
|||||||
| Создание проекта | Как начать новый проект? |
|
| Создание проекта | Как начать новый проект? |
|
||||||
| Генерация кода | Какие модули должны генерироваться из шаблонов? |
|
| Генерация кода | Какие модули должны генерироваться из шаблонов? |
|
||||||
| Добавление страницы | Как добавить новую страницу в проект? |
|
| Добавление страницы | Как добавить новую страницу в проект? |
|
||||||
| Добавление UI-модуля | Как создать компонент, фичу, виджет, сущность или layout? |
|
| Добавление UI-модуля | Как создать компонент, бизнес-модуль, виджет или layout? |
|
||||||
| Стилизация | Как стилизовать компоненты в проекте? |
|
| Стилизация | Как стилизовать компоненты в проекте? |
|
||||||
| Получение данных | Как получать данные с сервера? |
|
| Получение данных | Как получать данные с сервера? |
|
||||||
| Управление состоянием | Как работать с состоянием? |
|
| Управление состоянием | Как работать с состоянием? |
|
||||||
@@ -31,7 +31,7 @@
|
|||||||
| Раздел | Отвечает на вопрос |
|
| Раздел | Отвечает на вопрос |
|
||||||
|--------|-------------------|
|
|--------|-------------------|
|
||||||
| Технологии и библиотеки | Какой стек используем? |
|
| Технологии и библиотеки | Какой стек используем? |
|
||||||
| Архитектура | Как устроены слои FSD, зависимости, публичный API? |
|
| Архитектура | Как устроены слои SLM, зависимости, публичный API? |
|
||||||
| Стиль кода | Как оформлять код: отступы, кавычки, импорты, early return? |
|
| Стиль кода | Как оформлять код: отступы, кавычки, импорты, early return? |
|
||||||
| Именование | Как называть файлы, переменные, компоненты, хуки? |
|
| Именование | Как называть файлы, переменные, компоненты, хуки? |
|
||||||
| Документирование | Как писать JSDoc: что документировать, а что нет? |
|
| Документирование | Как писать JSDoc: что документировать, а что нет? |
|
||||||
@@ -44,7 +44,7 @@
|
|||||||
| Раздел | Отвечает на вопрос |
|
| Раздел | Отвечает на вопрос |
|
||||||
|--------|-------------------|
|
|--------|-------------------|
|
||||||
| Настройка VS Code | Как настроить редактор для проекта? |
|
| Настройка VS Code | Как настроить редактор для проекта? |
|
||||||
| Структура проекта | Как организованы папки и файлы по FSD? |
|
| Структура проекта | Как организованы папки и файлы по SLM? |
|
||||||
| Компоненты | Как устроен компонент: файлы, пропсы, clsx? |
|
| Компоненты | Как устроен компонент: файлы, пропсы, clsx? |
|
||||||
| Page-level компоненты | Как описывать layout, page, loading, error, not-found? |
|
| Page-level компоненты | Как описывать layout, page, loading, error, not-found? |
|
||||||
| Шаблоны и генерация кода | Как работают шаблоны, синтаксис и инструменты генерации? |
|
| Шаблоны и генерация кода | Как работают шаблоны, синтаксис и инструменты генерации? |
|
||||||
|
|||||||
@@ -41,19 +41,20 @@ public/
|
|||||||
```text
|
```text
|
||||||
src/
|
src/
|
||||||
├── app/ # Роутинг Next.js, провайдеры, глобальные стили
|
├── app/ # Роутинг Next.js, провайдеры, глобальные стили
|
||||||
├── screens/ # Собраные страницы (UI)
|
├── layouts/ # Каркасы страниц (header, footer, sidebar)
|
||||||
├── layouts/ # Шаблоны
|
├── screens/ # Контент конкретной страницы
|
||||||
├── widgets/ # Крупные самостоятельные блоки интерфейса
|
├── widgets/ # Составные блоки интерфейса, не привязанные к домену
|
||||||
├── features/ # Пользовательские сценарии
|
├── business/ # Бизнес-домены (auth, catalog, orders)
|
||||||
├── entities/ # Бизнес-сущности
|
├── infrastructure/ # Техсервисы (theme, i18n, API-адаптеры)
|
||||||
└── shared/ # Переиспользуемый код (UI, утилиты, типы и др.)
|
├── ui/ # UI-кит без бизнес-логики
|
||||||
|
└── shared/ # Общие ресурсы (утилиты, типы, стили)
|
||||||
```
|
```
|
||||||
|
|
||||||
Принципы организации слоёв описаны в разделе [Архитектура](../basics/architecture).
|
Принципы организации слоёв описаны в разделе [Архитектура](../basics/architecture).
|
||||||
|
|
||||||
### Папка `app/`
|
### Папка `app/`
|
||||||
|
|
||||||
Совмещает два слоя: инициализацию приложения по FSD (провайдеры, глобальные стили) и файловый роутинг Next.js (`layout.tsx`, `page.tsx`, route-сегменты).
|
Точка входа приложения: инициализация (провайдеры, глобальные стили) и файловый роутинг Next.js (`layout.tsx`, `page.tsx`, route-сегменты).
|
||||||
|
|
||||||
```text
|
```text
|
||||||
src/app/
|
src/app/
|
||||||
@@ -73,8 +74,7 @@ src/app/
|
|||||||
├── screen/ # Шаблон экрана
|
├── screen/ # Шаблон экрана
|
||||||
├── layout/ # Шаблон layout
|
├── layout/ # Шаблон layout
|
||||||
├── widget/ # Шаблон виджета
|
├── widget/ # Шаблон виджета
|
||||||
├── feature/ # Шаблон фичи
|
├── module/ # Шаблон бизнес-модуля
|
||||||
├── entity/ # Шаблон сущности
|
|
||||||
└── store/ # Шаблон стора
|
└── store/ # Шаблон стора
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@@ -146,11 +146,10 @@ npx @gromlab/create <шаблон> <имя> <путь>
|
|||||||
| Команда | Что создаёт |
|
| Команда | Что создаёт |
|
||||||
|---|---|
|
|---|---|
|
||||||
| `npx @gromlab/create component button src/shared/ui` | Компонент |
|
| `npx @gromlab/create component button src/shared/ui` | Компонент |
|
||||||
| `npx @gromlab/create feature auth src/features` | Фичу |
|
| `npx @gromlab/create module auth src/business` | Бизнес-модуль |
|
||||||
| `npx @gromlab/create widget header src/widgets` | Виджет |
|
| `npx @gromlab/create widget header src/widgets` | Виджет |
|
||||||
| `npx @gromlab/create entity user src/entities` | Сущность |
|
|
||||||
| `npx @gromlab/create layout admin src/layouts` | Layout |
|
| `npx @gromlab/create layout admin src/layouts` | Layout |
|
||||||
| `npx @gromlab/create store auth src/shared/model` | Стор |
|
| `npx @gromlab/create store auth src/business/auth/stores` | Стор |
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -53,7 +53,7 @@ title: Именование
|
|||||||
|
|
||||||
**Хорошо**
|
**Хорошо**
|
||||||
```text
|
```text
|
||||||
features/
|
business/
|
||||||
└── auth-by-email/
|
└── auth-by-email/
|
||||||
├── ui/
|
├── ui/
|
||||||
│ └── login-form.tsx
|
│ └── login-form.tsx
|
||||||
@@ -62,14 +62,14 @@ features/
|
|||||||
├── stores/
|
├── stores/
|
||||||
│ └── auth.store.ts
|
│ └── auth.store.ts
|
||||||
├── types/
|
├── types/
|
||||||
│ └── auth.interface.ts
|
│ └── auth.type.ts
|
||||||
├── auth-by-email.feature.tsx
|
├── auth-by-email.tsx
|
||||||
└── index.ts
|
└── index.ts
|
||||||
```
|
```
|
||||||
|
|
||||||
**Плохо**
|
**Плохо**
|
||||||
```text
|
```text
|
||||||
features/
|
business/
|
||||||
└── authByEmail/
|
└── authByEmail/
|
||||||
├── LoginForm.tsx
|
├── LoginForm.tsx
|
||||||
├── useAuth.ts
|
├── useAuth.ts
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ title: Технологии и библиотеки
|
|||||||
- `Next.js` — для продуктовых сайтов.
|
- `Next.js` — для продуктовых сайтов.
|
||||||
|
|
||||||
### Архитектура
|
### Архитектура
|
||||||
- `FSD (Feature-Sliced Design)` — структура проекта и границы модулей. Используется кастомизированная версия — подробнее в разделе [Архитектура](/basics/architecture).
|
- `SLM Design` — собственная модульная архитектура проекта. Подробнее в разделе [Архитектура](/basics/architecture).
|
||||||
|
|
||||||
### UI компоненты
|
### UI компоненты
|
||||||
- `Mantine UI` — базовые UI-компоненты.
|
- `Mantine UI` — базовые UI-компоненты.
|
||||||
|
|||||||
@@ -18,7 +18,7 @@
|
|||||||
| Создание проекта | Как начать новый проект? |
|
| Создание проекта | Как начать новый проект? |
|
||||||
| Генерация кода | Какие модули должны генерироваться из шаблонов? |
|
| Генерация кода | Какие модули должны генерироваться из шаблонов? |
|
||||||
| Добавление страницы | Как добавить новую страницу в проект? |
|
| Добавление страницы | Как добавить новую страницу в проект? |
|
||||||
| Добавление UI-модуля | Как создать компонент, фичу, виджет, сущность или layout? |
|
| Добавление UI-модуля | Как создать компонент, бизнес-модуль, виджет или layout? |
|
||||||
| Стилизация | Как стилизовать компоненты в проекте? |
|
| Стилизация | Как стилизовать компоненты в проекте? |
|
||||||
| Получение данных | Как получать данные с сервера? |
|
| Получение данных | Как получать данные с сервера? |
|
||||||
| Управление состоянием | Как работать с состоянием? |
|
| Управление состоянием | Как работать с состоянием? |
|
||||||
@@ -31,7 +31,7 @@
|
|||||||
| Раздел | Отвечает на вопрос |
|
| Раздел | Отвечает на вопрос |
|
||||||
|--------|-------------------|
|
|--------|-------------------|
|
||||||
| Технологии и библиотеки | Какой стек используем? |
|
| Технологии и библиотеки | Какой стек используем? |
|
||||||
| Архитектура | Как устроены слои FSD, зависимости, публичный API? |
|
| Архитектура | Как устроены слои SLM, зависимости, публичный API? |
|
||||||
| Стиль кода | Как оформлять код: отступы, кавычки, импорты, early return? |
|
| Стиль кода | Как оформлять код: отступы, кавычки, импорты, early return? |
|
||||||
| Именование | Как называть файлы, переменные, компоненты, хуки? |
|
| Именование | Как называть файлы, переменные, компоненты, хуки? |
|
||||||
| Документирование | Как писать JSDoc: что документировать, а что нет? |
|
| Документирование | Как писать JSDoc: что документировать, а что нет? |
|
||||||
@@ -44,7 +44,7 @@
|
|||||||
| Раздел | Отвечает на вопрос |
|
| Раздел | Отвечает на вопрос |
|
||||||
|--------|-------------------|
|
|--------|-------------------|
|
||||||
| Настройка VS Code | Как настроить редактор для проекта? |
|
| Настройка VS Code | Как настроить редактор для проекта? |
|
||||||
| Структура проекта | Как организованы папки и файлы по FSD? |
|
| Структура проекта | Как организованы папки и файлы по SLM? |
|
||||||
| Компоненты | Как устроен компонент: файлы, пропсы, clsx? |
|
| Компоненты | Как устроен компонент: файлы, пропсы, clsx? |
|
||||||
| Page-level компоненты | Как описывать layout, page, loading, error, not-found? |
|
| Page-level компоненты | Как описывать layout, page, loading, error, not-found? |
|
||||||
| Шаблоны и генерация кода | Как работают шаблоны, синтаксис и инструменты генерации? |
|
| Шаблоны и генерация кода | Как работают шаблоны, синтаксис и инструменты генерации? |
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ title: Workflow
|
|||||||
cd my-app
|
cd my-app
|
||||||
npm install
|
npm install
|
||||||
```
|
```
|
||||||
2. Проект готов к разработке — стек, структура FSD, конфигурация
|
2. Проект готов к разработке — стек, структура SLM, конфигурация
|
||||||
редактора и шаблоны генерации уже настроены.
|
редактора и шаблоны генерации уже настроены.
|
||||||
|
|
||||||
## Генерация кода
|
## Генерация кода
|
||||||
@@ -27,13 +27,12 @@ title: Workflow
|
|||||||
|
|
||||||
| Модуль | Слой | Шаблон |
|
| Модуль | Слой | Шаблон |
|
||||||
|------------|--------------|-------------|
|
|------------|--------------|-------------|
|
||||||
| Компонент | `shared/ui/` | `component` |
|
| Компонент | `ui/` | `component` |
|
||||||
| Фича | `features/` | `feature` |
|
| Бизнес-модуль | `business/` | `module` |
|
||||||
| Виджет | `widgets/` | `widget` |
|
| Виджет | `widgets/` | `widget` |
|
||||||
| Сущность | `entities/` | `entity` |
|
| Layout | `layouts/` | `layout` |
|
||||||
| Layout | `layouts/` | `layout` |
|
| Экран | `screens/` | `screen` |
|
||||||
| Экран | `screens/` | `screen` |
|
| Стор | `stores/` | `store` |
|
||||||
| Стор | `model/` | `store` |
|
|
||||||
|
|
||||||
2. Сгенерировать модуль из шаблона.
|
2. Сгенерировать модуль из шаблона.
|
||||||
3. Если подходящего шаблона нет — сначала создать шаблон, затем использовать.
|
3. Если подходящего шаблона нет — сначала создать шаблон, затем использовать.
|
||||||
@@ -53,7 +52,7 @@ title: Workflow
|
|||||||
|
|
||||||
## Добавление UI-модуля
|
## Добавление UI-модуля
|
||||||
|
|
||||||
Создание компонента, фичи, виджета, сущности или layout.
|
Создание компонента, бизнес-модуля, виджета или layout.
|
||||||
|
|
||||||
1. Сгенерировать модуль из соответствующего шаблона в целевой слой.
|
1. Сгенерировать модуль из соответствующего шаблона в целевой слой.
|
||||||
2. Заполнить модуль логикой и стилями.
|
2. Заполнить модуль логикой и стилями.
|
||||||
|
|||||||
@@ -10,13 +10,12 @@ title: Генерация кода
|
|||||||
|
|
||||||
| Модуль | Слой | Шаблон |
|
| Модуль | Слой | Шаблон |
|
||||||
|---|---|---|
|
|---|---|---|
|
||||||
| Компонент | `shared/ui/` | `component` |
|
| Компонент | `ui/` | `component` |
|
||||||
| Фича | `features/` | `feature` |
|
| Бизнес-модуль | `business/` | `module` |
|
||||||
| Виджет | `widgets/` | `widget` |
|
| Виджет | `widgets/` | `widget` |
|
||||||
| Сущность | `entities/` | `entity` |
|
|
||||||
| Layout | `layouts/` | `layout` |
|
| Layout | `layouts/` | `layout` |
|
||||||
| Экран | `screens/` | `screen` |
|
| Экран | `screens/` | `screen` |
|
||||||
| Стор | `model/` | `store` |
|
| Стор | `stores/` | `store` |
|
||||||
|
|
||||||
## Что нужно знать
|
## Что нужно знать
|
||||||
|
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ title: Создание проекта
|
|||||||
|
|
||||||
## Что нужно знать
|
## Что нужно знать
|
||||||
|
|
||||||
Новый проект создаётся из готового шаблона. Шаблон содержит настроенный стек, структуру FSD, конфигурацию редактора и шаблоны генерации кода — проект готов к разработке сразу после установки зависимостей.
|
Новый проект создаётся из готового шаблона. Шаблон содержит настроенный стек, структуру SLM, конфигурацию редактора и шаблоны генерации кода — проект готов к разработке сразу после установки зависимостей.
|
||||||
|
|
||||||
### Создание из шаблона
|
### Создание из шаблона
|
||||||
|
|
||||||
@@ -24,7 +24,7 @@ npm install
|
|||||||
- Mantine UI + PostCSS Modules
|
- Mantine UI + PostCSS Modules
|
||||||
- Biome (линтинг и форматирование)
|
- Biome (линтинг и форматирование)
|
||||||
- Zustand, SWR
|
- Zustand, SWR
|
||||||
- Структура FSD (`screens/`, `widgets/`, `features/`, `entities/`, `shared/`)
|
- Структура SLM (`layouts/`, `screens/`, `widgets/`, `business/`, `infrastructure/`, `ui/`, `shared/`)
|
||||||
- Шаблоны генерации (`.templates/`)
|
- Шаблоны генерации (`.templates/`)
|
||||||
- Конфигурация VS Code (`.vscode/`)
|
- Конфигурация VS Code (`.vscode/`)
|
||||||
- CSS-токены (цвета, отступы, радиусы, медиа)
|
- CSS-токены (цвета, отступы, радиусы, медиа)
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ title: Добавление UI-модуля
|
|||||||
|
|
||||||
# Добавление UI-модуля
|
# Добавление UI-модуля
|
||||||
|
|
||||||
Как создать компонент, фичу, виджет, сущность или layout в проекте.
|
Как создать компонент, бизнес-модуль, виджет или layout в проекте.
|
||||||
|
|
||||||
## Что нужно знать
|
## Что нужно знать
|
||||||
|
|
||||||
|
|||||||
@@ -8,13 +8,13 @@ title: Начало работы
|
|||||||
|
|
||||||
## Стек проекта
|
## Стек проекта
|
||||||
|
|
||||||
**Next.js** (App Router), **Mantine**, **Zustand**, **FSD**.
|
**Next.js** (App Router), **Mantine**, **Zustand**, **SLM Design**.
|
||||||
|
|
||||||
Подробнее — [Технологии и библиотеки](/basics/tech-stack).
|
Подробнее — [Технологии и библиотеки](/basics/tech-stack).
|
||||||
|
|
||||||
## Ключевые особенности
|
## Ключевые особенности
|
||||||
|
|
||||||
- **Генерация вместо ручного создания** — компоненты, фичи, виджеты, сторы и другие модули не создаются вручную. Файловая структура генерируется из шаблонов `.templates/`. Ручное создание файловой структуры модулей запрещено.
|
- **Генерация вместо ручного создания** — компоненты, бизнес-модули, виджеты, сторы и другие модули не создаются вручную. Файловая структура генерируется из шаблонов `.templates/`. Ручное создание файловой структуры модулей запрещено.
|
||||||
- **Biome вместо ESLint + Prettier** — один инструмент для линтинга и форматирования. Автофикс и сортировка импортов происходят автоматически при сохранении файла.
|
- **Biome вместо ESLint + Prettier** — один инструмент для линтинга и форматирования. Автофикс и сортировка импортов происходят автоматически при сохранении файла.
|
||||||
|
|
||||||
## Настройка окружения
|
## Настройка окружения
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user