From 55c75c3379cb3f6ce9305e80918483055a739d71 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Imobach=20Gonz=C3=A1lez=20Sosa?= Date: Fri, 8 Apr 2022 21:20:16 +0100 Subject: [PATCH] Adapt the React components to the Starter Kit * Disable styles to make it build. --- web/package-lock.json | 58 +++++++++++++++++++++++----------- web/package.json | 11 +++++-- web/src/App.jsx | 2 +- web/src/Layout.jsx | 2 +- web/{ => src}/index.html | 5 +-- web/src/{main.jsx => index.js} | 2 ++ web/src/patternfly.scss | 6 ++-- web/webpack.config.js | 7 ++++ 8 files changed, 66 insertions(+), 27 deletions(-) rename web/{ => src}/index.html (59%) rename web/src/{main.jsx => index.js} (95%) diff --git a/web/package-lock.json b/web/package-lock.json index eb4d108339..866ef41b93 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -23,6 +23,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", @@ -1674,6 +1677,24 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@fontsource/lato": { + "version": "4.5.5", + "resolved": "https://registry.npmjs.org/@fontsource/lato/-/lato-4.5.5.tgz", + "integrity": "sha512-0KVmVCq3wZnriKVdbY+n/ZLf7Vy+dQcqpcm8kaVX4QGd6uBTgH6YWLnM1L051TtjKlal2FiE6xc/BLw116a0gQ==", + "dev": true + }, + "node_modules/@fontsource/poppins": { + "version": "4.5.5", + "resolved": "https://registry.npmjs.org/@fontsource/poppins/-/poppins-4.5.5.tgz", + "integrity": "sha512-fqRWOQDhfoJoxP98qwMQLvLcgOu13yib6rZjL5UqpurobIaWTweqzo95uOLOGBjEE0bMMAbfDMoFUTL8Byrdeg==", + "dev": true + }, + "node_modules/@fontsource/roboto-mono": { + "version": "4.5.5", + "resolved": "https://registry.npmjs.org/@fontsource/roboto-mono/-/roboto-mono-4.5.5.tgz", + "integrity": "sha512-krIslwmFMjDHtbSVKZLC6+PM6dOvw26OTm7rE7CrniJ4q5Lbfffx67RAlDI3ee0LsG6gIJd/JXBeUm+RgUsPqg==", + "dev": true + }, "node_modules/@humanwhocodes/config-array": { "version": "0.5.0", "dev": true, @@ -2002,7 +2023,6 @@ "version": "7.4.1", "dev": true, "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -3901,17 +3921,6 @@ "node": "^10.12.0 || >=12.0.0" } }, - "node_modules/espree/node_modules/acorn": { - "version": "7.4.1", - "dev": true, - "license": "MIT", - "bin": { - "acorn": "bin/acorn" - }, - "engines": { - "node": ">=0.4.0" - } - }, "node_modules/espree/node_modules/eslint-visitor-keys": { "version": "1.3.0", "dev": true, @@ -8242,6 +8251,24 @@ } } }, + "@fontsource/lato": { + "version": "4.5.5", + "resolved": "https://registry.npmjs.org/@fontsource/lato/-/lato-4.5.5.tgz", + "integrity": "sha512-0KVmVCq3wZnriKVdbY+n/ZLf7Vy+dQcqpcm8kaVX4QGd6uBTgH6YWLnM1L051TtjKlal2FiE6xc/BLw116a0gQ==", + "dev": true + }, + "@fontsource/poppins": { + "version": "4.5.5", + "resolved": "https://registry.npmjs.org/@fontsource/poppins/-/poppins-4.5.5.tgz", + "integrity": "sha512-fqRWOQDhfoJoxP98qwMQLvLcgOu13yib6rZjL5UqpurobIaWTweqzo95uOLOGBjEE0bMMAbfDMoFUTL8Byrdeg==", + "dev": true + }, + "@fontsource/roboto-mono": { + "version": "4.5.5", + "resolved": "https://registry.npmjs.org/@fontsource/roboto-mono/-/roboto-mono-4.5.5.tgz", + "integrity": "sha512-krIslwmFMjDHtbSVKZLC6+PM6dOvw26OTm7rE7CrniJ4q5Lbfffx67RAlDI3ee0LsG6gIJd/JXBeUm+RgUsPqg==", + "dev": true + }, "@humanwhocodes/config-array": { "version": "0.5.0", "dev": true, @@ -8486,8 +8513,7 @@ }, "acorn": { "version": "7.4.1", - "dev": true, - "peer": true + "dev": true }, "acorn-jsx": { "version": "5.3.2", @@ -9640,10 +9666,6 @@ "eslint-visitor-keys": "^1.3.0" }, "dependencies": { - "acorn": { - "version": "7.4.1", - "dev": true - }, "eslint-visitor-keys": { "version": "1.3.0", "dev": true diff --git a/web/package.json b/web/package.json index 12057d8c76..c1806b8856 100644 --- 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 index 108463e8cd..04fdfc1b54 100644 --- 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 index b5ea3d9a78..462e960691 100644 --- 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 b/web/src/index.html similarity index 59% rename from web/index.html rename to web/src/index.html index 064a1ecfa6..1eb122c4c8 100644 --- a/web/index.html +++ b/web/src/index.html @@ -2,12 +2,13 @@ - + + D-Installer
- + diff --git a/web/src/main.jsx b/web/src/index.js similarity index 95% rename from web/src/main.jsx rename to web/src/index.js index e055ca7a75..c6774bb419 100644 --- a/web/src/main.jsx +++ b/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 index 065e8534c6..285efe8b9a 100644 --- 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 index 63e5dc6365..c60c4cd4f0 100644 --- 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