Upgrade Storybook to v8.4 (#8173)

elastic · Nov 22, 2024 · 2969bd7 · 2969bd7
1 parent cb1325b
commit 2969bd7
Show file tree

Hide file tree

Showing 8 changed files with 635 additions and 3,101 deletions.
diff --git a/packages/eui/package.json b/packages/eui/package.json
@@ -113,16 +113,17 @@
     "@loki/create-async-callback": "^0.35.0",
     "@loki/is-loki-running": "^0.35.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
-    "@storybook/addon-essentials": "^8.0.5",
-    "@storybook/addon-interactions": "^8.0.5",
-    "@storybook/addon-links": "^8.0.5",
+    "@storybook/addon-essentials": "^8.4.5",
+    "@storybook/addon-interactions": "^8.4.5",
+    "@storybook/addon-links": "^8.4.5",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/blocks": "^8.0.5",
-    "@storybook/manager-api": "^8.1.3",
-    "@storybook/preview-api": "^8.1.3",
-    "@storybook/react": "^8.0.5",
-    "@storybook/react-webpack5": "^8.0.5",
-    "@storybook/test": "^8.0.5",
+    "@storybook/blocks": "^8.4.5",
+    "@storybook/docs-tools": "^8.4.5",
+    "@storybook/manager-api": "^8.4.5",
+    "@storybook/preview-api": "^8.4.5",
+    "@storybook/react": "^8.4.5",
+    "@storybook/react-webpack5": "^8.4.5",
+    "@storybook/test": "^8.4.5",
     "@svgr/core": "8.0.0",
     "@svgr/plugin-jsx": "^8.0.1",
     "@svgr/plugin-svgo": "^8.0.1",
@@ -189,7 +190,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-storybook": "^0.9.0",
     "expose-gc": "^1.0.0",
     "file-loader": "^6.1.0",
     "findup": "^0.1.5",
@@ -235,7 +236,7 @@
     "sass-loader": "^13.2.0",
     "shelljs": "^0.8.4",
     "start-server-and-test": "^1.11.3",
-    "storybook": "^8.0.5",
+    "storybook": "^8.4.5",
     "style-loader": "^3.3.1",
     "stylelint": "^15.7.0",
     "stylelint-config-prettier-scss": "^1.0.0",

diff --git a/packages/eui/src/components/button/button_group/button_group.stories.tsx b/packages/eui/src/components/button/button_group/button_group.stories.tsx
@@ -33,9 +33,6 @@ const meta: Meta<EuiButtonGroupProps> = {
       control: 'object',
       if: { arg: 'type', eq: 'multi' },
     },
-    options: {
-      control: 'array',
-    },
   },
   args: {
     // Component defaults
@@ -45,6 +42,7 @@ const meta: Meta<EuiButtonGroupProps> = {
     isDisabled: false,
     isFullWidth: false,
     isIconOnly: false,
+    options: [],
   },
 };
 disableStorybookControls(meta, ['type']);

diff --git a/packages/eui/src/components/color_picker/color_picker.stories.tsx b/packages/eui/src/components/color_picker/color_picker.stories.tsx
@@ -10,14 +10,14 @@ import React, { FunctionComponent, useState, useEffect } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { enableFunctionToggleControls } from '../../../.storybook/utils';
 
+import { euiPaletteColorBlind } from '../..//services';
 import { EuiColorPicker, EuiColorPickerProps } from './color_picker';
 
 const meta: Meta<EuiColorPickerProps> = {
   title: 'Forms/EuiColorPicker/EuiColorPicker',
   component: EuiColorPicker,
   argTypes: {
     color: { control: 'color' },
-    swatches: { control: 'array' }, // TODO: crashes if clicked in Storybook
     append: { control: 'text' },
     prepend: { control: 'text' },
   },
@@ -33,6 +33,7 @@ const meta: Meta<EuiColorPickerProps> = {
     display: 'default',
     mode: 'default',
     secondaryInputDisplay: 'none',
+    swatches: euiPaletteColorBlind(),
   },
 };
 enableFunctionToggleControls(meta, ['onChange']);

diff --git a/packages/eui/src/components/combo_box/combo_box.stories.tsx b/packages/eui/src/components/combo_box/combo_box.stories.tsx
@@ -43,7 +43,7 @@ const meta: Meta<EuiComboBoxProps<{}>> = {
     // Storybook is skipping the Pick<> props from EuiComboBoxList for some annoying reason
     onCreateOption: { control: 'boolean' }, // Set to a true/false for ease of testing
     customOptionText: { control: 'text' },
-    renderOption: { control: 'function' },
+    renderOption: { control: false }, // Storybook doesn't have a function control type
   },
   args: {
     // Pass options in by default for ease of testing

diff --git a/packages/eui/src/components/comment_list/comment.stories.tsx b/packages/eui/src/components/comment_list/comment.stories.tsx
@@ -30,7 +30,7 @@ export const _eventColorArgType = {
     'accent',
   ],
   control: { type: 'radio' },
-};
+} as const;
 export const _actionsExampleArgType = {
   control: 'radio',
   options: ['Example action', 'No actions'],
@@ -46,7 +46,7 @@ export const _actionsExampleArgType = {
     'No actions': null,
   },
   defaultValue: 'Example action',
-};
+} as const;
 
 /**
  * Rendered stories

diff --git a/packages/eui/src/components/date_picker/date_picker.stories.tsx b/packages/eui/src/components/date_picker/date_picker.stories.tsx
@@ -39,7 +39,7 @@ const meta: Meta<EuiDatePickerProps> = {
         'Allows customizing the underlying EuiPopover component, of type `Partial<EuiPopoverProps>`',
     },
     filterDate: {
-      control: 'function',
+      control: false, // Storybook doesn't have a function control type
       // @ts-ignore - overwriting to match jsdoc info
       type: '(date: moment.Moment) => boolean',
     },

diff --git a/packages/eui/tsconfig.json b/packages/eui/tsconfig.json
@@ -40,6 +40,9 @@
     // same in TypeScript as it does in Node.js.
     "moduleResolution": "node",
 
+    // Skip type checking node_modules
+    "skipLibCheck": true,
+
     // Disallow inconsistently-cased references to the same file.
     "forceConsistentCasingInFileNames": true,