Updated packages, removed tw-elements

package.json

@@ -12,31 +12,30 @@
   "dependencies": {
     "@hookform/resolvers": "^3.3.2",
     "@tanstack/react-table": "^8.10.7",
-    "axios": "^1.6.0",
+    "axios": "^1.6.1",
     "echarts": "^5.4.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.47.0",
+    "react-hook-form": "^7.48.2",
-    "tw-elements": "^1.0.0",
     "uuid": "^9.0.1",
     "wouter": "^2.12.1",
     "zod": "^3.22.4"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.10",
-    "@types/node": "^20.8.9",
+    "@types/node": "^20.9.0",
-    "@types/react": "^18.2.33",
+    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.14",
+    "@types/react-dom": "^18.2.15",
-    "@types/uuid": "^9.0.6",
+    "@types/uuid": "^9.0.7",
-    "@typescript-eslint/eslint-plugin": "^6.9.0",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.9.0",
+    "@typescript-eslint/parser": "^6.10.0",
-    "@vitejs/plugin-react": "^4.1.0",
+    "@vitejs/plugin-react": "^4.1.1",
     "autoprefixer": "^10.4.16",
-    "eslint": "^8.52.0",
+    "eslint": "^8.53.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
+    "eslint-plugin-react-refresh": "^0.4.4",
     "postcss": "^8.4.31",
     "prettier": "^3.0.3",
     "tailwindcss": "^3.3.5",

src/configure.tsx

@@ -1,7 +1,9 @@
 export const viteEnv = import.meta.env;
 //Main configuration, static data, mostly used here
 export const main = {
-	program_name: viteEnv.VITE_APP_NAME,
+	program_name: `${viteEnv.VITE_APP_NAME}${
+		viteEnv.MODE ? " [development]" : ""
+	}`,
 	program_version: "1.0.0",
 };
 //About page configuration

src/features/App.tsx

@@ -1,16 +1,18 @@
 import { main } from "../configure";
-import Debugger from "./Debugger";
 
 function App() {
 	return (
-		<div>
+		<>
-			<h1>App</h1>
+			<p>Select mode:</p>
-			<p>App</p>
-			<Debugger />
 			<p>
 				{main.program_name} v{main.program_version}
 			</p>
-		</div>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc magna massa,
+			ornare quis interdum a, cursus in quam. Quisque risus libero, cursus eget
+			eros vitae, aliquam placerat velit. Vivamus luctus eros id sagittis luctus.
+			Pellentesque felis nulla, rhoncus viverra nunc vitae, viverra aliquam ante.
+			Ut feugiat mattis tempor.
+		</>
 	);
 }
 

src/features/Debugger.tsx

@@ -1,28 +0,0 @@
-import { useLocation } from "wouter";
-
-function Debugger() {
-	const windowLocation = window.location.pathname;
-	const locationHook = useLocation();
-	return (
-		<div className="m-auto p-4">
-			<details className="collapse bg-base-200 mb-4">
-				<summary className="collapse-title text-xl font-medium">
-					Flat Routes
-				</summary>
-			</details>
-			<details className="collapse bg-base-200 mb-4">
-				<summary className="collapse-title text-xl font-medium">Locations</summary>
-				<div className="collapse-content">
-					<code>Location hook: {JSON.stringify(locationHook)}</code>
-					<br />
-					<code>Location window: {JSON.stringify(windowLocation)}</code>
-				</div>
-			</details>
-			<details className="collapse bg-base-200 mb-4">
-				<summary className="collapse-title text-xl font-medium">Routes</summary>
-			</details>
-		</div>
-	);
-}
-
-export default Debugger;

src/main.tsx

@@ -1,22 +1,16 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { RouterProvider } from "react-router-dom";
 import { setupAxiosInterceptors } from "./api/AxiosService";
-import "./main.css";
+import { viteEnv } from "./configure";
-import router from "./routes";
+import App from "./features/App";
-import ConfirmationDialogProvider from "./components/ConfirmationDialog/ConfirmationDialogProvider";
+import inDev from "./utils/inDebug";
-import { initTE } from "tw-elements";
-initTE({}, true);
-setupAxiosInterceptors();
 
+setupAxiosInterceptors();
+inDev(() => console.log(viteEnv));
+
+// Hook react to the HTML element with id="root"
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
 	<React.StrictMode>
-		{/* fallbackElement - use when routing table is quite big to load, it will display desired element in convention of loading screen */}
+		<App />
-		<ConfirmationDialogProvider>
-			<RouterProvider
-				router={router}
-				fallbackElement={<p>Loading route table...</p>}
-			/>
-		</ConfirmationDialogProvider>
 	</React.StrictMode>,
 );

src/routes.tsx

@@ -1,69 +0,0 @@
-/**
- * This file is used to configure react-router-dom.
- * Do not change anything here, unless you know what you are doing.
- * Every path and route is configured in `configure.tsx` file.
- */
-
-import { createBrowserRouter, RouteObject } from "react-router-dom";
-import { CustomRouteObject, navigation } from "./configure.tsx";
-import Redirect from "./utils/Redirect.tsx";
-
-/**
- * This function is used to convert `CustomRouteObject` to `RouteObject` and process all additionalProps
- */
-const createRoutingFromCustomRouteObject = (
-	routes: CustomRouteObject[],
-): RouteObject[] => {
-	const navigationRoutes: RouteObject[] = []; //Root routes that will be used for navigation
-	routes.forEach((route) => {
-		// Extract everything except additionalProps and children
-		const { additionalProps, children, ...routeNative } = route;
-		//Filter routes that are disabled for navigation
-		const isRouteDisabled = additionalProps.disableRedirect;
-		if (isRouteDisabled) {
-			return;
-		}
-		//Add route to navigationRoutes, array that will be returned
-		const isRouteWithChildren = children !== undefined && children.length > 0;
-		if (!isRouteWithChildren) {
-			navigationRoutes.push({
-				...routeNative,
-			});
-		} else {
-			navigationRoutes.push({
-				path: route.path,
-				element: route.element,
-				children: createRoutingFromCustomRouteObject(children),
-			});
-		}
-	});
-	//In case of empty routes, add a default route with message
-	if (navigationRoutes.length === 0) {
-		navigationRoutes.push({
-			path: "/",
-			element: <div>Empty routes</div>,
-		});
-	}
-	//Always add redirect unmached route to root at the end
-	return navigationRoutes;
-};
-
-/** It is main variable that handle all navigation rules and paths */
-export const routes: RouteObject[] = [
-	...createRoutingFromCustomRouteObject(navigation),
-	{
-		path: "*",
-		element: <Redirect to="/" />,
-	},
-];
-
-/** It is variable that have routes for react-router-dom, final form */
-export const router = createBrowserRouter(routes, {
-	basename: "/",
-	future: {
-		// Normalize `useNavigation()`/`useFetcher()` `formMethod` to uppercase
-		v7_normalizeFormMethod: true,
-	},
-});
-
-export default router;

src/utils/inDebug.ts

@@ -0,0 +1,11 @@
+/**
+ * Execute whatever you pass only in development (not production)
+ */
+const inDev = <T>(callback: () => T): T | null => {
+	if (process.env.NODE_ENV === "development") {
+		return callback();
+	}
+	return null;
+};
+
+export default inDev;