New project structure for Infrahub Frontend

frontend/app/.gitignore

@@ -7,6 +7,7 @@
 /coverage
 cypress/videos
 cypress/screenshots
+**/__screenshots__
 
 # production
 /build

frontend/app/biome.json

@@ -13,8 +13,8 @@
       "./playwright-report",
       "./test-results",
       "./tests/e2e/.auth",
-      "./src/generated",
-      "./src/infraops.d.ts"
+      "./src/shared/api/rest/types.generated.ts",
+      "./src/shared/api/graphql/generated"
     ]
   },
   "formatter": {

frontend/app/cypress/support/component.tsx

@@ -24,7 +24,7 @@ import { ReactRouter6Adapter } from "use-query-params/adapters/react-router-6";
 // Import commands.js using ES2015 syntax:
 import "./commands";
 
-import "../../src/styles/index.css";
+import "../../src/app/styles/index.css";
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

frontend/app/graphql.config.ts

@@ -5,7 +5,7 @@ const config: CodegenConfig = {
   documents: ["src/**/*.tsx", "src/**/*.ts"],
   ignoreNoDocuments: true, // for better experience with the watcher
   generates: {
-    "src/generated/": {
+    "src/shared/api/graphql/generated/": {
       config: {
         withHooks: true,
       },

frontend/app/package.json

@@ -10,7 +10,7 @@
     "serve": "vite preview",
     "build-serve": "npm run build && npm run serve",
     "codegen": "graphql-codegen --config graphql.config.ts",
-    "codegen:openapi": "npx openapi-typescript http://localhost:8000/api/openapi.json --output src/infraops.d.ts",
+    "codegen:openapi": "npx openapi-typescript http://localhost:8000/api/openapi.json --output src/shared/api/rest/types.generated.ts",
     "ci:test:e2e": "CI=1 DEBUG=pw:browser npm run test:e2e 2>/dev/null",
     "test": "vitest run",
     "test:watch": "vitest watch",
@@ -125,6 +125,7 @@
     "playwright": "^1.49.1",
     "postcss": "^8.4.23",
     "tailwindcss": "^3.4.3",
+    "ts-node": "^10.9.2",
     "typescript": "^5.5.3",
     "vitest": "^2.1.8",
     "vitest-browser-react": "^0.0.4"

frontend/app/src/App.tsx → frontend/app/src/app/app.tsx

@@ -3,20 +3,20 @@ import { ErrorBoundary } from "react-error-boundary";
 import { RouterProvider } from "react-router-dom";
 import { Slide, ToastContainer } from "react-toastify";
 
-import graphqlClient from "@/graphql/graphqlClientApollo";
-import { AuthProvider } from "@/hooks/useAuth";
-import { router } from "@/router";
-import ErrorFallback from "@/screens/errors/error-fallback";
-import { store } from "@/state";
+import { router } from "@/app/router";
+import { AuthProvider } from "@/entities/authentication/ui/useAuth";
+import graphqlClient from "@/shared/api/graphql/graphqlClientApollo";
+import ErrorFallback from "@/shared/components/errors/error-fallback";
+import { store } from "@/shared/stores";
 import { ApolloProvider } from "@apollo/client";
 import { addCollection } from "@iconify-icon/react";
 import mdiIcons from "@iconify-json/mdi/icons.json";
 import { QueryClientProvider } from "@tanstack/react-query";
 
-import "./styles/index.css";
+import "@/app/styles/index.css";
 import "react-toastify/dist/ReactToastify.css";
-import { queryClient } from "@/api/client";
-import { TanStackQueryDevtools } from "@/devtools";
+import { TanStackQueryDevtools } from "@/app/devtools";
+import { queryClient } from "@/shared/api/rest/client";
 
 addCollection(mdiIcons);
 

frontend/app/src/Root.tsx → frontend/app/src/app/root.tsx

@@ -1,11 +1,11 @@
-import { ALERT_TYPES, Alert } from "@/components/ui/alert";
 import { CONFIG } from "@/config/config";
-import LoadingScreen from "@/screens/loading-screen/loading-screen";
-import { fetchUrl } from "@/utils/fetch";
+import { Config, configState } from "@/config/config.atom";
+import { fetchUrl } from "@/shared/api/rest/fetch";
+import LoadingScreen from "@/shared/components/loading-screen";
+import { ALERT_TYPES, Alert } from "@/shared/components/ui/alert";
 import { useSetAtom } from "jotai";
 import { ReactNode, useEffect, useState } from "react";
 import { toast } from "react-toastify";
-import { Config, configState } from "./state/atoms/config.atom";
 
 export const Root = ({ children }: { children?: ReactNode }) => {
   const setConfig = useSetAtom(configState);