Update JS libraries (stashapp#616)

Maista6969 · Jun 24, 2023 · cd03049 · cd03049
1 parent cc1507c
commit cd03049
Show file tree

Hide file tree

Showing 26 changed files with 27,014 additions and 4,508 deletions.
diff --git a/frontend/.stylelintrc b/frontend/.stylelintrc
@@ -4,11 +4,9 @@
   ],
   "extends": [
     "stylelint-config-standard",
-    "stylelint-config-standard-scss",
-    "stylelint-config-prettier"
+    "stylelint-config-standard-scss"
   ],
   "rules": {
-    "indentation": 2,
     "selector-class-pattern": null,
     "property-no-vendor-prefix": null
   },

diff --git a/frontend/package.json b/frontend/package.json
@@ -20,71 +20,71 @@
     "yarn": ">=1.15.2"
   },
   "devDependencies": {
-    "@graphql-codegen/cli": "^3.0.0",
-    "@graphql-codegen/typed-document-node": "^3.0.0",
-    "@graphql-codegen/typescript": "^3.0.0",
-    "@graphql-codegen/typescript-operations": "^3.0.0",
-    "@rollup/plugin-graphql": "^2.0.2",
+    "@graphql-codegen/cli": "^3.2.1",
+    "@graphql-codegen/typed-document-node": "^3.0.1",
+    "@graphql-codegen/typescript": "^3.0.1",
+    "@graphql-codegen/typescript-operations": "^3.0.1",
+    "@rollup/plugin-graphql": "^2.0.3",
     "@types/apollo-upload-client": "^17.0.2",
     "@types/lodash-es": "^4.17.6",
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.9",
-    "@types/react-helmet": "^6.1.5",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
-    "@typescript-eslint/parser": "^5.44.0",
-    "@vitejs/plugin-react": "^2.2.0",
-    "eslint": "^8.28.0",
+    "@types/node": "^18.14.2",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@types/react-helmet": "^6.1.6",
+    "@typescript-eslint/eslint-plugin": "^5.53.0",
+    "@typescript-eslint/parser": "^5.53.0",
+    "@vitejs/plugin-react-swc": "^3.2.0",
+    "eslint": "^8.35.0",
     "eslint-config-airbnb-typescript": "^17.0.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-react": "^7.31.11",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "globule": "^1.3.4",
-    "prettier": "2.7.1",
+    "prettier": "2.8.4",
     "rollup-plugin-analyzer": "^4.0.0",
-    "sass": "~1.56.1",
-    "stylelint": "^14.15.0",
-    "stylelint-config-prettier": "^9.0.4",
-    "stylelint-config-standard": "^29.0.0",
-    "stylelint-config-standard-scss": "^6.1.0",
-    "stylelint-scss": "^4.3.0",
-    "typescript": "~4.9.3",
-    "vite": "^3.2.4",
-    "vite-tsconfig-paths": "^3.6.0"
+    "sass": "~1.58.3",
+    "stylelint": "^15.2.0",
+    "stylelint-config-standard": "^30.0.1",
+    "stylelint-config-standard-scss": "^7.0.1",
+    "stylelint-scss": "^4.4.0",
+    "typescript": "~4.9.5",
+    "vite": "^4.1.4",
+    "vite-tsconfig-paths": "^4.0.5"
   },
   "dependencies": {
-    "@apollo/client": "^3.7.1",
-    "@fortawesome/fontawesome-svg-core": "^6.2.1",
-    "@fortawesome/free-regular-svg-icons": "^6.2.1",
-    "@fortawesome/free-solid-svg-icons": "6.2.1",
+    "@apollo/client": "^3.7.9",
+    "@fortawesome/fontawesome-svg-core": "^6.3.0",
+    "@fortawesome/free-regular-svg-icons": "^6.3.0",
+    "@fortawesome/free-solid-svg-icons": "6.3.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@graphql-typed-document-node/core": "^3.1.1",
-    "@hookform/resolvers": "2.9.7",
+    "@graphql-typed-document-node/core": "^3.1.2",
+    "@hookform/resolvers": "2.9.11",
     "apollo-upload-client": "^17.0.0",
-    "bootstrap": "^5.2.2",
-    "classnames": "^2.3.1",
-    "date-fns": "^2.29.2",
+    "bootstrap": "^5.2.3",
+    "classnames": "^2.3.2",
+    "date-fns": "^2.29.3",
     "graphql": "^16.6.0",
     "graphql-tag": "^2.12.6",
     "i18n-iso-countries": "^7.5.0",
     "lodash-es": "^4.17.21",
     "p-debounce": "^4.0.0",
-    "query-string": "^7.1.1",
+    "query-string": "^8.1.0",
     "react": "^18.2.0",
-    "react-bootstrap": "^2.6.0",
-    "react-bootstrap-typeahead": "^6.0.0",
+    "react-bootstrap": "^2.7.2",
+    "react-bootstrap-typeahead": "^6.0.2",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
-    "react-hook-form": "7.32.2",
-    "react-markdown": "^8.0.3",
+    "react-hook-form": "7.43.2",
+    "react-markdown": "^8.0.5",
     "react-responsive-carousel": "^3.2.23",
-    "react-router-dom": "^6.6.1",
-    "react-select": "^5.6.1",
+    "react-router-dom": "^6.8.1",
+    "react-select": "^5.7.0",
     "rehype-external-links": "1.0.1",
     "remark-breaks": "^3.0.1",
     "remark-gfm": "^3.0.1",
-    "yup": "0.32.11"
+    "yup": "1.0.1"
   },
   "browserslist": {
     "production": [

diff --git a/frontend/src/components/editImages/editImages.tsx b/frontend/src/components/editImages/editImages.tsx
@@ -1,6 +1,7 @@
 import { FC, ChangeEvent, useState } from "react";
 import { Button, Col, Form, Row } from "react-bootstrap";
-import { Control, useFieldArray } from "react-hook-form";
+import { useFieldArray } from "react-hook-form";
+import type { Control } from "react-hook-form";
 import { faImages } from "@fortawesome/free-solid-svg-icons";
 import cx from "classnames";
 
@@ -17,6 +18,15 @@ const CLASSNAME_PLACEHOLDER = `${CLASSNAME}-placeholder`;
 const CLASSNAME_IMAGE = `${CLASSNAME}-image`;
 const CLASSNAME_UPLOADING = `${CLASSNAME_IMAGE}-uploading`;
 
+type Image = {
+  id: string;
+  url: string;
+};
+
+type ControlType =
+  | Control<{ images?: Image[] | undefined }, "images">
+  | undefined;
+
 interface EditImagesProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   control: Control<any>;
@@ -41,12 +51,8 @@ const EditImages: FC<EditImagesProps> = ({
     append,
     remove,
     replace,
-  } = useFieldArray<
-    { images: Array<{ id: string; url: string; key: string }> },
-    "images",
-    "key"
-  >({
-    control,
+  } = useFieldArray({
+    control: control as ControlType,
     name: "images",
     keyName: "key",
   });

diff --git a/frontend/src/components/form/BodyModification.tsx b/frontend/src/components/form/BodyModification.tsx
@@ -2,7 +2,8 @@ import { FC, ChangeEvent } from "react";
 import Creatable from "react-select/creatable";
 import { components } from "react-select";
 import { Button, Col, Form, InputGroup, Row } from "react-bootstrap";
-import { Control, useFieldArray } from "react-hook-form";
+import { useFieldArray } from "react-hook-form";
+import type { Control } from "react-hook-form";
 
 interface BodyModificationProps {
   name: string;

diff --git a/frontend/src/components/tagSelect/TagSelect.tsx b/frontend/src/components/tagSelect/TagSelect.tsx
@@ -21,7 +21,7 @@ type TagSlim = {
 };
 
 interface TagSelectProps {
-  tags: TagSlim[];
+  tags?: TagSlim[];
   onChange: (tags: TagSlim[]) => void;
   message?: string;
   excludeTags?: string[];
@@ -41,7 +41,7 @@ const CLASSNAME_SELECT = `${CLASSNAME}-select`;
 const CLASSNAME_CONTAINER = `${CLASSNAME}-container`;
 
 const TagSelect: FC<TagSelectProps> = ({
-  tags: initialTags,
+  tags: initialTags = [],
   onChange,
   message = "Add tag:",
   excludeTags = [],

diff --git a/frontend/src/components/urlInput/urlInput.tsx b/frontend/src/components/urlInput/urlInput.tsx
@@ -1,7 +1,13 @@
 import { FC, useRef, useState } from "react";
 import { Button, Form, InputGroup } from "react-bootstrap";
 import { Icon } from "src/components/fragments";
-import { Control, useFieldArray, FieldError } from "react-hook-form";
+import type {
+  Control,
+  FieldError,
+  Merge,
+  FieldErrorsImpl,
+} from "react-hook-form";
+import { useFieldArray } from "react-hook-form";
 import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
 
 import { useSites, ValidSiteTypeEnum, SiteQuery } from "src/graphql";
@@ -10,24 +16,35 @@ type Site = NonNullable<SiteQuery["findSite"]>;
 
 const CLASSNAME = "URLInput";
 
+type URL = {
+  url: string;
+  site: {
+    id: string;
+    name: string;
+    icon: string;
+  };
+};
+
+type ControlType = Control<{ urls?: URL[] | undefined }, "urls"> | undefined;
+type ErrorsType = Merge<
+  FieldError,
+  (Merge<FieldError, FieldErrorsImpl<URL>> | undefined)[]
+>;
+
 interface URLInputProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  control: Control<any>;
+  control: any;
   type: ValidSiteTypeEnum;
-  errors?: { url?: FieldError | undefined }[];
+  errors?: ErrorsType;
 }
 
 const URLInput: FC<URLInputProps> = ({ control, type, errors }) => {
   const {
     fields: urls,
     append,
     remove,
-  } = useFieldArray<
-    { urls: Array<{ url: string; site: { id: string; name: string } }> },
-    "urls",
-    "key"
-  >({
-    control,
+  } = useFieldArray({
+    control: control as ControlType,
     name: "urls",
     keyName: "key",
   });