Enable JSS

Author: fhlavac

package-lock.json

@@ -40,12 +40,12 @@
     "eslint-plugin-n": "^15.0.0",
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-config-prettier": "8.5.0",
+    "eslint-config-prettier": "8.6.0",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2",
-    "@typescript-eslint/eslint-plugin": "^5.42.0",
-    "@typescript-eslint/parser": "^5.42.0",
-    "prettier": "2.7.1",
+    "@typescript-eslint/eslint-plugin": "^5.49.0",
+    "@typescript-eslint/parser": "^5.49.0",
+    "prettier": "2.8.3",
     "jest":"^29.2.2",
     "babel-jest":"^29.2.2",
     "@babel/core": "^7.19.6",
@@ -60,14 +60,12 @@
     "jest-canvas-mock": "2.4.0",
     "ts-jest":"29.0.3",
     "serve": "^14.1.2",
-    "node-sass-package-importer": "^5.3.2",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
     "whatwg-fetch": "^3.6.2",
     "babel-polyfill": "6.26.0",
     "identity-obj-proxy": "^3.0.0",
     "fs-extra": "^9.1.0",
     "glob": "^7.2.3",
-    "sass": "^1.55.0",
     "chokidar": "^3.5.3"
   }
 }

package.json

@@ -10,14 +10,12 @@
     "build:esm": "tsc --build --verbose ./tsconfig.json",
     "build:fed:packages": "node generate-fed-package-json.js",
     "build:js": "tsc -p tsconfig.cjs.json",
-    "copy-files": "copyfiles -u 1 src/**/*.scss dist/esm",
     "clean": "rimraf dist",
     "docs:develop": "pf-docs-framework start",
     "docs:build": "pf-docs-framework build all --output public",
     "docs:serve": "pf-docs-framework serve public --port 5000",
     "docs:screenshots": "pf-docs-framework screenshots --urlPrefix http://localhost:5000",
     "test:a11y": "patternfly-a11y --config patternfly-a11y.config",
-    "transform:css": "node ../../scripts/transform-scss.js",
     "serve:a11y": "yarn serve coverage"
   },
   "repository": "git+https://github.com/patternfly/react-component-groups.git",
@@ -32,7 +30,8 @@
     "tag": "prerelease"
   },
   "dependencies": {
-    "@patternfly/react-core": "^4.250.1"
+    "@patternfly/react-core": "^4.250.1",
+    "react-jss": "^10.9.2"
   },
   "peerDependencies": {
     "react": "^16.8 || ^17 || ^18",
@@ -41,17 +40,17 @@
   "devDependencies": {
     "@patternfly/documentation-framework": "^1.2.55",
     "@patternfly/patternfly": "^4.217.1",
-    "@patternfly/react-table": "^4.111.4",
+    "@patternfly/patternfly-a11y": "4.3.1",
     "@patternfly/react-code-editor": "^4.82.26",
+    "@patternfly/react-table": "^4.111.4",
     "@redhat-cloud-services/frontend-components-utilities": "^3.2.25",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
     "classnames": "^2.2.5",
     "copyfiles": "^2.4.1",
-    "rimraf": "^2.6.2",
-    "typescript": "^4.7.4",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "@patternfly/patternfly-a11y": "4.3.1"
+    "rimraf": "^2.6.2",
+    "typescript": "^4.9.5"
   }
 }

packages/module/package.json

@@ -1,9 +1,7 @@
 import * as React from 'react';
-import PageHeader, { PageHeaderTitle } from '../PageHeader';
-import ErrorState from '../ErrorState';
-import { ExpandableSection } from '@patternfly/react-core';
+import { ExpandableSection, Title } from '@patternfly/react-core';
+import { ErrorState } from '../ErrorState';
 import ErrorStack from './ErrorStack';
-import Section from '../Section';
 
 interface ErrorPageProps {
   /** The title to display on the error page */
@@ -52,26 +50,22 @@ class ErrorBoundaryPage extends React.Component<ErrorPageProps, ErrorPageState>
         return null;
       }
       return (
-        <div>
-          <PageHeader>
-            <PageHeaderTitle title={this.props.headerTitle} />
-          </PageHeader>
-          <Section>
-            <ErrorState
-              errorTitle={this.props.errorTitle}
-              errorDescription={
-                <>
-                  <span>{this.props.errorDescription}</span>
-                  {this.state.error && (
-                    <ExpandableSection toggleText="Show details">
-                      <ErrorStack error={this.state.error} />
-                    </ExpandableSection>
-                  )}
-                </>
-              }
-            />
-          </Section>
-        </div>
+        <React.Fragment>
+          <Title headingLevel="h1" size="2xl">{this.props.headerTitle}</Title>
+          <ErrorState
+            errorTitle={this.props.errorTitle}
+            errorDescription={
+              <>
+                <span>{this.props.errorDescription}</span>
+                {this.state.error && ( 
+                  <ExpandableSection toggleText="Show details">
+                    <ErrorStack error={this.state.error} />
+                  </ExpandableSection>
+                )}
+              </>
+            }
+          />
+        </React.Fragment>
       );
     }