@adobe-commerce/elsie 1.9.0-beta.3 → 2.0.0-alpha-20260608090548

package/CHANGELOG.md

@@ -1,33 +1,20 @@
 # @adobe-commerce/elsie
 
-## 1.9.0-beta.3
+## 2.0.0-alpha-20260608090548
 
-### Patch Changes
-
-- 5c64620: Implement a new `fragment-import-redirect` build plugin that automatically detects and redirects any dropin source file that directly imports a fragment source file (bypassing the barrel). The import is silently redirected to the fragments barrel at build time and a warning is emitted identifying the file so it can be corrected in source. This ensures fragment constants always appear as local declarations in `fragments.js` regardless of how dropin source code references them.
-
-## 1.9.0-beta.2
-
-### Patch Changes
+### Major Changes
 
-- d2aacc7: Fix: GraphQL fragment source files are no longer incorrectly bundled into `chunks/api.js`. The `manualChunks` function now walks the full importer graph (with cycle protection) to determine whether an api-directory module is owned by the fragments barrel, so fragment files stay in the fragments output chunk even when accessed through intermediate sub-barrels. Boilerplate GraphQL overrides work correctly in all dropin barrel structures.
+- 8e118e2: Upgrade Jest to 30.4.2 and Storybook to 10.4.0
 
-## 1.9.0-beta.1
+  Updated testing and component development tools to latest stable versions. Jest 30.4.2 provides enhanced snapshot handling and improved test performance. Storybook 10.4.0 includes updated addon ecosystem, improved Preact Vite integration, and enhanced accessibility features with addon-a11y and addon-coverage support.
 
 ### Minor Changes
 
-- af62897: Update minimum Node.js requirement to 22 LTS
+- 005edc7: Adds validation to the Incrementer component when the field is changed to "empty".
+- 3462840: Update minimum Node.js requirement to 22 LTS
 
   Packages are now built with Node.js 22. `elsie` requires `>=22`; browser-only packages (`fetch-graphql`, `event-bus`, `recaptcha`, `storefront-design`, `build-tools`) do not declare an `engines` field as they do not run in Node.js.
 
-## 1.9.0-beta.0
-
-### Minor Changes
-
-- f55a79c: Migrate to Node.js 24 LTS
-
-  Minimum required Node.js version is now 24. Updated `engines.node` from `>=16`/`>=18` to `>=24` across all packages. Regenerated lockfile under Node 24. Updated CI workflows to use `storefront-workflows@v6` with Node 24 support.
-
 - 62adf1c: Reduce HTTP requests on page load through three bundling optimizations. The preact runtime is isolated in its own vendor chunk so it no longer co-locates into other chunks. Dropin API and internal component modules are consolidated into `chunks/api.js` and `chunks/components.js` respectively, replacing the previous pattern of one chunk file per function or component. All SVG icons are consolidated into a single `chunks/icons.js` chunk instead of one chunk per icon.
 
   Drop-ins must be rebuilt against this release to get the reduced request footprint. No source changes are required.

package/bin/builders/concurrently/index.js

@@ -0,0 +1,13 @@
+const concurrently = require('concurrently');
+
+module.exports = function concurrentlyBuilder() {
+  const commands = process.argv.slice(3);
+
+  const { result } = concurrently(commands, {
+    killOthers: ['failure'],
+  });
+
+  return result.catch(() => {
+    process.exitCode = 1;
+  });
+};

package/bin/builders/generate/api/templates/story.js

@@ -11,7 +11,7 @@ module.exports = ({ pathname, basename, importPath = '.' }) => {
  *******************************************************************/
   
 ${source`
-    import { Meta } from '@storybook/blocks';
+    import { Meta } from '@storybook/addon-docs/blocks';
 
     <Meta title="API/${pathname}" />
     

package/bin/builders/generate/component/templates/stories.js

@@ -12,7 +12,7 @@ module.exports = ({ name, pathname, basename, group, importPath = '.' }) => {
   
 ${source`
     // https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
-    import type { Meta, StoryObj } from '@storybook/preact';
+    import type { Meta, StoryObj } from '@storybook/preact-vite';
     import { ${basename} as component, ${basename}Props } from '${importPath}';
     
     /**

package/bin/builders/generate/container/templates/stories.js

@@ -12,7 +12,7 @@ module.exports = ({ pathname, basename, importPath = '.' }) => {
   
 ${source`
     // https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
-    import type { Meta, StoryObj } from '@storybook/preact';
+    import type { Meta, StoryObj } from '@storybook/preact-vite';
     import { ${basename} as component, ${basename}Props } from '${importPath}';
 
     const meta: Meta<${basename}Props> = {

package/bin/builders/wait-on/index.js

@@ -0,0 +1,13 @@
+const waitOn = require('wait-on');
+
+module.exports = function waitOnBuilder() {
+  const resources = process.argv.slice(3);
+
+  return waitOn({
+    resources,
+    log: true,
+    timeout: 30000,
+  }).catch(() => {
+    process.exitCode = 1;
+  });
+};

package/bin/index.js

@@ -15,6 +15,16 @@ yargs
   .command('build', 'Build bundles', require('./builders/build'))
   .command('test', 'Run Jest tests', require('./builders/test'))
   .command('lint', 'Run ESLint code analysis', require('./builders/lint'))
+  .command(
+    'concurrently',
+    'Run multiple commands concurrently',
+    require('./builders/concurrently')
+  )
+  .command(
+    'wait-on',
+    'Wait for files, ports, sockets, or http(s) resources',
+    require('./builders/wait-on')
+  )
   .command(
     'generate',
     'Generate a new <resource>',

package/config/jest.js

@@ -17,9 +17,11 @@ const { compilerOptions } = require(path.resolve(
 const paths = { ...compilerOptions.paths };
 
 module.exports = {
-  preset: 'jest-preset-preact',
+  testEnvironment: 'jsdom',
 
-  prettierPath: null,
+  testEnvironmentOptions: {
+    customExportConditions: ['node', 'node-addons'],
+  },
 
   setupFiles: [
     path.resolve(__dirname, '../tests/__mocks__/browserMocks.ts'),
@@ -36,6 +38,10 @@ module.exports = {
   ],
 
   moduleNameMapper: {
+    '^react/jsx-runtime$': 'preact/jsx-runtime',
+    '^react-dom/test-utils$': 'preact/test-utils',
+    '^react-dom$': 'preact/compat',
+    '^react$': 'preact/compat',
     '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
     '\\.svg': '@adobe-commerce/elsie/__mocks__/svg.js',
     '^@adobe-commerce/elsie/(.*)$': path.resolve(__dirname, '../src/$1'),

package/config/storybook/addon.js

@@ -2,108 +2,171 @@
  *  Copyright 2024 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  Adobe permits you to use, modify, and distribute this 
- * file in accordance with the terms of the Adobe license agreement 
- * accompanying it. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
+const fs = require('fs');
 const path = require('path');
+const dotenv = require('dotenv');
+
+// Reads .env, .env.local, .env.[mode], .env.[mode].local from `root` (matching
+// Vite's file lookup order) and returns the merged result. We don't use
+// vite.loadEnv because it can only return either VITE_-prefixed vars or, with
+// an empty prefix, the entire process.env — which would leak shell state
+// (HOME, PATH, tokens, ...) into the bundle as `define` replacements.
+function loadDotEnvFiles(root, mode) {
+  const files = ['.env', '.env.local'];
+  if (mode) files.push(`.env.${mode}`, `.env.${mode}.local`);
+  const result = {};
+  for (const file of files) {
+    const full = path.join(root, file);
+    if (fs.existsSync(full)) {
+      Object.assign(result, dotenv.parse(fs.readFileSync(full)));
+    }
+  }
+  return result;
+}
+
+const cors = {
+  origin: '*',
+  methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'OPTIONS'],
+  allowedHeaders: ['X-Requested-With', 'content-type', 'Authorization'],
+};
 
-module.exports = {
-  managerWebpack: async (config) => {
-    return config;
+// @storybook/addon-docs sets MDX's `providerImportSource` to a raw `file://`
+// URL (addon-docs/dist/preset.js:318 — note the missing fileURLToPath wrap
+// the surrounding lines have). Vite's resolver can't load `file://` specifiers
+// in workspace/monorepo setups, so MDX docs fail to render.
+// See: https://github.com/storybookjs/storybook/issues/33118
+const fixMdxReactShim = {
+  name: 'elsie:fix-mdx-react-shim',
+  enforce: 'pre',
+  resolveId(source) {
+    if (source.startsWith('file://') && source.includes('mdx-react-shim.js')) {
+      return new URL(source).pathname;
+    }
+    return null;
   },
+};
 
-  managerBabel: async (config) => {
-    return config;
-  },
+// `dropinViteConfig` opts the consumer into the storybook-relevant subset of
+// @adobe-commerce/elsie/config/vite.mjs (aliases, preact, svgr, tsconfig paths).
+// Elsie's own storybook doesn't need this because its vite.config.mjs at the
+// project root is auto-loaded by @storybook/builder-vite and merged in.
+module.exports = (_storybookOptions, { dropinViteConfig = true } = {}) => ({
+  viteFinal: async (config) => {
+    // Allow cross-origin requests from the host application during development
+    config.server = { ...config.server, cors };
+
+    config.plugins = [...(config.plugins ?? []), fixMdxReactShim];
+
+    // Expose .env variables as process.env.* compile-time constants
+    const env = {
+      LOCALE: 'en-US',
+      ...loadDotEnvFiles(process.cwd(), config.mode),
+    };
 
-  webpackFinal: async (config) => {
-    // Development Server
-    config.devServer = {
-      ...config.devServer,
-      headers: {
-        ...config.devServer?.headers,
-        'Access-Control-Allow-Origin': '*',
-        'Access-Control-Allow-Methods':
-          'GET, POST, PUT, DELETE, PATCH, OPTIONS',
-        'Access-Control-Allow-Headers':
-          'X-Requested-With, content-type, Authorization',
-      },
+    config.define = {
+      ...config.define,
+      ...Object.fromEntries(
+        Object.entries(env).map(([k, v]) => [
+          `process.env.${k}`,
+          JSON.stringify(v),
+        ])
+      ),
     };
 
-    // this modifies the existing image rule to exclude .svg files
-    // since we want to handle those files with @svgr/webpack
-    const imageRule = config.module.rules.find((rule) =>
-      rule.test.test('.svg')
-    );
-
-    imageRule.exclude = /\.svg$/;
-
-    // configure .svg files to be loaded with @svgr/webpack fo ts/tsx files
-    config.module.rules.push({
-      test: /\.svg$/,
-      issuer: /\.tsx?$/,
-      loader: '@svgr/webpack',
-      options: {
-        svgoConfig: {
-          plugins: [
-            {
-              name: 'prefixIds',
-              params: {
-                prefixIds: false,
-                prefixClassNames: false,
-              },
-            },
-          ],
+    if (!dropinViteConfig) {
+      // Strip vite-plugin-css-injected-by-js — it is only needed for the
+      // library build and breaks storybook because storybook's output
+      // assets don't match the plugin's jsAssetsFilterFunction.
+      config.plugins = config.plugins.filter((p) => {
+        const name = Array.isArray(p) ? p[0]?.name : p?.name;
+        return name !== 'vite-plugin-css-injected-by-js';
+      });
+      return config;
+    }
+
+    const [{ default: preact }, { default: svgr }, { default: tsconfigPaths }] =
+      await Promise.all([
+        import('@preact/preset-vite'),
+        import('vite-plugin-svgr'),
+        import('vite-tsconfig-paths'),
+      ]);
+
+    // Resolve @adobe-commerce/elsie/* imports to absolute filesystem paths.
+    // vite-tsconfig-paths handles @adobe-commerce/elsie/* for host project files;
+    // these aliases cover imports originating from inside node_modules, which
+    // vite-tsconfig-paths skips by design.
+    const elsieRoot = path.resolve(__dirname, '../..');
+
+    config.resolve = {
+      ...config.resolve,
+      alias: [
+        ...(Array.isArray(config.resolve?.alias)
+          ? config.resolve.alias
+          : Object.entries(config.resolve?.alias ?? {}).map(
+            ([find, replacement]) => ({ find, replacement })
+          )),
+        {
+          find: /^@adobe-commerce\/elsie\/src(.*)$/,
+          replacement: `${elsieRoot}/src$1`,
         },
-      },
-    });
-
-    // configure .svg files to be loaded as static files for mdx files
-    config.module.rules.push({
-      test: /\.svg$/,
-      issuer: /\.mdx$/,
-      type: 'asset/resource',
-      generator: { filename: 'static/media/[path][name][ext]' },
-    });
-
-    // Modify the Babel configuration to include a rule for node_modules files
-    // that are not transpiled by default
-    config.module.rules.push({
-      test: /\.(mjs|tsx?|jsx?)$/,
-      loader: 'babel-loader',
-      exclude: {
-        and: [/node_modules/],
-        not: [/@adobe-commerce/],
-      },
-      options: {
-        presets: [
-          ['@babel/preset-env'],
-          ['@babel/preset-typescript', { jsxPragma: 'h' }],
-        ],
-        plugins: [
-          ['babel-plugin-tsconfig-paths'],
-          ['@babel/transform-react-jsx', { runtime: 'automatic' }],
-        ],
-      },
-    });
-
-    // Return the altered config
-    return config;
-  },
-
-  babel: async (config) => {
-    config.cacheDirectory = false;
+        {
+          find: /^@adobe-commerce\/elsie\/config(.*)$/,
+          replacement: `${elsieRoot}/config$1`,
+        },
+        {
+          find: /^@adobe-commerce\/elsie\/static(.*)$/,
+          replacement: `${elsieRoot}/static$1`,
+        },
+        {
+          find: /^@adobe-commerce\/elsie(.*)$/,
+          replacement: `${elsieRoot}/src$1`,
+        },
+      ],
+    };
 
-    config.presets = [
-      ['@babel/typescript', { jsxPragma: 'h' }],
-      ...(config.presets || []),
-    ];
+    // Vite's dependency optimizer (pre-bundling of node_modules) runs its own
+    // esbuild instance that does NOT inherit the config.esbuild settings above.
+    // Without this, .tsx files from node_modules (e.g. @adobe-commerce/elsie/src)
+    // are compiled with the classic JSX transform, emitting React.createElement()
+    // calls that fail at runtime because React is not in scope.
+    const sbComponentsDir = path.resolve(__dirname, './components');
+    const sbComponentEntries = fs
+      .readdirSync(sbComponentsDir)
+      .filter((entry) =>
+        fs.statSync(path.join(sbComponentsDir, entry)).isDirectory()
+      )
+      .map(
+        (name) => `@adobe-commerce/elsie/config/storybook/components/${name}`
+      );
+
+    config.optimizeDeps = {
+      ...config.optimizeDeps,
+      esbuildOptions: {
+        ...config.optimizeDeps?.esbuildOptions,
+        jsx: 'automatic',
+      },
+      include: [
+        ...(config.optimizeDeps?.include ?? []),
+        '@adobe-commerce/elsie/components',
+        '@adobe-commerce/elsie/icons',
+        '@adobe-commerce/elsie/icons/index',
+        '@adobe-commerce/elsie/lib',
+        '@adobe-commerce/elsie/lib/classes',
+        '@adobe-commerce/elsie/static/assets/images',
+        ...sbComponentEntries,
+      ],
+    };
 
     config.plugins = [
-      ['babel-plugin-tsconfig-paths'],
-      ...(config.plugins || []),
+      ...(config.plugins ?? []),
+      tsconfigPaths(),
+      preact(),
+      svgr({ include: '**/*.svg' }),
     ];
 
     return config;
@@ -127,4 +190,4 @@ module.exports = {
     autodocs: 'tag',
     defaultName: 'Overview',
   }),
-};
+});

package/config/storybook/components/Steps/Steps.jsx

@@ -7,7 +7,7 @@
  * accompanying it. 
  *******************************************************************/
 
-import { Unstyled } from '@storybook/blocks';
+import { Unstyled } from '@storybook/addon-docs/blocks';
 import styles from './Steps.module.css';
 
 export function Steps({ children }) {

package/config/storybook/components/Summary/Summary.jsx

@@ -7,7 +7,7 @@
  * accompanying it. 
  *******************************************************************/
 
-import { Unstyled } from '@storybook/blocks';
+import { Unstyled } from '@storybook/addon-docs/blocks';
 import styles from './Summary.module.css';
 
 export function Summary({ children }) {

package/config/storybook/components/Variants/{Variants.js → Variants.jsx}

@@ -8,7 +8,7 @@
  *******************************************************************/
 
 import { useState } from 'preact/hooks';
-import { useOf, Story, Source } from '@storybook/blocks';
+import { useOf, Story, Source } from '@storybook/addon-docs/blocks';
 import './docs.css';
 
 export const Variants = ({ of, storyOrder = [] }) => {

package/config/storybook/components/{video/index.jsx → Video/Video.jsx}

@@ -2,27 +2,17 @@
  *  Copyright 2024 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  Adobe permits you to use, modify, and distribute this 
- * file in accordance with the terms of the Adobe license agreement 
- * accompanying it. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
-export default function Video({ src }) {
+import styles from './Video.module.css';
+
+export function Video({ src }) {
   return (
-    <video
-      muted
-      autoPlay
-      playsInline
-      loop
-      controls
-      style={{
-        marginTop: '6px',
-        borderRadius: '0.5rem',
-        border: '1px solid',
-        borderColor: 'dark:border-zinc-800',
-      }}
-    >
+    <video muted autoPlay playsInline loop controls className={styles.video}>
       <source src={src} type="video/mp4" />
     </video>
-  )
+  );
 }

package/config/storybook/components/Video/Video.module.css

@@ -0,0 +1,15 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
+ *******************************************************************/
+
+.video {
+  margin-top: 6px;
+  border-radius: 0.5rem;
+  border: 1px solid rgb(234, 237, 242);
+  width: 100%;
+}

package/config/storybook/components/Video/index.js

@@ -0,0 +1,10 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
+ *******************************************************************/
+
+export * from '@adobe-commerce/elsie/config/storybook/components/Video/Video';

package/config/storybook/manager.js

@@ -7,7 +7,7 @@
  * accompanying it. 
  *******************************************************************/
 
-import { addons } from '@storybook/manager-api';
+import { addons } from 'storybook/manager-api';
 import theme from './theming/theme';
 import './theming/manager.css';
 

package/config/storybook/preview.jsx

@@ -16,7 +16,7 @@ import {
   Unstyled,
   Description,
   Controls,
-} from '@storybook/blocks';
+} from '@storybook/addon-docs/blocks';
 import './theming/preview.css';
 import { useEffect, useState } from 'preact/hooks';
 

package/config/storybook/theming/theme.js

@@ -7,9 +7,9 @@
  * accompanying it. 
  *******************************************************************/
 
-import { create } from '@storybook/theming';
+import { create } from 'storybook/theming';
 
-import logo from './logo.svg';
+import logo from './logo.svg?url';
 import './fonts.css';
 
 /**