Task3/part1 - Сборщик Next.js 15, Card с CSS modules, Button с Panda + CVA

.gitignore

@@ -30,6 +30,9 @@ Thumbs.db
 # Директории для сборки
 build/
 dist/
+distNext/
+distWebpack/
+distVite/
 out/
 
 # Vite
@@ -42,3 +45,7 @@ out/
 .next/
 
 # Webpack
+
+## Panda
+styled-system
+styled-system-studio

README.md

@@ -7,3 +7,9 @@
 [![TypeScript](https://img.shields.io/badge/lang-typescript-blue)](https://www.typescriptlang.org/)
 
 Практические задания курса "Прочные основы создания React-приложений" в [Академии Цифра](https://academy.udmr.ru/)
+
+
+##Задание 3.1##
+1. Использовать сборщик Next.js
+2. Создать компонент Card (title, content, Button) и использовать CSS Modules
+3. Компонент Button (cva - варианты) стилизовать Panda CSS

eslint.config.mjs

@@ -7,19 +7,40 @@ import reactHooks from 'eslint-plugin-react-hooks';
 import jsxRuntime from 'eslint-plugin-react/configs/jsx-runtime.js';
 import unicorn from 'eslint-plugin-unicorn';
 import prettierPlugin from 'eslint-plugin-prettier';
+import nextPlugin from '@next/eslint-plugin-next';
 
 export default [
   js.configs.recommended,
 
-  // Конфигурация для TypeScript файлов
+  // Конфигурация для Next.js (App Router)
+  {
+    files: ['**/*.{ts,tsx}'],
+    plugins: {
+      '@next/next': nextPlugin,
+    },
+    rules: {
+      '@next/next/no-html-link-for-pages': 'error',
+      '@next/next/no-img-element': 'warn',
+    },
+  },
+
+  // TypeScript-файлы
   {
     ...reactRecommended,
     ...jsxRuntime,
     files: ['**/*.{ts,tsx}'],
     languageOptions: {
+      globals: {
+        React: 'readonly', // Разрешаем использовать React без импорта
+        JSX: 'readonly', // Если используется TSX
+        ...globals.browser,
+        ...globals.es2021,
+        ...globals.node, // Если есть серверный код
+      },
       parser: typescriptParser,
       parserOptions: {
         project: './tsconfig.json',
+        tsconfigRootDir: import.meta.dirname, // Для корректного пути к tsconfig.json
       },
     },
     settings: {
@@ -29,13 +50,14 @@ export default [
     },
   },
 
-  // Конфигурация для JavaScript файлов
+  // JavaScript-файлы
   {
     files: ['**/*.{js,jsx}'],
     languageOptions: {
       globals: {
         ...globals.browser,
         ...globals.es2021,
+        ...globals.node, // Если есть серверный код
       },
       parserOptions: {
         ecmaVersion: 'latest',
@@ -47,7 +69,7 @@ export default [
     },
   },
 
-  // Общие правила для всех файлов
+  // Общие правила
   {
     plugins: {
       'react-hooks': reactHooks,
@@ -56,33 +78,48 @@ export default [
       prettier: prettierPlugin,
     },
     rules: {
+      // React & Hooks
       'react-hooks/rules-of-hooks': 'error',
       'react-hooks/exhaustive-deps': 'warn',
-      '@typescript-eslint/no-unused-vars': 'warn',
+      'react/react-in-jsx-scope': 'off',
+      'react/jsx-uses-react': 'off',
+
+      // TypeScript
+      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
       '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/consistent-type-imports': 'error', // Обязательно для Next.js
+
+      // Unicorn
       'unicorn/filename-case': [
         'error',
         {
           case: 'kebabCase',
           ignore: ['\\.(test|spec)\\.(js|jsx|ts|tsx)$', '^[A-Z]+\\.(js|jsx|ts|tsx)$'],
         },
       ],
+
+      // Code style (выключено, так как Prettier управляет этим)
       'prettier/prettier': 'error',
-      'react/react-in-jsx-scope': 'off',
-      'react/jsx-uses-react': 'off',
-      'no-unused-vars': 'warn',
-      'no-console': 'warn',
-      'no-debugger': 'error',
-      quotes: ['error', 'single'],
-      semi: ['error', 'always'],
-      indent: ['error', 2],
       'arrow-body-style': 'off',
       'prefer-arrow-callback': 'off',
+
+      // Безопасность
+      'no-console': ['warn', { allow: ['warn', 'error'] }],
+      'no-debugger': 'error',
     },
   },
 
-  // Игнорирование конфигурационных файлов
+  // Игнорируемые файлы
   {
-    ignores: ['**/*.config.js', '**/*.rc.js', '.prettierrc.js', '.eslintrc.js'],
+    ignores: [
+      'styled-system/**/*.mjs',
+      'postcss.config.cjs',
+      '.prettierrc.js',
+      '**/*.config.js',
+      '**/*.config.mjs',
+      '.next/**',
+      'node_modules/**',
+      'dist/**',
+    ],
   },
 ];

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.mjs

@@ -0,0 +1,15 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    typedRoutes: true, // Типизированные маршруты (Next.js 14)
+    optimizePackageImports: ['@pandacss/dev'],
+  },
+  eslint: {
+    dirs: ['src'], // Проверять только src/
+  },
+  images: {
+    formats: ['image/avif', 'image/webp'], // Оптимизация изображений
+  },
+};
+
+export default nextConfig;