Merge pull request #1204 from qdraw/feature/202308_vite

CRA -> Vite - frontend migratie

.github/workflows/clientapp-react-linux-ci.yml

@@ -25,7 +25,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x, 16.x, 14.x, 12.x]
+        node-version: [20.x, 18.x, 16.x]
 
     steps:
     - uses: actions/checkout@v4

starsky-tools/build-tools/project-guid.js

@@ -13,6 +13,7 @@ async function getFiles(dir) {
   const files = await Promise.all(dirents.map((dirent) => {
     const res = resolve(dir, dirent.name);
     return dirent.isDirectory() && dirent.name != "generic-netcore" && dirent.name != "build" &&
+	  dirent.name != "dist" &&
       dirent.name != "node_modules" && dirent.name != "obj" && dirent.name != "bin" &&
       dirent.name != "osx.10.12-x64" && dirent.name != "linux-arm64" && dirent.name != "win7-x86" &&
       dirent.name != "coverage" && dirent.name != "coverage-report" && dirent.name != "Cake" &&

starsky/build/helpers/SonarQube.cs

@@ -174,16 +174,16 @@ public static bool SonarBegin(bool noUnitTest, bool noSonar, string branchName,
 				        "**/Interfaces/IQuery.cs," +
 				        $"**/setupTests.js,**/react-app-env.d.ts,**/service-worker.ts," +
 				        $"*webhtmlcli/**/*.js,**/wwwroot/js/**/*,**/*/Migrations/*,**/*spec.tsx," +
-				        $"**/*stories.tsx,**/*spec.ts,**/src/index.tsx,**/src/style/css/vendor/*,**/node_modules/*," +
-				        $"**/prestorybook.js," +
+				        $"**/*stories.tsx,**/*spec.ts,**/src/main.tsx,**/src/index.tsx,**/src/style/css/vendor/*,**/node_modules/*," +
+				        $"**/prestorybook.js,**/vite.config.ts,**/.storybook/**,**/jest.setup.ts," +
 				        $"**/_bigimages-helper.js ")
 				.Append($"/d:sonar.coverage.exclusions=**/build/*,**/build/helpers/*," +
 				        "**/documentation/*,"+
 				        "**/Interfaces/IQuery.cs," +
 				        $"**/setupTests.js,**/react-app-env.d.ts,**/service-worker.ts," +
 				        $"*webhtmlcli/**/*.js,**/wwwroot/js/**/*,**/*/Migrations/*," +
-				        $"**/*spec.ts,**/*stories.tsx,**/*spec.tsx,**/src/index.tsx,**/node_modules/*," +
-				        $"**/prestorybook.js," +
+				        $"**/*spec.ts,**/*stories.tsx,**/*spec.tsx,**/src/main.tsx,**/src/index.tsx,**/node_modules/*," +
+				        $"**/prestorybook.js,**/vite.config.ts,**/.storybook/**,**/jest.setup.ts," +
 				        $"**/_bigimages-helper.js ");
 
 			// Normal build

starsky/starsky.foundation.platform/Models/AppSettings.cs

@@ -79,7 +79,6 @@ private void CreateDefaultFolders()
 			.Replace("starskythumbnailmetacli", "starsky")
 			.Replace("starskysynccli", "starsky")
 			.Replace("starsky.foundation.database", "starsky")
-			.Replace("starskyImporterNetFrameworkCli", "starsky")
 			.Replace("netframework-msbuild", "starsky")
 			.Replace("starskySyncNetFrameworkCli", "starsky")
 			.Replace("starskyimportercli", "starsky")

starsky/starsky/Startup.cs

@@ -132,8 +132,15 @@ public void ConfigureServices(IServiceCollection services)
 			{
 				options.AddPolicy("CorsDevelopment",
 					builder => builder
-						.WithOrigins("http://localhost:4200",
-							"http://localhost:8080")
+						.WithOrigins(
+							"http://localhost:4000",
+							"https://localhost:4001",
+							"http://localhost:4200",
+							"http://localhost:5000",
+							"https://localhost:5001",
+							"http://localhost:5173",
+							"http://localhost:8080"
+						)
 						.AllowAnyMethod()
 						.AllowAnyHeader()
 						.AllowCredentials() );
@@ -278,14 +285,14 @@ void PrepareResponse(StaticFileResponseContext ctx)
 		        });
 	        }
 
-			if ( _appSettings != null && Directory.Exists(Path.Combine(_appSettings.BaseDirectoryProject, "clientapp", "build", "static")) )
+			if ( _appSettings != null && Directory.Exists(Path.Combine(_appSettings.BaseDirectoryProject, "clientapp", "build", "assets")) )
 			{
 				app.UseStaticFiles(new StaticFileOptions
 					{
 						OnPrepareResponse = PrepareResponse,
 						FileProvider = new PhysicalFileProvider(
-							Path.Combine(_appSettings.BaseDirectoryProject, "clientapp", "build", "static")),
-						RequestPath = $"/static",
+							Path.Combine(_appSettings.BaseDirectoryProject, "clientapp", "build", "assets")),
+						RequestPath = $"/assets",
 					}
 				);
 			}

starsky/starsky/clientapp/.eslintignore

@@ -6,4 +6,4 @@ setupTests.js
 *.ico
 *.gif
 *.woff
-*.woff2
+*.woff2

starsky/starsky/clientapp/.gitignore

@@ -1,3 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/settings.json
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
@@ -25,4 +52,4 @@ yarn-error.log*
 # On the production server there are no inline scripts allowed
 !.env
 
-storybook-static
+storybook-static

starsky/starsky/clientapp/.storybook/main.ts

@@ -1,31 +1,19 @@
-import type { StorybookConfig } from "@storybook/react-webpack5";
+import type { StorybookConfig } from "@storybook/react-vite";
+
 const config: StorybookConfig = {
-  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
-    "@storybook/preset-create-react-app",
+    "@storybook/addon-onboarding",
     "@storybook/addon-interactions"
   ],
   framework: {
-    name: "@storybook/react-webpack5",
+    name: "@storybook/react-vite",
     options: {}
   },
-  core: {
-    disableTelemetry: true,
-    enableCrashReports: false
-  },
   docs: {
     autodocs: "tag"
-  },
-  staticDirs: ["../public"],
-  webpackFinal: async (config) => {
-    // build-storybook url
-    //config.output!.publicPath = "/";
-    return config;
-  },
-  features: {
-    storyStoreV7: true
   }
 };
 export default config;

starsky/starsky/clientapp/.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+  "editor.formatOnSave": true,
+  "eslint.alwaysShowStatus": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
+}

starsky/starsky/clientapp/cspell.json

@@ -0,0 +1,53 @@
+{
+  "version": "0.2",
+  "language": "en,nl",
+  "words": [
+    "mkdirp",
+    "tsmerge",
+    "githubusercontent",
+    "streetsidesoftware",
+    "vsmarketplacebadge",
+    "visualstudio",
+    "starsky",
+    "droparea",
+    "detailview",
+    "nextprev",
+    "translatex",
+    "ECEFF",
+    "colorclass",
+    "kleurloos",
+    "geen",
+    "imageformat",
+    "lastedited",
+    "NOSONAR",
+    "zoomfactor",
+    "filehash",
+    "issingleitem",
+    "sidemenu",
+    "localization",
+    "hellip",
+    "Exif",
+    "exifstatus",
+    "rootfilename",
+    "eventclient",
+    "jkettmann",
+    "flatlistitem",
+    "onderstaande",
+    "maximaal",
+    "tekens",
+    "hebben",
+    "maxlength",
+    "afbeelding",
+    "Nederlands",
+    "Sluiten",
+    "Meer",
+    "Vorige",
+    "Volgende",
+    "relativelink",
+    "Ftest",
+    "Toevoegen",
+    "Overschrijven",
+    "Fnew"
+  ],
+  "flagWords": ["hte"]
+}

starsky/starsky/clientapp/default-package.json

@@ -0,0 +1,28 @@
+{
+  "name": "clientapp2",
+  "private": true,
+  "version": "0.5.10",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5"
+  }
+}

starsky/starsky/clientapp/index.html

@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="shortcut icon" href="/starsky/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Starsky web app" />
+    <link rel="apple-touch-icon" href="/starsky/baseline-searcher-detective-263238__192px.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Starsky App</title>
+    <link rel="manifest" href="/starsky/manifest.json" />
+  </head>
+  <body>
+    <div id="root"></div>
+
+    <script type="module" src="/src/main.tsx"></script>
+
+    <div class="modal-bg modal-bg--open trouble-loading">
+      <div class="modal-content modal-content--show trouble-loading">
+        <div class="modal-close-bar"></div>
+        <div class="modal content--subheader">
+          For some reason, Starsky couldn't load
+        </div>
+        <div class="modal content--text">
+          <p>We're quite sorry about this</p>
+          <h4>Troubleshooting</h4>
+          <p>Here are a few things to try:</p>
+          <noscript>
+            <ul>
+              <li>You need to enable JavaScript to run this app.</li>
+            </ul>
+          </noscript>
+          <ul>
+            <li>
+              <a href="/?force_cold_boot=1">Reload starsky</a> or even restart
+              your browser
+            </li>
+            <li>Make sure your security software isn't blocking Starksy</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

starsky/starsky/clientapp/jest.setup.ts

@@ -0,0 +1,26 @@
+import "@testing-library/jest-dom";
+import { configure } from "@testing-library/react";
+import "isomorphic-fetch";
+
+// Mock IntersectionObserver
+class IntersectionObserver {
+  observe = jest.fn();
+  disconnect = jest.fn();
+  unobserve = jest.fn();
+}
+
+Object.defineProperty(window, "IntersectionObserver", {
+  writable: true,
+  configurable: true,
+  value: IntersectionObserver
+});
+
+Object.defineProperty(global, "IntersectionObserver", {
+  writable: true,
+  configurable: true,
+  value: IntersectionObserver
+});
+
+window.scrollTo = jest.fn();
+
+configure({ testIdAttribute: "data-test" });