From a20735466dbb95cc7c5f9575505c32a5c0bf84fb Mon Sep 17 00:00:00 2001
From: pylixonly <82711525+pylixonly@users.noreply.github.com>
Date: Mon, 21 Oct 2024 17:20:44 +0800
Subject: [PATCH] refactor(ui): update styles & ErrorBoundary

- Remove unused import of createThemedStyleSheet from ErrorBoundary component
- Remove unneccesary import of ErrorBoundary from safeMode.tsx
- Update createStyles function to use Styles.createStyles instead of CompatfulRedesign.createStyles
- Add createLegacyClassComponentStyles function to create themed styles (context-ly) for class components
- Deprecated createThemedStyleSheet function
---
 src/lib/ui/components/ErrorBoundary.tsx |  6 ++-
 src/lib/ui/safeMode.tsx                 |  2 -
 src/lib/ui/styles.ts                    | 52 ++++++++++++++++++++++---
 3 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/src/lib/ui/components/ErrorBoundary.tsx b/src/lib/ui/components/ErrorBoundary.tsx
index 8a5b073..e6799bc 100644
--- a/src/lib/ui/components/ErrorBoundary.tsx
+++ b/src/lib/ui/components/ErrorBoundary.tsx
@@ -1,8 +1,8 @@
 import { Strings } from "@core/i18n";
+import { createLegacyClassComponentStyles, ThemeContext } from "@lib/ui/styles";
 import { React } from "@metro/common";
 import { Button, LegacyFormText } from "@metro/common/components";
 import { Codeblock } from "@ui/components";
-import { createThemedStyleSheet } from "@ui/styles";
 import { Falsy, ScrollView } from "react-native";
 
 type ErrorBoundaryState = {
@@ -16,7 +16,7 @@ export interface ErrorBoundaryProps {
     children: JSX.Element | Falsy | (JSX.Element | Falsy)[];
 }
 
-const styles = createThemedStyleSheet({
+const getStyles = createLegacyClassComponentStyles({
     view: {
         flex: 1,
         flexDirection: "column",
@@ -35,9 +35,11 @@ export default class ErrorBoundary extends React.Component<ErrorBoundaryProps, E
         this.state = { hasErr: false };
     }
 
+    static contextType = ThemeContext;
     static getDerivedStateFromError = (error: Error) => ({ hasErr: true, error });
 
     render() {
+        const styles = getStyles(this.context);
         if (!this.state.hasErr) return this.props.children;
 
         return (
diff --git a/src/lib/ui/safeMode.tsx b/src/lib/ui/safeMode.tsx
index a3c04a7..d8c0cd2 100644
--- a/src/lib/ui/safeMode.tsx
+++ b/src/lib/ui/safeMode.tsx
@@ -13,8 +13,6 @@ import { Codeblock, ErrorBoundary as _ErrorBoundary } from "@ui/components";
 import { createThemedStyleSheet, TextStyleSheet } from "@ui/styles";
 import { Text, View } from "react-native";
 
-const ErrorBoundary = findByNameLazy("ErrorBoundary");
-
 // Let's just pray they have this.
 const { BadgableTabBar } = lazyDestructure(() => findByProps("BadgableTabBar"));
 
diff --git a/src/lib/ui/styles.ts b/src/lib/ui/styles.ts
index c3bb9e5..2c5d7de 100644
--- a/src/lib/ui/styles.ts
+++ b/src/lib/ui/styles.ts
@@ -6,18 +6,60 @@ import { ImageStyle, StyleSheet, TextStyle, ViewStyle } from "react-native";
 
 type NamedStyles<T> = { [P in keyof T]: ViewStyle | TextStyle | ImageStyle };
 
-const CompatfulRedesign = findByPropsLazy("createStyles");
+const Styles = findByPropsLazy("createStyles");
 
+export const { ThemeContext } = lazyDestructure(() => findByProps("ThemeContext"), { hint: "object" });
 export const { TextStyleSheet } = lazyDestructure(() => findByProps("TextStyleSheet")) as unknown as {
-    TextStyleSheet: { [key in DiscordTextStyles]: TextStyle; };
+    TextStyleSheet: Record<DiscordTextStyles, TextStyle>;
 };
 
+/**
+ * Get themed styles based on the current theme
+ * @returns A hook that returns the themed stylesheet
+ * @example
+ * const useStyles = createStyles({
+ *      container: {
+ *          flex: 1,
+ *          backgroundColor: tokens.colors.BACKGROUND_PRIMARY,
+ *      },
+ * });
+ *
+ * function MyComponent() {
+ *      const styles = useStyles();
+ *      return <View style={styles.container} />;
+ * }
+ */
 export function createStyles<T extends NamedStyles<T>>(sheet: T | ((props: any) => T)): () => T {
-    return proxyLazy(() => CompatfulRedesign.createStyles(sheet));
+    return proxyLazy(() => Styles.createStyles(sheet));
 }
 
-// Reimplementation of Discord's createThemedStyleSheet, which was removed since 204201
-// Not exactly a 1:1 reimplementation, but sufficient to keep compatibility with existing plugins
+/**
+ * Get themed styles based on the current theme for class components
+ * @example
+ * const getStyles = createStyles({
+ *      container: {
+ *          flex: 1,
+ *          backgroundColor: tokens.colors.BACKGROUND_PRIMARY,
+ *      },
+ * });
+ *
+ * class MyComponent extends React.Component {
+ *      static contextType = ThemeContext;
+ *      render() {
+ *          const styles = getStyles(this.context);
+ *          return <View style={styles.container} />;
+ *      }
+ * }
+ */
+export function createLegacyClassComponentStyles<T extends NamedStyles<T>>(sheet: T | ((props: any) => T)): (ctxt: typeof ThemeContext) => T {
+    return proxyLazy(() => Styles.createLegacyClassComponentStyles(sheet));
+}
+
+/**
+ * Reimplementation of Discord's createThemedStyleSheet, which was removed since 204201
+ * Not exactly a 1:1 reimplementation, but sufficient to keep compatibility with existing plugins
+ * @deprecated Use createStyles or createLegacyClassComponentStyles instead
+*/
 export function createThemedStyleSheet<T extends StyleSheet.NamedStyles<T>>(sheet: T) {
     for (const key in sheet) {
         // @ts-ignore