Remove createThemedComponent

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 { useTheme } from 'styled-components';
-import { Theme } from '../themes/default';
 
+// 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'> {
+> extends Omit<ReactSelectProps<Option, IsMulti, Group>, 'theme'> {}
-  theme: 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>> {
+>(props: SelectProps<Option, IsMulti, Group>) {
-  render() {
+  const uiTheme = useTheme();
-    return (
-      <ReactSelect
-        {...this.props}
-        theme={(theme) => ({
-          ...theme,
-          borderRadius: 0,
-          colors: {
-            ...theme.colors,
 
-            primary: this.props.theme.base05,
+  return (
-            primary50: this.props.theme.base03,
+    <ReactSelect
-            primary25: this.props.theme.base01,
+      {...props}
+      theme={(theme) => ({
+        ...theme,
+        borderRadius: 0,
+        colors: {
+          ...theme.colors,
 
-            dangerLight: this.props.theme.base03,
+          primary: uiTheme.base05,
-            danger: this.props.theme.base07,
+          primary50: uiTheme.base03,
+          primary25: uiTheme.base01,
 
-            neutral0: this.props.theme.base00,
+          dangerLight: uiTheme.base03,
-            neutral5: this.props.theme.base01,
+          danger: uiTheme.base07,
-            neutral10: this.props.theme.base02,
+
-            neutral20: this.props.theme.base03,
+          neutral0: uiTheme.base00,
-            neutral30: this.props.theme.base04,
+          neutral5: uiTheme.base01,
-            neutral40: this.props.theme.base05,
+          neutral10: uiTheme.base02,
-            neutral60: this.props.theme.base06,
+          neutral20: uiTheme.base03,
-            neutral80: this.props.theme.base07,
+          neutral30: uiTheme.base04,
-          },
+          neutral40: uiTheme.base05,
-          spacing: {
+          neutral60: uiTheme.base06,
-            ...theme.spacing,
+          neutral80: uiTheme.base07,
-            baseUnit: 2,
+        },
-            controlHeight: this.props.theme.inputHeight,
+        spacing: {
-          },
+          ...theme.spacing,
-        })}
+          baseUnit: 2,
-        styles={{
+          controlHeight: uiTheme.inputHeight,
-          container: (base) => ({
+        },
-            ...base,
+      })}
-            flexGrow: 1,
+      styles={{
-          }),
+        container: (base) => ({
-          control: (base, props) => ({
+          ...base,
-            ...base,
+          flexGrow: 1,
-            backgroundColor: props.isFocused
+        }),
-              ? props.theme.colors.neutral10
+        control: (base, props) => ({
-              : props.theme.colors.neutral5,
+          ...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,
+        menu: (base) => ({
-              borderColor: props.theme.colors.neutral10,
+          ...base,
-            },
+          zIndex: 10,
-          }),
+        }),
-          menu: (base) => ({
+      }}
-            ...base,
+    />
-            zIndex: 10,
+  );
-          }),
-        }}
-      />
-    );
-  }
 }
 
-export interface ExternalSelectProps<
+export default Select;
-  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;
-};

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",

packages/redux-devtools-ui/src/utils/createThemedComponent.tsx

@@ -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?