[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
reduxjs · Dec 12, 2023 · 158ba2c · 158ba2c
1 parent b54bc75
commit 158ba2c
Show file tree

Hide file tree

Showing 34 changed files with 609 additions and 685 deletions.
diff --git a/.changeset/large-spoons-yell.md b/.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.
diff --git a/extension/package.json b/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",

diff --git a/extension/test/chrome/extension.spec.js b/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);

diff --git a/extension/test/electron/devpanel.spec.js b/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();
   });

diff --git a/packages/redux-devtools-app/package.json b/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",

diff --git a/packages/redux-devtools-cli/package.json b/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",

diff --git a/packages/redux-devtools-inspector-monitor-test-tab/demo/package.json b/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",

diff --git a/packages/redux-devtools-inspector-monitor-test-tab/demo/src/DevTools.tsx b/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) =>

diff --git a/packages/redux-devtools-inspector-monitor-test-tab/package.json b/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",

diff --git a/packages/redux-devtools-inspector-monitor-trace-tab/package.json b/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",

diff --git a/packages/redux-devtools-inspector-monitor/.eslintrc.js b/packages/redux-devtools-inspector-monitor/.eslintrc.js
@@ -8,6 +8,9 @@ module.exports = {
         tsconfigRootDir: __dirname,
         project: true,
       },
+      rules: {
+        'react/no-unknown-property': ['error', { ignore: ['css'] }],
+      },
     },
     {
       files: ['demo/**/*.ts', 'demo/**/*.tsx'],

diff --git a/packages/redux-devtools-inspector-monitor/babel.config.esm.json b/packages/redux-devtools-inspector-monitor/babel.config.esm.json
@@ -2,7 +2,8 @@
   "presets": [
     ["@babel/preset-env", { "targets": "defaults", "modules": false }],
     "@babel/preset-react",
-    "@babel/preset-typescript"
+    "@babel/preset-typescript",
+    "@emotion/babel-preset-css-prop"
   ],
   "plugins": ["@babel/plugin-transform-runtime"]
 }
diff --git a/packages/redux-devtools-inspector-monitor/babel.config.json b/packages/redux-devtools-inspector-monitor/babel.config.json
@@ -2,7 +2,8 @@
   "presets": [
     ["@babel/preset-env", { "targets": "defaults" }],
     "@babel/preset-react",
-    "@babel/preset-typescript"
+    "@babel/preset-typescript",
+    "@emotion/babel-preset-css-prop"
   ],
   "plugins": ["@babel/plugin-transform-runtime"]
 }
diff --git a/packages/redux-devtools-inspector-monitor/demo/package.json b/packages/redux-devtools-inspector-monitor/demo/package.json
@@ -10,6 +10,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.1",
     "@redux-devtools/core": "^3.13.0",
     "@redux-devtools/dock-monitor": "^3.0.0",
     "@redux-devtools/inspector-monitor": "^4.0.0",

diff --git a/packages/redux-devtools-inspector-monitor/demo/src/DevTools.tsx b/packages/redux-devtools-inspector-monitor/demo/src/DevTools.tsx
@@ -1,10 +1,8 @@
 import React from 'react';
 import { createDevTools } from '@redux-devtools/core';
 import { DockMonitor } from '@redux-devtools/dock-monitor';
-import {
-  InspectorMonitor,
-  base16Themes,
-} from '@redux-devtools/inspector-monitor';
+import { InspectorMonitor } from '@redux-devtools/inspector-monitor';
+import type { Base16ThemeName } from '@redux-devtools/inspector-monitor';
 import { useLocation } from 'react-router-dom';
 import getOptions from './getOptions';
 
@@ -32,7 +30,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) => [

diff --git a/packages/redux-devtools-inspector-monitor/package.json b/packages/redux-devtools-inspector-monitor/package.json
@@ -47,8 +47,6 @@
     "immutable": "^4.3.4",
     "javascript-stringify": "^2.1.0",
     "jsondiffpatch": "^0.5.0",
-    "jss": "^10.10.0",
-    "jss-preset-default": "^10.10.0",
     "lodash.debounce": "^4.0.8",
     "react-base16-styling": "^0.9.1",
     "react-json-tree": "^0.18.0",
@@ -62,6 +60,8 @@
     "@babel/preset-env": "^7.23.5",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
+    "@emotion/babel-preset-css-prop": "^11.11.0",
+    "@emotion/react": "^11.11.1",
     "@redux-devtools/core": "^3.14.0",
     "@types/dateformat": "^5.0.2",
     "@types/hex-rgba": "^1.0.3",
@@ -80,6 +80,7 @@
     "typescript": "~5.2.2"
   },
   "peerDependencies": {
+    "@emotion/react": "^11.0.0",
     "@redux-devtools/core": "^3.0.0",
     "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",

diff --git a/packages/redux-devtools-inspector-monitor/src/ActionList.tsx b/packages/redux-devtools-inspector-monitor/src/ActionList.tsx
@@ -1,7 +1,6 @@
 import React, { ReactNode, useCallback, useLayoutEffect, useRef } from 'react';
 import { Action } from 'redux';
 import { PerformAction } from '@redux-devtools/core';
-import { StylingFunction } from 'react-base16-styling';
 import {
   closestCenter,
   DndContext,
@@ -51,7 +50,6 @@ interface Props<A extends Action<string>> {
   draggableActions: boolean;
   hideMainButtons: boolean | undefined;
   hideActionButtons: boolean | undefined;
-  styling: StylingFunction;
   onSearch: (value: string) => void;
   onSelect: (e: React.MouseEvent<HTMLDivElement>, actionId: number) => void;
   onToggleAction: (actionId: number) => void;
@@ -64,7 +62,6 @@ interface Props<A extends Action<string>> {
 }
 
 export default function ActionList<A extends Action<string>>({
-  styling,
   actions,
   actionIds,
   isWideLayout,
@@ -150,13 +147,29 @@ export default function ActionList<A extends Action<string>>({
     <div
       key="actionList"
       data-testid="actionList"
-      {...styling(
-        ['actionList', isWideLayout && 'actionListWide'],
-        isWideLayout,
-      )}
+      css={[
+        (theme) => ({
+          flexBasis: '40%',
+          flexShrink: 0,
+          overflowX: 'hidden',
+          overflowY: 'auto',
+          borderBottomWidth: '3px',
+          borderBottomStyle: 'double',
+          display: 'flex',
+          flexDirection: 'column',
+
+          backgroundColor: theme.BACKGROUND_COLOR,
+          borderColor: theme.LIST_BORDER_COLOR,
+        }),
+        isWideLayout && {
+          flexBasis: '40%',
+          borderBottom: 'none',
+          borderRightWidth: '3px',
+          borderRightStyle: 'double',
+        },
+      ]}
     >
       <ActionListHeader
-        styling={styling}
         onSearch={onSearch}
         onCommit={onCommit}
         onSweep={onSweep}
@@ -167,7 +180,7 @@ export default function ActionList<A extends Action<string>>({
       />
       <div
         data-testid="actionListRows"
-        {...styling('actionListRows')}
+        css={{ overflow: 'auto' }}
         ref={setNodeRef}
       >
         <DndContext
@@ -183,7 +196,6 @@ export default function ActionList<A extends Action<string>>({
             {filteredActionIds.map((actionId) => (
               <SortableItem key={actionId} actionId={actionId}>
                 <ActionListRow
-                  styling={styling}
                   actionId={actionId}
                   isInitAction={!actionId}
                   isSelected={