Feat: Настроить импорты из packages/ui, обновить документацию ( #19 )

.prettierrc.mjs

@@ -1,4 +1,24 @@
-import config from "@repo/eslint-config/prettier-base";
+import defautlConfig from '@repo/eslint-config/prettier-base'
+
+const config = {
+	...defautlConfig,
+	plugins: ['@ianvs/prettier-plugin-sort-imports'],
+	importOrder: [
+		'<BUILTIN_MODULES>',
+		'<THIRD_PARTY_MODULES>',
+		'',
+		'^@repo(.*)$',
+		'',
+		'^[../]',
+		'^[./]',
+	],
+	importOrderParserPlugins: ['typescript', 'jsx'],
+	importOrderTypeScriptVersion: '5.0.0',
+	importOrderCaseSensitive: false,
+	importOrderMergeDuplicateImports: true,
+	importOrderCombineTypeAndValueImports: true,
+	importOrderSortSpecifiers: true,
+}
 
 /** @type {import("prettier").Config} */
-export default config;
+export default config

apps/web/README.md

@@ -13,9 +13,11 @@ pnpm dev
 ## Стек технологий
 
 - **Next.js 16** — React фреймворк с серверным рендерингом
+- **React 19** — UI библиотека
 - **TypeScript** — типизация
-- **CSS Modules** — стили
-- **Turborepo** — сборка монорепозитория
+- **Tailwind CSS 4** — стили
+- **@repo/ui** — [UI-kit на основе shadcn/ui](../../docs/frontend/shadcn.md)
+- **react-hook-form + zod** — формы и валидация
 
 ## Структура
 

apps/web/app/authorization/authorization-dialog-layout.tsx

@@ -1,6 +1,7 @@
-import { DialogFooter, DialogHeader, DialogTitle } from '@repo/ui/components/dialog'
 import type { ReactNode } from 'react'
 
+import { DialogFooter, DialogHeader, DialogTitle } from '@repo/ui'
+
 interface AuthorizationDialogLayoutProps {
 	children?: ReactNode
 	footer?: ReactNode

apps/web/app/authorization/authorization-dialog.tsx

@@ -1,11 +1,11 @@
 'use client'
 
 import React from 'react'
-import { Button } from '@repo/ui/components/button'
-import { Dialog, DialogContent, DialogTrigger } from '@repo/ui/components/dialog'
-import { Form } from '@repo/ui/components/form'
-import { AuthorizationForm } from './authorization-form'
+
+import { Button, Dialog, DialogContent, DialogTrigger, Form } from '@repo/ui'
+
 import { AuthorizationDialogLayout } from './authorization-dialog-layout'
+import { AuthorizationForm } from './authorization-form'
 import { useAuthorizationForm } from './use-authorization-form'
 
 const AuthorizationDialog = () => {

apps/web/app/authorization/authorization-form.tsx

@@ -1,13 +1,10 @@
-import {
-	FormControl,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from '@repo/ui/components/form'
-import { Input } from '@repo/ui/components/input'
+'use client'
+
 import React from 'react'
 import { useFormContext } from 'react-hook-form'
+
+import { FormControl, FormField, FormItem, FormLabel, FormMessage, Input } from '@repo/ui'
+
 import { AuthorizationFormValues } from './use-authorization-form'
 
 const AuthorizationForm = () => {

docs/frontend/shadcn.md

@@ -0,0 +1,9 @@
+# shadcn/ui
+
+В проекте используется [shadcn/ui](https://ui.shadcn.com/) — коллекция переиспользуемых компонентов на основе Radix UI и Tailwind CSS.
+
+Компоненты вынесены в пакет `@repo/ui` и доступны для использования во всех приложениях монорепозитория.
+
+## Документация UI-kit
+
+Полная документация с примерами использования, инструкцией по добавлению новых компонентов и известными проблемами: [packages/ui/README.md](../../packages/ui/README.md)

docs/work/common.md

@@ -204,6 +204,22 @@ try {
 - Группируй связанные файлы в папки
 - Держи файлы компактными (до 200-300 строк)
 
+## Форматирование и сортировка импортов
+
+Для автоматической сортировки импортов используется `@ianvs/prettier-plugin-sort-imports`.
+
+Порядок импортов (настроено в `.prettierrc.mjs`):
+
+1. Встроенные модули Node.js
+2. Внешние пакеты (node_modules)
+3. Пакеты монорепозитория (`@repo/*`)
+4. Относительные импорты (`../`, `./`)
+
+Форматирование применяется:
+
+- При сохранении файла (в IDE)
+- Через pre-commit hook
+
 <!-- ## Тестирование
 
 - Пиши тесты для критичной бизнес-логики

package.json

@@ -24,6 +24,7 @@
 	"devDependencies": {
 		"@commitlint/cli": "^20.4.1",
 		"@commitlint/config-conventional": "^20.4.1",
+		"@ianvs/prettier-plugin-sort-imports": "^4.7.1",
 		"@repo/eslint-config": "workspace:*",
 		"@repo/typescript-config": "workspace:*",
 		"@typescript-eslint/eslint-plugin": "^8.56.0",