Adds Storybook test cases for scene-ui.js

.browserslistrc

@@ -1,12 +1,12 @@
-last 2 major versions
-not <= 0.5%
-not dead
-# No WebRTC support (including datachannel
-not ios_saf < 11
-not safari < 11
+# Modern browsers - macOS 10.15 (Safari 15.6: 2012 MacBook compat) and iOS 14 (Safari 14.1: iPhone 6S, iPad Air 2 compat) minimum
+chrome >= 105 # Pico XR 4 device browser is 105, Meta Quest 1 is Chrome 112, HTC Vive (XRE|Focus Vision) is 121
+safari >= 14.1
+ios >= 14.5
+firefox >= 91  # Lowered to align with Safari 15 capabilities, bump to 115 (Wolvic on HTC) when possible
+edge >= 105 # last HoloLens 2 Chromium Edge build with working WebXR
+# Exclude legacy browsers
 not ie >= 0
-not edge >= 0
 not ie_mob >= 0
 not and_uc >= 0
 # No WebGL or WebRTC support
-not op_mini all
+not op_mini all

.github/workflows/browser-stack.yml

@@ -1,8 +1,8 @@
 name: browser-stack
 
 on:
-  schedule:
-    - cron: '0 18 * * *'
+#  schedule:
+#    - cron: '0 18 * * *'
   workflow_dispatch:
 
 jobs:

.storybook/main.js

@@ -1,5 +1,6 @@
 const path = require("path");
 const fs = require("fs");
+const webpack = require("webpack");
 const themesPath = path.resolve(__dirname, "..", "themes.json");
 if (fs.existsSync(themesPath)) {
   const appConfig = {};
@@ -10,8 +11,53 @@ if (fs.existsSync(themesPath)) {
 }
 module.exports = {
   stories: ["../src/react-components/**/*.stories.mdx", "../src/react-components/**/*.stories.js"],
-  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+  addons: ["@storybook/addon-links", "@storybook/addon-docs"],
   webpackFinal: async config => {
+    // Add explicit babel-loader rule for JS files with JSX at the beginning
+    config.module.rules.unshift({
+      test: /\.(js|jsx)$/,
+      exclude: /node_modules/,
+      use: {
+        loader: "babel-loader",
+        options: {
+          presets: [
+            ["@babel/preset-env", { targets: "defaults" }],
+            ["@babel/preset-react", { runtime: "automatic" }]
+          ],
+          plugins: [
+            "formatjs",
+            ["@babel/plugin-proposal-private-property-in-object", { loose: true }],
+            ["@babel/plugin-proposal-private-methods", { loose: true }]
+          ]
+        }
+      }
+    });
+
+    // Find and update the existing babel rule to handle JSX properly
+    const jsRule = config.module.rules.find(
+      rule => rule.test && rule.test.toString().includes("js") && !rule.test.toString().includes("node_modules")
+    );
+
+    if (jsRule) {
+      // Make sure it handles .js files with JSX
+      jsRule.test = /\.(js|jsx|ts|tsx)$/;
+      if (jsRule.use && Array.isArray(jsRule.use)) {
+        const babelLoader = jsRule.use.find(
+          loader => typeof loader === "object" && loader.loader && loader.loader.includes("babel")
+        );
+        if (babelLoader && babelLoader.options) {
+          // Ensure React preset is configured for JSX
+          babelLoader.options.presets = babelLoader.options.presets || [];
+          const hasReactPreset = babelLoader.options.presets.some(preset =>
+            Array.isArray(preset) ? preset[0].includes("react") : preset.includes("react")
+          );
+          if (!hasReactPreset) {
+            babelLoader.options.presets.push(["@babel/preset-react", { runtime: "automatic" }]);
+          }
+        }
+      }
+    }
+
     config.module.rules.push({
       test: /\.scss$/,
       use: [
@@ -23,7 +69,10 @@ module.exports = {
               localIdentName: "[name]__[local]__[hash:base64:5]",
               exportLocalsConvention: "camelCase",
               // TODO we ideally would be able to get rid of this but we have some global styles and many :local's that would become superfluous
-              mode: "global"
+              mode: "global",
+              // Restore default export behavior for css-loader 7 compatibility
+              namedExport: false,
+              exportOnlyLocals: false
             }
           }
         },
@@ -69,10 +118,36 @@ module.exports = {
       use: ["file-loader"],
       include: path.resolve(__dirname, "../")
     });
+
+    // Add DefinePlugin to provide process.env variables
+    config.plugins.push(
+      new webpack.DefinePlugin({
+        "process.env": {
+          NODE_ENV: JSON.stringify("development"),
+          RETICULUM_SERVER: JSON.stringify(""),
+          THUMBNAIL_SERVER: JSON.stringify(""),
+          CORS_PROXY_SERVER: JSON.stringify(""),
+          NON_CORS_PROXY_DOMAINS: JSON.stringify(""),
+          SENTRY_DSN: JSON.stringify(""),
+          GA_TRACKING_ID: JSON.stringify(""),
+          SHORTLINK_DOMAIN: JSON.stringify(""),
+          BASE_ASSETS_PATH: JSON.stringify(""),
+          UPLOADS_HOST: JSON.stringify(""),
+          APP_CONFIG: JSON.stringify("")
+        }
+      })
+    );
+
     return config;
   },
   framework: {
     name: "@storybook/react-webpack5",
     options: {}
+  },
+  babel: async options => {
+    return {
+      ...options,
+      presets: [...options.presets, ["@babel/preset-react", { runtime: "automatic" }]]
+    };
   }
 };

.storybook/preview.js

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import { useAccessibleOutlineStyle } from "../src/react-components/input/useAccessibleOutlineStyle";
 import { WrappedIntlProvider } from "../src/react-components/wrapped-intl-provider";
-import { MINIMAL_VIEWPORTS } from "@storybook/addon-viewport";
+import { MINIMAL_VIEWPORTS } from "storybook/viewport";
 import { AVAILABLE_LOCALES } from "../src/assets/locales/locale_config";
 import { setLocale } from "../src/utils/i18n";
 import { themes } from "../src/utils/theme";
@@ -13,12 +13,9 @@ const Layout = ({ children, locale, theme }) => {
 
   useAccessibleOutlineStyle();
 
-  useEffect(
-    () => {
-      setLocale(locale);
-    },
-    [locale]
-  );
+  useEffect(() => {
+    setLocale(locale);
+  }, [locale]);
 
   return <WrappedIntlProvider>{children}</WrappedIntlProvider>;
 };

.vscode/settings.json

@@ -17,5 +17,7 @@
   },
   "[html]": {
     "editor.defaultFormatter": "vscode.html-language-features" // Set to esbenp.prettier-vscode when we are ready to reformat all HTML files
-  }
+  },
+  "i18n-ally.localesPaths": ["src/assets/locales"],
+  "i18n-ally.keystyle": "nested"
 }

RetPageOriginDockerfile

@@ -23,8 +23,8 @@ copy admin/package-lock.json admin/
 run cd admin && npm ci --legacy-peer-deps && cd ..
 copy . .
 env BASE_ASSETS_PATH="{{rawhubs-base-assets-path}}"
-run npm run build 1> /dev/null
-run cd admin && npm run build 1> /dev/null && cp -R dist/* ../dist && cd ..
+run npm run build 
+run cd admin && npm run build && cp -R dist/* ../dist && cd ..
 run mkdir -p dist/pages && mv dist/*.html dist/pages && mv dist/hub.service.js dist/pages && mv dist/schema.toml dist/pages          
 run mkdir /hubs/rawhubs && mv dist/pages /hubs/rawhubs && mv dist/assets /hubs/rawhubs && mv dist/favicon.ico /hubs/rawhubs/pages