Modernize build, test, stories

* [x] CRA start (about 50 seconds) to vite dev (230 ms)
* [x] CRA Build (25 seconds) to vite (19 seconds)
* [x] sort out svg ulrs vs react elements
* [x] proxy api and s3 calls
* [x] get modules split
* [x] remove babel
* [x] remove need for `import {jsx}`
* [x] upgrade storybook, get running on vite
* [x] react to 17
* [x] node to 20
* [x] jest (22 seconds) --\> vitest (7 seconds)

.storybook/main.ts

@@ -0,0 +1,32 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+// get the vite config one level up
+import viteConfigFn from "../vite.config";
+
+const proxy = viteConfigFn({
+    command: "serve",
+    mode: "development",
+}).server!.proxy;
+const config: StorybookConfig = {
+    stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+    addons: [
+        "@storybook/addon-links",
+        "@storybook/addon-essentials",
+        "@storybook/addon-interactions",
+    ],
+    framework: {
+        name: "@storybook/react-vite",
+        options: {},
+    },
+    // viteFinal: (config, options) => {
+    //     // setup the same proxy that we have in "vite dev" to avoid CORS issues
+    //     const server = {
+    //         ...config.server,
+    //         proxy: {
+    //             ...proxy,
+    //         },
+    //     };
+
+    //     return { ...config, server };
+    // },
+};
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Preview } from "@storybook/react";
+import { ThemeProvider } from "@material-ui/core";
+import theme from "../src/theme";
+import { LocalizationProvider } from "../src/localization/LocalizationProvider";
+import { BrowserRouter } from "react-router-dom";
+
+// most parts of blorg rely on various contexts. This automatically wraps all stories with these contexts
+const preview: Preview = {
+    decorators: [
+        (Story) => (
+            <LocalizationProvider>
+                <ThemeProvider theme={theme}>
+                    <BrowserRouter>
+                        <Story />
+                    </BrowserRouter>
+                </ThemeProvider>
+            </LocalizationProvider>
+        ),
+    ],
+};
+
+export default preview;

doctor-storybook.log

@@ -0,0 +1,22 @@
+🩺 The doctor is checking the health of your Storybook..
+The CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
+╭ Incompatible packages found ───────────────────────────────────────────────────────────────────────────────────────────────────────╮
+│                                                                                                                                    │
+│   The following packages are incompatible with Storybook 8.3.6 as they depend on different major versions of Storybook packages:   │
+│   - @storybook/[email protected] (8.3.6 available!)                                                                          │
+│    Repo: https://github.com/storybookjs/storybook/tree/main/addons/essentials                                                      │
+│   - @storybook/[email protected] (8.3.6 available!)                                                                        │
+│    Repo: https://github.com/storybookjs/storybook/tree/main/addons/interactions                                                    │
+│                                                                                                                                    │
+│                                                                                                                                    │
+│   Please consider updating your packages or contacting the maintainers for compatibility details.                                  │
+│   For more on Storybook 8 compatibility, see the linked GitHub issue:                                                              │
+│   https://github.com/storybookjs/storybook/issues/26031                                                                            │
+│                                                                                                                                    │
+╰────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
+
+You can always recheck the health of your project by running:
+npx storybook doctor
+
+Full logs are available in C:\dev\blorg\doctor-storybook.log
+

eslint.config.mjs

@@ -0,0 +1,29 @@
+import globals from "globals";
+import tseslint from "typescript-eslint";
+import pluginReact from "eslint-plugin-react";
+
+export default [
+    { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
+    // { languageOptions: { globals: globals.browser } },
+    ...tseslint.configs.recommended,
+    // pluginReact.configs.flat.recommended,
+    {
+        rules: {
+            "no-var": "warn",
+            "prefer-const": "warn",
+            "no-bitwise": "warn",
+            "no-warning-comments": [
+                1,
+                { terms: ["nocommit"], location: "anywhere" },
+            ],
+
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/ban-types": "off",
+            " @typescript-eslint/ban-ts-comment": "off",
+            "@typescript-eslint/ban-ts-comment": "off",
+            "@typescript-eslint/no-empty-object-type": "off",
+        },
+        ignores: ["node_modules", "public"],
+    },
+];

public/index.html → index.html

@@ -21,7 +21,7 @@
             media="print"
             onload="this.media='all'"
         />
-        <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+        <link rel="shortcut icon" href="/favicon.ico" />
         <meta
             name="viewport"
             content="width=device-width, initial-scale=1, shrink-to-fit=no"
@@ -53,7 +53,7 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+        <link rel="manifest" href="/manifest.json" />
 
         <!--
       Notice the use of %PUBLIC_URL% in the tags above.
@@ -89,5 +89,7 @@ <h1>
       To create a production bundle, use `npm run build` or `yarn build`.
 
       (The phony onclick is a bizarre workaround for an IOS bug.)
-    --></body>
+    -->
+        <script type="module" src="/src/index.tsx"></script>
+    </body>
 </html>