Phone catalog

.eslintrc.cjs

@@ -2,10 +2,12 @@ module.exports = {
   env: {
     browser: true,
     es2024: true,
+    node: true,
   },
   extends: [
+    'eslint:recommended',
     'plugin:react/recommended',
-    "plugin:react-hooks/recommended",
+    'plugin:react-hooks/recommended',
     'airbnb-typescript',
     'plugin:@typescript-eslint/eslint-recommended',
     'plugin:@typescript-eslint/recommended',
@@ -14,11 +16,11 @@ module.exports = {
   ],
   overrides: [
     {
-      'files': ['**/*.spec.jsx'],
-      'rules': {
+      files: ['**/*.spec.jsx'],
+      rules: {
         'react/jsx-filename-extension': ['off'],
-      }
-    }
+      },
+    },
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
@@ -30,22 +32,25 @@ module.exports = {
     sourceType: 'module',
   },
   plugins: [
+    'react',
     'jsx-a11y',
     'import',
     'react-hooks',
     '@typescript-eslint',
-    'prettier'
+    'prettier',
   ],
   rules: {
-    // JS
-    'semi': 'off',
+    semi: 'off',
     '@typescript-eslint/semi': ['error', 'always'],
     'prefer-const': 2,
     curly: [2, 'all'],
-    'max-len': ['error', {
-      ignoreTemplateLiterals: true,
-      ignoreComments: true,
-    }],
+    'max-len': [
+      'error',
+      {
+        ignoreTemplateLiterals: true,
+        ignoreComments: true,
+      },
+    ],
     'no-redeclare': [2, { builtinGlobals: true }],
     'no-console': 2,
     'operator-linebreak': 0,
@@ -57,13 +62,16 @@ module.exports = {
       2,
       { blankLine: 'always', prev: '*', next: 'return' },
       { blankLine: 'always', prev: ['const', 'let', 'var'], next: '*' },
-      { blankLine: 'any', prev: ['const', 'let', 'var'], next: ['const', 'let', 'var'] },
+      {
+        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,
@@ -73,34 +81,54 @@ module.exports = {
     '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'],
+    'jsx-a11y/label-has-associated-control': [
+      'error',
+      {
+        assert: 'either',
       },
-      allowChildren: true,
-    }],
+    ],
+    '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', {
+    '@typescript-eslint/ban-types': [
+      'error',
+      {
         extendDefaults: true,
         types: {
           '{}': false,
         },
       },
     ],
   },
-  ignorePatterns: ['dist', '.eslintrc.cjs', 'vite.config.ts', 'src/vite-env.d.ts', 'cypress'],
+  ignorePatterns: [
+    'dist',
+    '.eslintrc.cjs',
+    'vite.config.ts',
+    'src/vite-env.d.ts',
+    'cypress',
+  ],
   settings: {
+    'import/extensions': ['.js', '.jsx', '.ts', '.tsx'],
+    'import/parsers': {
+      '@typescript-eslint/parser': ['.ts', '.tsx'],
+    },
+    'import/resolver': {
+      typescript: {},
+    },
     react: {
       version: 'detect',
     },

.eslintrc.js

@@ -0,0 +1,34 @@
+module.exports = {
+  extends: [
+    '@mate-academy/eslint-config-react-typescript',
+    'plugin:cypress/recommended',
+    'prettier',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 12,
+    project: './tsconfig.json',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  plugins: ['react', 'react-hooks', '@typescript-eslint', 'prettier'],
+  overrides: [
+    {
+      files: ['src/**/*.ts', 'src/**/*.tsx'],
+    },
+  ],
+  rules: {
+    'import/no-extraneous-dependencies': [
+      'error',
+      { devDependencies: ['**/*.test.js', '**/*.spec.js'] },
+    ],
+    'react/react-in-jsx-scope': 'off',
+  },
+};

.github/workflows/deploy.yml

@@ -0,0 +1,23 @@
+name: Github Page Deploy Workflow
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: '12.x'
+      - run: npm ci
+      - run: npm run build
+      - name: Deploy
+        uses: crazy-max/ghaction-github-pages@v1
+        with:
+          target_branch: gh-pages
+          build_dir: build
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.stylelintrc.js

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

README.md

@@ -2,11 +2,10 @@
 
 Implement the catalog with a shopping cart and favorites page according to one of the next designs:
 
-- [Original](https://www.figma.com/file/T5ttF21UnT6RRmCQQaZc6L/Phone-catalog-(V2)-Original)
-- [Original Dark](https://www.figma.com/file/BUusqCIMAWALqfBahnyIiH/Phone-catalog-(V2)-Original-Dark)
-- [Rounded Blue](https://www.figma.com/file/FRxncC4lfyhs6og1L6FGEU/Phone-catalog-(V2)-Rounded-Style-2?node-id=0%3A1)
-- [Rounded Purple](https://www.figma.com/file/xMK2Dy0mfBbJJSNctmOuLW/Phone-catalog-(V2)-Rounded-Style-1?node-id=0%3A1)
-- [Rounded Orange](https://www.figma.com/file/7JTa0q8n3dTSAyMNaA0u8o/Phone-catalog-(V2)-Rounded-Style-3?node-id=0%3A1)
+- [DEMO LINK](https://Galers.github.io/react_phone-catalog/)
+
+- [Original](<https://www.figma.com/file/T5ttF21UnT6RRmCQQaZc6L/Phone-catalog-(V2)-Original>)
+- [Original Dark](<https://www.figma.com/file/BUusqCIMAWALqfBahnyIiH/Phone-catalog-(V2)-Original-Dark>)
 
 You may also implement color theme switching!
 
@@ -82,7 +81,7 @@ Create `ProductDetailsPage` available at `/product/:productId`.
 2. Use `Loader` when fetching the product details.
 3. Show the details on the page:
    - Display the available colors from colorsAvailable and the capacities from capacityAvailable as radio inputs, allowing the selection of one value from the offered options;
-   - `About` section should contain just a description (without any subheaders);
+   - `About` section should contain just a description (without any subheadings);
    - Choose `Tech specs` you want to show.
 4. Add the ability to choose a picture.
 5. Implement `You may also like` block with products chosen randomly:
@@ -128,7 +127,7 @@ Create `Favorites` page with a `ProductsList` showing favorite products at `/fav
 1. Add `NotFoundPage` containing text `Page not found` for all the other URLs with the link to `HomePage`.
 2. Implement the `Product was not found` state for the `ProductDetailsPage`.
 
-## (*) Advanced tasks
+## (\*) Advanced tasks
 
 - Implement color theme switching!
 - Use [skeletons](https://freefrontend.com/css-skeleton-loadings/) to make loading more natural.

eslint.config.mjs

@@ -0,0 +1,24 @@
+import globals from 'globals';
+import pluginJs from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import pluginReact from 'eslint-plugin-react';
+
+export default [
+  { files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'] },
+  { files: ['**/*.js'], languageOptions: { sourceType: 'commonjs' } },
+  { languageOptions: { globals: globals.browser } },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    ...pluginReact.configs.flat.recommended,
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+    rules: {
+      ...pluginReact.configs.flat.recommended.rules,
+      'react/react-in-jsx-scope': 'off',
+    },
+  },
+];

index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Nice Gadgets</title>
   </head>
   <body>
     <div id="root"></div>