Skip to content

Commit 6954eb9

Browse files
Methuselah96Methuselah96
authored
[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
1 parent 178002d commit 6954eb9

24 files changed

+730
-1025
lines changed

‎.changeset/perfect-otters-help.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@redux-devtools/rtk-query-monitor': major
3+
---
4+
5+
Replace jss with Emotion in inspector-monitor. `@emotion/react` is now a required peer dependency.

‎packages/redux-devtools-rtk-query-monitor/.eslintrc.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ module.exports = {
88
tsconfigRootDir: __dirname,
99
project: true,
1010
},
11+
rules: {
12+
'react/no-unknown-property': ['error', { ignore: ['css'] }],
13+
},
1114
},
1215
{
1316
files: ['test/**/*.ts', 'test/**/*.tsx'],

‎packages/redux-devtools-rtk-query-monitor/babel.config.esm.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
"presets": [
33
["@babel/preset-env", { "targets": "defaults", "modules": false }],
44
"@babel/preset-react",
5-
"@babel/preset-typescript"
5+
"@babel/preset-typescript",
6+
"@emotion/babel-preset-css-prop"
67
],
78
"plugins": ["@babel/plugin-transform-runtime"]
89
}

‎packages/redux-devtools-rtk-query-monitor/babel.config.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
"presets": [
33
["@babel/preset-env", { "targets": "defaults" }],
44
"@babel/preset-react",
5-
"@babel/preset-typescript"
5+
"@babel/preset-typescript",
6+
"@emotion/babel-preset-css-prop"
67
],
78
"plugins": ["@babel/plugin-transform-runtime"]
89
}

‎packages/redux-devtools-rtk-query-monitor/demo/tsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@
33
"compilerOptions": {
44
"resolveJsonModule": true
55
},
6-
"include": ["../src", "src"]
6+
"include": ["src"]
77
}

‎packages/redux-devtools-rtk-query-monitor/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,6 @@
5050
"@types/redux-devtools-themes": "^1.0.3",
5151
"hex-rgba": "^1.0.2",
5252
"immutable": "^4.3.4",
53-
"jss": "^10.10.0",
54-
"jss-preset-default": "^10.10.0",
5553
"lodash.debounce": "^4.0.8",
5654
"react-base16-styling": "^0.9.1",
5755
"react-json-tree": "^0.18.0",
@@ -65,6 +63,8 @@
6563
"@babel/preset-env": "^7.23.5",
6664
"@babel/preset-react": "^7.23.3",
6765
"@babel/preset-typescript": "^7.23.3",
66+
"@emotion/babel-preset-css-prop": "^11.11.0",
67+
"@emotion/react": "^11.11.1",
6868
"@redux-devtools/core": "^3.14.0",
6969
"@reduxjs/toolkit": "^1.9.7",
7070
"@testing-library/jest-dom": "^6.1.5",
@@ -91,6 +91,7 @@
9191
"typescript": "~5.3.3"
9292
},
9393
"peerDependencies": {
94+
"@emotion/react": "^11.0.0",
9495
"@redux-devtools/core": "^3.0.0",
9596
"@reduxjs/toolkit": "^1.0.0 || ^2.0.0",
9697
"@types/react": "^16.3.0 || ^17.0.0 || ^18.0.0",

‎packages/redux-devtools-rtk-query-monitor/src/components/NoRtkQueryApi.tsx‎

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,31 @@
11
import React from 'react';
2-
import { StyleUtilsContext } from '../styles/createStylingFromTheme';
32

43
export function NoRtkQueryApi(): JSX.Element {
54
return (
6-
<StyleUtilsContext.Consumer>
7-
{({ styling }) => (
8-
<div {...styling('noApiFound')}>
9-
No rtk-query api found.
10-
<br />
11-
Make sure to follow{' '}
12-
<a
13-
href="https://redux-toolkit.js.org/rtk-query/overview#basic-usage"
14-
target="_blank"
15-
rel="noreferrer noopener"
16-
>
17-
the instructions
18-
</a>
19-
.
20-
</div>
21-
)}
22-
</StyleUtilsContext.Consumer>
5+
<div
6+
css={(theme) => ({
7+
width: '100%',
8+
textAlign: 'center',
9+
color: theme.TEXT_COLOR,
10+
padding: '1.4em',
11+
'& a': {
12+
fontSize: 'inherit',
13+
color: theme.TEXT_COLOR,
14+
textDecoration: 'underline',
15+
},
16+
})}
17+
>
18+
No rtk-query api found.
19+
<br />
20+
Make sure to follow{' '}
21+
<a
22+
href="https://redux-toolkit.js.org/rtk-query/overview#basic-usage"
23+
target="_blank"
24+
rel="noreferrer noopener"
25+
>
26+
the instructions
27+
</a>
28+
.
29+
</div>
2330
);
2431
}

‎packages/redux-devtools-rtk-query-monitor/src/components/QueryForm.tsx‎

Lines changed: 142 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,27 @@
11
import React, { ReactNode, FormEvent, MouseEvent, ChangeEvent } from 'react';
22
import type { DebouncedFunc } from 'lodash';
3+
import { css } from '@emotion/react';
34
import { Select } from '@redux-devtools/ui';
45
import { QueryFormValues } from '../types';
5-
import { StyleUtilsContext } from '../styles/createStylingFromTheme';
6+
import { StyleUtilsContext } from '../styles/themes';
67
import { SelectOption } from '../types';
78
import debounce from 'lodash.debounce';
89
import { sortQueryOptions, QueryComparators } from '../utils/comparators';
910
import { QueryFilters, filterQueryOptions } from '../utils/filters';
1011
import { SortOrderButton } from './SortOrderButton';
1112
import { RegexIcon } from './RegexIcon';
1213

14+
const srOnlyCss = css({
15+
position: 'absolute',
16+
width: 1,
17+
height: 1,
18+
padding: 0,
19+
margin: '-1px',
20+
overflow: 'hidden',
21+
clip: 'rect(0,0,0,0)',
22+
border: 0,
23+
});
24+
1325
export interface QueryFormProps {
1426
values: QueryFormValues;
1527
searchQueryRegex: RegExp | null;
@@ -125,19 +137,68 @@ export class QueryForm extends React.PureComponent<
125137

126138
return (
127139
<StyleUtilsContext.Consumer>
128-
{({ styling, base16Theme }) => {
140+
{({ base16Theme }) => {
129141
return (
130142
<form
131143
id="rtk-query-monitor-query-selection-form"
132144
action="#"
133145
onSubmit={this.handleSubmit}
134-
{...styling('queryForm')}
146+
css={{
147+
display: 'flex',
148+
flexFlow: 'column nowrap',
149+
}}
135150
>
136-
<div {...styling('queryListHeader')}>
137-
<label htmlFor={searchId} {...styling('srOnly')}>
151+
<div
152+
css={(theme) => ({
153+
display: 'flex',
154+
padding: 4,
155+
flex: '0 0 auto',
156+
alignItems: 'center',
157+
borderBottomWidth: '1px',
158+
borderBottomStyle: 'solid',
159+
160+
borderColor: theme.LIST_BORDER_COLOR,
161+
})}
162+
>
163+
<label htmlFor={searchId} css={srOnlyCss}>
138164
filter query
139165
</label>
140-
<div {...styling('querySearch')}>
166+
<div
167+
css={(theme) => ({
168+
maxWidth: '65%',
169+
backgroundColor: theme.BACKGROUND_COLOR,
170+
display: 'flex',
171+
alignItems: 'center',
172+
flexFlow: 'row nowrap',
173+
flex: '1 1 auto',
174+
paddingRight: 6,
175+
'& input': {
176+
outline: 'none',
177+
border: 'none',
178+
width: '100%',
179+
flex: '1 1 auto',
180+
padding: '5px 10px',
181+
fontSize: '1em',
182+
position: 'relative',
183+
fontFamily:
184+
'monaco, Consolas, "Lucida Console", monospace',
185+
186+
backgroundColor: theme.BACKGROUND_COLOR,
187+
color: theme.TEXT_COLOR,
188+
189+
'&::-webkit-input-placeholder': {
190+
color: theme.TEXT_PLACEHOLDER_COLOR,
191+
},
192+
193+
'&::-moz-placeholder': {
194+
color: theme.TEXT_PLACEHOLDER_COLOR,
195+
},
196+
'&::-webkit-search-cancel-button': {
197+
WebkitAppearance: 'none',
198+
},
199+
},
200+
})}
201+
>
141202
<input
142203
ref={this.inputSearchRef}
143204
type="search"
@@ -152,7 +213,32 @@ export class QueryForm extends React.PureComponent<
152213
+(this.state.searchValue.length === 0) || undefined
153214
}
154215
onClick={this.handleClearSearchClick}
155-
{...styling('closeButton')}
216+
css={(theme) => ({
217+
WebkitAppearance: 'none',
218+
border: 'none',
219+
outline: 'none',
220+
boxShadow: 'none',
221+
display: 'block',
222+
flex: '0 0 auto',
223+
cursor: 'pointer',
224+
background: 'transparent',
225+
position: 'relative',
226+
fontSize: 'inherit',
227+
'&[data-invisible="1"]': {
228+
visibility: 'hidden !important' as 'hidden',
229+
},
230+
'&::after': {
231+
content: '"\u00d7"',
232+
display: 'block',
233+
padding: 4,
234+
fontSize: '1.2em',
235+
color: theme.TEXT_PLACEHOLDER_COLOR,
236+
background: 'transparent',
237+
},
238+
'&:hover::after': {
239+
color: theme.TEXT_COLOR,
240+
},
241+
})}
156242
/>
157243
<button
158244
type="button"
@@ -161,12 +247,41 @@ export class QueryForm extends React.PureComponent<
161247
data-type={regexToggleType}
162248
aria-pressed={isRegexSearch}
163249
onClick={this.handleRegexSearchClick}
164-
{...styling('toggleButton')}
250+
css={(theme) => ({
251+
width: '24px',
252+
height: '24px',
253+
display: 'inline-block',
254+
flex: '0 0 auto',
255+
color: theme.TEXT_PLACEHOLDER_COLOR,
256+
cursor: 'pointer',
257+
padding: 0,
258+
fontSize: '0.7em',
259+
letterSpacing: '-0.7px',
260+
outline: 'none',
261+
boxShadow: 'none',
262+
fontWeight: '700',
263+
border: 'none',
264+
265+
'&:hover': {
266+
color: theme.TEXT_COLOR,
267+
},
268+
269+
backgroundColor: 'transparent',
270+
'&[aria-pressed="true"]': {
271+
color: theme.BACKGROUND_COLOR,
272+
backgroundColor: theme.TEXT_COLOR,
273+
},
274+
275+
'&[data-type="error"]': {
276+
color: theme.TEXT_COLOR,
277+
backgroundColor: theme.TOGGLE_BUTTON_ERROR,
278+
},
279+
})}
165280
>
166281
<RegexIcon />
167282
</button>
168283
</div>
169-
<label htmlFor={selectId} {...styling('srOnly')}>
284+
<label htmlFor={selectId} css={srOnlyCss}>
170285
filter by
171286
</label>
172287
<Select<SelectOption<QueryFilters>>
@@ -180,7 +295,24 @@ export class QueryForm extends React.PureComponent<
180295
onChange={this.handleSelectFilterChange}
181296
/>
182297
</div>
183-
<div {...styling('sortBySection')}>
298+
<div
299+
css={{
300+
display: 'flex',
301+
padding: '0.4em',
302+
'& label': {
303+
display: 'flex',
304+
flex: '0 0 auto',
305+
whiteSpace: 'nowrap',
306+
alignItems: 'center',
307+
paddingRight: '0.4em',
308+
},
309+
310+
'& > :last-child': {
311+
flex: '0 0 auto',
312+
marginLeft: '0.4em',
313+
},
314+
}}
315+
>
184316
<label htmlFor={selectId}>Sort by</label>
185317
<Select<SelectOption<QueryComparators>>
186318
id={selectId}

0 commit comments

Comments
 (0)