sync

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 {
+  
+}
+```