From 2166ef27db923f303c36a236668772d00b348ea6 Mon Sep 17 00:00:00 2001
From: Nathan Bierema <nbierema@gmail.com>
Date: Sun, 1 Jun 2025 07:31:13 -0400
Subject: [PATCH] Remove createThemedComponent

---
 .../redux-devtools-ui/src/Select/Select.tsx   | 140 ++++++++----------
 .../redux-devtools-ui/src/themes/default.ts   |   5 +
 .../src/utils/createThemedComponent.tsx       |  23 ---
 3 files changed, 65 insertions(+), 103 deletions(-)
 delete mode 100644 packages/redux-devtools-ui/src/utils/createThemedComponent.tsx

diff --git a/packages/redux-devtools-ui/src/Select/Select.tsx b/packages/redux-devtools-ui/src/Select/Select.tsx
index a5166c45..d9eaf175 100644
--- a/packages/redux-devtools-ui/src/Select/Select.tsx
+++ b/packages/redux-devtools-ui/src/Select/Select.tsx
@@ -1,102 +1,82 @@
-import React, { PureComponent, Component, ReactElement } from 'react';
+import React from 'react';
 import ReactSelect, {
   GroupBase,
   Props as ReactSelectProps,
 } from 'react-select';
-import createThemedComponent from '../utils/createThemedComponent';
-import { Theme } from '../themes/default';
+import { useTheme } from 'styled-components';
 
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface SelectProps<
   Option,
   IsMulti extends boolean = false,
   Group extends GroupBase<Option> = GroupBase<Option>,
-> extends Omit<ReactSelectProps<Option, IsMulti, Group>, 'theme'> {
-  theme: Theme;
-}
+> extends Omit<ReactSelectProps<Option, IsMulti, Group>, 'theme'> {}
 
 /**
  * Wrapper around [React Select](https://github.com/JedWatson/react-select).
  */
-export class Select<
+export function Select<
   Option,
   IsMulti extends boolean = false,
   Group extends GroupBase<Option> = GroupBase<Option>,
-> extends (PureComponent || Component)<SelectProps<Option, IsMulti, Group>> {
-  render() {
-    return (
-      <ReactSelect
-        {...this.props}
-        theme={(theme) => ({
-          ...theme,
-          borderRadius: 0,
-          colors: {
-            ...theme.colors,
+>(props: SelectProps<Option, IsMulti, Group>) {
+  const uiTheme = useTheme();
 
-            primary: this.props.theme.base05,
-            primary50: this.props.theme.base03,
-            primary25: this.props.theme.base01,
+  return (
+    <ReactSelect
+      {...props}
+      theme={(theme) => ({
+        ...theme,
+        borderRadius: 0,
+        colors: {
+          ...theme.colors,
 
-            dangerLight: this.props.theme.base03,
-            danger: this.props.theme.base07,
+          primary: uiTheme.base05,
+          primary50: uiTheme.base03,
+          primary25: uiTheme.base01,
 
-            neutral0: this.props.theme.base00,
-            neutral5: this.props.theme.base01,
-            neutral10: this.props.theme.base02,
-            neutral20: this.props.theme.base03,
-            neutral30: this.props.theme.base04,
-            neutral40: this.props.theme.base05,
-            neutral60: this.props.theme.base06,
-            neutral80: this.props.theme.base07,
-          },
-          spacing: {
-            ...theme.spacing,
-            baseUnit: 2,
-            controlHeight: this.props.theme.inputHeight,
-          },
-        })}
-        styles={{
-          container: (base) => ({
-            ...base,
-            flexGrow: 1,
-          }),
-          control: (base, props) => ({
-            ...base,
-            backgroundColor: props.isFocused
-              ? props.theme.colors.neutral10
-              : props.theme.colors.neutral5,
+          dangerLight: uiTheme.base03,
+          danger: uiTheme.base07,
+
+          neutral0: uiTheme.base00,
+          neutral5: uiTheme.base01,
+          neutral10: uiTheme.base02,
+          neutral20: uiTheme.base03,
+          neutral30: uiTheme.base04,
+          neutral40: uiTheme.base05,
+          neutral60: uiTheme.base06,
+          neutral80: uiTheme.base07,
+        },
+        spacing: {
+          ...theme.spacing,
+          baseUnit: 2,
+          controlHeight: uiTheme.inputHeight,
+        },
+      })}
+      styles={{
+        container: (base) => ({
+          ...base,
+          flexGrow: 1,
+        }),
+        control: (base, props) => ({
+          ...base,
+          backgroundColor: props.isFocused
+            ? props.theme.colors.neutral10
+            : props.theme.colors.neutral5,
+          borderColor: props.theme.colors.neutral10,
+
+          '&:hover': {
+            backgroundColor: props.theme.colors.neutral10,
             borderColor: props.theme.colors.neutral10,
-
-            '&:hover': {
-              backgroundColor: props.theme.colors.neutral10,
-              borderColor: props.theme.colors.neutral10,
-            },
-          }),
-          menu: (base) => ({
-            ...base,
-            zIndex: 10,
-          }),
-        }}
-      />
-    );
-  }
+          },
+        }),
+        menu: (base) => ({
+          ...base,
+          zIndex: 10,
+        }),
+      }}
+    />
+  );
 }
 
-export interface ExternalSelectProps<
-  Option,
-  IsMulti extends boolean = false,
-  Group extends GroupBase<Option> = GroupBase<Option>,
-> extends Omit<ReactSelectProps<Option, IsMulti, Group>, 'theme'> {
-  theme?: Theme;
-}
-
-type SelectComponent = <
-  Option,
-  IsMulti extends boolean = false,
-  Group extends GroupBase<Option> = GroupBase<Option>,
->(
-  props: ExternalSelectProps<Option, IsMulti, Group>,
-) => ReactElement;
-
-export default createThemedComponent(Select) as SelectComponent & {
-  theme?: Theme;
-};
+export default Select;
diff --git a/packages/redux-devtools-ui/src/themes/default.ts b/packages/redux-devtools-ui/src/themes/default.ts
index 32724f83..c5806888 100644
--- a/packages/redux-devtools-ui/src/themes/default.ts
+++ b/packages/redux-devtools-ui/src/themes/default.ts
@@ -18,6 +18,11 @@ export interface Theme extends Base16Theme {
   light?: boolean;
 }
 
+declare module 'styled-components' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  interface DefaultTheme extends Theme {}
+}
+
 export default (colors: Base16Theme) => ({
   ...colors,
   fontFamily: "'Source Sans Pro', sans-serif",
diff --git a/packages/redux-devtools-ui/src/utils/createThemedComponent.tsx b/packages/redux-devtools-ui/src/utils/createThemedComponent.tsx
deleted file mode 100644
index 02ec5f01..00000000
--- a/packages/redux-devtools-ui/src/utils/createThemedComponent.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import { withTheme } from 'styled-components';
-import type { Base16Theme } from 'react-base16-styling';
-import getDefaultTheme, { Theme } from '../themes/default';
-
-export default <C extends React.ComponentType<any>>(
-  UnthemedComponent: React.ComponentProps<C> extends { theme?: Theme }
-    ? C
-    : never,
-) => {
-  return withTheme((props) => {
-    return props.theme && props.theme.type ? (
-      <UnthemedComponent {...props} />
-    ) : (
-      <UnthemedComponent
-        {...props}
-        theme={getDefaultTheme((props.theme ?? {}) as Base16Theme)}
-      />
-    );
-  });
-};
-
-// TODO: memoize it?