Backup_Repos/stash
1
0
Fork 0
mirror of https://github.com/stashapp/stash.git synced 2025-12-09 18:04:33 +01:00
Code Issues Projects Releases Wiki Activity

Upgrade create-react-app and assorted libraries (#914)

Browse source 
* Update create-react-app, react, typescript and eslint versions
* Various library updates
This commit is contained in:
InfiniteTF 2020-11-25 03:20:48 +01:00 committed by GitHub
parent e3eb550a7d
commit 794ea00d37
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
26 changed files with 4812 additions and 5460 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
ui/v2.5/.eslintrc.json
View file

@ -34,6 +34,7 @@
}
],
"lines-between-class-members": "off",
"@typescript-eslint/lines-between-class-members": "off",
"import/extensions": [
"error",
"ignorePackages",

91
ui/v2.5/package.json
View file

@ -25,83 +25,82 @@
"not op_mini all"
],
"dependencies": {
"@apollo/client": "^3.1.4",
"@formatjs/intl-numberformat": "^5.6.0",
"@fortawesome/fontawesome-svg-core": "^1.2.30",
"@fortawesome/free-regular-svg-icons": "^5.14.0",
"@fortawesome/free-solid-svg-icons": "^5.14.0",
"@fortawesome/react-fontawesome": "^0.1.11",
"@types/apollo-upload-client": "^14.1.0",
"@types/mousetrap": "^1.6.3",
"@apollo/client": "^3.2.5",
"@formatjs/intl-numberformat": "^5.7.1",
"@fortawesome/fontawesome-svg-core": "^1.2.32",
"@fortawesome/free-regular-svg-icons": "^5.15.1",
"@fortawesome/free-solid-svg-icons": "^5.15.1",
"@fortawesome/react-fontawesome": "^0.1.12",
"apollo-upload-client": "^14.1.2",
"axios": "0.20.0",
"axios": "0.21.0",
"base64-blob": "^1.4.1",
"bootstrap": "^4.5.2",
"bootstrap": "^4.5.3",
"classnames": "^2.2.6",
"flag-icon-css": "^3.5.0",
"flexbin": "^0.2.0",
"formik": "^2.1.5",
"formik": "^2.2.1",
"fslightbox-react": "^1.5.0",
"graphql": "^15.3.0",
"graphql": "^15.4.0",
"graphql-tag": "^2.11.0",
"i18n-iso-countries": "^6.0.0",
"jimp": "^0.16.1",
"localforage": "1.9.0",
"lodash": "^4.17.20",
"mousetrap": "^1.6.5",
"mousetrap-pause": "^1.0.0",
"query-string": "6.13.1",
"react": "16.13.1",
"react-bootstrap": "1.3.0",
"react-dom": "16.13.1",
"mousetrap-pause": "^1.0.0",
"query-string": "6.13.6",
"react": "17.0.1",
"react-bootstrap": "1.4.0",
"react-dom": "17.0.1",
"react-images": "0.5.19",
"react-intl": "^5.8.0",
"react-intl": "^5.8.8",
"react-jw-player": "1.19.1",
"react-markdown": "^4.3.1",
"react-markdown": "^5.0.2",
"react-photo-gallery": "^8.0.0",
"react-router-bootstrap": "^0.25.0",
"react-router-dom": "^5.2.0",
"react-router-hash-link": "^2.1.0",
"react-router-hash-link": "^2.2.2",
"react-select": "^3.1.0",
"string.prototype.replaceall": "^1.0.3",
"subscriptions-transport-ws": "^0.9.18",
"universal-cookie": "^4.0.3"
"universal-cookie": "^4.0.4"
},
"devDependencies": {
"@graphql-codegen/add": "^2.0.1",
"@graphql-codegen/cli": "^1.17.8",
"@graphql-codegen/cli": "^1.19.0",
"@graphql-codegen/time": "^2.0.1",
"@graphql-codegen/typescript": "^1.17.9",
"@graphql-codegen/typescript": "^1.17.11",
"@graphql-codegen/typescript-operations": "^1.17.8",
"@graphql-codegen/typescript-react-apollo": "^2.0.6",
"@types/classnames": "^2.2.10",
"@graphql-codegen/typescript-react-apollo": "^2.0.7",
"@types/apollo-upload-client": "^14.1.0",
"@types/classnames": "^2.2.11",
"@types/fslightbox-react": "^1.4.0",
"@types/lodash": "^4.14.161",
"@types/node": "14.6.4",
"@types/react": "16.9.43",
"@types/lodash": "^4.14.164",
"@types/mousetrap": "^1.6.4",
"@types/node": "14.14.6",
"@types/react": "16.9.55",
"@types/react-dom": "^16.9.8",
"@types/react-images": "^0.5.3",
"@types/react-router-bootstrap": "^0.24.5",
"@types/react-router-dom": "5.1.5",
"@types/react-router-dom": "5.1.6",
"@types/react-router-hash-link": "^1.2.1",
"@types/react-select": "3.0.19",
"@typescript-eslint/eslint-plugin": "^2.30.0",
"@typescript-eslint/parser": "^2.30.0",
"eslint": "^6.8.0",
"eslint-config-airbnb-typescript": "^7.2.1",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.19.0",
"eslint-plugin-react-hooks": "^4.0.0",
"@types/react-select": "3.0.23",
"@typescript-eslint/eslint-plugin": "^4.6.0",
"@typescript-eslint/parser": "^4.6.0",
"eslint": "^7.12.1",
"eslint-config-airbnb-typescript": "^12.0.0",
"eslint-config-prettier": "^6.15.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0",
"extract-react-intl-messages": "^4.1.1",
"node-sass": "4.14.1",
"postcss-safe-parser": "^4.0.2",
"prettier": "2.1.1",
"react-scripts": "^3.4.3",
"stylelint": "^13.3.3",
"stylelint-config-prettier": "^8.0.1",
"stylelint-order": "^4.0.0",
"typescript": "^3.9.7"
"prettier": "2.1.2",
"react-scripts": "^4.0.0",
"stylelint": "^13.7.2",
"stylelint-config-prettier": "^8.0.2",
"stylelint-order": "^4.1.0",
"typescript": "^4.0.5"
}
}

1
ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx
View file

@ -1,6 +1,7 @@
import React, { useEffect, useState } from "react";
import { useHistory } from "react-router-dom";
import { Button, Form, Col, Row } from "react-bootstrap";
import Mousetrap from "mousetrap";
import * as GQL from "src/core/generated-graphql";
import {
queryScrapeGalleryURL,

1
ui/v2.5/src/components/Galleries/GalleryList.tsx
View file

@ -2,6 +2,7 @@ import React, { useState } from "react";
import _ from "lodash";
import { Table } from "react-bootstrap";
import { Link, useHistory } from "react-router-dom";
import Mousetrap from "mousetrap";
import {
FindGalleriesQueryResult,
GallerySlimDataFragment,

1
ui/v2.5/src/components/Images/ImageDetails/ImageEditPanel.tsx
View file

@ -1,5 +1,6 @@
import React, { useEffect, useState } from "react";
import { Button, Form, Col, Row } from "react-bootstrap";
import Mousetrap from "mousetrap";
import * as GQL from "src/core/generated-graphql";
import { useImageUpdate } from "src/core/StashService";
import {

1
ui/v2.5/src/components/Images/ImageList.tsx
View file

@ -2,6 +2,7 @@ import React, { useState } from "react";
import _ from "lodash";
import { useHistory } from "react-router-dom";
import FsLightbox from "fslightbox-react";
import Mousetrap from "mousetrap";
import {
FindImagesQueryResult,
SlimImageDataFragment,

1
ui/v2.5/src/components/List/AddFilter.tsx
View file

@ -1,6 +1,7 @@
import _ from "lodash";
import React, { useEffect, useRef, useState } from "react";
import { Button, Form, Modal, OverlayTrigger, Tooltip } from "react-bootstrap";
import Mousetrap from "mousetrap";
import { Icon, FilterSelect, DurationInput } from "src/components/Shared";
import { CriterionModifier } from "src/core/generated-graphql";
import {

1
ui/v2.5/src/components/List/ListFilter.tsx
View file

@ -1,5 +1,6 @@
import _, { debounce } from "lodash";
import React, { useState, useEffect } from "react";
import Mousetrap from "mousetrap";
import { SortDirectionEnum } from "src/core/generated-graphql";
import {
Badge,

3
ui/v2.5/src/components/MainNavbar.tsx
View file

@ -9,8 +9,9 @@ import { Nav, Navbar, Button } from "react-bootstrap";
import { IconName } from "@fortawesome/fontawesome-svg-core";
import { LinkContainer } from "react-router-bootstrap";
import { Link, NavLink, useLocation, useHistory } from "react-router-dom";
import { SessionUtils } from "src/utils";
import Mousetrap from "mousetrap";
import { SessionUtils } from "src/utils";
import { Icon } from "src/components/Shared";
import { Manual } from "./Help/Manual";

1
ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx
View file

@ -1,5 +1,6 @@
import React, { useEffect, useState, useCallback } from "react";
import { useIntl } from "react-intl";
import Mousetrap from "mousetrap";
import * as GQL from "src/core/generated-graphql";
import {
useFindMovie,

1
ui/v2.5/src/components/Movies/MovieList.tsx
View file

@ -1,5 +1,6 @@
import React, { useState } from "react";
import _ from "lodash";
import Mousetrap from "mousetrap";
import { FindMoviesQueryResult } from "src/core/generated-graphql";
import { ListFilterModel } from "src/models/list-filter/filter";
import { DisplayMode } from "src/models/list-filter/types";

1
ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx
View file

@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
import { Button, Tabs, Tab } from "react-bootstrap";
import { useParams, useHistory } from "react-router-dom";
import cx from "classnames";
import Mousetrap from "mousetrap";
import * as GQL from "src/core/generated-graphql";
import {
useFindPerformer,

1
ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx
View file

@ -1,6 +1,7 @@
import React, { useEffect, useState } from "react";
import { useIntl } from "react-intl";
import { Button, Popover, OverlayTrigger, Table } from "react-bootstrap";
import Mousetrap from "mousetrap";
import * as GQL from "src/core/generated-graphql";
import {
getGenderStrings,

1
ui/v2.5/src/components/Performers/PerformerList.tsx
View file

@ -1,6 +1,7 @@
import _ from "lodash";
import React, { useState } from "react";
import { useHistory } from "react-router-dom";
import Mousetrap from "mousetrap";
import { FindPerformersQueryResult } from "src/core/generated-graphql";
import { queryFindPerformers } from "src/core/StashService";
import { usePerformersList } from "src/hooks";

1
ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx
View file

@ -7,6 +7,7 @@ import {
Col,
Row,
} from "react-bootstrap";
import Mousetrap from "mousetrap";
import * as GQL from "src/core/generated-graphql";
import {
queryScrapeScene,

1
ui/v2.5/src/components/Scenes/SceneDetails/SceneMarkersPanel.tsx
View file

@ -1,5 +1,6 @@
import React, { useState, useEffect } from "react";
import { Button } from "react-bootstrap";
import Mousetrap from "mousetrap";
import * as GQL from "src/core/generated-graphql";
import { WallPanel } from "src/components/Wall/WallPanel";
import { PrimaryTags } from "./PrimaryTags";

1
ui/v2.5/src/components/Scenes/SceneList.tsx
View file

@ -1,6 +1,7 @@
import React, { useState } from "react";
import _ from "lodash";
import { useHistory } from "react-router-dom";
import Mousetrap from "mousetrap";
import {
FindScenesQueryResult,
SlimSceneDataFragment,

1
ui/v2.5/src/components/Scenes/SceneMarkerList.tsx
View file

@ -1,6 +1,7 @@
import _ from "lodash";
import React from "react";
import { useHistory } from "react-router-dom";
import Mousetrap from "mousetrap";
import { FindSceneMarkersQueryResult } from "src/core/generated-graphql";
import { queryFindSceneMarkers } from "src/core/StashService";
import { NavUtils } from "src/utils";

286
ui/v2.5/src/components/Shared/Select.tsx
View file

@ -88,6 +88,142 @@ const getSelectedValues = (selectedItems: ValueType<Option>) =>
)
: [];
const SelectComponent: React.FC<ISelectProps & ITypeProps> = ({
type,
initialIds,
onChange,
className,
items,
selectedOptions,
isLoading,
isDisabled = false,
onCreateOption,
isClearable = true,
creatable = false,
isMulti = false,
onInputChange,
placeholder,
showDropdown = true,
groupHeader,
closeMenuOnSelect = true,
}) => {
const defaultValue =
items.filter((item) => initialIds?.indexOf(item.value) !== -1) ?? null;
const options = groupHeader
? [
{
label: groupHeader,
options: items,
},
]
: items;
const styles = {
option: (base: CSSProperties) => ({
...base,
color: "#000",
}),
container: (base: CSSProperties, props: Props) => ({
...base,
zIndex: props.isFocused ? 10 : base.zIndex,
}),
multiValueRemove: (base: CSSProperties, props: Props) => ({
...base,
color: props.isFocused ? base.color : "#333333",
}),
};
const props = {
options,
value: selectedOptions,
className,
classNamePrefix: "react-select",
onChange,
isMulti,
isClearable,
defaultValue,
noOptionsMessage: () => (type !== "tags" ? "None" : null),
placeholder: isDisabled ? "" : placeholder,
onInputChange,
isDisabled,
isLoading,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
styles: styles as any, // TODO: Typing error, remove at some point
closeMenuOnSelect,
components: {
IndicatorSeparator: () => null,
...((!showDropdown || isDisabled) && { DropdownIndicator: () => null }),
...(isDisabled && { MultiValueRemove: () => null }),
},
};
return creatable ? (
<CreatableSelect
{...props}
isDisabled={isLoading || isDisabled}
onCreateOption={onCreateOption}
/>
) : (
<Select {...props} />
);
};
const FilterSelectComponent: React.FC<
IFilterComponentProps & ITypeProps & IFilterSelectProps
> = (props) => {
const [loading, setLoading] = useState(false);
const selectedIds = props.ids ?? [];
const Toast = useToast();
const { items } = props;
const options = items.map((i) => ({
value: i.id,
label: i.name ?? "",
}));
const selectedOptions = options.filter((option) =>
selectedIds.includes(option.value)
);
const onChange = (selectedItems: ValueType<Option>) => {
const selectedValues = getSelectedValues(selectedItems);
props.onSelect?.(items.filter((item) => selectedValues.includes(item.id)));
};
const onCreate = async (name: string) => {
try {
setLoading(true);
const { item: newItem, message } = await props.onCreate!(name);
props.onSelect?.([
...items.filter((item) => selectedIds.includes(item.id)),
newItem,
]);
setLoading(false);
Toast.success({
content: (
<span>
{message}: <b>{name}</b>
</span>
),
});
} catch (e) {
Toast.error(e);
}
};
return (
<SelectComponent
{...(props as ITypeProps)}
{...(props as IFilterSelectProps)}
isLoading={props.isLoading || loading}
onChange={onChange}
items={options}
selectedOptions={selectedOptions}
onCreateOption={props.creatable ? onCreate : undefined}
/>
);
};
export const SceneGallerySelect: React.FC<ISceneGallerySelect> = (props) => {
const [query, setQuery] = React.useState<string>("");
const { data, loading } = useFindGalleries(getFilter());
@ -201,16 +337,6 @@ export const MarkerTitleSuggest: React.FC<IMarkerSuggestProps> = (props) => {
/>
);
};
export const FilterSelect: React.FC<IFilterProps & ITypeProps> = (props) =>
props.type === "performers" ? (
<PerformerSelect {...(props as IFilterProps)} />
) : props.type === "studios" || props.type === "parent_studios" ? (
<StudioSelect {...(props as IFilterProps)} />
) : props.type === "movies" ? (
<MovieSelect {...(props as IFilterProps)} />
) : (
<TagSelect {...(props as IFilterProps)} />
);
export const PerformerSelect: React.FC<IFilterProps> = (props) => {
const { data, loading } = useAllPerformersForFilter();
@ -308,137 +434,13 @@ export const TagSelect: React.FC<IFilterProps> = (props) => {
);
};
const FilterSelectComponent: React.FC<
IFilterComponentProps & ITypeProps & IFilterSelectProps
> = (props) => {
const [loading, setLoading] = useState(false);
const selectedIds = props.ids ?? [];
const Toast = useToast();
const { items } = props;
const options = items.map((i) => ({
value: i.id,
label: i.name ?? "",
}));
const selectedOptions = options.filter((option) =>
selectedIds.includes(option.value)
);
const onChange = (selectedItems: ValueType<Option>) => {
const selectedValues = getSelectedValues(selectedItems);
props.onSelect?.(items.filter((item) => selectedValues.includes(item.id)));
};
const onCreate = async (name: string) => {
try {
setLoading(true);
const { item: newItem, message } = await props.onCreate!(name);
props.onSelect?.([
...items.filter((item) => selectedIds.includes(item.id)),
newItem,
]);
setLoading(false);
Toast.success({
content: (
<span>
{message}: <b>{name}</b>
</span>
),
});
} catch (e) {
Toast.error(e);
}
};
return (
<SelectComponent
{...(props as ITypeProps)}
{...(props as IFilterSelectProps)}
isLoading={props.isLoading || loading}
onChange={onChange}
items={options}
selectedOptions={selectedOptions}
onCreateOption={props.creatable ? onCreate : undefined}
/>
);
};
const SelectComponent: React.FC<ISelectProps & ITypeProps> = ({
type,
initialIds,
onChange,
className,
items,
selectedOptions,
isLoading,
isDisabled = false,
onCreateOption,
isClearable = true,
creatable = false,
isMulti = false,
onInputChange,
placeholder,
showDropdown = true,
groupHeader,
closeMenuOnSelect = true,
}) => {
const defaultValue =
items.filter((item) => initialIds?.indexOf(item.value) !== -1) ?? null;
const options = groupHeader
? [
{
label: groupHeader,
options: items,
},
]
: items;
const styles = {
option: (base: CSSProperties) => ({
...base,
color: "#000",
}),
container: (base: CSSProperties, props: Props) => ({
...base,
zIndex: props.isFocused ? 10 : base.zIndex,
}),
multiValueRemove: (base: CSSProperties, props: Props) => ({
...base,
color: props.isFocused ? base.color : "#333333",
}),
};
const props = {
options,
value: selectedOptions,
className,
classNamePrefix: "react-select",
onChange,
isMulti,
isClearable,
defaultValue,
noOptionsMessage: () => (type !== "tags" ? "None" : null),
placeholder: isDisabled ? "" : placeholder,
onInputChange,
isDisabled,
isLoading,
styles,
closeMenuOnSelect,
components: {
IndicatorSeparator: () => null,
...((!showDropdown || isDisabled) && { DropdownIndicator: () => null }),
...(isDisabled && { MultiValueRemove: () => null }),
},
};
return creatable ? (
<CreatableSelect
{...props}
isDisabled={isLoading || isDisabled}
onCreateOption={onCreateOption}
/>
export const FilterSelect: React.FC<IFilterProps & ITypeProps> = (props) =>
props.type === "performers" ? (
<PerformerSelect {...(props as IFilterProps)} />
) : props.type === "studios" || props.type === "parent_studios" ? (
<StudioSelect {...(props as IFilterProps)} />
) : props.type === "movies" ? (
<MovieSelect {...(props as IFilterProps)} />
) : (
<Select {...props} />
<TagSelect {...(props as IFilterProps)} />
);
};

1
ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx
View file

@ -2,6 +2,7 @@ import { Table, Tabs, Tab } from "react-bootstrap";
import React, { useEffect, useState } from "react";
import { useParams, useHistory, Link } from "react-router-dom";
import cx from "classnames";
import Mousetrap from "mousetrap";
import * as GQL from "src/core/generated-graphql";
import {

1
ui/v2.5/src/components/Studios/StudioList.tsx
View file

@ -1,6 +1,7 @@
import React, { useState } from "react";
import _ from "lodash";
import { useHistory } from "react-router-dom";
import Mousetrap from "mousetrap";
import { FindStudiosQueryResult } from "src/core/generated-graphql";
import { useStudiosList } from "src/hooks";
import { showWhenSelected } from "src/hooks/ListHook";

1
ui/v2.5/src/components/Tags/TagDetails/Tag.tsx
View file

@ -2,6 +2,7 @@ import { Table, Tabs, Tab } from "react-bootstrap";
import React, { useEffect, useState } from "react";
import { useParams, useHistory } from "react-router-dom";
import cx from "classnames";
import Mousetrap from "mousetrap";
import * as GQL from "src/core/generated-graphql";
import {

1
ui/v2.5/src/components/Tags/TagList.tsx
View file

@ -1,5 +1,6 @@
import React, { useState } from "react";
import _ from "lodash";
import Mousetrap from "mousetrap";
import { FindTagsQueryResult } from "src/core/generated-graphql";
import { ListFilterModel } from "src/models/list-filter/filter";
import { DisplayMode } from "src/models/list-filter/types";

1
ui/v2.5/src/hooks/ListHook.tsx
View file

@ -3,6 +3,7 @@ import queryString from "query-string";
import React, { useCallback, useRef, useState, useEffect } from "react";
import { ApolloError } from "@apollo/client";
import { useHistory, useLocation } from "react-router-dom";
import Mousetrap from "mousetrap";
import {
SlimSceneDataFragment,
SceneMarkerDataFragment,

3
ui/v2.5/tsconfig.json
View file

@ -24,7 +24,8 @@
"baseUrl": ".",
"sourceMap": true,
"allowJs": true,
"isolatedModules": true
"isolatedModules": true,
"noFallthroughCasesInSwitch": true
},
"include": [
"src/**/*"

9868
ui/v2.5/yarn.lock
View file

File diff suppressed because it is too large Load diff