[rtk-query-monitor] Replace jss with Emotion (#1568)

* Add Emotion to RTK Query monitor * Add other Emotion setup * Start transition * Convert more styling to Emotion * Convert more styling to Emotion * Finish convert styling to Emotion * import type * Fix test * Remove unused styling * Remove more unused styling * Remove more unused styling * Remove jss * Cleanup * Create perfect-otters-help.md * Update perfect-otters-help.md
reduxjs · Dec 14, 2023 · 6954eb9 · 6954eb9
1 parent 178002d
commit 6954eb9
Show file tree

Hide file tree

Showing 24 changed files with 730 additions and 1,025 deletions.
diff --git a/.changeset/perfect-otters-help.md b/.changeset/perfect-otters-help.md
@@ -0,0 +1,5 @@
+---
+'@redux-devtools/rtk-query-monitor': major
+---
+
+Replace jss with Emotion in inspector-monitor. `@emotion/react` is now a required peer dependency.
diff --git a/packages/redux-devtools-rtk-query-monitor/.eslintrc.js b/packages/redux-devtools-rtk-query-monitor/.eslintrc.js
@@ -8,6 +8,9 @@ module.exports = {
         tsconfigRootDir: __dirname,
         project: true,
       },
+      rules: {
+        'react/no-unknown-property': ['error', { ignore: ['css'] }],
+      },
     },
     {
       files: ['test/**/*.ts', 'test/**/*.tsx'],

diff --git a/packages/redux-devtools-rtk-query-monitor/babel.config.esm.json b/packages/redux-devtools-rtk-query-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-rtk-query-monitor/babel.config.json b/packages/redux-devtools-rtk-query-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-rtk-query-monitor/demo/tsconfig.json b/packages/redux-devtools-rtk-query-monitor/demo/tsconfig.json
@@ -3,5 +3,5 @@
   "compilerOptions": {
     "resolveJsonModule": true
   },
-  "include": ["../src", "src"]
+  "include": ["src"]
 }
diff --git a/packages/redux-devtools-rtk-query-monitor/package.json b/packages/redux-devtools-rtk-query-monitor/package.json
@@ -50,8 +50,6 @@
     "@types/redux-devtools-themes": "^1.0.3",
     "hex-rgba": "^1.0.2",
     "immutable": "^4.3.4",
-    "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",
@@ -65,6 +63,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",
     "@reduxjs/toolkit": "^1.9.7",
     "@testing-library/jest-dom": "^6.1.5",
@@ -91,6 +91,7 @@
     "typescript": "~5.3.3"
   },
   "peerDependencies": {
+    "@emotion/react": "^11.0.0",
     "@redux-devtools/core": "^3.0.0",
     "@reduxjs/toolkit": "^1.0.0 || ^2.0.0",
     "@types/react": "^16.3.0 || ^17.0.0 || ^18.0.0",

diff --git a/packages/redux-devtools-rtk-query-monitor/src/components/NoRtkQueryApi.tsx b/packages/redux-devtools-rtk-query-monitor/src/components/NoRtkQueryApi.tsx
@@ -1,24 +1,31 @@
 import React from 'react';
-import { StyleUtilsContext } from '../styles/createStylingFromTheme';
 
 export function NoRtkQueryApi(): JSX.Element {
   return (
-    <StyleUtilsContext.Consumer>
-      {({ styling }) => (
-        <div {...styling('noApiFound')}>
-          No rtk-query api found.
-          <br />
-          Make sure to follow{' '}
-          <a
-            href="https://redux-toolkit.js.org/rtk-query/overview#basic-usage"
-            target="_blank"
-            rel="noreferrer noopener"
-          >
-            the instructions
-          </a>
-          .
-        </div>
-      )}
-    </StyleUtilsContext.Consumer>
+    <div
+      css={(theme) => ({
+        width: '100%',
+        textAlign: 'center',
+        color: theme.TEXT_COLOR,
+        padding: '1.4em',
+        '& a': {
+          fontSize: 'inherit',
+          color: theme.TEXT_COLOR,
+          textDecoration: 'underline',
+        },
+      })}
+    >
+      No rtk-query api found.
+      <br />
+      Make sure to follow{' '}
+      <a
+        href="https://redux-toolkit.js.org/rtk-query/overview#basic-usage"
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        the instructions
+      </a>
+      .
+    </div>
   );
 }
diff --git a/packages/redux-devtools-rtk-query-monitor/src/components/QueryForm.tsx b/packages/redux-devtools-rtk-query-monitor/src/components/QueryForm.tsx
@@ -1,15 +1,27 @@
 import React, { ReactNode, FormEvent, MouseEvent, ChangeEvent } from 'react';
 import type { DebouncedFunc } from 'lodash';
+import { css } from '@emotion/react';
 import { Select } from '@redux-devtools/ui';
 import { QueryFormValues } from '../types';
-import { StyleUtilsContext } from '../styles/createStylingFromTheme';
+import { StyleUtilsContext } from '../styles/themes';
 import { SelectOption } from '../types';
 import debounce from 'lodash.debounce';
 import { sortQueryOptions, QueryComparators } from '../utils/comparators';
 import { QueryFilters, filterQueryOptions } from '../utils/filters';
 import { SortOrderButton } from './SortOrderButton';
 import { RegexIcon } from './RegexIcon';
 
+const srOnlyCss = css({
+  position: 'absolute',
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: '-1px',
+  overflow: 'hidden',
+  clip: 'rect(0,0,0,0)',
+  border: 0,
+});
+
 export interface QueryFormProps {
   values: QueryFormValues;
   searchQueryRegex: RegExp | null;
@@ -125,19 +137,68 @@ export class QueryForm extends React.PureComponent<
 
     return (
       <StyleUtilsContext.Consumer>
-        {({ styling, base16Theme }) => {
+        {({ base16Theme }) => {
           return (
             <form
               id="rtk-query-monitor-query-selection-form"
               action="#"
               onSubmit={this.handleSubmit}
-              {...styling('queryForm')}
+              css={{
+                display: 'flex',
+                flexFlow: 'column nowrap',
+              }}
             >
-              <div {...styling('queryListHeader')}>
-                <label htmlFor={searchId} {...styling('srOnly')}>
+              <div
+                css={(theme) => ({
+                  display: 'flex',
+                  padding: 4,
+                  flex: '0 0 auto',
+                  alignItems: 'center',
+                  borderBottomWidth: '1px',
+                  borderBottomStyle: 'solid',
+
+                  borderColor: theme.LIST_BORDER_COLOR,
+                })}
+              >
+                <label htmlFor={searchId} css={srOnlyCss}>
                   filter query
                 </label>
-                <div {...styling('querySearch')}>
+                <div
+                  css={(theme) => ({
+                    maxWidth: '65%',
+                    backgroundColor: theme.BACKGROUND_COLOR,
+                    display: 'flex',
+                    alignItems: 'center',
+                    flexFlow: 'row nowrap',
+                    flex: '1 1 auto',
+                    paddingRight: 6,
+                    '& input': {
+                      outline: 'none',
+                      border: 'none',
+                      width: '100%',
+                      flex: '1 1 auto',
+                      padding: '5px 10px',
+                      fontSize: '1em',
+                      position: 'relative',
+                      fontFamily:
+                        'monaco, Consolas, "Lucida Console", monospace',
+
+                      backgroundColor: theme.BACKGROUND_COLOR,
+                      color: theme.TEXT_COLOR,
+
+                      '&::-webkit-input-placeholder': {
+                        color: theme.TEXT_PLACEHOLDER_COLOR,
+                      },
+
+                      '&::-moz-placeholder': {
+                        color: theme.TEXT_PLACEHOLDER_COLOR,
+                      },
+                      '&::-webkit-search-cancel-button': {
+                        WebkitAppearance: 'none',
+                      },
+                    },
+                  })}
+                >
                   <input
                     ref={this.inputSearchRef}
                     type="search"
@@ -152,7 +213,32 @@ export class QueryForm extends React.PureComponent<
                       +(this.state.searchValue.length === 0) || undefined
                     }
                     onClick={this.handleClearSearchClick}
-                    {...styling('closeButton')}
+                    css={(theme) => ({
+                      WebkitAppearance: 'none',
+                      border: 'none',
+                      outline: 'none',
+                      boxShadow: 'none',
+                      display: 'block',
+                      flex: '0 0 auto',
+                      cursor: 'pointer',
+                      background: 'transparent',
+                      position: 'relative',
+                      fontSize: 'inherit',
+                      '&[data-invisible="1"]': {
+                        visibility: 'hidden !important' as 'hidden',
+                      },
+                      '&::after': {
+                        content: '"\u00d7"',
+                        display: 'block',
+                        padding: 4,
+                        fontSize: '1.2em',
+                        color: theme.TEXT_PLACEHOLDER_COLOR,
+                        background: 'transparent',
+                      },
+                      '&:hover::after': {
+                        color: theme.TEXT_COLOR,
+                      },
+                    })}
                   />
                   <button
                     type="button"
@@ -161,12 +247,41 @@ export class QueryForm extends React.PureComponent<
                     data-type={regexToggleType}
                     aria-pressed={isRegexSearch}
                     onClick={this.handleRegexSearchClick}
-                    {...styling('toggleButton')}
+                    css={(theme) => ({
+                      width: '24px',
+                      height: '24px',
+                      display: 'inline-block',
+                      flex: '0 0 auto',
+                      color: theme.TEXT_PLACEHOLDER_COLOR,
+                      cursor: 'pointer',
+                      padding: 0,
+                      fontSize: '0.7em',
+                      letterSpacing: '-0.7px',
+                      outline: 'none',
+                      boxShadow: 'none',
+                      fontWeight: '700',
+                      border: 'none',
+
+                      '&:hover': {
+                        color: theme.TEXT_COLOR,
+                      },
+
+                      backgroundColor: 'transparent',
+                      '&[aria-pressed="true"]': {
+                        color: theme.BACKGROUND_COLOR,
+                        backgroundColor: theme.TEXT_COLOR,
+                      },
+
+                      '&[data-type="error"]': {
+                        color: theme.TEXT_COLOR,
+                        backgroundColor: theme.TOGGLE_BUTTON_ERROR,
+                      },
+                    })}
                   >
                     <RegexIcon />
                   </button>
                 </div>
-                <label htmlFor={selectId} {...styling('srOnly')}>
+                <label htmlFor={selectId} css={srOnlyCss}>
                   filter by
                 </label>
                 <Select<SelectOption<QueryFilters>>
@@ -180,7 +295,24 @@ export class QueryForm extends React.PureComponent<
                   onChange={this.handleSelectFilterChange}
                 />
               </div>
-              <div {...styling('sortBySection')}>
+              <div
+                css={{
+                  display: 'flex',
+                  padding: '0.4em',
+                  '& label': {
+                    display: 'flex',
+                    flex: '0 0 auto',
+                    whiteSpace: 'nowrap',
+                    alignItems: 'center',
+                    paddingRight: '0.4em',
+                  },
+
+                  '& > :last-child': {
+                    flex: '0 0 auto',
+                    marginLeft: '0.4em',
+                  },
+                }}
+              >
                 <label htmlFor={selectId}>Sort by</label>
                 <Select<SelectOption<QueryComparators>>
                   id={selectId}