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