feat(components): moved all to use common components

src/renderer/modules/common/components.ts

@@ -1,10 +1,13 @@
-import { waitForProps } from "../webpack";
+import type { LoaderType } from "@components";
+import type { ClickableCompType } from "@components/Clickable";
+import type { OriginalTextType } from "@components/Text";
 import type { ButtonType } from "../components/ButtonItem";
-import type { FormTextCompType, FormTextTypeKey } from "../components/FormText";
-import type { FormNoticeType } from "../components/FormNotice";
-import type { FormItemCompType } from "../components/FormItem";
+import type { CheckboxType } from "../components/CheckboxItem";
+import type { ContextMenuType } from "../components/ContextMenu";
 import type { DividerType } from "../components/Divider";
-import type { CheckboxItemType } from "../components/CheckboxItem";
+import type { FormItemCompType } from "../components/FormItem";
+import type { FormNoticeType } from "../components/FormNotice";
+import type { FormTextCompType, FormTextTypeKey } from "../components/FormText";
 import type { ModalType } from "../components/Modal";
 import type { RadioType } from "../components/RadioItem";
 import type { SelectCompType } from "../components/SelectItem";
@@ -13,34 +16,37 @@ import type { SwitchItemType, SwitchType } from "../components/SwitchItem";
 import type { TextAreaType } from "../components/TextArea";
 import type { TextInputType } from "../components/TextInput";
 import type { OriginalTooltipType } from "../components/Tooltip";
-import type { ContextMenuType } from "../components/ContextMenu";
+import { waitForProps } from "../webpack";
 
 // Expand this as needed
 interface DiscordComponents {
   Button: ButtonType;
-  Checkbox: CheckboxItemType;
-  FormDivider: DividerType
+  Checkbox: CheckboxType;
+  Clickable: ClickableCompType;
+  FormDivider: DividerType;
   FormItem: FormItemCompType;
   FormNotice: FormNoticeType;
   FormSwitch: SwitchItemType;
   FormText: FormTextCompType;
   FormTextTypes: Record<FormTextTypeKey, string>;
   Menu: ContextMenuType["ContextMenu"];
-  MenuSeparator: ContextMenuType["MenuSeparator"];
   MenuCheckboxItem: ContextMenuType["MenuCheckboxItem"];
-  MenuRadioItem: ContextMenuType["MenuRadioItem"];
   MenuControlItem: ContextMenuType["MenuControlItem"];
   MenuGroup: ContextMenuType["MenuGroup"];
   MenuItem: ContextMenuType["MenuItem"];
-  ModalRoot: ModalType["ModalRoot"];
+  MenuRadioItem: ContextMenuType["MenuRadioItem"];
+  MenuSeparator: ContextMenuType["MenuSeparator"];
+  ModalCloseButton: ModalType["ModalCloseButton"];
   ModalContent: ModalType["ModalContent"];
-  ModalHeader: ModalType["ModalHeader"];
   ModalFooter: ModalType["ModalFooter"];
-  ModalCloseButton: ModalType["ModalCloseButton"];
+  ModalHeader: ModalType["ModalHeader"];
+  ModalRoot: ModalType["ModalRoot"];
   RadioGroup: RadioType;
   Select: SelectCompType;
   Slider: SliderCompType;
+  Spinner: LoaderType;
   Switch: SwitchType;
+  Text: OriginalTextType;
   TextArea: TextAreaType;
   TextInput: TextInputType;
   Tooltip: OriginalTooltipType;

src/renderer/modules/components/ButtonItem.tsx

@@ -1,7 +1,7 @@
 import type React from "react";
 import { Divider, Flex, FormText, Tooltip } from ".";
-import { waitForProps } from "../webpack";
 import components from "../common/components";
+import { waitForProps } from "../webpack";
 
 interface ButtonProps extends React.ComponentPropsWithoutRef<"button"> {
   look?: string;

src/renderer/modules/components/Clickable.tsx

@@ -1,19 +1,17 @@
 import type React from "react";
-import { filters, waitForModule } from "../webpack";
+import components from "../common/components";
 
 // TODO: generic type for tags?
 type ClickableProps = React.ComponentPropsWithoutRef<"div"> & {
   tag?: keyof JSX.IntrinsicElements;
   ignoreKeyPress?: boolean;
 };
 
-type ClickableCompType = React.ComponentClass<React.PropsWithChildren<ClickableProps>> & {
+export type ClickableCompType = React.ComponentClass<React.PropsWithChildren<ClickableProps>> & {
   defaultProps: ClickableProps;
 };
 
-const Clickable = await waitForModule<Record<string, ClickableCompType>>(
-  filters.bySource("renderNonInteractive"),
-).then((mod) => Object.values(mod).find((x) => x.prototype?.renderNonInteractive)!);
+const { Clickable } = components;
 
 export type ClickableType = React.FC<React.PropsWithChildren<ClickableProps>>;
 

src/renderer/modules/components/Flex.tsx

@@ -29,4 +29,6 @@ export type FlexType = React.FC<React.PropsWithChildren<FlexProps>> & {
   };
 };
 
-export default await waitForModule<FlexType>(filters.bySource(/HORIZONTAL_REVERSE:\w+?\.horizontalReverse./));
+export default await waitForModule<FlexType>(
+  filters.bySource(/HORIZONTAL_REVERSE:\w+?\.horizontalReverse./),
+);

src/renderer/modules/components/FormItem.tsx

@@ -1,7 +1,7 @@
 import type React from "react";
 import { Divider, FormText } from ".";
-import { waitForProps } from "../webpack";
 import components from "../common/components";
+import { waitForProps } from "../webpack";
 
 interface FormItemCompProps extends Omit<React.ComponentPropsWithoutRef<"div">, "title"> {
   children: React.ReactNode;

src/renderer/modules/components/Loader.tsx

@@ -1,5 +1,5 @@
 import type React from "react";
-import { filters, waitForModule } from "../webpack";
+import components from "../common/components";
 
 const Types = {
   WANDERING_CUBES: "wanderingCubes",
@@ -28,8 +28,4 @@ export type LoaderType = React.FC<LoaderProps | SpinningCircleLoaderProps> & {
   Type: typeof Types;
 };
 
-const Loader = await waitForModule<Record<string, LoaderType>>(
-  filters.bySource('"wanderingCubes"'),
-).then((mod) => Object.values(mod).find((x) => typeof x === "function")!);
-
-export default Loader;
+export default components.Spinner;

src/renderer/modules/components/Notice.tsx

@@ -22,9 +22,7 @@ export type NoticeType = React.FC<NoticeProps> & {
   HelpMessageTypes: typeof Types;
 };
 
-const Notice = await waitForModule<NoticeType>(
-  filters.bySource("WARNING=0]"),
-);
+const Notice = await waitForModule<NoticeType>(filters.bySource("WARNING=0]"));
 Notice.Types = Types;
 
 export default Notice;

src/renderer/modules/components/SliderItem.tsx

@@ -1,7 +1,7 @@
 import type React from "react";
 import { FormItem } from ".";
-import { waitForProps } from "../webpack";
 import components from "../common/components";
+import { waitForProps } from "../webpack";
 
 const MarkerPositions = {
   ABOVE: 0,

src/renderer/modules/components/Text.tsx

@@ -1,7 +1,6 @@
 import { parser } from "@common";
 import type React from "react";
-import type { ObjectExports } from "../../../types";
-import { filters, getFunctionBySource, waitForModule } from "../webpack";
+import components from "../common/components";
 
 export type Variant =
   | "heading-sm/normal"
@@ -81,13 +80,12 @@ interface CustomTextProps extends TextProps {
   allowMarkdownList?: boolean;
 }
 
-type OriginalTextType = React.FC<CustomTextProps>;
+export type OriginalTextType = React.FC<CustomTextProps>;
 
 export type TextType = OriginalTextType &
   Record<"Normal" | "H1" | "H2" | "H3" | "H4" | "Eyebrow", OriginalTextType>;
 
-const mod = await waitForModule<ObjectExports>(filters.bySource("data-text-variant"));
-const OriginalText = getFunctionBySource<OriginalTextType>(mod, "data-text-variant")!;
+const TextComp = components.Text;
 
 function TextWithDefaultProps(defaultProps: CustomTextProps) {
   return (props: CustomTextProps) => {
@@ -105,7 +103,7 @@ function TextWithDefaultProps(defaultProps: CustomTextProps) {
     delete props.allowMarkdownLinks;
     delete props.allowMarkdownHeading;
     delete props.allowMarkdownList;
-    return <OriginalText {...props}>{newChildren}</OriginalText>;
+    return <TextComp {...props}>{newChildren}</TextComp>;
   };
 }