Release: 4.x (Vite and Storybook React v9)

.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

@@ -7,11 +7,11 @@
  * @module .storybook/main
  */
 
-import { resolve } from 'path';
 import fs from 'fs';
-import path from 'path';
+import path, { resolve } from 'path';
 import { fileURLToPath } from 'url';
 import configOverrides from '../../../../config/emulsify-core/storybook/main.js';
+import viteConfig from '../config/vite/vite.config.js';
 
 /**
  * The full path to the current file (ESM compatible).
@@ -23,7 +23,7 @@ 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);
 
 /**
  * Safely apply any user-provided overrides or fall back to an empty object.
@@ -41,7 +41,7 @@ const config = {
    * @type {string[]}
    */
   stories: [
-    '../../../../(src|components)/**/*.stories.@(js|jsx|ts|tsx)',
+    '../../../../@(src|components)/**/*.stories.@(js|jsx|ts|tsx)',
   ],
 
   /**
@@ -59,19 +59,17 @@ const config = {
    * @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',
   ],
 
   /**
    * Core builder configuration for Storybook.
    * @type {{builder: string, disableTelemetry: boolean}}
    */
   core: {
-    builder: 'webpack5',
+    builder: '@storybook/builder-vite',
     disableTelemetry: true,
   },
 
@@ -80,7 +78,7 @@ const config = {
    * @type {{name: string, options: object}}
    */
   framework: {
-    name: '@storybook/html-webpack5',
+    name: '@storybook/react-vite',
     options: {},
   },
 
@@ -237,6 +235,34 @@ ${externalManagerHtml}`;
 ${externalHtml}`;
   },
 
+  // Storybook specific Vite configuration.
+  async viteFinal(config) {
+    const { mergeConfig } = await import('vite');
+    return mergeConfig(config, {
+      ...viteConfig,
+      esbuild: {
+        'jsx': 'automatic',
+        loader: 'jsx',
+        include: /.*\.jsx?$/,
+        exclude: [],
+      },
+      optimizeDeps: {
+        include: [
+          'path',
+          'twig',
+          'twig-drupal-filters',
+          'bem-twig-extension',
+          'add-attributes-twig-extension',
+        ],
+        esbuildOptions: {
+          loader: {
+            '.js': 'jsx',
+          },
+        },
+      },
+    })
+  },
+
   // Merge in user overrides without modifying original logic
   ...safeConfigOverrides,
 };

.storybook/manager.js

@@ -1,6 +1,6 @@
 // .storybook/manager.js
 
-import { addons } from '@storybook/manager-api';
+import { addons } from 'storybook/manager-api';
 import emulsifyTheme from './emulsifyTheme';
 
 /**
@@ -42,4 +42,3 @@ import('../../../../config/emulsify-core/storybook/theme')
       theme: emulsifyTheme,
     });
   });
-

.storybook/preview.js

@@ -1,8 +1,8 @@
 // .storybook/preview.js
-import { useEffect } from '@storybook/preview-api';
-import Twig from 'twig';
-import { setupTwig, fetchCSSFiles } from './utils.js';
 import { getRules } from 'axe-core';
+import { useEffect } from 'storybook/preview-api';
+import Twig from 'twig';
+import { fetchCSSFiles, setupTwig } from './utils.js';
 
 /**
  * External override parameters loaded from project config file, if present.

.storybook/utils.js

@@ -1,19 +1,8 @@
-import { resolve, dirname } from 'path';
-import twigDrupal from 'twig-drupal-filters';
-import twigBEM from 'bem-twig-extension';
 import twigAddAttributes from 'add-attributes-twig-extension';
+import twigBEM from 'bem-twig-extension';
+import twigDrupal from 'twig-drupal-filters';
 import emulsifyConfig from '../../../../project.emulsify.json' with { type: 'json' };
 
-// Create __filename from import.meta.url without fileURLToPath
-let _filename = decodeURIComponent(new URL(import.meta.url).pathname);
-
-// On Windows, remove the leading slash (e.g. "/C:/path" -> "C:/path")
-if (process.platform === 'win32' && _filename.startsWith('/')) {
-  _filename = _filename.slice(1);
-}
-
-const _dirname = dirname(_filename);
-
 /**
  * Fetches project-based variant configuration. If no such configuration
  * exists, returns default values as a flat component structure.
@@ -42,25 +31,19 @@ const fetchVariantConfig = () => {
 const fetchCSSFiles = () => {
   try {
     // Load all CSS files from 'dist'.
-    const cssFiles = require.context('../../../../dist', true, /\.css$/);
-    cssFiles.keys().forEach((file) => cssFiles(file));
+    const cssFiles = import.meta.glob('../../../../dist/**/*.css', { eager: true });
+    Object.values(cssFiles).forEach((css) => css);
 
     // Load all CSS files from 'components' for 'drupal' platform.
     if (emulsifyConfig.project.platform === 'drupal') {
-      const drupalCSSFiles = require.context('../../../../components', true, /\.css$/);
-      drupalCSSFiles.keys().forEach((file) => drupalCSSFiles(file));
+      const drupalCSSFiles = import.meta.glob('../../../../components/**/*.css', { eager: true });
+      Object.values(drupalCSSFiles).forEach((css) => css);
     }
   } catch (e) {
     return undefined;
   }
 };
 
-// Build namespaces mapping.
-export const namespaces = {};
-for (const { name, directory } of fetchVariantConfig()) {
-  namespaces[name] = resolve(_dirname, '../../../../', directory);
-}
-
 /**
  * Configures and extends a standard Twig object.
  *