chore: fix ESLint issues after version upgrade

- class-methods-use-this required DatePicker update convertDateToState to be static
- no-console was disabled on tests and stories
- jsx-a11y/label-has-associated-control removed duplicate rule
- prettier/prettier auto-fixed many components due to Prettier upgrade
- react/function-component-definition auto-fixed many components
- react/jsx-fragments auto-fixed Select.spec with <>
- react/jsx-no-useless-fragment auto-fixed Select to remove useless Fragment
- react/jsx-props-no-spreading was turned off
- react/no-unused-prop-types was ignored on Tree and useForkRef
- react/static-property-placement was set up to our use case

Author: WesSouza

.eslintrc.js

@@ -1,6 +1,6 @@
 module.exports = {
-  extends: ['airbnb', 'plugin:prettier/recommended', 'prettier/react'],
-  parser: 'babel-eslint',
+  extends: ['airbnb', 'plugin:prettier/recommended'],
+  parser: '@babel/eslint-parser',
   plugins: ['react', 'prettier'],
   env: {
     browser: true,
@@ -10,19 +10,21 @@ module.exports = {
   rules: {
     'import/no-unresolved': ['error', { ignore: ['react95'] }],
     'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
-    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
-    'jsx-a11y/label-has-associated-control': [
-      'error',
-      {
-        required: {
-          some: ['nesting', 'id']
-        }
-      }
-    ],
     'jsx-a11y/label-has-associated-control': ['error', { assert: 'either' }],
     'jsx-a11y/label-has-for': 'off',
     'prettier/prettier': 'error',
+    'react/forbid-prop-types': 'off',
+    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
+    'react/jsx-props-no-spreading': 'off',
     'react/no-array-index-key': 'off',
-    'react/forbid-prop-types': 'off'
-  }
+    'react/static-property-placement': ['error', 'static public field']
+  },
+  overrides: [
+    {
+      files: ['*.spec.@(js|jsx)', '*.stories.@(js|jsx)'],
+      rules: {
+        'no-console': 'off'
+      }
+    }
+  ]
 };

package-lock.json

@@ -56,6 +56,7 @@
   "devDependencies": {
     "@babel/cli": "^7.18.9",
     "@babel/core": "^7.18.9",
+    "@babel/eslint-parser": "^7.18.9",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-transform-runtime": "^7.18.9",
     "@babel/preset-env": "^7.18.9",
@@ -66,7 +67,6 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.5",
     "@types/jest": "^28.1.6",
-    "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.5",
     "babel-plugin-styled-components": "^2.0.7",
     "commitizen": "^4.2.5",

package.json

@@ -14,15 +14,17 @@ export default {
   decorators: [story => <Wrapper>{story()}</Wrapper>]
 };
 
-export const Default = () => (
-  <h1>
-    Everybody likes
-    <Anchor href='https://expensive.toys' target='_blank'>
-      {' '}
-      https://expensive.toys
-    </Anchor>
-  </h1>
-);
+export function Default() {
+  return (
+    <h1>
+      Everybody likes
+      <Anchor href='https://expensive.toys' target='_blank'>
+        {' '}
+        https://expensive.toys
+      </Anchor>
+    </h1>
+  );
+}
 
 Default.story = {
   name: 'default'

src/Anchor/Anchor.stories.js

@@ -21,7 +21,7 @@ const Wrapper = styled.div`
   background: ${({ theme }) => theme.desktopBackground};
 `;
 
-export const Default = () => {
+export function Default() {
   const [open, setOpen] = React.useState(false);
 
   return (
@@ -76,7 +76,7 @@ export const Default = () => {
       </Toolbar>
     </AppBar>
   );
-};
+}
 
 Default.story = {
   name: 'default'

src/AppBar/AppBar.stories.js

@@ -19,20 +19,22 @@ export default {
 const imageSrc =
   'https://sphoto.nasza-klasa.pl/33278012/1/square/2658174fbd.jpeg?v=1';
 
-export const Default = () => (
-  <div style={{ display: 'inline-flex' }}>
-    <Avatar size={50} src={imageSrc} />
-    <Avatar noBorder size={50} src={imageSrc} />
-    <Avatar size={50} style={{ background: 'palevioletred' }}>
-      AK
-    </Avatar>
-    <Avatar square size={50}>
-      <span role='img' aria-label='🚀'>
-        🚀
-      </span>
-    </Avatar>
-  </div>
-);
+export function Default() {
+  return (
+    <div style={{ display: 'inline-flex' }}>
+      <Avatar size={50} src={imageSrc} />
+      <Avatar noBorder size={50} src={imageSrc} />
+      <Avatar size={50} style={{ background: 'palevioletred' }}>
+        AK
+      </Avatar>
+      <Avatar square size={50}>
+        <span role='img' aria-label='🚀'>
+          🚀
+        </span>
+      </Avatar>
+    </div>
+  );
+}
 
 Default.story = {
   name: 'default'

src/Avatar/Avatar.stories.js

@@ -13,18 +13,20 @@ const Wrapper = styled.div`
   background: ${({ theme }) => theme.desktopBackground};
 `;
 
-export const Default = () => (
-  <AppBar>
-    <Toolbar>
-      <Bar size={35} />
-      <Button variant='menu'>Edit</Button>
-      <Button variant='menu' disabled>
-        Save
-      </Button>
-      <Bar size={35} />
-    </Toolbar>
-  </AppBar>
-);
+export function Default() {
+  return (
+    <AppBar>
+      <Toolbar>
+        <Bar size={35} />
+        <Button variant='menu'>Edit</Button>
+        <Button variant='menu' disabled>
+          Save
+        </Button>
+        <Bar size={35} />
+      </Toolbar>
+    </AppBar>
+  );
+}
 
 Default.story = {
   name: 'default'

src/Bar/Bar.stories.js

@@ -85,11 +85,12 @@ export const StyledButton = styled.button`
           ${createBoxStyles()};
           border: none;
           ${isDisabled && createDisabledTextStyles()}
-          ${active &&
-            createHatchedBackground({
-              mainColor: theme.material,
-              secondaryColor: theme.borderLightest
-            })}
+          ${active
+            ? createHatchedBackground({
+                mainColor: theme.material,
+                secondaryColor: theme.borderLightest
+              })
+            : ''}
           &:before {
             box-sizing: border-box;
             content: '';