[Chore] Use Vite builder for Storybook

.buildkite/scripts/deploy_docs/step_vrt.sh

@@ -100,6 +100,9 @@ yarn
 
 echo "+++ Running visual regression tests against ${STORYBOOK_URL}"
 
+# GCS upload can finish before `eui.elastic.co` serves the new files.
+retry 8 curl -fsSL -o /dev/null -H 'Cache-Control: no-cache' "${STORYBOOK_URL}/index.json"
+
 vrt_output_file=$(mktemp)
 VRT_PASSED=true
 yarn workspace @elastic/eui test-visual-regression -- --url "${STORYBOOK_URL}" 2>&1 \

packages/eui/.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "parser": "typescript",
+  "printWidth": 80,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

packages/eui/.storybook/addons/code-snippet/decorators/utils.ts

@@ -21,8 +21,7 @@ import { Args, StoryContext } from '@storybook/react';
 import * as prettier from 'prettier';
 import tsParser from 'prettier/parser-typescript';
 
-// @ts-ignore - config import
-import basePrettierConfig from '../../../../.prettierrc';
+import basePrettierConfig from '../../../../.prettierrc.json';
 import {
   ADDON_PARAMETER_KEY,
   EMOTION_LABEL_KEY,

packages/eui/.storybook/main.ts

@@ -6,63 +6,47 @@
  * Side Public License, v 1.
  */
 
-import { createRequire } from 'node:module';
-import path from 'path';
-import type { StorybookConfig } from '@storybook/react-webpack5';
-
-const require = createRequire(import.meta.url);
-
-/**
- * Get an absolute path to package's `node_modules` directory. It's compatible
- * with yarn hoisting logic.
- *
- * It works by resolving a path to its `package.json` file since it's the only
- * file that must exist in the package's root directory. Resolving the package
- * itself would return a path to the entry point that could be anywhere within
- * that package's directory.
- *
- * @see https://github.com/storybookjs/storybook/issues/21710#issuecomment-1604260157
- */
-const getAbsoluteDependencyPath = (packageName: string) =>
-  path.dirname(require.resolve(path.join(packageName, 'package.json')));
+import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-webpack5-compiler-babel'],
   framework: {
-    name: '@storybook/react-webpack5',
+    name: '@storybook/react-vite',
     options: {},
   },
-  webpackFinal: async (config) => {
-    // Fix for `css` prop - Emotion doesn't work otherwise
-    config.module!.rules!.push({
-      test: /\.tsx?$/,
-      use: [
-        {
-          loader: require.resolve('babel-loader'),
-        },
-      ],
-    });
+  async viteFinal(config) {
+    const { mergeConfig } = await import('vite');
+    const { default: react } = await import('@vitejs/plugin-react');
 
-    return {
-      ...config,
-      resolve: {
-        ...config.resolve,
-        alias: {
-          ...config.resolve?.alias,
-          // we need to resolve to the modules file as otherwise
-          // 'tty' and 'os' dependencies are not resolved correctly
-          // https://github.com/storybookjs/storybook/issues/26997#issuecomment-2088494093
-          'storybook/test': path.join(
-            getAbsoluteDependencyPath('storybook'),
-            'dist/test/index.js'
-          ),
-        },
+    return mergeConfig(config, {
+      plugins: [
+        react({
+          jsxImportSource: '@emotion/react',
+          babel: (id: string) => ({
+            plugins: [
+              [
+                '@emotion/babel-plugin',
+                { autoLabel: 'always', labelFormat: '[local]' },
+              ],
+              // `pegjs-inline-precompile` is used by `EuiSearchBar`
+              // TODO: simplify with peggy CLI and drop Babel plugin
+              ...(/query[\\/]default_syntax\.ts$/.test(id)
+                ? ['pegjs-inline-precompile']
+                : []),
+            ],
+          }),
+        }),
+      ],
+      optimizeDeps: {
+        exclude: ['pegjs-inline-precompile'],
       },
-    };
+    });
   },
   typescript: {
     reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      include: ['src/**/*.{ts,tsx}'],
+    },
   },
 };
 

packages/eui/cypress/webpack.config.js

@@ -27,7 +27,7 @@ module.exports = {
   stats: 'minimal',
 
   resolve: {
-    extensions: ['.ts', '.tsx', '.js', '.json'],
+    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
     fallback: {
       fs: false,
       os: false,
@@ -39,7 +39,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.(js|tsx?)$/,
+        test: /\.(jsx?|tsx?)$/,
         loader: 'babel-loader',
         exclude: /node_modules/,
         sideEffects: true, // tells webpack not to tree shake `import './'` lines

packages/eui/package.json

@@ -43,7 +43,7 @@
     "release-backport": "node ./scripts/release.js --type=backport",
     "release-rc": "node ./scripts/release.js --type=prerelease",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
+    "build-storybook": "NODE_OPTIONS=--max-old-space-size=4096 storybook build",
     "serve-storybook": "http-server storybook-static --port 6006 --silent",
     "test-storybook": "test-storybook",
     "pre-push": "yarn test-staged",
@@ -64,6 +64,7 @@
     "@types/refractor": "^3.4.0",
     "chroma-js": "^2.4.2",
     "classnames": "^2.5.1",
+    "diff-match-patch": "^1.0.5",
     "lodash": "^4.17.21",
     "mdast-util-to-hast": "^10.2.0",
     "numeral": "^2.0.6",
@@ -84,7 +85,6 @@
     "remark-parse-no-trim": "^8.0.4",
     "remark-rehype": "^8.1.0",
     "tabbable": "^5.3.3",
-    "text-diff": "^1.0.1",
     "unified": "^9.2.2",
     "unist-util-visit": "^2.0.3",
     "url-parse": "^1.5.10",
@@ -112,6 +112,7 @@
     "@elastic/eslint-plugin-eui": "workspace:*",
     "@elastic/eui-illustrations": "workspace:*",
     "@elastic/eui-theme-borealis": "workspace:*",
+    "@emotion/babel-plugin": "^11.11.0",
     "@emotion/babel-preset-css-prop": "^11.11.0",
     "@emotion/cache": "^11.11.0",
     "@emotion/css": "^11.11.0",
@@ -122,9 +123,8 @@
     "@fontsource-variable/inter": "^5.3.0",
     "@fontsource-variable/roboto-mono": "^5.3.0",
     "@playwright/test": "^1.44.0",
-    "@storybook/addon-webpack5-compiler-babel": "^4.0.1",
-    "@storybook/react": "^10.5.5",
-    "@storybook/react-webpack5": "^10.5.5",
+    "@storybook/react": "^10.5.7",
+    "@storybook/react-vite": "^10.5.7",
     "@storybook/test-runner": "^0.24.4",
     "@svgr/core": "8.0.0",
     "@svgr/plugin-jsx": "^8.0.1",
@@ -149,6 +149,7 @@
     "@types/vfile-message": "^2.0.0",
     "@typescript-eslint/eslint-plugin": "^5.59.7",
     "@typescript-eslint/parser": "^5.59.7",
+    "@vitejs/plugin-react": "^5.2.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
     "assert": "^2.0.0",
     "autoprefixer": "^9.8.6",
@@ -184,7 +185,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^10.5.5",
+    "eslint-plugin-storybook": "^10.5.7",
     "expose-gc": "^1.0.0",
     "findup": "^0.1.5",
     "glob": "^11.0.3",
@@ -213,12 +214,13 @@
     "rimraf": "^3.0.2",
     "sass": "^1.56.1",
     "shelljs": "^0.8.4",
-    "storybook": "^10.5.5",
+    "storybook": "^10.5.7",
     "stylelint": "^15.7.0",
     "stylelint-config-prettier-scss": "^1.0.0",
     "stylelint-config-standard": "^33.0.0",
     "stylelint-config-standard-scss": "^9.0.0",
     "typescript": "^5.8.3",
+    "vite": "^7.3.6",
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.10.0",

packages/eui/scripts/compile-eui.js

@@ -139,7 +139,7 @@ function runBabel({ outDir, ignore, configFile, env = {} }) {
     const args = [
       '--quiet',
       `--out-dir=${outDir}`,
-      '--extensions=.js,.ts,.tsx',
+      '--extensions=.js,.jsx,.ts,.tsx',
       `--ignore=${ignore}`,
     ];
 

packages/eui/scripts/jest/config.js

@@ -58,11 +58,11 @@ const config = {
   ],
   coverageDirectory: '<rootDir>/reports/jest-coverage',
   coverageReporters: ['json', 'html'],
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
   testEnvironment: 'jsdom',
   testMatch: ['**/*.test.js', '**/*.test.ts', '**/*.test.tsx'],
   transform: {
-    '^.+\\.(js|tsx?)$': ['babel-jest', {
+    '^.+\\.(jsx?|tsx?)$': ['babel-jest', {
       configFile: path.resolve(__dirname, '../../.babelrc.js'),
     }],
   },

packages/eui/src/components/accessibility/live_announcer/live_announcer.stories.tsx

@@ -7,7 +7,7 @@
  */
 
 import React, { ReactNode, useEffect, useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { EuiLiveAnnouncer, EuiLiveAnnouncerProps } from './live_announcer';
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';

packages/eui/src/components/accessibility/screen_reader_live/screen_reader_live.stories.tsx

@@ -7,7 +7,7 @@
  */
 
 import React, { ReactNode, useEffect, useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import {
   EuiScreenReaderLive,

packages/eui/src/components/accessibility/screen_reader_only/screen-reader_only.stories.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import {
   EuiScreenReaderOnly,

packages/eui/src/components/accessibility/skip_link/skip_link.stories.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { moveStorybookControlsToCategory } from '../../../../.storybook/utils';
 import { EuiSkipLink, EuiSkipLinkProps } from './skip_link';

packages/eui/src/components/accordion/accordion.stories.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { EuiAccordion, EuiAccordionProps } from './accordion';
 

packages/eui/src/components/aspect_ratio/aspect_ratio.stories.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { disableStorybookControls } from '../../../.storybook/utils';
 
 import { EuiAspectRatio, EuiAspectRatioProps } from './aspect_ratio';

packages/eui/src/components/auto_sizer/auto_sizer.stories.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { HeightAndWidthProps } from 'react-virtualized-auto-sizer';
 
 import { disableStorybookControls } from '../../../.storybook/utils';

packages/eui/src/components/avatar/avatar.stories.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { EuiAvatar, EuiAvatarProps } from './avatar';
 

packages/eui/src/components/badge/badge.stories.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { action } from 'storybook/actions';
 
 import { EuiCode } from '../code';

packages/eui/src/components/badge/badge_group/badge_group.stories.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { EuiBadge } from '../badge';
 import { EuiBadgeGroup, EuiBadgeGroupProps } from './badge_group';

packages/eui/src/components/badge/beta_badge/beta_badge.stories.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { EuiTitle } from '../../title';
 

packages/eui/src/components/badge/notification_badge/badge_notification.stories.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import {
   EuiNotificationBadge,

packages/eui/src/components/banner/banner.stories.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { action } from 'storybook/actions';
 
 import { enableFunctionToggleControls } from '../../../.storybook/utils';

packages/eui/src/components/basic_table/basic_table.stories.tsx

@@ -8,7 +8,7 @@
 
 import React, { useCallback, useEffect, useState } from 'react';
 import { css } from '@emotion/react';
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { action } from 'storybook/actions';
 import { faker } from '@faker-js/faker';
 import { moveStorybookControlsToCategory } from '../../../.storybook/utils';

packages/eui/src/components/basic_table/in_memory_table.stories.tsx

@@ -7,7 +7,7 @@
  */
 
 import React, { useEffect, useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { faker } from '@faker-js/faker';
 import { moveStorybookControlsToCategory } from '../../../.storybook/utils';
 

packages/eui/src/components/beacon/beacon.stories.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { EuiBeacon, EuiBeaconProps } from './beacon';