solution

.env

@@ -1 +1 @@
-ESLINT_NO_DEV_ERRORS=true
+ESLINT_NO_DEV_ERRORS=true

.eslintrc.cjs

@@ -1,108 +1,108 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2024: true,
-  },
-  extends: [
-    'plugin:react/recommended',
-    "plugin:react-hooks/recommended",
-    'airbnb-typescript',
-    'plugin:@typescript-eslint/eslint-recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:prettier/recommended',
-    'plugin:cypress/recommended',
-  ],
-  overrides: [
-    {
-      'files': ['**/*.spec.jsx'],
-      'rules': {
-        'react/jsx-filename-extension': ['off'],
-      }
-    }
-  ],
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    ecmaFeatures: {
-      jsx: true,
-    },
-    ecmaVersion: 12,
-    project: './tsconfig.json',
-    sourceType: 'module',
-  },
-  plugins: [
-    'jsx-a11y',
-    'import',
-    'react-hooks',
-    '@typescript-eslint',
-    'prettier'
-  ],
-  rules: {
-    // JS
-    'semi': 'off',
-    '@typescript-eslint/semi': ['error', 'always'],
-    'prefer-const': 2,
-    curly: [2, 'all'],
-    'max-len': ['error', {
-      ignoreTemplateLiterals: true,
-      ignoreComments: true,
-    }],
-    'no-redeclare': [2, { builtinGlobals: true }],
-    'no-console': 2,
-    'operator-linebreak': 0,
-    'brace-style': [2, '1tbs'],
-    'arrow-body-style': 0,
-    'arrow-parens': 0,
-    'no-param-reassign': [2, { props: true }],
-    'padding-line-between-statements': [
-      2,
-      { blankLine: 'always', prev: '*', next: 'return' },
-      { blankLine: 'always', prev: ['const', 'let', 'var'], next: '*' },
-      { blankLine: 'any', prev: ['const', 'let', 'var'], next: ['const', 'let', 'var'] },
-      { blankLine: 'always', prev: 'directive', next: '*' },
-      { blankLine: 'always', prev: 'block-like', next: '*' },
-    ],
-    'implicit-arrow-linebreak:': 0,
-
-    // React
-    'react/prop-types': 0,
-    'react/require-default-props': 0,
-    'import/prefer-default-export': 0,
-    'standard/no-callback-literal': 0,
-    'react/jsx-filename-extension': [1, { extensions: ['.tsx'] }],
-    'react/destructuring-assignment': 0,
-    'react/jsx-props-no-spreading': 0,
-    'react/state-in-constructor': [2, 'never'],
-    'react-hooks/rules-of-hooks': 2,
-    'jsx-a11y/label-has-associated-control': ["error", {
-      assert: "either",
-    }],
-    'jsx-a11y/label-has-for': [2, {
-      components: ['Label'],
-      required: {
-        some: ['id', 'nesting'],
-      },
-      allowChildren: true,
-    }],
-    'react/jsx-uses-react': 'off',
-    'react/react-in-jsx-scope': 'off',
-
-    // Typescript
-    '@typescript-eslint/explicit-function-return-type': 'off',
-    '@typescript-eslint/explicit-module-boundary-types': 'off',
-    '@typescript-eslint/no-unused-vars': ['error'],
-    '@typescript-eslint/indent': ['error', 2],
-    '@typescript-eslint/ban-types': ['error', {
-        extendDefaults: true,
-        types: {
-          '{}': false,
-        },
-      },
-    ],
-  },
-  ignorePatterns: ['dist', '.eslintrc.cjs', 'vite.config.ts', 'src/vite-env.d.ts', 'cypress'],
-  settings: {
-    react: {
-      version: 'detect',
-    },
-  },
-};
+module.exports = {
+  env: {
+    browser: true,
+    es2024: true,
+  },
+  extends: [
+    'plugin:react/recommended',
+    "plugin:react-hooks/recommended",
+    'airbnb-typescript',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+    'plugin:cypress/recommended',
+  ],
+  overrides: [
+    {
+      'files': ['**/*.spec.jsx'],
+      'rules': {
+        'react/jsx-filename-extension': ['off'],
+      }
+    }
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 12,
+    project: './tsconfig.json',
+    sourceType: 'module',
+  },
+  plugins: [
+    'jsx-a11y',
+    'import',
+    'react-hooks',
+    '@typescript-eslint',
+    'prettier'
+  ],
+  rules: {
+    // JS
+    'semi': 'off',
+    '@typescript-eslint/semi': ['error', 'always'],
+    'prefer-const': 2,
+    curly: [2, 'all'],
+    'max-len': ['error', {
+      ignoreTemplateLiterals: true,
+      ignoreComments: true,
+    }],
+    'no-redeclare': [2, { builtinGlobals: true }],
+    'no-console': 2,
+    'operator-linebreak': 0,
+    'brace-style': [2, '1tbs'],
+    'arrow-body-style': 0,
+    'arrow-parens': 0,
+    'no-param-reassign': [2, { props: true }],
+    'padding-line-between-statements': [
+      2,
+      { blankLine: 'always', prev: '*', next: 'return' },
+      { blankLine: 'always', prev: ['const', 'let', 'var'], next: '*' },
+      { blankLine: 'any', prev: ['const', 'let', 'var'], next: ['const', 'let', 'var'] },
+      { blankLine: 'always', prev: 'directive', next: '*' },
+      { blankLine: 'always', prev: 'block-like', next: '*' },
+    ],
+    'implicit-arrow-linebreak:': 0,
+
+    // React
+    'react/prop-types': 0,
+    'react/require-default-props': 0,
+    'import/prefer-default-export': 0,
+    'standard/no-callback-literal': 0,
+    'react/jsx-filename-extension': [1, { extensions: ['.tsx'] }],
+    'react/destructuring-assignment': 0,
+    'react/jsx-props-no-spreading': 0,
+    'react/state-in-constructor': [2, 'never'],
+    'react-hooks/rules-of-hooks': 2,
+    'jsx-a11y/label-has-associated-control': ["error", {
+      assert: "either",
+    }],
+    'jsx-a11y/label-has-for': [2, {
+      components: ['Label'],
+      required: {
+        some: ['id', 'nesting'],
+      },
+      allowChildren: true,
+    }],
+    'react/jsx-uses-react': 'off',
+    'react/react-in-jsx-scope': 'off',
+
+    // Typescript
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-unused-vars': ['error'],
+    '@typescript-eslint/indent': ['error', 2],
+    '@typescript-eslint/ban-types': ['error', {
+        extendDefaults: true,
+        types: {
+          '{}': false,
+        },
+      },
+    ],
+  },
+  ignorePatterns: ['dist', '.eslintrc.cjs', 'vite.config.ts', 'src/vite-env.d.ts', 'cypress'],
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+};

.github/workflows/lint.yml

@@ -1,23 +1,23 @@
-name: Lint
-
-on:
-  pull_request:
-    branches: [ master ]
-
-jobs:
-  run_linter:
-
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [20.x]
-
-    steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
-        with:
-          node-version: ${{ matrix.node-version }}
-      - run: npm install
-      - run: npm run lint
+name: Lint
+
+on:
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  run_linter:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm install
+      - run: npm run lint

.github/workflows/test.yml

@@ -14,16 +14,16 @@ jobs:
         node-version: [20.x]
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
       - run: npm install
-      - run: npm test -- -l
+      - run: npm test --
       - name: Upload tests report(cypress mochaawesome merged HTML report)
         if: ${{ always() }}
         uses: actions/upload-artifact@v4
         with:
           name: report
-          path: reports
+          path: raw_reports

.prettierignore

@@ -1,2 +1,2 @@
-/node_modules
-/build
+/node_modules
+/build

.prettierrc

@@ -1,11 +1,11 @@
-{
-  "arrowParens": "avoid",
-  "singleQuote": true,
-  "tabWidth": 2,
-  "trailingComma": "all",
-  "jsxSingleQuote": false,
-  "printWidth": 80,
-  "semi": true,
-  "bracketSpacing": true,
-  "bracketSameLine": false
-}
+{
+  "arrowParens": "avoid",
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "jsxSingleQuote": false,
+  "printWidth": 80,
+  "semi": true,
+  "bracketSpacing": true,
+  "bracketSameLine": false
+}

.stylelintignore

@@ -1 +1 @@
-/build
+/build

.stylelintrc.js

@@ -1,4 +1,4 @@
-module.exports = {
-  extends: "@mate-academy/stylelint-config",
-  rules: {}
-};
+module.exports = {
+  extends: "@mate-academy/stylelint-config",
+  rules: {}
+};

README.md

@@ -18,7 +18,7 @@ that will suggest people matching an entered text.
 - Install Prettier Extention and use this [VSCode settings](https://mate-academy.github.io/fe-program/tools/vscode/settings.json) to enable format on save.
 - Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline).
 - Use the [React TypeScript cheat sheet](https://mate-academy.github.io/fe-program/js/extra/react-typescript).
-- Replace `<your_account>` with your Github username in the [DEMO LINK](https://<your_account>.github.io/react_autocomplete/) and add it to the PR description.
+- Replace `<your_account>` with your Github username in the [DEMO LINK](https://danf4691.github.io/react_autocomplete/) and add it to the PR description.
 - Don't remove the `data-qa` attributes. It is required for tests.
 
 ## Troubleshooting

checklist.md

@@ -1,4 +1,4 @@
-- make sure that filter won't be called if user enred spaces only;
-- don't interact with DOM directly, use React as much as possible;
-- don't generate key on render ([here](https://medium.com/blackrock-engineering/5-common-mistakes-with-keys-in-react-b86e82020052) is why)
-- follow [these](https://medium.com/javascript-in-plain-english/handy-naming-conventions-for-event-handler-functions-props-in-react-fc1cbb791364) naming conventions for methods
+- make sure that filter won't be called if user enred spaces only;
+- don't interact with DOM directly, use React as much as possible;
+- don't generate key on render ([here](https://medium.com/blackrock-engineering/5-common-mistakes-with-keys-in-react-b86e82020052) is why)
+- follow [these](https://medium.com/javascript-in-plain-english/handy-naming-conventions-for-event-handler-functions-props-in-react-fc1cbb791364) naming conventions for methods

cypress.config.ts

@@ -1,26 +1,26 @@
-const { defineConfig } = require('cypress');
-
-module.exports = defineConfig({
-  e2e: {
-    baseUrl: 'http://localhost:3000',
-    specPattern: 'cypress/integration/**/*.spec.{js,ts,jsx,tsx}',
-  },
-  video: true,
-  viewportHeight: 1920,
-  viewportWidth: 1080,
-  screenshotOnRunFailure: true,
-  reporter: 'mochawesome',
-  reporterOptions: {
-    reportDir: 'raw_reports',
-    overwrite: false,
-    html: false,
-    json: true,
-  },
-  component: {
-    specPattern: 'src/**/*.spec.{js,ts,jsx,tsx}',
-    devServer: {
-      framework: 'react',
-      bundler: 'vite',
-    },
-  },
-});
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+    specPattern: 'cypress/integration/**/*.spec.{js,ts,jsx,tsx}',
+  },
+  video: true,
+  viewportHeight: 1920,
+  viewportWidth: 1080,
+  screenshotOnRunFailure: true,
+  reporter: 'mochawesome',
+  reporterOptions: {
+    reportDir: 'raw_reports',
+    overwrite: false,
+    html: false,
+    json: true,
+  },
+  component: {
+    specPattern: 'src/**/*.spec.{js,ts,jsx,tsx}',
+    devServer: {
+      framework: 'react',
+      bundler: 'vite',
+    },
+  },
+});