Resolve React component warnings and streamline application entry poi…

…nt (#192) ### Summary & Motivation Update `package.json` and `bun.lockb` to include the latest package versions, resolving the `@types/react` conflict that caused warnings for React Components like `Button cannot be used as a JSX component`. Eliminate the `react.svg` favicon and its corresponding reference in `index.html`, and change the title of the app to PlatformPlatform. Utilize the non-null assertion operator for the root element and omit the file extension in the `App.tsx` import for cleaner code. Rename `index.css` to `main.css` to align with RSPack conventions. Move the `index.html` to the `public` folder. ### Checklist - [x] I have added a Label to the pull-request - [x] I have added tests, and done manual regression tests - [x] I have updated the documentation, if necessary
platformplatform · Nov 2, 2023 · 5a73307 · 5a73307
2 parents c7f502f + f05e78d
commit 5a73307
Show file tree

Hide file tree

Showing 9 changed files with 12 additions and 20 deletions.
diff --git a/application/account-management/WebApp/bun.lockb b/application/account-management/WebApp/bun.lockb
diff --git a/application/account-management/WebApp/package.json b/application/account-management/WebApp/package.json
@@ -8,20 +8,20 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-aria-components": "^1.0.0-beta.1",
+    "react-aria-components": "^1.0.0-beta.2",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@rspack/cli": "latest",
-    "@types/react": "18.2.0",
-    "@types/react-dom": "18.2.1",
+    "@types/react": "^18.2.33",
+    "@types/react-dom": "^18.2.14",
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.31",
     "postcss-loader": "^7.3.3",
     "prettier": "^3.0.3",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "^3.3.5",
     "tailwindcss-animate": "^1.0.7",
     "tailwindcss-react-aria-components": "^1.0.0-beta.1",
-    "typescript": "^5.0.4"
+    "typescript": "^5.2.2"
   }
 }
diff --git a/...tion/account-management/WebApp/index.html → ...count-management/WebApp/public/index.html b/...tion/account-management/WebApp/index.html → ...count-management/WebApp/public/index.html
@@ -2,9 +2,8 @@
 <html lang="en-US">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/react.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Account management</title>
+    <title>PlatformPlatform</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/application/account-management/WebApp/rspack.config.js b/application/account-management/WebApp/rspack.config.js
@@ -9,7 +9,7 @@ module.exports = {
   builtins: {
     html: [
       {
-        template: "./index.html",
+        template: "./public/index.html",
       },
     ],
   },

diff --git a/application/account-management/WebApp/src/assets/react.svg b/application/account-management/WebApp/src/assets/react.svg
diff --git a/...n/account-management/WebApp/src/index.css → ...on/account-management/WebApp/src/main.css b/...n/account-management/WebApp/src/index.css → ...on/account-management/WebApp/src/main.css
diff --git a/application/account-management/WebApp/src/main.tsx b/application/account-management/WebApp/src/main.tsx
@@ -1,15 +1,9 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./App.tsx";
-import "./index.css";
+import App from "./App";
+import "./main.css";
 
-const rootElement = document.getElementById("root");
-
-if (rootElement == null) {
-  throw new Error("Could not find root element");
-}
-
-ReactDOM.createRoot(rootElement).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>

diff --git a/application/account-management/WebApp/src/react-env.d.ts b/application/account-management/WebApp/src/react-env.d.ts
@@ -1,7 +1,7 @@
 // CSS
 declare module "*.css" {
   /**
-   * @deprecated Use `import style from './style.css?inline'` instead.
+   * @deprecated Use `import style from './main.css?inline'` instead.
    */
   const css: string;
   export default css;

diff --git a/application/account-management/WebApp/tailwind.config.js b/application/account-management/WebApp/tailwind.config.js
@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./src/**/*.{ts,tsx}", "./index.html"],
+  content: ["./src/**/*.{ts,tsx}", "./public/index.html"],
   darkMode: ["class"],
   theme: {
     container: {