Plugin api improvements (#4546)

* Expose useToast * Expose components: - studio/tag/performer/gallery selects - date input - country select - folder select
stashapp · Feb 12, 2024 · 46eb011 · 46eb011
1 parent 235c9c9
commit 46eb011
Show file tree

Hide file tree

Showing 10 changed files with 62 additions and 18 deletions.
diff --git a/ui/v2.5/src/components/Galleries/GallerySelect.tsx b/ui/v2.5/src/components/Galleries/GallerySelect.tsx
@@ -27,14 +27,15 @@ import { useCompare } from "src/hooks/state";
 import { Placement } from "react-bootstrap/esm/Overlay";
 import { sortByRelevance } from "src/utils/query";
 import { galleryTitle } from "src/core/galleries";
+import { PatchComponent } from "src/pluginApi";
 
 export type Gallery = Pick<GQL.Gallery, "id" | "title"> & {
   files: Pick<GQL.GalleryFile, "path">[];
   folder?: Pick<GQL.Folder, "path"> | null;
 };
 type Option = SelectOption<Gallery>;
 
-export const GallerySelect: React.FC<
+const _GallerySelect: React.FC<
   IFilterProps &
     IFilterValueProps<Gallery> & {
       hoverPlacement?: Placement;
@@ -173,9 +174,11 @@ export const GallerySelect: React.FC<
   );
 };
 
-export const GalleryIDSelect: React.FC<
-  IFilterProps & IFilterIDProps<Gallery>
-> = (props) => {
+export const GallerySelect = PatchComponent("GallerySelect", _GallerySelect);
+
+const _GalleryIDSelect: React.FC<IFilterProps & IFilterIDProps<Gallery>> = (
+  props
+) => {
   const { ids, onSelect: onSelectValues } = props;
 
   const [values, setValues] = useState<Gallery[]>([]);
@@ -220,3 +223,8 @@ export const GalleryIDSelect: React.FC<
 
   return <GallerySelect {...props} values={values} onSelect={onSelect} />;
 };
+
+export const GalleryIDSelect = PatchComponent(
+  "GalleryIDSelect",
+  _GalleryIDSelect
+);
diff --git a/ui/v2.5/src/components/Performers/PerformerSelect.tsx b/ui/v2.5/src/components/Performers/PerformerSelect.tsx
@@ -27,6 +27,7 @@ import {
 import { useCompare } from "src/hooks/state";
 import { Link } from "react-router-dom";
 import { sortByRelevance } from "src/utils/query";
+import { PatchComponent } from "src/pluginApi";
 
 export type SelectObject = {
   id: string;
@@ -40,7 +41,7 @@ export type Performer = Pick<
 >;
 type Option = SelectOption<Performer>;
 
-export const PerformerSelect: React.FC<
+const _PerformerSelect: React.FC<
   IFilterProps & IFilterValueProps<Performer>
 > = (props) => {
   const [createPerformer] = usePerformerCreate();
@@ -236,9 +237,14 @@ export const PerformerSelect: React.FC<
   );
 };
 
-export const PerformerIDSelect: React.FC<
-  IFilterProps & IFilterIDProps<Performer>
-> = (props) => {
+export const PerformerSelect = PatchComponent(
+  "PerformerSelect",
+  _PerformerSelect
+);
+
+const _PerformerIDSelect: React.FC<IFilterProps & IFilterIDProps<Performer>> = (
+  props
+) => {
   const { ids, onSelect: onSelectValues } = props;
 
   const [values, setValues] = useState<Performer[]>([]);
@@ -283,3 +289,8 @@ export const PerformerIDSelect: React.FC<
 
   return <PerformerSelect {...props} values={values} onSelect={onSelect} />;
 };
+
+export const PerformerIDSelect = PatchComponent(
+  "PerformerIDSelect",
+  _PerformerIDSelect
+);
diff --git a/ui/v2.5/src/components/Shared/CountrySelect.tsx b/ui/v2.5/src/components/Shared/CountrySelect.tsx
@@ -3,6 +3,7 @@ import Creatable from "react-select/creatable";
 import { useIntl } from "react-intl";
 import { getCountries } from "src/utils/country";
 import { CountryLabel } from "./CountryLabel";
+import { PatchComponent } from "src/pluginApi";
 
 interface IProps {
   value?: string;
@@ -14,7 +15,7 @@ interface IProps {
   menuPortalTarget?: HTMLElement | null;
 }
 
-export const CountrySelect: React.FC<IProps> = ({
+const _CountrySelect: React.FC<IProps> = ({
   value,
   onChange,
   disabled = false,
@@ -50,3 +51,5 @@ export const CountrySelect: React.FC<IProps> = ({
     />
   );
 };
+
+export const CountrySelect = PatchComponent("CountrySelect", _CountrySelect);
diff --git a/ui/v2.5/src/components/Shared/DateInput.tsx b/ui/v2.5/src/components/Shared/DateInput.tsx
@@ -7,6 +7,7 @@ import { Icon } from "./Icon";
 
 import "react-datepicker/dist/react-datepicker.css";
 import { useIntl } from "react-intl";
+import { PatchComponent } from "src/pluginApi";
 
 interface IProps {
   disabled?: boolean;
@@ -28,7 +29,7 @@ const ShowPickerButton = forwardRef<
   </Button>
 ));
 
-export const DateInput: React.FC<IProps> = (props: IProps) => {
+const _DateInput: React.FC<IProps> = (props: IProps) => {
   const intl = useIntl();
 
   const date = useMemo(() => {
@@ -98,3 +99,5 @@ export const DateInput: React.FC<IProps> = (props: IProps) => {
     </div>
   );
 };
+
+export const DateInput = PatchComponent("DateInput", _DateInput);
diff --git a/ui/v2.5/src/components/Shared/FolderSelect/FolderSelect.tsx b/ui/v2.5/src/components/Shared/FolderSelect/FolderSelect.tsx
@@ -7,6 +7,7 @@ import { faEllipsis, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { useDebounce } from "src/hooks/debounce";
 import TextUtils from "src/utils/text";
 import { useDirectoryPaths } from "./useDirectoryPaths";
+import { PatchComponent } from "src/pluginApi";
 
 interface IProps {
   currentDirectory: string;
@@ -18,7 +19,7 @@ interface IProps {
   hideError?: boolean;
 }
 
-export const FolderSelect: React.FC<IProps> = ({
+const _FolderSelect: React.FC<IProps> = ({
   currentDirectory,
   onChangeDirectory,
   defaultDirectories = [],
@@ -132,3 +133,5 @@ export const FolderSelect: React.FC<IProps> = ({
     </>
   );
 };
+
+export const FolderSelect = PatchComponent("FolderSelect", _FolderSelect);
diff --git a/ui/v2.5/src/components/Studios/StudioSelect.tsx b/ui/v2.5/src/components/Studios/StudioSelect.tsx
@@ -27,6 +27,7 @@ import {
 import { useCompare } from "src/hooks/state";
 import { Placement } from "react-bootstrap/esm/Overlay";
 import { sortByRelevance } from "src/utils/query";
+import { PatchComponent } from "src/pluginApi";
 
 export type SelectObject = {
   id: string;
@@ -37,7 +38,7 @@ export type SelectObject = {
 export type Studio = Pick<GQL.Studio, "id" | "name" | "aliases" | "image_path">;
 type Option = SelectOption<Studio>;
 
-export const StudioSelect: React.FC<
+const _StudioSelect: React.FC<
   IFilterProps &
     IFilterValueProps<Studio> & {
       hoverPlacement?: Placement;
@@ -216,7 +217,9 @@ export const StudioSelect: React.FC<
   );
 };
 
-export const StudioIDSelect: React.FC<IFilterProps & IFilterIDProps<Studio>> = (
+export const StudioSelect = PatchComponent("StudioSelect", _StudioSelect);
+
+const _StudioIDSelect: React.FC<IFilterProps & IFilterIDProps<Studio>> = (
   props
 ) => {
   const { ids, onSelect: onSelectValues } = props;
@@ -263,3 +266,5 @@ export const StudioIDSelect: React.FC<IFilterProps & IFilterIDProps<Studio>> = (
 
   return <StudioSelect {...props} values={values} onSelect={onSelect} />;
 };
+
+export const StudioIDSelect = PatchComponent("StudioIDSelect", _StudioIDSelect);
diff --git a/ui/v2.5/src/components/Tags/TagSelect.tsx b/ui/v2.5/src/components/Tags/TagSelect.tsx
@@ -28,6 +28,7 @@ import { useCompare } from "src/hooks/state";
 import { TagPopover } from "./TagPopover";
 import { Placement } from "react-bootstrap/esm/Overlay";
 import { sortByRelevance } from "src/utils/query";
+import { PatchComponent } from "src/pluginApi";
 
 export type SelectObject = {
   id: string;
@@ -38,7 +39,7 @@ export type SelectObject = {
 export type Tag = Pick<GQL.Tag, "id" | "name" | "aliases" | "image_path">;
 type Option = SelectOption<Tag>;
 
-export const TagSelect: React.FC<
+const _TagSelect: React.FC<
   IFilterProps &
     IFilterValueProps<Tag> & {
       hoverPlacement?: Placement;
@@ -236,9 +237,9 @@ export const TagSelect: React.FC<
   );
 };
 
-export const TagIDSelect: React.FC<IFilterProps & IFilterIDProps<Tag>> = (
-  props
-) => {
+export const TagSelect = PatchComponent("TagSelect", _TagSelect);
+
+const _TagIDSelect: React.FC<IFilterProps & IFilterIDProps<Tag>> = (props) => {
   const { ids, onSelect: onSelectValues } = props;
 
   const [values, setValues] = useState<Tag[]>([]);
@@ -283,3 +284,5 @@ export const TagIDSelect: React.FC<IFilterProps & IFilterIDProps<Tag>> = (
 
   return <TagSelect {...props} values={values} onSelect={onSelect} />;
 };
+
+export const TagIDSelect = PatchComponent("TagIDSelect", _TagIDSelect);
diff --git a/ui/v2.5/src/docs/en/Manual/UIPluginApi.md b/ui/v2.5/src/docs/en/Manual/UIPluginApi.md
@@ -82,6 +82,7 @@ Returns a `Promise<void>` that resolves when all of the components have been loa
 
 This namespace provides access to the following core utility hooks:
 - `useSpriteInfo`
+- `useToast`
 
 It also provides plugin-specific hooks.
 

diff --git a/ui/v2.5/src/hooks/Toast.tsx b/ui/v2.5/src/hooks/Toast.tsx
@@ -8,7 +8,7 @@ import React, {
 import { Toast } from "react-bootstrap";
 import { errorToString } from "src/utils";
 
-interface IToast {
+export interface IToast {
   header?: string;
   content: React.ReactNode | string;
   delay?: number;

diff --git a/ui/v2.5/src/pluginApi.tsx b/ui/v2.5/src/pluginApi.tsx
@@ -15,6 +15,7 @@ import * as Intl from "react-intl";
 import * as FontAwesomeSolid from "@fortawesome/free-solid-svg-icons";
 import * as FontAwesomeRegular from "@fortawesome/free-regular-svg-icons";
 import { useSpriteInfo } from "./hooks/sprite";
+import { useToast } from "./hooks/Toast";
 
 // due to code splitting, some components may not have been loaded when a plugin
 // page is loaded. This function will load all components passed to it.
@@ -94,10 +95,15 @@ function registerRoute(path: string, component: React.FC) {
 
 export function RegisterComponent(component: string, fn: Function) {
   // register with the plugin api
+  if (components[component]) {
+    throw new Error("Component " + component + " has already been registered");
+  }
+
   components[component] = fn;
 
   return fn;
 }
+
 export const PluginApi = {
   React,
   ReactDOM,
@@ -131,6 +137,7 @@ export const PluginApi = {
   hooks: {
     useLoadComponents,
     useSpriteInfo,
+    useToast,
   },
   patch: {
     // intercept the arguments of supported functions