sync

.vitepress/config.ts

@@ -22,6 +22,7 @@ export default defineConfig({
         text: 'Прикладные разделы',
         items: [
           { text: 'Структура проекта', link: '/parts/7-project-structure' },
+          { text: 'Шаблоны генерации кода', link: '/parts/17-templates-generation' },
           { text: 'Компоненты', link: '/parts/8-components' },
           { text: 'Стили', link: '/parts/9-styles' },
           { text: 'Изображения/спрайты', link: '/parts/10-images-sprites' },

parts/1-tech-stack.md

@@ -6,16 +6,36 @@ title: Технологии и библиотеки
 
 Базовый стек технологий и библиотек, на который опираются проекты и примеры в документации.
 
-## Что используем обычно
+## Что используем
 
-- **TypeScript** — типизация всей логики и компонентов.
+### Стек
+- **React/TypeScript** — основной стек для UI и приложения.
+- **Next.js** — для продуктовых сайтов.
+
+### Архитектура
 - **FSD (Feature-Sliced Design)** — структура проекта и границы модулей.
-- **React + Next.js** — основной стек для UI и приложения.
+
+### UI компоненты
 - **Mantine UI** — базовые UI-компоненты.
-- **SWR** — получение данных по GET (кеширование и revalidate).
+
+### Fetch (API)
+- **@gromlab/api-codegen** — генерация API‑клиентов и типов.
+- **SWR** — получение, кеширование, ревалидация, дедубликация.
+- **SWR (useSWRSubscription)** - сокеты, реалтайм подписки.
+
+### Store
 - **Zustand** — глобальное состояние.
+
+### Локализация
 - **i18next (i18n)** — локализация всех пользовательских текстов.
+
+### Тестирование
 - **Vitest** — тестирование.
-- **clsx** — конкатенация CSS‑классов.
+
+### Стили
 - **PostCSS Modules** — изоляция стилей.
 - **Mobile First** — подход к адаптивной верстке.
+- **clsx** — конкатенация CSS‑классов.
+
+### Генерация
+- **@gromlab/create** — шаблонизатор для создания слоёв и других файлов из шаблонов.

parts/17-templates-generation.md

@@ -0,0 +1,113 @@
+# Шаблоны генерации кода
+
+Подход к использованию шаблонов и генерации кода для стандартизации структуры и ускорения разработки.
+
+## Что генерируем
+
+- Компоненты (`screens`, `layouts`, `widgets`, `features`, `entities`).
+- Страницы (nextjs `app`, `pages`)
+- Типовые инфраструктурные модули (например, `store`).
+
+## Чем генерируем
+
+### VSCode extension
+
+[расширение VS Code](https://open-vsx.org/extension/MyTemplateGenerator/mytemplategenerator) — создание файлов и папок из шаблонов через UI‑интерфейс внутри редактора.
+
+### CLI (для агентов)
+
+[@gromlab/create](https://gromlab.ru/gromov/create) — CLI для генерации файлов и папок по шаблонам.
+
+Примеры:
+```bash
+# Создать компонент
+create component button
+
+# Создать компонент используя NPX
+npx @gromlab/create component button
+```
+
+## Структура папок
+Все шаблоны лежат в `.templates/` в корне проекта.  
+Каждая папка в `.templates/` — это уникальный шаблон.  
+
+```text
+.templates/                     # корневая папка всех шаблонов
+├── component/                  # шаблон компонента
+│   └── {{{name.pascalCase}}}/
+│       ├── index.ts
+│       ├── {{{name.pascalCase}}}.tsx
+│       └── {{{name.pascalCase}}}.module.css
+└── store/                      # шаблон Zustand стора
+    └── {{{name.camelCase}}}Store/
+        ├── index.ts
+        ├── {{{name.camelCase}}}Store.ts
+        └── {{{name.camelCase}}}Store.type.ts
+```
+
+## Синтаксис
+
+- Переменные в шаблонах работают в именах файлов/папок и внутри файлов.
+- Базовая переменная — `name`.
+
+Формат записи переменной:
+
+```text
+{{variable}}
+```
+
+Модификаторы — это преобразования переменной, которые меняют регистр и формат записи. Они пишутся после имени через точку и применяются в момент генерации.
+
+```text
+{{name.pascalCase}} -> MyButton
+{{name.camelCase}} -> myButton
+{{name.kebabCase}} -> my-button
+{{name.snakeCase}} -> my_button
+{{name.screamingSnakeCase}} -> MY_BUTTON
+```
+
+Пример использования в шаблоне:
+
+```text
+{{name}}.tsx
+{{name.pascalCase}}.tsx
+```
+
+```tsx
+export const {{name.pascalCase}} = () => {
+  return <div>{{name}}</div>
+}
+```
+
+## Шаблон компонента
+
+Рекомендуемая структура компонента, создаётся генератором по шаблону.
+
+```ts
+// .templates/component/index.ts
+export * from './{{name.pascalCase}}'
+```
+
+```tsx
+// .templates/component/{{name.pascalCase}}.tsx
+import { FC, HTMLAttributes } from "react";
+import styles from './{{name.kebabCase}}.module.css'
+import cl from 'clsx'
+
+interface IOwnProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const {{name.pascalCase}}:FC<IOwnProps> = ({className, ...htmlAttr}) => {
+  return (
+    <div {...htmlAttr} className={cl(styles.root, className)}>
+      {{name.kebabCase}}
+    </div>
+  )
+}
+```
+
+```css
+/* .templates/component/{{name.kebabCase}}.module.css */
+.root {
+  
+}
+```

parts/8-components.md

@@ -72,6 +72,11 @@ export const Container: FC<ContainerProps> = ({ className, ...htmlAttr }) => {
 export { Container } from './container.ui'
 ```
 
+## Генерация
+
+Генерация нужна, чтобы быстро создавать компоненты с единым каркасом и не допускать расхождений в структуре. Это даёт одинаковые папки и имена файлов, уменьшает ручные ошибки и ускоряет старт работы.
+
+Используйте **@gromlab/create** для создания базового шаблона компонента. После генерации проверьте название компонента/файлов и заполните описание назначения.
 
 ## Вложенные (дочерние) компоненты