feat(jss): Updated to use JSS and migrate styles from patternfly's re…

…act 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.
patternfly · Jul 25, 2024 · 993717c · 993717c
1 parent dcadf71
commit 993717c
Show file tree

Hide file tree

Showing 20 changed files with 520 additions and 69 deletions.
diff --git a/package.json b/package.json
@@ -57,5 +57,6 @@
     "@types/react-dom": "^18",
     "@types/file-saver": "^2.0.7",
     "tslib": "^2.6.3"
-  }
+  },
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }
diff --git a/packages/module/package.json b/packages/module/package.json
@@ -5,10 +5,11 @@
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
   "scripts": {
-    "build": "yarn build:esm && yarn build:cjs",
+    "build": "yarn build:esm && yarn build:cjs && yarn cp:css",
     "build:watch": "npm run build:esm -- --watch",
     "build:esm": "tsc --build --verbose ./tsconfig.json",
     "build:cjs": "tsc --build --verbose ./tsconfig.cjs.json",
+    "cp:css": "cp -r src/css dist/css",
     "clean": "rimraf dist",
     "docs:develop": "pf-docs-framework start",
     "docs:build": "pf-docs-framework build all --output public",
@@ -39,6 +40,7 @@
     "@patternfly/react-styles": "6.0.0-alpha.23",
     "@spice-project/spice-html5": "^0.2.1",
     "file-saver": "^1.3.8",
+    "react-jss": "^10.10.0",
     "xterm": "^4.8.1",
     "xterm-addon-fit": "^0.2.1"
   },
@@ -52,8 +54,8 @@
     "@patternfly/patternfly-a11y": "^4.3.1",
     "@patternfly/react-code-editor": "6.0.0-alpha.61",
     "@patternfly/react-table": "6.0.0-alpha.61",
+    "monaco-editor": "^0.34.1",
     "rimraf": "^2.6.2",
-    "serve": "^14.2.3",
-    "monaco-editor": "^0.34.1"
+    "serve": "^14.2.3"
   }
 }
diff --git a/...odule/patternfly-docs/content/extensions/react-console/examples/ReactConsole.md b/...odule/patternfly-docs/content/extensions/react-console/examples/ReactConsole.md
@@ -13,11 +13,7 @@ React console lives in its own package at [`@patternfly/react-console`](https://
 import { AccessConsoles, SerialConsole, VncConsole, DesktopViewer } from '@patternfly/react-console';
 import { SerialConsoleCustom } from './SerialConsoleCustom.jsx';
 import { debounce } from '@patternfly/react-core';
-import '@patternfly/react-styles/src/css/components/Consoles/AccessConsoles.css';
-import '@patternfly/react-styles/src/css/components/Consoles/DesktopViewer.css';
-import '@patternfly/react-styles/src/css/components/Consoles/SerialConsole.css';
-import '@patternfly/react-styles/src/css/components/Consoles/VncConsole.css';
-import '@patternfly/react-styles/src/css/components/Consoles/xterm.css';
+import '@patternfly/react-console/dist/css/xterm.css';
 
 ## Examples
 

diff --git a/packages/module/patternfly-docs/generated/extensions/react-console/react.js b/packages/module/patternfly-docs/generated/extensions/react-console/react.js
@@ -3,11 +3,7 @@ import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfl
 import { AccessConsoles, SerialConsole, VncConsole, DesktopViewer } from '@patternfly/react-console';
 import { SerialConsoleCustom } from '../../../content/extensions/react-console/examples/./SerialConsoleCustom.jsx';
 import { debounce } from '@patternfly/react-core';
-import '@patternfly/react-styles/src/css/components/Consoles/AccessConsoles.css';
-import '@patternfly/react-styles/src/css/components/Consoles/DesktopViewer.css';
-import '@patternfly/react-styles/src/css/components/Consoles/SerialConsole.css';
-import '@patternfly/react-styles/src/css/components/Consoles/VncConsole.css';
-import '@patternfly/react-styles/src/css/components/Consoles/xterm.css';
+import '@patternfly/react-console/dist/css/xterm.css';
 import srcImportbasicusage from './react/basic-usage.png';
 const pageData = {
   "id": "React console",

diff --git a/packages/module/src/components/AccessConsoles/AccessConsoles.tsx b/packages/module/src/components/AccessConsoles/AccessConsoles.tsx
@@ -1,14 +1,26 @@
 import React from 'react';
-import { css } from '@patternfly/react-styles';
 import { Select, SelectOption, MenuToggle, MenuToggleElement, SelectList } from '@patternfly/react-core';
 
 import { constants } from '../common/constants';
-
-import styles from '@patternfly/react-styles/css/components/Consoles/AccessConsoles';
-import '@patternfly/react-styles/css/components/Consoles/AccessConsoles.css';
+import { createUseStyles } from 'react-jss';
 
 const { NONE_TYPE, SERIAL_CONSOLE_TYPE, VNC_CONSOLE_TYPE, DESKTOP_VIEWER_CONSOLE_TYPE } = constants;
 
+const useStyles = createUseStyles({
+  console: {
+    display: 'grid',
+    gridTemplateAreas: '\'actions-main actions-extra\'\n    \'main main\'',
+    rowGap: 'var(--pf-t-global--spacer--md)'
+  },
+  consoleActions: {
+    gridArea: 'actions-main',
+    display: 'flex',
+    '> div': {
+      marginRight: 'var(--pf-t-global--spacer--sm)'
+    }
+  }
+});
+
 const getChildTypeName = (child: any) =>
   child && child.props && child.props.type ? child.props.type : (child && child.type && child.type.displayName) || null;
 
@@ -48,6 +60,7 @@ export const AccessConsoles: React.FunctionComponent<AccessConsolesProps> = ({
   textDesktopViewerConsole = 'Desktop viewer',
   preselectedType = null
 }) => {
+  const styles = useStyles();
   const typeMap = {
     [SERIAL_CONSOLE_TYPE]: textSerialConsole,
     [VNC_CONSOLE_TYPE]: textVncConsole,
@@ -135,9 +148,9 @@ export const AccessConsoles: React.FunctionComponent<AccessConsolesProps> = ({
     }
   });
   return (
-    <div className={css(styles.console)}>
+    <div className={styles.console}>
       {React.Children.toArray(children).length > 1 && (
-        <div className={css(styles.consoleActions)}>
+        <div className={styles.consoleActions}>
           <Select
             aria-label={textSelectConsoleType}
             toggle={toggle}

diff --git a/packages/module/src/components/AccessConsoles/__snapshots__/AccessConsoles.test.tsx.snap b/packages/module/src/components/AccessConsoles/__snapshots__/AccessConsoles.test.tsx.snap
@@ -3,26 +3,26 @@
 exports[`AccessConsoles Empty 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-console"
+    class="console-0-2-1"
   />
 </DocumentFragment>
 `;
 
 exports[`AccessConsoles with DesktopViewer 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-console"
+    class="console-0-2-1"
   />
 </DocumentFragment>
 `;
 
 exports[`AccessConsoles with SerialConsole and VncConsole as children 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-console"
+    class="console-0-2-1"
   >
     <div
-      class="pf-v6-c-console__actions"
+      class="consoleActions-0-2-2"
     >
       <button
         aria-expanded="false"
@@ -62,26 +62,26 @@ exports[`AccessConsoles with SerialConsole and VncConsole as children 1`] = `
 exports[`AccessConsoles with SerialConsole as a single child 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-console"
+    class="console-0-2-1"
   />
 </DocumentFragment>
 `;
 
 exports[`AccessConsoles with VncConsole as a single child 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-console"
+    class="console-0-2-1"
   />
 </DocumentFragment>
 `;
 
 exports[`AccessConsoles with preselected SerialConsole 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-console"
+    class="console-0-2-1"
   >
     <div
-      class="pf-v6-c-console__actions-serial"
+      class="consoleActionsSerial-0-2-4"
     >
       <button
         aria-disabled="false"
@@ -105,7 +105,7 @@ exports[`AccessConsoles with preselected SerialConsole 1`] = `
       </button>
     </div>
     <div
-      class="pf-v6-c-console__serial"
+      class="consoleSerial-0-2-3"
     >
       <div
         class="pf-v6-c-empty-state"
@@ -156,7 +156,7 @@ exports[`AccessConsoles with preselected SerialConsole 1`] = `
 exports[`AccessConsoles with wrapped SerialConsole as a child 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-console"
+    class="console-0-2-1"
   >
     <p>
       Serial console text

diff --git a/packages/module/src/components/DesktopViewer/DesktopViewer.tsx b/packages/module/src/components/DesktopViewer/DesktopViewer.tsx
@@ -1,12 +1,19 @@
 import React from 'react';
 
-import { css } from '@patternfly/react-styles';
 import { ManualConnection } from './ManualConnection';
 import { ConnectWithRemoteViewer, ConnectWithRemoteViewerProps } from './ConnectWithRemoteViewer';
 import { ConsoleDetailPropType } from './ConsoleDetailPropType';
 
-import styles from '@patternfly/react-styles/css/components/Consoles/DesktopViewer';
-import '@patternfly/react-styles/css/components/Consoles/DesktopViewer.css';
+import { createUseStyles } from 'react-jss';
+
+const useStyles = createUseStyles({
+  consoleDesktopViewer: {
+    gridArea: 'main',
+    display: 'grid',
+    gap: 'var(--pf-t-global--spacer--md)',
+    gridTemplateColumns: 'repeat(auto-fit, minmax(20rem, 1fr))'
+  }
+});
 
 export interface DesktopViewerProps extends ConnectWithRemoteViewerProps {
   /** Custom content of more-info section  */
@@ -51,7 +58,7 @@ export const DesktopViewer: React.FunctionComponent<DesktopViewerProps> = ({
   rdp = null,
   ...props
 }: DesktopViewerProps) => (
-  <div className={css(styles.consoleDesktopViewer)}>
+  <div className={useStyles().consoleDesktopViewer}>
     <ConnectWithRemoteViewer
       spice={spice}
       vnc={vnc}

diff --git a/packages/module/src/components/DesktopViewer/__snapshots__/DesktopViewer.test.tsx.snap b/packages/module/src/components/DesktopViewer/__snapshots__/DesktopViewer.test.tsx.snap
@@ -143,7 +143,7 @@ exports[`DesktopViewer default MoreInformationContent 1`] = `
 exports[`DesktopViewer empty 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-console__desktop-viewer"
+    class="consoleDesktopViewer-0-2-1"
   >
     <div
       class="pf-v6-c-console__remote-viewer"
@@ -189,7 +189,7 @@ exports[`DesktopViewer empty 1`] = `
 exports[`DesktopViewer with Spice and VNC 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-console__desktop-viewer"
+    class="consoleDesktopViewer-0-2-1"
   >
     <div
       class="pf-v6-c-console__remote-viewer"
@@ -510,7 +510,7 @@ exports[`DesktopViewer with Spice and VNC 1`] = `
 exports[`DesktopViewer with Spice, VNC and RDP (different hostname) 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-console__desktop-viewer"
+    class="consoleDesktopViewer-0-2-1"
   >
     <div
       class="pf-v6-c-console__remote-viewer"
@@ -926,7 +926,7 @@ exports[`DesktopViewer with Spice, VNC and RDP (different hostname) 1`] = `
 exports[`DesktopViewer with Spice, VNC and RDP 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-console__desktop-viewer"
+    class="consoleDesktopViewer-0-2-1"
   >
     <div
       class="pf-v6-c-console__remote-viewer"

diff --git a/packages/module/src/components/SerialConsole/SerialConsole.tsx b/packages/module/src/components/SerialConsole/SerialConsole.tsx
@@ -1,19 +1,22 @@
 import React from 'react';
 
-import { css } from '@patternfly/react-styles';
 import { Button, EmptyState, Spinner, EmptyStateFooter } from '@patternfly/react-core';
 
 import { XTerm, XTermProps } from './XTerm';
 import { SerialConsoleActions } from './SerialConsoleActions';
 
 import { constants } from '../common/constants';
 
-import styles from '@patternfly/react-styles/css/components/Consoles/SerialConsole';
-import '@patternfly/react-styles/css/components/Consoles/xterm.css';
-import '@patternfly/react-styles/css/components/Consoles/SerialConsole.css';
+import { createUseStyles } from 'react-jss';
 
 const { CONNECTED, DISCONNECTED, LOADING } = constants;
 
+const useStyles = createUseStyles({
+  consoleSerial: {
+    gridArea: 'main'
+  }
+});
+
 export interface SerialConsoleProps extends XTermProps {
   /** Initiate connection to backend. In other words, the calling components manages connection state. */
   onConnect: () => void;
@@ -63,6 +66,8 @@ const SerialConsoleBase: React.FunctionComponent<SerialConsoleProps> = ({
   textLoading = 'Loading ...',
   innerRef
 }) => {
+  const styles = useStyles();
+
   React.useEffect(() => {
     onConnect();
     return () => {
@@ -130,7 +135,7 @@ const SerialConsoleBase: React.FunctionComponent<SerialConsoleProps> = ({
           textReset={textReset}
         />
       )}
-      <div className={css(styles.consoleSerial)}>{terminal}</div>
+      <div className={styles.consoleSerial}>{terminal}</div>
     </>
   );
 };

diff --git a/packages/module/src/components/SerialConsole/SerialConsoleActions.tsx b/packages/module/src/components/SerialConsole/SerialConsoleActions.tsx
@@ -1,9 +1,18 @@
 import React from 'react';
-import { css } from '@patternfly/react-styles';
 import { Button } from '@patternfly/react-core';
 
-import styles from '@patternfly/react-styles/css/components/Consoles/SerialConsole';
+import { createUseStyles } from 'react-jss';
 
+const useStyles = createUseStyles({
+  consoleActionsSerial: {
+    gridArea: 'actions-extra',
+    display: 'flex',
+    justifyContent: 'flex-end',
+    '> button': {
+      marginRight: 'var(--pf-t-global--spacer--sm)'
+    }
+  }
+});
 export interface SerialConsoleActionsProps extends React.HTMLProps<HTMLDivElement> {
   onDisconnect: () => void;
   onReset: () => void;
@@ -16,7 +25,7 @@ export const SerialConsoleActions: React.FunctionComponent<SerialConsoleActionsP
   textReset = 'Reset',
   ...props
 }: SerialConsoleActionsProps) => (
-  <div className={css(styles.consoleActionsSerial)}>
+  <div className={useStyles().consoleActionsSerial}>
     <Button variant="secondary" onClick={props.onDisconnect}>
       {textDisconnect}
     </Button>

diff --git a/packages/module/src/components/SerialConsole/XTerm.tsx b/packages/module/src/components/SerialConsole/XTerm.tsx
@@ -130,6 +130,6 @@ export const XTerm: React.FunctionComponent<XTermProps> = ({
 
   // ensure react never reuses this div by keying it with the terminal widget
   // Workaround for xtermjs/xterm.js#3172
-  return <div ref={ref} className="pf-v6-c-console__xterm" role="list" onFocus={onFocusIn} onBlur={onFocusOut} />;
+  return <div ref={ref} role="list" onFocus={onFocusIn} onBlur={onFocusOut} />;
 };
 XTerm.displayName = 'XTerm';
diff --git a/packages/module/src/components/SerialConsole/__snapshots__/SerialConsole.test.tsx.snap b/packages/module/src/components/SerialConsole/__snapshots__/SerialConsole.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`SerialConsole in the DISCONNECTED state 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-console__serial"
+    class="consoleSerial-0-2-1"
   >
     <div
       class="pf-v6-c-empty-state"
@@ -47,7 +47,7 @@ exports[`SerialConsole in the DISCONNECTED state 1`] = `
 exports[`SerialConsole in the LOADING state 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-console__actions-serial"
+    class="consoleActionsSerial-0-2-2"
   >
     <button
       aria-disabled="false"
@@ -71,7 +71,7 @@ exports[`SerialConsole in the LOADING state 1`] = `
     </button>
   </div>
   <div
-    class="pf-v6-c-console__serial"
+    class="consoleSerial-0-2-1"
   >
     <div
       class="pf-v6-c-empty-state"
@@ -121,7 +121,7 @@ exports[`SerialConsole in the LOADING state 1`] = `
 exports[`SerialConsole with CONNECTED state renders 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-console__actions-serial"
+    class="consoleActionsSerial-0-2-2"
   >
     <button
       aria-disabled="false"
@@ -145,10 +145,9 @@ exports[`SerialConsole with CONNECTED state renders 1`] = `
     </button>
   </div>
   <div
-    class="pf-v6-c-console__serial"
+    class="consoleSerial-0-2-1"
   >
     <div
-      class="pf-v6-c-console__xterm"
       role="list"
     >
       <div