landing-for-digital-product/CONVENTIONS.md

📐 Coding Conventions

Именование

• Компоненты: PascalCase (Button.tsx)
• Утилиты: kebab-case (format-date.ts)
• Хуки: camelCase с use (useInView.ts)

const userName = "John";
const MAX_RETRIES = 3;

Структура компонента

"use client";

import { Button } from "@/shared/ui/button";

interface MyComponentProps {
  title: string;
}

export function MyComponent({ title }: MyComponentProps) {
  return <div>{title}</div>;
}

TypeScript

Всегда типизируйте props:

interface ButtonProps {
  children: React.ReactNode;
  variant?: "primary" | "secondary";
}

Импорты

Порядок: React → Внешние → Наши (@/...)

import { useState } from "react";
import { motion } from "framer-motion";
import { Button } from "@/shared/ui/button";

ВСЕГДА используйте @/ для абсолютных импортов.

Стилизация

Порядок Tailwind: Layout → Sizing → Spacing → Typography → Colors

Условные классы через cn():

import { cn } from '@/shared/lib/utils';
<button className={cn('px-4 py-2', variant === 'primary' && 'bg-primary')}>