Skip to content

Commit 993717c

Browse files
dlabajdlabaj
authored
feat(jss): Updated to use JSS and migrate styles from patternfly's react styles (#60)
* feat(styles): Moved console react-styles to react-console, and added jss. Also added corepack support for legacy yarn. * Updated with review comments.
1 parent dcadf71 commit 993717c

File tree

20 files changed

+520
-69
lines changed

20 files changed

+520
-69
lines changed

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,5 +57,6 @@
5757
"@types/react-dom": "^18",
5858
"@types/file-saver": "^2.0.7",
5959
"tslib": "^2.6.3"
60-
}
60+
},
61+
"packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
6162
}

‎packages/module/package.json‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@
55
"main": "dist/esm/index.js",
66
"module": "dist/esm/index.js",
77
"scripts": {
8-
"build": "yarn build:esm && yarn build:cjs",
8+
"build": "yarn build:esm && yarn build:cjs && yarn cp:css",
99
"build:watch": "npm run build:esm -- --watch",
1010
"build:esm": "tsc --build --verbose ./tsconfig.json",
1111
"build:cjs": "tsc --build --verbose ./tsconfig.cjs.json",
12+
"cp:css": "cp -r src/css dist/css",
1213
"clean": "rimraf dist",
1314
"docs:develop": "pf-docs-framework start",
1415
"docs:build": "pf-docs-framework build all --output public",
@@ -39,6 +40,7 @@
3940
"@patternfly/react-styles": "6.0.0-alpha.23",
4041
"@spice-project/spice-html5": "^0.2.1",
4142
"file-saver": "^1.3.8",
43+
"react-jss": "^10.10.0",
4244
"xterm": "^4.8.1",
4345
"xterm-addon-fit": "^0.2.1"
4446
},
@@ -52,8 +54,8 @@
5254
"@patternfly/patternfly-a11y": "^4.3.1",
5355
"@patternfly/react-code-editor": "6.0.0-alpha.61",
5456
"@patternfly/react-table": "6.0.0-alpha.61",
57+
"monaco-editor": "^0.34.1",
5558
"rimraf": "^2.6.2",
56-
"serve": "^14.2.3",
57-
"monaco-editor": "^0.34.1"
59+
"serve": "^14.2.3"
5860
}
5961
}

‎packages/module/patternfly-docs/content/extensions/react-console/examples/ReactConsole.md‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,7 @@ React console lives in its own package at [`@patternfly/react-console`](https://
1313
import { AccessConsoles, SerialConsole, VncConsole, DesktopViewer } from '@patternfly/react-console';
1414
import { SerialConsoleCustom } from './SerialConsoleCustom.jsx';
1515
import { debounce } from '@patternfly/react-core';
16-
import '@patternfly/react-styles/src/css/components/Consoles/AccessConsoles.css';
17-
import '@patternfly/react-styles/src/css/components/Consoles/DesktopViewer.css';
18-
import '@patternfly/react-styles/src/css/components/Consoles/SerialConsole.css';
19-
import '@patternfly/react-styles/src/css/components/Consoles/VncConsole.css';
20-
import '@patternfly/react-styles/src/css/components/Consoles/xterm.css';
16+
import '@patternfly/react-console/dist/css/xterm.css';
2117

2218
## Examples
2319

‎packages/module/patternfly-docs/generated/extensions/react-console/react.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,7 @@ import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfl
33
import { AccessConsoles, SerialConsole, VncConsole, DesktopViewer } from '@patternfly/react-console';
44
import { SerialConsoleCustom } from '../../../content/extensions/react-console/examples/./SerialConsoleCustom.jsx';
55
import { debounce } from '@patternfly/react-core';
6-
import '@patternfly/react-styles/src/css/components/Consoles/AccessConsoles.css';
7-
import '@patternfly/react-styles/src/css/components/Consoles/DesktopViewer.css';
8-
import '@patternfly/react-styles/src/css/components/Consoles/SerialConsole.css';
9-
import '@patternfly/react-styles/src/css/components/Consoles/VncConsole.css';
10-
import '@patternfly/react-styles/src/css/components/Consoles/xterm.css';
6+
import '@patternfly/react-console/dist/css/xterm.css';
117
import srcImportbasicusage from './react/basic-usage.png';
128
const pageData = {
139
"id": "React console",

‎packages/module/src/components/AccessConsoles/AccessConsoles.tsx‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,26 @@
11
import React from 'react';
2-
import { css } from '@patternfly/react-styles';
32
import { Select, SelectOption, MenuToggle, MenuToggleElement, SelectList } from '@patternfly/react-core';
43

54
import { constants } from '../common/constants';
6-
7-
import styles from '@patternfly/react-styles/css/components/Consoles/AccessConsoles';
8-
import '@patternfly/react-styles/css/components/Consoles/AccessConsoles.css';
5+
import { createUseStyles } from 'react-jss';
96

107
const { NONE_TYPE, SERIAL_CONSOLE_TYPE, VNC_CONSOLE_TYPE, DESKTOP_VIEWER_CONSOLE_TYPE } = constants;
118

9+
const useStyles = createUseStyles({
10+
console: {
11+
display: 'grid',
12+
gridTemplateAreas: '\'actions-main actions-extra\'\n \'main main\'',
13+
rowGap: 'var(--pf-t-global--spacer--md)'
14+
},
15+
consoleActions: {
16+
gridArea: 'actions-main',
17+
display: 'flex',
18+
'> div': {
19+
marginRight: 'var(--pf-t-global--spacer--sm)'
20+
}
21+
}
22+
});
23+
1224
const getChildTypeName = (child: any) =>
1325
child && child.props && child.props.type ? child.props.type : (child && child.type && child.type.displayName) || null;
1426

@@ -48,6 +60,7 @@ export const AccessConsoles: React.FunctionComponent<AccessConsolesProps> = ({
4860
textDesktopViewerConsole = 'Desktop viewer',
4961
preselectedType = null
5062
}) => {
63+
const styles = useStyles();
5164
const typeMap = {
5265
[SERIAL_CONSOLE_TYPE]: textSerialConsole,
5366
[VNC_CONSOLE_TYPE]: textVncConsole,
@@ -135,9 +148,9 @@ export const AccessConsoles: React.FunctionComponent<AccessConsolesProps> = ({
135148
}
136149
});
137150
return (
138-
<div className={css(styles.console)}>
151+
<div className={styles.console}>
139152
{React.Children.toArray(children).length > 1 && (
140-
<div className={css(styles.consoleActions)}>
153+
<div className={styles.consoleActions}>
141154
<Select
142155
aria-label={textSelectConsoleType}
143156
toggle={toggle}

‎packages/module/src/components/AccessConsoles/__snapshots__/AccessConsoles.test.tsx.snap‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,26 @@
33
exports[`AccessConsoles Empty 1`] = `
44
<DocumentFragment>
55
<div
6-
class="pf-v6-c-console"
6+
class="console-0-2-1"
77
/>
88
</DocumentFragment>
99
`;
1010

1111
exports[`AccessConsoles with DesktopViewer 1`] = `
1212
<DocumentFragment>
1313
<div
14-
class="pf-v6-c-console"
14+
class="console-0-2-1"
1515
/>
1616
</DocumentFragment>
1717
`;
1818

1919
exports[`AccessConsoles with SerialConsole and VncConsole as children 1`] = `
2020
<DocumentFragment>
2121
<div
22-
class="pf-v6-c-console"
22+
class="console-0-2-1"
2323
>
2424
<div
25-
class="pf-v6-c-console__actions"
25+
class="consoleActions-0-2-2"
2626
>
2727
<button
2828
aria-expanded="false"
@@ -62,26 +62,26 @@ exports[`AccessConsoles with SerialConsole and VncConsole as children 1`] = `
6262
exports[`AccessConsoles with SerialConsole as a single child 1`] = `
6363
<DocumentFragment>
6464
<div
65-
class="pf-v6-c-console"
65+
class="console-0-2-1"
6666
/>
6767
</DocumentFragment>
6868
`;
6969

7070
exports[`AccessConsoles with VncConsole as a single child 1`] = `
7171
<DocumentFragment>
7272
<div
73-
class="pf-v6-c-console"
73+
class="console-0-2-1"
7474
/>
7575
</DocumentFragment>
7676
`;
7777

7878
exports[`AccessConsoles with preselected SerialConsole 1`] = `
7979
<DocumentFragment>
8080
<div
81-
class="pf-v6-c-console"
81+
class="console-0-2-1"
8282
>
8383
<div
84-
class="pf-v6-c-console__actions-serial"
84+
class="consoleActionsSerial-0-2-4"
8585
>
8686
<button
8787
aria-disabled="false"
@@ -105,7 +105,7 @@ exports[`AccessConsoles with preselected SerialConsole 1`] = `
105105
</button>
106106
</div>
107107
<div
108-
class="pf-v6-c-console__serial"
108+
class="consoleSerial-0-2-3"
109109
>
110110
<div
111111
class="pf-v6-c-empty-state"
@@ -156,7 +156,7 @@ exports[`AccessConsoles with preselected SerialConsole 1`] = `
156156
exports[`AccessConsoles with wrapped SerialConsole as a child 1`] = `
157157
<DocumentFragment>
158158
<div
159-
class="pf-v6-c-console"
159+
class="console-0-2-1"
160160
>
161161
<p>
162162
Serial console text

‎packages/module/src/components/DesktopViewer/DesktopViewer.tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,19 @@
11
import React from 'react';
22

3-
import { css } from '@patternfly/react-styles';
43
import { ManualConnection } from './ManualConnection';
54
import { ConnectWithRemoteViewer, ConnectWithRemoteViewerProps } from './ConnectWithRemoteViewer';
65
import { ConsoleDetailPropType } from './ConsoleDetailPropType';
76

8-
import styles from '@patternfly/react-styles/css/components/Consoles/DesktopViewer';
9-
import '@patternfly/react-styles/css/components/Consoles/DesktopViewer.css';
7+
import { createUseStyles } from 'react-jss';
8+
9+
const useStyles = createUseStyles({
10+
consoleDesktopViewer: {
11+
gridArea: 'main',
12+
display: 'grid',
13+
gap: 'var(--pf-t-global--spacer--md)',
14+
gridTemplateColumns: 'repeat(auto-fit, minmax(20rem, 1fr))'
15+
}
16+
});
1017

1118
export interface DesktopViewerProps extends ConnectWithRemoteViewerProps {
1219
/** Custom content of more-info section */
@@ -51,7 +58,7 @@ export const DesktopViewer: React.FunctionComponent<DesktopViewerProps> = ({
5158
rdp = null,
5259
...props
5360
}: DesktopViewerProps) => (
54-
<div className={css(styles.consoleDesktopViewer)}>
61+
<div className={useStyles().consoleDesktopViewer}>
5562
<ConnectWithRemoteViewer
5663
spice={spice}
5764
vnc={vnc}

‎packages/module/src/components/DesktopViewer/__snapshots__/DesktopViewer.test.tsx.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ exports[`DesktopViewer default MoreInformationContent 1`] = `
143143
exports[`DesktopViewer empty 1`] = `
144144
<DocumentFragment>
145145
<div
146-
class="pf-v6-c-console__desktop-viewer"
146+
class="consoleDesktopViewer-0-2-1"
147147
>
148148
<div
149149
class="pf-v6-c-console__remote-viewer"
@@ -189,7 +189,7 @@ exports[`DesktopViewer empty 1`] = `
189189
exports[`DesktopViewer with Spice and VNC 1`] = `
190190
<DocumentFragment>
191191
<div
192-
class="pf-v6-c-console__desktop-viewer"
192+
class="consoleDesktopViewer-0-2-1"
193193
>
194194
<div
195195
class="pf-v6-c-console__remote-viewer"
@@ -510,7 +510,7 @@ exports[`DesktopViewer with Spice and VNC 1`] = `
510510
exports[`DesktopViewer with Spice, VNC and RDP (different hostname) 1`] = `
511511
<DocumentFragment>
512512
<div
513-
class="pf-v6-c-console__desktop-viewer"
513+
class="consoleDesktopViewer-0-2-1"
514514
>
515515
<div
516516
class="pf-v6-c-console__remote-viewer"
@@ -926,7 +926,7 @@ exports[`DesktopViewer with Spice, VNC and RDP (different hostname) 1`] = `
926926
exports[`DesktopViewer with Spice, VNC and RDP 1`] = `
927927
<DocumentFragment>
928928
<div
929-
class="pf-v6-c-console__desktop-viewer"
929+
class="consoleDesktopViewer-0-2-1"
930930
>
931931
<div
932932
class="pf-v6-c-console__remote-viewer"

‎packages/module/src/components/SerialConsole/SerialConsole.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@
11
import React from 'react';
22

3-
import { css } from '@patternfly/react-styles';
43
import { Button, EmptyState, Spinner, EmptyStateFooter } from '@patternfly/react-core';
54

65
import { XTerm, XTermProps } from './XTerm';
76
import { SerialConsoleActions } from './SerialConsoleActions';
87

98
import { constants } from '../common/constants';
109

11-
import styles from '@patternfly/react-styles/css/components/Consoles/SerialConsole';
12-
import '@patternfly/react-styles/css/components/Consoles/xterm.css';
13-
import '@patternfly/react-styles/css/components/Consoles/SerialConsole.css';
10+
import { createUseStyles } from 'react-jss';
1411

1512
const { CONNECTED, DISCONNECTED, LOADING } = constants;
1613

14+
const useStyles = createUseStyles({
15+
consoleSerial: {
16+
gridArea: 'main'
17+
}
18+
});
19+
1720
export interface SerialConsoleProps extends XTermProps {
1821
/** Initiate connection to backend. In other words, the calling components manages connection state. */
1922
onConnect: () => void;
@@ -63,6 +66,8 @@ const SerialConsoleBase: React.FunctionComponent<SerialConsoleProps> = ({
6366
textLoading = 'Loading ...',
6467
innerRef
6568
}) => {
69+
const styles = useStyles();
70+
6671
React.useEffect(() => {
6772
onConnect();
6873
return () => {
@@ -130,7 +135,7 @@ const SerialConsoleBase: React.FunctionComponent<SerialConsoleProps> = ({
130135
textReset={textReset}
131136
/>
132137
)}
133-
<div className={css(styles.consoleSerial)}>{terminal}</div>
138+
<div className={styles.consoleSerial}>{terminal}</div>
134139
</>
135140
);
136141
};

‎packages/module/src/components/SerialConsole/SerialConsoleActions.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,18 @@
11
import React from 'react';
2-
import { css } from '@patternfly/react-styles';
32
import { Button } from '@patternfly/react-core';
43

5-
import styles from '@patternfly/react-styles/css/components/Consoles/SerialConsole';
4+
import { createUseStyles } from 'react-jss';
65

6+
const useStyles = createUseStyles({
7+
consoleActionsSerial: {
8+
gridArea: 'actions-extra',
9+
display: 'flex',
10+
justifyContent: 'flex-end',
11+
'> button': {
12+
marginRight: 'var(--pf-t-global--spacer--sm)'
13+
}
14+
}
15+
});
716
export interface SerialConsoleActionsProps extends React.HTMLProps<HTMLDivElement> {
817
onDisconnect: () => void;
918
onReset: () => void;
@@ -16,7 +25,7 @@ export const SerialConsoleActions: React.FunctionComponent<SerialConsoleActionsP
1625
textReset = 'Reset',
1726
...props
1827
}: SerialConsoleActionsProps) => (
19-
<div className={css(styles.consoleActionsSerial)}>
28+
<div className={useStyles().consoleActionsSerial}>
2029
<Button variant="secondary" onClick={props.onDisconnect}>
2130
{textDisconnect}
2231
</Button>

0 commit comments

Comments
 (0)