From 775150afafba3bab81fdbf70b8fc94b77edae59b Mon Sep 17 00:00:00 2001
From: Anna Zhuravleva <56927722+ansivgit@users.noreply.github.com>
Date: Thu, 25 Jul 2024 12:33:43 +0300
Subject: [PATCH] 423-fix: Add ESLint rules for formatting import-export long
 strings (#424)

* feat: add rules & plugin for import

* fix: autofix eslint issues

* fix: eslint config & fix eslint issues

* fix: line length

* fix: 423 - change VS code - ESLint settings
---
 .vscode/settings.json                          |  2 +-
 eslint.config.js                               | 18 +++++++++++++++---
 package-lock.json                              | 16 ++++++++++++++++
 package.json                                   |  2 ++
 .../scroll-to-hash/scroll-to-hash.test.tsx     |  4 +---
 src/app/services/api/index.ts                  |  9 ++++++++-
 .../hooks/use-data-by-name/use-data-by-name.ts |  4 +++-
 src/shared/hooks/use-title/use-title.test.tsx  |  3 ++-
 src/shared/ui/image/utils/convertToWebp.ts     |  3 ++-
 src/shared/ui/widget-title/widget-title.tsx    |  3 ++-
 src/widgets/about/about.data.ts                | 10 ++++++----
 src/widgets/community/ui/community.tsx         |  8 +++++++-
 src/widgets/courses-school/courses.test.tsx    |  9 ++++++++-
 src/widgets/courses/ui/courses.tsx             | 12 +++++++++---
 src/widgets/requirements/ui/requirements.tsx   |  4 ++--
 src/widgets/study-path/ui/stages/stages.tsx    |  4 +++-
 16 files changed, 87 insertions(+), 24 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 9530308c6..d18c4562d 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,5 +2,5 @@
   "editor.codeActionsOnSave": {
     "source.fixAll": "explicit"
   },
-  "eslint.experimental.useFlatConfig": true
+  "eslint.useFlatConfig": true
 }
diff --git a/eslint.config.js b/eslint.config.js
index 20a2b7d8c..33ffa80b1 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -5,6 +5,7 @@ import tsPlugin from '@typescript-eslint/eslint-plugin';
 import tsParser from '@typescript-eslint/parser';
 import cssImportOrder from 'eslint-plugin-css-import-order';
 import importPlugin from 'eslint-plugin-import';
+import importNewlines from 'eslint-plugin-import-newlines';
 import reactPlugin from 'eslint-plugin-react';
 import reactHooksPlugin from 'eslint-plugin-react-hooks';
 import reactRefresh from 'eslint-plugin-react-refresh';
@@ -64,6 +65,7 @@ export default [
       'vitest': vitestPlugin,
       'css-import-order': cssImportOrder,
       'sort-exports': sortExports,
+      'import-newlines': importNewlines,
       '@stylistic': stylistic,
     },
     settings: {
@@ -87,6 +89,7 @@ export default [
 
       'boundaries/element-types': 'warn',
       'no-undef': 'off',
+      'curly': 'error',
       'no-restricted-exports': [
         'warn',
         { 'restrictDefaultExports':
@@ -106,6 +109,15 @@ export default [
         { allowConstantExport: true },
       ],
 
+      'import-newlines/enforce': [
+        'error',
+        {
+          'items': 5,
+          'max-len': 100,
+          'semi': true,
+        },
+      ],
+
       'import/prefer-default-export': 'off',
       'import/no-default-export': 'error',
       'import/no-unresolved': ['error', { commonjs: true, amd: true }],
@@ -246,13 +258,13 @@ export default [
       '@stylistic/max-len': [
         'error',
         {
-          'code': 120,
+          'code': 100,
           'tabWidth': 2,
-          'comments': 120,
-          'ignoreTrailingComments': true,
+          'ignoreComments': true,
           'ignoreUrls': true,
           'ignoreStrings': true,
           'ignoreTemplateLiterals': true,
+          "ignoreRegExpLiterals": true,
         },
       ],
     },
diff --git a/package-lock.json b/package-lock.json
index 00780e66d..75d96d023 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -41,6 +41,7 @@
         "eslint-import-resolver-typescript": "^3.6.1",
         "eslint-plugin-css-import-order": "^1.1.0",
         "eslint-plugin-import": "^2.29.1",
+        "eslint-plugin-import-newlines": "^1.4.0",
         "eslint-plugin-react": "^7.34.3",
         "eslint-plugin-react-hooks": "^4.6.2",
         "eslint-plugin-react-refresh": "^0.4.7",
@@ -5320,6 +5321,21 @@
         "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8"
       }
     },
+    "node_modules/eslint-plugin-import-newlines": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import-newlines/-/eslint-plugin-import-newlines-1.4.0.tgz",
+      "integrity": "sha512-+Cz1x2xBLtI9gJbmuYEpvY7F8K75wskBmJ7rk4VRObIJo+jklUJaejFJgtnWeL0dCFWabGEkhausrikXaNbtoQ==",
+      "dev": true,
+      "bin": {
+        "import-linter": "lib/index.js"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "eslint": ">=6.0.0"
+      }
+    },
     "node_modules/eslint-plugin-import/node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
diff --git a/package.json b/package.json
index fb1c1aad7..90f5a052b 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "stylelint": "npx stylelint \"**/*.scss\"",
     "stylelint:fix": "npx stylelint \"**/*.scss\" --fix",
     "lint": "npx eslint . --report-unused-disable-directives --max-warnings 400",
+    "lint:err": "npx eslint . --quiet",
     "lint:fix": "npx eslint . --fix --report-unused-disable-directives --max-warnings 400",
     "preview": "vite preview",
     "test": "vitest --run",
@@ -53,6 +54,7 @@
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-css-import-order": "^1.1.0",
     "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-import-newlines": "^1.4.0",
     "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
diff --git a/src/app/layouts/base-layout/components/scroll-to-hash/scroll-to-hash.test.tsx b/src/app/layouts/base-layout/components/scroll-to-hash/scroll-to-hash.test.tsx
index 3585816e7..083f36f4b 100644
--- a/src/app/layouts/base-layout/components/scroll-to-hash/scroll-to-hash.test.tsx
+++ b/src/app/layouts/base-layout/components/scroll-to-hash/scroll-to-hash.test.tsx
@@ -1,8 +1,6 @@
 import { render, waitFor } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
-import {
-  beforeEach, describe, expect, it, vi,
-} from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { ScrollToHashElement } from './scroll-to-hash';
 import { ROUTES } from '@/app/const';
 
diff --git a/src/app/services/api/index.ts b/src/app/services/api/index.ts
index af081bf1c..207d58870 100644
--- a/src/app/services/api/index.ts
+++ b/src/app/services/api/index.ts
@@ -1,4 +1,11 @@
-import { angularPath, awsDevPath, courses, coursesPath, jsPath, jsPathRu } from '../data';
+import {
+  angularPath,
+  awsDevPath,
+  courses,
+  coursesPath,
+  jsPath,
+  jsPathRu,
+} from '../data';
 import { type DataMap } from '../data';
 
 const dataProviders: DataMap = {
diff --git a/src/shared/hooks/use-data-by-name/use-data-by-name.ts b/src/shared/hooks/use-data-by-name/use-data-by-name.ts
index f5cc7c5f0..610721280 100644
--- a/src/shared/hooks/use-data-by-name/use-data-by-name.ts
+++ b/src/shared/hooks/use-data-by-name/use-data-by-name.ts
@@ -18,7 +18,9 @@ export const useDataByName = <K extends keyof DataMap>(
 
         setData(fetchedData as DataMap[K]);
       } catch (error) {
-        if (error instanceof Error) setError(error);
+        if (error instanceof Error) {
+          setError(error);
+        }
       } finally {
         setLoading(false);
       }
diff --git a/src/shared/hooks/use-title/use-title.test.tsx b/src/shared/hooks/use-title/use-title.test.tsx
index a4c859738..10c0b5183 100644
--- a/src/shared/hooks/use-title/use-title.test.tsx
+++ b/src/shared/hooks/use-title/use-title.test.tsx
@@ -25,7 +25,8 @@ describe('useTitle', () => {
 
     document.title = originalTitle;
 
-    const { rerender, unmount } = renderHook((title) => useTitle(title), { initialProps: newTitle });
+    const { rerender, unmount } = renderHook((title) =>
+      useTitle(title), { initialProps: newTitle });
 
     expect(document.title).toBe(newTitle);
 
diff --git a/src/shared/ui/image/utils/convertToWebp.ts b/src/shared/ui/image/utils/convertToWebp.ts
index 72355c64f..4c3e6d97a 100644
--- a/src/shared/ui/image/utils/convertToWebp.ts
+++ b/src/shared/ui/image/utils/convertToWebp.ts
@@ -6,8 +6,9 @@ const convertToWebp = (src: string) => {
     || srcLowCase.includes('base64')
     || srcLowCase.endsWith('.svg')
     || srcLowCase.endsWith('.webp')
-  )
+  ) {
     return src;
+  }
   return `${src.slice(0, src.lastIndexOf('.'))}.webp`;
 };
 
diff --git a/src/shared/ui/widget-title/widget-title.tsx b/src/shared/ui/widget-title/widget-title.tsx
index fdb777f40..20bb62603 100644
--- a/src/shared/ui/widget-title/widget-title.tsx
+++ b/src/shared/ui/widget-title/widget-title.tsx
@@ -4,7 +4,8 @@ import classNames from 'classnames/bind';
 
 import styles from './widget-title.module.scss';
 
-type WidgetTitleProps = HTMLAttributes<HTMLHeadingElement> & VariantProps<typeof widgetTitleVariants>;
+type WidgetTitleProps = HTMLAttributes<HTMLHeadingElement>
+  & VariantProps<typeof widgetTitleVariants>;
 
 export const cx = classNames.bind(styles);
 
diff --git a/src/widgets/about/about.data.ts b/src/widgets/about/about.data.ts
index 3ad1db779..3595ed268 100644
--- a/src/widgets/about/about.data.ts
+++ b/src/widgets/about/about.data.ts
@@ -46,10 +46,12 @@ const angularNodejsAwsFundamentals: (course: string) => AboutInfo[] = () => [
 ];
 
 const awsCloudDeveloper: AboutInfo[] = angularNodejsAwsFundamentals('aws cloud dev').map((item) => {
-  if (item.id === 3) return {
-    ...item,
-    info: 'Duration: 10 weeks.',
-  };
+  if (item.id === 3) {
+    return {
+      ...item,
+      info: 'Duration: 10 weeks.',
+    };
+  }
   return item;
 });
 
diff --git a/src/widgets/community/ui/community.tsx b/src/widgets/community/ui/community.tsx
index b0e9532e2..5ef892d38 100644
--- a/src/widgets/community/ui/community.tsx
+++ b/src/widgets/community/ui/community.tsx
@@ -1,5 +1,11 @@
 import image from '@/shared/assets/welcome.webp';
-import { FacebookIcon, InstagramIcon, LinkedInIcon, TelegramIcon, YouTubeIcon } from '@/shared/icons';
+import {
+  FacebookIcon,
+  InstagramIcon,
+  LinkedInIcon,
+  TelegramIcon,
+  YouTubeIcon,
+} from '@/shared/icons';
 import Image from '@/shared/ui/image';
 import { SocialMedia, SocialMediaProps } from '@/shared/ui/social-media';
 import { Subtitle } from '@/shared/ui/subtitle';
diff --git a/src/widgets/courses-school/courses.test.tsx b/src/widgets/courses-school/courses.test.tsx
index 6039af373..d1aa9f31c 100644
--- a/src/widgets/courses-school/courses.test.tsx
+++ b/src/widgets/courses-school/courses.test.tsx
@@ -1,5 +1,12 @@
 import { screen } from '@testing-library/react';
-import { Mock, beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+  Mock,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi,
+} from 'vitest';
 import { Courses } from './ui/courses';
 import { ROUTES } from '@/app/const';
 
diff --git a/src/widgets/courses/ui/courses.tsx b/src/widgets/courses/ui/courses.tsx
index af5d69f46..da8c5a268 100644
--- a/src/widgets/courses/ui/courses.tsx
+++ b/src/widgets/courses/ui/courses.tsx
@@ -11,9 +11,15 @@ import './courses.scss';
 export const Courses = () => {
   const { data: courses, loading, error } = useDataByName('courses');
 
-  if (loading) return <h2>Loading...</h2>;
-  if (error) return <h2>{error.message}</h2>;
-  if (!courses || courses.length === 0) return null;
+  if (loading) {
+    return <h2>Loading...</h2>;
+  }
+  if (error) {
+    return <h2>{error.message}</h2>;
+  }
+  if (!courses || courses.length === 0) {
+    return null;
+  }
 
   const sortParams = {
     dataList: courses.filter(isCourse),
diff --git a/src/widgets/requirements/ui/requirements.tsx b/src/widgets/requirements/ui/requirements.tsx
index e8c4762fb..b73af5f91 100644
--- a/src/widgets/requirements/ui/requirements.tsx
+++ b/src/widgets/requirements/ui/requirements.tsx
@@ -13,8 +13,8 @@ export const Requirements = () => {
             <div className="title">Requirements for mentors</div>
             <ul className="description">
               <li>
-                Desire to help students. If you&apos;ve been working with JS/TS in production for more
-                than 6 months, then that&apos;s great.
+                Desire to help students. If you&apos;ve been working with JS/TS
+                in production for more than 6 months, then that&apos;s great.
               </li>
               <li>Desire to mentor 2 to 6 students online or in person</li>
               <li>Ability to spend 3 to 5 hours per week</li>
diff --git a/src/widgets/study-path/ui/stages/stages.tsx b/src/widgets/study-path/ui/stages/stages.tsx
index 69bea40c5..ac7632d9c 100644
--- a/src/widgets/study-path/ui/stages/stages.tsx
+++ b/src/widgets/study-path/ui/stages/stages.tsx
@@ -8,7 +8,9 @@ export interface StagesProps {
 }
 
 export const Stages = ({ stages, marked }: StagesProps) => {
-  if (stages === null || stages.length === 0) return null;
+  if (stages === null || stages.length === 0) {
+    return null;
+  }
 
   return (
     <div className="stages">