Adapt the React components to the Starter Kit

* Disable styles to make it build.
agama-project · Apr 8, 2022 · 55c75c3 · 55c75c3
1 parent d54df81
commit 55c75c3
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 27 deletions.
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -15,6 +15,9 @@
  "@babel/eslint-parser": "^7.13.14",
  "@babel/preset-env": "^7.5.4",
  "@babel/preset-react": "^7.0.0",
+ "@fontsource/lato": "^4.5.5",
+ "@fontsource/poppins": "^4.5.5",
+ "@fontsource/roboto-mono": "^4.5.5",
  "babel-loader": "^8.0.6",
  "chrome-remote-interface": "^0.31.0",
  "compression-webpack-plugin": "^9.0.0",
@@ -50,9 +53,13 @@
  "dependencies": {
  "@patternfly/patternfly": "4.183.1",
  "@patternfly/react-core": "4.198.19",
+ "@patternfly/react-table": "^4.61.15",
+ "core-js": "^3.21.1",
+ "eos-ds": "^5.0.0",
+ "eos-icons-react": "^2.2.0",
  "react": "17.0.2",
  "react-dom": "17.0.2",
- "eos-ds": "^5.0.0",
- "eos-icons-react": "^2.2.0"
+ "regenerator-runtime": "^0.13.9",
+ "svg-url-loader": "^7.1.1"
  }
 }
diff --git a/web/src/App.jsx b/web/src/App.jsx
@@ -32,7 +32,7 @@ import "@fontsource/lato/700.css";
 import "@fontsource/poppins/300.css";
 import "@fontsource/poppins/500.css";
 import "@fontsource/roboto-mono/400.css";
-import "./app.scss";
+// import "./app.scss";
 
 function App() {
  const {

diff --git a/web/src/Layout.jsx b/web/src/Layout.jsx
@@ -21,7 +21,7 @@
 
 import React from "react";
 
-import "./layout.scss";
+// import "./layout.scss";
 import logo from "./assets/suse-horizontal-logo.svg";
 
 import About from "./About";

diff --git a/web/index.html → web/src/index.html b/web/index.html → web/src/index.html
@@ -2,12 +2,13 @@
 <html lang="en">
  <head>
  <meta charset="UTF-8" />
- <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+ <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+ <link rel="stylesheet" href="index.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>D-Installer</title>
  </head>
  <body>
  <div id="root"></div>
- <script type="module" src="/src/main.jsx"></script>
+ <script type="module" src="./index.js"></script>
  </body>
 </html>
diff --git a/web/src/main.jsx → web/src/index.js b/web/src/main.jsx → web/src/index.js
@@ -21,6 +21,8 @@
 
 import React, { StrictMode } from "react";
 import ReactDOM from "react-dom";
+import "core-js/stable";
+import "regenerator-runtime/runtime";
 
 import "./patternfly.scss";
 

diff --git a/web/src/patternfly.scss b/web/src/patternfly.scss
@@ -1,9 +1,9 @@
 // Import PatternFly CSS
-@use "@patternfly/react-core/dist/styles/base.css";
-@use "@patternfly/patternfly/patternfly.css";
+@import "@patternfly/react-core/dist/styles/base.css";
+@import "@patternfly/patternfly/patternfly.css";
 
 // See https://github.com/patternfly/patternfly/pull/4297
-@use "@patternfly/react-styles/css/utilities/Sizing/sizing.css";
+@import "@patternfly/react-styles/css/utilities/Sizing/sizing.css";
 
 // PatternFly overrides for using CSS Logical Properties
 .pf-l-split.pf-m-gutter > :not(:last-child) {

diff --git a/web/webpack.config.js b/web/webpack.config.js
@@ -49,6 +49,7 @@ module.exports = {
  resolve: {
  modules: [ "node_modules", path.resolve(__dirname, 'src/lib') ],
  alias: { 'font-awesome': 'font-awesome-sass/assets/stylesheets' },
+ extensions: ['', '.js', '.json', '.jsx']
  },
  resolveLoader: {
  modules: [ "node_modules", path.resolve(__dirname, 'src/lib') ],
@@ -148,6 +149,12 @@ module.exports = {
  },
  ]
  },
+ {
+ test: /\.svg/,
+ use: {
+ loader: "svg-url-loader",
+ },
+ }
  ]
  },
  plugins: plugins