From 21cef490f3ed3b91ae5f41e4cc38070cd0dd0d58 Mon Sep 17 00:00:00 2001 From: Clint Andrew Hall Date: Tue, 15 Feb 2022 09:25:20 -0600 Subject: [PATCH] [kibana_react] Enable Storybook for all of kibana_react (#125589) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- .../steps/storybooks/build_and_upload.js | 3 +-- src/dev/storybook/aliases.ts | 3 +-- .../.storybook/main.js => .storybook/main.ts} | 5 +++-- .../kibana_react/.storybook/manager.ts | 21 +++++++++++++++++++ .../kibana_react/public/code_editor/README.md | 2 +- .../url_template_editor/.storybook/main.js | 10 --------- src/plugins/kibana_react/tsconfig.json | 2 +- test/scripts/jenkins_storybook.sh | 10 ++++----- 8 files changed, 33 insertions(+), 23 deletions(-) rename src/plugins/kibana_react/{public/code_editor/.storybook/main.js => .storybook/main.ts} (77%) create mode 100644 src/plugins/kibana_react/.storybook/manager.ts delete mode 100644 src/plugins/kibana_react/public/url_template_editor/.storybook/main.js diff --git a/.buildkite/scripts/steps/storybooks/build_and_upload.js b/.buildkite/scripts/steps/storybooks/build_and_upload.js index 0af75e72de78a7..9d40edc905763f 100644 --- a/.buildkite/scripts/steps/storybooks/build_and_upload.js +++ b/.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'; diff --git a/src/dev/storybook/aliases.ts b/src/dev/storybook/aliases.ts index 542acf7b0fa8fd..db0791f41b0a72 100644 --- a/src/dev/storybook/aliases.ts +++ b/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', }; diff --git a/src/plugins/kibana_react/public/code_editor/.storybook/main.js b/src/plugins/kibana_react/.storybook/main.ts similarity index 77% rename from src/plugins/kibana_react/public/code_editor/.storybook/main.js rename to src/plugins/kibana_react/.storybook/main.ts index 742239e638b8ac..1261fe5a06f699 100644 --- a/src/plugins/kibana_react/public/code_editor/.storybook/main.js +++ b/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; diff --git a/src/plugins/kibana_react/.storybook/manager.ts b/src/plugins/kibana_react/.storybook/manager.ts new file mode 100644 index 00000000000000..27eaef2b2be0e7 --- /dev/null +++ b/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, +}); diff --git a/src/plugins/kibana_react/public/code_editor/README.md b/src/plugins/kibana_react/public/code_editor/README.md index 811038b58c8287..df8913fb32f967 100644 --- a/src/plugins/kibana_react/public/code_editor/README.md +++ b/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` \ No newline at end of file diff --git a/src/plugins/kibana_react/public/url_template_editor/.storybook/main.js b/src/plugins/kibana_react/public/url_template_editor/.storybook/main.js deleted file mode 100644 index 742239e638b8ac..00000000000000 --- a/src/plugins/kibana_react/public/url_template_editor/.storybook/main.js +++ /dev/null @@ -1,10 +0,0 @@ -/* - * 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. - */ - -// eslint-disable-next-line import/no-commonjs -module.exports = require('@kbn/storybook').defaultConfig; diff --git a/src/plugins/kibana_react/tsconfig.json b/src/plugins/kibana_react/tsconfig.json index 3f6dd8fd280b63..43b51a45e08c40 100644 --- a/src/plugins/kibana_react/tsconfig.json +++ b/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" }] } diff --git a/test/scripts/jenkins_storybook.sh b/test/scripts/jenkins_storybook.sh index bf8b881a91ecdd..e03494e13677d7 100755 --- a/test/scripts/jenkins_storybook.sh +++ b/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