Merge branch 'develop' into fix-EMULSIF-57-preserve-minimized

Author: callinmullaney

.github/workflows/addtoprojects.yml

@@ -18,4 +18,4 @@ jobs:
           # You can target a repository in a different organization
           # to the issue
           project-url: https://github.com/emulsify-ds/emulsify-core
-          github-token: ${{ secrets.ADD_TO_PROJECT_PAT }}
+          github-token: ${{ secrets.GH_TOKEN }}

.storybook/_drupal.js

@@ -32,14 +32,14 @@ window.Drupal = { behaviors: {} };
   Drupal.attachBehaviors = function (context, settings) {
     context = context || document;
     settings = settings || drupalSettings;
-    /** @type {Object.<string, {attach: Function}>} */
-    const behaviors = Drupal.behaviors;
+    /** @type {Array<{attach?: Function}>} */
+    const behaviors = Object.values(Drupal.behaviors);
 
     // Iterate through each behavior and invoke its attach method if defined.
-    Object.keys(behaviors).forEach(function (i) {
-      if (typeof behaviors[i].attach === 'function') {
+    behaviors.forEach(function (behavior) {
+      if (typeof behavior.attach === 'function') {
         try {
-          behaviors[i].attach(context, settings);
+          behavior.attach(context, settings);
         } catch (e) {
           Drupal.throwError(e);
         }

.storybook/emulsifyTheme.js

@@ -1,5 +1,5 @@
 // Documentation on theming Storybook: https://storybook.js.org/docs/configurations/theming/
-import { create } from '@storybook/theming';
+import { create } from 'storybook/theming';
 
 export default create({
   base: 'dark',

.storybook/main.js

@@ -11,7 +11,10 @@ import { resolve } from 'path';
 import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
-import configOverrides from '../../../../config/emulsify-core/storybook/main.js';
+import { createRequire } from 'module';
+import extendWebpackConfig from './webpack.config.js';
+
+const require = createRequire(import.meta.url);
 
 /**
  * The full path to the current file (ESM compatible).
@@ -23,26 +26,70 @@ const _filename = fileURLToPath(import.meta.url);
  * The directory name of the current module file.
  * @type {string}
  */
-const _dirname  = path.dirname(_filename);
+const _dirname = path.dirname(_filename);
+
+/**
+ * Migrate the consumer Storybook theme import from "@storybook/theming" to
+ * "storybook/theming" when needed.
+ *
+ * This runs opportunistically during startup and never throws so Storybook
+ * startup is resilient across all projects.
+ */
+const migrateConsumerThemeImport = () => {
+  try {
+    const themeConfigPath = resolve(
+      _dirname,
+      '../../../../config/emulsify-core/storybook/theme.js',
+    );
+
+    if (!fs.existsSync(themeConfigPath)) {
+      return;
+    }
+
+    const originalThemeConfig = fs.readFileSync(themeConfigPath, 'utf8');
+
+    if (!originalThemeConfig.includes('@storybook/theming')) {
+      return;
+    }
+
+    const migratedThemeConfig = originalThemeConfig.replace(
+      /(['"])@storybook\/theming\1/g,
+      '$1storybook/theming$1',
+    );
+
+    if (migratedThemeConfig !== originalThemeConfig) {
+      fs.writeFileSync(themeConfigPath, migratedThemeConfig, 'utf8');
+    }
+  } catch {
+    // Ignore migration failures so Storybook startup is never blocked.
+  }
+};
+
+migrateConsumerThemeImport();
 
 /**
  * Safely apply any user-provided overrides or fall back to an empty object.
  * @type {object}
  */
-const safeConfigOverrides = configOverrides || {};
+const safeConfigOverrides = (() => {
+  try {
+    const overridesModule = require('../../../../config/emulsify-core/storybook/main.js');
+    return overridesModule.default || overridesModule || {};
+  } catch {
+    return {};
+  }
+})();
 
 /**
  * Primary Storybook configuration object.
- * @type {import('@storybook/core-common').StorybookConfig}
+ * @type {import('storybook/internal/types').StorybookConfig}
  */
 const config = {
   /**
    * Patterns for locating story files under src or components directories.
    * @type {string[]}
    */
-  stories: [
-    '../../../../(src|components)/**/*.stories.@(js|jsx|ts|tsx)',
-  ],
+  stories: ['../../../../@(src|components)/**/*.stories.@(js|jsx|ts|tsx)'],
 
   /**
    * Directories to serve as static assets in the Storybook build.
@@ -52,35 +99,39 @@ const config = {
     '../../../../assets/images',
     '../../../../assets/icons',
     '../../../../dist',
+    '../../../../assets/videos',
   ],
 
   /**
    * List of Storybook addons to enable various features.
    * @type {string[]}
    */
   addons: [
-    '../../../@storybook/addon-a11y',
-    '../../../@storybook/addon-links',
-    '../../../@storybook/addon-essentials',
-    '../../../@storybook/addon-themes',
-    '../../../@storybook/addon-styling-webpack',
+    '@storybook/addon-a11y',
+    '@storybook/addon-links',
+    '@storybook/addon-themes',
+    '@storybook/addon-styling-webpack',
   ],
 
   /**
    * Core builder configuration for Storybook.
-   * @type {{builder: string, disableTelemetry: boolean}}
+   * Storybook 9 splits the HTML renderer from the webpack builder, so the
+   * builder must be declared explicitly instead of relying on html-webpack5.
+   * @type {{builder: {name: string}, disableTelemetry: boolean}}
    */
   core: {
-    builder: 'webpack5',
+    builder: {
+      name: '@storybook/builder-webpack5',
+    },
     disableTelemetry: true,
   },
 
   /**
-   * Framework specification for Storybook (HTML + Webpack5).
+   * Framework specification for Storybook's HTML renderer.
    * @type {{name: string, options: object}}
    */
   framework: {
-    name: '@storybook/html-webpack5',
+    name: '@storybook/server-webpack5',
     options: {},
   },
 
@@ -205,7 +256,7 @@ const config = {
     // load external manager-head.html if present
     const externalManagerHeadPath = resolve(
       _dirname,
-      '../../../../config/emulsify-core/storybook/manager-head.html'
+      '../../../../config/emulsify-core/storybook/manager-head.html',
     );
     let externalManagerHtml = '';
     if (fs.existsSync(externalManagerHeadPath)) {
@@ -225,7 +276,7 @@ ${externalManagerHtml}`;
   previewHead: (head) => {
     const externalHeadPath = resolve(
       _dirname,
-      '../../../../config/emulsify-core/storybook/preview-head.html'
+      '../../../../config/emulsify-core/storybook/preview-head.html',
     );
 
     let externalHtml = '';
@@ -237,6 +288,16 @@ ${externalManagerHtml}`;
 ${externalHtml}`;
   },
 
+  /**
+   * Forward Storybook 9's webpack hook to the existing shared webpack helper so
+   * custom Twig, Sass, YAML, and resolver behavior still applies.
+   * @param {object} storybookConfig - Storybook's generated webpack config.
+   * @param {object} options - Storybook webpack hook options.
+   * @returns {Promise<object>} The merged webpack config.
+   */
+  webpackFinal: async (storybookConfig, options) =>
+    extendWebpackConfig({ config: storybookConfig, ...options }),
+
   // Merge in user overrides without modifying original logic
   ...safeConfigOverrides,
 };

.storybook/manager.js

@@ -1,7 +1,7 @@
 // .storybook/manager.js
 
-import { addons } from '@storybook/manager-api';
-import emulsifyTheme from './emulsifyTheme';
+import { addons } from 'storybook/manager-api';
+import emulsifyTheme from './emulsifyTheme.js';
 
 /**
  * Dynamically import the user-provided Storybook theme override.
@@ -19,7 +19,8 @@ import('../../../../config/emulsify-core/storybook/theme')
      */
     const isEmptyObject =
       !customTheme ||
-      (typeof customTheme === 'object' && Object.keys(customTheme).length === 0);
+      (typeof customTheme === 'object' &&
+        Object.keys(customTheme).length === 0);
 
     /**
      * Apply the chosen theme to Storybook’s manager UI configuration.
@@ -42,4 +43,3 @@ import('../../../../config/emulsify-core/storybook/theme')
       theme: emulsifyTheme,
     });
   });
-  

.storybook/polyfills/twig-include.js

@@ -0,0 +1,40 @@
+import resolveTemplate from './twig-resolver.js';
+
+/**
+ * Twig `include()` polyfill.
+ * Mirrors Drupal behaviour inside Storybook.
+ * @param {string} templateName
+ * @param {Object} [variables]
+ * @param {boolean} [withContext=false]
+ * @return {string}
+ */
+function twigInclude(Twig) {
+  Twig.extendFunction('include', (...args) => {
+    let [templateName, variables = {}, withContext = false] = args;
+    if (
+      typeof withContext !== 'boolean' &&
+      variables &&
+      typeof variables.with_context !== 'undefined'
+    ) {
+      withContext = variables.with_context;
+      delete variables.with_context;
+    }
+
+    try {
+      const templateFn = resolveTemplate(templateName);
+      if (!templateFn) return '';
+
+      const finalContext =
+        withContext && typeof this === 'object'
+          ? { ...(this.context || {}), ...variables }
+          : variables;
+
+      return templateFn(finalContext);
+    } catch (err) {
+      console.error(`Twig include() failed for: ${templateName}`, err);
+      return '';
+    }
+  });
+}
+
+export default twigInclude;

.storybook/polyfills/twig-resolver.js

@@ -0,0 +1,70 @@
+import { getProjectMachineName } from '../utils.js';
+
+const namespace = getProjectMachineName();
+
+const twigComponents = require.context(
+  '../../../../../src/components/',
+  true,
+  /\.twig$/,
+);
+
+/**
+ * Resolve template identifier to compiled Twig function.
+ * Supports: @component.twig, namespace:component, @namespace/component, namespace/component
+ * @param {string} name Template identifier
+ * @returns {Function|undefined} Compiled function or noop
+ */
+function resolveTemplate(name) {
+  // namespace:icon, @namespace/icon.twig
+  if (name.startsWith(`${namespace}:`) || name.startsWith(`@${namespace}/`)) {
+    const part = name.startsWith(`${namespace}:`)
+      ? name.split(':')[1]
+      : name.replace(`${namespace}/`, '').replace('.twig', '');
+    const path = `./${part}/${part}.twig`;
+    try {
+      const mod = twigComponents(path);
+      return mod && mod.default ? mod.default : mod;
+    } catch {
+      console.error(`Cannot resolve Twig component for '${name}' at '${path}'`);
+    }
+  }
+
+  // @icon.twig → icon/icon.twig
+  if (name.startsWith('@') && name.endsWith('.twig')) {
+    const part = name.slice(1, -5); // remove leading @ and trailing .twig
+    const path = `./${part}/${part}.twig`;
+    try {
+      return twigComponents(path).default || twigComponents(path);
+    } catch {
+      console.error(
+        `Cannot resolve Twig shorthand template '${name}' at '${path}'`,
+      );
+    }
+  }
+
+  // namespace/icon.twig via webpack alias
+  if (name.startsWith(`${namespace}/`)) {
+    const part = name.slice(namespace.length + 1).replace('.twig', '');
+    const path = `./${part}/${part}.twig`;
+    try {
+      return twigComponents(path).default || twigComponents(path);
+    } catch {
+      console.error(
+        `Cannot resolve Twig alias template '${name}' at '${path}'`,
+      );
+    }
+  }
+
+  try {
+    // Storybook resolves runtime Twig requests through webpack, so this
+    // fallback intentionally loads a module path determined at render time.
+    // eslint-disable-next-line security/detect-non-literal-require
+    const mod = require(name);
+    return mod && mod.default ? mod.default : mod;
+  } catch (error) {
+    console.error(`Cannot resolve Twig template '${name}'`, error);
+    return () => '';
+  }
+}
+
+export default resolveTemplate;