From c93b5e12b761d73687169d9896955748b26e2137 Mon Sep 17 00:00:00 2001 From: InfiniteTF Date: Thu, 28 Oct 2021 01:27:26 +0200 Subject: [PATCH] Update typescript and eslint config (#1878) * Update eslint rules * Update typescript to 4.4 * Disable react/display-name * Add @typescript-eslint/typescript-estree --- ui/v2.5/.eslintrc.json | 38 +- ui/v2.5/package.json | 25 +- ui/v2.5/src/App.tsx | 6 +- .../GalleryDetails/GalleryEditPanel.tsx | 3 +- .../GalleryDetails/GalleryScenesPanel.tsx | 2 +- .../Images/ImageDetails/ImageEditPanel.tsx | 2 +- ui/v2.5/src/components/List/ListFilter.tsx | 3 +- .../components/List/ListOperationButtons.tsx | 1 + .../Movies/MovieDetails/MovieCreate.tsx | 2 +- .../Scenes/SceneDetails/SceneEditPanel.tsx | 2 +- .../Scenes/SceneDetails/SceneQueryModal.tsx | 14 +- .../Settings/SettingsConfigurationPanel.tsx | 5 +- .../components/Settings/SettingsDLNAPanel.tsx | 2 +- .../Settings/SettingsPluginsPanel.tsx | 2 +- .../DirectorySelectionDialog.tsx | 2 +- .../Settings/StashBoxConfiguration.tsx | 2 - .../Settings/StashConfiguration.tsx | 2 +- ui/v2.5/src/components/Setup/Migrate.tsx | 2 +- ui/v2.5/src/components/Setup/Setup.tsx | 4 +- .../components/Shared/DeleteEntityDialog.tsx | 2 +- .../StudioDetails/StudioDetailsPanel.tsx | 2 +- .../components/Tagger/performers/Config.tsx | 2 +- .../Tagger/performers/PerformerTagger.tsx | 2 +- .../Tagger/scenes/StashSearchResult.tsx | 2 +- .../Tags/TagDetails/TagDetailsPanel.tsx | 2 +- .../Tags/TagDetails/TagMergeDialog.tsx | 2 +- ui/v2.5/src/hooks/Config.tsx | 2 - ui/v2.5/src/hooks/LocalForage.ts | 4 +- ui/v2.5/tsconfig.json | 2 +- ui/v2.5/yarn.lock | 2656 +++++++++++------ 30 files changed, 1815 insertions(+), 982 deletions(-) diff --git a/ui/v2.5/.eslintrc.json b/ui/v2.5/.eslintrc.json index 32597b3e3..ca3e8c0ce 100644 --- a/ui/v2.5/.eslintrc.json +++ b/ui/v2.5/.eslintrc.json @@ -10,18 +10,23 @@ "project": "./tsconfig.json" }, "plugins": [ - "@typescript-eslint" + "@typescript-eslint", + "jsx-a11y" ], "extends": [ "airbnb-typescript", "airbnb/hooks", + "plugin:react/recommended", + "plugin:import/recommended", "prettier", - "prettier/prettier", - "prettier/react", - "prettier/@typescript-eslint" + "prettier/prettier" ], + "settings": { + "react": { + "version": "detect" + } + }, "rules": { - "@typescript-eslint/explicit-function-return-type": "off", "@typescript-eslint/no-explicit-any": 2, "@typescript-eslint/naming-convention": [ "error", @@ -48,36 +53,17 @@ ], "import/named": "off", "import/namespace": "off", - "import/default": "off", - "import/no-named-as-default-member": "off", - "import/no-named-as-default": "off", - "import/no-cycle": "off", - "import/no-unused-modules": "off", - "import/no-deprecated": "off", "import/no-unresolved": "off", - "import/prefer-default-export": "off", - "import/no-extraneous-dependencies": "off", - "indent": "off", - "@typescript-eslint/indent": "off", + "react/display-name": "off", "react/prop-types": "off", - "react/destructuring-assignment": "off", - "react/require-default-props": "off", - "react/jsx-props-no-spreading": "off", - "react/sort-comp": "off", "react/style-prop-object": ["error", { "allow": ["FormattedNumber"] }], "spaced-comment": ["error", "always", { "markers": ["/"] }], - "max-classes-per-file": "off", - "no-plusplus": "off", "prefer-destructuring": ["error", {"object": true, "array": false}], - "default-case": "off", - "consistent-return": "off", "@typescript-eslint/no-use-before-define": ["error", { "functions": false, "classes": true }], - "no-underscore-dangle": "off", - "no-nested-ternary": "off", - "jsx-a11y/media-has-caption": "off" + "no-nested-ternary": "off" } } diff --git a/ui/v2.5/package.json b/ui/v2.5/package.json index ca2bb0fd2..66a0a1a16 100644 --- a/ui/v2.5/package.json +++ b/ui/v2.5/package.json @@ -55,9 +55,9 @@ "mousetrap": "^1.6.5", "mousetrap-pause": "^1.0.0", "query-string": "6.13.8", - "react": "17.0.1", + "react": "17.0.2", "react-bootstrap": "1.4.3", - "react-dom": "17.0.1", + "react-dom": "17.0.2", "react-helmet": "^6.1.0", "react-intl": "^5.10.16", "react-jw-player": "1.19.1", @@ -88,21 +88,22 @@ "@types/lodash": "^4.14.168", "@types/mousetrap": "^1.6.5", "@types/node": "14.14.22", - "@types/react": "17.0.0", - "@types/react-dom": "^17.0.0", + "@types/react": "17.0.31", + "@types/react-dom": "^17.0.10", "@types/react-helmet": "^6.1.3", "@types/react-router-bootstrap": "^0.24.5", "@types/react-router-dom": "5.1.7", "@types/react-router-hash-link": "^1.2.1", - "@typescript-eslint/eslint-plugin": "^4.14.0", - "@typescript-eslint/parser": "^4.14.0", + "@typescript-eslint/eslint-plugin": "^4.33.0", + "@typescript-eslint/parser": "^4.33.0", "craco-esbuild": "^0.4.2", - "eslint": "^7.18.0", - "eslint-config-airbnb-typescript": "^12.0.0", - "eslint-config-prettier": "^7.2.0", - "eslint-plugin-import": "^2.22.1", + "eslint": "^7.32.0", + "eslint-config-airbnb": "^18.2.1", + "eslint-config-airbnb-typescript": "^14.0.1", + "eslint-config-prettier": "^8.3.0", + "eslint-plugin-import": "^2.25.2", "eslint-plugin-jsx-a11y": "^6.4.1", - "eslint-plugin-react": "^7.22.0", + "eslint-plugin-react": "^7.26.1", "eslint-plugin-react-hooks": "^4.2.0", "extract-react-intl-messages": "^4.1.1", "postcss-safe-parser": "^5.0.2", @@ -111,6 +112,6 @@ "stylelint": "^13.9.0", "stylelint-config-prettier": "^8.0.2", "stylelint-order": "^4.1.0", - "typescript": "~4.0.5" + "typescript": "~4.4.4" } } diff --git a/ui/v2.5/src/App.tsx b/ui/v2.5/src/App.tsx index c210c0220..8ee1c2b9b 100755 --- a/ui/v2.5/src/App.tsx +++ b/ui/v2.5/src/App.tsx @@ -1,6 +1,6 @@ import React, { useEffect } from "react"; import { Route, Switch, useRouteMatch } from "react-router-dom"; -import { IntlProvider } from "react-intl"; +import { IntlProvider, CustomFormats } from "react-intl"; import { Helmet } from "react-helmet"; import { mergeWith } from "lodash"; import { ToastProvider } from "src/hooks/Toast"; @@ -32,7 +32,7 @@ import { Setup } from "./components/Setup/Setup"; import { Migrate } from "./components/Setup/Migrate"; import * as GQL from "./core/generated-graphql"; import { LoadingIndicator, TITLE_SUFFIX } from "./components/Shared"; -import ConfigurationProvider from "./hooks/Config"; +import { ConfigurationProvider } from "./hooks/Config"; initPolyfills(); @@ -41,7 +41,7 @@ MousetrapPause(Mousetrap); // Set fontawesome/free-solid-svg as default fontawesome icons library.add(fas); -const intlFormats = { +const intlFormats: CustomFormats = { date: { long: { year: "numeric", month: "long", day: "numeric" }, }, diff --git a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx index cd13c59df..8f1957322 100644 --- a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx +++ b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from "react"; import { FormattedMessage, useIntl } from "react-intl"; -import { useHistory } from "react-router-dom"; +import { useHistory, Prompt } from "react-router-dom"; import { Button, Dropdown, @@ -30,7 +30,6 @@ import { } from "src/components/Shared"; import { useToast } from "src/hooks"; import { useFormik } from "formik"; -import { Prompt } from "react-router"; import { FormUtils, TextUtils } from "src/utils"; import { RatingStars } from "src/components/Scenes/SceneDetails/RatingStars"; import { GalleryScrapeDialog } from "./GalleryScrapeDialog"; diff --git a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryScenesPanel.tsx b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryScenesPanel.tsx index e2d5d4814..32c4af635 100644 --- a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryScenesPanel.tsx +++ b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryScenesPanel.tsx @@ -11,7 +11,7 @@ export const GalleryScenesPanel: React.FC = ({ }) => (
{scenes.map((scene) => ( - + ))}
); diff --git a/ui/v2.5/src/components/Images/ImageDetails/ImageEditPanel.tsx b/ui/v2.5/src/components/Images/ImageDetails/ImageEditPanel.tsx index ffce99e37..55d2fe42d 100644 --- a/ui/v2.5/src/components/Images/ImageDetails/ImageEditPanel.tsx +++ b/ui/v2.5/src/components/Images/ImageDetails/ImageEditPanel.tsx @@ -14,7 +14,7 @@ import { import { useToast } from "src/hooks"; import { FormUtils } from "src/utils"; import { useFormik } from "formik"; -import { Prompt } from "react-router"; +import { Prompt } from "react-router-dom"; import { RatingStars } from "src/components/Scenes/SceneDetails/RatingStars"; interface IProps { diff --git a/ui/v2.5/src/components/List/ListFilter.tsx b/ui/v2.5/src/components/List/ListFilter.tsx index ef2aa7c7f..52a0cf44c 100644 --- a/ui/v2.5/src/components/List/ListFilter.tsx +++ b/ui/v2.5/src/components/List/ListFilter.tsx @@ -162,7 +162,7 @@ export const ListFilter: React.FC = ({ const SavedFilterDropdown = React.forwardRef< HTMLDivElement, HTMLAttributes - >(({ style, className }, ref) => ( + >(({ style, className }: HTMLAttributes, ref) => (
= ({ />
)); + SavedFilterDropdown.displayName = "SavedFilterDropdown"; function render() { const currentSortBy = filterOptions.sortByOptions.find( diff --git a/ui/v2.5/src/components/List/ListOperationButtons.tsx b/ui/v2.5/src/components/List/ListOperationButtons.tsx index 7b4da09e4..f16159818 100644 --- a/ui/v2.5/src/components/List/ListOperationButtons.tsx +++ b/ui/v2.5/src/components/List/ListOperationButtons.tsx @@ -100,6 +100,7 @@ export const ListOperationButtons: React.FC = ({ return ( {button.text}} + key={button.text} >