[inspector-monitor] Replace jss with Emotion (#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",