Fs jan24 solution preparation

.eslintrc.js

@@ -1,12 +1,19 @@
 module.exports = {
-  extends: ['@mate-academy/eslint-config-react-typescript', 'plugin:cypress/recommended'],
+  extends: ['@mate-academy/eslint-config-react', 'plugin:cypress/recommended'],
   rules: {
+    'import/no-extraneous-dependencies': ['error', {
+      devDependencies: true,
+      optionalDependencies: false,
+      peerDependencies: false,
+    }],
+    'react/prop-types': 0,
     'max-len': ['error', {
       ignoreTemplateLiterals: true,
       ignoreComments: true,
     }],
-    'jsx-a11y/label-has-associated-control': ["error", {
-      assert: "either",
+    'jsx-a11y/label-has-associated-control': ['error', {
+      assert: 'either',
     }],
+    'jsx-a11y/control-has-associated-label': 'off',
   },
 };

package.json

@@ -6,25 +6,25 @@
   "author": "Mate Academy",
   "license": "GPL-3.0",
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^6.1.2",
+    "@cypress/react": "^5.12.4",
+    "@fortawesome/fontawesome-free": "^6.2.0",
     "bulma": "^0.9.4",
-    "classnames": "^2.3.1",
-    "postcss": "^8.4.16",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1"
+    "classnames": "^2.3.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "^4.0.3"
   },
   "devDependencies": {
-    "@cypress/react": "^5.12.4",
     "@cypress/webpack-dev-server": "^1.8.4",
     "@mate-academy/cypress-tools": "^1.0.4",
-    "@mate-academy/eslint-config-react-typescript": "^1.0.11",
-    "@mate-academy/scripts": "^1.2.8",
+    "@mate-academy/eslint-config-react": "^0.0.11",
+    "@mate-academy/eslint-config-react-typescript": "^1.0.12",
+    "@mate-academy/scripts": "^1.7.3",
     "@mate-academy/students-ts-config": "*",
-    "@mate-academy/stylelint-config": "*",
-    "@types/node": "^17.0.45",
-    "@types/react": "^18.0.15",
-    "@types/react-dom": "^18.0.6",
+    "@mate-academy/stylelint-config": "^0.0.11",
+    "@types/node": "^17.0.23",
+    "@types/react": "^17.0.43",
+    "@types/react-dom": "^17.0.14",
     "cypress": "^9.5.3",
     "eslint": "^7.32.0",
     "eslint-plugin-cypress": "^2.11.2",
@@ -33,7 +33,8 @@
     "mochawesome-merge": "^4.2.0",
     "mochawesome-report-generator": "^6.2.0",
     "node-sass": "^6.0.1",
-    "stylelint": "^13.13.1",
+    "postcss": "^8.4.12",
+    "stylelint": "^15.11.0",
     "typescript": "^4.6.3"
   },
   "scripts": {
@@ -61,6 +62,11 @@
     ]
   },
   "mateAcademy": {
-    "projectType": "reactTypescript"
+    "_comment": "Replace 'react' with 'reactTypescript' if you want use React with Typescript",
+    "projectType": "react",
+    "tests": {
+      "_comment": "Add `cypressComponents: true` to enable component tests",
+      "cypress": true
+    }
   }
 }

src/App.jsx

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+
+import '@fortawesome/fontawesome-free/css/all.css';
+import 'bulma/css/bulma.css';
+import './App.scss';
+
+import peopleFromServer from './people.json';
+
+// #region CustomUseState
+let currentValue;
+let initialized = false;
+
+function useState2(startValue) {
+  if (!initialized) {
+    currentValue = startValue;
+    initialized = true;
+  }
+
+  function setValue(newValue) {
+    if (currentValue === newValue) {
+      return;
+    }
+
+    currentValue = newValue;
+    // rerender component
+  }
+
+  return [currentValue, setValue];
+}
+// #endregion
+
+export function App() {
+  const [selectedPerson, setSelectedPerson] = useState(null);
+
+  return (
+    <div className="box">
+      <h1 className="title">People table</h1>
+
+      <table className="table is-striped is-narrow">
+        <caption>{selectedPerson?.name || 'No person selected'}</caption>
+
+        <thead>
+          <tr>
+            <th> </th>
+            <th>name</th>
+            <th>sex</th>
+            <th>born</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {peopleFromServer.map(person => (
+            <tr
+              key={person.slug}
+              className={person === selectedPerson
+                ? 'has-background-warning'
+                : ''}
+            >
+              <td>
+                <button
+                  type="button"
+                  className="button"
+                  onClick={() => {
+                    setSelectedPerson(person);
+                  }}
+                >
+                  +
+                </button>
+              </td>
+              <td>{person.name}</td>
+              <td>{person.sex}</td>
+              <td>{person.born}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

src/index.jsx

@@ -0,0 +1,7 @@
+import ReactDOM from 'react-dom';
+import { App } from './App';
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('root'),
+);