63 lines
1.3 KiB
Markdown
63 lines
1.3 KiB
Markdown
# 📐 Coding Conventions
|
||
|
||
## Именование
|
||
|
||
- **Компоненты:** PascalCase (`Button.tsx`)
|
||
- **Утилиты:** kebab-case (`format-date.ts`)
|
||
- **Хуки:** camelCase с use (`useInView.ts`)
|
||
|
||
```typescript
|
||
const userName = "John";
|
||
const MAX_RETRIES = 3;
|
||
```
|
||
|
||
## Структура компонента
|
||
|
||
```typescript
|
||
"use client";
|
||
|
||
import { Button } from "@/shared/ui/button";
|
||
|
||
interface MyComponentProps {
|
||
title: string;
|
||
}
|
||
|
||
export function MyComponent({ title }: MyComponentProps) {
|
||
return <div>{title}</div>;
|
||
}
|
||
```
|
||
|
||
## TypeScript
|
||
|
||
Всегда типизируйте props:
|
||
|
||
```typescript
|
||
interface ButtonProps {
|
||
children: React.ReactNode;
|
||
variant?: "primary" | "secondary";
|
||
}
|
||
```
|
||
|
||
## Импорты
|
||
|
||
Порядок: React → Внешние → Наши (@/...)
|
||
|
||
```typescript
|
||
import { useState } from "react";
|
||
import { motion } from "framer-motion";
|
||
import { Button } from "@/shared/ui/button";
|
||
```
|
||
|
||
**ВСЕГДА используйте @/ для абсолютных импортов.**
|
||
|
||
## Стилизация
|
||
|
||
Порядок Tailwind: Layout → Sizing → Spacing → Typography → Colors
|
||
|
||
Условные классы через cn():
|
||
|
||
```typescript
|
||
import { cn } from '@/shared/lib/utils';
|
||
<button className={cn('px-4 py-2', variant === 'primary' && 'bg-primary')}>
|
||
```
|