feat: wrap Checkbox to support the prop value

Author: fedeericodl

src/renderer/modules/components/Checkbox.tsx

@@ -1,3 +1,18 @@
+import type React from "react";
 import components from "../common/components";
 
-export default components.Checkbox;
+import type * as Design from "discord-client-types/discord_app/design/web";
+
+const { Checkbox } = components;
+
+type CustomCheckboxProps = Design.CheckboxProps & {
+  value?: boolean;
+};
+
+export type CustomCheckboxType = React.FC<CustomCheckboxProps>;
+
+function CustomCheckbox({ value, ...props }: CustomCheckboxProps): React.ReactElement {
+  return <Checkbox checked={value} {...props} />;
+}
+
+export default CustomCheckbox;

src/renderer/modules/components/HelpMessage.tsx

@@ -1,16 +1,16 @@
 import { getExportsForProps, getFunctionBySource } from "@webpack";
 import components from "../common/components";
 
-import type * as CommonDesign from "discord-client-types/discord_common/packages/design/web";
+import type * as Design from "discord-client-types/discord_app/design/web";
 
-export type CustomHelpMessage = CommonDesign.HelpMessage & {
+export type CustomHelpMessage = Design.HelpMessage & {
   // Backwards compatibility
-  Types: typeof CommonDesign.HelpMessageTypes;
-  HelpMessageTypes: typeof CommonDesign.HelpMessageTypes;
+  Types: typeof Design.HelpMessageTypes;
+  HelpMessageTypes: typeof Design.HelpMessageTypes;
 };
 
 const HelpMessage = getFunctionBySource<CustomHelpMessage>(components, /messageType:\i,action/)!;
-const HelpMessageTypes = getExportsForProps<typeof CommonDesign.HelpMessageTypes>(components, [
+const HelpMessageTypes = getExportsForProps<typeof Design.HelpMessageTypes>(components, [
   "INFO",
   "ERROR",
 ])!;

src/renderer/modules/components/Text.tsx

@@ -1,16 +1,17 @@
 import { parser } from "@common";
+import type React from "react";
 import components from "../common/components";
 
-import type * as CommonDesign from "discord-client-types/discord_common/packages/design/web";
+import type * as Design from "discord-client-types/discord_app/design/web";
 
-interface CustomTextProps extends CommonDesign.TextProps {
+interface CustomTextProps extends Design.TextProps {
   markdown?: boolean;
   allowMarkdownLinks?: boolean;
   allowMarkdownHeading?: boolean;
   allowMarkdownList?: boolean;
 }
 
-export type CustomTextType = CommonDesign.Text &
+export type CustomTextType = Design.Text &
   Record<"Normal" | "H1" | "H2" | "H3" | "H4" | "Eyebrow", React.FC<CustomTextProps>>;
 
 const { Text } = components;

src/renderer/modules/components/index.ts

@@ -44,9 +44,6 @@ importTimeout("Breadcrumbs", import("./Breadcrumbs"), (mod) => (Breadcrumbs = mo
 export let Button: VoidDesign.Button;
 importTimeout("Button", import("./ButtonItem"), (mod) => (Button = mod.Button));
 
-export let Checkbox: Design.Checkbox;
-importTimeout("Checkbox", import("./Checkbox"), (mod) => (Checkbox = mod.default));
-
 export let Clickable: typeof Design.Clickable;
 importTimeout("Clickable", import("./Clickable"), (mod) => (Clickable = mod.default));
 
@@ -104,6 +101,11 @@ export type { ButtonItemType };
 export let ButtonItem: ButtonItemType;
 importTimeout("ButtonItem", import("./ButtonItem"), (mod) => (ButtonItem = mod.ButtonItem));
 
+import type { CustomCheckboxType } from "./Checkbox";
+export type { CustomCheckboxType };
+export let Checkbox: CustomCheckboxType;
+importTimeout("Checkbox", import("./Checkbox"), (mod) => (Checkbox = mod.default));
+
 import type { ColorPickerItemType } from "./ColorPickerItem";
 export type { ColorPickerItemType };
 export let ColorPickerItem: ColorPickerItemType;