refactor: migrate from tslint to eslint (#996)

.eslintrc.json

@@ -0,0 +1,64 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "jest/globals": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended-type-checked",
+    "plugin:@typescript-eslint/stylistic-type-checked",
+    "plugin:react/recommended",
+    "next/core-web-vitals",
+    "plugin:sonarjs/recommended",
+    "plugin:jest/recommended",
+    "prettier"
+  ],
+  "plugins": [
+    "eslint-plugin-import",
+    "eslint-plugin-react",
+    "@typescript-eslint",
+    "@typescript-eslint/tslint",
+    "sonarjs",
+    "jest"
+    // "prettier" uncomment when prettier is upgraded to the newest version
+  ],
+  "settings": {
+    "next": {
+      "rootDir": "playground/"
+    }
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": [
+      "./library/tsconfig.json",
+      "./library/e2e/tsconfig.json",
+      "./playground/tsconfig.json",
+      "./web-component/tsconfig.json"
+    ]
+  },
+  "root": true,
+  "rules": {
+    // "prettier/prettier": "error" uncomment when prettier is upgraded to the newest version
+    "jest/expect-expect": [
+      "error",
+      {
+        "assertFunctionNames": ["expect", "cy"]
+      }
+    ]
+  },
+  "ignorePatterns": [
+    "library/browser",
+    "library/lib",
+    "library/e2e/plugins/index.js",
+    "library/loaders/remove-hashbag-loader.js",
+    "library/jest.config.js",
+    "library/postcss.config.js",
+    "library/webpack.config.js",
+    "library/tailwind.config.js",
+    "playground/out",
+    "playground/postcss.config.js",
+    "web-component/lib",
+    "web-component/webpack.config.js"
+  ]
+}

library/e2e/integration/standalone.e2e.ts

@@ -1,3 +1,4 @@
+/* eslint-disable jest/valid-title */
 describe('Standalone bundle', () => {
   testSuite('With parser', 'e2e/sites/standalone.html');
   testSuite('With parser for v3', 'e2e/sites/standalone-v3.html');

library/src/__tests__/index.test.tsx

@@ -2,6 +2,8 @@
  * @jest-environment jsdom
  */
 
+/* eslint-disable sonarjs/no-duplicate-string */
+
 import React from 'react';
 import { render, waitFor } from '@testing-library/react';
 import AsyncApiComponent from '..';

library/src/components/Bindings.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import React from 'react';
 import { Schema } from './Schema';
 import { SchemaHelpers } from '../helpers';
@@ -18,6 +19,7 @@ export const Bindings: React.FunctionComponent<Props> = ({
 
   const renderedBindings = bindings.all().map(binding => {
     const bindingValue = binding.value();
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     const schema = SchemaHelpers.jsonToSchema(bindingValue);
     const protocol = binding.protocol();
     const schemaName = (
@@ -34,7 +36,7 @@ export const Bindings: React.FunctionComponent<Props> = ({
           schemaName={schemaName}
           schema={schema}
           key={protocol}
-          onlyTitle={true}
+          onlyTitle
         />
       )
     );

library/src/components/CollapseButton.tsx

@@ -41,7 +41,7 @@ export const CollapseButton: React.FunctionComponent<Props> = ({
       {...chevronProps}
       className={`inline-block align-baseline cursor-pointer ml-0.5 -mb-1 w-5 h-5 transform transition-transform duration-150 ease-linear ${
         expanded ? '-rotate-90' : ''
-      } ${chevronProps?.className || ''}`}
+      } ${chevronProps?.className ?? ''}`}
     />
   </button>
 );

library/src/components/Extensions.tsx

@@ -1,3 +1,6 @@
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+
 import React from 'react';
 
 import { Schema } from './Schema';
@@ -6,6 +9,7 @@ import { SchemaHelpers } from '../helpers';
 
 interface Props {
   name?: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   item: any;
 }
 
@@ -19,10 +23,11 @@ export const Extensions: React.FunctionComponent<Props> = ({
   }
 
   const schema = SchemaHelpers.jsonToSchema(extensions);
+
   return (
     schema && (
       <div className="mt-2">
-        <Schema schemaName={name} schema={schema} onlyTitle={true} />
+        <Schema schemaName={name} schema={schema} onlyTitle />
       </div>
     )
   );

library/src/components/Schema.tsx

@@ -33,6 +33,7 @@ export const Schema: React.FunctionComponent<Props> = ({
   expanded: propExpanded = false,
   onlyTitle = false,
   isArray = false,
+  // eslint-disable-next-line sonarjs/cognitive-complexity
 }) => {
   const { reverse, deepExpanded } = useContext(SchemaContext);
   const [expanded, setExpanded] = useState(propExpanded || isArray);
@@ -42,13 +43,13 @@ export const Schema: React.FunctionComponent<Props> = ({
     if (!isArray) {
       setDeepExpand(deepExpanded);
     }
-  }, [deepExpanded, setDeepExpand]);
+  }, [isArray, deepExpanded, setDeepExpand]);
 
   useEffect(() => {
     if (!isArray) {
       setExpanded(deepExpand);
     }
-  }, [deepExpand, setExpanded]);
+  }, [isArray, deepExpand, setExpanded]);
 
   if (
     !schema ||
@@ -246,7 +247,7 @@ export const Schema: React.FunctionComponent<Props> = ({
                   <span className="border border-solid border-orange-300 hover:bg-orange-300 hover:text-orange-600 text-orange-500 font-bold no-underline text-xs uppercase rounded px-2 py-0">
                     <Href
                       href={externalDocs.url()}
-                      title={externalDocs.description() || ''}
+                      title={externalDocs.description() ?? ''}
                     >
                       Documentation
                     </Href>
@@ -276,54 +277,45 @@ export const Schema: React.FunctionComponent<Props> = ({
               reverse ? 'bg-gray-200' : ''
             } ${expanded ? 'block' : 'hidden'}`}
           >
-            <SchemaProperties schema={schema} isArray={isArray} />
+            <SchemaProperties schema={schema} />
             <SchemaItems schema={schema} />
 
-            {schema.oneOf() &&
-              schema
-                .oneOf()
-                ?.map((s, idx) => (
-                  <Schema
-                    key={idx}
-                    schema={s}
-                    schemaName={SchemaHelpers.applicatorSchemaName(
-                      idx,
-                      'Adheres to',
-                      'Or to',
-                      s.title(),
-                    )}
-                  />
-                ))}
-            {schema.anyOf() &&
-              schema
-                .anyOf()
-                ?.map((s, idx) => (
-                  <Schema
-                    key={idx}
-                    schema={s}
-                    schemaName={SchemaHelpers.applicatorSchemaName(
-                      idx,
-                      'Can adhere to',
-                      'Or to',
-                      s.title(),
-                    )}
-                  />
-                ))}
-            {schema.allOf() &&
-              schema
-                .allOf()
-                ?.map((s, idx) => (
-                  <Schema
-                    key={idx}
-                    schema={s}
-                    schemaName={SchemaHelpers.applicatorSchemaName(
-                      idx,
-                      'Consists of',
-                      'And of',
-                      s.title(),
-                    )}
-                  />
-                ))}
+            {schema.oneOf()?.map((s, idx) => (
+              <Schema
+                key={idx}
+                schema={s}
+                schemaName={SchemaHelpers.applicatorSchemaName(
+                  idx,
+                  'Adheres to',
+                  'Or to',
+                  s.title(),
+                )}
+              />
+            ))}
+            {schema.anyOf()?.map((s, idx) => (
+              <Schema
+                key={idx}
+                schema={s}
+                schemaName={SchemaHelpers.applicatorSchemaName(
+                  idx,
+                  'Can adhere to',
+                  'Or to',
+                  s.title(),
+                )}
+              />
+            ))}
+            {schema.allOf()?.map((s, idx) => (
+              <Schema
+                key={idx}
+                schema={s}
+                schemaName={SchemaHelpers.applicatorSchemaName(
+                  idx,
+                  'Consists of',
+                  'And of',
+                  s.title(),
+                )}
+              />
+            ))}
             {schema.not() && (
               <Schema schema={schema.not()} schemaName="Cannot adhere to:" />
             )}
@@ -374,19 +366,17 @@ export const Schema: React.FunctionComponent<Props> = ({
 
 interface SchemaPropertiesProps {
   schema: SchemaInterface;
-  isArray: boolean;
 }
 
 const SchemaProperties: React.FunctionComponent<SchemaPropertiesProps> = ({
   schema,
-  isArray,
 }) => {
   const properties = schema.properties();
   if (properties === undefined || !Object.keys(properties)) {
     return null;
   }
 
-  const required = schema.required() || [];
+  const required = schema.required() ?? [];
   const patternProperties = schema.patternProperties();
 
   return (
@@ -396,7 +386,7 @@ const SchemaProperties: React.FunctionComponent<SchemaPropertiesProps> = ({
           schema={property}
           schemaName={propertyName}
           required={required.includes(propertyName)}
-          isProperty={true}
+          isProperty
           isCircular={property.isCircular()}
           dependentRequired={SchemaHelpers.getDependentRequired(
             propertyName,
@@ -405,13 +395,13 @@ const SchemaProperties: React.FunctionComponent<SchemaPropertiesProps> = ({
           key={propertyName}
         />
       ))}
-      {Object.entries(patternProperties || {}).map(
+      {Object.entries(patternProperties ?? {}).map(
         ([propertyName, property]) => (
           <Schema
             schema={property}
             schemaName={propertyName}
-            isPatternProperty={true}
-            isProperty={true}
+            isPatternProperty
+            isProperty
             isCircular={property.isCircular()}
             key={propertyName}
           />
@@ -438,7 +428,7 @@ const AdditionalProperties: React.FunctionComponent<AdditionalPropertiesProps> =
   }
 
   const type = schema.type();
-  if (type === undefined || !type.includes('object')) {
+  if (!type?.includes('object')) {
     return null;
   }
 
@@ -468,7 +458,7 @@ interface SchemaItemsProps {
 
 const SchemaItems: React.FunctionComponent<SchemaItemsProps> = ({ schema }) => {
   const type = schema.type();
-  if (type === undefined || !type.includes('array')) {
+  if (!type?.includes('array')) {
     return null;
   }
   const items = schema.items();
@@ -477,24 +467,24 @@ const SchemaItems: React.FunctionComponent<SchemaItemsProps> = ({ schema }) => {
   if (
     items &&
     !Array.isArray(items) &&
-    Object.keys(items.properties() || {}).length
+    Object.keys(items.properties() ?? {}).length
   ) {
-    return <Schema schema={items} isArray={true} />;
+    return <Schema schema={items} isArray />;
   } else if (Array.isArray(items)) {
     return (
       <>
         {items.map((item, idx) => (
           <Schema
             schema={item}
-            isArray={true}
+            isArray
             schemaName={`${idx + 1} item:`}
             key={idx}
           />
         ))}
       </>
     );
   }
-  return <Schema schema={items} isArray={true} schemaName="Items:" />;
+  return <Schema schema={items} isArray schemaName="Items:" />;
 };
 
 interface AdditionalItemsProps {
@@ -514,13 +504,14 @@ const AdditionalItems: React.FunctionComponent<AdditionalItemsProps> = ({
   }
 
   const type = schema.type();
-  if (type === undefined || !type.includes('array')) {
+  if (!type?.includes('array')) {
     return null;
   }
   if (!Array.isArray(schema.items())) {
     return null;
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any
   const additionalItems = schema.additionalItems() as any;
   if (additionalItems === true || additionalItems === undefined) {
     return (
@@ -536,5 +527,6 @@ const AdditionalItems: React.FunctionComponent<AdditionalItemsProps> = ({
       </p>
     );
   }
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   return <Schema schemaName="Additional items:" schema={additionalItems} />;
 };

library/src/components/Tag.tsx

@@ -9,7 +9,7 @@ interface Props {
 
 export const Tag: React.FunctionComponent<Props> = ({ tag }) => {
   const name = `#${tag.name()}`;
-  const description = tag.description() || '';
+  const description = tag.description() ?? '';
   const externalDocs = tag.externalDocs();
 
   const element = (