feat: add Text and Icon hooks (spicetify#2115)

ogohogo · Jan 21, 2023 · d0076f8 · d0076f8
1 parent bc45e48
commit d0076f8
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 0 deletions.
diff --git a/globals.d.ts b/globals.d.ts
@@ -1331,6 +1331,74 @@ declare namespace Spicetify {
              */
             labelClassName?: string;
         };
+        type IconComponentProps = {
+            /**
+             * Icon size
+             * @default 24
+             */
+            iconSize?: number;
+            /**
+             * Icon color
+             * Might not be used by component
+             * @default 'currentColor'
+             */
+            color?: string;
+            /**
+             * Semantic color name
+             * Matches color variables used in xpui
+             * @default Inherit from parent
+             */
+            semanticColor?: 'textBase' | 'textSubdued' | 'textBrightAccent' | 'textNegative' | 'textWarning' | 'textPositive' | 'textAnnouncement' | 'essentialBase' | 'essentialSubdued' | 'essentialBrightAccent' | 'essentialNegative' | 'essentialWarning' | 'essentialPositive' | 'essentialAnnouncement' | 'decorativeBase' | 'decorativeSubdued' | 'backgroundBase' | 'backgroundHighlight' | 'backgroundPress' | 'backgroundElevatedBase' | 'backgroundElevatedHighlight' | 'backgroundElevatedPress' | 'backgroundTintedBase' | 'backgroundTintedHighlight' | 'backgroundTintedPress' | 'backgroundUnsafeForSmallTextBase' | 'backgroundUnsafeForSmallTextHighlight' | 'backgroundUnsafeForSmallTextPress';
+            /**
+             * Icon title
+             * @default ''
+             */
+            title?: string;
+            /**
+             * Title ID (internal)
+             */
+            titleId?: string;
+            /**
+             * Icon description
+             */
+            desc?: string;
+            /**
+             * Description ID (internal)
+             */
+            descId?: string;
+            /**
+             * Auto mirror icon
+             * @default false
+             */
+            autoMirror?: boolean;
+        }
+        type TextComponentProps = {
+            /**
+             * Text color
+             * Might not be used by component
+             * @default 'currentColor'
+             */
+            color?: string;
+            /**
+             * Semantic color name
+             * Matches color variables used in xpui
+             * @default Inherit from parent
+             */
+            semanticColor?: 'textBase' | 'textSubdued' | 'textBrightAccent' | 'textNegative' | 'textWarning' | 'textPositive' | 'textAnnouncement' | 'essentialBase' | 'essentialSubdued' | 'essentialBrightAccent' | 'essentialNegative' | 'essentialWarning' | 'essentialPositive' | 'essentialAnnouncement' | 'decorativeBase' | 'decorativeSubdued' | 'backgroundBase' | 'backgroundHighlight' | 'backgroundPress' | 'backgroundElevatedBase' | 'backgroundElevatedHighlight' | 'backgroundElevatedPress' | 'backgroundTintedBase' | 'backgroundTintedHighlight' | 'backgroundTintedPress' | 'backgroundUnsafeForSmallTextBase' | 'backgroundUnsafeForSmallTextHighlight' | 'backgroundUnsafeForSmallTextPress';
+            /**
+             * Text style variant
+             * @default 'viola'
+             */
+            variant?: 'bass' | 'forte' | 'brio' | 'altoBrio' | 'alto' | 'canon' | 'celloCanon' | 'cello' | 'ballad' | 'balladBold' | 'viola' | 'violaBold' | 'mesto' | 'mestoBold' | 'metronome' | 'finale' | 'finaleBold' | 'minuet' | 'minuetBold';
+            /**
+             * Bottom padding size
+             */
+            paddingBottom?: string;
+            /**
+             * Font weight
+             */
+            weight?: 'book' | 'bold' | 'black';
+        }
         /**
          * Generic context menu provider
          *
@@ -1380,6 +1448,22 @@ declare namespace Spicetify {
          * @see Spicetify.ReactComponent.TooltipProps
          */
         const TooltipWrapper: any;
+        /**
+         * Component to render Spotify-style icon
+         * @since Spotify `1.1.95`
+         *
+         * Props:
+         * @see Spicetify.ReactComponent.IconComponentProps
+         */
+        const IconComponent: any;
+        /**
+         * Component to render Spotify-style text
+         * @since Spotify `1.1.95`
+         *
+         * Props:
+         * @see Spicetify.ReactComponent.TextComponentProps
+         */
+        const TextComponent: any;
     };
 
     /**

diff --git a/src/preprocess/preprocess.go b/src/preprocess/preprocess.go
@@ -445,6 +445,16 @@ if (${1}.popper?.firstChild?.id === "context-menu") {
 		`\(function\(\w+\)\{return \w+\.variant\?function\(\w+\)\{`,
 		`Spicetify._fontStyle=${0}`)
 
+	utils.ReplaceOnce(
+		&input,
+		`=[\w$\.,]+\.forwardRef\(\((?:\([\w,]+\)=>|function\([\w,]+\)\{)\w\.color`,
+		`=Spicetify.ReactComponent.TextComponent${0}`)
+
+	utils.ReplaceOnce(
+		&input,
+		`=(?:\(\w\)=>|function\(\w\)\{)\w+ ?\w=\w\.iconSize`,
+		`=Spicetify.ReactComponent.IconComponent${0}`)
+
 	return input
 }