This fixes several interrelated problems: 1. many storybook pages were broken due to them not being kept up to date with components. all pages now display correctly and no console warnings/errors are printed (migration away from old-style required React prop-types was part of this). this should make quick QA verification possible; 2. storybook has been updated to eliminate some race conditions, which necessitated updating webpack, babel, and some older modules whose CommonJS exports were no longer acceptable. Some of these upgrade are incrementally toward updating react-admin (a future PR goal), so it's all good. 3. to clean up the webpack config, the browserlistrc has been updated to exclude pre-WebGL2 and pre-ES7 browsers. This should reduce the bundle size and have a runtime performance uplift since more built-ins will be used instead of JS fallbacks.

Author: matthargett

.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 10 (Safari 10.1 iPhone 6 compat) minimum
+chrome >= 91 # This was the version of Chrome on Oculus Go devices when their support was sunset
+safari >= 10
+ios >= 10
+firefox >= 91  # Lowered to align with Safari 15 capabilities, bump to 115 (Wolvic on HTC) when possible
+edge >= 91
+# 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

.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"
 }