Merge branch 'master' into addons

Author: DougReeder

.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

.eslintignore

@@ -0,0 +1,62 @@
+#!/bin/sh
+
+# Setup for the check for filenames with non-ASCII characters
+if git rev-parse --verify HEAD >/dev/null 2>&1
+then
+	against=HEAD
+else
+	# Initial commit: diff against an empty tree object
+	against=$(git hash-object -t tree /dev/null)
+fi
+
+# If you want to allow non-ASCII filenames set this variable to true.
+allownonascii=$(git config --type=bool hooks.allownonascii)
+
+# Redirect output to stderr.
+exec 1>&2
+
+# Cross platform projects tend to avoid non-ASCII filenames; prevent
+# them from being added to the repository. We exploit the fact that the
+# printable range starts at the space character and ends with tilde.
+if [ "$allownonascii" != "true" ] &&
+	# Note that the use of brackets around a tr range is ok here, (it's
+	# even required, for portability to Solaris 10's /usr/bin/tr), since
+	# the square bracket bytes happen to fall in the designated range.
+	test $(git diff-index --cached --name-only --diff-filter=A -z $against |
+	  LC_ALL=C tr -d '[ -~]\0' | wc -c) != 0
+then
+	cat <<\EOF
+Error: Attempt to add a non-ASCII file name.
+This can cause problems if you want to work with people on other platforms.
+To be portable it is advisable to rename the file.
+If you know what you are doing you can disable this check using:
+  git config hooks.allownonascii true
+EOF
+	exit 1
+fi
+
+# lints changed JavaScript and TypeScript
+changed_js=$(git diff-index --cached --name-only $against | grep -E "(.*\.(js|mjs|ts|mts)|scripts/.*\.(js|mjs|ts|mts)|src/.*\.(js|mjs|ts|mts)|test/.*\.(js|mjs|ts|mts)|admin/.*\.(js|mjs|ts|mts)|admin/src/.*\.(js|mjs|ts|mts))$")
+# /dev/null prevents eslint from checking everything
+./node_modules/.bin/eslint ${changed_js:-/dev/null}
+LINT_STATUS=$?
+if [ "$LINT_STATUS" != "0" ]; then
+  echo 'Fix the errors above, then use `git add` to restage all fixed files'
+  exit $LINT_STATUS
+fi
+
+# lints changed HTML
+changed_html=$(git diff-index --cached --name-only $against | grep -E "^src/.*\.html$")
+# src/tokens.html prevents htmlhint from checking everything
+node_modules/.bin/htmlhint ${changed_html:-src/tokens.html}
+LINT_STATUS=$?
+if [ "$LINT_STATUS" != "0" ]; then
+  echo 'Fix the errors above, then use `git add` to restage all fixed files'
+  exit $LINT_STATUS
+fi
+
+# runs all automated tests
+npm run test:unit
+
+# If there are whitespace errors, print the offending file names and fail.
+exec git diff-index --check --cached $against --

.eslintrc.js

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

.githooks/pre-commit

@@ -14,7 +14,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 22
 
       - run: npm ci
       - run: npm test

.github/workflows/browser-stack.yml

@@ -59,6 +59,11 @@ typings/
 
 # Ignore dist folder with webpack build output
 dist/
+dist-types/
+
+# local storybook files
+storybook-static/
+admin/storybook-static/
 
 .DS_Store
 

.github/workflows/test-and-deploy-storybook.yml

@@ -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" }]]
+    };
   }
 };

.gitignore

@@ -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>;
 };

.storybook/main.js

@@ -51,6 +51,13 @@ Read our [contributor guide](./CONTRIBUTING.md) to learn how you can submit bug
 
 We're also looking for help with localization. The Hubs redesign has a lot of new text and we need help from people like you to translate it. Follow the [localization docs](./src/assets/locales/README.md) to get started.
 
+A Git hook will run before each commit, to lint and test the code.
+Fix the issues it complains about, then the hook will allow your commit.
+The checks are also run in Continuous Integration, so you'll be requested to fix a Pull Request that fails these checks — the Git hook just gives you faster feedback.
+In unusual situations, you can suppress the checks by adding the flag `-n` to your commit command.
+
+To run the checks *before* you commit, run `npm run test`.
+
 Contributors are expected to abide by the project's [Code of Conduct](./CODE_OF_CONDUCT.md) and to be respectful of the project and people working on it.
 
 ## Additional Resources