Start conversion

packages/redux-devtools-inspector-monitor/src/DevtoolsInspector.tsx

@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
 import { Base16Theme } from 'redux-devtools-themes';
 import {
   getBase16Theme,
+  invertBase16Theme,
   invertTheme,
   StylingFunction,
 } from 'react-base16-styling';
@@ -15,6 +16,8 @@ import { Delta, DiffContext } from 'jsondiffpatch';
 import {
   createStylingFromTheme,
   base16Themes,
+  inspectorCss,
+  inspectorWideCss,
 } from './utils/createStylingFromTheme';
 import ActionList from './ActionList';
 import ActionPreview, { Tab } from './ActionPreview';
@@ -26,6 +29,7 @@ import {
   reducer,
   updateMonitorState,
 } from './redux';
+import { ThemeProvider } from '@emotion/react';
 
 const {
   // eslint-disable-next-line @typescript-eslint/unbound-method
@@ -296,68 +300,69 @@ class DevtoolsInspector<S, A extends Action<string>> extends PureComponent<
     const { base16Theme, styling } = themeState;
 
     return (
-      <div
-        key="inspector"
-        data-testid="inspector"
-        ref={this.inspectorCreateRef}
-        {...styling(
-          ['inspector', isWideLayout && 'inspectorWide'],
-          isWideLayout,
-        )}
+      <ThemeProvider
+        theme={invertTheme ? invertBase16Theme(base16Theme) : base16Theme}
       >
-        <ActionList
-          {...{
-            actions,
-            actionIds,
-            isWideLayout,
-            searchValue,
-            selectedActionId,
-            startActionId,
-            skippedActionIds,
-            draggableActions,
-            hideMainButtons,
-            hideActionButtons,
-            styling,
-          }}
-          onSearch={this.handleSearch}
-          onSelect={this.handleSelectAction}
-          onToggleAction={this.handleToggleAction}
-          onJumpToState={this.handleJumpToState}
-          onCommit={this.handleCommit}
-          onSweep={this.handleSweep}
-          onReorderAction={this.handleReorderAction}
-          currentActionId={actionIds[currentStateIndex]}
-          lastActionId={getLastActionId(this.props)}
-        />
-        <ActionPreview
-          {...{
-            base16Theme,
-            invertTheme,
-            isWideLayout,
-            tabs,
-            tabName,
-            delta,
-            error,
-            nextState,
-            computedStates,
-            action,
-            actions,
-            selectedActionId,
-            startActionId,
-            dataTypeKey,
-            sortStateTreeAlphabetically,
-            disableStateTreeCollection,
-          }}
-          monitorState={this.props.monitorState}
-          updateMonitorState={this.updateMonitorState}
-          styling={styling}
-          onInspectPath={(path: (string | number)[]) =>
-            this.handleInspectPath(inspectedPathType, path)
-          }
-          inspectedPath={monitorState[inspectedPathType]}
-          onSelectTab={this.handleSelectTab}
-        />
-      </div>
+        <div
+          key="inspector"
+          data-testid="inspector"
+          ref={this.inspectorCreateRef}
+          css={[inspectorCss, isWideLayout && inspectorWideCss]}
+        >
+          <ActionList
+            {...{
+              actions,
+              actionIds,
+              isWideLayout,
+              searchValue,
+              selectedActionId,
+              startActionId,
+              skippedActionIds,
+              draggableActions,
+              hideMainButtons,
+              hideActionButtons,
+              styling,
+            }}
+            onSearch={this.handleSearch}
+            onSelect={this.handleSelectAction}
+            onToggleAction={this.handleToggleAction}
+            onJumpToState={this.handleJumpToState}
+            onCommit={this.handleCommit}
+            onSweep={this.handleSweep}
+            onReorderAction={this.handleReorderAction}
+            currentActionId={actionIds[currentStateIndex]}
+            lastActionId={getLastActionId(this.props)}
+          />
+          <ActionPreview
+            {...{
+              base16Theme,
+              invertTheme,
+              isWideLayout,
+              tabs,
+              tabName,
+              delta,
+              error,
+              nextState,
+              computedStates,
+              action,
+              actions,
+              selectedActionId,
+              startActionId,
+              dataTypeKey,
+              sortStateTreeAlphabetically,
+              disableStateTreeCollection,
+            }}
+            monitorState={this.props.monitorState}
+            updateMonitorState={this.updateMonitorState}
+            styling={styling}
+            onInspectPath={(path: (string | number)[]) =>
+              this.handleInspectPath(inspectedPathType, path)
+            }
+            inspectedPath={monitorState[inspectedPathType]}
+            onSelectTab={this.handleSelectTab}
+          />
+        </div>
+      </ThemeProvider>
     );
   }
 

packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts

@@ -1,6 +1,12 @@
 import jss, { StyleSheet } from 'jss';
 import preset from 'jss-preset-default';
-import { createStyling, StylingFunction, Theme } from 'react-base16-styling';
+import { css } from '@emotion/react';
+import type { Interpolation, Theme } from '@emotion/react';
+import {
+  createStyling,
+  StylingFunction,
+  Theme as Base16StylingTheme,
+} from 'react-base16-styling';
 import rgba from 'hex-rgba';
 import { Base16Theme } from 'redux-devtools-themes';
 import type { CurriedFunction1 } from 'lodash';
@@ -8,6 +14,11 @@ import inspector from '../themes/inspector';
 import * as reduxThemes from 'redux-devtools-themes';
 import * as inspectorThemes from '../themes';
 
+declare module '@emotion/react' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface Theme extends Base16Theme {}
+}
+
 jss.setup(preset());
 
 const colorMap = (theme: Base16Theme) => ({
@@ -41,25 +52,23 @@ type ColorMap = {
   [color in Color]: string;
 };
 
+export const inspectorCss: Interpolation<Theme> = (theme) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+  height: '100%',
+  fontFamily: 'monaco, Consolas, "Lucida Console", monospace',
+  fontSize: '12px',
+  WebkitFontSmoothing: 'antialiased',
+  lineHeight: '1.5em',
+
+  backgroundColor: colorMap(theme).BACKGROUND_COLOR,
+  color: colorMap(theme).TEXT_COLOR,
+});
+
+export const inspectorWideCss = css({ flexDirection: 'column' });
+
 const getSheetFromColorMap = (map: ColorMap) => ({
-  inspector: {
-    display: 'flex',
-    'flex-direction': 'column',
-    width: '100%',
-    height: '100%',
-    'font-family': 'monaco, Consolas, "Lucida Console", monospace',
-    'font-size': '12px',
-    'font-smoothing': 'antialiased',
-    'line-height': '1.5em',
-
-    'background-color': map.BACKGROUND_COLOR,
-    color: map.TEXT_COLOR,
-  },
-
-  inspectorWide: {
-    'flex-direction': 'row',
-  },
-
   actionList: {
     'flex-basis': '40%',
     'flex-shrink': 0,
@@ -386,7 +395,7 @@ const getDefaultThemeStyling = (theme: Base16Theme) => {
 export const base16Themes = { ...reduxThemes, ...inspectorThemes };
 
 export const createStylingFromTheme: CurriedFunction1<
-  Theme | undefined,
+  Base16StylingTheme | undefined,
   StylingFunction
 > = createStyling(getDefaultThemeStyling, {
   defaultBase16: inspector,