sync

parts/8-1-templates-generation.md

@@ -0,0 +1,132 @@
+---
+title: Шаблоны генерации кода
+---
+
+# Шаблоны генерации кода
+
+Подход к использованию шаблонов и генерации кода для стандартизации структуры и ускорения разработки.
+
+## Что генерируем
+
+- Компоненты (`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.kebabCase}}/
+│       ├── styles/
+│       │   └── {{name.kebabCase}}.module.css
+│       ├── types/
+│       │   └── {{name.kebabCase}}.interface.ts
+│       ├── {{name.kebabCase}}.ui.tsx
+│       └── index.ts
+└── store/                      # шаблон Zustand стора
+    └── {{name.kebabCase}}/
+        ├── {{name.kebabCase}}.store.ts
+        ├── {{name.kebabCase}}.type.ts
+        └── index.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 { {{name.pascalCase}} } from './{{name.kebabCase}}.ui'
+```
+
+```ts
+// .templates/component/types/{{name.kebabCase}}.interface.ts
+import type { HTMLAttributes } from 'react'
+
+/**
+ * Параметры {{name.pascalCase}}.
+ */
+export interface {{name.pascalCase}}Props extends HTMLAttributes<HTMLDivElement> {}
+```
+
+```tsx
+// .templates/component/{{name.kebabCase}}.ui.tsx
+import type { FC } from 'react'
+import cl from 'clsx'
+import type { {{name.pascalCase}}Props } from './types/{{name.kebabCase}}.interface'
+import styles from './styles/{{name.kebabCase}}.module.css'
+
+/**
+ * {{name.pascalCase}}.
+ */
+export const {{name.pascalCase}}: FC<{{name.pascalCase}}Props> = ({ className, ...htmlAttr }) => {
+  return (
+    <div {...htmlAttr} className={cl(styles.root, className)}>
+      {{name.kebabCase}}
+    </div>
+  )
+}
+```
+
+```css
+/* .templates/component/styles/{{name.kebabCase}}.module.css */
+.root {
+
+}
+```