docs: рефакторинг документации — workflow, прикладные разделы, генерация RULES.md
- Переработан раздел Workflow: заголовки, описания, порядок разделов - Добавлены новые разделы: Генерация кода (workflow), Настройка VS Code (applied) - Убран суффикс .ui.tsx из документации и примеров - Переработан раздел Структура проекта — только Next.js, без React SPA - Приоритет стилизации перенесён из applied/styles в workflow/styling - Убрано дублирование инструментов генерации — единая точка в applied/templates-generation - Переписан concat-md.js: без внешних зависимостей, мета-якоря для навигации в RULES.md - Удалена зависимость concat-md - Обновлена главная страница: названия разделов, URL на RULES.md - Добавлен AGENTS.md с правилами для агентов
This commit is contained in:
@@ -1,6 +1,4 @@
|
||||
|
||||
<a name="indexmd"></a>
|
||||
|
||||
<!-- /index -->
|
||||
# NextJS Style Guide
|
||||
|
||||
Rules and standards for NextJS and TypeScript development: architecture, typing, styles, components, API, and infrastructure.
|
||||
@@ -43,6 +41,7 @@ Rules and standards for NextJS and TypeScript development: architecture, typing,
|
||||
|---------|---------------------|
|
||||
| Project Structure | How are folders and files organized by FSD? |
|
||||
| Components | How is a component structured: files, props, clsx, FC? |
|
||||
| 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)_ |
|
||||
@@ -58,168 +57,121 @@ Rules and standards for NextJS and TypeScript development: architecture, typing,
|
||||
|
||||
Full documentation in a single MD file: https://gromlab.ru/docs/frontend-style-guide/raw/branch/main/generated/en/RULES.md
|
||||
|
||||
|
||||
<a name="workflowgetting-startedmd"></a>
|
||||
|
||||
# Getting Started
|
||||
<!-- /workflow/getting-started -->
|
||||
## Getting Started
|
||||
|
||||
Setting up the environment and installing tools before starting development.
|
||||
|
||||
|
||||
<a name="workflowcreating-appmd"></a>
|
||||
|
||||
# Creating an App
|
||||
<!-- /workflow/creating-app -->
|
||||
## Creating an App
|
||||
|
||||
How to create a new application: choosing a project template and initialization.
|
||||
|
||||
|
||||
<a name="workflowcreating-pagesmd"></a>
|
||||
|
||||
# Creating Pages
|
||||
<!-- /workflow/creating-pages -->
|
||||
## Creating Pages
|
||||
|
||||
Page creation pattern: routing (page.tsx) and screen.
|
||||
|
||||
|
||||
<a name="workflowcreating-componentsmd"></a>
|
||||
|
||||
# Creating Components
|
||||
<!-- /workflow/creating-components -->
|
||||
## Creating Components
|
||||
|
||||
Generating components using templates, working with child components.
|
||||
|
||||
|
||||
<a name="workflowstylingmd"></a>
|
||||
|
||||
# Styling
|
||||
<!-- /workflow/styling -->
|
||||
## Styling
|
||||
|
||||
Styling tools priority and rules for their application.
|
||||
|
||||
|
||||
<a name="workflowdata-fetchingmd"></a>
|
||||
|
||||
# Data Fetching
|
||||
<!-- /workflow/data-fetching -->
|
||||
## Data Fetching
|
||||
|
||||
How to fetch data: SWR, API client codegen, sockets.
|
||||
|
||||
|
||||
<a name="workflowstate-managementmd"></a>
|
||||
|
||||
# State Management
|
||||
<!-- /workflow/state-management -->
|
||||
## State Management
|
||||
|
||||
When and how to create a store (Zustand), what to store locally vs globally.
|
||||
|
||||
|
||||
<a name="workflowlocalizationmd"></a>
|
||||
|
||||
# Localization
|
||||
<!-- /workflow/localization -->
|
||||
## Localization
|
||||
|
||||
How to add translations and work with i18next.
|
||||
|
||||
|
||||
<a name="basicstech-stackmd"></a>
|
||||
|
||||
# Tech Stack
|
||||
<!-- /basics/tech-stack -->
|
||||
## Tech Stack
|
||||
|
||||
Base technology stack and libraries used in projects.
|
||||
|
||||
|
||||
<a name="basicsarchitecturemd"></a>
|
||||
|
||||
# Architecture
|
||||
<!-- /basics/architecture -->
|
||||
## Architecture
|
||||
|
||||
Architecture based on FSD (Feature-Sliced Design) and strict module boundaries.
|
||||
|
||||
|
||||
<a name="basicscode-stylemd"></a>
|
||||
|
||||
# Code Style
|
||||
<!-- /basics/code-style -->
|
||||
## Code Style
|
||||
|
||||
Unified code formatting rules: indentation, line breaks, quotes, import order, and readability.
|
||||
|
||||
|
||||
<a name="basicsnamingmd"></a>
|
||||
|
||||
# Naming
|
||||
<!-- /basics/naming -->
|
||||
## Naming
|
||||
|
||||
Naming should be predictable, concise, and reflect the meaning of the entity.
|
||||
|
||||
|
||||
<a name="basicsdocumentationmd"></a>
|
||||
|
||||
# Documentation
|
||||
<!-- /basics/documentation -->
|
||||
## Documentation
|
||||
|
||||
Documentation should help understand the purpose of an entity, not duplicate its types or obvious details.
|
||||
|
||||
|
||||
<a name="basicstypingmd"></a>
|
||||
|
||||
# Typing
|
||||
<!-- /basics/typing -->
|
||||
## Typing
|
||||
|
||||
Typing is required for all public interfaces, functions, and components.
|
||||
|
||||
|
||||
<a name="appliedproject-structuremd"></a>
|
||||
|
||||
# Project Structure
|
||||
<!-- /applied/project-structure -->
|
||||
## Project Structure
|
||||
|
||||
Base project structure and principles of module organization at folder and file level.
|
||||
|
||||
|
||||
<a name="appliedcomponentsmd"></a>
|
||||
|
||||
# Components
|
||||
<!-- /applied/components -->
|
||||
## Components
|
||||
|
||||
Rules for creating UI components across all FSD layers.
|
||||
|
||||
<!-- /applied/page-level -->
|
||||
## Page-level Components
|
||||
|
||||
<a name="appliedtemplates-generationmd"></a>
|
||||
Next.js App Router special files used by the framework by convention: `layout.tsx`, `page.tsx`, `loading.tsx`, `error.tsx`, `not-found.tsx`, `template.tsx`.
|
||||
|
||||
# Templates & Code Generation
|
||||
<!-- /applied/templates-generation -->
|
||||
## Templates & Code Generation
|
||||
|
||||
Template tools, syntax, and examples for code generation.
|
||||
|
||||
|
||||
<a name="appliedstylesmd"></a>
|
||||
|
||||
# Styles
|
||||
<!-- /applied/styles -->
|
||||
## Styles
|
||||
|
||||
CSS writing rules: PostCSS Modules, nesting, media queries, variables, formatting.
|
||||
|
||||
<!-- /applied/images-sprites -->
|
||||
## Images
|
||||
|
||||
<a name="appliedimages-spritesmd"></a>
|
||||
<!-- /applied/svg-sprites -->
|
||||
## SVG Sprites
|
||||
|
||||
# Images
|
||||
<!-- /applied/video -->
|
||||
## Video
|
||||
|
||||
<!-- /applied/api -->
|
||||
## API
|
||||
|
||||
<a name="appliedsvg-spritesmd"></a>
|
||||
<!-- /applied/stores -->
|
||||
## Stores
|
||||
|
||||
# SVG Sprites
|
||||
<!-- /applied/hooks -->
|
||||
## Hooks
|
||||
|
||||
<!-- /applied/fonts -->
|
||||
## Fonts
|
||||
|
||||
<a name="appliedvideomd"></a>
|
||||
|
||||
# Video
|
||||
|
||||
|
||||
<a name="appliedapimd"></a>
|
||||
|
||||
# API
|
||||
|
||||
|
||||
<a name="appliedstoresmd"></a>
|
||||
|
||||
# Stores
|
||||
|
||||
|
||||
<a name="appliedhooksmd"></a>
|
||||
|
||||
# Hooks
|
||||
|
||||
|
||||
<a name="appliedfontsmd"></a>
|
||||
|
||||
# Fonts
|
||||
|
||||
|
||||
<a name="appliedlocalizationmd"></a>
|
||||
|
||||
# Localization
|
||||
<!-- /applied/localization -->
|
||||
## Localization
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user