[WIP] Upgrade to Storybook 8

package.json

@@ -1490,26 +1490,26 @@
     "@playwright/test": "=1.46.0",
     "@redocly/cli": "^1.21.0",
     "@statoscope/webpack-plugin": "^5.28.2",
-    "@storybook/addon-a11y": "^6.5.16",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-docs": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-knobs": "^6.4.0",
-    "@storybook/addon-storyshots": "^6.5.16",
-    "@storybook/addons": "^6.5.16",
-    "@storybook/api": "^6.5.16",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/client-api": "^6.5.16",
-    "@storybook/components": "^6.5.16",
-    "@storybook/core": "^6.5.16",
-    "@storybook/core-common": "^6.5.16",
-    "@storybook/core-events": "^6.5.16",
+    "@storybook/addon-a11y": "^8.3.5",
+    "@storybook/addon-actions": "^8.3.5",
+    "@storybook/addon-docs": "^8.3.5",
+    "@storybook/addon-essentials": "^8.3.5",
+    "@storybook/addon-knobs": "^8.0.1",
+    "@storybook/addon-storyshots": "^7.6.17",
+    "@storybook/addons": "^7.6.17",
+    "@storybook/api": "^7.6.17",
+    "@storybook/builder-webpack5": "^8.3.5",
+    "@storybook/client-api": "^7.6.17",
+    "@storybook/components": "^8.3.5",
+    "@storybook/core": "^8.3.5",
+    "@storybook/core-common": "^8.3.5",
+    "@storybook/core-events": "^8.3.5",
     "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/node-logger": "^6.5.16",
-    "@storybook/preview-web": "^6.5.16",
-    "@storybook/react": "^6.5.16",
-    "@storybook/testing-react": "^1.3.0",
-    "@storybook/theming": "^6.5.16",
+    "@storybook/node-logger": "^8.3.5",
+    "@storybook/preview-web": "^7.6.17",
+    "@storybook/react": "^8.3.5",
+    "@storybook/testing-react": "^2.0.1",
+    "@storybook/theming": "^8.3.5",
     "@testing-library/dom": "^8.19.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^12.1.5",

packages/kbn-language-documentation/src/__stories__/language_documentation_popover.stories.tsx

@@ -8,7 +8,6 @@
  */
 
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { LanguageDocumentationPopover } from '../components/as_popover';
 
 const sections = {
@@ -62,12 +61,20 @@ const sections = {
   ),
 };
 
-storiesOf('Language documentation popover', module).add('default', () => (
+export default {
+  title: 'Language documentation popover',
+};
+
+export const Default = () => (
   <LanguageDocumentationPopover
     language="Test"
     sections={sections}
     buttonProps={{ color: 'text' }}
     isHelpMenuOpen={true}
     onHelpMenuVisibilityChange={() => {}}
   />
-));
+);
+
+Default.story = {
+  name: 'default',
+};

packages/kbn-unified-doc-viewer/src/components/field_name/__stories__/field_name.stories.tsx

@@ -1,13 +1,3 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the "Elastic License
- * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
- * Public License v 1"; you may not use this file except in compliance with, at
- * your election, the "Elastic License 2.0", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { EuiFlexGroup } from '@elastic/eui';
 import { DataViewField } from '@kbn/data-views-plugin/public';
@@ -36,13 +26,28 @@ const renderFieldName = (fldName: React.ReactNode) => {
   );
 };
 
-storiesOf('components/FieldName/FieldNameStories', module)
-  .add('default', () => renderFieldName(<FieldName fieldName={'Discover test'} />))
-  .add('with field type', () =>
-    renderFieldName(<FieldName fieldName={'Discover test'} fieldType={'number'} />)
-  )
-  .add('with field mapping', () =>
-    renderFieldName(
-      <FieldName fieldName={'Discover test'} fieldMapping={field} fieldType={'number'} />
-    )
+export default {
+  title: 'components/FieldName/FieldNameStories',
+};
+
+export const Default = () => renderFieldName(<FieldName fieldName={'Discover test'} />);
+
+Default.story = {
+  name: 'default',
+};
+
+export const WithFieldType = () =>
+  renderFieldName(<FieldName fieldName={'Discover test'} fieldType={'number'} />);
+
+WithFieldType.story = {
+  name: 'with field type',
+};
+
+export const WithFieldMapping = () =>
+  renderFieldName(
+    <FieldName fieldName={'Discover test'} fieldMapping={field} fieldType={'number'} />
   );
+
+WithFieldMapping.story = {
+  name: 'with field mapping',
+};

packages/shared-ux/markdown/impl/markdown_editor.stories.tsx

@@ -32,10 +32,10 @@ export const MarkdownStoryComponent = (params: MarkdownStorybookParams) => {
   return (
     // The markdown component is wrapped in the EuiFlexItem with width set to 50%
     // Height can be set for the markdown component
-    <EuiFlexItem style={{ width: '400px' }}>
+    (<EuiFlexItem style={{ width: '400px' }}>
       {/* readOnly is set to false because the Markdown component editor will error if set to true without markdown content or children  */}
       <Markdown {...params} readOnly={false} />
-    </EuiFlexItem>
+    </EuiFlexItem>)
   );
 };