feat: Progressive Disclosure документация
This commit is contained in:
84
README.md
84
README.md
@@ -1,57 +1,53 @@
|
||||
# NextJS Style Guide
|
||||
# Style Guide
|
||||
|
||||
Rules and standards for NextJS and TypeScript development: architecture, typing, styles, components, API, and infrastructure.
|
||||
Репозиторий с правилами и стандартами фронтенд-разработки. Исходники документации собираются в разные форматы под разные фреймворки.
|
||||
|
||||
## Documentation Structure
|
||||
## Структура
|
||||
|
||||
### Processes
|
||||
```text
|
||||
src/ # Исходники — только .md файлы
|
||||
├── base/ # Общие правила (не поставляется отдельно)
|
||||
│ ├── basics/ # Базовые: стиль кода, именование, типизация
|
||||
│ ├── applied/ # Прикладные: компоненты, стили, хуки, API
|
||||
│ └── triggers/ # Триггеры: создание компонента, стилизация и т.д.
|
||||
│
|
||||
└── nextjs/ # Next.js — самостоятельная единица
|
||||
├── applied/ # Next.js-специфичные: page-level, project-structure
|
||||
├── triggers/ # Next.js-специфичные триггеры: create-page, create-layout
|
||||
├── DEVELOP.md # Точка входа для агента-разработчика
|
||||
└── REVIEW.md # Точка входа для агента-ревьювера
|
||||
|
||||
**What to do** in a specific situation — step-by-step instructions.
|
||||
scripts/ # Скрипты и манифесты сборки
|
||||
├── build-ai.js # Скрипт сборки
|
||||
└── nextjs.build.js # Манифест: какие файлы, куда, как называются
|
||||
|
||||
| Section | Answers the question |
|
||||
|---------|---------------------|
|
||||
| Getting Started | What tools to install before starting development? |
|
||||
| Creating an App | How to create a new project, where to get a template? |
|
||||
| Creating Pages | How to add a page: routing and screen? |
|
||||
| Creating Components | How to generate components using templates? |
|
||||
| Styling | What to use: Mantine, tokens, or PostCSS? |
|
||||
| Data Fetching | How to fetch data: SWR, codegen, sockets? |
|
||||
| State Management | When and how to create a store (Zustand)? |
|
||||
| Localization | How to add translations and work with i18next? |
|
||||
dist/ # Собранные версии (gitignore)
|
||||
├── ai/{framework}/ # Для AI-агентов
|
||||
└── vitepress/{framework}/ # Для людей (планируется)
|
||||
```
|
||||
|
||||
### Basic Rules
|
||||
## Сборка
|
||||
|
||||
**What the code should look like** — standards not tied to a specific technology.
|
||||
```bash
|
||||
npm run build:ai # Собрать все фреймворки
|
||||
```
|
||||
|
||||
| Section | Answers the question |
|
||||
|---------|---------------------|
|
||||
| Tech Stack | What stack do we use? |
|
||||
| Architecture | How are FSD layers, dependencies, and public API structured? |
|
||||
| Code Style | How to format code: indentation, quotes, imports, early return? |
|
||||
| Naming | How to name files, variables, components, hooks? |
|
||||
| Documentation | How to write JSDoc: what to document and what not? |
|
||||
| Typing | How to type: type vs interface, any/unknown? |
|
||||
## Манифест
|
||||
|
||||
### Applied Sections
|
||||
Каждый фреймворк имеет манифест `scripts/{framework}.build.js`. Ключ — путь в выходной папке, значение — путь исходника в `src/`.
|
||||
|
||||
**How a specific area works** — rules, structure, and code examples for specific technologies and tools.
|
||||
Скрипт только копирует файлы по манифесту. Никакой генерации.
|
||||
|
||||
| Section | Answers the question |
|
||||
|---------|---------------------|
|
||||
| Project Structure | How are folders and files organized by FSD? |
|
||||
| Components | How is a component structured: files, props, clsx? |
|
||||
| Page-level Components | How to define layout, page, loading, error, not-found? |
|
||||
| Templates & Code Generation | How do templates work: syntax, variables, modifiers? |
|
||||
| Styles | How to write CSS: PostCSS Modules, nesting, media, tokens? |
|
||||
| Images | _(not filled)_ |
|
||||
| SVG Sprites | _(not filled)_ |
|
||||
| Video | _(not filled)_ |
|
||||
| API | _(not filled)_ |
|
||||
| Stores | _(not filled)_ |
|
||||
| Hooks | _(not filled)_ |
|
||||
| Fonts | _(not filled)_ |
|
||||
| Localization | _(not filled)_ |
|
||||
## Добавление раздела
|
||||
|
||||
## For Assistants
|
||||
1. Создать `.md` в `src/base/` (общий) или `src/{framework}/` (специфичный).
|
||||
2. Добавить frontmatter: `title`, `scope`, `keywords`, `when`.
|
||||
3. Добавить путь в манифест `scripts/{framework}.build.js`.
|
||||
4. Обновить точку входа (`DEVELOP.md` и/или `REVIEW.md`).
|
||||
5. `npm run build:ai`.
|
||||
|
||||
Full documentation in a single MD file: https://gromlab.ru/docs/frontend-style-guide/raw/branch/main/generated/en/RULES.md
|
||||
## Добавление фреймворка
|
||||
|
||||
1. Создать `src/{framework}/` с `.md` файлами и точками входа.
|
||||
2. Создать `scripts/{framework}.build.js`.
|
||||
3. `npm run build:ai`.
|
||||
|
||||
Reference in New Issue
Block a user