[kibana_react] Enable Storybook for all of kibana_react (#125589)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

.buildkite/scripts/steps/storybooks/build_and_upload.js

@@ -16,7 +16,6 @@ const STORYBOOKS = [
   'canvas',
   'ci_composite',
   'cloud',
-  'codeeditor',
   'custom_integrations',
   'dashboard_enhanced',
   'dashboard',
@@ -31,13 +30,13 @@ const STORYBOOKS = [
   'expression_tagcloud',
   'fleet',
   'infra',
+  'kibana_react',
   'lists',
   'observability',
   'presentation',
   'security_solution',
   'shared_ux',
   'ui_actions_enhanced',
-  'url_template_editor',
 ];
 
 const GITHUB_CONTEXT = 'Build and Publish Storybooks';

src/dev/storybook/aliases.ts

@@ -12,7 +12,6 @@ export const storybookAliases = {
   canvas: 'x-pack/plugins/canvas/storybook',
   ci_composite: '.ci/.storybook',
   cloud: 'x-pack/plugins/cloud/.storybook',
-  codeeditor: 'src/plugins/kibana_react/public/code_editor/.storybook',
   controls: 'src/plugins/controls/storybook',
   custom_integrations: 'src/plugins/custom_integrations/storybook',
   dashboard_enhanced: 'x-pack/plugins/dashboard_enhanced/.storybook',
@@ -31,11 +30,11 @@ export const storybookAliases = {
   expression_tagcloud: 'src/plugins/chart_expressions/expression_tagcloud/.storybook',
   fleet: 'x-pack/plugins/fleet/.storybook',
   infra: 'x-pack/plugins/infra/.storybook',
+  kibana_react: 'src/plugins/kibana_react/.storybook',
   lists: 'x-pack/plugins/lists/.storybook',
   observability: 'x-pack/plugins/observability/.storybook',
   presentation: 'src/plugins/presentation_util/storybook',
   security_solution: 'x-pack/plugins/security_solution/.storybook',
   shared_ux: 'src/plugins/shared_ux/.storybook',
   ui_actions_enhanced: 'x-pack/plugins/ui_actions_enhanced/.storybook',
-  url_template_editor: 'src/plugins/kibana_react/public/url_template_editor/.storybook',
 };

src/plugins/kibana_react/public/code_editor/.storybook/main.js → src/plugins/kibana_react/.storybook/main.ts

@@ -6,5 +6,6 @@
  * Side Public License, v 1.
  */
 
-// eslint-disable-next-line import/no-commonjs
-module.exports = require('@kbn/storybook').defaultConfig;
+import { defaultConfig } from '@kbn/storybook';
+
+module.exports = defaultConfig;

src/plugins/kibana_react/.storybook/manager.ts

@@ -0,0 +1,21 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+import { addons } from '@storybook/addons';
+import { create } from '@storybook/theming';
+import { PANEL_ID } from '@storybook/addon-actions';
+
+addons.setConfig({
+  theme: create({
+    base: 'light',
+    brandTitle: 'Kibana React Storybook',
+    brandUrl: 'https://github.com/elastic/kibana/tree/main/src/plugins/kibana_react',
+  }),
+  showPanel: true.valueOf,
+  selectedPanel: PANEL_ID,
+});

src/plugins/kibana_react/public/code_editor/README.md

@@ -11,6 +11,6 @@ This editor component allows easy access to:
 The Monaco editor doesn't automatically resize the editor area on window or container resize so this component includes a [resize detector](https://github.com/maslianok/react-resize-detector) to cause the Monaco editor to re-layout and adjust its size when the window or container size changes
 
 ## Storybook Examples
-To run the CodeEditor storybook, from the root kibana directory, run `yarn storybook codeeditor`
+To run the `CodeEditor` Storybook, from the root kibana directory, run `yarn storybook kibana_react`
 
 All stories for the component live in `code_editor.examples.tsx`

src/plugins/kibana_react/tsconfig.json

@@ -6,6 +6,6 @@
     "declaration": true,
     "declarationMap": true
   },
-  "include": ["common/**/*", "public/**/*", "../../../typings/**/*"],
+  "include": [".storybook/**/*", "common/**/*", "public/**/*", "../../../typings/**/*"],
   "references": [{ "path": "../kibana_utils/tsconfig.json" }]
 }

test/scripts/jenkins_storybook.sh

@@ -6,10 +6,8 @@ cd "$KIBANA_DIR"
 
 yarn storybook --site apm
 yarn storybook --site canvas
-yarn storybook --site codeeditor
 yarn storybook --site ci_composite
 yarn storybook --site custom_integrations
-yarn storybook --site url_template_editor
 yarn storybook --site dashboard
 yarn storybook --site dashboard_enhanced
 yarn storybook --site data_enhanced
@@ -23,8 +21,10 @@ yarn storybook --site expression_shape
 yarn storybook --site expression_tagcloud
 yarn storybook --site fleet
 yarn storybook --site infra
-yarn storybook --site security_solution
-yarn storybook --site ui_actions_enhanced
+yarn storybook --site kibana_react
+yarn storybook --site lists
 yarn storybook --site observability
 yarn storybook --site presentation
-yarn storybook --site lists
+yarn storybook --site security_solution
+yarn storybook --site shared_ux
+yarn storybook --site ui_actions_enhanced