[8.16] Fixes for storybook aliases (#204842) (#205206)

# Backport

This will backport the following commits from `main` to `8.16`:
- [Fixes for storybook aliases
(#204842)](https://github.com/elastic/kibana/pull/204842)

<!--- Backport version: 8.9.8 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Nathan L
Smith","email":"nathan.smith@elastic.co"},"sourceCommit":{"committedDate":"2024-12-26T16:38:22Z","message":"Fixes
for storybook aliases (#204842)\n\n* Remove duplicates\r\n* Import list
of aliases to buildkite script so we don't need it in two\r\nplaces\r\n*
Mention packages as well as plugins in README, and use newer
example\r\nstorybook syntax\r\n* Add mjs support to unbreak slo
stories","sha":"ddcf076ff400315a66e6076d694b301cf7d84070","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","backport:prev-major","ci:build-storybooks"],"number":204842,"url":"https://github.com/elastic/kibana/pull/204842","mergeCommit":{"message":"Fixes
for storybook aliases (#204842)\n\n* Remove duplicates\r\n* Import list
of aliases to buildkite script so we don't need it in two\r\nplaces\r\n*
Mention packages as well as plugins in README, and use newer
example\r\nstorybook syntax\r\n* Add mjs support to unbreak slo
stories","sha":"ddcf076ff400315a66e6076d694b301cf7d84070"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","labelRegex":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/204842","number":204842,"mergeCommit":{"message":"Fixes
for storybook aliases (#204842)\n\n* Remove duplicates\r\n* Import list
of aliases to buildkite script so we don't need it in two\r\nplaces\r\n*
Mention packages as well as plugins in README, and use newer
example\r\nstorybook syntax\r\n* Add mjs support to unbreak slo
stories","sha":"ddcf076ff400315a66e6076d694b301cf7d84070"}}]}]
BACKPORT-->

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

@@ -10,53 +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 = [
-  'apm',
-  'canvas',
-  'cases',
-  'cell_actions',
-  'coloring',
-  'chart_icons',
-  'content_management_examples',
-  'custom_integrations',
-  'dashboard_enhanced',
-  'dashboard',
-  'data',
-  'logs_explorer',
-  'embeddable',
-  'expression_error',
-  'expression_image',
-  'expression_metric',
-  'expression_repeat_image',
-  'expression_reveal_image',
-  'expression_shape',
-  'expression_tagcloud',
-  'management',
-  'fleet',
-  'grouping',
-  'home',
-  'infra',
-  'kibana_react',
-  'lists',
-  'observability',
-  'observability_ai_assistant',
-  'observability_shared',
-  'presentation',
-  'security_solution',
-  'security_solution_packages',
-  'serverless',
-  'shared_ux',
-  'triggers_actions_ui',
-  'ui_actions_enhanced',
-  'language_documentation_popover',
-  'unified_search',
-  'random_sampling',
-  'esql_editor',
-];
-
 const GITHUB_CONTEXT = 'Build and Publish Storybooks';
 
 const STORYBOOK_DIRECTORY =
@@ -82,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: {
@@ -140,7 +148,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

@@ -16,7 +16,7 @@ export const storybookAliases = {
   canvas: 'x-pack/plugins/canvas/storybook',
   cases: 'packages/kbn-cases-components/.storybook',
   cell_actions: 'packages/kbn-cell-actions/.storybook',
-  cloud_security_posture_packages: 'x-pack/packages/kbn-cloud-security-posture/storybook/config',
+  cloud_security_posture_graph: 'x-pack/packages/kbn-cloud-security-posture/graph/storybook/config',
   cloud: 'packages/cloud/.storybook',
   coloring: 'packages/kbn-coloring/.storybook',
   language_documentation_popover: 'packages/kbn-language-documentation/.storybook',
@@ -65,7 +65,6 @@ export const storybookAliases = {
   security_solution_packages: 'x-pack/packages/security-solution/storybook/config',
   serverless: 'packages/serverless/storybook/config',
   shared_ux: 'packages/shared-ux/storybook/config',
-  slo: 'x-pack/plugins/observability_solution/slo/.storybook',
   threat_intelligence: 'x-pack/plugins/threat_intelligence/.storybook',
   triggers_actions_ui: 'x-pack/plugins/triggers_actions_ui/.storybook',
   ui_actions_enhanced: 'src/plugins/ui_actions_enhanced/.storybook',