chore: require descriptions when ignoring eslint, upgrade exhaustive-…

…deps rule to error (contentful#1167) * feat: require descriptions when ignoring eslint, upgrade exhaustive-deps rule to error * fix: fix linting errors, update eslint and dependency versions * fix: removed old rte.jsx, updated caniuselite
upday · Jun 22, 2022 · d647b03 · d647b03
1 parent 6a5af47
commit d647b03
Show file tree

Hide file tree

Showing 71 changed files with 1,236 additions and 75 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -6,3 +6,4 @@ dist/
 build/
 cypress/plugins/
 cypress/support/
+.eslintrc.js
diff --git a/apps/entry-app-collapsible/package.json b/apps/entry-app-collapsible/package.json
@@ -39,7 +39,10 @@
     "@types/react-dom": "^17.0.7",
     "cross-env": "^7.0.3",
     "react-scripts": "4.0.3",
-    "typescript": "^4.3.3"
+    "typescript": "^4.3.3",
+    "babel-eslint": "^10.1.0",
+    "@typescript-eslint/parser": "^5.29.0",
+    "@typescript-eslint/eslint-plugin": "^5.29.0"
   },
   "browserslist": {
     "production": [

diff --git a/apps/markdown-app/package.json b/apps/markdown-app/package.json
@@ -33,7 +33,10 @@
     "@types/react-dom": "^17.0.8",
     "cross-env": "^7.0.3",
     "react-scripts": "4.0.3",
-    "typescript": "^4.3.4"
+    "typescript": "^4.3.4",
+    "babel-eslint": "^10.1.0",
+    "@typescript-eslint/parser": "^5.29.0",
+    "@typescript-eslint/eslint-plugin": "^5.29.0"
   },
   "browserslist": {
     "production": [

diff --git a/apps/multiple-references-app/package.json b/apps/multiple-references-app/package.json
@@ -32,7 +32,10 @@
     "@types/react-dom": "^17.0.8",
     "cross-env": "^7.0.3",
     "react-scripts": "4.0.3",
-    "typescript": "^4.3.4"
+    "typescript": "^4.3.4",
+    "babel-eslint": "^10.1.0",
+    "@typescript-eslint/parser": "^5.29.0",
+    "@typescript-eslint/eslint-plugin": "^5.29.0"
   },
   "browserslist": {
     "production": [

diff --git a/apps/rich-text-app/package.json b/apps/rich-text-app/package.json
@@ -46,7 +46,10 @@
     "@types/react-dom": "^17.0.8",
     "cross-env": "^7.0.3",
     "react-scripts": "4.0.3",
-    "typescript": "^4.3.4"
+    "typescript": "^4.3.4",
+    "babel-eslint": "^10.1.0",
+    "@typescript-eslint/parser": "^5.29.0",
+    "@typescript-eslint/eslint-plugin": "^5.29.0"
   },
   "homepage": "."
 }
diff --git a/apps/singleline-app/package.json b/apps/singleline-app/package.json
@@ -45,7 +45,10 @@
     "@types/react-dom": "^17.0.8",
     "cross-env": "^7.0.3",
     "react-scripts": "4.0.3",
-    "typescript": "^4.3.4"
+    "typescript": "^4.3.4",
+    "babel-eslint": "^10.1.0",
+    "@typescript-eslint/parser": "^5.29.0",
+    "@typescript-eslint/eslint-plugin": "^5.29.0"
   },
   "homepage": "."
 }
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.9.6",
+    "@babel/eslint-parser": "7.18.2",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
     "@babel/plugin-proposal-optional-chaining": "^7.9.0",
@@ -73,9 +74,11 @@
     "docz": "1.3.2",
     "docz-theme-default": "1.2.0",
     "emotion": "10.0.27",
-    "eslint": "6.8.0",
+    "eslint": "^7.32.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-cypress": "^2.12.0",
+    "eslint-plugin-eslint-comments": "^3.2.0",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-import-helpers": "^1.2.0",
     "eslint-plugin-jest": "^24.1.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
@@ -175,5 +178,6 @@
         "outputs": []
       }
     }
-  }
+  },
+  "dependencies": {}
 }
diff --git a/packages/.eslintrc.js b/packages/.eslintrc.js
@@ -6,8 +6,24 @@ module.exports = {
     require.resolve('@contentful/eslint-config-extension/jsx-a11y'),
     require.resolve('@contentful/eslint-config-extension/react'),
   ],
+  plugins: ['eslint-comments'],
   rules: {
-    'react-hooks/exhaustive-deps': 'warn',
+    'react-hooks/exhaustive-deps': 'error',
+    // Require descriptions only for disable-line and disable-next-line
+    'eslint-comments/require-description': [
+      'error',
+      {
+        ignore: [
+          'eslint',
+          'eslint-disable',
+          'eslint-enable',
+          'eslint-env',
+          'exported',
+          'global',
+          'globals',
+        ],
+      },
+    ],
     'react/default-props-match-prop-types': 'warn',
     'react/no-unused-prop-types': 'off',
     'you-dont-need-lodash-underscore/flatten': 'warn',

diff --git a/packages/_shared/src/FieldConnector.ts b/packages/_shared/src/FieldConnector.ts
@@ -41,11 +41,11 @@ export class FieldConnector<ValueType> extends React.Component<
     children: () => {
       return null;
     },
-    // eslint-disable-next-line
+    // eslint-disable-next-line -- TODO: describe this disable
     isEmptyValue: (value: any | Nullable) => {
       return value === null || value === '';
     },
-    // eslint-disable-next-line
+    // eslint-disable-next-line -- TODO: describe this disable
     isEqualValues: (value1: any | Nullable, value2: any | Nullable) => {
       return isEqual(value1, value2);
     },

diff --git a/packages/_shared/src/ModalDialogLauncher.tsx b/packages/_shared/src/ModalDialogLauncher.tsx
@@ -31,7 +31,7 @@ export function open(componentRenderer: (params: { onClose: Function; isShown: b
         isShown: false,
       };
       render(currentConfig);
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // eslint-disable-next-line -- TODO: describe this disable  @typescript-eslint/ban-ts-comment
       // @ts-ignore
       resolve(...args);
       getRoot().remove();

diff --git a/packages/_test/src/createFakeFieldAPI.ts b/packages/_test/src/createFakeFieldAPI.ts
@@ -14,7 +14,7 @@ export function createFakeFieldAPI<T>(
 ): [FieldAPI, Emitter] {
   const emitter: Emitter = mitt();
 
-  // eslint-disable-next-line
+  // eslint-disable-next-line -- TODO: describe this disable
   let _value: any = initialValue;
 
   return [

diff --git a/packages/_test/src/fakesFactory.ts b/packages/_test/src/fakesFactory.ts
@@ -2,7 +2,7 @@ import { Entry } from '@contentful/field-editor-shared';
 
 interface Fields {
   [key: string]: {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // eslint-disable-next-line -- TODO: describe this disable  @typescript-eslint/no-explicit-any
     [localeKey: string]: any;
   };
 }

diff --git a/packages/date/src/DateEditor.tsx b/packages/date/src/DateEditor.tsx
@@ -55,6 +55,7 @@ function useEffectWithoutFirstRender(callback: Function, deps: Array<any>) {
       return;
     }
     callback();
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
   }, deps);
 }
 

diff --git a/packages/date/src/DatepickerInput.tsx b/packages/date/src/DatepickerInput.tsx
@@ -1,6 +1,6 @@
 import React, { Component, FocusEventHandler, FocusEvent } from 'react';
 import noop from 'lodash/noop';
-// eslint-disable-next-line no-restricted-imports
+// eslint-disable-next-line -- TODO: describe this disable  no-restricted-imports
 import moment from 'moment';
 import { css, cx } from 'emotion';
 import { formatDateDisplay } from './utils/date';

diff --git a/packages/date/src/TimepickerInput.tsx b/packages/date/src/TimepickerInput.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useEffect } from 'react';
-// eslint-disable-next-line no-restricted-imports
+// eslint-disable-next-line -- TODO: describe this disable  no-restricted-imports
 import moment from 'moment';
 import { css } from 'emotion';
 
@@ -31,7 +31,7 @@ const validInputFormats = [
 function parseRawInput(raw: string): moment.Moment | null {
   let time: moment.Moment | null = null;
 
-  // eslint-disable-next-line @typescript-eslint/prefer-for-of
+  // eslint-disable-next-line -- TODO: describe this disable  @typescript-eslint/prefer-for-of
   for (let i = 0; i < validInputFormats.length; i++) {
     const date = moment(raw, validInputFormats[i]);
     if (date.isValid()) {

diff --git a/packages/date/src/types.ts b/packages/date/src/types.ts
@@ -1,4 +1,4 @@
-// eslint-disable-next-line no-restricted-imports
+// eslint-disable-next-line -- TODO: describe this disable  no-restricted-imports
 import moment from 'moment';
 
 export type DateTimeFormat = 'dateonly' | 'time' | 'timeZ';

diff --git a/packages/date/src/utils/data.spec.ts b/packages/date/src/utils/data.spec.ts
@@ -1,4 +1,4 @@
-// eslint-disable-next-line no-restricted-imports
+// eslint-disable-next-line -- TODO: describe this disable  no-restricted-imports
 import moment from 'moment';
 import { buildFieldValue } from './date';
 

diff --git a/packages/date/src/utils/date.ts b/packages/date/src/utils/date.ts
@@ -1,4 +1,4 @@
-// eslint-disable-next-line no-restricted-imports
+// eslint-disable-next-line -- TODO: describe this disable  no-restricted-imports
 import moment from 'moment';
 import { TimeResult } from '../types';
 

diff --git a/packages/location/src/LocationEditor.tsx b/packages/location/src/LocationEditor.tsx
@@ -55,7 +55,7 @@ export class LocationEditor extends React.Component<
   LocationEditorProps,
   {
     localValue?: Coords;
-    mapsObject: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+    mapsObject: any; // eslint-disable-line -- TODO: describe this disable  @typescript-eslint/no-explicit-any
   }
 > {
   constructor(props: LocationEditorProps) {

diff --git a/packages/location/src/LocationSearchInput.tsx b/packages/location/src/LocationSearchInput.tsx
@@ -56,6 +56,7 @@ export function LocationSearchInput(props: LocationSearchInputProps) {
       setAddress(address);
       setIsSearching(false);
     });
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
   }, [props.value, props.disabled]);
 
   return (

diff --git a/packages/markdown/src/MarkdownActions.ts b/packages/markdown/src/MarkdownActions.ts
@@ -16,7 +16,7 @@ export function createMarkdownActions(props: {
 }) {
   const { sdk, editor, locale } = props;
 
-  // eslint-disable-next-line @typescript-eslint/ban-types
+  // eslint-disable-next-line -- TODO: describe this disable  @typescript-eslint/ban-types
   const insertAssetsWithConfirmation = async (assets: Array<Object> | null) => {
     if (assets) {
       const { links, fallbacks } = await insertAssetLinks(assets, {
@@ -150,7 +150,7 @@ export function createMarkdownActions(props: {
       try {
         const { entity: asset } = (await sdk.navigator.openNewAsset({
           slideIn: { waitForClose: true },
-        })) as any; // eslint-disable-line @typescript-eslint/no-explicit-any
+        })) as any; // eslint-disable-line -- TODO: describe this disable  @typescript-eslint/no-explicit-any
 
         const markdownLinks = await insertAssetsWithConfirmation([asset]);
         editor.insert(markdownLinks);

diff --git a/packages/markdown/src/MarkdownEditor.tsx b/packages/markdown/src/MarkdownEditor.tsx
@@ -58,12 +58,14 @@ export function MarkdownEditor(
         editor.refresh();
       }, 1);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
   }, [editor]);
 
   React.useEffect(() => {
     props.sdk.access.can('create', 'Asset').then((value) => {
       setCanUploadAssets(value);
     });
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
   }, []);
 
   React.useEffect(() => {
@@ -78,10 +80,12 @@ export function MarkdownEditor(
 
   const actions = React.useMemo(() => {
     return createMarkdownActions({ sdk: props.sdk, editor, locale: props.sdk.field.locale });
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
   }, [editor]);
 
   const openMarkdownHelp = React.useCallback(() => {
     openCheatsheetModal(props.sdk.dialogs);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
   }, []);
 
   return (

diff --git a/packages/markdown/src/components/MarkdownPreview.tsx b/packages/markdown/src/components/MarkdownPreview.tsx
@@ -171,7 +171,7 @@ function MarkdownLink(props: {
   href: string;
   title: string;
   className?: string;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // eslint-disable-next-line -- TODO: describe this disable  @typescript-eslint/no-explicit-any
   children: any;
   Embedly?: React.SFC<{ url: string }>;
 }) {
@@ -208,7 +208,7 @@ export const MarkdownPreview = React.memo((props: MarkdownPreviewProps) => {
         options={{
           overrides: {
             a: {
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              // eslint-disable-next-line -- TODO: describe this disable  @typescript-eslint/no-explicit-any
               component: MarkdownLink as any,
               props: {
                 Embedly: props.previewComponents?.embedly,

diff --git a/packages/markdown/src/components/MarkdownTextarea/CodeMirrorWrapper.ts b/packages/markdown/src/components/MarkdownTextarea/CodeMirrorWrapper.ts
@@ -42,7 +42,7 @@ export function create(
     shift: 50,
   };
 
-  // eslint-disable-next-line
+  // eslint-disable-next-line -- TODO: describe this disable
   // @ts-ignore
   const cm = CodeMirror(host, {
     direction,
@@ -175,7 +175,7 @@ export function create(
       transform(
         map,
         (acc, value, key) => {
-          // eslint-disable-next-line
+          // eslint-disable-next-line -- TODO: describe this disable
           // @ts-ignore
           acc[ctrlKey + '-' + key] = value;
         },

diff --git a/packages/markdown/src/components/MarkdownTextarea/MarkdownCommands.ts b/packages/markdown/src/components/MarkdownTextarea/MarkdownCommands.ts
@@ -4,7 +4,7 @@ import range from 'lodash/range';
 import min from 'lodash/min';
 import max from 'lodash/max';
 import times from 'lodash/times';
-// eslint-disable-next-line you-dont-need-lodash-underscore/repeat
+// eslint-disable-next-line -- TODO: describe this disable  you-dont-need-lodash-underscore/repeat
 import repeat from 'lodash/repeat';
 
 import * as CodeMirrorWrapper from './CodeMirrorWrapper';

diff --git a/packages/markdown/src/components/MarkdownTextarea/MarkdownTextarea.tsx b/packages/markdown/src/components/MarkdownTextarea/MarkdownTextarea.tsx
@@ -141,12 +141,14 @@ export const MarkdownTextarea = React.memo((props: MarkdownTextareaProps) => {
         )
       );
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
   }, []);
 
   useEffect(() => {
     if (editor) {
       props.onReady(editor);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
   }, [editor]);
 
   const className = cx(

diff --git a/packages/markdown/src/dialogs/ZenModeModalDialog.tsx b/packages/markdown/src/dialogs/ZenModeModalDialog.tsx
@@ -111,8 +111,9 @@ export const ZenModeModalDialog = (props: ZenModeDialogProps) => {
   const [editor, setEditor] = React.useState<InitializedEditorType | null>(null);
 
   React.useEffect(() => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // eslint-disable-next-line -- TODO: describe this disable  @typescript-eslint/no-explicit-any
     props.sdk?.window?.updateHeight('100%' as any);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
   }, []);
 
   // refresh editor right after dialog is opened to avoid disappearing effect
@@ -125,6 +126,7 @@ export const ZenModeModalDialog = (props: ZenModeDialogProps) => {
 
   const actions = React.useMemo(() => {
     return createMarkdownActions({ sdk: props.sdk, editor, locale: props.locale });
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
   }, [editor]);
 
   actions.closeZenMode = () => {
@@ -212,7 +214,7 @@ export const openZenMode = (
   options: { initialValue: string; locale: string }
 ): Promise<ZenModeResult> => {
   return dialogs.openCurrent({
-    width: 'zen' as any, // eslint-disable-line @typescript-eslint/no-explicit-any
+    width: 'zen' as any, // eslint-disable-line -- TODO: describe this disable  @typescript-eslint/no-explicit-any
     shouldCloseOnEscapePress: false,
     minHeight: '100vh',
     shouldCloseOnOverlayClick: false,

diff --git a/packages/markdown/src/dialogs/renderMarkdownDialog.tsx b/packages/markdown/src/dialogs/renderMarkdownDialog.tsx
@@ -37,7 +37,7 @@ export const renderMarkdownDialog = (
   } else if (parameters.type === MarkdownDialogType.zenMode) {
     const locale = parameters.locale;
     const initialValue = parameters.initialValue;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // eslint-disable-next-line -- TODO: describe this disable  @typescript-eslint/no-explicit-any
     sdk.window.updateHeight('100%' as any);
     return (
       <ZenModeModalDialog

diff --git a/packages/markdown/src/utils/insertAssetLinks.ts b/packages/markdown/src/utils/insertAssetLinks.ts
@@ -1,7 +1,7 @@
 import get from 'lodash/get';
 import isObject from 'lodash/isObject';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// eslint-disable-next-line -- TODO: describe this disable  @typescript-eslint/no-explicit-any
 type Asset = any;
 
 type LinkWithMedia = {

diff --git a/packages/markdown/src/utils/linkOrganizer.ts b/packages/markdown/src/utils/linkOrganizer.ts
@@ -4,9 +4,9 @@ import extend from 'lodash/extend';
 import isString from 'lodash/isString';
 import isObject from 'lodash/isObject';
 import max from 'lodash/max';
-// eslint-disable-next-line
+// eslint-disable-next-line -- TODO: describe this disable
 import isFinite from 'lodash/isFinite';
-// eslint-disable-next-line
+// eslint-disable-next-line -- TODO: describe this disable
 import forEach from 'lodash/forEach';
 
 function extractTitle(title: string) {
-Original file line number
+Diff line change
@@ Expand Up @@
           return;
         }
         callback();
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
       }, deps);
     }
@@ Expand Down @@