create-nadvan-app 1.0.0 → 1.0.2

package/README.md

@@ -0,0 +1,279 @@
+# create-nadvan-app
+
+Официальный CLI-инструмент для создания frontend-проектов Nadvan.
+
+Разворачивает проект с готовой настройкой: TypeScript, FSD-архитектура, ESLint, Stylelint, Prettier, Husky, Commitlint и SCSS design-токены.
+
+---
+
+## Использование
+
+```bash
+npm create nadvan-app@latest my-project
+# или
+npx create-nadvan-app my-project
+```
+
+CLI задаст четыре вопроса:
+
+1. **Название проекта** — используется как `name` в `package.json`
+2. **Фреймворк** — React + Vite или Next.js
+3. **Менеджер пакетов** — npm, pnpm или yarn
+4. **Установить зависимости сейчас?**
+
+---
+
+## Фреймворки
+
+| Вариант | Сборщик | Роутинг | Рендеринг |
+|---|---|---|---|
+| **React + Vite** | Vite | react-router-dom | CSR (SPA) |
+| **Next.js** | Next.js | App Router | SSR / SSG / CSR |
+
+Оба варианта включают TypeScript в строгом режиме и FSD-архитектуру.
+
+---
+
+## Флаги (неинтерактивный режим)
+
+Удобно для CI/CD или скриптов.
+
+```bash
+# React + Vite, npm, без установки зависимостей
+npx create-nadvan-app my-project --yes --no-install
+
+# Next.js + pnpm, с установкой
+npx create-nadvan-app my-app --yes --framework=nextjs --pm=pnpm
+```
+
+| Флаг | Описание | По умолчанию |
+|---|---|---|
+| `--yes` / `-y` | Пропустить все вопросы | — |
+| `--framework=react` | Выбрать React + Vite | `react` |
+| `--framework=nextjs` | Выбрать Next.js | — |
+| `--pm=npm` | Менеджер пакетов | `npm` |
+| `--pm=pnpm` | — | — |
+| `--pm=yarn` | — | — |
+| `--no-install` | Не запускать установку зависимостей | — |
+
+---
+
+## Что входит в проект
+
+### Общее для всех фреймворков
+
+| Файл / Папка | Назначение |
+|---|---|
+| `.prettierrc` | Форматирование кода |
+| `.stylelintrc.json` | Линтер стилей: порядок свойств, BEM, запрет `!important` |
+| `commitlint.config.js` | Проверка формата коммитов (Conventional Commits) |
+| `lint-staged.config.js` | Авто-линтинг изменённых файлов перед коммитом |
+| `.husky/` | Git-хуки: `pre-commit` и `commit-msg` |
+| `src/app/styles/` | Design tokens, миксины брейкпоинтов, типографика, CSS reset |
+| `src/shared/config/` | `breakpoints.ts`, `tokens.ts` — токены для JS/TS |
+| `src/shared/lib/hooks/` | `useMediaQuery` — реактивный хук брейкпоинтов |
+
+### React + Vite
+
+| Файл | Назначение |
+|---|---|
+| `vite.config.ts` | Сборщик, FSD-алиасы, автоинъекция SCSS-переменных |
+| `tsconfig.json` | TypeScript strict + FSD-алиасы |
+| `eslint.config.js` | ESLint: TypeScript, React, a11y, FSD-границы |
+
+### Next.js
+
+| Файл | Назначение |
+|---|---|
+| `next.config.ts` | Next.js конфиг, автоинъекция SCSS-переменных |
+| `tsconfig.json` | TypeScript strict + Next.js plugin + FSD-алиасы |
+| `eslint.config.js` | ESLint: TypeScript, React, Next.js core-web-vitals, FSD-границы |
+| `src/app/layout.tsx` | Корневой layout (App Router) |
+| `src/app/page.tsx` | Стартовая страница |
+
+---
+
+## Структура сгенерированного проекта (FSD)
+
+```
+src/
+├── app/               # Инициализация, провайдеры, глобальные стили
+│   └── styles/        # Design tokens, миксины, типографика
+│
+├── pages/             # Страницы — компонуют виджеты и фичи
+│                      # В Next.js: импортируются из src/app/(routes)/
+│
+├── widgets/           # Независимые UI-блоки (Header, Footer, Sidebar)
+│
+├── features/          # Пользовательские сценарии (auth, cart, search)
+│
+├── entities/          # Бизнес-сущности (User, Product, Order)
+│
+└── shared/            # Переиспользуемый код без бизнес-логики
+    ├── ui/            # Базовые компоненты (@nadvan/ui)
+    ├── api/           # HTTP-клиент
+    ├── config/        # Константы, токены, env
+    └── lib/           # Утилиты и хуки
+```
+
+> Правило: каждый слой импортирует только из слоёв **ниже** себя.
+> `app → pages → widgets → features → entities → shared`
+
+---
+
+## Работа с FSD структурой (fsd-generator)
+
+После создания проекта используй **`fsd-generator`** для быстрого scaffolding слоёв и слайсов.
+
+```bash
+# Установка (один раз)
+npm install -g fsd-generator
+
+# Инициализировать FSD (если не запускали)
+fsd init
+```
+
+### Создание компонентов
+
+```bash
+# Простой виджет
+fsd -t widget -n header
+
+# Несколько виджетов сразу
+fsd -t widget -n header,footer,sidebar
+
+# Фича со структурой ui + model
+fsd slice -t feature -n user-auth
+
+# Сущность с ui + model + api + lib
+fsd slice -t entity -n product --full
+
+# Несколько компонентов в одной папке
+fsd -t widget -n form -c Button,Input,Select
+
+# Плоская структура (без папки ui)
+fsd -t shared -n icons --flat -c CloseIcon,ArrowIcon
+```
+
+### Что создаётся
+
+| Команда | Структура |
+|---|---|
+| `fsd -t widget -n header` | `widgets/header/ui/Header.tsx` + `index.ts` |
+| `fsd slice -t feature -n auth` | `features/auth/ui/` + `model/types.ts` + `index.ts` |
+| `fsd slice -t entity -n user --full` | `entities/user/ui/` + `model/` + `api/` + `lib/` |
+
+### Управление структурой
+
+```bash
+fsd list              # Показать весь проект
+fsd list widget       # Показать компоненты слоя widget
+fsd check             # Проверить соответствие FSD
+fsd info              # Информация о проекте
+fsd remove -t widget -n header          # Удалить компонент
+fsd rename -t widget -n header header-v2 # Переименовать
+```
+
+> Файлы не перезаписываются, экспорты добавляются в `index.ts` автоматически.
+
+---
+
+## Автоматические проверки
+
+При каждом `git commit` автоматически запускаются:
+
+1. **ESLint** — проверяет и исправляет `.ts`, `.tsx`
+2. **Stylelint** — проверяет и исправляет `.scss`
+3. **Prettier** — форматирует изменённые файлы
+4. **TypeScript** — `tsc --noEmit`, коммит блокируется при ошибках типов
+5. **commitlint** — проверяет формат сообщения коммита
+
+### Формат коммита
+
+```
+<тип>(<область>): <описание>
+```
+
+**Типы:**
+
+| Тип | Когда использовать |
+|---|---|
+| `feat` | Новая функциональность |
+| `fix` | Исправление бага |
+| `style` | Только стили/вёрстка, без логики |
+| `refactor` | Рефакторинг без изменения поведения |
+| `perf` | Оптимизация производительности |
+| `test` | Тесты |
+| `docs` | Документация, README, Storybook |
+| `chore` | Зависимости, конфиги, инфраструктура |
+| `ci` | CI/CD пайплайны |
+| `revert` | Откат коммита |
+| `wip` | Work in progress (только в feature-ветках) |
+
+**Область (scope)** — FSD-слой или техническая зона: `app`, `pages`, `widgets`, `features`, `entities`, `shared`, `ui`, `api`, `styles`, `deps`, `config`, `ci`.
+
+Можно уточнять до конкретного модуля: `features/auth`, `widgets/header`.
+
+**Правила описания:**
+- Инфинитив: «добавить», «исправить», «обновить» — не «добавил»
+- Без точки в конце
+- Конкретно: «исправить отступ в Button» лучше «исправить баг»
+
+**Примеры:**
+```
+feat(features): добавить авторизацию через OAuth
+fix(shared): исправить отступы в компоненте Button
+style(widgets): обновить вёрстку Header под мобайл
+refactor(entities): вынести логику фильтрации в хук
+perf(widgets): добавить React.memo для ProductCard
+chore(deps): обновить nadvan-ui-kit до 1.0.3
+docs: добавить раздел про fsd-generator в README
+wip(features): начать реализацию корзины
+```
+
+Подробная документация — в [frontend-standard.md, раздел 5.4](../frontend-standard.md).
+
+---
+
+## Скрипты
+
+```bash
+npm run dev             # Dev-сервер
+npm run build           # Сборка
+npm run typecheck       # Проверка типов
+npm run lint            # ESLint
+npm run lint:fix        # ESLint с автоисправлением
+npm run lint:styles     # Stylelint
+npm run lint:styles:fix # Stylelint с автоисправлением
+npm run format          # Prettier
+npm run test            # Vitest
+npm run test:coverage   # Тесты с покрытием
+npm run storybook       # Storybook
+```
+
+---
+
+## Разработка CLI
+
+```bash
+# Локальное тестирование
+node src/index.js test-project --yes --no-install
+
+# Линк для глобального использования
+npm link
+create-nadvan-app my-project
+```
+
+---
+
+## Публикация
+
+```bash
+npm login
+npm publish --access public
+```
+
+После публикации:
+```bash
+npm create nadvan-app@latest my-project
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nadvan-app",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Официальный scaffolder для frontend-проектов Nadvan",
   "type": "module",
   "bin": {
@@ -12,7 +12,14 @@
   "engines": {
     "node": ">=20.0.0"
   },
-  "keywords": ["nadvan", "create", "frontend", "fsd", "vite", "react"],
+  "keywords": [
+    "nadvan",
+    "create",
+    "frontend",
+    "fsd",
+    "vite",
+    "react"
+  ],
   "dependencies": {
     "chalk": "^5.3.0",
     "fs-extra": "^11.2.0",

package/src/index.js

@@ -8,8 +8,8 @@ import chalk from 'chalk';
 import fs from 'fs-extra';
 import prompts from 'prompts';
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const TEMPLATE_DIR = path.join(__dirname, 'template');
+const __dirname  = path.dirname(fileURLToPath(import.meta.url));
+const TEMPLATES  = path.join(__dirname, 'templates');
 
 function step(msg)    { console.log(chalk.blue(`\n  → ${msg}`)); }
 function success(msg) { console.log(chalk.green(`  ✓ ${msg}`)); }
@@ -20,23 +20,28 @@ async function main() {
   console.log(chalk.bold('│      Nadvan Frontend Scaffolder         │'));
   console.log(chalk.bold('└─────────────────────────────────────────┘\n'));
 
-  // Парсим аргументы
-  // Использование: create-nadvan-app my-project [--yes] [--pm=pnpm] [--no-install]
-  const args = process.argv.slice(2);
-  const argName      = args.find((a) => !a.startsWith('-'));
-  const flagYes      = args.includes('--yes') || args.includes('-y');
-  const flagNoInstall = args.includes('--no-install');
-  const flagPm       = (args.find((a) => a.startsWith('--pm=')) ?? '').replace('--pm=', '') || null;
+  // Флаги: create-nadvan-app my-project --yes --framework=nextjs --pm=pnpm --no-install
+  const args           = process.argv.slice(2);
+  const argName        = args.find((a) => !a.startsWith('-'));
+  const flagYes        = args.includes('--yes') || args.includes('-y');
+  const flagNoInstall  = args.includes('--no-install');
+  const flagPm         = (args.find((a) => a.startsWith('--pm='))        ?? '').replace('--pm=', '')        || null;
+  const flagFramework  = (args.find((a) => a.startsWith('--framework=')) ?? '').replace('--framework=', '') || null;
 
   if (flagYes && !argName) {
     console.log(chalk.red('  При --yes укажи имя: create-nadvan-app my-project --yes'));
     process.exit(1);
   }
 
-  // В неинтерактивном режиме (--yes) пропускаем prompts
+  // ─── Вопросы ──────────────────────────────────────────────────────────────
   let answers;
+
   if (flagYes) {
-    answers = { pkgManager: flagPm ?? 'npm', install: !flagNoInstall };
+    answers = {
+      framework:  flagFramework ?? 'react',
+      pkgManager: flagPm        ?? 'npm',
+      install:    !flagNoInstall,
+    };
   } else {
     answers = await prompts(
       [
@@ -49,6 +54,24 @@ async function main() {
             /^[a-z0-9][a-z0-9-]*$/.test(v) ||
             'Только строчные буквы, цифры и дефис',
         },
+        {
+          type: 'select',
+          name: 'framework',
+          message: 'Фреймворк:',
+          choices: [
+            {
+              title: 'React + Vite',
+              value: 'react',
+              description: 'SPA, Vite, react-router-dom',
+            },
+            {
+              title: 'Next.js',
+              value: 'nextjs',
+              description: 'SSR / SSG / App Router',
+            },
+          ],
+          initial: 0,
+        },
         {
           type: 'select',
           name: 'pkgManager',
@@ -76,22 +99,30 @@ async function main() {
     );
   }
 
-  const projectName  = argName ?? answers.projectName;
-  const { pkgManager, install } = answers;
-  const targetDir = path.resolve(process.cwd(), projectName);
+  const projectName              = argName ?? answers.projectName;
+  const { framework, pkgManager, install } = answers;
+  const targetDir                = path.resolve(process.cwd(), projectName);
 
   if (fs.existsSync(targetDir)) {
     console.log(chalk.red(`\n  Ошибка: папка "${projectName}" уже существует.`));
     process.exit(1);
   }
 
-  // ─── 1. Копируем шаблон ──────────────────────────────────────────────────
-  step('Копируем шаблон...');
-  await fs.copy(TEMPLATE_DIR, targetDir);
-  success('Шаблон скопирован');
+  const frameworkLabel = framework === 'nextjs' ? 'Next.js' : 'React + Vite';
+  console.log(chalk.dim(`\n  Фреймворк: ${frameworkLabel} · TypeScript · FSD\n`));
+
+  // ─── 1. Копируем base ───────────────────────────────────────────────────
+  step('Копируем базовый шаблон...');
+  await fs.copy(path.join(TEMPLATES, 'base'), targetDir);
+  success('Базовый шаблон скопирован');
+
+  // ─── 2. Поверх — фреймворк-специфичные файлы ────────────────────────────
+  step(`Применяем шаблон ${frameworkLabel}...`);
+  await fs.copy(path.join(TEMPLATES, framework), targetDir, { overwrite: true });
+  success(`Шаблон ${frameworkLabel} применён`);
 
-  // ─── 2. Переименовываем служебные файлы ──────────────────────────────────
-  step('Настраиваем файлы проекта...');
+  // ─── 3. Переименовываем служебные файлы ──────────────────────────────────
+  step('Настраиваем файлы...');
 
   await fs.move(
     path.join(targetDir, '_package.json'),
@@ -103,20 +134,20 @@ async function main() {
     path.join(targetDir, '.gitignore'),
   );
 
-  // ─── 3. Подставляем имя проекта ──────────────────────────────────────────
+  // ─── 4. Подставляем имя проекта ──────────────────────────────────────────
   const pkgPath = path.join(targetDir, 'package.json');
-  const pkg = await fs.readJson(pkgPath);
-  pkg.name = projectName;
+  const pkg     = await fs.readJson(pkgPath);
+  pkg.name      = projectName;
   await fs.writeJson(pkgPath, pkg, { spaces: 2 });
   success(`package.json → name: "${projectName}"`);
 
-  // ─── 4. Права на husky-хуки ──────────────────────────────────────────────
+  // ─── 5. Права husky ──────────────────────────────────────────────────────
   try {
     fs.chmodSync(path.join(targetDir, '.husky', 'pre-commit'), 0o755);
     fs.chmodSync(path.join(targetDir, '.husky', 'commit-msg'), 0o755);
   } catch { /* не критично */ }
 
-  // ─── 5. npm install ──────────────────────────────────────────────────────
+  // ─── 6. Установка зависимостей ───────────────────────────────────────────
   if (install) {
     step(`Устанавливаем зависимости (${pkgManager} install)...`);
     try {
@@ -129,7 +160,7 @@ async function main() {
   }
 
   // ─── Итог ────────────────────────────────────────────────────────────────
-  console.log(chalk.bold.green(`\n  ✅  Проект "${projectName}" создан!\n`));
+  console.log(chalk.bold.green(`\n  ✅  Проект "${projectName}" (${frameworkLabel}) создан!\n`));
   console.log('  Следующие шаги:\n');
   console.log(chalk.cyan(`    cd ${projectName}`));
   if (!install) console.log(chalk.cyan(`    ${pkgManager} install`));

package/src/{template → templates/base}/commitlint.config.js

@@ -52,11 +52,30 @@ export default {
 };
 
 /*
+  Формат: <тип>(<область>): <описание>
+
+  Правила описания:
+  - Инфинитив: «добавить», «исправить» — не «добавил», «исправил»
+  - Без точки в конце
+  - Конкретно и понятно
+
   Примеры правильных коммитов:
   feat(features): добавить авторизацию через OAuth
+  feat(widgets): добавить выпадающее меню в Header
   fix(shared): исправить padding в компоненте Button
+  fix(features): устранить зависание формы при быстром вводе
   style(widgets): обновить вёрстку Header под мобайл
   refactor(entities): переименовать поля в модели User
-  chore(deps): обновить @nadvan/ui до 2.1.0
+  refactor(features): вынести валидацию формы в отдельный хук
+  perf(widgets): добавить React.memo для ProductCard
+  test(features): покрыть тестами хук useAuth
   docs: добавить описание компонентов в Storybook
+  chore(deps): обновить nadvan-ui-kit до 1.0.3
+  chore(config): добавить алиас @icons в tsconfig
+  ci: добавить GitHub Actions workflow для деплоя
+  wip(features): начать реализацию корзины  ← только в feature-ветках!
+
+  Область (scope) — FSD-слой или техническая зона.
+  Можно уточнять: features/auth, widgets/header.
+  Подробнее: https://github.com/your-org/nadvan-specifications
 */

package/src/templates/base/src/entities/index.ts

@@ -0,0 +1,15 @@
+// Слой entities — бизнес-сущности (User, Product, Order, Article…).
+// Содержит модели данных, базовые UI-компоненты сущности и API-запросы.
+//
+// Пример структуры:
+//   src/entities/user/
+//     ├── index.ts          ← публичное API сущности
+//     ├── ui/
+//     │   └── UserAvatar.tsx
+//     ├── model/
+//     │   ├── user.store.ts
+//     │   └── user.types.ts
+//     └── api/
+//         └── user.api.ts
+//
+// Правило импортов: entities → shared

package/src/templates/base/src/features/index.ts

@@ -0,0 +1,15 @@
+// Слой features — пользовательские сценарии и бизнес-действия.
+// Например: auth, cart, search, like-post, change-language.
+//
+// Пример структуры:
+//   src/features/auth/
+//     ├── index.ts          ← публичное API фичи
+//     ├── ui/
+//     │   └── LoginForm.tsx
+//     ├── model/
+//     │   ├── auth.store.ts
+//     │   └── auth.types.ts
+//     └── api/
+//         └── auth.api.ts
+//
+// Правило импортов: features → entities, shared

package/src/templates/base/src/pages/index.ts

@@ -0,0 +1,10 @@
+// Слой pages — страницы приложения.
+// Каждая страница находится в отдельной папке и компонует виджеты и фичи.
+//
+// Пример структуры:
+//   src/pages/HomePage/
+//     ├── index.ts          ← публичное API страницы
+//     └── ui/
+//         └── HomePage.tsx
+//
+// Правило импортов: pages → widgets, features, entities, shared

package/src/templates/base/src/shared/api/index.ts

@@ -0,0 +1,29 @@
+// HTTP-клиент — базовая настройка запросов к API.
+// Конфигурируется под конкретный проект (baseURL, токены, интерсепторы).
+
+const BASE_URL = (
+  typeof process !== 'undefined'
+    ? (process.env['NEXT_PUBLIC_API_URL'] ?? process.env['VITE_API_URL'])
+    : (import.meta as { env?: Record<string, string> }).env?.['VITE_API_URL']
+) ?? '/api';
+
+async function request<T>(path: string, init?: RequestInit): Promise<T> {
+  const res = await fetch(`${BASE_URL}${path}`, {
+    headers: { 'Content-Type': 'application/json', ...init?.headers },
+    ...init,
+  });
+
+  if (!res.ok) {
+    throw new Error(`[API] ${res.status} ${res.statusText}: ${path}`);
+  }
+
+  return res.json() as Promise<T>;
+}
+
+export const api = {
+  get:    <T>(path: string)                     => request<T>(path),
+  post:   <T>(path: string, body: unknown)      => request<T>(path, { method: 'POST',   body: JSON.stringify(body) }),
+  put:    <T>(path: string, body: unknown)      => request<T>(path, { method: 'PUT',    body: JSON.stringify(body) }),
+  patch:  <T>(path: string, body: unknown)      => request<T>(path, { method: 'PATCH',  body: JSON.stringify(body) }),
+  delete: <T>(path: string)                     => request<T>(path, { method: 'DELETE' }),
+};

package/src/{template/src/app → templates/base/src/shared}/styles/global.scss

@@ -1,6 +1,8 @@
 // =============================================================================
 // GLOBAL STYLES — базовый сброс + глобальные переменные
-// Подключается один раз в src/app/index.tsx
+// Подключается один раз в точке входа:
+//   React:   src/main.tsx       → import '@shared/styles/global.scss'
+//   Next.js: src/app/layout.tsx → import '@shared/styles/global.scss'
 // =============================================================================
 
 @use 'variables' as *;

package/src/templates/base/src/shared/ui/index.ts

@@ -0,0 +1,15 @@
+// Базовые UI-компоненты из nadvan-ui-kit.
+// Здесь НЕТ бизнес-логики: только переиспользуемые примитивы.
+//
+// Доступные компоненты:
+//   Button, Checkbox, Dropzone, Elevation, Field, Link, Modal,
+//   Notification, NotificationProvider, useNotification,
+//   GlobalNotificationContainer, notificationService,
+//   showInfo, showError, showSuccess,
+//   Pagination, PaginationDot, PriceRange, ProgressBar,
+//   Radiobutton, Toggle, Tooltip
+//
+// CSS подключается один раз в точке входа:
+//   import 'nadvan-ui-kit/styles';
+
+export * from 'nadvan-ui-kit';

package/src/templates/base/src/widgets/index.ts

@@ -0,0 +1,12 @@
+// Слой widgets — самостоятельные UI-блоки (Header, Footer, Sidebar, Banner…).
+// Виджет не зависит от бизнес-контекста страницы.
+//
+// Пример структуры:
+//   src/widgets/Header/
+//     ├── index.ts
+//     ├── ui/
+//     │   ├── Header.tsx
+//     │   └── Header.module.scss
+//     └── model/            ← если виджет имеет локальное состояние
+//
+// Правило импортов: widgets → features, entities, shared

package/src/templates/nextjs/_package.json

@@ -0,0 +1,64 @@
+{
+  "name": "project-name",
+  "version": "0.1.0",
+  "private": true,
+  "engines": {
+    "node": ">=20.0.0",
+    "npm": ">=10.0.0"
+  },
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint src --max-warnings 0",
+    "lint:fix": "eslint src --fix",
+    "lint:styles": "stylelint 'src/**/*.scss'",
+    "lint:styles:fix": "stylelint 'src/**/*.scss' --fix",
+    "format": "prettier --write 'src/**/*.{ts,tsx,scss,json}'",
+    "format:check": "prettier --check 'src/**/*.{ts,tsx,scss,json}'",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "prepare": "husky"
+  },
+  "dependencies": {
+    "nadvan-ui-kit": "^1.0.2",
+    "next": "^15.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^19.5.0",
+    "@commitlint/config-conventional": "^19.5.0",
+    "@storybook/addon-a11y": "^8.3.6",
+    "@storybook/addon-essentials": "^8.3.6",
+    "@storybook/nextjs": "^8.3.6",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/node": "^22.0.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@typescript-eslint/eslint-plugin": "^8.12.2",
+    "@typescript-eslint/parser": "^8.12.2",
+    "@vitest/coverage-v8": "^2.1.4",
+    "@vitest/ui": "^2.1.4",
+    "eslint": "^9.13.0",
+    "eslint-config-next": "^15.1.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-boundaries": "^4.3.1",
+    "eslint-plugin-import": "^2.31.0",
+    "husky": "^9.1.6",
+    "lint-staged": "^15.2.10",
+    "prettier": "^3.3.3",
+    "sass": "^1.80.6",
+    "stylelint": "^16.10.0",
+    "stylelint-config-standard-scss": "^13.1.0",
+    "stylelint-order": "^6.0.4",
+    "typescript": "^5.6.3",
+    "vitest": "^2.1.4"
+  }
+}

package/src/templates/nextjs/eslint.config.js

@@ -0,0 +1,132 @@
+import tsParser from '@typescript-eslint/parser';
+import tsPlugin from '@typescript-eslint/eslint-plugin';
+import reactPlugin from 'eslint-plugin-react';
+import reactHooksPlugin from 'eslint-plugin-react-hooks';
+import importPlugin from 'eslint-plugin-import';
+import boundariesPlugin from 'eslint-plugin-boundaries';
+import nextPlugin from '@next/eslint-plugin-next';
+import prettierConfig from 'eslint-config-prettier';
+
+export default [
+  {
+    ignores: ['dist/**', 'node_modules/**', '.next/**', 'storybook-static/**'],
+  },
+
+  // Next.js core rules
+  {
+    plugins: { '@next/next': nextPlugin },
+    rules: {
+      ...nextPlugin.configs.recommended.rules,
+      ...nextPlugin.configs['core-web-vitals'].rules,
+    },
+  },
+
+  {
+    files: ['src/**/*.{ts,tsx}'],
+
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        project: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+
+    plugins: {
+      '@typescript-eslint': tsPlugin,
+      react: reactPlugin,
+      'react-hooks': reactHooksPlugin,
+      import: importPlugin,
+      boundaries: boundariesPlugin,
+    },
+
+    settings: {
+      react: { version: 'detect' },
+      'import/resolver': { typescript: true },
+      'boundaries/elements': [
+        { type: 'app',      pattern: 'src/app/*' },
+        { type: 'pages',    pattern: 'src/pages/*' },
+        { type: 'widgets',  pattern: 'src/widgets/*' },
+        { type: 'features', pattern: 'src/features/*' },
+        { type: 'entities', pattern: 'src/entities/*' },
+        { type: 'shared',   pattern: 'src/shared/*' },
+      ],
+      'boundaries/ignore': ['**/*.test.*', '**/*.spec.*', '**/*.stories.*'],
+    },
+
+    rules: {
+      // TypeScript
+      ...tsPlugin.configs['recommended'].rules,
+      ...tsPlugin.configs['recommended-requiring-type-checking'].rules,
+      '@typescript-eslint/no-explicit-any': 'error',
+      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+      '@typescript-eslint/consistent-type-imports': ['error', { prefer: 'type-imports' }],
+      '@typescript-eslint/no-floating-promises': 'error',
+      '@typescript-eslint/no-misused-promises': 'error',
+      '@typescript-eslint/strict-boolean-expressions': 'error',
+      '@typescript-eslint/prefer-nullish-coalescing': 'error',
+      '@typescript-eslint/prefer-optional-chain': 'error',
+
+      // React
+      ...reactPlugin.configs.recommended.rules,
+      ...reactPlugin.configs['jsx-runtime'].rules,
+      'react/prop-types': 'off',
+      'react/self-closing-comp': 'error',
+      'react/jsx-boolean-value': ['error', 'never'],
+      'react/jsx-curly-brace-presence': ['error', { props: 'never', children: 'never' }],
+      'react/jsx-no-useless-fragment': 'error',
+      'react/no-array-index-key': 'warn',
+
+      // React Hooks
+      ...reactHooksPlugin.configs.recommended.rules,
+
+      // Импорты
+      'import/order': ['error', {
+        groups: ['builtin', 'external', 'internal', ['parent', 'sibling', 'index']],
+        pathGroups: [
+          { pattern: '@app/**',      group: 'internal', position: 'before' },
+          { pattern: '@pages/**',    group: 'internal', position: 'before' },
+          { pattern: '@widgets/**',  group: 'internal', position: 'before' },
+          { pattern: '@features/**', group: 'internal', position: 'before' },
+          { pattern: '@entities/**', group: 'internal', position: 'before' },
+          { pattern: '@shared/**',   group: 'internal', position: 'before' },
+        ],
+        'newlines-between': 'always',
+        alphabetize: { order: 'asc' },
+      }],
+      'import/no-duplicates': 'error',
+      'import/no-default-export': 'error',
+
+      // FSD границы слоёв
+      'boundaries/element-types': ['error', {
+        default: 'disallow',
+        rules: [
+          { from: 'app',      allow: ['pages', 'widgets', 'features', 'entities', 'shared'] },
+          { from: 'pages',    allow: ['widgets', 'features', 'entities', 'shared'] },
+          { from: 'widgets',  allow: ['features', 'entities', 'shared'] },
+          { from: 'features', allow: ['entities', 'shared'] },
+          { from: 'entities', allow: ['shared'] },
+          { from: 'shared',   allow: [] },
+        ],
+      }],
+
+      'no-console': ['warn', { allow: ['warn', 'error'] }],
+      'prefer-const': 'error',
+      'no-var': 'error',
+      'eqeqeq': ['error', 'always'],
+    },
+  },
+
+  // Default export разрешён для Next.js App Router файлов и stories
+  {
+    files: [
+      'src/app/**/{page,layout,loading,error,not-found,template,default}.tsx',
+      'src/app/**/route.ts',
+      '**/*.stories.{ts,tsx}',
+      'next.config.ts',
+    ],
+    rules: { 'import/no-default-export': 'off' },
+  },
+
+  prettierConfig,
+];

package/src/templates/nextjs/next.config.ts

@@ -0,0 +1,20 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  reactStrictMode: true,
+
+  // SCSS: переменные и миксины автоматически доступны во всех .scss файлах
+  sassOptions: {
+    additionalData: `
+      @use "src/shared/styles/variables" as *;
+      @use "src/shared/styles/mixins" as *;
+    `,
+  },
+
+  // FSD aliases дублируем здесь для runtime-резолва
+  experimental: {
+    typedRoutes: true,
+  },
+};
+
+export default nextConfig;

package/src/templates/nextjs/src/app/layout.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from 'next';
+
+import 'nadvan-ui-kit/styles';
+import '@shared/styles/global.scss';
+
+import { Providers } from './providers';
+
+export const metadata: Metadata = {
+  title: 'Nadvan App',
+  description: 'Nadvan Frontend Project',
+};
+
+export default function RootLayout({ children }: { readonly children: React.ReactNode }) {
+  return (
+    <html lang="ru">
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}

package/src/templates/nextjs/src/app/page.tsx

@@ -0,0 +1,7 @@
+export default function HomePage() {
+  return (
+    <main>
+      <h1>Добро пожаловать</h1>
+    </main>
+  );
+}

package/src/templates/nextjs/src/app/providers/index.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+interface ProvidersProps {
+  children: ReactNode;
+}
+
+// Client-side провайдеры: store, theme, i18n, toasts и т.д.
+// Пример:
+//   import { Provider } from 'react-redux';
+//   import { store } from '@shared/config/store';
+//
+//   export function Providers({ children }: ProvidersProps) {
+//     return <Provider store={store}>{children}</Provider>;
+//   }
+
+export function Providers({ children }: ProvidersProps) {
+  return <>{children}</>;
+}

package/src/templates/nextjs/tsconfig.json

@@ -0,0 +1,43 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+
+    // Strict
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "exactOptionalPropertyTypes": true,
+
+    // Next.js plugin
+    "plugins": [{ "name": "next" }],
+
+    // FSD aliases
+    "baseUrl": ".",
+    "paths": {
+      "@app/*":      ["src/app/*"],
+      "@pages/*":    ["src/pages/*"],
+      "@widgets/*":  ["src/widgets/*"],
+      "@features/*": ["src/features/*"],
+      "@entities/*": ["src/entities/*"],
+      "@shared/*":   ["src/shared/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/src/{template → templates/react}/_package.json

@@ -26,9 +26,7 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@nadvan/ui": "latest",
-    "@nadvan/fonts": "latest",
-    "@nadvan/grid": "latest",
+    "nadvan-ui-kit": "^1.0.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.27.0"

package/src/templates/react/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Nadvan App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/src/templates/react/src/app/index.tsx

@@ -0,0 +1,19 @@
+import { Suspense } from 'react';
+import { Route, Routes } from 'react-router-dom';
+
+import { Providers } from './providers';
+
+// Импортируй страницы из @pages и добавляй маршруты здесь
+// import { HomePage } from '@pages/home';
+
+export function App() {
+  return (
+    <Providers>
+      <Suspense fallback={null}>
+        <Routes>
+          <Route path="/" element={<div>Home</div>} />
+        </Routes>
+      </Suspense>
+    </Providers>
+  );
+}

package/src/templates/react/src/app/providers/index.tsx

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+
+interface ProvidersProps {
+  children: ReactNode;
+}
+
+// Оборачивай здесь глобальные провайдеры: store, theme, i18n, toasts и т.д.
+// Пример:
+//   import { Provider } from 'react-redux';
+//   import { store } from '@shared/config/store';
+//
+//   export function Providers({ children }: ProvidersProps) {
+//     return <Provider store={store}>{children}</Provider>;
+//   }
+
+export function Providers({ children }: ProvidersProps) {
+  return <>{children}</>;
+}

package/src/templates/react/src/main.tsx

@@ -0,0 +1,19 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+
+import 'nadvan-ui-kit/styles';
+import '@shared/styles/global.scss';
+
+import { App } from '@app/index';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) throw new Error('Root element #root not found');
+
+createRoot(rootElement).render(
+  <StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>,
+);

package/src/{template → templates/react}/vite.config.ts

@@ -12,8 +12,8 @@ export default defineConfig({
       scss: {
         // Переменные и миксины автоматически доступны во всех .scss файлах
         additionalData: `
-          @use "src/app/styles/variables" as *;
-          @use "src/app/styles/mixins" as *;
+          @use "src/shared/styles/variables" as *;
+          @use "src/shared/styles/mixins" as *;
         `,
       },
     },