Fixes for storybook aliases (#204842)

* Remove duplicates
* Import list of aliases to buildkite script so we don't need it in two
places
* Mention packages as well as plugins in README, and use newer example
storybook syntax
* Add mjs support to unbreak slo stories

.buildkite/scripts/steps/storybooks/build_and_upload.ts

@@ -10,55 +10,9 @@
 import { execSync } from 'child_process';
 import fs from 'fs';
 import path from 'path';
+import { storybookAliases } from '../../../../src/dev/storybook/aliases';
 import { getKibanaDir } from '#pipeline-utils';
 
-// TODO - how to generate this dynamically?
-const STORYBOOKS = [
-  'ai_assistant',
-  'apm',
-  'canvas',
-  'cases',
-  'cell_actions',
-  'chart_icons',
-  'cloud_security_posture_packages',
-  'coloring',
-  'content_management_examples',
-  'custom_integrations',
-  'dashboard_enhanced',
-  'dashboard',
-  'data',
-  'esql_editor',
-  'expression_error',
-  'expression_image',
-  'expression_metric',
-  'expression_repeat_image',
-  'expression_reveal_image',
-  'expression_shape',
-  'expression_tagcloud',
-  'fleet',
-  'grouping',
-  'home',
-  'infra',
-  'kibana_react',
-  'language_documentation_popover',
-  'lists',
-  'logs_explorer',
-  'management',
-  'observability_ai_assistant',
-  'observability_inventory',
-  'observability_shared',
-  'observability',
-  'presentation',
-  'random_sampling',
-  'security_solution_packages',
-  'security_solution',
-  'serverless',
-  'shared_ux',
-  'triggers_actions_ui',
-  'ui_actions_enhanced',
-  'unified_search',
-];
-
 const GITHUB_CONTEXT = 'Build and Publish Storybooks';
 
 const STORYBOOK_DIRECTORY =
@@ -84,7 +38,7 @@ const ghStatus = (state: string, description: string) =>
 const build = () => {
   console.log('--- Building Storybooks');
 
-  for (const storybook of STORYBOOKS) {
+  for (const storybook of Object.keys(storybookAliases)) {
     exec(`STORYBOOK_BASE_URL=${STORYBOOK_BASE_URL}`, `yarn storybook --site ${storybook}`);
   }
 };

packages/kbn-storybook/README.md

@@ -1,6 +1,6 @@
 # Kibana Storybook
 
-This package provides ability to add [Storybook](https://storybook.js.org/) to any Kibana plugin.
+This package provides ability to add [Storybook](https://storybook.js.org/) to any Kibana package or plugin.
 
 - [Kibana Storybook](#kibana-storybook)
   - [Setup Instructions](#setup-instructions)
@@ -22,19 +22,26 @@ This package provides ability to add [Storybook](https://storybook.js.org/) to a
   the following [Component Story Format](https://storybook.js.org/docs/react/api/csf) contents:
 
   ```jsx
-  import { MyComponent } from './my_component';
-
-  export default {
+  import type { Meta, StoryObj } from '@storybook/react';
+   
+  import { MyComponent } from './MyComponent';
+   
+  const meta: Meta<typeof MyComponent> = {
     component: MyComponent,
-    title: 'Path/In/Side/Navigation/ToComponent',
   };
-
-  export function Example() {
-    return <MyComponent />;
-  }
+   
+  export default meta;
+  type Story = StoryObj<typeof MyComponent>;
+   
+  export const Basic: Story = {};
+   
+  export const WithProp: Story = {
+    render: () => <MyComponent prop="value" />,
+  };
   ```
 
 - Launch Storybook with `yarn storybook <plugin>`, or build a static site with `yarn storybook --site <plugin>`.
+
 ## Customizing configuration
 
 The `defaultConfig` object provided by the `@kbn/storybook` package should be all you need to get running, but you can

packages/kbn-storybook/src/webpack.config.ts

@@ -14,6 +14,7 @@ import webpack, { Configuration, Stats } from 'webpack';
 import webpackMerge from 'webpack-merge';
 import { REPO_ROOT } from './lib/constants';
 import { IgnoreNotFoundExportPlugin } from './ignore_not_found_export_plugin';
+import 'webpack-dev-server'; // Extends webpack configuration with `devServer` property
 
 type Preset = string | [string, Record<string, unknown>] | Record<string, unknown>;
 
@@ -70,9 +71,11 @@ function isDesiredPreset(preset: Preset) {
 // Extend the Storybook Webpack config with some customizations
 /* eslint-disable import/no-default-export */
 export default ({ config: storybookConfig }: { config: Configuration }) => {
-  const config = {
+  const config: Configuration = {
     devServer: {
-      stats,
+      devMiddleware: {
+        stats,
+      },
     },
     externals,
     module: {
@@ -81,6 +84,11 @@ export default ({ config: storybookConfig }: { config: Configuration }) => {
       // already bundled with all its necessary dependencies
       noParse: [/[\/\\]node_modules[\/\\]vega[\/\\]build-es5[\/\\]vega\.js$/],
       rules: [
+        {
+          test: /\.mjs$/,
+          include: /node_modules/,
+          type: 'javascript/auto',
+        },
         {
           test: /\.(html|md|txt|tmpl)$/,
           use: {
@@ -159,7 +167,7 @@ export default ({ config: storybookConfig }: { config: Configuration }) => {
     },
     plugins: [new IgnoreNotFoundExportPlugin()],
     resolve: {
-      extensions: ['.js', '.ts', '.tsx', '.json', '.mdx'],
+      extensions: ['.js', '.mjs', '.ts', '.tsx', '.json', '.mdx'],
       mainFields: ['browser', 'main'],
       alias: {
         core_app_image_assets: resolve(REPO_ROOT, 'src/core/public/styles/core_app/images'),

src/dev/storybook/aliases.ts

@@ -33,7 +33,7 @@ export const storybookAliases = {
   discover: 'src/plugins/discover/.storybook',
   esql_ast_inspector: 'examples/esql_ast_inspector/.storybook',
   es_ui_shared: 'src/platform/plugins/shared/es_ui_shared/.storybook',
-  expandable_flyout: 'x-pack/solutions/security/packages/kbn-expandable-flyout/.storybook',
+  expandable_flyout: 'x-pack/solutions/security/packages/expandable-flyout/.storybook',
   expression_error: 'src/platform/plugins/shared/expression_error/.storybook',
   expression_image: 'src/platform/plugins/shared/expression_image/.storybook',
   expression_metric_vis: 'src/plugins/chart_expressions/expression_legacy_metric/.storybook',
@@ -68,7 +68,6 @@ export const storybookAliases = {
   security_solution_packages: 'x-pack/solutions/security/packages/storybook/config',
   serverless: 'packages/serverless/storybook/config',
   shared_ux: 'packages/shared-ux/storybook/config',
-  slo: 'x-pack/solutions/observability/plugins/slo/.storybook',
   threat_intelligence: 'x-pack/solutions/security/plugins/threat_intelligence/.storybook',
   triggers_actions_ui: 'x-pack/platform/plugins/shared/triggers_actions_ui/.storybook',
   ui_actions_enhanced: 'src/plugins/ui_actions_enhanced/.storybook',