[inspector-monitor] Replace jss with Emotion (reduxjs#1560)

* Setup Emotion

* Fix setup

* Start conversion

* actionList

* actionListHeader

* actionListRows

* actionListHeaderSelector

* actionListItem

* actionListItemTime

* actionListItemSelector

* actionListItemName

* actionListHeaderSearch

* actionListHeaderWrapper

* actionPreview

* Remaining css

* Format

* Propagate Emotion dependencies

* Fix tests

* Remove styling prop

* Remove jss

* Remove themeState

* Use color map as Emotion theme

* Rework theme resolution

* Inline CSS

* Remove usage of className

* Fix warning

* Create large-spoons-yell.md

Author: Methuselah96

.changeset/large-spoons-yell.md

@@ -0,0 +1,8 @@
+---
+'@redux-devtools/app': major
+'@redux-devtools/inspector-monitor-test-tab': major
+'@redux-devtools/inspector-monitor-trace-tab': major
+'@redux-devtools/inspector-monitor': major
+---
+
+Replace jss with Emotion in inspector-monitor. `@emotion/react` is now a required peer dependency.

extension/package.json

@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
+    "@emotion/react": "^11.11.1",
     "@redux-devtools/app": "^4.0.1",
     "@redux-devtools/core": "^3.13.2",
     "@redux-devtools/instrument": "^2.1.0",

extension/test/chrome/extension.spec.js

@@ -40,16 +40,14 @@ describe('Chrome extension', function () {
   it("should contain inspector monitor's component", async () => {
     await delay(1000);
     const val = await driver
-      .findElement(webdriver.By.xpath('//div[contains(@class, "inspector-")]'))
+      .findElement(webdriver.By.xpath('//div[@data-testid="inspector"]'))
       .getText();
     expect(val).toBeDefined();
   });
 
   it('should contain an empty actions list', async () => {
     const val = await driver
-      .findElement(
-        webdriver.By.xpath('//div[contains(@class, "actionListRows-")]'),
-      )
+      .findElement(webdriver.By.xpath('//div[@data-testid="actionListRows"]'))
       .getText();
     expect(val).toBe('');
   });
@@ -72,9 +70,7 @@ describe('Chrome extension', function () {
 
     const result = await driver.wait(
       driver
-        .findElement(
-          webdriver.By.xpath('//div[contains(@class, "actionListRows-")]'),
-        )
+        .findElement(webdriver.By.xpath('//div[@data-testid="actionListRows"]'))
         .getText()
         .then((val) => {
           return actionsPattern.test(val);

extension/test/electron/devpanel.spec.js

@@ -89,7 +89,7 @@ describe('DevTools panel for Electron', function () {
   it('should contain INIT action', async () => {
     const element = await driver.wait(
       webdriver.until.elementLocated(
-        webdriver.By.xpath('//div[contains(@class, "actionListRows-")]'),
+        webdriver.By.xpath('//div[@data-testid="actionListRows"]'),
       ),
       5000,
       'Element not found',
@@ -100,7 +100,7 @@ describe('DevTools panel for Electron', function () {
 
   it("should contain Inspector monitor's component", async () => {
     const val = await driver
-      .findElement(webdriver.By.xpath('//div[contains(@class, "inspector-")]'))
+      .findElement(webdriver.By.xpath('//div[@data-testid="inspector"]'))
       .getText();
     expect(val).toBeDefined();
   });

packages/redux-devtools-app/package.json

@@ -72,6 +72,7 @@
     "@babel/preset-env": "^7.23.5",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
+    "@emotion/react": "^11.11.1",
     "@rjsf/core": "^4.2.3",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^14.1.2",
@@ -115,6 +116,7 @@
     "webpack-dev-server": "^4.15.1"
   },
   "peerDependencies": {
+    "@emotion/react": "^11.0.0",
     "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "@types/styled-components": "^5.1.34",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",

packages/redux-devtools-cli/package.json

@@ -42,6 +42,7 @@
   },
   "dependencies": {
     "@apollo/server": "^4.9.5",
+    "@emotion/react": "^11.11.1",
     "@redux-devtools/app": "^4.0.0",
     "@types/react": "^18.2.43",
     "body-parser": "^1.20.2",

packages/redux-devtools-inspector-monitor-test-tab/demo/package.json

@@ -10,6 +10,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.1",
     "@redux-devtools/core": "^3.13.2",
     "@redux-devtools/dock-monitor": "^3.0.2",
     "@redux-devtools/inspector-monitor": "^4.0.1",

packages/redux-devtools-inspector-monitor-test-tab/demo/src/DevTools.tsx

@@ -1,10 +1,7 @@
 import React from 'react';
 import { createDevTools } from '@redux-devtools/core';
-import {
-  InspectorMonitor,
-  base16Themes,
-  Tab,
-} from '@redux-devtools/inspector-monitor';
+import { InspectorMonitor, Tab } from '@redux-devtools/inspector-monitor';
+import type { Base16ThemeName } from '@redux-devtools/inspector-monitor';
 import { DockMonitor } from '@redux-devtools/dock-monitor';
 import { useLocation } from 'react-router-dom';
 import getOptions from './getOptions';
@@ -20,7 +17,7 @@ export const getDevTools = (location: { search: string }) =>
       changeMonitorKey="ctrl-m"
     >
       <InspectorMonitor
-        theme={getOptions(location).theme as keyof typeof base16Themes}
+        theme={getOptions(location).theme as Base16ThemeName}
         invertTheme={!getOptions(location).dark}
         supportImmutable={getOptions(location).supportImmutable}
         tabs={(defaultTabs) =>

packages/redux-devtools-inspector-monitor-test-tab/package.json

@@ -60,6 +60,7 @@
     "@babel/preset-env": "^7.23.5",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
+    "@emotion/react": "^11.11.1",
     "@redux-devtools/core": "^3.14.0",
     "@redux-devtools/inspector-monitor": "^4.1.0",
     "@testing-library/react": "^14.1.2",
@@ -85,6 +86,7 @@
     "typescript": "~5.2.2"
   },
   "peerDependencies": {
+    "@emotion/react": "^11.0.0",
     "@redux-devtools/inspector-monitor": "^4.0.0",
     "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "@types/styled-components": "^5.1.34",

packages/redux-devtools-inspector-monitor-trace-tab/package.json

@@ -47,6 +47,7 @@
     "@babel/preset-env": "^7.23.5",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
+    "@emotion/react": "^11.11.1",
     "@redux-devtools/core": "^3.14.0",
     "@redux-devtools/inspector-monitor": "^4.1.0",
     "@testing-library/react": "^14.1.2",
@@ -76,6 +77,7 @@
     "typescript": "~5.2.2"
   },
   "peerDependencies": {
+    "@emotion/react": "^11.0.0",
     "@redux-devtools/inspector-monitor": "^4.0.0",
     "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",