# 📐 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')}>
```