diff --git a/.buildkite/scripts/steps/storybooks/build_and_upload.js b/.buildkite/scripts/steps/storybooks/build_and_upload.js index 0af75e72de78a..9d40edc905763 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 542acf7b0fa8f..db0791f41b0a7 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 742239e638b8a..1261fe5a06f69 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 0000000000000..27eaef2b2be0e --- /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 811038b58c828..df8913fb32f96 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 742239e638b8a..0000000000000 --- 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 3f6dd8fd280b6..43b51a45e08c4 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 bf8b881a91ecd..e03494e13677d 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