From 403b5f23636d61809d23851f856ff0e26235b22f Mon Sep 17 00:00:00 2001 From: Brad White Date: Fri, 14 Mar 2025 16:41:03 -0600 Subject: [PATCH] Upgrade to Storybook 8 (#195148) ## Summary Depends on #191106 Closes #171591 This PR migrates Storybook from `6.x` to `8.x`. Please see the [migration guide](https://storybook.js.org/docs/migration-guide/from-older-version) for an overview of the changes because there are many breaking changes which effect Kibana. The TODO list below is not inclusive of all the changes. ## Reviewers ### Each commit contains all files changed for a specific codeowner, please find your respective commit to make review easier. A **first step before code review** should be checking the [`Storybooks Preview`](https://ci-artifacts.kibana.dev/storybooks/pr-195148/index.html) from CI for any runtime or style issues which were missed. The preview can be compared to a build from `main` [here](https://ci-artifacts.kibana.dev/storybooks/pr-212585/index.html). It is worth noting that some stories have runtime issues which existed before this migration. Most stories appear to have been migrated properly, but the Operations team does not have prior knowledge into every story. Some of the migration was able to be automated through Storybook provided scripts. It is possible this wasn't entirely correct due to the structure of some stories. Additionally, part of this migration is moving Storybook to Webpack 5 which changed how styles are being loaded. #### TODO - [x] Migrate `stories.mdx` - [x] storyshots - [x] [Migrate packages](https://storybook.js.org/docs/migration-guide/from-older-version#package-structure-changes) which were removed in `8.0` - [x] `react-doc-gen` resolution - [x] [Migrate blocks](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#addon-docs-removed-deprecated-blocksjs-entry) - [x] Migrate deprecated `addon-knobs` to [addon-controls](https://www.npmjs.com/package/@storybook/addon-controls) - [x] React Fast Refresh support - [x] Watch flag callback - [x] `canvas` webpack - [x] Rerun CSF migrations for new stories - [x] Handle ESM import for `addon-docs` - [x] `'@storybook/addon-actions' should be listed in the project's dependencies. Run 'npm i -S @storybook/addon-actions' to add iteslint[import/no-extraneous-dependencies](https://github.com/import-js/eslint-plugin-import/blob/v2.28.0/docs/rules/no-extraneous-dependencies.md)` - [x] `addDecorator` migration - [x] `addParameter` migration - [x] static build - [ ] determine if #176500 is solved or push to followup PR - This will need to be fixed separately - [x] revert `.buildkite/pipelines/pull_request/base.yml` & `.buildkite/scripts/pipelines/pull_request/pipeline.ts` to `main` --------- Co-authored-by: Tiago Costa Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Jacek Kolezynski Co-authored-by: Stratoula Kalafateli Co-authored-by: Clint Andrew Hall --- .devcontainer/Dockerfile | 2 +- .devcontainer/devcontainer.json | 3 +- .github/CODEOWNERS | 1 + package.json | 46 +- renovate.json | 59 +- src/dev/license_checker/config.ts | 1 + src/dev/storybook/aliases.ts | 27 +- src/dev/storybook/run_storybook_cli.ts | 1 - .../kbn-esql-editor/.storybook/main.js | 1 - .../src/__stories__/esql_editor.mdx | 20 + .../src/__stories__/esql_editor.stories.mdx | 74 - .../src/__stories__/esql_editor.stories.tsx | 81 + ...language_documentation_popover.stories.tsx | 27 +- .../src/analytics_no_data_page.stories.tsx | 18 +- .../analytics_no_data/mocks/src/storybook.ts | 10 +- .../impl/src/kibana_no_data_page.stories.tsx | 48 +- .../kibana_no_data/mocks/src/storybook.ts | 8 +- .../shared-ux/storybook/config/manager.ts | 2 +- .../src/footer/footer.stories.tsx | 36 +- .../src/sample_data_card.stories.tsx | 34 +- .../src/demo_env_panel.stories.tsx | 4 +- .../src/sample_data_tab.stories.tsx | 18 +- .../kbn-ambient-storybook-types/index.d.ts | 3 - .../src/__stories__/tooltip.stories.tsx | 92 +- .../src/__stories__/cell_actions.stories.tsx | 44 +- .../src/__stories__/icons.stories.tsx | 12 +- .../__stories__/color_mapping.stories.tsx | 91 +- .../customizable_palette.stories.tsx | 47 +- .../agent_icon/agent_icon.stories.tsx | 4 +- .../cloud_provider_icon.stories.tsx | 4 +- .../src/__mocks__/es_hits.ts | 2 +- .../src/components/grouping.stories.tsx | 4 +- .../__stories__/application.stories.tsx | 8 +- .../__stories__/categories.stories.tsx | 10 +- .../__stories__/category.stories.tsx | 10 +- .../__stories__/use_category_story.tsx | 2 +- .../__stories__/array_input.stories.tsx | 4 +- .../__stories__/boolean_input.stories.tsx | 6 +- .../__stories__/color_input.stories.tsx | 6 +- .../field_input/__stories__/common.tsx | 6 +- .../__stories__/image_input.stories.tsx | 6 +- .../__stories__/json_input.stories.tsx | 6 +- .../__stories__/markdown_input.stories.tsx | 6 +- .../__stories__/number_input.stories.tsx | 6 +- .../__stories__/select_input.stories.tsx | 6 +- .../__stories__/text_input.stories.tsx | 6 +- .../__stories__/array_field.stories.tsx | 6 +- .../__stories__/boolean_field.stories.tsx | 6 +- .../color_picker_field.stories.tsx | 6 +- .../field_row/__stories__/common.tsx | 4 +- .../__stories__/image_field.stories.tsx | 6 +- .../__stories__/json_field.stories.tsx | 6 +- .../__stories__/markdown_field.stories.tsx | 6 +- .../__stories__/number_field.stories.tsx | 6 +- .../__stories__/select_field.stories.tsx | 6 +- .../__stories__/text_field.stories.tsx | 6 +- .../form/storybook/form.stories.tsx | 6 +- .../storybook/config/manager.ts | 2 +- .../packages/shared/kbn-storybook/index.ts | 9 +- .../packages/shared/kbn-storybook/preset.js | 4 +- .../kbn-storybook/src/lib/decorators.tsx | 4 +- .../kbn-storybook/src/lib/default_config.ts | 198 +- .../src/lib/preview.ts} | 15 +- .../shared/kbn-storybook/src/lib/register.ts | 2 +- .../src/lib/register_theme_switcher_addon.ts | 4 +- .../src/lib/run_storybook_cli.ts | 42 +- .../kbn-storybook/src/lib/theme_switcher.tsx | 11 +- .../kbn-storybook/src/webpack.config.ts | 159 +- .../shared/kbn-storybook/templates/index.ejs | 77 - .../__stories__/field_name.stories.tsx | 30 +- .../components/__stories__/tab.stories.tsx | 9 +- .../components/__stories__/tabs.stories.tsx | 9 +- .../react/kibana_context/root/README.mdx | 4 +- .../kibana_context/styled/styled_provider.tsx | 4 +- .../serverless/storybook/config/manager.ts | 2 +- .../solution/src/solution_avatar.stories.tsx | 74 +- .../exit_full_screen/mocks/storybook.ts | 2 +- .../src/exit_full_screen_button.stories.tsx | 18 +- .../icon_button_group.stories.tsx | 10 +- .../toolbar_button/toolbar_button.stories.tsx | 26 +- .../src/popover/popover.stories.tsx | 76 +- .../src/toolbar/toolbar.stories.tsx | 37 +- .../no_data/impl/src/no_data_card.stories.tsx | 18 +- .../card/no_data/mocks/src/storybook.ts | 10 +- .../chrome/navigation/mocks/storybook.ts | 2 +- .../navigation/src/ui/navigation.stories.tsx | 4 +- .../code_editor/impl/code_editor.stories.tsx | 104 +- .../code_editor/impl/mocks/storybook.ts | 12 +- .../src/ui/error_boundary.fatal.stories.tsx | 6 +- .../ui/error_boundary.recoverable.stories.tsx | 6 +- .../impl/src/file_picker.stories.tsx | 261 +- .../impl/src/file_upload.stories.tsx | 274 +- .../file/image/impl/src/image.stories.tsx | 85 +- .../impl/src/redirect_app_links.stories.tsx | 86 +- .../markdown/impl/markdown_editor.stories.tsx | 24 +- .../markdown/impl/markdown_format.stories.tsx | 44 +- .../shared-ux/markdown/mocks/storybook.ts | 18 +- .../modal/tabbed/src/tabbed_modal.stories.tsx | 82 +- .../shared-ux/modal/tabbed/storybook/setup.ts | 6 +- .../impl/src/page_template.stories.tsx | 66 +- .../mocks/src/storybook/inner.tsx | 10 +- .../mocks/src/storybook/no_data_config.ts | 8 +- .../mocks/src/storybook/solution_nav.ts | 6 +- .../no_data/impl/src/no_data_page.stories.tsx | 18 +- .../page/no_data/mocks/src/storybook.ts | 8 +- .../impl/src/no_data_config_page.stories.tsx | 18 +- .../no_data_config/mocks/src/storybook.ts | 8 +- .../solution_nav/src/solution_nav.stories.tsx | 57 +- .../impl/src/no_data_views.stories.tsx | 18 +- .../no_data_views/mocks/src/storybook.ts | 8 +- .../src/not_found_prompt.stories.tsx | 50 +- .../__stories__/metric_renderer.stories.tsx | 93 +- .../mosaic_vis_renderer.stories.tsx | 4 +- .../__stories__/pie_vis_renderer.stories.tsx | 4 +- .../public/__stories__/shared/arg_types.ts | 22 +- .../treemap_vis_renderer.stories.tsx | 4 +- .../waffle_vis_renderer.stories.tsx | 4 +- .../__stories__/tagcloud_renderer.stories.tsx | 78 +- .../storybook/decorator.tsx | 26 +- .../custom_integrations/storybook/manager.ts | 2 +- .../custom_integrations/storybook/preview.tsx | 4 +- .../search_session_indicator.stories.tsx | 14 +- .../discover/.storybook/{main.js => main.ts} | 6 +- .../common/error_callout.stories.tsx | 20 +- .../shared/es_ui_shared/.storybook/manager.ts | 2 +- .../hook_form_lib/components/form.stories.tsx | 7 +- .../components/use_array.stories.tsx | 7 +- .../components/use_field.stories.tsx | 7 +- .../components/use_multi_field.stories.tsx | 7 +- .../static/forms/hook_form_lib/constants.ts | 2 - .../debug/__stories__/debug.stories.tsx | 17 +- .../__stories__/error_renderer.stories.tsx | 24 +- .../__stories__/image_renderer.stories.tsx | 16 +- .../__stories__/metric_renderer.stories.tsx | 68 +- .../repeat_image_renderer.stories.tsx | 14 +- .../reveal_image_renderer.stories.tsx | 16 +- .../__stories__/progress_renderer.stories.tsx | 45 +- .../__stories__/shape_renderer.stories.tsx | 31 +- .../plugins/shared/home/.storybook/manager.ts | 2 +- .../shared/kibana_react/.storybook/manager.ts | 2 +- .../url_template_editor.stories.tsx | 23 +- .../public/__stories__/wait_for.tsx | 6 +- .../dashboard_picker.stories.tsx | 8 +- .../expression_input.stories.tsx | 20 +- .../labs/project_list_item.stories.tsx | 76 +- .../presentation_util/storybook/decorator.tsx | 4 +- .../presentation_util/storybook/manager.ts | 2 +- .../presentation_util/storybook/preview.tsx | 6 +- .../action_wizard/action_wizard.stories.tsx | 29 +- .../presentable_picker.stories.tsx | 59 +- .../drilldown_form/drilldown_form.stories.tsx | 38 +- .../drilldown_hello_bar.stories.tsx | 10 +- .../drilldown_table.stories.tsx | 91 +- .../flyout_frame/flyout_frame.stories.tsx | 59 +- .../trigger_picker/trigger_picker.stories.tsx | 71 +- .../url_drilldown_collect_config.story.tsx | 7 +- .../public/__stories__/search_bar.stories.tsx | 340 +- .../__stories__/filter_builder.stories.tsx | 66 +- .../kbn-random-sampling/.storybook/main.js | 5 +- .../src/__stories__/control_slider.mdx | 24 + .../__stories__/control_slider.stories.mdx | 62 - .../__stories__/control_slider.stories.tsx | 57 + .../src/__stories__/sampling_icon.mdx | 18 + .../src/__stories__/sampling_icon.stories.mdx | 19 - .../src/__stories__/sampling_icon.stories.tsx | 18 + .../__stories__/add_connector.stories.tsx | 6 +- .../__stories__/call_to_action.stories.tsx | 6 +- .../install_knowledge_base.stories.tsx | 8 +- .../need_license_upgrade.stories.tsx | 8 +- .../__stories__/need_tier_upgrade.stories.tsx | 6 +- .../no_connector_access.stories.tsx | 6 +- .../__stories__/ready_to_help.stories.tsx | 6 +- .../icon/__stories__/avatar.stories.tsx | 12 +- .../icon/__stories__/beacon.stories.tsx | 6 +- .../icon/__stories__/icon.stories.tsx | 6 +- .../shared/ai-assistant/icon/avatar.tsx | 9 +- .../shared/ai-assistant/icon/tsconfig.json | 1 + .../decorator.tsx} | 2 +- .../kbn-ai-assistant/.storybook/manager.ts | 2 +- .../prompt_editor/prompt_editor.stories.tsx | 97 - .../.storybook/jest_setup.js | 4 +- .../exception_stacktrace.stories.tsx | 4946 +++++++++-------- .../exception/exception_stacktrace.test.tsx | 2 +- .../renderers/__stories__/table.stories.tsx | 81 +- .../__stories__/advanced_filter.stories.tsx | 21 +- .../__stories__/dropdown_filter.stories.tsx | 44 +- .../__stories__/time_filter.stories.tsx | 72 +- .../markdown/__stories__/markdown.stories.tsx | 24 +- .../renderers/pie/__stories__/pie.stories.tsx | 23 +- .../plot/__stories__/plot.stories.tsx | 33 +- .../arguments/__stories__/palette.stories.tsx | 51 +- .../__stories__/extended_template.stories.tsx | 40 +- .../__stories__/simple_template.stories.tsx | 31 +- .../__stories__/date_format.stories.tsx | 32 +- .../__stories__/number_format.stories.tsx | 32 +- .../plugins/private/canvas/jest.config.js | 3 - .../__stories__/asset.stories.tsx | 40 +- .../__stories__/asset_manager.stories.tsx | 33 +- .../__stories__/color_dot.stories.tsx | 37 +- .../__stories__/color_manager.stories.tsx | 47 +- .../__stories__/color_palette.stories.tsx | 51 +- .../__stories__/color_picker.stories.tsx | 58 +- .../color_picker_popover.stories.tsx | 47 +- .../custom_element_modal.stories.tsx | 58 +- .../datasource_component.stories.tsx | 28 +- .../__stories__/element_card.stories.tsx | 77 +- .../__stories__/expression_input.stories.tsx | 25 +- .../file_upload/file_upload.stories.tsx | 12 +- .../__stories__/font_picker.stories.tsx | 20 +- .../my_workpads/workpad_table.stories.tsx | 6 +- .../__stories__/item_grid.stories.tsx | 41 +- .../keyboard_shortcuts_doc.stories.tsx | 12 +- .../__stories__/palette_picker.stories.tsx | 29 +- .../__stories__/element_controls.stories.tsx | 36 +- .../__stories__/element_grid.stories.tsx | 79 +- .../saved_elements_modal.stories.tsx | 77 +- .../__stories__/shape_picker.stories.tsx | 13 +- .../shape_picker_popover.stories.tsx | 33 +- .../__stories__/shape_preview.stories.tsx | 17 +- .../__stories__/group_settings.stories.tsx | 10 +- .../multi_element_settings.stories.tsx | 12 +- .../__stories__/sidebar_header.stories.tsx | 23 +- .../tag/__stories__/tag.stories.tsx | 29 +- .../tag_list/__stories__/tag_list.stories.tsx | 35 +- .../__stories__/text_style_picker.stories.tsx | 20 +- .../__stories__/tool_tip_shortcut.stories.tsx | 57 +- .../toolbar/__stories__/toolbar.stories.tsx | 15 +- .../__stories__/delete_var.stories.tsx | 15 +- .../__stories__/edit_var.stories.tsx | 41 +- .../__stories__/var_config.stories.tsx | 27 +- .../__stories__/filter.component.stories.tsx | 29 +- .../filters_group.component.stories.tsx | 23 +- .../workpad_filters.component.stories.tsx | 66 +- .../__stories__/workpad_filters.stories.tsx | 35 +- .../__stories__/edit_menu.stories.tsx | 59 +- .../__stories__/editor_menu.stories.tsx | 21 +- .../__stories__/element_menu.stories.tsx | 13 +- .../__stories__/share_menu.stories.tsx | 29 +- .../flyout/__stories__/flyout.stories.tsx | 30 +- .../__stories__/view_menu.stories.tsx | 41 +- .../__stories__/extended_template.stories.tsx | 49 +- .../__stories__/simple_template.stories.tsx | 31 +- .../__stories__/extended_template.stories.tsx | 116 +- .../__stories__/simple_template.stories.tsx | 58 +- .../components/__stories__/canvas.stories.tsx | 32 +- .../components/__stories__/page.stories.tsx | 32 +- .../__stories__/rendered_element.stories.tsx | 32 +- .../footer/__stories__/footer.stories.tsx | 23 +- .../__stories__/page_controls.stories.tsx | 32 +- .../footer/__stories__/scrubber.stories.tsx | 32 +- .../footer/__stories__/title.stories.tsx | 32 +- .../__stories__/autoplay_settings.stories.tsx | 32 +- .../settings/__stories__/settings.stories.tsx | 23 +- .../__stories__/toolbar_settings.stories.tsx | 32 +- .../addon/components/action_list.tsx | 2 +- .../canvas/storybook/addon/register.tsx | 6 +- .../private/canvas/storybook/addon/state.ts | 2 +- .../canvas/storybook/canvas_webpack.ts | 6 +- .../canvas/storybook/decorators/index.ts | 11 +- .../decorators/services_decorator.tsx | 18 +- .../private/canvas/storybook/preview.ts | 7 +- .../storybook/storyshots.skipped_test.tsx | 43 +- .../shared/fleet/.storybook/context/index.tsx | 6 +- .../shared/fleet/.storybook/decorator.tsx | 6 +- .../shared/fleet/.storybook/manager.ts | 2 +- .../shared/fleet/.storybook/preview.tsx | 5 +- .../shared/fleet/.storybook/smoke.test.tsx | 41 +- .../shared/fleet/common/jest.config.js | 3 - .../flyout.stories.tsx | 15 +- .../instructions.stories.tsx | 12 +- .../fleet_server_callouts/index.stories.tsx | 90 +- ...l_code_editor_with_placeholder.stories.tsx | 10 +- .../index.stories.tsx | 18 +- .../multi_row_input/index.stories.tsx | 76 +- .../outputs_table/index.stories.tsx | 18 +- .../epm/components/package_card.stories.tsx | 34 +- .../package_list_grid/index.stories.tsx | 219 +- .../epm/components/requirements.stories.tsx | 30 +- .../confirm_force_install_modal.stories.tsx | 39 +- .../shared/fleet/public/jest.config.js | 3 - .../shared/fleet/scripts/jest.config.js | 3 - .../data_search_error_callout.stories.tsx | 52 +- .../data_search_progress.stories.tsx | 41 +- .../loading/__examples__/index.stories.tsx | 4 +- .../log_stream.mdx} | 44 +- .../__stories__/log_stream.stories.tsx | 91 + .../log_stream.story_decorators.tsx | 8 +- .../log_stream/log_stream.stories.tsx | 88 - .../test_utils/use_global_storybook_theme.tsx | 6 +- .../data_search/__stories__/data_search.mdx} | 42 +- .../__stories__/data_search.stories.tsx | 18 + .../.storybook/jest_setup.js | 4 +- .../regenerate_response_button.stories.tsx | 6 +- .../buttons/start_chat_button.stories.tsx | 6 +- .../stop_generating_button.stories.tsx | 6 +- .../connector_selector_base.stories.tsx | 12 +- .../insight/insight_base.stories.tsx | 10 +- .../message_panel/esql_code_block.stories.tsx | 6 +- .../message_panel/message_panel.stories.tsx | 14 +- .../streams_app/.storybook/jest_setup.js | 4 +- .../.storybook/context/http.ts | 4 +- .../.storybook/decorator.tsx | 4 +- .../triggers_actions_ui/.storybook/manager.ts | 2 +- .../.storybook/preview.tsx | 8 +- .../alert_lifecycle_status_badge.stories.tsx | 37 +- .../rules_settings_link.stories.tsx | 150 +- .../rule_event_log_list.stories.tsx | 12 +- .../notify_badge_with_api.stories.tsx | 123 +- .../rule_status_dropdown.stories.tsx | 20 +- .../components/rule_tag_badge.stories.tsx | 19 +- .../components/rule_tag_filter.stories.tsx | 20 +- .../components/rules_list.stories.tsx | 12 +- .../plugins/apm/.storybook/jest_setup.js | 4 +- .../error_count_rule_type/index.stories.tsx | 88 +- .../error_count_rule_type/index.test.tsx | 2 +- .../index.stories.tsx | 62 +- .../index.stories.tsx | 58 +- .../error_group_list.stories.tsx | 32 +- .../error_group_list.test.tsx | 2 +- .../shared/distribution/index.stories.tsx | 2 +- .../crash_group_list.stories.tsx | 124 +- .../crash_group_list.test.tsx | 2 +- .../error_group_list.stories.tsx | 124 +- .../error_group_list.test.tsx | 2 +- .../service_inventory.stories.tsx | 4 +- .../service_list/service_list.stories.tsx | 101 +- .../service_list/service_list.test.tsx | 2 +- .../cytoscape_example_data.stories.tsx | 35 +- .../app/service_map/popover/index.tsx | 4 +- .../service_map/popover/popover.stories.tsx | 208 +- .../app/service_map/popover/popover.test.tsx | 2 +- .../service_overview.stories.tsx | 4 +- .../service_overview.test.tsx | 2 +- .../index.stories.tsx | 84 +- .../agent_keys/agent_keys_table.stories.tsx | 14 +- .../agent_keys/create_agent_key.stories.tsx | 18 +- .../prompts/api_keys_not_enabled.stories.tsx | 4 +- .../prompts/permission_denied.stories.tsx | 8 +- .../link_preview.test.tsx | 2 +- .../schema/confirm_switch_modal.stories.tsx | 23 +- .../app/settings/schema/schema.stories.tsx | 4 +- .../span_flyout/span_flyout.stories.tsx | 4 +- .../transaction_flyout.stories.tsx | 4 +- .../waterfall_container.stories.tsx | 6 +- .../waterfall_container.test.tsx | 2 +- .../runtime_attachment.stories.tsx | 6 +- .../edit_apm_policy_form.stories.tsx | 4 +- .../analyze_data_button.stories.tsx | 27 +- .../analyze_data_button.test.tsx | 2 +- .../templates/settings_template.stories.tsx | 17 +- .../templates/settings_template.test.tsx | 2 +- .../shared/charts/latency_chart/index.tsx | 3 + .../latency_chart/latency_chart.stories.tsx | 1220 ++-- .../latency_chart/latency_chart.test.tsx | 2 +- .../apm/service_link/service_link.stories.tsx | 89 +- .../apm/service_link/service_link.test.tsx | 2 +- .../shared/links/dependency_link.stories.tsx | 27 +- .../shared/links/dependency_link.test.tsx | 2 +- .../service_icons/service_icons.stories.tsx | 129 +- .../shared/span_icon/span_icon.stories.tsx | 4 +- .../shared/suggestions_select/index.tsx | 2 + .../suggestions_select.stories.tsx | 46 +- .../suggestions_select.test.tsx | 2 +- .../config_agent/config_agent.stories.tsx | 23 +- .../tutorial_fleet_instructions.stories.tsx | 14 +- .../exploratory_view/.storybook/jest_setup.js | 4 +- .../plugins/infra/.storybook/main.js | 7 +- .../common/components/threshold.stories.tsx | 4 +- .../custom_equation_editor.stories.tsx | 86 +- .../asset_details/__stories__/decorator.tsx | 8 +- .../asset_details/asset_details.stories.tsx | 42 +- .../tabs/metadata/metadata.stories.tsx | 41 +- .../tabs/processes/processes.stories.tsx | 65 +- .../loading/__examples__/index.stories.tsx | 6 +- .../quality_warning_notices.stories.tsx | 25 +- .../initial_configuration_step.stories.tsx | 31 +- .../test_utils/use_global_storybook_theme.tsx | 6 +- .../data_search/__stories__/data_search.mdx} | 41 +- .../__stories__/data_search.stories.tsx | 18 + .../plugins/inventory/.storybook/preview.tsx | 3 +- .../.storybook/storybook_decorator.tsx | 4 +- .../entities_grid/entities_grid.stories.tsx | 38 +- .../investigate_app/.storybook/jest_setup.js | 4 +- .../preview_lens_suggestion/index.stories.tsx | 8 +- .../index.stories.tsx | 16 +- .../components/grid_item/index.stories.tsx | 3 +- .../details/components/grid_item/index.tsx | 2 + .../investigation_details/index.stories.tsx | 8 +- .../container_metrics_table.stories.tsx | 105 +- .../host/host_metrics_table.stories.tsx | 105 +- .../pod/pod_metrics_table.stories.tsx | 105 +- .../test_utils/use_global_storybook_theme.tsx | 6 +- .../observability/.storybook/jest_setup.js | 4 +- .../custom_equation_editor.stories.tsx | 102 +- .../components/custom_threshold.stories.tsx | 4 +- .../components/status_bar.stories.tsx | 4 +- .../pages/cases/components/cases.stories.tsx | 37 +- .../observability_status.stories.tsx | 14 +- .../pages/overview/overview.stories.tsx | 637 ++- .../test_utils/use_global_storybook_theme.tsx | 6 +- .../.storybook/jest_setup.js | 4 +- .../changes/change_list.stories.tsx | 220 +- .../rca/rca_callout/index.stories.tsx | 8 +- .../rca/rca_container/index.stories.tsx | 14 +- .../index.stories.tsx | 6 +- .../index.stories.tsx | 6 +- .../rca_observation_panel/index.stories.tsx | 8 +- .../rca/rca_report/index.stories.tsx | 6 +- .../components/rca/rca_step/index.stories.tsx | 8 +- .../rca/rca_task_step/index.stories.tsx | 10 +- .../.storybook/jest_setup.js | 4 +- .../.storybook/preview.js | 5 +- .../field_value_selection.stories.tsx | 13 +- .../profiling/.storybook/jest_setup.js | 4 +- .../plugins/slo/.storybook/jest_setup.js | 4 +- .../burn_rate_rule_editor.stories.tsx | 10 +- .../slo_selector.stories.tsx | 10 +- .../auto_refresh_button.stories.tsx | 10 +- .../slo_delete_confirmation_modal.stories.tsx | 11 +- .../slo_active_alerts_badge.stories.tsx | 10 +- .../slo_badges/slo_status_badge.stories.tsx | 10 +- .../components/header_control.stories.tsx | 14 +- .../components/header_title.stories.tsx | 15 +- .../components/overview/overview.stories.tsx | 10 +- .../components/slo_details.stories.tsx | 10 +- .../common/query_builder.stories.tsx | 10 +- ...ailability_indicator_type_form.stories.tsx | 10 +- .../apm_common/field_selector.stories.tsx | 10 +- ...pm_latency_indicator_type_form.stories.tsx | 10 +- .../custom_common/index_selection.stories.tsx | 10 +- ...custom_kql_indicator_type_form.stories.tsx | 10 +- .../custom_metric_type_form.stories.tsx | 10 +- .../components/slo_edit_form.stories.tsx | 10 +- ..._edit_form_description_section.stories.tsx | 10 +- ...lo_edit_form_objective_section.stories.tsx | 10 +- ...m_objective_section_timeslices.stories.tsx | 10 +- .../components/badges/slo_badges.stories.tsx | 10 +- .../slo_indicator_type_badge.stories.tsx | 22 +- .../badges/slo_rules_badge.stories.tsx | 23 +- .../badges/slo_time_window_badge.stories.tsx | 46 +- .../slos/components/header_title.stories.tsx | 10 +- .../slos/components/slo_list.stories.tsx | 10 +- .../components/slo_list_empty.stories.tsx | 10 +- .../components/slo_list_error.stories.tsx | 10 +- .../slo_list_search_bar.stories.tsx | 8 +- .../slo_list_view/slo_list_item.stories.tsx | 14 +- .../slos/components/slo_sparkline.stories.tsx | 176 +- .../slos/components/slo_summary.stories.tsx | 16 +- .../slos_welcome/slos_welcome.stories.tsx | 8 +- .../__stories__/map_tooltip.stories.tsx | 17 +- .../expandable-flyout/src/index.stories.tsx | 19 +- .../graph/.storybook/main.ts | 22 +- .../graph/.storybook/manager.ts | 2 +- .../components/controls/actions.stories.tsx | 4 +- .../components/controls/controls.stories.tsx | 4 +- .../components/edge/deafult_edge.stories.tsx | 4 +- .../graph/graph_benchmark.stories.tsx | 4 +- .../graph/graph_popover.stories.tsx | 4 +- .../graph_investigation.stories.test.tsx | 3 +- .../graph_investigation.stories.tsx | 12 +- .../components/graph_layout.stories.test.tsx | 2 +- .../src/components/graph_layout.stories.tsx | 6 +- .../src/components/node/label.stories.tsx | 4 +- .../src/components/node/node.stories.tsx | 4 +- .../node/node_expand_button.stories.tsx | 4 +- .../landing_links_icons.stories.tsx | 32 +- ...landing_links_icons_categories.stories.tsx | 70 +- ..._links_icons_categories_groups.stories.tsx | 40 +- .../landing_links_icons_groups.stories.tsx | 32 +- .../landing_links_image_card.stories.tsx | 60 +- .../landing_links_images.stories.tsx | 32 +- .../landing_links_images_cards.stories.tsx | 32 +- .../src/solution_side_nav.stories.tsx | 128 +- .../packages/storybook/config/manager.ts | 2 +- .../components/and_or_badge/index.stories.tsx | 14 +- .../components/builder/builder.stories.tsx | 197 +- .../builder/entry_renderer.stories.tsx | 60 +- .../__examples__/index.stories.tsx | 28 +- .../conditions_table/index.stories.tsx | 42 +- .../item_details_card/index.stories.tsx | 59 +- .../ml/tables/job_id_filter.stories.tsx | 43 +- .../text_field_value/index.stories.tsx | 47 +- .../threat_match/logic_buttons.stories.tsx | 42 +- .../json_diff/diff_view.stories.tsx | 4 +- .../field_comparison_side.stories.tsx | 390 +- .../asset_criticality_selector.stories.tsx | 21 +- ...sset_criticality_file_uploader.stories.tsx | 24 +- .../risk_summary.stories.tsx | 8 +- .../components/expandable_section.stories.tsx | 6 +- .../host_right/content.stories.tsx | 54 +- .../user_right/content.stories.tsx | 72 +- .../components/expandable_panel.stories.tsx | 16 +- .../components/flyout_error.stories.tsx | 4 +- .../components/flyout_loading.stories.tsx | 4 +- .../components/flyout_navigation.stories.tsx | 12 +- .../components/flyout_title.stories.tsx | 16 +- .../public/components/layout.stories.tsx | 6 +- .../components/add_to_block_list.stories.tsx | 6 +- .../add_to_existing_case.stories.tsx | 6 +- .../components/add_to_new_case.stories.tsx | 6 +- .../components/comment_children.stories.tsx | 6 +- .../components/barchart/barchart.stories.tsx | 8 +- .../barchart/field_selector.stories.tsx | 8 +- .../components/barchart/wrapper.stories.tsx | 182 +- .../common/copy_to_clipboard.stories.tsx | 8 +- .../components/common/tlp_badge.stories.tsx | 62 +- .../flyout/empty_prompt.stories.tsx | 4 +- .../components/flyout/flyout.stories.tsx | 6 +- .../indicator_value_actions.stories.tsx | 6 +- .../components/flyout/json_tab.stories.tsx | 6 +- .../flyout/overview_tab.stories.tsx | 4 +- .../components/flyout/table_tab.stories.tsx | 6 +- .../table/open_flyout_button.stories.tsx | 14 +- .../components/filter_in.stories.tsx | 8 +- .../components/filter_out.stories.tsx | 8 +- .../components/add_to_timeline.stories.tsx | 6 +- .../investigate_in_timeline.stories.tsx | 6 +- yarn.lock | 4764 +++------------- 518 files changed, 12646 insertions(+), 13425 deletions(-) create mode 100644 src/platform/packages/private/kbn-esql-editor/src/__stories__/esql_editor.mdx delete mode 100644 src/platform/packages/private/kbn-esql-editor/src/__stories__/esql_editor.stories.mdx create mode 100644 src/platform/packages/private/kbn-esql-editor/src/__stories__/esql_editor.stories.tsx rename src/platform/packages/shared/{kbn-unified-tabs/src/components/__stories__/storybook_constants.ts => kbn-storybook/src/lib/preview.ts} (58%) delete mode 100644 src/platform/packages/shared/kbn-storybook/templates/index.ejs rename src/platform/plugins/shared/discover/.storybook/{main.js => main.ts} (86%) create mode 100644 x-pack/platform/packages/private/kbn-random-sampling/src/__stories__/control_slider.mdx delete mode 100644 x-pack/platform/packages/private/kbn-random-sampling/src/__stories__/control_slider.stories.mdx create mode 100644 x-pack/platform/packages/private/kbn-random-sampling/src/__stories__/control_slider.stories.tsx create mode 100644 x-pack/platform/packages/private/kbn-random-sampling/src/__stories__/sampling_icon.mdx delete mode 100644 x-pack/platform/packages/private/kbn-random-sampling/src/__stories__/sampling_icon.stories.mdx create mode 100644 x-pack/platform/packages/private/kbn-random-sampling/src/__stories__/sampling_icon.stories.tsx rename x-pack/platform/packages/shared/kbn-ai-assistant/{src/utils/storybook_decorator.stories.tsx => .storybook/decorator.tsx} (96%) delete mode 100644 x-pack/platform/packages/shared/kbn-ai-assistant/src/prompt_editor/prompt_editor.stories.tsx rename x-pack/platform/plugins/shared/logs_shared/public/components/log_stream/{log_stream.stories.mdx => __stories__/log_stream.mdx} (93%) create mode 100644 x-pack/platform/plugins/shared/logs_shared/public/components/log_stream/__stories__/log_stream.stories.tsx rename x-pack/platform/plugins/shared/logs_shared/public/components/log_stream/{ => __stories__}/log_stream.story_decorators.tsx (93%) delete mode 100644 x-pack/platform/plugins/shared/logs_shared/public/components/log_stream/log_stream.stories.tsx rename x-pack/{solutions/observability/plugins/infra/public/utils/data_search/data_search.stories.mdx => platform/plugins/shared/logs_shared/public/utils/data_search/__stories__/data_search.mdx} (82%) create mode 100644 x-pack/platform/plugins/shared/logs_shared/public/utils/data_search/__stories__/data_search.stories.tsx rename x-pack/{platform/plugins/shared/logs_shared/public/utils/data_search/data_search.stories.mdx => solutions/observability/plugins/infra/public/utils/data_search/__stories__/data_search.mdx} (82%) create mode 100644 x-pack/solutions/observability/plugins/infra/public/utils/data_search/__stories__/data_search.stories.tsx diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile index 725570d958f0..3a40689e84a9 100644 --- a/.devcontainer/Dockerfile +++ b/.devcontainer/Dockerfile @@ -73,4 +73,4 @@ RUN echo "source ${KBN_DIR}/.devcontainer/scripts/env.sh" >> ${HOME}/.bashrc && echo "source ${KBN_DIR}/.devcontainer/scripts/env.sh" >> ${HOME}/.zshrc # This is for documentation. Ports are exposed via devcontainer.json -EXPOSE 9200 5601 9229 9230 9231 +EXPOSE 9200 5601 9229 9230 9231 9001 diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 1b8f51120dae..3ecb33121c1f 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -24,7 +24,8 @@ 5601, 9229, 9230, - 9231 + 9231, + 9001 ], "postStartCommand": "${containerWorkspaceFolder}/.devcontainer/scripts/post_start.sh", "remoteUser": "vscode", diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 254d99bd5b16..72d5b858fbad 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -1616,6 +1616,7 @@ packages/kbn-monaco/src/esql @elastic/kibana-esql /.devcontainer/ @elastic/kibana-operations /.eslintrc.js @elastic/kibana-operations /.eslintignore @elastic/kibana-operations +/.ci/.storybook @elastic/kibana-operations # QA - Appex QA /x-pack/test/.gitignore @elastic/appex-qa diff --git a/package.json b/package.json index 9c8f5c595b91..c90ddbf82423 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,7 @@ "serverless-security": "node scripts/kibana --dev --serverless=security", "spec_to_console": "node scripts/spec_to_console", "start": "node scripts/kibana --dev", - "storybook": "node --no-deprecation scripts/storybook", + "storybook": "node scripts/storybook", "test:ftr": "node scripts/functional_tests", "test:ftr:runner": "node scripts/functional_test_runner", "test:ftr:server": "node scripts/functional_tests_server", @@ -77,6 +77,7 @@ "yarn": "^1.22.19" }, "resolutions": { + "**/@babel/parser": "7.24.7", "**/@bazel/typescript/protobufjs": "6.11.4", "**/@hello-pangea/dnd": "16.6.0", "**/@langchain/core": "^0.3.40", @@ -92,6 +93,7 @@ "**/remark-parse/trim": "1.0.1", "**/sharp": "0.32.6", "**/typescript": "5.1.6", + "**/util": "^0.11.1", "@aws-sdk/client-bedrock-agent-runtime": "^3.744.0", "@aws-sdk/client-bedrock-runtime": "^3.744.0", "@aws-sdk/client-kendra": "3.744.0", @@ -1545,28 +1547,26 @@ "@octokit/rest": "^21.1.1", "@parcel/watcher": "^2.1.0", "@playwright/test": "1.49.0", + "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15", "@redocly/cli": "^1.33.0", "@statoscope/webpack-plugin": "^5.28.2", - "@storybook/addon-a11y": "^6.5.16", - "@storybook/addon-actions": "^6.5.16", - "@storybook/addon-docs": "^6.5.16", - "@storybook/addon-essentials": "^6.5.16", - "@storybook/addon-knobs": "^6.4.0", - "@storybook/addon-storyshots": "^6.5.16", - "@storybook/addons": "^6.5.16", - "@storybook/api": "^6.5.16", - "@storybook/builder-webpack5": "^6.5.16", - "@storybook/client-api": "^6.5.16", - "@storybook/components": "^6.5.16", - "@storybook/core": "^6.5.16", - "@storybook/core-common": "^6.5.16", - "@storybook/core-events": "^6.5.16", - "@storybook/manager-webpack5": "^6.5.16", - "@storybook/node-logger": "^6.5.16", - "@storybook/preview-web": "^6.5.16", - "@storybook/react": "^6.5.16", - "@storybook/testing-react": "^1.3.0", - "@storybook/theming": "^6.5.16", + "@storybook/addon-a11y": "^8.6.3", + "@storybook/addon-actions": "^8.6.3", + "@storybook/addon-essentials": "^8.6.3", + "@storybook/addon-styling-webpack": "^1.0.1", + "@storybook/addon-webpack5-compiler-babel": "^3.0.5", + "@storybook/blocks": "^8.6.3", + "@storybook/components": "^8.6.3", + "@storybook/core-events": "^8.6.3", + "@storybook/core-server": "^8.6.3", + "@storybook/icons": "^1.3.2", + "@storybook/manager-api": "^8.6.3", + "@storybook/preview-api": "^8.6.3", + "@storybook/react": "^8.6.3", + "@storybook/react-webpack5": "^8.6.3", + "@storybook/test": "^8.6.3", + "@storybook/theming": "^8.6.3", + "@storybook/types": "^8.6.3", "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "^16.0.1", @@ -1654,6 +1654,7 @@ "@types/picomatch": "^2.3.0", "@types/pixelmatch": "^5.2.4", "@types/pngjs": "^6.0.5", + "@types/prettier": "^2.7.3", "@types/prop-types": "^15.7.5", "@types/rbush": "^3.0.0", "@types/react": "~18.2.0", @@ -1769,6 +1770,7 @@ "fetch-mock": "^10.1.0", "file-loader": "^4.2.0", "find-cypress-specs": "^1.41.4", + "fix-esm": "^1.0.1", "form-data": "^4.0.2", "geckodriver": "^5.0.0", "gulp-brotli": "^3.0.0", @@ -1835,6 +1837,7 @@ "prettier": "^2.8.8", "proxy": "^2.1.1", "react-is": "~18.2.0", + "react-refresh": "^0.16.0", "react-test-renderer": "~18.2.0", "recast": "^0.23.9", "regenerate": "^1.4.0", @@ -1848,6 +1851,7 @@ "sinon": "^7.4.2", "sort-package-json": "^1.53.1", "source-map": "^0.7.4", + "storybook": "^8.6.3", "string-replace-loader": "^3.1.0", "style-loader": "^4.0.0", "stylelint": "^14.16.1", diff --git a/renovate.json b/renovate.json index aa51c6097683..f21e576b0555 100644 --- a/renovate.json +++ b/renovate.json @@ -44,10 +44,25 @@ }, { "groupName": "webpack", - "matchDepNames": ["webpack", "@types/webpack", "webpack-cli", "webpack-dev-server", "webpack-merge"], - "reviewers": ["team:kibana-operations"], - "matchBaseBranches": ["main"], - "labels": ["Team:Operations", "backport:all-open", "release_note:skip", "ci:build-webpack-bundle-analyzer"], + "matchDepNames": [ + "webpack", + "@types/webpack", + "webpack-cli", + "webpack-dev-server", + "webpack-merge" + ], + "reviewers": [ + "team:kibana-operations" + ], + "matchBaseBranches": [ + "main" + ], + "labels": [ + "Team:Operations", + "backport:all-open", + "release_note:skip", + "ci:build-webpack-bundle-analyzer" + ], "minimumReleaseAge": "60 days", "enabled": true }, @@ -1419,7 +1434,8 @@ "matchDepNames": [ "prettier", "eslint-plugin-prettier", - "eslint-config-prettier" + "eslint-config-prettier", + "@types/prettier" ], "reviewers": [ "team:kibana-operations" @@ -3388,28 +3404,7 @@ "enabled": true }, { - "groupName": "@storybook", - "reviewers": [ - "team:kibana-operations" - ], - "matchBaseBranches": [ - "main" - ], - "matchDepPatterns": [ - "^@storybook" - ], - "labels": [ - "Team:Operations", - "release_note:skip", - "ci:build-storybooks", - "backport:skip" - ], - "minimumReleaseAge": "7 days", - "allowedVersions": "<7.0", - "enabled": true - }, - { - "groupName": "@storybook/testing-react", + "groupName": "storybook", "reviewers": [ "team:kibana-operations" ], @@ -3417,16 +3412,20 @@ "main" ], "matchDepNames": [ - "@storybook/testing-react" + "@pmmmwh/react-refresh-webpack-plugin", + "fix-esm", + "react-refresh" + ], + "matchDepPatterns": [ + "storybook" ], "labels": [ "Team:Operations", "release_note:skip", "ci:build-storybooks", - "backport:skip" + "backport:prev-minor" ], "minimumReleaseAge": "7 days", - "allowedVersions": "<2.0", "enabled": true }, { diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts index 137466f66526..aed1f03f624f 100644 --- a/src/dev/license_checker/config.ts +++ b/src/dev/license_checker/config.ts @@ -71,6 +71,7 @@ export const LICENSE_ALLOWED = [ 'Python-2.0', '(Apache-2.0 AND MIT)', 'BlueOak-1.0.0', + 'WTFPL OR CC0-1.0', ]; // The following list only applies to licenses that diff --git a/src/dev/storybook/aliases.ts b/src/dev/storybook/aliases.ts index 8f69942688ca..bc0d44e57bab 100644 --- a/src/dev/storybook/aliases.ts +++ b/src/dev/storybook/aliases.ts @@ -7,23 +7,17 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -// Please also add new aliases to .buildkite/scripts/steps/storybooks/build_and_upload.ts -// -// If you wish for your Storybook to be built and included in CI, also add your -// alias to .buildkite/scripts/steps/storybooks/build_and_upload.ts export const storybookAliases = { ai_assistant: 'x-pack/platform/packages/shared/kbn-ai-assistant/.storybook', apm: 'x-pack/solutions/observability/plugins/apm/.storybook', canvas: 'x-pack/platform/plugins/private/canvas/storybook', cases: 'src/platform/packages/shared/kbn-cases-components/.storybook', cell_actions: 'src/platform/packages/shared/kbn-cell-actions/.storybook', + chart_icons: 'src/platform/packages/shared/kbn-chart-icons/.storybook', cloud_security_posture_graph: 'x-pack/solutions/security/packages/kbn-cloud-security-posture/graph/.storybook', cloud: 'src/platform/packages/shared/cloud/.storybook', coloring: 'src/platform/packages/shared/kbn-coloring/.storybook', - language_documentation_popover: - 'src/platform/packages/private/kbn-language-documentation/.storybook', - chart_icons: 'src/platform/packages/shared/kbn-chart-icons/.storybook', content_management_examples: 'examples/content_management_examples/.storybook', custom_icons: 'src/platform/packages/shared/kbn-custom-icons/.storybook', custom_integrations: 'src/platform/plugins/shared/custom_integrations/storybook', @@ -31,8 +25,10 @@ export const storybookAliases = { dashboard: 'src/platform/plugins/shared/dashboard/.storybook', data: 'src/platform/plugins/shared/data/.storybook', discover: 'src/platform/plugins/shared/discover/.storybook', - esql_ast_inspector: 'examples/esql_ast_inspector/.storybook', es_ui_shared: 'src/platform/plugins/shared/es_ui_shared/.storybook', + esql_ast_inspector: 'examples/esql_ast_inspector/.storybook', + esql_editor: 'src/platform/packages/private/kbn-esql-editor/.storybook', + event_stacktrace: 'x-pack/platform/packages/shared/kbn-event-stacktrace/.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', @@ -53,21 +49,22 @@ export const storybookAliases = { inventory: 'x-pack/solutions/observability/plugins/inventory/.storybook', investigate: 'x-pack/solutions/observability/plugins/investigate_app/.storybook', kibana_react: 'src/platform/plugins/shared/kibana_react/.storybook', + language_documentation_popover: + 'src/platform/packages/private/kbn-language-documentation/.storybook', lists: 'x-pack/solutions/security/plugins/lists/.storybook', management: 'src/platform/packages/shared/kbn-management/storybook/config', - observability: 'x-pack/solutions/observability/plugins/observability/.storybook', - observability_ai_assistant: - 'x-pack/platform/plugins/shared/observability_ai_assistant/.storybook', observability_ai_assistant_app: 'x-pack/solutions/observability/plugins/observability_ai_assistant_app/.storybook', + observability_ai_assistant: + 'x-pack/platform/plugins/shared/observability_ai_assistant/.storybook', observability_inventory: 'x-pack/solutions/observability/plugins/inventory/.storybook', observability_shared: 'x-pack/solutions/observability/plugins/observability_shared/.storybook', observability_slo: 'x-pack/solutions/observability/plugins/slo/.storybook', + observability: 'x-pack/solutions/observability/plugins/observability/.storybook', presentation: 'src/platform/plugins/shared/presentation_util/storybook', + profiling: 'x-pack/solutions/observability/plugins/profiling/.storybook', random_sampling: 'x-pack/platform/packages/private/kbn-random-sampling/.storybook', - esql_editor: 'src/platform/packages/private/kbn-esql-editor/.storybook', - // Skipped, please check and fix https://github.com/elastic/kibana/issues/207227 - // security_solution: 'x-pack/solutions/security/plugins/security_solution/.storybook', + security_solution: 'x-pack/solutions/security/plugins/security_solution/.storybook', // security_solution_packages: 'x-pack/solutions/security/packages/storybook/config', serverless: 'src/platform/packages/shared/serverless/storybook/config', shared_ux: 'src/platform/packages/private/shared-ux/storybook/config', @@ -76,6 +73,4 @@ export const storybookAliases = { ui_actions_enhanced: 'src/platform/plugins/shared/ui_actions_enhanced/.storybook', unified_search: 'src/platform/plugins/shared/unified_search/.storybook', unified_tabs: 'src/platform/packages/shared/kbn-unified-tabs/.storybook', - profiling: 'x-pack/solutions/observability/plugins/profiling/.storybook', - event_stacktrace: 'x-pack/platform/packages/shared/kbn-event-stacktrace/.storybook', }; diff --git a/src/dev/storybook/run_storybook_cli.ts b/src/dev/storybook/run_storybook_cli.ts index dd9855bdbfdd..26369b664619 100644 --- a/src/dev/storybook/run_storybook_cli.ts +++ b/src/dev/storybook/run_storybook_cli.ts @@ -41,7 +41,6 @@ run( log.verbose('Loading Storybook:', configDir); - // TODO: once storybook is upgraded into a newer version, --no-deprecation flag could be removed when invoking it through the package.json script runStorybookCli({ configDir, name: alias }); }, { diff --git a/src/platform/packages/private/kbn-esql-editor/.storybook/main.js b/src/platform/packages/private/kbn-esql-editor/.storybook/main.js index a644563d09f6..da5be4cfea9a 100644 --- a/src/platform/packages/private/kbn-esql-editor/.storybook/main.js +++ b/src/platform/packages/private/kbn-esql-editor/.storybook/main.js @@ -11,7 +11,6 @@ const defaultConfig = require('@kbn/storybook').defaultConfig; module.exports = { ...defaultConfig, - stories: ['../**/*.stories.+(tsx|mdx)'], typescript: { reactDocgen: 'react-docgen-typescript', }, diff --git a/src/platform/packages/private/kbn-esql-editor/src/__stories__/esql_editor.mdx b/src/platform/packages/private/kbn-esql-editor/src/__stories__/esql_editor.mdx new file mode 100644 index 000000000000..eb6240f43462 --- /dev/null +++ b/src/platform/packages/private/kbn-esql-editor/src/__stories__/esql_editor.mdx @@ -0,0 +1,20 @@ +import { Canvas, Meta, Story, Controls } from '@storybook/blocks'; +import * as EsqlEditorStories from './esql_editor.stories'; + + + +# Overview + +The ESQLEditor component is a reusable component and can be used to support text based languages in your application (SQL, ESQL): + + + +When there are errors to the query the UI displays the errors to the editor: + + + +## Component props + +The component exposes the following properties: + +../esql\_editor diff --git a/src/platform/packages/private/kbn-esql-editor/src/__stories__/esql_editor.stories.mdx b/src/platform/packages/private/kbn-esql-editor/src/__stories__/esql_editor.stories.mdx deleted file mode 100644 index 44792be56588..000000000000 --- a/src/platform/packages/private/kbn-esql-editor/src/__stories__/esql_editor.stories.mdx +++ /dev/null @@ -1,74 +0,0 @@ -import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs/blocks'; -import { I18nProvider } from '@kbn/i18n-react'; -import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; -import { ESQLEditor } from '../esql_editor'; - - -export const Template = (args) => - - {} } }, - uiSettings: { get: () => {} }, - }} - > - - -; - - - - -# Overview - -The ESQLEditor component is a reusable component and can be used to support text based languages in your application (SQL, ESQL): - - - - {Template.bind({})} - - - -When there are errors to the query the UI displays the errors to the editor: - - - Unexpected error from Elasticsearch: verification_exception - Found 1 problem line 1:16: Unknown column [field10]' - ), - ] - } - } - argTypes={ - { onTextLangQueryChange: { action: 'changed' }, onTextLangQuerySubmit: { action: 'submitted' }} - } - > - {Template.bind({})} - - - -## Component props - -The component exposes the following properties: - -../esql_editor \ No newline at end of file diff --git a/src/platform/packages/private/kbn-esql-editor/src/__stories__/esql_editor.stories.tsx b/src/platform/packages/private/kbn-esql-editor/src/__stories__/esql_editor.stories.tsx new file mode 100644 index 000000000000..df1b00a72ebf --- /dev/null +++ b/src/platform/packages/private/kbn-esql-editor/src/__stories__/esql_editor.stories.tsx @@ -0,0 +1,81 @@ +/* + * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". + */ + +import React from 'react'; +import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; +import type { StoryObj } from '@storybook/react'; +import { ESQLEditor } from '../esql_editor'; +import type { ESQLEditorProps } from '../types'; + +const Template = (args: ESQLEditorProps) => ( + {} } }, + uiSettings: { get: () => {} }, + data: { query: { timefilter: { timefilter: { getTime: () => {} } } } }, + }} + > + + +); + +export default { + title: 'Text based languages editor', + component: ESQLEditor, +}; + +export const ExpandedMode: StoryObj = { + render: Template, + name: 'expanded mode', + + args: { + query: { + esql: 'from dataview | keep field1, field2', + }, + }, + + argTypes: { + onTextLangQueryChange: { + action: 'changed', + }, + + onTextLangQuerySubmit: { + action: 'submitted', + }, + }, +}; + +export const WithErrors: StoryObj = { + render: Template, + name: 'with errors', + + args: { + query: { + esql: 'from dataview | keep field1, field2', + }, + + dataTestSubj: 'test-id', + + errors: [ + new Error( + '[essql] > Unexpected error from Elasticsearch: verification_exception - Found 1 problem line 1:16: Unknown column [field10]' + ), + ], + }, + + argTypes: { + onTextLangQueryChange: { + action: 'changed', + }, + + onTextLangQuerySubmit: { + action: 'submitted', + }, + }, +}; diff --git a/src/platform/packages/private/kbn-language-documentation/src/__stories__/language_documentation_popover.stories.tsx b/src/platform/packages/private/kbn-language-documentation/src/__stories__/language_documentation_popover.stories.tsx index 06ace5c91620..45cd06db1e38 100644 --- a/src/platform/packages/private/kbn-language-documentation/src/__stories__/language_documentation_popover.stories.tsx +++ b/src/platform/packages/private/kbn-language-documentation/src/__stories__/language_documentation_popover.stories.tsx @@ -8,7 +8,6 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { LanguageDocumentationPopover } from '../components/as_popover'; const sections = { @@ -62,12 +61,20 @@ const sections = { ), }; -storiesOf('Language documentation popover', module).add('default', () => ( - {}} - /> -)); +export default { + title: 'Language documentation popover', +}; + +export const Default = { + render: () => ( + {}} + /> + ), + + name: 'default', +}; diff --git a/src/platform/packages/private/shared-ux/page/analytics_no_data/impl/src/analytics_no_data_page.stories.tsx b/src/platform/packages/private/shared-ux/page/analytics_no_data/impl/src/analytics_no_data_page.stories.tsx index fa251cb03bdb..9b07772bb1f3 100644 --- a/src/platform/packages/private/shared-ux/page/analytics_no_data/impl/src/analytics_no_data_page.stories.tsx +++ b/src/platform/packages/private/shared-ux/page/analytics_no_data/impl/src/analytics_no_data_page.stories.tsx @@ -27,12 +27,14 @@ export default { }, }; -export const Analytics = (params: AnalyticsNoDataPageStorybookParams) => { - return ( - - - - ); -}; +export const Analytics = { + render: (params: AnalyticsNoDataPageStorybookParams) => { + return ( + + + + ); + }, -Analytics.argTypes = mock.getArgumentTypes(); + argTypes: mock.getArgumentTypes(), +}; diff --git a/src/platform/packages/private/shared-ux/page/analytics_no_data/mocks/src/storybook.ts b/src/platform/packages/private/shared-ux/page/analytics_no_data/mocks/src/storybook.ts index f8cca693a072..df56138f3f04 100644 --- a/src/platform/packages/private/shared-ux/page/analytics_no_data/mocks/src/storybook.ts +++ b/src/platform/packages/private/shared-ux/page/analytics_no_data/mocks/src/storybook.ts @@ -38,18 +38,18 @@ export class StorybookMock extends AbstractStorybookMock< propArguments = { // requires hasESData to be toggled to true useCustomOnTryESQL: { - control: 'boolean', + control: { control: 'boolean' }, defaultValue: false, }, }; serviceArguments = { kibanaGuideDocLink: { - control: 'text', + control: { control: 'text' }, defaultValue: 'Kibana guide', }, customBranding: { hasCustomBranding$: { - control: 'boolean', + control: { control: 'boolean' }, defaultValue: false, }, }, @@ -70,10 +70,10 @@ export class StorybookMock extends AbstractStorybookMock< }; } - getProps(params: Params) { + getProps(params?: Params) { return { onDataViewCreated: action('onDataViewCreated'), - onTryESQL: params.useCustomOnTryESQL ? action('onTryESQL-from-props') : undefined, + onTryESQL: params?.useCustomOnTryESQL ? action('onTryESQL-from-props') : undefined, }; } } diff --git a/src/platform/packages/private/shared-ux/page/kibana_no_data/impl/src/kibana_no_data_page.stories.tsx b/src/platform/packages/private/shared-ux/page/kibana_no_data/impl/src/kibana_no_data_page.stories.tsx index eb53407cfc79..9344e3cba728 100644 --- a/src/platform/packages/private/shared-ux/page/kibana_no_data/impl/src/kibana_no_data_page.stories.tsx +++ b/src/platform/packages/private/shared-ux/page/kibana_no_data/impl/src/kibana_no_data_page.stories.tsx @@ -29,30 +29,34 @@ export default { const mock = new KibanaNoDataPageStorybookMock(); -export const Kibana = (params: KibanaNoDataPageStorybookParams) => { - return ( - - - - ); +export const Kibana = { + render: (params: KibanaNoDataPageStorybookParams) => { + return ( + + + + ); + }, + + argTypes: mock.getArgumentTypes(), }; -Kibana.argTypes = mock.getArgumentTypes(); +export const LoadingState = { + render: (params: KibanaNoDataPageStorybookParams) => { + // Simulate loading with a Promise that doesn't resolve. + const dataCheck = () => new Promise((resolve, reject) => {}); -export const LoadingState = (params: KibanaNoDataPageStorybookParams) => { - // Simulate loading with a Promise that doesn't resolve. - const dataCheck = () => new Promise((resolve, reject) => {}); + const services = { + ...mock.getServices(params), + hasESData: dataCheck, + hasUserDataView: dataCheck, + hasDataView: dataCheck, + }; - const services = { - ...mock.getServices(params), - hasESData: dataCheck, - hasUserDataView: dataCheck, - hasDataView: dataCheck, - }; - - return ( - - - - ); + return ( + + + + ); + }, }; diff --git a/src/platform/packages/private/shared-ux/page/kibana_no_data/mocks/src/storybook.ts b/src/platform/packages/private/shared-ux/page/kibana_no_data/mocks/src/storybook.ts index 90ac48d520c4..e9f8a617d7cd 100644 --- a/src/platform/packages/private/shared-ux/page/kibana_no_data/mocks/src/storybook.ts +++ b/src/platform/packages/private/shared-ux/page/kibana_no_data/mocks/src/storybook.ts @@ -44,11 +44,11 @@ export class StorybookMock extends AbstractStorybookMock< > { propArguments = { solution: { - control: 'text', + control: { control: 'text' }, defaultValue: 'Observability', }, logo: { - control: { type: 'radio' }, + control: { control: 'radio' }, options: ['logoElastic', 'logoKibana', 'logoCloud', undefined], defaultValue: undefined, }, @@ -56,11 +56,11 @@ export class StorybookMock extends AbstractStorybookMock< serviceArguments = { hasESData: { - control: 'boolean', + control: { control: 'boolean' }, defaultValue: false, }, hasUserDataView: { - control: 'boolean', + control: { control: 'boolean' }, defaultValue: false, }, }; diff --git a/src/platform/packages/private/shared-ux/storybook/config/manager.ts b/src/platform/packages/private/shared-ux/storybook/config/manager.ts index 8eca9f071929..21ab9299e149 100644 --- a/src/platform/packages/private/shared-ux/storybook/config/manager.ts +++ b/src/platform/packages/private/shared-ux/storybook/config/manager.ts @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { addons } from '@storybook/addons'; +import { addons } from '@storybook/manager-api'; import { create } from '@storybook/theming'; import { PANEL_ID as selectedPanel } from '@storybook/addon-actions'; diff --git a/src/platform/packages/shared/home/sample_data_card/src/footer/footer.stories.tsx b/src/platform/packages/shared/home/sample_data_card/src/footer/footer.stories.tsx index 6db0c78de29d..48aac07d1fb8 100644 --- a/src/platform/packages/shared/home/sample_data_card/src/footer/footer.stories.tsx +++ b/src/platform/packages/shared/home/sample_data_card/src/footer/footer.stories.tsx @@ -8,7 +8,7 @@ */ import React from 'react'; -import { ComponentMeta } from '@storybook/react'; +import { Meta } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import type { SampleDataSet } from '@kbn/home-sample-data-types'; @@ -27,24 +27,26 @@ export default { }, }, decorators: [(Story) =>
{Story()}
], -} as ComponentMeta; +} as Meta; const { description, ...argTypes } = getStoryArgTypes(); -export const CardFooter = (params: Params) => { - const { includeAppLinks, status, ...rest } = params; - const sampleDataSet: SampleDataSet = { - ...mockDataSet, - ...rest, - status, - appLinks: includeAppLinks ? mockDataSet.appLinks : [], - }; +export const CardFooter = { + render: (params: Params) => { + const { includeAppLinks, status, ...rest } = params; + const sampleDataSet: SampleDataSet = { + ...mockDataSet, + ...rest, + status, + appLinks: includeAppLinks ? mockDataSet.appLinks : [], + }; - return ( - - - - ); + return ( + + + + ); + }, + + argTypes, }; - -CardFooter.argTypes = argTypes; diff --git a/src/platform/packages/shared/home/sample_data_card/src/sample_data_card.stories.tsx b/src/platform/packages/shared/home/sample_data_card/src/sample_data_card.stories.tsx index e01d4335af97..91f96ab81be8 100644 --- a/src/platform/packages/shared/home/sample_data_card/src/sample_data_card.stories.tsx +++ b/src/platform/packages/shared/home/sample_data_card/src/sample_data_card.stories.tsx @@ -8,7 +8,7 @@ */ import React from 'react'; -import { ComponentMeta } from '@storybook/react'; +import { Meta } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import type { SampleDataSet } from '@kbn/home-sample-data-types'; @@ -28,23 +28,25 @@ export default { }, }, decorators: [(Story) =>
{Story()}
], -} as ComponentMeta; +} as Meta; const argTypes = getStoryArgTypes(); -export const Card = (params: Params) => { - const { includeAppLinks, ...rest } = params; - const sampleDataSet: SampleDataSet = { - ...mockDataSet, - ...rest, - appLinks: includeAppLinks ? mockDataSet.appLinks : [], - }; +export const Card = { + render: (params: Params) => { + const { includeAppLinks, ...rest } = params; + const sampleDataSet: SampleDataSet = { + ...mockDataSet, + ...rest, + appLinks: includeAppLinks ? mockDataSet.appLinks : [], + }; - return ( - - - - ); + return ( + + + + ); + }, + + argTypes, }; - -Card.argTypes = argTypes; diff --git a/src/platform/packages/shared/home/sample_data_tab/src/demo_env_panel.stories.tsx b/src/platform/packages/shared/home/sample_data_tab/src/demo_env_panel.stories.tsx index 870b94c1f979..5ddbe933d2c4 100644 --- a/src/platform/packages/shared/home/sample_data_tab/src/demo_env_panel.stories.tsx +++ b/src/platform/packages/shared/home/sample_data_tab/src/demo_env_panel.stories.tsx @@ -8,7 +8,7 @@ */ import React from 'react'; -import { ComponentMeta } from '@storybook/react'; +import { Meta } from '@storybook/react'; import { DemoEnvironmentPanel } from './demo_env_panel'; @@ -23,6 +23,6 @@ export default { }, }, decorators: [(Story) =>
{Story()}
], -} as ComponentMeta; +} as Meta; export const DemoPanel = () => ; diff --git a/src/platform/packages/shared/home/sample_data_tab/src/sample_data_tab.stories.tsx b/src/platform/packages/shared/home/sample_data_tab/src/sample_data_tab.stories.tsx index 579b53e0be33..2cd89be437ea 100644 --- a/src/platform/packages/shared/home/sample_data_tab/src/sample_data_tab.stories.tsx +++ b/src/platform/packages/shared/home/sample_data_tab/src/sample_data_tab.stories.tsx @@ -8,7 +8,7 @@ */ import React from 'react'; -import { ComponentMeta } from '@storybook/react'; +import { Meta } from '@storybook/react'; import { SampleDataTab } from './sample_data_tab'; @@ -25,12 +25,14 @@ export default { }, }, decorators: [(Story) =>
{Story()}
], -} as ComponentMeta; +} as Meta; -export const TabContent = (params: Params) => ( - - - -); +export const TabContent = { + render: (params: Params) => ( + + + + ), -TabContent.argTypes = getStoryArgTypes(); + argTypes: getStoryArgTypes(), +}; diff --git a/src/platform/packages/shared/kbn-ambient-storybook-types/index.d.ts b/src/platform/packages/shared/kbn-ambient-storybook-types/index.d.ts index 220376aef29f..694cf188524a 100644 --- a/src/platform/packages/shared/kbn-ambient-storybook-types/index.d.ts +++ b/src/platform/packages/shared/kbn-ambient-storybook-types/index.d.ts @@ -7,9 +7,6 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -// Storybook react doesn't declare this in its typings, but it's there. -declare module '@storybook/react/standalone'; - // Storybook uses this module and its types are defined in the source but not in the type output declare module 'file-system-cache' { interface Options { diff --git a/src/platform/packages/shared/kbn-cases-components/src/__stories__/tooltip.stories.tsx b/src/platform/packages/shared/kbn-cases-components/src/__stories__/tooltip.stories.tsx index 13824fecedb4..0c0753572339 100644 --- a/src/platform/packages/shared/kbn-cases-components/src/__stories__/tooltip.stories.tsx +++ b/src/platform/packages/shared/kbn-cases-components/src/__stories__/tooltip.stories.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { I18nProvider } from '@kbn/i18n-react'; -import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { StoryObj, Meta } from '@storybook/react'; import { CaseStatuses } from '../status/types'; import { Tooltip } from '../tooltip/tooltip'; @@ -59,46 +59,72 @@ const Template = (args: CaseTooltipProps) => ( export default { title: 'CaseTooltip', component: Template, -} as ComponentMeta; +} as Meta; -export const Default: ComponentStory = Template.bind({}); -Default.args = { ...tooltipProps }; - -export const LoadingState: ComponentStory = Template.bind({}); -LoadingState.args = { ...tooltipProps, loading: true }; - -export const LongTitle: ComponentStory = Template.bind({}); -LongTitle.args = { ...tooltipProps, content: { ...tooltipContent, title: longTitle } }; - -export const LongDescription: ComponentStory = Template.bind({}); -LongDescription.args = { - ...tooltipProps, - content: { ...tooltipContent, description: longDescription }, +export const Default: StoryObj = { + render: Template, + args: { ...tooltipProps }, }; -export const InProgressStatus: ComponentStory = Template.bind({}); -InProgressStatus.args = { - ...tooltipProps, - content: { ...tooltipContent, status: CaseStatuses['in-progress'] }, +export const LoadingState: StoryObj = { + render: Template, + args: { ...tooltipProps, loading: true }, }; -export const ClosedStatus: ComponentStory = Template.bind({}); -ClosedStatus.args = { - ...tooltipProps, - content: { ...tooltipContent, status: CaseStatuses.closed }, +export const LongTitle: StoryObj = { + render: Template, + args: { ...tooltipProps, content: { ...tooltipContent, title: longTitle } }, }; -export const NoUserInfo: ComponentStory = Template.bind({}); -NoUserInfo.args = { ...tooltipProps, content: { ...tooltipContent, createdBy: {} } }; +export const LongDescription: StoryObj = { + render: Template, -export const FullName: ComponentStory = Template.bind({}); -FullName.args = { - ...tooltipProps, - content: { ...tooltipContent, createdBy: { fullName: 'Elastic User' } }, + args: { + ...tooltipProps, + content: { ...tooltipContent, description: longDescription }, + }, }; -export const LongUserName: ComponentStory = Template.bind({}); -LongUserName.args = { - ...tooltipProps, - content: { ...tooltipContent, createdBy: { fullName: 'LoremIpsumElasticUser WithALongSurname' } }, +export const InProgressStatus: StoryObj = { + render: Template, + + args: { + ...tooltipProps, + content: { ...tooltipContent, status: CaseStatuses['in-progress'] }, + }, +}; + +export const ClosedStatus: StoryObj = { + render: Template, + + args: { + ...tooltipProps, + content: { ...tooltipContent, status: CaseStatuses.closed }, + }, +}; + +export const NoUserInfo: StoryObj = { + render: Template, + args: { ...tooltipProps, content: { ...tooltipContent, createdBy: {} } }, +}; + +export const FullName: StoryObj = { + render: Template, + + args: { + ...tooltipProps, + content: { ...tooltipContent, createdBy: { fullName: 'Elastic User' } }, + }, +}; + +export const LongUserName: StoryObj = { + render: Template, + + args: { + ...tooltipProps, + content: { + ...tooltipContent, + createdBy: { fullName: 'LoremIpsumElasticUser WithALongSurname' }, + }, + }, }; diff --git a/src/platform/packages/shared/kbn-cell-actions/src/__stories__/cell_actions.stories.tsx b/src/platform/packages/shared/kbn-cell-actions/src/__stories__/cell_actions.stories.tsx index c0f8f172381d..db699b5c8d95 100644 --- a/src/platform/packages/shared/kbn-cell-actions/src/__stories__/cell_actions.stories.tsx +++ b/src/platform/packages/shared/kbn-cell-actions/src/__stories__/cell_actions.stories.tsx @@ -8,7 +8,7 @@ */ import React from 'react'; -import type { ComponentStory } from '@storybook/react'; +import type { StoryFn } from '@storybook/react'; import type { FieldSpec } from '@kbn/data-views-plugin/common'; import { CellActionsProvider } from '../context/cell_actions_context'; import { makeAction } from '../mocks/helpers'; @@ -50,33 +50,35 @@ export default { ], }; -const CellActionsTemplate: ComponentStory> = (args) => ( +const CellActionsTemplate: StoryFn> = (args) => ( {'Field value'} ); -export const DefaultWithControls = CellActionsTemplate.bind({}); +export const DefaultWithControls = { + render: CellActionsTemplate, -DefaultWithControls.argTypes = { - mode: { - options: [CellActionsMode.HOVER_DOWN, CellActionsMode.INLINE], - defaultValue: CellActionsMode.HOVER_DOWN, - control: { - type: 'radio', + argTypes: { + mode: { + options: [CellActionsMode.HOVER_DOWN, CellActionsMode.INLINE], + defaultValue: CellActionsMode.HOVER_DOWN, + control: { + type: 'radio', + }, }, }, -}; -DefaultWithControls.args = { - showActionTooltips: true, - mode: CellActionsMode.INLINE, - triggerId: TRIGGER_ID, - data: [ - { - field: FIELD, - value: '', - }, - ], - visibleCellActions: 3, + args: { + showActionTooltips: true, + mode: CellActionsMode.INLINE, + triggerId: TRIGGER_ID, + data: [ + { + field: FIELD, + value: '', + }, + ], + visibleCellActions: 3, + }, }; export const CellActionInline = () => ( diff --git a/src/platform/packages/shared/kbn-chart-icons/src/__stories__/icons.stories.tsx b/src/platform/packages/shared/kbn-chart-icons/src/__stories__/icons.stories.tsx index eeb4105f9b80..fdea79376c7a 100644 --- a/src/platform/packages/shared/kbn-chart-icons/src/__stories__/icons.stories.tsx +++ b/src/platform/packages/shared/kbn-chart-icons/src/__stories__/icons.stories.tsx @@ -9,7 +9,7 @@ import React, { FC, ComponentType } from 'react'; import { EuiFlexItem, EuiFlexGroup, EuiEmptyPrompt, EuiForm, IconType } from '@elastic/eui'; -import { ComponentStory } from '@storybook/react'; +import type { StoryFn } from '@storybook/react'; import { IconCircle, @@ -224,10 +224,12 @@ function RootComponent(props: RootComponentProps) { ); } -const Template: ComponentStory> = (args) => ; +const Template: StoryFn> = (args) => ; -export const Default = Template.bind({}); +export const Default = { + render: Template, -Default.args = { - icons: IconsArray, + args: { + icons: IconsArray, + }, }; diff --git a/src/platform/packages/shared/kbn-coloring/src/shared_components/color_mapping/__stories__/color_mapping.stories.tsx b/src/platform/packages/shared/kbn-coloring/src/shared_components/color_mapping/__stories__/color_mapping.stories.tsx index 3ebc8064987b..6cd87988a299 100644 --- a/src/platform/packages/shared/kbn-coloring/src/shared_components/color_mapping/__stories__/color_mapping.stories.tsx +++ b/src/platform/packages/shared/kbn-coloring/src/shared_components/color_mapping/__stories__/color_mapping.stories.tsx @@ -10,7 +10,7 @@ import React, { FC, useState } from 'react'; import { getKbnPalettes } from '@kbn/palettes'; import { EuiFlyout, EuiForm, EuiPage, isColorDark } from '@elastic/eui'; -import { ComponentStory } from '@storybook/react'; +import type { StoryFn } from '@storybook/react'; import { css } from '@emotion/react'; import { CategoricalColorMapping, ColorMappingProps } from '../categorical_color_mapping'; import { DEFAULT_COLOR_MAPPING_CONFIG } from '../config/default_color_mapping'; @@ -25,7 +25,7 @@ export default { decorators: [(story: Function) => story()], }; -const Template: ComponentStory> = (args) => { +const Template: StoryFn> = (args) => { const [updatedModel, setUpdateModel] = useState( DEFAULT_COLOR_MAPPING_CONFIG ); @@ -76,50 +76,53 @@ const Template: ComponentStory> = (args) => { ); }; -export const Default = Template.bind({}); -Default.args = { - model: { - ...DEFAULT_COLOR_MAPPING_CONFIG, - paletteId: 'eui_amsterdam', +export const Default = { + render: Template, - colorMode: { - type: 'categorical', - }, - specialAssignments: [ - { - rule: { - type: 'other', - }, - color: { - type: 'loop', - }, - touched: false, + args: { + model: { + ...DEFAULT_COLOR_MAPPING_CONFIG, + paletteId: 'eui_amsterdam', + + colorMode: { + type: 'categorical', }, - ], - assignments: [], - }, - isDarkMode: false, - data: { - type: 'categories', - categories: [ - 'US', - 'Mexico', - 'Brasil', - 'Canada', - 'Italy', - 'Germany', - 'France', - 'Spain', - 'UK', - 'Portugal', - 'Greece', - 'Sweden', - 'Finland', - ], - }, + specialAssignments: [ + { + rule: { + type: 'other', + }, + color: { + type: 'loop', + }, + touched: false, + }, + ], + assignments: [], + }, + isDarkMode: false, + data: { + type: 'categories', + categories: [ + 'US', + 'Mexico', + 'Brasil', + 'Canada', + 'Italy', + 'Germany', + 'France', + 'Spain', + 'UK', + 'Portugal', + 'Greece', + 'Sweden', + 'Finland', + ], + }, - specialTokens: new Map(), - // eslint-disable-next-line no-console - onModelUpdate: (model) => console.log(model), + specialTokens: new Map(), + // eslint-disable-next-line no-console + onModelUpdate: (model: any) => console.log(model), + }, }; diff --git a/src/platform/packages/shared/kbn-coloring/src/shared_components/coloring/__stories__/customizable_palette.stories.tsx b/src/platform/packages/shared/kbn-coloring/src/shared_components/coloring/__stories__/customizable_palette.stories.tsx index 3707cfbfa590..0ed7885121f0 100644 --- a/src/platform/packages/shared/kbn-coloring/src/shared_components/coloring/__stories__/customizable_palette.stories.tsx +++ b/src/platform/packages/shared/kbn-coloring/src/shared_components/coloring/__stories__/customizable_palette.stories.tsx @@ -7,10 +7,9 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import React, { FC, PropsWithChildren } from 'react'; +import React from 'react'; import { EuiForm } from '@elastic/eui'; -import { ComponentStory } from '@storybook/react'; -import { CustomizablePalette, CustomizablePaletteProps } from '../palette_configuration'; +import { CustomizablePalette } from '../palette_configuration'; import { getPaletteRegistry } from './palettes'; export default { @@ -19,29 +18,25 @@ export default { decorators: [(story: Function) => {story()}], }; -const Template: ComponentStory>> = (args) => ( - -); - -export const Default = Template.bind({}); - -Default.args = { - palettes: getPaletteRegistry(), - activePalette: { - type: 'palette', - name: 'default', - params: { - steps: 1, - maxSteps: 10, - continuity: 'none', +export const Default = { + args: { + palettes: getPaletteRegistry(), + activePalette: { + type: 'palette', + name: 'default', + params: { + steps: 1, + maxSteps: 10, + continuity: 'none', + }, }, + dataBounds: { + min: 0, + max: 100, + }, + showExtraActions: true, + showRangeTypeSelector: true, + disableSwitchingContinuity: false, + setPalette: () => {}, }, - dataBounds: { - min: 0, - max: 100, - }, - showExtraActions: true, - showRangeTypeSelector: true, - disableSwitchingContinuity: false, - setPalette: () => {}, }; diff --git a/src/platform/packages/shared/kbn-custom-icons/src/components/agent_icon/agent_icon.stories.tsx b/src/platform/packages/shared/kbn-custom-icons/src/components/agent_icon/agent_icon.stories.tsx index 90a91b32ff18..8d0a7c847a65 100644 --- a/src/platform/packages/shared/kbn-custom-icons/src/components/agent_icon/agent_icon.stories.tsx +++ b/src/platform/packages/shared/kbn-custom-icons/src/components/agent_icon/agent_icon.stories.tsx @@ -8,7 +8,7 @@ */ import { EuiCard, EuiFlexGroup, EuiFlexItem, EuiImage, EuiToolTip } from '@elastic/eui'; -import type { Story } from '@storybook/react'; +import type { StoryFn } from '@storybook/react'; import React from 'react'; import { AGENT_NAMES } from '@kbn/elastic-agent-utils'; import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common'; @@ -20,7 +20,7 @@ export default { component: AgentIcon, }; -export const List: Story = () => { +export const List: StoryFn = () => { return ( diff --git a/src/platform/packages/shared/kbn-custom-icons/src/components/cloud_provider_icon/cloud_provider_icon.stories.tsx b/src/platform/packages/shared/kbn-custom-icons/src/components/cloud_provider_icon/cloud_provider_icon.stories.tsx index 912a4b3d596d..1882f19146cf 100644 --- a/src/platform/packages/shared/kbn-custom-icons/src/components/cloud_provider_icon/cloud_provider_icon.stories.tsx +++ b/src/platform/packages/shared/kbn-custom-icons/src/components/cloud_provider_icon/cloud_provider_icon.stories.tsx @@ -8,7 +8,7 @@ */ import { EuiCard, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui'; -import type { Story } from '@storybook/react'; +import type { StoryFn } from '@storybook/react'; import React from 'react'; import { CloudProviderIcon } from '.'; import { CloudProvider } from './get_cloud_provider_icon'; @@ -20,7 +20,7 @@ export default { const providers: CloudProvider[] = ['gcp', 'aws', 'azure', 'unknownProvider']; -export const List: Story = () => { +export const List: StoryFn = () => { return ( {providers.map((cloudProvider) => { diff --git a/src/platform/packages/shared/kbn-discover-utils/src/__mocks__/es_hits.ts b/src/platform/packages/shared/kbn-discover-utils/src/__mocks__/es_hits.ts index d725f8be2d01..29c2bc481834 100644 --- a/src/platform/packages/shared/kbn-discover-utils/src/__mocks__/es_hits.ts +++ b/src/platform/packages/shared/kbn-discover-utils/src/__mocks__/es_hits.ts @@ -61,7 +61,7 @@ export const esHitsMockWithSort = esHitsMock.map((hit) => ({ })); const baseDate = new Date('2024-01-1').getTime(); -const dateInc = 100_000_000; +const dateInc = 100000000; const generateFieldValue = (field: DataViewField, index: number) => { switch (field.type) { diff --git a/src/platform/packages/shared/kbn-grouping/src/components/grouping.stories.tsx b/src/platform/packages/shared/kbn-grouping/src/components/grouping.stories.tsx index 5a4099a3c1b9..2bb40f4f4bea 100644 --- a/src/platform/packages/shared/kbn-grouping/src/components/grouping.stories.tsx +++ b/src/platform/packages/shared/kbn-grouping/src/components/grouping.stories.tsx @@ -8,7 +8,7 @@ */ import React from 'react'; -import type { Story } from '@storybook/react'; +import type { StoryFn } from '@storybook/react'; import { mockGroupingProps } from './grouping.mock'; import { Grouping } from './grouping'; import readme from '../../README.mdx'; @@ -24,6 +24,6 @@ export default { }, }; -export const Empty: Story = () => { +export const Empty: StoryFn = () => { return ; }; diff --git a/src/platform/packages/shared/kbn-management/settings/application/__stories__/application.stories.tsx b/src/platform/packages/shared/kbn-management/settings/application/__stories__/application.stories.tsx index ea8419537275..f6ed5123d1ff 100644 --- a/src/platform/packages/shared/kbn-management/settings/application/__stories__/application.stories.tsx +++ b/src/platform/packages/shared/kbn-management/settings/application/__stories__/application.stories.tsx @@ -8,7 +8,7 @@ */ import React from 'react'; -import type { ComponentMeta, Story } from '@storybook/react'; +import type { StoryFn, Meta } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { Subscription } from 'rxjs'; @@ -29,7 +29,7 @@ export default { default: 'ghost', }, }, -} as ComponentMeta; +} as Meta; /** * Props for a {@link SettinggApplication} Storybook story. @@ -69,12 +69,12 @@ const getSettingsApplicationStory = ({ hasGlobalSettings }: StoryProps) => ( ); -export const SettingsApplicationWithGlobalSettings: Story = () => +export const SettingsApplicationWithGlobalSettings: StoryFn = () => getSettingsApplicationStory({ hasGlobalSettings: true, }); -export const SettingsApplicationWithoutGlobal: Story = () => +export const SettingsApplicationWithoutGlobal: StoryFn = () => getSettingsApplicationStory({ hasGlobalSettings: false, }); diff --git a/src/platform/packages/shared/kbn-management/settings/components/field_category/__stories__/categories.stories.tsx b/src/platform/packages/shared/kbn-management/settings/components/field_category/__stories__/categories.stories.tsx index e33489e0eee4..fc00b7c4ba89 100644 --- a/src/platform/packages/shared/kbn-management/settings/components/field_category/__stories__/categories.stories.tsx +++ b/src/platform/packages/shared/kbn-management/settings/components/field_category/__stories__/categories.stories.tsx @@ -8,7 +8,7 @@ */ import React from 'react'; -import type { ComponentMeta, Story } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { FieldCategories as Component } from '../categories'; import { Params, useCategoryStory } from './use_category_story'; @@ -38,9 +38,9 @@ export default { default: 'ghost', }, }, -} as ComponentMeta; +} as Meta; -export const Categories: Story = (params) => { +const CategoriesComponent = (params: Params) => { const { onClearQuery, isSavingEnabled, @@ -75,3 +75,7 @@ export const Categories: Story = (params) => { ); }; + +export const Categories: StoryObj = { + render: (params) => , +}; diff --git a/src/platform/packages/shared/kbn-management/settings/components/field_category/__stories__/category.stories.tsx b/src/platform/packages/shared/kbn-management/settings/components/field_category/__stories__/category.stories.tsx index 21cc912cbb2f..edd70d886e97 100644 --- a/src/platform/packages/shared/kbn-management/settings/components/field_category/__stories__/category.stories.tsx +++ b/src/platform/packages/shared/kbn-management/settings/components/field_category/__stories__/category.stories.tsx @@ -8,7 +8,7 @@ */ import React from 'react'; -import type { ComponentMeta } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { getSettingsMock } from '@kbn/management-settings-utilities/mocks/settings.mock'; @@ -51,11 +51,11 @@ export default { }, }, }, -} as ComponentMeta; +} as Meta; type FieldCategoryParams = Pick & Params; -export const Category = ({ isFiltered, category, isSavingEnabled }: FieldCategoryParams) => { +const CategoryComponent = ({ isFiltered, category, isSavingEnabled }: FieldCategoryParams) => { const { onClearQuery, onFieldChange, unsavedChanges } = useCategoryStory({ isFiltered, isSavingEnabled, @@ -89,3 +89,7 @@ export const Category = ({ isFiltered, category, isSavingEnabled }: FieldCategor ); }; + +export const Category: StoryObj = { + render: (params) => , +}; diff --git a/src/platform/packages/shared/kbn-management/settings/components/field_category/__stories__/use_category_story.tsx b/src/platform/packages/shared/kbn-management/settings/components/field_category/__stories__/use_category_story.tsx index a2bb33f6c15f..2889d350afdb 100644 --- a/src/platform/packages/shared/kbn-management/settings/components/field_category/__stories__/use_category_story.tsx +++ b/src/platform/packages/shared/kbn-management/settings/components/field_category/__stories__/use_category_story.tsx @@ -8,7 +8,7 @@ */ import React from 'react'; -import { useArgs } from '@storybook/client-api'; +import { useArgs } from '@storybook/preview-api'; import { action } from '@storybook/addon-actions'; import { getSettingsMock } from '@kbn/management-settings-utilities/mocks/settings.mock'; diff --git a/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/array_input.stories.tsx b/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/array_input.stories.tsx index 468e4dc9593c..ae229d0b7c40 100644 --- a/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/array_input.stories.tsx +++ b/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/array_input.stories.tsx @@ -9,5 +9,7 @@ import { getInputStory, getStory } from './common'; -export default getStory('Array Input', 'An input with an array value.'); +const Story = getStory('Array Input', 'An input with an array value.'); export const ArrayInput = getInputStory('array' as const); + +export default { ...Story }; diff --git a/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/boolean_input.stories.tsx b/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/boolean_input.stories.tsx index d24eb55be84e..df2679c8cc22 100644 --- a/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/boolean_input.stories.tsx +++ b/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/boolean_input.stories.tsx @@ -9,5 +9,9 @@ import { getInputStory, getStory } from './common'; -export default getStory('Boolean Input', 'An input with a boolean value.'); +const Story = getStory('Boolean Input', 'An input with a boolean value.'); export const BooleanInput = getInputStory('boolean' as const); + +export default { + ...Story, +}; diff --git a/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/color_input.stories.tsx b/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/color_input.stories.tsx index b35ad2eba3f9..0e6aa7c07271 100644 --- a/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/color_input.stories.tsx +++ b/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/color_input.stories.tsx @@ -9,5 +9,9 @@ import { getInputStory, getStory } from './common'; -export default getStory('Color Input', 'An input with a color value.'); +const Story = getStory('Color Input', 'An input with a color value.'); export const ColorInput = getInputStory('color' as const); + +export default { + ...Story, +}; diff --git a/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/common.tsx b/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/common.tsx index 67042c83e8f3..4f2d14750af7 100644 --- a/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/common.tsx +++ b/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/common.tsx @@ -8,7 +8,7 @@ */ import React, { useState } from 'react'; -import type { ComponentMeta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { EuiPanel } from '@elastic/eui'; @@ -23,7 +23,7 @@ import { import { getFieldDefinition } from '@kbn/management-settings-field-definition'; import { getDefaultValue, getUserValue } from '@kbn/management-settings-utilities/storybook'; import { FieldInputProvider } from '../services'; -import { FieldInput as Component, FieldInput } from '../field_input'; +import { FieldInput } from '../field_input'; import { InputProps } from '../types'; /** @@ -92,7 +92,7 @@ export const getStory = (title: string, description: string) => ), ], - } as ComponentMeta); + } as Meta); /** * Utility function for returning a {@link FieldInput} Storybook story. diff --git a/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/image_input.stories.tsx b/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/image_input.stories.tsx index 9686c54d8d3c..d261d726053f 100644 --- a/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/image_input.stories.tsx +++ b/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/image_input.stories.tsx @@ -9,5 +9,9 @@ import { getInputStory, getStory } from './common'; -export default getStory('Image Input', 'An input with an image value.'); +const Story = getStory('Image Input', 'An input with an image value.'); export const ImageInput = getInputStory('image' as const); + +export default { + ...Story, +}; diff --git a/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/json_input.stories.tsx b/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/json_input.stories.tsx index dd588bf9418f..72914ccdd8d1 100644 --- a/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/json_input.stories.tsx +++ b/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/json_input.stories.tsx @@ -9,5 +9,9 @@ import { getInputStory, getStory } from './common'; -export default getStory('JSON Input', 'An input with a JSON value.'); +const Story = getStory('JSON Input', 'An input with a JSON value.'); export const JSONInput = getInputStory('json' as const); + +export default { + ...Story, +}; diff --git a/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/markdown_input.stories.tsx b/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/markdown_input.stories.tsx index 0426c4224e71..a8590e756251 100644 --- a/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/markdown_input.stories.tsx +++ b/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/markdown_input.stories.tsx @@ -9,5 +9,9 @@ import { getInputStory, getStory } from './common'; -export default getStory('Markdown Input', 'An input with a markdown value.'); +const Story = getStory('Markdown Input', 'An input with a markdown value.'); export const MarkdownInput = getInputStory('markdown' as const); + +export default { + ...Story, +}; diff --git a/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/number_input.stories.tsx b/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/number_input.stories.tsx index 5d3f78258260..878b2c4fadea 100644 --- a/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/number_input.stories.tsx +++ b/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/number_input.stories.tsx @@ -9,5 +9,9 @@ import { getInputStory, getStory } from './common'; -export default getStory('Number Input', 'An input with a number value.'); +const Story = getStory('Number Input', 'An input with a number value.'); export const NumberInput = getInputStory('number' as const); + +export default { + ...Story, +}; diff --git a/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/select_input.stories.tsx b/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/select_input.stories.tsx index 9f6c7268ac69..14d03eaa6e8f 100644 --- a/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/select_input.stories.tsx +++ b/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/select_input.stories.tsx @@ -31,7 +31,7 @@ const settingFields = { options: ['option1', 'option2', 'option3'], }; -export default getStory('Select Input', 'An input with multiple values.'); +const Story = getStory('Select Input', 'An input with multiple values.'); export const SelectInput = getInputStory('select' as const, { argTypes, settingFields }); SelectInput.args = { @@ -39,3 +39,7 @@ SelectInput.args = { value: 'option1', userValue: 'option2', }; + +export default { + ...Story, +}; diff --git a/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/text_input.stories.tsx b/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/text_input.stories.tsx index 1fccce2001db..bc4c03de9d58 100644 --- a/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/text_input.stories.tsx +++ b/src/platform/packages/shared/kbn-management/settings/components/field_input/__stories__/text_input.stories.tsx @@ -9,5 +9,9 @@ import { getInputStory, getStory } from './common'; -export default getStory('String Input', 'An input with a string value.'); +const Story = getStory('String Input', 'An input with a string value.'); export const StringInput = getInputStory('string' as const); + +export default { + ...Story, +}; diff --git a/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/array_field.stories.tsx b/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/array_field.stories.tsx index cd64aaab11db..122967a877aa 100644 --- a/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/array_field.stories.tsx +++ b/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/array_field.stories.tsx @@ -9,5 +9,9 @@ import { getFieldRowStory, getStory } from './common'; -export default getStory('Array Row', 'A setting with an array of values.'); +const Story = getStory('Array Row', 'A setting with an array of values.'); export const ArrayRow = getFieldRowStory('array' as const); + +export default { + ...Story, +}; diff --git a/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/boolean_field.stories.tsx b/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/boolean_field.stories.tsx index 8e7b467074e1..bb7f66f09e81 100644 --- a/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/boolean_field.stories.tsx +++ b/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/boolean_field.stories.tsx @@ -9,5 +9,9 @@ import { getStory, getFieldRowStory } from './common'; -export default getStory('Boolean Row', 'A setting with a boolean value.'); +const Story = getStory('Boolean Row', 'A setting with a boolean value.'); export const BooleanRow = getFieldRowStory('boolean' as const); + +export default { + ...Story, +}; diff --git a/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/color_picker_field.stories.tsx b/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/color_picker_field.stories.tsx index bee8114a344b..37348c239d80 100644 --- a/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/color_picker_field.stories.tsx +++ b/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/color_picker_field.stories.tsx @@ -9,5 +9,9 @@ import { getFieldRowStory, getStory } from './common'; -export default getStory('Color Row', 'A setting with an base64 image value.'); +const Story = getStory('Color Row', 'A setting with an base64 image value.'); export const ColorRow = getFieldRowStory('color' as const); + +export default { + ...Story, +}; diff --git a/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/common.tsx b/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/common.tsx index e89dd0ab59ba..3753b7852b80 100644 --- a/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/common.tsx +++ b/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/common.tsx @@ -8,7 +8,7 @@ */ import React, { useState } from 'react'; -import type { ComponentMeta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { EuiPanel } from '@elastic/eui'; import { SettingType, UnsavedFieldChange } from '@kbn/management-settings-types'; @@ -93,7 +93,7 @@ export const getStory = ( ), ], - } as ComponentMeta); + } as Meta); /** * Default argument values for a {@link FieldInput} Storybook story. diff --git a/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/image_field.stories.tsx b/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/image_field.stories.tsx index 8bd10a39a26a..823659cb6bda 100644 --- a/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/image_field.stories.tsx +++ b/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/image_field.stories.tsx @@ -9,5 +9,9 @@ import { getFieldRowStory, getStory } from './common'; -export default getStory('Image Row', 'A setting with an base64 image value.'); +const Story = getStory('Image Row', 'A setting with an base64 image value.'); export const ImageRow = getFieldRowStory('image' as const); + +export default { + ...Story, +}; diff --git a/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/json_field.stories.tsx b/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/json_field.stories.tsx index 3f2b22cd1228..32654498afd1 100644 --- a/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/json_field.stories.tsx +++ b/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/json_field.stories.tsx @@ -9,5 +9,9 @@ import { getFieldRowStory, getStory } from './common'; -export default getStory('JSON Row', 'A setting with a JSON value.'); +const Story = getStory('JSON Row', 'A setting with a JSON value.'); export const JSONRow = getFieldRowStory('json' as const); + +export default { + ...Story, +}; diff --git a/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/markdown_field.stories.tsx b/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/markdown_field.stories.tsx index 14caec9b761b..bee93ad3a2a3 100644 --- a/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/markdown_field.stories.tsx +++ b/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/markdown_field.stories.tsx @@ -9,5 +9,9 @@ import { getFieldRowStory, getStory } from './common'; -export default getStory('Markdown Row', 'A setting with a Markdown value.'); +const Story = getStory('Markdown Row', 'A setting with a Markdown value.'); export const MarkdownRow = getFieldRowStory('markdown' as const); + +export default { + ...Story, +}; diff --git a/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/number_field.stories.tsx b/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/number_field.stories.tsx index 16c89595f6b5..139d5de4a761 100644 --- a/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/number_field.stories.tsx +++ b/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/number_field.stories.tsx @@ -9,5 +9,9 @@ import { getFieldRowStory, getStory } from './common'; -export default getStory('Number Row', 'A setting with a numeric value.'); +const Story = getStory('Number Row', 'A setting with a numeric value.'); export const NumberRow = getFieldRowStory('number' as const); + +export default { + ...Story, +}; diff --git a/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/select_field.stories.tsx b/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/select_field.stories.tsx index bc3e23c4eaf7..9fd0cd9870d9 100644 --- a/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/select_field.stories.tsx +++ b/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/select_field.stories.tsx @@ -24,5 +24,9 @@ const settingFields = { options: ['option1', 'option2', 'option3'], }; -export default getStory('Select Row', 'A setting with a boolean value.', argTypes); +const Story = getStory('Select Row', 'A setting with a boolean value.', argTypes); export const SelectRow = getFieldRowStory('select' as const, settingFields); + +export default { + ...Story, +}; diff --git a/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/text_field.stories.tsx b/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/text_field.stories.tsx index 5e975344e0fe..d3fd43ad50fe 100644 --- a/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/text_field.stories.tsx +++ b/src/platform/packages/shared/kbn-management/settings/components/field_row/__stories__/text_field.stories.tsx @@ -9,5 +9,9 @@ import { getFieldRowStory, getStory } from './common'; -export default getStory('String Row', 'A setting with a string value.'); +const Story = getStory('String Row', 'A setting with a string value.'); export const StringRow = getFieldRowStory('string' as const); + +export default { + ...Story, +}; diff --git a/src/platform/packages/shared/kbn-management/settings/components/form/storybook/form.stories.tsx b/src/platform/packages/shared/kbn-management/settings/components/form/storybook/form.stories.tsx index 072d8e5ba834..088db4c761f2 100644 --- a/src/platform/packages/shared/kbn-management/settings/components/form/storybook/form.stories.tsx +++ b/src/platform/packages/shared/kbn-management/settings/components/form/storybook/form.stories.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { action } from '@storybook/addon-actions'; -import { ComponentMeta } from '@storybook/react'; +import { Meta } from '@storybook/react'; import { FieldDefinition } from '@kbn/management-settings-types'; import { getFieldDefinitions } from '@kbn/management-settings-field-definition'; import { getSettingsMock } from '@kbn/management-settings-utilities/mocks/settings.mock'; @@ -20,7 +20,7 @@ import { Form as Component } from '../form'; import { FormProvider } from '../services'; export default { - title: `Settings/Form/Form`, + title: 'Settings/Form/Form', description: 'A form with field rows', argTypes: { isSavingEnabled: { @@ -57,7 +57,7 @@ export default { default: 'ghost', }, }, -} as ComponentMeta; +} as Meta; interface FormStoryProps { /** True if saving settings is enabled, false otherwise. */ diff --git a/src/platform/packages/shared/kbn-management/storybook/config/manager.ts b/src/platform/packages/shared/kbn-management/storybook/config/manager.ts index 8eca9f071929..21ab9299e149 100644 --- a/src/platform/packages/shared/kbn-management/storybook/config/manager.ts +++ b/src/platform/packages/shared/kbn-management/storybook/config/manager.ts @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { addons } from '@storybook/addons'; +import { addons } from '@storybook/manager-api'; import { create } from '@storybook/theming'; import { PANEL_ID as selectedPanel } from '@storybook/addon-actions'; diff --git a/src/platform/packages/shared/kbn-storybook/index.ts b/src/platform/packages/shared/kbn-storybook/index.ts index d666de2309df..65e54bd03b54 100644 --- a/src/platform/packages/shared/kbn-storybook/index.ts +++ b/src/platform/packages/shared/kbn-storybook/index.ts @@ -7,13 +7,8 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { - defaultConfig, - defaultConfigWebFinal, - mergeWebpackFinal, - StorybookConfig, -} from './src/lib/default_config'; -export { defaultConfig, defaultConfigWebFinal, mergeWebpackFinal }; +import { defaultConfig, StorybookConfig } from './src/lib/default_config'; +export { defaultConfig }; export type { StorybookConfig }; export { runStorybookCli } from './src/lib/run_storybook_cli'; export { default as WebpackConfig } from './src/webpack.config'; diff --git a/src/platform/packages/shared/kbn-storybook/preset.js b/src/platform/packages/shared/kbn-storybook/preset.js index de1735bd29b5..93ccd978c323 100644 --- a/src/platform/packages/shared/kbn-storybook/preset.js +++ b/src/platform/packages/shared/kbn-storybook/preset.js @@ -16,7 +16,7 @@ module.exports = { webpackFinal: (config) => { return webpackConfig({ config }); }, - config: (entry) => { - return [...entry, require.resolve('./src/lib/decorators')]; + previewAnnotations: (entry) => { + return [...entry, require.resolve('./src/lib/preview')]; }, }; diff --git a/src/platform/packages/shared/kbn-storybook/src/lib/decorators.tsx b/src/platform/packages/shared/kbn-storybook/src/lib/decorators.tsx index b20a6dd10966..2634895e6756 100644 --- a/src/platform/packages/shared/kbn-storybook/src/lib/decorators.tsx +++ b/src/platform/packages/shared/kbn-storybook/src/lib/decorators.tsx @@ -10,7 +10,7 @@ import { of, Subject } from 'rxjs'; import React, { useEffect } from 'react'; import { action } from '@storybook/addon-actions'; -import type { DecoratorFn } from '@storybook/react'; +import type { Decorator } from '@storybook/react'; import { I18nProvider } from '@kbn/i18n-react'; import 'core_styles'; @@ -40,7 +40,7 @@ const analytics: AnalyticsServiceStart = { * Storybook decorator using the `KibanaContextProvider`. Uses the value from * `globals` provided by the Storybook theme switcher to set the `colorMode`. */ -const KibanaContextDecorator: DecoratorFn = (storyFn, { globals }) => { +const KibanaContextDecorator: Decorator = (storyFn, { globals }) => { // TODO: Add a switcher to see components in other locales or pseudo locale i18n.init({ locale: 'en', messages: {} }); const { darkMode, name } = getKibanaTheme(globals.euiTheme); diff --git a/src/platform/packages/shared/kbn-storybook/src/lib/default_config.ts b/src/platform/packages/shared/kbn-storybook/src/lib/default_config.ts index 1c6ff42264a0..e1a3f995ff99 100644 --- a/src/platform/packages/shared/kbn-storybook/src/lib/default_config.ts +++ b/src/platform/packages/shared/kbn-storybook/src/lib/default_config.ts @@ -9,18 +9,28 @@ import * as path from 'path'; import fs from 'fs'; -import type { StorybookConfig } from '@storybook/core-common'; -import webpack, { Configuration } from 'webpack'; -import { merge as webpackMerge } from 'webpack-merge'; +import type { StorybookConfig as BaseStorybookConfig } from '@storybook/react-webpack5'; +import type { TypescriptOptions } from '@storybook/preset-react-webpack'; +import webpack from 'webpack'; +import { resolve } from 'path'; +import UiSharedDepsNpm from '@kbn/ui-shared-deps-npm'; +import * as UiSharedDepsSrc from '@kbn/ui-shared-deps-src'; +import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'; import { REPO_ROOT } from './constants'; import { default as WebpackConfig } from '../webpack.config'; const MOCKS_DIRECTORY = '__storybook_mocks__'; const EXTENSIONS = ['.ts', '.js']; -export type { StorybookConfig }; +/* + * false is a valid option for typescript.reactDocgen, + * but it is not in the type definition + */ +interface StorybookConfig extends BaseStorybookConfig { + typescript: Partial; +} -const toPath = (_path: string) => path.join(REPO_ROOT, _path); +export type { StorybookConfig }; // This ignore pattern excludes all of node_modules EXCEPT for `@kbn`. This allows for // changes to packages to cause a refresh in Storybook. @@ -32,31 +42,101 @@ const IGNORE_GLOBS = [ ]; export const defaultConfig: StorybookConfig = { - addons: ['@kbn/storybook/preset', '@storybook/addon-a11y', '@storybook/addon-essentials'], - core: { - builder: 'webpack5', + addons: [ + '@kbn/storybook/preset', + '@storybook/addon-a11y', + '@storybook/addon-webpack5-compiler-babel', + // https://storybook.js.org/docs/essentials + '@storybook/addon-essentials', + '@storybook/addon-jest', + { + /** + * This addon replaces rules in the default SB webpack config + * to avoid duplicate rule issues caused by directly using the rules + * in the custom webpack config. + */ + name: '@storybook/addon-styling-webpack', + options: { + rules: [ + { + test: /\.css$/, + use: ['style-loader', 'css-loader'], + }, + { + test: /\.scss$/, + exclude: /\.module.(s(a|c)ss)$/, + use: [ + { loader: 'style-loader' }, + { loader: 'css-loader', options: { importLoaders: 2 } }, + { + loader: 'postcss-loader', + options: { + postcssOptions: { + config: require.resolve('@kbn/optimizer/postcss.config'), + }, + }, + }, + { + loader: 'sass-loader', + options: { + additionalData(content: string, loaderContext: any) { + const req = JSON.stringify( + loaderContext.utils.contextify( + loaderContext.context || loaderContext.rootContext, + resolve(REPO_ROOT, 'src/core/public/styles/core_app/_globals_v8light.scss') + ) + ); + return `@import ${req};\n${content}`; + }, + implementation: require('sass-embedded'), + sassOptions: { + includePaths: [resolve(REPO_ROOT, 'node_modules')], + quietDeps: true, + }, + }, + }, + ], + }, + ], + }, + }, + ], + stories: ['../**/*.stories.tsx', '../**/*.mdx'], + framework: { + name: '@storybook/react-webpack5', + options: {}, }, - stories: ['../**/*.stories.tsx', '../**/*.stories.mdx'], typescript: { reactDocgen: false, }, - features: { - postcss: false, + core: { + disableTelemetry: true, }, - // @ts-expect-error StorybookConfig type is incomplete - // https://storybook.js.org/docs/react/configure/babel#custom-configuration - babel: async (options) => { - options.presets.push([ - require.resolve('@emotion/babel-preset-css-prop'), + async babel(config: any, options: any) { + if (!config?.presets) { + config.presets = []; + } + + config.presets.push( + require.resolve('@kbn/babel-preset/common_preset'), + [ + require.resolve('@emotion/babel-preset-css-prop'), + { + // There's an issue where emotion classnames may be duplicated, + // (e.g. `[hash]-[filename]--[local]_[filename]--[local]`) + // https://github.com/emotion-js/emotion/issues/2417 + autoLabel: 'always', + labelFormat: '[filename]--[local]', + }, + ], { - // There's an issue where emotion classnames may be duplicated, - // (e.g. `[hash]-[filename]--[local]_[filename]--[local]`) - // https://github.com/emotion-js/emotion/issues/2417 - autoLabel: 'always', - labelFormat: '[filename]--[local]', - }, - ]); - return options; + plugins: [ + process.env.NODE_ENV !== 'production' && require.resolve('react-refresh/babel'), + ].filter(Boolean), + } + ); + + return config; }, webpackFinal: (config, options) => { if (process.env.CI) { @@ -64,6 +144,9 @@ export const defaultConfig: StorybookConfig = { config.cache = true; } + // required for react refresh + config.target = 'web'; + // This will go over every component which is imported and check its import statements. // For every import which starts with ./ it will do a check to see if a file with the same name // exists in the __storybook_mocks__ folder. If it does, use that import instead. @@ -106,6 +189,14 @@ export const defaultConfig: StorybookConfig = { }) ); + if (process.env.NODE_ENV !== 'production') { + config.plugins?.push( + new ReactRefreshWebpackPlugin({ + overlay: false, + }) + ); + } + config.resolve = { ...config.resolve, fallback: { @@ -113,43 +204,40 @@ export const defaultConfig: StorybookConfig = { fs: false, }, }; - config.watch = true; + config.watchOptions = { ...config.watchOptions, ignored: IGNORE_GLOBS, }; - // Remove when @storybook has moved to @emotion v11 - // https://github.com/storybookjs/storybook/issues/13145 - const emotion11CompatibleConfig = { - ...config, - resolve: { - ...config.resolve, - alias: { - ...config.resolve?.alias, - '@emotion/core': toPath('node_modules/@emotion/react'), - '@emotion/styled': toPath('node_modules/@emotion/styled'), - 'emotion-theming': toPath('node_modules/@emotion/react'), - }, - }, - }; - - return emotion11CompatibleConfig; - }, -}; - -// defaultConfigWebFinal and mergeWebpackFinal have been moved here because webpackFinal usage in -// storybook main.ts somehow is causing issues with newly added dependency of ts-node most likely -// an issue with storybook typescript setup see this issue for more details -// https://github.com/storybookjs/storybook/issues/9610 - -export const defaultConfigWebFinal: StorybookConfig = { - ...defaultConfig, - webpackFinal: (config: Configuration) => { return WebpackConfig({ config }); }, -}; + previewHead: (head) => ` + ${head} + + + + + + -export const mergeWebpackFinal = (extraConfig: Configuration) => { - return { webpackFinal: (config: Configuration) => webpackMerge(config, extraConfig) }; + + + + + + `, + staticDirs: [ + UiSharedDepsNpm.distDir, + UiSharedDepsSrc.distDir, + { + from: `${REPO_ROOT}/src/platform/plugins/shared/kibana_react/public/assets`, + to: 'plugins/kibanaReact/assets', + }, + ], }; diff --git a/src/platform/packages/shared/kbn-unified-tabs/src/components/__stories__/storybook_constants.ts b/src/platform/packages/shared/kbn-storybook/src/lib/preview.ts similarity index 58% rename from src/platform/packages/shared/kbn-unified-tabs/src/components/__stories__/storybook_constants.ts rename to src/platform/packages/shared/kbn-storybook/src/lib/preview.ts index 6d0b9a6de4c7..15c7a7f0876b 100644 --- a/src/platform/packages/shared/kbn-unified-tabs/src/components/__stories__/storybook_constants.ts +++ b/src/platform/packages/shared/kbn-storybook/src/lib/preview.ts @@ -7,4 +7,17 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -export const STORYBOOK_TITLE = 'Unified Tabs'; +import type { Preview } from '@storybook/react'; +import * as jest from 'jest-mock'; +import { decorators } from './decorators'; + +// @ts-expect-error +window.jest = jest; + +const preview: Preview = { + decorators, + initialGlobals: { euiTheme: 'v8.light' }, +}; + +// eslint-disable-next-line import/no-default-export +export default preview; diff --git a/src/platform/packages/shared/kbn-storybook/src/lib/register.ts b/src/platform/packages/shared/kbn-storybook/src/lib/register.ts index 028f6f20553f..2f9210bf2307 100644 --- a/src/platform/packages/shared/kbn-storybook/src/lib/register.ts +++ b/src/platform/packages/shared/kbn-storybook/src/lib/register.ts @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { addons } from '@storybook/addons'; +import { addons } from '@storybook/manager-api'; import { create } from '@storybook/theming'; import { registerThemeSwitcherAddon } from './register_theme_switcher_addon'; diff --git a/src/platform/packages/shared/kbn-storybook/src/lib/register_theme_switcher_addon.ts b/src/platform/packages/shared/kbn-storybook/src/lib/register_theme_switcher_addon.ts index 27b04aff8652..b26a807350db 100644 --- a/src/platform/packages/shared/kbn-storybook/src/lib/register_theme_switcher_addon.ts +++ b/src/platform/packages/shared/kbn-storybook/src/lib/register_theme_switcher_addon.ts @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { addons, types } from '@storybook/addons'; +import { addons, types } from '@storybook/manager-api'; import { ThemeSwitcher } from './theme_switcher'; export const THEME_SWITCHER_ADDON_ID = 'kibana/eui-theme-switcher'; @@ -16,7 +16,7 @@ export function registerThemeSwitcherAddon() { addons.register(THEME_SWITCHER_ADDON_ID, (api) => { const channel = api.getChannel(); - channel.on('globalsUpdated', ({ globals }) => { + channel?.on('globalsUpdated', ({ globals }) => { const previewFrame = document.getElementById( 'storybook-preview-iframe' ) as HTMLIFrameElement | null; diff --git a/src/platform/packages/shared/kbn-storybook/src/lib/run_storybook_cli.ts b/src/platform/packages/shared/kbn-storybook/src/lib/run_storybook_cli.ts index f10be2741d68..78b28f173031 100644 --- a/src/platform/packages/shared/kbn-storybook/src/lib/run_storybook_cli.ts +++ b/src/platform/packages/shared/kbn-storybook/src/lib/run_storybook_cli.ts @@ -7,17 +7,15 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ +/* eslint-disable @typescript-eslint/no-var-requires */ import { join } from 'path'; -import { logger } from '@storybook/node-logger'; -import buildStandalone from '@storybook/react/standalone'; +import { build } from '@storybook/core-server'; +import type { CLIOptions, BuilderOptions, LoadOptions } from '@storybook/types'; import { Flags, run } from '@kbn/dev-cli-runner'; -import UiSharedDepsNpm from '@kbn/ui-shared-deps-npm'; -import * as UiSharedDepsSrc from '@kbn/ui-shared-deps-src'; - -// @ts-expect-error internal dep of storybook -import interpret from 'interpret'; // eslint-disable-line import/no-extraneous-dependencies import * as constants from './constants'; +type StorybookCliOptions = CLIOptions & BuilderOptions & LoadOptions & { mode: 'dev' | 'static' }; + // Convert the flags to a Storybook loglevel function getLogLevelFromFlags(flags: Flags) { if (flags.debug) { @@ -40,29 +38,29 @@ export function runStorybookCli({ configDir, name }: { configDir: string; name: async ({ flags, log }) => { log.debug('Global config:\n', constants); - const staticDir = [ - UiSharedDepsNpm.distDir, - UiSharedDepsSrc.distDir, - 'src/platform/plugins/shared/kibana_react/public/assets:plugins/kibanaReact/assets', - ]; - const config: Record = { + const config: StorybookCliOptions = { configDir, mode: flags.site ? 'static' : 'dev', port: 9001, - staticDir, + loglevel: getLogLevelFromFlags(flags), }; + if (flags.site) { config.outputDir = join(constants.ASSET_DIR, name); + process.env.NODE_ENV = 'production'; + } else { + // required for react refresh + process.env.NODE_ENV = 'development'; } - logger.setLevel(getLogLevelFromFlags(flags)); - - // force storybook to use our transpilation rather than ts-node or anything else - interpret.extensions['.ts'] = [require.resolve('@kbn/babel-register/install')]; - interpret.extensions['.tsx'] = [require.resolve('@kbn/babel-register/install')]; - interpret.extensions['.jsx'] = [require.resolve('@kbn/babel-register/install')]; - - await buildStandalone(config); + try { + // Some transitive deps of addon-docs are ESM and not loading properly + // See: https://github.com/storybookjs/storybook/issues/29467 + require('fix-esm').require('react-docgen'); + await build(config); + } finally { + require('fix-esm').unregister(); + } // Line is only reached when building the static version if (flags.site) process.exit(); diff --git a/src/platform/packages/shared/kbn-storybook/src/lib/theme_switcher.tsx b/src/platform/packages/shared/kbn-storybook/src/lib/theme_switcher.tsx index fb7cbacbfd27..579287ed85a7 100644 --- a/src/platform/packages/shared/kbn-storybook/src/lib/theme_switcher.tsx +++ b/src/platform/packages/shared/kbn-storybook/src/lib/theme_switcher.tsx @@ -8,8 +8,9 @@ */ import React, { useCallback, useEffect } from 'react'; -import { Icons, IconButton, TooltipLinkList, WithTooltip } from '@storybook/components'; -import { useGlobals } from '@storybook/api'; +import { IconButton, TooltipLinkList, WithTooltip } from '@storybook/components'; +import { useGlobals } from '@storybook/manager-api'; +import { HeartIcon, HeartHollowIcon } from '@storybook/icons'; import { DEFAULT_THEME, THEMES, THEME_TITLES } from './themes'; @@ -37,7 +38,6 @@ export function ThemeSwitcher() { ( )} > - {/* @ts-ignore Remove when @storybook has moved to @emotion v11 */} - + {selectedTheme?.includes('dark') ? : } ); @@ -78,6 +77,6 @@ const ThemeSwitcherTooltip = React.memo( }) ); - return ; + return ; } ); diff --git a/src/platform/packages/shared/kbn-storybook/src/webpack.config.ts b/src/platform/packages/shared/kbn-storybook/src/webpack.config.ts index c085c4237183..c3fb6fd172eb 100644 --- a/src/platform/packages/shared/kbn-storybook/src/webpack.config.ts +++ b/src/platform/packages/shared/kbn-storybook/src/webpack.config.ts @@ -10,64 +10,13 @@ /* eslint-disable import/no-default-export */ import { externals } from '@kbn/ui-shared-deps-src'; import { resolve } from 'path'; -import webpack, { Configuration } from 'webpack'; +import { Configuration } from 'webpack'; import { merge as webpackMerge } from 'webpack-merge'; import { NodeLibsBrowserPlugin } from '@kbn/node-libs-browser-webpack-plugin'; 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] | Record; - -function isProgressPlugin(plugin: any) { - return 'handler' in plugin && plugin.showActiveModules && plugin.showModules; -} - -function isHtmlPlugin(plugin: any): plugin is { options: { template: string } } { - return !!(typeof plugin.options?.template === 'string'); -} - -interface BabelLoaderRule extends webpack.RuleSetRule { - use: Array<{ - loader: 'babel-loader'; - [key: string]: unknown; - }>; -} - -function isBabelLoaderRule(rule: webpack.RuleSetRule): rule is BabelLoaderRule { - return !!( - rule.use && - Array.isArray(rule.use) && - rule.use.some( - (l) => - typeof l === 'object' && typeof l?.loader === 'string' && l?.loader.includes('babel-loader') - ) - ); -} - -function getPresetPath(preset: Preset) { - if (typeof preset === 'string') return preset; - if (Array.isArray(preset)) return preset[0]; - return undefined; -} - -function getTsPreset(preset: Preset) { - if (getPresetPath(preset)?.includes('preset-typescript')) { - if (typeof preset === 'string') return [preset, {}]; - if (Array.isArray(preset)) return preset; - - throw new Error('unsupported preset-typescript format'); - } -} - -function isDesiredPreset(preset: Preset) { - return !getPresetPath(preset)?.includes('preset-flow'); -} - -// Extend the Storybook Webpack config with some customizations -/** - * @returns {import('webpack').Configuration} - */ export default ({ config: storybookConfig }: { config: Configuration }) => { const config: Configuration = { devServer: { @@ -97,41 +46,6 @@ export default ({ config: storybookConfig }: { config: Configuration }) => { loader: require.resolve('@kbn/peggy-loader'), }, }, - { - test: /\.scss$/, - exclude: /\.module.(s(a|c)ss)$/, - use: [ - { loader: 'style-loader' }, - { loader: 'css-loader', options: { importLoaders: 2 } }, - { - loader: 'postcss-loader', - options: { - postcssOptions: { - config: require.resolve('@kbn/optimizer/postcss.config'), - }, - }, - }, - { - loader: 'sass-loader', - options: { - additionalData(content: string, loaderContext: any) { - const req = JSON.stringify( - loaderContext.utils.contextify( - loaderContext.context || loaderContext.rootContext, - resolve(REPO_ROOT, 'src/core/public/styles/core_app/_globals_v8light.scss') - ) - ); - return `@import ${req};\n${content}`; - }, - implementation: require('sass-embedded'), - sassOptions: { - includePaths: [resolve(REPO_ROOT, 'node_modules')], - quietDeps: true, - }, - }, - }, - ], - }, ], }, plugins: [new NodeLibsBrowserPlugin(), new IgnoreNotFoundExportPlugin()], @@ -147,74 +61,5 @@ export default ({ config: storybookConfig }: { config: Configuration }) => { stats: 'errors-only', }; - // Override storybookConfig mainFields instead of merging with config - delete storybookConfig.resolve?.mainFields; - - const updatedModuleRules: webpack.RuleSetRule[] = []; - // clone and modify the module.rules config provided by storybook so that the default babel plugins run after the typescript preset - for (const originalRule of storybookConfig.module?.rules ?? []) { - const rule = typeof originalRule !== 'string' ? { ...originalRule } : {}; - updatedModuleRules.push(rule); - - if (isBabelLoaderRule(rule)) { - rule.use = [...rule.use]; - const loader = (rule.use[0] = { ...rule.use[0] }); - const options = (loader.options = { ...(loader.options as Record) }); - - // capture the plugins defined at the root level - const plugins: string[] = options.plugins ?? []; - options.plugins = []; - - // move the plugins to the top of the preset array so they will run after the typescript preset - options.presets = [ - require.resolve('@kbn/babel-preset/common_preset'), - { plugins }, - ...(options.presets as Preset[]).filter(isDesiredPreset).map((preset) => { - const tsPreset = getTsPreset(preset); - if (!tsPreset) { - return preset; - } - - return [ - tsPreset[0], - { - ...tsPreset[1], - allowNamespaces: true, - allowDeclareFields: true, - }, - ]; - }), - ]; - } - } - - // copy and modify the webpack plugins added by storybook - const filteredStorybookPlugins = []; - for (const plugin of storybookConfig.plugins ?? []) { - // Remove the progress plugin - if (isProgressPlugin(plugin)) { - continue; - } - - // This is the hacky part. We find something that looks like the - // HtmlWebpackPlugin and mutate its `options.template` to point at our - // revised template. - if (isHtmlPlugin(plugin)) { - plugin.options.template = require.resolve('../templates/index.ejs'); - } - - filteredStorybookPlugins.push(plugin); - } - - return webpackMerge( - { - ...storybookConfig, - plugins: filteredStorybookPlugins, - module: { - ...storybookConfig.module, - rules: updatedModuleRules, - }, - }, - config - ); + return webpackMerge(storybookConfig, config); }; diff --git a/src/platform/packages/shared/kbn-storybook/templates/index.ejs b/src/platform/packages/shared/kbn-storybook/templates/index.ejs deleted file mode 100644 index 69a80bb48ed9..000000000000 --- a/src/platform/packages/shared/kbn-storybook/templates/index.ejs +++ /dev/null @@ -1,77 +0,0 @@ - - - - - - - - <%= htmlWebpackPlugin.options.title || 'Storybook' %> - - - <% if (htmlWebpackPlugin.files.favicon) { %> - - <% } %> - - - - - - - - - - - - - - <% if (typeof headHtmlSnippet !=='undefined' ) { %> - <%= headHtmlSnippet %> - <% } %> - <% htmlWebpackPlugin.files.css.forEach(file=> { %> - - <% }); %> - - - - - - - - - - <% if (typeof bodyHtmlSnippet !=='undefined' ) { %> - <%= bodyHtmlSnippet %> - <% } %> - -
-
- - <% if (typeof globals !=='undefined' && Object.keys(globals).length) { %> - - <% } %> - - <% htmlWebpackPlugin.files.js.forEach(file=> { %> - - <% }); %> - - - \ No newline at end of file diff --git a/src/platform/packages/shared/kbn-unified-doc-viewer/src/components/field_name/__stories__/field_name.stories.tsx b/src/platform/packages/shared/kbn-unified-doc-viewer/src/components/field_name/__stories__/field_name.stories.tsx index 2b07c68993bf..de5c37740539 100644 --- a/src/platform/packages/shared/kbn-unified-doc-viewer/src/components/field_name/__stories__/field_name.stories.tsx +++ b/src/platform/packages/shared/kbn-unified-doc-viewer/src/components/field_name/__stories__/field_name.stories.tsx @@ -7,7 +7,6 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { storiesOf } from '@storybook/react'; import React from 'react'; import { EuiFlexGroup } from '@elastic/eui'; import { DataViewField } from '@kbn/data-views-plugin/public'; @@ -36,13 +35,26 @@ const renderFieldName = (fldName: React.ReactNode) => { ); }; -storiesOf('components/FieldName/FieldNameStories', module) - .add('default', () => renderFieldName()) - .add('with field type', () => - renderFieldName() - ) - .add('with field mapping', () => +export default { + title: 'components/FieldName/FieldNameStories', +}; + +export const Default = { + render: () => renderFieldName(), + name: 'default', +}; + +export const WithFieldType = { + render: () => renderFieldName(), + + name: 'with field type', +}; + +export const WithFieldMapping = { + render: () => renderFieldName( - ) - ); + ), + + name: 'with field mapping', +}; diff --git a/src/platform/packages/shared/kbn-unified-tabs/src/components/__stories__/tab.stories.tsx b/src/platform/packages/shared/kbn-unified-tabs/src/components/__stories__/tab.stories.tsx index 0cd246354428..32bbf332b2f1 100644 --- a/src/platform/packages/shared/kbn-unified-tabs/src/components/__stories__/tab.stories.tsx +++ b/src/platform/packages/shared/kbn-unified-tabs/src/components/__stories__/tab.stories.tsx @@ -8,10 +8,9 @@ */ import React from 'react'; -import type { ComponentStory } from '@storybook/react'; +import type { Meta, StoryFn } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { Tab, type TabProps } from '../tab'; -import { STORYBOOK_TITLE } from './storybook_constants'; import { MAX_TAB_WIDTH, MIN_TAB_WIDTH } from '../../constants'; const asyncAction = @@ -21,14 +20,14 @@ const asyncAction = }; export default { - title: `${STORYBOOK_TITLE}/Tab`, + title: 'Unified Tabs/Tab', parameters: { backgrounds: { default: 'white', values: [{ name: 'white', value: '#fff' }], }, }, -}; +} as Meta; const tabsSizeConfig = { isScrollable: false, @@ -36,7 +35,7 @@ const tabsSizeConfig = { regularTabMinWidth: MIN_TAB_WIDTH, }; -const TabTemplate: ComponentStory> = (args) => ( +const TabTemplate: StoryFn = (args) => ( > = (args) => { +const TabbedContentTemplate: StoryFn = (args) => { const { getNewTabDefaultProps } = useNewTabProps({ numberOfInitialItems: args.initialItems.length, }); diff --git a/src/platform/packages/shared/react/kibana_context/root/README.mdx b/src/platform/packages/shared/react/kibana_context/root/README.mdx index 3825d6d61e21..5ad6707e8ff4 100644 --- a/src/platform/packages/shared/react/kibana_context/root/README.mdx +++ b/src/platform/packages/shared/react/kibana_context/root/README.mdx @@ -21,7 +21,7 @@ import { I18nProvider } from '@kbn/i18n-react'; import { KibanaRootContextProvider } from '@kbn/react-kibana-context-root'; import { action } from '@storybook/addon-actions'; -import type { DecoratorFn } from '@storybook/react'; +import type { Decorator } from '@storybook/react'; import type { CoreTheme } from '@kbn/core-theme-browser'; import type { I18nStart } from '@kbn/core-i18n-browser'; @@ -35,7 +35,7 @@ const i18n: I18nStart = { Context: ({ children }) => {children}, }; -export const KibanaContextDecorator: DecoratorFn = (storyFn, { globals }) => { +export const KibanaContextDecorator: Decorator (storyFn, { globals }) => { const colorMode = globals.euiTheme === 'v8.dark' ? 'dark' : 'light'; useEffect(() => { diff --git a/src/platform/packages/shared/react/kibana_context/styled/styled_provider.tsx b/src/platform/packages/shared/react/kibana_context/styled/styled_provider.tsx index eadab57fe5c1..f3bdbd5b2db6 100644 --- a/src/platform/packages/shared/react/kibana_context/styled/styled_provider.tsx +++ b/src/platform/packages/shared/react/kibana_context/styled/styled_provider.tsx @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import type { DecoratorFn } from '@storybook/react'; +import type { Decorator } from '@storybook/react'; import React from 'react'; import * as styledComponents from 'styled-components'; @@ -52,7 +52,7 @@ const KibanaStyledComponentsThemeProvider = < * * @deprecated All Kibana components need to migrate to Emotion. */ -export const KibanaStyledComponentsThemeProviderDecorator: DecoratorFn = (storyFn, { globals }) => { +export const KibanaStyledComponentsThemeProviderDecorator: Decorator = (storyFn, { globals }) => { const darkMode = globals.euiTheme === 'v8.dark' || globals.euiTheme === 'v7.dark'; return ( diff --git a/src/platform/packages/shared/serverless/storybook/config/manager.ts b/src/platform/packages/shared/serverless/storybook/config/manager.ts index 8eca9f071929..21ab9299e149 100644 --- a/src/platform/packages/shared/serverless/storybook/config/manager.ts +++ b/src/platform/packages/shared/serverless/storybook/config/manager.ts @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { addons } from '@storybook/addons'; +import { addons } from '@storybook/manager-api'; import { create } from '@storybook/theming'; import { PANEL_ID as selectedPanel } from '@storybook/addon-actions'; diff --git a/src/platform/packages/shared/shared-ux/avatar/solution/src/solution_avatar.stories.tsx b/src/platform/packages/shared/shared-ux/avatar/solution/src/solution_avatar.stories.tsx index 6cf9baad5451..e00dbda5e690 100644 --- a/src/platform/packages/shared/shared-ux/avatar/solution/src/solution_avatar.stories.tsx +++ b/src/platform/packages/shared/shared-ux/avatar/solution/src/solution_avatar.stories.tsx @@ -25,46 +25,50 @@ const argTypes = { type KnownSolutionParams = Pick; -export const SolutionType = (params: KnownSolutionParams) => { - return ; -}; - -SolutionType.argTypes = { - name: { - control: 'select', - options: ['Cloud', 'Elastic', 'Kibana', 'Observability', 'Security', 'Enterprise Search'], - defaultValue: 'Elastic', +export const SolutionType = { + render: (params: KnownSolutionParams) => { + return ; + }, + + argTypes: { + name: { + control: 'select', + options: ['Cloud', 'Elastic', 'Kibana', 'Observability', 'Security', 'Enterprise Search'], + defaultValue: 'Elastic', + }, + ...argTypes, }, - ...argTypes, }; type IconTypeParams = Pick; -export const IconType = (params: IconTypeParams) => { - return ; -}; +export const IconType = { + render: (params: IconTypeParams) => { + return ; + }, -IconType.argTypes = { - iconType: { - control: 'select', - options: [ - 'logoCloud', - 'logoElastic', - 'logoElasticsearch', - 'logoElasticStack', - 'logoKibana', - 'logoObservability', - 'logoSecurity', - 'logoSiteSearch', - 'logoWorkplaceSearch', - 'machineLearningApp', - 'managementApp', - ], - defaultValue: 'logoElastic', + argTypes: { + iconType: { + control: 'select', + options: [ + 'logoCloud', + 'logoElastic', + 'logoElasticsearch', + 'logoElasticStack', + 'logoKibana', + 'logoObservability', + 'logoSecurity', + 'logoSiteSearch', + 'logoWorkplaceSearch', + 'machineLearningApp', + 'managementApp', + ], + defaultValue: 'logoElastic', + }, + name: { + control: 'text', + defaultValue: 'Solution Name', + }, + ...argTypes, }, - name: { - control: 'text', - defaultValue: 'Solution Name', - }, - ...argTypes, }; diff --git a/src/platform/packages/shared/shared-ux/button/exit_full_screen/mocks/storybook.ts b/src/platform/packages/shared/shared-ux/button/exit_full_screen/mocks/storybook.ts index efbeeae8afd9..3c23de4d6d83 100644 --- a/src/platform/packages/shared/shared-ux/button/exit_full_screen/mocks/storybook.ts +++ b/src/platform/packages/shared/shared-ux/button/exit_full_screen/mocks/storybook.ts @@ -30,7 +30,7 @@ export class StorybookMock extends AbstractStorybookMock< > { propArguments = { toggleChrome: { - control: 'boolean', + control: { control: 'boolean' }, defaultValue: true, }, }; diff --git a/src/platform/packages/shared/shared-ux/button/exit_full_screen/src/exit_full_screen_button.stories.tsx b/src/platform/packages/shared/shared-ux/button/exit_full_screen/src/exit_full_screen_button.stories.tsx index 35175cb0180d..dec699674014 100644 --- a/src/platform/packages/shared/shared-ux/button/exit_full_screen/src/exit_full_screen_button.stories.tsx +++ b/src/platform/packages/shared/shared-ux/button/exit_full_screen/src/exit_full_screen_button.stories.tsx @@ -31,12 +31,14 @@ export default { const mock = new ExitFullScreenButtonStorybookMock(); -export const ExitFullScreenButton = (params: ExitFullScreenButtonStorybookParams) => { - return ( - - - - ); -}; +export const ExitFullScreenButton = { + render: (params: ExitFullScreenButtonStorybookParams) => { + return ( + + + + ); + }, -ExitFullScreenButton.argTypes = mock.getArgumentTypes(); + argTypes: mock.getArgumentTypes(), +}; diff --git a/src/platform/packages/shared/shared-ux/button_toolbar/src/buttons/icon_button_group/icon_button_group.stories.tsx b/src/platform/packages/shared/shared-ux/button_toolbar/src/buttons/icon_button_group/icon_button_group.stories.tsx index 610a9b7a641d..605223baa5bc 100644 --- a/src/platform/packages/shared/shared-ux/button_toolbar/src/buttons/icon_button_group/icon_button_group.stories.tsx +++ b/src/platform/packages/shared/shared-ux/button_toolbar/src/buttons/icon_button_group/icon_button_group.stories.tsx @@ -65,8 +65,10 @@ const argTypes = { type Params = Record; -export const IconButtonGroup = ({ buttonCount }: Params) => { - return ; -}; +export const IconButtonGroup = { + render: ({ buttonCount }: Params) => { + return ; + }, -IconButtonGroup.argTypes = argTypes; + argTypes, +}; diff --git a/src/platform/packages/shared/shared-ux/button_toolbar/src/buttons/toolbar_button/toolbar_button.stories.tsx b/src/platform/packages/shared/shared-ux/button_toolbar/src/buttons/toolbar_button/toolbar_button.stories.tsx index 87d01a0187ac..19b16f13f7ca 100644 --- a/src/platform/packages/shared/shared-ux/button_toolbar/src/buttons/toolbar_button/toolbar_button.stories.tsx +++ b/src/platform/packages/shared/shared-ux/button_toolbar/src/buttons/toolbar_button/toolbar_button.stories.tsx @@ -47,16 +47,18 @@ const argTypes = { type Params = Record; -export const ToolbarButton = ({ buttonStyle, buttonType, iconSide }: Params) => { - return ( - - ); -}; +export const ToolbarButton = { + render: ({ buttonStyle, buttonType, iconSide }: Params) => { + return ( + + ); + }, -ToolbarButton.argTypes = argTypes; + argTypes, +}; diff --git a/src/platform/packages/shared/shared-ux/button_toolbar/src/popover/popover.stories.tsx b/src/platform/packages/shared/shared-ux/button_toolbar/src/popover/popover.stories.tsx index ed6a0eb0334e..1041aca94619 100644 --- a/src/platform/packages/shared/shared-ux/button_toolbar/src/popover/popover.stories.tsx +++ b/src/platform/packages/shared/shared-ux/button_toolbar/src/popover/popover.stories.tsx @@ -43,41 +43,43 @@ export default { argTypes, }; -export const Popover = ({ showIcon, buttonType }: Params) => { - return ( - - {() => ( - - )} - - ); -}; +export const Popover = { + render: ({ showIcon, buttonType }: Params) => { + return ( + + {() => ( + + )} + + ); + }, -Popover.argTypes = argTypes; + argTypes, +}; diff --git a/src/platform/packages/shared/shared-ux/button_toolbar/src/toolbar/toolbar.stories.tsx b/src/platform/packages/shared/shared-ux/button_toolbar/src/toolbar/toolbar.stories.tsx index 2c4de9edc684..41fc0cda3ba4 100644 --- a/src/platform/packages/shared/shared-ux/button_toolbar/src/toolbar/toolbar.stories.tsx +++ b/src/platform/packages/shared/shared-ux/button_toolbar/src/toolbar/toolbar.stories.tsx @@ -8,7 +8,7 @@ */ import React from 'react'; -import { Story } from '@storybook/react'; +import type { StoryFn } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { EuiContextMenu } from '@elastic/eui'; @@ -174,7 +174,7 @@ export default { }, }; -const Template: Story<{ +const Template: StoryFn<{ solution: 'Generic' | 'Canvas' | 'Dashboard'; iconButtonCount: number; showAddFromLibraryButton: boolean; @@ -205,20 +205,29 @@ const Template: Story<{ ); }; -export const Generic = Template.bind({}); -Generic.args = { - ...Template.args, - solution: 'Generic', +export const Generic = { + render: Template, + + args: { + ...Template.args, + solution: 'Generic', + }, }; -export const Canvas = Template.bind({}); -Canvas.args = { - ...Template.args, - solution: 'Canvas', +export const Canvas = { + render: Template, + + args: { + ...Template.args, + solution: 'Canvas', + }, }; -export const Dashboard = Template.bind({}); -Dashboard.args = { - ...Template.args, - solution: 'Dashboard', +export const Dashboard = { + render: Template, + + args: { + ...Template.args, + solution: 'Dashboard', + }, }; diff --git a/src/platform/packages/shared/shared-ux/card/no_data/impl/src/no_data_card.stories.tsx b/src/platform/packages/shared/shared-ux/card/no_data/impl/src/no_data_card.stories.tsx index d3c789d89e6a..e0779e4b4c86 100644 --- a/src/platform/packages/shared/shared-ux/card/no_data/impl/src/no_data_card.stories.tsx +++ b/src/platform/packages/shared/shared-ux/card/no_data/impl/src/no_data_card.stories.tsx @@ -30,12 +30,14 @@ export default { const mock = new NoDataCardStorybookMock(); const argTypes = mock.getArgumentTypes(); -export const Card = (params: NoDataCardStorybookParams) => { - return ( - - - - ); -}; +export const Card = { + render: (params: NoDataCardStorybookParams) => { + return ( + + + + ); + }, -Card.argTypes = argTypes; + argTypes, +}; diff --git a/src/platform/packages/shared/shared-ux/card/no_data/mocks/src/storybook.ts b/src/platform/packages/shared/shared-ux/card/no_data/mocks/src/storybook.ts index 3303e597aadc..022b9a45c0e9 100644 --- a/src/platform/packages/shared/shared-ux/card/no_data/mocks/src/storybook.ts +++ b/src/platform/packages/shared/shared-ux/card/no_data/mocks/src/storybook.ts @@ -35,25 +35,25 @@ export class StorybookMock extends AbstractStorybookMock< propArguments = { category: { control: { - type: 'text', + control: 'text', }, defaultValue: '', }, title: { control: { - type: 'text', + control: 'text', }, defaultValue: '', }, description: { control: { - type: 'text', + control: 'text', }, defaultValue: '', }, button: { control: { - type: 'text', + control: 'text', }, defaultValue: '', }, @@ -61,7 +61,7 @@ export class StorybookMock extends AbstractStorybookMock< serviceArguments = { canAccessFleet: { - control: 'boolean', + control: { control: 'boolean' }, defaultValue: true, }, }; diff --git a/src/platform/packages/shared/shared-ux/chrome/navigation/mocks/storybook.ts b/src/platform/packages/shared/shared-ux/chrome/navigation/mocks/storybook.ts index 47d0bc342a7b..dc342e6061cb 100644 --- a/src/platform/packages/shared/shared-ux/chrome/navigation/mocks/storybook.ts +++ b/src/platform/packages/shared/shared-ux/chrome/navigation/mocks/storybook.ts @@ -21,7 +21,7 @@ export class StorybookMock extends AbstractStorybookMock<{}, NavigationServices> serviceArguments = { isSideNavCollapsed: { - control: 'boolean', + control: { control: 'boolean' }, defaultValue: false, }, }; diff --git a/src/platform/packages/shared/shared-ux/chrome/navigation/src/ui/navigation.stories.tsx b/src/platform/packages/shared/shared-ux/chrome/navigation/src/ui/navigation.stories.tsx index 7cfea42861a5..2d8dbdaff236 100644 --- a/src/platform/packages/shared/shared-ux/chrome/navigation/src/ui/navigation.stories.tsx +++ b/src/platform/packages/shared/shared-ux/chrome/navigation/src/ui/navigation.stories.tsx @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { ComponentMeta } from '@storybook/react'; +import { Meta } from '@storybook/react'; import React, { EventHandler, FC, MouseEvent, useState, useEffect } from 'react'; import { of } from 'rxjs'; @@ -530,4 +530,4 @@ export default { }, }, component: GeneralLayoutStructure, -} as ComponentMeta; +} as Meta; diff --git a/src/platform/packages/shared/shared-ux/code_editor/impl/code_editor.stories.tsx b/src/platform/packages/shared/shared-ux/code_editor/impl/code_editor.stories.tsx index 3cd30e82f2d2..8518b72321a4 100644 --- a/src/platform/packages/shared/shared-ux/code_editor/impl/code_editor.stories.tsx +++ b/src/platform/packages/shared/shared-ux/code_editor/impl/code_editor.stories.tsx @@ -31,19 +31,21 @@ export default { const mock = new CodeEditorStorybookMock(); const argTypes = mock.getArgumentTypes(); -export const Basic = (params: CodeEditorStorybookParams) => { - return ( - - ); -}; +export const Basic = { + render: (params: CodeEditorStorybookParams) => { + return ( + + ); + }, -Basic.argTypes = argTypes; + argTypes, +}; // A sample language definition with a few example tokens // Taken from https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-custom-languages @@ -66,25 +68,27 @@ const logs = `[Sun Mar 7 20:54:27 2004] [notice] [client xx.xx.xx.xx] This is a [Sun Mar 7 21:16:17 2004] [error] [client xx.xx.xx.xx] File does not exist: /home/httpd/twiki/view/Main/WebHome `; -export const CustomLogLanguage = (params: CodeEditorStorybookParams) => { - return ( -
- -
- ); -}; +export const CustomLogLanguage = { + render: (params: CodeEditorStorybookParams) => { + return ( +
+ +
+ ); + }, -CustomLogLanguage.argTypes = argTypes; + argTypes, +}; export const JSONSupport = () => { return ( @@ -207,24 +211,26 @@ export const HoverProvider = () => { ); }; -export const AutomaticResize = (params: CodeEditorStorybookParams) => { - return ( -
- -
- ); +export const AutomaticResize = { + render: (params: CodeEditorStorybookParams) => { + return ( +
+ +
+ ); + }, + + argTypes, }; -AutomaticResize.argTypes = argTypes; - -export const FitToContent = (params: CodeEditorStorybookParams) => { +const FitToContentComponent = (params: CodeEditorStorybookParams) => { const [value, setValue] = useState('hello'); return ( { ); }; -FitToContent.argTypes = argTypes; +export const FitToContent = { + render: (params: CodeEditorStorybookParams) => , + + argTypes, +}; diff --git a/src/platform/packages/shared/shared-ux/code_editor/impl/mocks/storybook.ts b/src/platform/packages/shared/shared-ux/code_editor/impl/mocks/storybook.ts index 0ebc34eaa724..94a762b72ac5 100644 --- a/src/platform/packages/shared/shared-ux/code_editor/impl/mocks/storybook.ts +++ b/src/platform/packages/shared/shared-ux/code_editor/impl/mocks/storybook.ts @@ -35,38 +35,38 @@ export class CodeEditorStorybookMock extends AbstractStorybookMock< propArguments = { languageId: { control: { - type: 'radio', + control: 'radio', }, options: ['json', 'loglang', 'plaintext'], defaultValue: 'json', }, value: { control: { - type: 'text', + control: 'text', }, defaultValue: '', }, 'aria-label': { control: { - type: 'text', + control: 'text', }, defaultValue: 'code editor', }, allowFullScreen: { control: { - type: 'boolean', + control: 'boolean', }, defaultValue: false, }, transparentBackground: { control: { - type: 'boolean', + control: 'boolean', }, defaultValue: false, }, placeholder: { control: { - type: 'text', + control: 'text', }, defaultValue: 'myplaceholder', }, diff --git a/src/platform/packages/shared/shared-ux/error_boundary/src/ui/error_boundary.fatal.stories.tsx b/src/platform/packages/shared/shared-ux/error_boundary/src/ui/error_boundary.fatal.stories.tsx index 2b4ddb348723..b6e31c689ff8 100644 --- a/src/platform/packages/shared/shared-ux/error_boundary/src/ui/error_boundary.fatal.stories.tsx +++ b/src/platform/packages/shared/shared-ux/error_boundary/src/ui/error_boundary.fatal.stories.tsx @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { Meta, Story } from '@storybook/react'; +import { StoryFn, Meta } from '@storybook/react'; import React from 'react'; import { EuiFormFieldset } from '@elastic/eui'; @@ -32,7 +32,7 @@ export default { }, } as Meta; -export const ErrorInCallout: Story = () => { +export const ErrorInCallout: StoryFn = () => { const services = storybookMock.getServices(); return ( @@ -46,7 +46,7 @@ export const ErrorInCallout: Story = () => { ); }; -export const SectionErrorInCallout: Story = () => { +export const SectionErrorInCallout: StoryFn = () => { const services = storybookMock.getServices(); return ( diff --git a/src/platform/packages/shared/shared-ux/error_boundary/src/ui/error_boundary.recoverable.stories.tsx b/src/platform/packages/shared/shared-ux/error_boundary/src/ui/error_boundary.recoverable.stories.tsx index 49beb3f4cf49..f39b2fe0eba1 100644 --- a/src/platform/packages/shared/shared-ux/error_boundary/src/ui/error_boundary.recoverable.stories.tsx +++ b/src/platform/packages/shared/shared-ux/error_boundary/src/ui/error_boundary.recoverable.stories.tsx @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { Meta, Story } from '@storybook/react'; +import { StoryFn, Meta } from '@storybook/react'; import React from 'react'; import { EuiFormFieldset } from '@elastic/eui'; @@ -34,7 +34,7 @@ export default { }, } as Meta; -export const ErrorInCallout: Story = () => { +export const ErrorInCallout: StoryFn = () => { const services = storybookMock.getServices(); return ( @@ -48,7 +48,7 @@ export const ErrorInCallout: Story = () => { ); }; -export const SectionErrorInCallout: Story = () => { +export const SectionErrorInCallout: StoryFn = () => { const services = storybookMock.getServices(); return ( diff --git a/src/platform/packages/shared/shared-ux/file/file_picker/impl/src/file_picker.stories.tsx b/src/platform/packages/shared/shared-ux/file/file_picker/impl/src/file_picker.stories.tsx index cda8266d5b8a..e38af9b95e7d 100644 --- a/src/platform/packages/shared/shared-ux/file/file_picker/impl/src/file_picker.stories.tsx +++ b/src/platform/packages/shared/shared-ux/file/file_picker/impl/src/file_picker.stories.tsx @@ -8,7 +8,7 @@ */ import React from 'react'; -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Meta } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { base64dLogo } from '@kbn/shared-ux-file-image-mocks'; import type { FileImageMetadata, FileKindBrowser } from '@kbn/shared-ux-file-types'; @@ -17,6 +17,7 @@ import { FilesContext } from '@kbn/shared-ux-file-context'; import { FilePicker, Props as FilePickerProps } from './file_picker'; type ListResponse = ReturnType; +type MetaDecorators = Pick; const kind = 'filepicker'; const getFileKind = (id: string) => @@ -58,11 +59,9 @@ export default { ), ], -} as ComponentMeta; +} as Meta; -const Template: ComponentStory = (props) => ; - -export const Empty = Template.bind({}); +export const Empty = {}; const d = new Date(); let id = 0; @@ -85,47 +84,17 @@ function createFileJSON(file?: Partial>): FileJSON ( - `data:image/png;base64,${base64dLogo}`, - list: async (): ListResponse => ({ - files: [createFileJSON()], - total: 1, - }), - getFileKind, - } as unknown as FilesClient - } - > - - - ), -]; -export const BasicMany = Template.bind({}); -BasicMany.decorators = [ - (Story) => { - const files = [ - createFileJSON({ name: 'abc' }), - createFileJSON({ name: 'def' }), - createFileJSON({ name: 'efg' }), - createFileJSON({ name: 'foo' }), - createFileJSON({ name: 'bar' }), - createFileJSON(), - createFileJSON(), - ]; - - return ( +export const BasicOne: MetaDecorators = { + decorators: [ + (Story) => ( `data:image/png;base64,${base64dLogo}`, list: async (): ListResponse => ({ - files, - total: files.length, + files: [createFileJSON()], + total: 1, }), getFileKind, } as unknown as FilesClient @@ -133,73 +102,80 @@ BasicMany.decorators = [ > - ); - }, -]; + ), + ], +}; -export const BasicManyMany = Template.bind({}); -BasicManyMany.decorators = [ - (Story) => { - const array = new Array(102); - array.fill(null); - return ( - `data:image/png;base64,${base64dLogo}`, - list: async (): ListResponse => ({ - files: array.map((_, idx) => createFileJSON({ id: String(idx) })), - total: array.length, - }), - getFileKind, - } as unknown as FilesClient - } - > - - - ); - }, -]; +export const BasicMany: MetaDecorators = { + decorators: [ + (Story) => { + const files = [ + createFileJSON({ name: 'abc' }), + createFileJSON({ name: 'def' }), + createFileJSON({ name: 'efg' }), + createFileJSON({ name: 'foo' }), + createFileJSON({ name: 'bar' }), + createFileJSON(), + createFileJSON(), + ]; -export const ErrorLoading = Template.bind({}); -ErrorLoading.decorators = [ - (Story) => { - const array = new Array(102); - array.fill(createFileJSON()); - return ( - `data:image/png;base64,${base64dLogo}`, - list: async () => { - throw new Error('stop'); - }, - getFileKind, - } as unknown as FilesClient - } - > - - - ); - }, -]; - -export const TryFilter = Template.bind({}); -TryFilter.decorators = [ - (Story) => { - const array = { files: [createFileJSON()], total: 1 }; - return ( - <> -

Try entering a filter!

+ return ( `data:image/png;base64,${base64dLogo}`, - list: async ({ name }: { name: string[] }) => { - if (name) { - return { files: [], total: 0 }; - } - return array; + list: async (): ListResponse => ({ + files, + total: files.length, + }), + getFileKind, + } as unknown as FilesClient + } + > + + + ); + }, + ], +}; + +export const BasicManyMany: MetaDecorators = { + decorators: [ + (Story) => { + const array = new Array(102); + array.fill(null); + return ( + `data:image/png;base64,${base64dLogo}`, + list: async (): ListResponse => ({ + files: array.map((_, idx) => createFileJSON({ id: String(idx) })), + total: array.length, + }), + getFileKind, + } as unknown as FilesClient + } + > + + + ); + }, + ], +}; + +export const ErrorLoading: MetaDecorators = { + decorators: [ + (Story) => { + const array = new Array(102); + array.fill(createFileJSON()); + return ( + `data:image/png;base64,${base64dLogo}`, + list: async () => { + throw new Error('stop'); }, getFileKind, } as unknown as FilesClient @@ -207,30 +183,61 @@ TryFilter.decorators = [ > - - ); - }, -]; - -export const SingleSelect = Template.bind({}); -SingleSelect.decorators = [ - (Story) => ( - `data:image/png;base64,${base64dLogo}`, - list: async (): ListResponse => ({ - files: [createFileJSON(), createFileJSON(), createFileJSON()], - total: 1, - }), - getFileKind, - } as unknown as FilesClient - } - > - - - ), -]; -SingleSelect.args = { - multiple: undefined, + ); + }, + ], +}; + +export const TryFilter: MetaDecorators = { + decorators: [ + (Story) => { + const array = { files: [createFileJSON()], total: 1 }; + return ( + <> +

Try entering a filter!

+ `data:image/png;base64,${base64dLogo}`, + list: async ({ name }: { name: string[] }) => { + if (name) { + return { files: [], total: 0 }; + } + return array; + }, + getFileKind, + } as unknown as FilesClient + } + > + + + + ); + }, + ], +}; + +export const SingleSelect: Partial = { + decorators: [ + (Story) => ( + `data:image/png;base64,${base64dLogo}`, + list: async (): ListResponse => ({ + files: [createFileJSON(), createFileJSON(), createFileJSON()], + total: 1, + }), + getFileKind, + } as unknown as FilesClient + } + > + + + ), + ], + + args: { + multiple: undefined, + }, }; diff --git a/src/platform/packages/shared/shared-ux/file/file_upload/impl/src/file_upload.stories.tsx b/src/platform/packages/shared/shared-ux/file/file_upload/impl/src/file_upload.stories.tsx index 97d714edb495..13a2586882b4 100644 --- a/src/platform/packages/shared/shared-ux/file/file_upload/impl/src/file_upload.stories.tsx +++ b/src/platform/packages/shared/shared-ux/file/file_upload/impl/src/file_upload.stories.tsx @@ -8,7 +8,7 @@ */ import React from 'react'; -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Meta, StoryObj } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { FileKindBrowser, BaseFilesClient as FilesClient } from '@kbn/shared-ux-file-types'; import { FilesContext } from '@kbn/shared-ux-file-context'; @@ -65,150 +65,162 @@ export default { ), ], -} as ComponentMeta; +} as Meta; -const Template: ComponentStory = (props: Props) => ; +export const Basic = {}; -export const Basic = Template.bind({}); - -export const AllowRepeatedUploads = Template.bind({}); -AllowRepeatedUploads.args = { - allowRepeatedUploads: true, +export const AllowRepeatedUploads = { + args: { + allowRepeatedUploads: true, + }, }; -export const LongErrorUX = Template.bind({}); -LongErrorUX.decorators = [ - (Story) => ( - ({ file: { id: 'test' } }), - upload: async () => { - await sleep(1000); - throw new Error('Something went wrong while uploading! '.repeat(10).trim()); - }, - delete: async () => {}, - getFileKind, - } as unknown as FilesClient - } - > - - - ), -]; - -export const Abort = Template.bind({}); -Abort.decorators = [ - (Story) => ( - ({ file: { id: 'test' } }), - upload: async () => { - await sleep(60000); - }, - delete: async () => {}, - getFileKind, - } as unknown as FilesClient - } - > - - - ), -]; - -export const MaxSize = Template.bind({}); -MaxSize.args = { - kind: miniFile, +export const LongErrorUX: StoryObj = { + decorators: [ + (Story) => ( + ({ file: { id: 'test' } }), + upload: async () => { + await sleep(1000); + throw new Error('Something went wrong while uploading! '.repeat(10).trim()); + }, + delete: async () => {}, + getFileKind, + } as unknown as FilesClient + } + > + + + ), + ], }; -export const ZipOnly = Template.bind({}); -ZipOnly.args = { - kind: zipOnly, +export const Abort: StoryObj = { + decorators: [ + (Story) => ( + ({ file: { id: 'test' } }), + upload: async () => { + await sleep(60000); + }, + delete: async () => {}, + getFileKind, + } as unknown as FilesClient + } + > + + + ), + ], }; -export const AllowClearAfterUpload = Template.bind({}); -AllowClearAfterUpload.args = { - allowClear: true, +export const MaxSize = { + args: { + kind: miniFile, + }, }; -export const ImmediateUpload = Template.bind({}); -ImmediateUpload.args = { - immediate: true, +export const ZipOnly = { + args: { + kind: zipOnly, + }, }; -export const ImmediateUploadError = Template.bind({}); -ImmediateUploadError.args = { - immediate: true, -}; -ImmediateUploadError.decorators = [ - (Story) => ( - ({ file: { id: 'test' } }), - upload: async () => { - await sleep(1000); - throw new Error('Something went wrong while uploading!'); - }, - delete: async () => {}, - getFileKind, - } as unknown as FilesClient - } - > - - - ), -]; - -export const ImmediateUploadAbort = Template.bind({}); -ImmediateUploadAbort.decorators = [ - (Story) => ( - ({ file: { id: 'test' } }), - upload: async () => { - await sleep(60000); - }, - delete: async () => {}, - getFileKind, - } as unknown as FilesClient - } - > - - - ), -]; -ImmediateUploadAbort.args = { - immediate: true, +export const AllowClearAfterUpload = { + args: { + allowClear: true, + }, }; -export const Compressed = Template.bind({}); -Compressed.args = { - compressed: true, +export const ImmediateUpload = { + args: { + immediate: true, + }, }; -export const CompressedError = Template.bind({}); -CompressedError.args = { - compressed: true, +export const ImmediateUploadError: StoryObj = { + args: { + immediate: true, + }, + + decorators: [ + (Story) => ( + ({ file: { id: 'test' } }), + upload: async () => { + await sleep(1000); + throw new Error('Something went wrong while uploading!'); + }, + delete: async () => {}, + getFileKind, + } as unknown as FilesClient + } + > + + + ), + ], +}; + +export const ImmediateUploadAbort: StoryObj = { + decorators: [ + (Story) => ( + ({ file: { id: 'test' } }), + upload: async () => { + await sleep(60000); + }, + delete: async () => {}, + getFileKind, + } as unknown as FilesClient + } + > + + + ), + ], + + args: { + immediate: true, + }, +}; + +export const Compressed = { + args: { + compressed: true, + }, +}; + +export const CompressedError: StoryObj = { + args: { + compressed: true, + }, + + decorators: [ + (Story) => ( + ({ file: { id: 'test' } }), + upload: async () => { + await sleep(1000); + throw new Error('Something went wrong while uploading! '.repeat(10).trim()); + }, + delete: async () => {}, + getFileKind, + } as unknown as FilesClient + } + > + + + ), + ], }; -CompressedError.decorators = [ - (Story) => ( - ({ file: { id: 'test' } }), - upload: async () => { - await sleep(1000); - throw new Error('Something went wrong while uploading! '.repeat(10).trim()); - }, - delete: async () => {}, - getFileKind, - } as unknown as FilesClient - } - > - - - ), -]; diff --git a/src/platform/packages/shared/shared-ux/file/image/impl/src/image.stories.tsx b/src/platform/packages/shared/shared-ux/file/image/impl/src/image.stories.tsx index c7be93ffb7d3..5afa04dca562 100644 --- a/src/platform/packages/shared/shared-ux/file/image/impl/src/image.stories.tsx +++ b/src/platform/packages/shared/shared-ux/file/image/impl/src/image.stories.tsx @@ -8,7 +8,7 @@ */ import React from 'react'; -import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { StoryFn, Meta } from '@storybook/react'; import { getImageMetadata } from '@kbn/shared-ux-file-util'; import { getImageData as getBlob, base64dLogo } from '@kbn/shared-ux-file-image-mocks'; @@ -38,47 +38,62 @@ export default { ); }, ], -} as ComponentMeta; +} as Meta; -const Template: ComponentStory = (props: Props, { loaded: { meta } }) => ( +const Template: StoryFn = (props: Props, { loaded: { meta } }) => ( ); -export const Basic = Template.bind({}); - -export const WithBlurhash = Template.bind({}); -WithBlurhash.storyName = 'With blurhash'; -WithBlurhash.loaders = [ - async () => ({ - meta: await getImageMetadata(getBlob()), - }), -]; - -export const BrokenSrc = Template.bind({}); -BrokenSrc.storyName = 'Broken src'; -BrokenSrc.args = { - src: 'foo', +export const Basic = { + render: Template, }; -export const WithBlurhashAndBrokenSrc = Template.bind({}); -WithBlurhashAndBrokenSrc.storyName = 'With blurhash and broken src'; -WithBlurhashAndBrokenSrc.args = { - src: 'foo', +export const WithBlurhash = { + render: Template, + name: 'With blurhash', + + loaders: [ + async () => ({ + meta: await getImageMetadata(getBlob()), + }), + ], }; -WithBlurhashAndBrokenSrc.loaders = [ - async () => ({ - blurhash: await getImageMetadata(getBlob()), - }), -]; +export const BrokenSrc = { + render: Template, + name: 'Broken src', -export const WithCustomSizing = Template.bind({}); -WithCustomSizing.storyName = 'With custom sizing'; -WithCustomSizing.loaders = [ - async () => ({ - meta: await getImageMetadata(getBlob()), - }), -]; -WithCustomSizing.args = { - css: `width: 100px; height: 500px; object-fit: fill`, + args: { + src: 'foo', + }, +}; + +export const WithBlurhashAndBrokenSrc = { + render: Template, + name: 'With blurhash and broken src', + + args: { + src: 'foo', + }, + + loaders: [ + async () => ({ + blurhash: await getImageMetadata(getBlob()), + }), + ], +}; + +export const WithCustomSizing = { + render: Template, + name: 'With custom sizing', + + loaders: [ + async () => ({ + meta: await getImageMetadata(getBlob()), + }), + ], + + args: { + css: `width: 100px; height: 500px; object-fit: fill`, + }, }; diff --git a/src/platform/packages/shared/shared-ux/link/redirect_app/impl/src/redirect_app_links.stories.tsx b/src/platform/packages/shared/shared-ux/link/redirect_app/impl/src/redirect_app_links.stories.tsx index 924f83ad9efd..69e7dd5c53c6 100644 --- a/src/platform/packages/shared/shared-ux/link/redirect_app/impl/src/redirect_app_links.stories.tsx +++ b/src/platform/packages/shared/shared-ux/link/redirect_app/impl/src/redirect_app_links.stories.tsx @@ -28,46 +28,48 @@ export default { const mock = new RedirectAppLinksStorybookMock(); -export const RedirectAppLinks = () => { - return ( - - - - - - - Button with URL - - - - - Button without URL - - - - - - -
- - Button outside RedirectAppLinks - -
- - - ); -}; +export const RedirectAppLinks = { + render: () => { + return ( + + + + + + + Button with URL + + + + + Button without URL + + + + + + +
+ + Button outside RedirectAppLinks + +
+ + + ); + }, -RedirectAppLinks.argTypes = mock.getArgumentTypes(); + argTypes: mock.getArgumentTypes(), +}; diff --git a/src/platform/packages/shared/shared-ux/markdown/impl/markdown_editor.stories.tsx b/src/platform/packages/shared/shared-ux/markdown/impl/markdown_editor.stories.tsx index 5b74598615ec..0e2540e033aa 100644 --- a/src/platform/packages/shared/shared-ux/markdown/impl/markdown_editor.stories.tsx +++ b/src/platform/packages/shared/shared-ux/markdown/impl/markdown_editor.stories.tsx @@ -28,15 +28,17 @@ export default { const mock = new MarkdownStorybookMock(); const argTypes = mock.getArgumentTypes(); -export const MarkdownStoryComponent = (params: MarkdownStorybookParams) => { - return ( - // The markdown component is wrapped in the EuiFlexItem with width set to 50% - // Height can be set for the markdown component - - {/* readOnly is set to false because the Markdown component editor will error if set to true without markdown content or children */} - - - ); -}; +export const MarkdownStoryComponent = { + render: (params: MarkdownStorybookParams) => { + return ( + // The markdown component is wrapped in the EuiFlexItem with width set to 50% + // Height can be set for the markdown component + + {/* readOnly is set to false because the Markdown component editor will error if set to true without markdown content or children */} + + + ); + }, -MarkdownStoryComponent.argTypes = argTypes; + argTypes, +}; diff --git a/src/platform/packages/shared/shared-ux/markdown/impl/markdown_format.stories.tsx b/src/platform/packages/shared/shared-ux/markdown/impl/markdown_format.stories.tsx index e8c688248045..f84c903dc7ab 100644 --- a/src/platform/packages/shared/shared-ux/markdown/impl/markdown_format.stories.tsx +++ b/src/platform/packages/shared/shared-ux/markdown/impl/markdown_format.stories.tsx @@ -28,25 +28,27 @@ export default { const mock = new MarkdownStorybookMock(); const argTypes = mock.getArgumentTypes(); -export const MarkdownStoryComponent = (params: MarkdownStorybookParams) => { - return ( - - - - - {`My content in **markdown** format passed as *children* - \`openLinksInNewTab\` [test link to open in new tab or not](https://www.elastic.co) - \`enableTooltipSupport\` !{tooltip[anchor text](Tooltip content)} - \`validateLinks\` [link with non-standard scheme](testing-testing-this-is-a-non-standatd-scheme://) - `} - - - - ); -}; +export const MarkdownStoryComponent = { + render: (params: MarkdownStorybookParams) => { + return ( + + + + + {`My content in **markdown** format passed as *children* + \`openLinksInNewTab\` [test link to open in new tab or not](https://www.elastic.co) + \`enableTooltipSupport\` !{tooltip[anchor text](Tooltip content)} + \`validateLinks\` [link with non-standard scheme](testing-testing-this-is-a-non-standatd-scheme://) + `} + + + + ); + }, -MarkdownStoryComponent.argTypes = argTypes; + argTypes, +}; diff --git a/src/platform/packages/shared/shared-ux/markdown/mocks/storybook.ts b/src/platform/packages/shared/shared-ux/markdown/mocks/storybook.ts index bdda55de3e88..178e43d4514f 100644 --- a/src/platform/packages/shared/shared-ux/markdown/mocks/storybook.ts +++ b/src/platform/packages/shared/shared-ux/markdown/mocks/storybook.ts @@ -35,49 +35,49 @@ export class MarkdownStorybookMock extends AbstractStorybookMock< > { propArguments = { readOnly: { - control: 'boolean', + control: { control: 'boolean' }, defaultValue: false, }, openLinksInNewTab: { - control: 'boolean', + control: { control: 'boolean' }, defaultValue: true, }, placeholder: { control: { - type: 'text', + control: 'text', }, defaultValue: '', }, markdownContent: { control: { - type: 'text', + control: 'text', }, defaultValue: '', }, ariaLabelContent: { control: { - type: 'text', + control: 'text', }, defaultValue: 'markdown component', }, height: { control: { - type: 'select', + control: 'select', defaultValue: 'full', label: 'height', options: [0, 20, 50, 'full'], }, }, enableTooltipSupport: { - control: 'boolean', + control: { control: 'boolean' }, defaultValue: false, }, validateLinks: { - control: 'boolean', + control: { control: 'boolean' }, defaultValue: false, }, enableSoftLineBreaks: { - control: 'boolean', + control: { control: 'boolean' }, defaultValue: false, }, }; diff --git a/src/platform/packages/shared/shared-ux/modal/tabbed/src/tabbed_modal.stories.tsx b/src/platform/packages/shared/shared-ux/modal/tabbed/src/tabbed_modal.stories.tsx index 1888abf167f6..8a9f87e31393 100644 --- a/src/platform/packages/shared/shared-ux/modal/tabbed/src/tabbed_modal.stories.tsx +++ b/src/platform/packages/shared/shared-ux/modal/tabbed/src/tabbed_modal.stories.tsx @@ -25,47 +25,49 @@ export default { const mock = new TabbedModalStorybookMock(); const argTypes = mock.getArgumentTypes(); -export const TrivialExample = (params: TabbedModalStorybookParams) => { - return ( - { - return ( - - - -

Click the button to send a message into the void

- - - ); - }, - initialState: { - message: 'Hello World!!', - }, - modalActionBtn: { - id: 'wave', - label: 'Say Hi 👋🏾', - dataTestSubj: 'wave', - handler: ({ state }) => { - alert(state.message); +export const TrivialExample = { + render: (params: TabbedModalStorybookParams) => { + return ( + { + return ( + + + +

Click the button to send a message into the void

+ + + ); + }, + initialState: { + message: 'Hello World!!', + }, + modalActionBtn: { + id: 'wave', + label: 'Say Hi 👋🏾', + dataTestSubj: 'wave', + handler: ({ state }) => { + alert(state.message); + }, }, }, - }, - ]} - defaultSelectedTabId="hello" - onClose={() => {}} - /> - ); + ]} + defaultSelectedTabId="hello" + onClose={() => {}} + /> + ); + }, + + argTypes, }; -TrivialExample.argTypes = argTypes; - -export const NonTrivialExample = (params: TabbedModalStorybookParams) => { +const NonTrivialExampleComponent = (params: TabbedModalStorybookParams) => { const checkboxGroupItemId1 = useGeneratedHtmlId({ prefix: 'checkboxGroupItem', suffix: 'first', @@ -177,4 +179,8 @@ export const NonTrivialExample = (params: TabbedModalStorybookParams) => { ); }; -NonTrivialExample.argTypes = argTypes; +export const NonTrivialExample = { + render: (params: TabbedModalStorybookParams) => , + + argTypes, +}; diff --git a/src/platform/packages/shared/shared-ux/modal/tabbed/storybook/setup.ts b/src/platform/packages/shared/shared-ux/modal/tabbed/storybook/setup.ts index 45dfa8ed9eb1..359c9659d753 100644 --- a/src/platform/packages/shared/shared-ux/modal/tabbed/storybook/setup.ts +++ b/src/platform/packages/shared/shared-ux/modal/tabbed/storybook/setup.ts @@ -31,19 +31,19 @@ export class StorybookMock extends AbstractStorybookMock< propArguments = { tabs: { control: { - type: 'array', + control: 'array', }, defaultValue: [], }, defaultSelectedTabId: { control: { - type: 'array', + control: 'array', }, defaultValue: [], }, onClose: { control: { - type: 'array', + control: 'array', }, defaultValue: [], }, diff --git a/src/platform/packages/shared/shared-ux/page/kibana_template/impl/src/page_template.stories.tsx b/src/platform/packages/shared/shared-ux/page/kibana_template/impl/src/page_template.stories.tsx index ce69bbcea592..63c471481118 100644 --- a/src/platform/packages/shared/shared-ux/page/kibana_template/impl/src/page_template.stories.tsx +++ b/src/platform/packages/shared/shared-ux/page/kibana_template/impl/src/page_template.stories.tsx @@ -42,42 +42,50 @@ const solutionNavMock = new SolutionNavStorybookMock(); const noDataConfigMock = new NoDataConfigStorybookMock(); const innerMock = new InnerPageTemplateStorybookMock(); -export const WithNoDataConfig = (params: NoDataConfigStorybookParams) => { - return ( - - - - ); +export const WithNoDataConfig = { + render: (params: NoDataConfigStorybookParams) => { + return ( + + + + ); + }, + + argTypes: noDataConfigMock.getArgumentTypes(), }; -WithNoDataConfig.argTypes = noDataConfigMock.getArgumentTypes(); +export const WithSolutionNav = { + render: (params: SolutionNavStorybookParams) => { + return ( + + + + ); + }, -export const WithSolutionNav = (params: SolutionNavStorybookParams) => { - return ( - - - - ); + argTypes: solutionNavMock.getArgumentTypes(), }; -WithSolutionNav.argTypes = solutionNavMock.getArgumentTypes(); +export const WithBoth = { + render: (params: KibanaPageTemplateStorybookParams) => { + return ( + + + + ); + }, -export const WithBoth = (params: KibanaPageTemplateStorybookParams) => { - return ( - - - - ); + argTypes: templateMock.getArgumentTypes(), }; -WithBoth.argTypes = templateMock.getArgumentTypes(); +export const WithNeither = { + render: (params: InnerPageTemplateStorybookParams) => { + return ( + + + + ); + }, -export const WithNeither = (params: InnerPageTemplateStorybookParams) => { - return ( - - - - ); + argTypes: innerMock.getArgumentTypes(), }; - -WithNeither.argTypes = innerMock.getArgumentTypes(); diff --git a/src/platform/packages/shared/shared-ux/page/kibana_template/mocks/src/storybook/inner.tsx b/src/platform/packages/shared/shared-ux/page/kibana_template/mocks/src/storybook/inner.tsx index 1b7c91fbbb8b..eaa20bb7f08c 100644 --- a/src/platform/packages/shared/shared-ux/page/kibana_template/mocks/src/storybook/inner.tsx +++ b/src/platform/packages/shared/shared-ux/page/kibana_template/mocks/src/storybook/inner.tsx @@ -33,24 +33,24 @@ const noDataConfigMock = new NoDataConfigPageStorybookMock(); export const pageHeaderArguments: ArgumentParams = { isEmptyState: { - control: 'boolean', + control: { control: 'boolean' }, defaultValue: false, }, iconType: { - control: { type: 'radio' }, + control: { control: 'radio' }, options: ['logoElastic', 'logoKibana', 'logoCloud', undefined], defaultValue: undefined, }, pageTitle: { - control: 'text', + control: { control: 'text' }, defaultValue: 'Page title', }, description: { - control: 'text', + control: { control: 'text' }, defaultValue: 'Page description', }, rightSideItems: { - control: 'boolean', + control: { control: 'boolean' }, defaultValue: true, }, }; diff --git a/src/platform/packages/shared/shared-ux/page/kibana_template/mocks/src/storybook/no_data_config.ts b/src/platform/packages/shared/shared-ux/page/kibana_template/mocks/src/storybook/no_data_config.ts index ecd7ff9af7f1..6f9e0d0ae2d2 100644 --- a/src/platform/packages/shared/shared-ux/page/kibana_template/mocks/src/storybook/no_data_config.ts +++ b/src/platform/packages/shared/shared-ux/page/kibana_template/mocks/src/storybook/no_data_config.ts @@ -32,20 +32,20 @@ const noDataConfigMock = new NoDataConfigPageStorybookMock(); export const noDataConfigArguments: ArgumentParams = { solution: { - control: 'text', + control: { control: 'text' }, defaultValue: 'Observability', }, logo: { - control: { type: 'radio' }, + control: { control: 'radio' }, options: ['logoElastic', 'logoKibana', 'logoCloud', undefined], defaultValue: undefined, }, docsLink: { - control: 'text', + control: { control: 'text' }, defaultValue: 'docs/link', }, pageTitle: { - control: 'text', + control: { control: 'text' }, defaultValue: '', }, }; diff --git a/src/platform/packages/shared/shared-ux/page/kibana_template/mocks/src/storybook/solution_nav.ts b/src/platform/packages/shared/shared-ux/page/kibana_template/mocks/src/storybook/solution_nav.ts index 73626dadee35..05674609ddcc 100644 --- a/src/platform/packages/shared/shared-ux/page/kibana_template/mocks/src/storybook/solution_nav.ts +++ b/src/platform/packages/shared/shared-ux/page/kibana_template/mocks/src/storybook/solution_nav.ts @@ -29,16 +29,16 @@ const noDataConfigMock = new NoDataConfigPageStorybookMock(); export const solutionNavArguments: ArgumentParams = { name: { - control: 'text', + control: { control: 'text' }, defaultValue: 'Kibana', }, icon: { - control: { type: 'radio' }, + control: { control: 'radio' }, options: ['logoKibana', 'logoObservability', 'logoSecurity'], defaultValue: 'logoKibana', }, canBeCollapsed: { - control: 'boolean', + control: { control: 'boolean' }, defaultValue: true, }, }; diff --git a/src/platform/packages/shared/shared-ux/page/no_data/impl/src/no_data_page.stories.tsx b/src/platform/packages/shared/shared-ux/page/no_data/impl/src/no_data_page.stories.tsx index 632ee4c11bf6..295a098d1e5b 100644 --- a/src/platform/packages/shared/shared-ux/page/no_data/impl/src/no_data_page.stories.tsx +++ b/src/platform/packages/shared/shared-ux/page/no_data/impl/src/no_data_page.stories.tsx @@ -29,12 +29,14 @@ export default { }, }; -export const NoDataPage = (params: NoDataPageStorybookParams) => { - return ( - - - - ); -}; +export const NoDataPage = { + render: (params: NoDataPageStorybookParams) => { + return ( + + + + ); + }, -NoDataPage.argTypes = mock.getArgumentTypes(); + argTypes: mock.getArgumentTypes(), +}; diff --git a/src/platform/packages/shared/shared-ux/page/no_data/mocks/src/storybook.ts b/src/platform/packages/shared/shared-ux/page/no_data/mocks/src/storybook.ts index 9e940b039ccc..d16b2151ccbd 100644 --- a/src/platform/packages/shared/shared-ux/page/no_data/mocks/src/storybook.ts +++ b/src/platform/packages/shared/shared-ux/page/no_data/mocks/src/storybook.ts @@ -26,20 +26,20 @@ export class NoDataPageStorybookMock extends AbstractStorybookMock< > { propArguments = { solution: { - control: 'text', + control: { control: 'text' }, defaultValue: 'Observability', }, logo: { - control: { type: 'radio' }, + control: { control: 'radio' }, options: ['logoElastic', 'logoKibana', 'logoCloud', undefined], defaultValue: undefined, }, docsLink: { - control: 'text', + control: { control: 'text' }, defaultValue: 'docs/link', }, pageTitle: { - control: 'text', + control: { control: 'text' }, defaultValue: '', }, }; diff --git a/src/platform/packages/shared/shared-ux/page/no_data_config/impl/src/no_data_config_page.stories.tsx b/src/platform/packages/shared/shared-ux/page/no_data_config/impl/src/no_data_config_page.stories.tsx index 3c5ed710f96c..7da30984c0f7 100644 --- a/src/platform/packages/shared/shared-ux/page/no_data_config/impl/src/no_data_config_page.stories.tsx +++ b/src/platform/packages/shared/shared-ux/page/no_data_config/impl/src/no_data_config_page.stories.tsx @@ -29,12 +29,14 @@ export default { }, }; -export const NoDataConfigPage = (params: NoDataConfigPageStorybookParams) => { - return ( - - - - ); -}; +export const NoDataConfigPage = { + render: (params: NoDataConfigPageStorybookParams) => { + return ( + + + + ); + }, -NoDataConfigPage.argTypes = mock.getArgumentTypes(); + argTypes: mock.getArgumentTypes(), +}; diff --git a/src/platform/packages/shared/shared-ux/page/no_data_config/mocks/src/storybook.ts b/src/platform/packages/shared/shared-ux/page/no_data_config/mocks/src/storybook.ts index ef397dfafe87..463c33c6521b 100644 --- a/src/platform/packages/shared/shared-ux/page/no_data_config/mocks/src/storybook.ts +++ b/src/platform/packages/shared/shared-ux/page/no_data_config/mocks/src/storybook.ts @@ -31,20 +31,20 @@ export class NoDataConfigPageStorybookMock extends AbstractStorybookMock< > { propArguments = { solution: { - control: 'text', + control: { control: 'text' }, defaultValue: 'Observability', }, logo: { - control: { type: 'radio' }, + control: { control: 'radio' }, options: ['logoElastic', 'logoKibana', 'logoCloud', undefined], defaultValue: undefined, }, docsLink: { - control: 'text', + control: { control: 'text' }, defaultValue: 'docs/link', }, pageTitle: { - control: 'text', + control: { control: 'text' }, defaultValue: '', }, }; diff --git a/src/platform/packages/shared/shared-ux/page/solution_nav/src/solution_nav.stories.tsx b/src/platform/packages/shared/shared-ux/page/solution_nav/src/solution_nav.stories.tsx index ccaf40efee9d..371091e727f5 100644 --- a/src/platform/packages/shared/shared-ux/page/solution_nav/src/solution_nav.stories.tsx +++ b/src/platform/packages/shared/shared-ux/page/solution_nav/src/solution_nav.stories.tsx @@ -57,32 +57,39 @@ const items: SolutionNavProps['items'] = [ }, ]; -export const SolutionNav = (params: Params) => { - return ( - - ); -}; +export const SolutionNav = { + render: (params: Params) => { + return ( + + ); + }, -SolutionNav.argTypes = { - name: { - control: 'text', - defaultValue: 'Kibana', + argTypes: { + name: { + control: 'text', + defaultValue: 'Kibana', + }, + icon: { + control: { type: 'radio' }, + options: ['logoKibana', 'logoObservability', 'logoSecurity'], + defaultValue: 'logoKibana', + }, + children: { + control: 'text', + defaultValue: '', + }, + canBeCollapsed: { + control: 'boolean', + defaultValue: true, + }, }, - icon: { - control: { type: 'radio' }, - options: ['logoKibana', 'logoObservability', 'logoSecurity'], - defaultValue: 'logoKibana', - }, - children: { - control: 'text', - defaultValue: '', - }, - canBeCollapsed: { - control: 'boolean', - defaultValue: true, - }, -}; -SolutionNav.parameters = { - layout: 'fullscreen', + parameters: { + layout: 'fullscreen', + }, }; diff --git a/src/platform/packages/shared/shared-ux/prompt/no_data_views/impl/src/no_data_views.stories.tsx b/src/platform/packages/shared/shared-ux/prompt/no_data_views/impl/src/no_data_views.stories.tsx index 46128089bb41..a14579c77b99 100644 --- a/src/platform/packages/shared/shared-ux/prompt/no_data_views/impl/src/no_data_views.stories.tsx +++ b/src/platform/packages/shared/shared-ux/prompt/no_data_views/impl/src/no_data_views.stories.tsx @@ -31,12 +31,14 @@ export default { const mock = new NoDataViewsPromptStorybookMock(); -export const CreateDataView = (params: NoDataViewsPromptStorybookParams) => { - return ( - - - - ); -}; +export const CreateDataView = { + render: (params: NoDataViewsPromptStorybookParams) => { + return ( + + + + ); + }, -CreateDataView.argTypes = mock.getArgumentTypes(); + argTypes: mock.getArgumentTypes(), +}; diff --git a/src/platform/packages/shared/shared-ux/prompt/no_data_views/mocks/src/storybook.ts b/src/platform/packages/shared/shared-ux/prompt/no_data_views/mocks/src/storybook.ts index 973152201587..ada14277717f 100644 --- a/src/platform/packages/shared/shared-ux/prompt/no_data_views/mocks/src/storybook.ts +++ b/src/platform/packages/shared/shared-ux/prompt/no_data_views/mocks/src/storybook.ts @@ -30,21 +30,21 @@ export class StorybookMock extends AbstractStorybookMock< propArguments = {}; serviceArguments = { canCreateNewDataView: { - control: 'boolean', + control: { control: 'boolean' }, defaultValue: true, }, dataViewsDocLink: { options: ['dataviews/link', undefined], - control: { type: 'radio' }, + control: { control: 'radio' }, defaultValue: 'dataviews/link', }, canTryEsql: { - control: 'boolean', + control: { control: 'boolean' }, defaultValue: true, }, esqlDocLink: { options: ['esql/link', undefined], - control: { type: 'radio' }, + control: { control: 'radio' }, defaultValue: 'esql/link', }, }; diff --git a/src/platform/packages/shared/shared-ux/prompt/not_found/src/not_found_prompt.stories.tsx b/src/platform/packages/shared/shared-ux/prompt/not_found/src/not_found_prompt.stories.tsx index f5c63a3ba24d..7eed108b4f26 100644 --- a/src/platform/packages/shared/shared-ux/prompt/not_found/src/not_found_prompt.stories.tsx +++ b/src/platform/packages/shared/shared-ux/prompt/not_found/src/not_found_prompt.stories.tsx @@ -9,7 +9,7 @@ import { EuiButton, EuiPageTemplate } from '@elastic/eui'; import React from 'react'; -import { Meta, Story } from '@storybook/react'; +import { StoryObj, StoryFn, Meta } from '@storybook/react'; import mdx from '../README.mdx'; import { NotFoundPrompt } from './not_found_prompt'; @@ -28,7 +28,7 @@ export default { }, } as Meta; -export const EmptyPage: Story = () => { +export const EmptyPage: StoryFn = () => { return ( @@ -38,7 +38,7 @@ export const EmptyPage: Story = () => { ); }; -export const PageWithSidebar: Story = () => { +export const PageWithSidebar: StoryFn = () => { return ( sidebar @@ -47,25 +47,27 @@ export const PageWithSidebar: Story = () => { ); }; -export const CustomActions: Story = (args) => { - return ( - - - - - Go home - - - Go to discover - - - } - title="Customizable Title" - body="Customizable Body" - /> - - - ); +export const CustomActions: StoryObj<{ onClick: () => void }> = { + render: (args) => { + return ( + + + + + Go home + + + Go to discover + + + } + title="Customizable Title" + body="Customizable Body" + /> + + + ); + }, }; diff --git a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/__stories__/metric_renderer.stories.tsx b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/__stories__/metric_renderer.stories.tsx index fccd9b0c32e3..3cba49adbce1 100644 --- a/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/__stories__/metric_renderer.stories.tsx +++ b/src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/__stories__/metric_renderer.stories.tsx @@ -8,7 +8,6 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { from } from 'rxjs'; import { ExpressionValueVisDimension } from '@kbn/visualizations-plugin/common'; import { Datatable, DatatableColumn, TextAlignment } from '@kbn/expressions-plugin/common'; @@ -147,11 +146,16 @@ const metricVisRenderer = () => getStartDeps, }); -storiesOf('renderers/visMetric', module) - .add('Default', () => { - return ; - }) - .add('Without labels', () => { +export default { + title: 'renderers/visMetric', +}; + +export const Default = () => { + return ; +}; + +export const WithoutLabels = { + render: () => { return ( ); - }) - .add('With custom font size', () => { + }, + + name: 'Without labels', +}; + +export const WithCustomFontSize = { + render: () => { return ( ); - }) - .add('With label position is top and custom font for label', () => { + }, + + name: 'With custom font size', +}; + +export const WithLabelPositionIsTopAndCustomFontForLabel = { + render: () => { return ( ); - }) - .add('With color ranges, background color mode', () => { + }, + + name: 'With label position is top and custom font for label', +}; + +export const WithColorRangesBackgroundColorMode = { + render: () => { return ( ); - }) - .add('With color ranges, labels color mode', () => { + }, + + name: 'With color ranges, background color mode', +}; + +export const WithColorRangesLabelsColorMode = { + render: () => { return ( ); - }) - .add('With color ranges, labels color mode, reverse mode', () => { + }, + + name: 'With color ranges, labels color mode', +}; + +export const WithColorRangesLabelsColorModeReverseMode = { + render: () => { return ( ); - }) - .add('With bucket', () => { + }, + + name: 'With color ranges, labels color mode, reverse mode', +}; + +export const WithBucket = { + render: () => { return ( ); - }) - .add('With empty results', () => { + }, + + name: 'With bucket', +}; + +export const WithEmptyResults = { + render: () => { return ( ); - }) - .add('With colorizing full container', () => { + }, + + name: 'With empty results', +}; + +export const WithColorizingFullContainer = { + render: () => { return ( ); - }); + }, + + name: 'With colorizing full container', +}; diff --git a/src/platform/plugins/shared/chart_expressions/expression_partition_vis/public/__stories__/mosaic_vis_renderer.stories.tsx b/src/platform/plugins/shared/chart_expressions/expression_partition_vis/public/__stories__/mosaic_vis_renderer.stories.tsx index 490516fff33f..5ff5070ca194 100644 --- a/src/platform/plugins/shared/chart_expressions/expression_partition_vis/public/__stories__/mosaic_vis_renderer.stories.tsx +++ b/src/platform/plugins/shared/chart_expressions/expression_partition_vis/public/__stories__/mosaic_vis_renderer.stories.tsx @@ -8,7 +8,7 @@ */ import React, { FC, PropsWithChildren } from 'react'; -import { ComponentStory } from '@storybook/react'; +import type { StoryFn } from '@storybook/react'; import { Render } from '@kbn/presentation-util-plugin/public/__stories__'; import { getPartitionVisRenderer } from '../expression_renderers'; import { ChartTypes, PartitionChartProps } from '../../common/types'; @@ -27,7 +27,7 @@ type Props = { syncColors: PartitionChartProps['syncColors']; } & PartitionChartProps['visConfig']; -const PartitionVis: ComponentStory>> = ({ +const PartitionVis: StoryFn>> = ({ visType, syncColors, children, diff --git a/src/platform/plugins/shared/chart_expressions/expression_partition_vis/public/__stories__/pie_vis_renderer.stories.tsx b/src/platform/plugins/shared/chart_expressions/expression_partition_vis/public/__stories__/pie_vis_renderer.stories.tsx index 52a3586e5882..c8967f0ba106 100644 --- a/src/platform/plugins/shared/chart_expressions/expression_partition_vis/public/__stories__/pie_vis_renderer.stories.tsx +++ b/src/platform/plugins/shared/chart_expressions/expression_partition_vis/public/__stories__/pie_vis_renderer.stories.tsx @@ -8,7 +8,7 @@ */ import React, { FC, PropsWithChildren } from 'react'; -import { ComponentStory } from '@storybook/react'; +import type { StoryFn } from '@storybook/react'; import { Render } from '@kbn/presentation-util-plugin/public/__stories__'; import { getPartitionVisRenderer } from '../expression_renderers'; import { ChartTypes, PartitionChartProps } from '../../common/types'; @@ -27,7 +27,7 @@ type Props = { syncColors: PartitionChartProps['syncColors']; } & PartitionChartProps['visConfig']; -const PartitionVis: ComponentStory>> = ({ +const PartitionVis: StoryFn>> = ({ visType, syncColors, children, diff --git a/src/platform/plugins/shared/chart_expressions/expression_partition_vis/public/__stories__/shared/arg_types.ts b/src/platform/plugins/shared/chart_expressions/expression_partition_vis/public/__stories__/shared/arg_types.ts index 272828aaf74b..aa36ff8fa648 100644 --- a/src/platform/plugins/shared/chart_expressions/expression_partition_vis/public/__stories__/shared/arg_types.ts +++ b/src/platform/plugins/shared/chart_expressions/expression_partition_vis/public/__stories__/shared/arg_types.ts @@ -8,7 +8,7 @@ */ import { LegendValue, Position } from '@elastic/charts'; -import { ArgTypes } from '@storybook/addons'; +import type { ArgTypes } from '@storybook/react'; import { EmptySizeRatios, LegendDisplay } from '../../../common'; import { ChartTypes } from '../../../common/types'; @@ -19,7 +19,7 @@ export const argTypes: ArgTypes = { name: `${visConfigName}.addTooltip`, description: 'Add tooltip on hover', type: { name: 'boolean', required: false }, - table: { type: { summary: 'boolean' }, defaultValue: { summary: true } }, + table: { type: { summary: 'boolean' } }, control: { type: 'boolean' }, }, legendDisplay: { @@ -42,7 +42,7 @@ export const argTypes: ArgTypes = { name: `${visConfigName}.truncateLegend`, description: 'Truncate too long legend', type: { name: 'boolean', required: false }, - table: { type: { summary: 'boolean' }, defaultValue: { summary: true } }, + table: { type: { summary: 'boolean' } }, control: { type: 'boolean' }, }, maxLegendLines: { @@ -112,14 +112,14 @@ export const pieDonutArgTypes: ArgTypes = { name: `${visConfigName}.isDonut`, description: 'Render a donut chart', type: { name: 'boolean', required: false }, - table: { type: { summary: 'boolean' }, defaultValue: { summary: false } }, + table: { type: { summary: 'boolean' } }, control: { type: 'boolean' }, }, emptySizeRatio: { name: `${visConfigName}.emptySizeRatio`, description: 'The hole size of the donut chart', type: { name: 'number', required: false }, - table: { type: { summary: 'number' }, defaultValue: { summary: EmptySizeRatios.SMALL } }, + table: { type: { summary: 'number' } }, options: [EmptySizeRatios.SMALL, EmptySizeRatios.MEDIUM, EmptySizeRatios.LARGE], control: { type: 'select' }, }, @@ -127,28 +127,28 @@ export const pieDonutArgTypes: ArgTypes = { name: `${visConfigName}.distinctColors`, description: 'Enable distinct colors', type: { name: 'boolean', required: false }, - table: { type: { summary: 'boolean' }, defaultValue: { summary: false } }, + table: { type: { summary: 'boolean' } }, control: { type: 'boolean' }, }, respectSourceOrder: { name: `${visConfigName}.respectSourceOrder`, description: 'Save default order of the incomming data', type: { name: 'boolean', required: false }, - table: { type: { summary: 'boolean' }, defaultValue: { summary: true } }, + table: { type: { summary: 'boolean' } }, control: { type: 'boolean' }, }, startFromSecondLargestSlice: { name: `${visConfigName}.startFromSecondLargestSlice`, description: 'Start placement of slices from the second largest slice', type: { name: 'boolean', required: false }, - table: { type: { summary: 'boolean' }, defaultValue: { summary: true } }, + table: { type: { summary: 'boolean' } }, control: { type: 'boolean' }, }, nestedLegend: { name: `${visConfigName}.nestedLegend`, description: 'Enable nested legend', type: { name: 'boolean', required: false }, - table: { type: { summary: 'boolean' }, defaultValue: { summary: false } }, + table: { type: { summary: 'boolean' } }, control: { type: 'boolean' }, }, }; @@ -169,7 +169,7 @@ export const treemapArgTypes: ArgTypes = { name: `${visConfigName}.nestedLegend`, description: 'Enable nested legend', type: { name: 'boolean', required: false }, - table: { type: { summary: 'boolean' }, defaultValue: { summary: false } }, + table: { type: { summary: 'boolean' } }, control: { type: 'boolean' }, }, }; @@ -190,7 +190,7 @@ export const mosaicArgTypes: ArgTypes = { name: `${visConfigName}.nestedLegend`, description: 'Enable nested legend', type: { name: 'boolean', required: false }, - table: { type: { summary: 'boolean' }, defaultValue: { summary: false } }, + table: { type: { summary: 'boolean' } }, control: { type: 'boolean' }, }, }; diff --git a/src/platform/plugins/shared/chart_expressions/expression_partition_vis/public/__stories__/treemap_vis_renderer.stories.tsx b/src/platform/plugins/shared/chart_expressions/expression_partition_vis/public/__stories__/treemap_vis_renderer.stories.tsx index 337f0d75a534..647f810f6050 100644 --- a/src/platform/plugins/shared/chart_expressions/expression_partition_vis/public/__stories__/treemap_vis_renderer.stories.tsx +++ b/src/platform/plugins/shared/chart_expressions/expression_partition_vis/public/__stories__/treemap_vis_renderer.stories.tsx @@ -8,7 +8,7 @@ */ import React, { FC, PropsWithChildren } from 'react'; -import { ComponentStory } from '@storybook/react'; +import type { StoryFn } from '@storybook/react'; import { Render } from '@kbn/presentation-util-plugin/public/__stories__'; import { getPartitionVisRenderer } from '../expression_renderers'; import { ChartTypes, PartitionChartProps } from '../../common/types'; @@ -27,7 +27,7 @@ type Props = { syncColors: PartitionChartProps['syncColors']; } & PartitionChartProps['visConfig']; -const PartitionVis: ComponentStory>> = ({ +const PartitionVis: StoryFn>> = ({ visType, syncColors, children, diff --git a/src/platform/plugins/shared/chart_expressions/expression_partition_vis/public/__stories__/waffle_vis_renderer.stories.tsx b/src/platform/plugins/shared/chart_expressions/expression_partition_vis/public/__stories__/waffle_vis_renderer.stories.tsx index 8a8a9e1b7084..d91189c6fe26 100644 --- a/src/platform/plugins/shared/chart_expressions/expression_partition_vis/public/__stories__/waffle_vis_renderer.stories.tsx +++ b/src/platform/plugins/shared/chart_expressions/expression_partition_vis/public/__stories__/waffle_vis_renderer.stories.tsx @@ -8,7 +8,7 @@ */ import React, { FC, PropsWithChildren } from 'react'; -import { ComponentStory } from '@storybook/react'; +import type { StoryFn } from '@storybook/react'; import { Render } from '@kbn/presentation-util-plugin/public/__stories__'; import { getPartitionVisRenderer } from '../expression_renderers'; import { ChartTypes, PartitionChartProps } from '../../common/types'; @@ -27,7 +27,7 @@ type Props = { syncColors: PartitionChartProps['syncColors']; } & PartitionChartProps['visConfig']; -const PartitionVis: ComponentStory>> = ({ +const PartitionVis: StoryFn>> = ({ visType, syncColors, children, diff --git a/src/platform/plugins/shared/chart_expressions/expression_tagcloud/public/__stories__/tagcloud_renderer.stories.tsx b/src/platform/plugins/shared/chart_expressions/expression_tagcloud/public/__stories__/tagcloud_renderer.stories.tsx index 6d6bfc039c55..19a1890f0b23 100644 --- a/src/platform/plugins/shared/chart_expressions/expression_tagcloud/public/__stories__/tagcloud_renderer.stories.tsx +++ b/src/platform/plugins/shared/chart_expressions/expression_tagcloud/public/__stories__/tagcloud_renderer.stories.tsx @@ -8,7 +8,6 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { Render } from '@kbn/presentation-util-plugin/public/__stories__'; import { from } from 'rxjs'; import { tagcloudRenderer } from '../expression_renderers'; @@ -81,17 +80,22 @@ const getStartDeps = (() => ({ }, })) as ExpressionTagcloudRendererDependencies['getStartDeps']; -storiesOf('renderers/tag_cloud_vis', module) - .add('Default', () => { - return ( - tagcloudRenderer({ getStartDeps })} - config={config} - {...containerSize} - /> - ); - }) - .add('With log scale', () => { +export default { + title: 'renderers/tag_cloud_vis', +}; + +export const Default = () => { + return ( + tagcloudRenderer({ getStartDeps })} + config={config} + {...containerSize} + /> + ); +}; + +export const WithLogScale = { + render: () => { return ( tagcloudRenderer({ getStartDeps })} @@ -99,8 +103,13 @@ storiesOf('renderers/tag_cloud_vis', module) {...containerSize} /> ); - }) - .add('With square root scale', () => { + }, + + name: 'With log scale', +}; + +export const WithSquareRootScale = { + render: () => { return ( tagcloudRenderer({ getStartDeps })} @@ -108,8 +117,13 @@ storiesOf('renderers/tag_cloud_vis', module) {...containerSize} /> ); - }) - .add('With right angled orientation', () => { + }, + + name: 'With square root scale', +}; + +export const WithRightAngledOrientation = { + render: () => { return ( tagcloudRenderer({ getStartDeps })} @@ -120,8 +134,13 @@ storiesOf('renderers/tag_cloud_vis', module) {...containerSize} /> ); - }) - .add('With multiple orientations', () => { + }, + + name: 'With right angled orientation', +}; + +export const WithMultipleOrientations = { + render: () => { return ( tagcloudRenderer({ getStartDeps })} @@ -132,8 +151,13 @@ storiesOf('renderers/tag_cloud_vis', module) {...containerSize} /> ); - }) - .add('With hidden label', () => { + }, + + name: 'With multiple orientations', +}; + +export const WithHiddenLabel = { + render: () => { return ( tagcloudRenderer({ getStartDeps })} @@ -141,8 +165,13 @@ storiesOf('renderers/tag_cloud_vis', module) {...containerSize} /> ); - }) - .add('With empty results', () => { + }, + + name: 'With hidden label', +}; + +export const WithEmptyResults = { + render: () => { return ( tagcloudRenderer({ getStartDeps })} @@ -150,4 +179,7 @@ storiesOf('renderers/tag_cloud_vis', module) {...containerSize} /> ); - }); + }, + + name: 'With empty results', +}; diff --git a/src/platform/plugins/shared/custom_integrations/storybook/decorator.tsx b/src/platform/plugins/shared/custom_integrations/storybook/decorator.tsx index 402ac98c0c77..5200e4b7c9c3 100644 --- a/src/platform/plugins/shared/custom_integrations/storybook/decorator.tsx +++ b/src/platform/plugins/shared/custom_integrations/storybook/decorator.tsx @@ -9,7 +9,7 @@ import React from 'react'; -import { DecoratorFn } from '@storybook/react'; +import { Decorator } from '@storybook/react'; import { I18nProvider } from '@kbn/i18n-react'; import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common/eui_styled_components'; @@ -20,20 +20,18 @@ import { CustomIntegrationsServicesProvider } from '../public/services'; * Returns a Storybook Decorator that provides both the `I18nProvider` and access to `PluginServices` * for components rendered in Storybook. */ -export const getCustomIntegrationsContextDecorator = - (): DecoratorFn => - (story, { globals }) => { - const ContextProvider = getCustomIntegrationsContextProvider(); - const darkMode = globals.euiTheme === 'v8.dark' || globals.euiTheme === 'v7.dark'; +export const getCustomIntegrationsContextDecorator: Decorator = (story, { globals }) => { + const ContextProvider = getCustomIntegrationsContextProvider(); + const darkMode = globals.euiTheme === 'v8.dark' || globals.euiTheme === 'v7.dark'; - return ( - - - {story()} - - - ); - }; + return ( + + + {story()} + + + ); +}; /** * Prepares `PluginServices` for use in Storybook and returns a React `Context.Provider` element diff --git a/src/platform/plugins/shared/custom_integrations/storybook/manager.ts b/src/platform/plugins/shared/custom_integrations/storybook/manager.ts index c6d9098e57e6..2630471cabb1 100644 --- a/src/platform/plugins/shared/custom_integrations/storybook/manager.ts +++ b/src/platform/plugins/shared/custom_integrations/storybook/manager.ts @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { addons } from '@storybook/addons'; +import { addons } from '@storybook/manager-api'; import { create } from '@storybook/theming'; import { PANEL_ID } from '@storybook/addon-actions'; diff --git a/src/platform/plugins/shared/custom_integrations/storybook/preview.tsx b/src/platform/plugins/shared/custom_integrations/storybook/preview.tsx index 1411b06bbd20..224ac60d5786 100644 --- a/src/platform/plugins/shared/custom_integrations/storybook/preview.tsx +++ b/src/platform/plugins/shared/custom_integrations/storybook/preview.tsx @@ -8,11 +8,11 @@ */ import React from 'react'; -import { Title, Subtitle, Description, Primary, Stories } from '@storybook/addon-docs/blocks'; +import { Title, Subtitle, Description, Primary, Stories } from '@storybook/blocks'; import { getCustomIntegrationsContextDecorator } from './decorator'; -export const decorators = [getCustomIntegrationsContextDecorator()]; +export const decorators = [getCustomIntegrationsContextDecorator]; export const parameters = { docs: { diff --git a/src/platform/plugins/shared/data/public/search/session/session_indicator/search_session_indicator/search_session_indicator.stories.tsx b/src/platform/plugins/shared/data/public/search/session/session_indicator/search_session_indicator/search_session_indicator.stories.tsx index 5dfbda019e4f..f0bb5eb9faef 100644 --- a/src/platform/plugins/shared/data/public/search/session/session_indicator/search_session_indicator/search_session_indicator.stories.tsx +++ b/src/platform/plugins/shared/data/public/search/session/session_indicator/search_session_indicator/search_session_indicator.stories.tsx @@ -8,11 +8,14 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { SearchSessionIndicator } from './search_session_indicator'; import { SearchSessionState } from '../../search_session_state'; -storiesOf('components/SearchSessionIndicator', module).add('default', () => { +export default { + title: 'components/SearchSessionIndicator', +}; + +const DefaultComponent = () => { const [searchSessionName, setSearchSessionName] = React.useState('Discover session'); const saveSearchSessionNameFn = (newName: string) => @@ -81,4 +84,9 @@ storiesOf('components/SearchSessionIndicator', module).add('default', () => { ); -}); +}; + +export const Default = { + name: 'default', + render: () => , +}; diff --git a/src/platform/plugins/shared/discover/.storybook/main.js b/src/platform/plugins/shared/discover/.storybook/main.ts similarity index 86% rename from src/platform/plugins/shared/discover/.storybook/main.js rename to src/platform/plugins/shared/discover/.storybook/main.ts index aa82846a1c08..935d2e4caaab 100644 --- a/src/platform/plugins/shared/discover/.storybook/main.js +++ b/src/platform/plugins/shared/discover/.storybook/main.ts @@ -6,10 +6,6 @@ * your election, the "Elastic License 2.0", the "GNU Affero General Public * License v3.0 only", or the "Server Side Public License, v 1". */ - import { defaultConfig } from '@kbn/storybook'; -module.exports = { - ...defaultConfig, - stories: ['../**/*.stories.tsx'], -}; +module.exports = defaultConfig; diff --git a/src/platform/plugins/shared/discover/public/components/common/error_callout.stories.tsx b/src/platform/plugins/shared/discover/public/components/common/error_callout.stories.tsx index 689b8ebb1f0e..4337d1ae0503 100644 --- a/src/platform/plugins/shared/discover/public/components/common/error_callout.stories.tsx +++ b/src/platform/plugins/shared/discover/public/components/common/error_callout.stories.tsx @@ -8,22 +8,24 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { DiscoverServicesProvider } from '../../__mocks__/__storybook_mocks__/with_discover_services'; import { ErrorCallout } from './error_callout'; -storiesOf('components/common/ErrorCallout', module).add('Error Callout', () => { +export const _ErrorCallout = () => { const sampleError = new Error('This is a sample error message'); return ( ); -}); +}; -storiesOf('components/common/ErrorCallout', module).add( - 'Error Callout with a very long error message without whitespace', - () => { +export default { + title: 'components/common/ErrorCallout', +}; + +export const ErrorCalloutWithAVeryLongErrorMessageWithoutWhitespace = { + render: () => { const sampleError = new Error( 'ThisIsASampleErrorMessageThisIsASampleErrorMessageThisIsASampleErrorMessageThisIsASampleErrorMessageThisIsASampleErrorMessage' ); @@ -32,5 +34,7 @@ storiesOf('components/common/ErrorCallout', module).add( ); - } -); + }, + + name: 'Error Callout with a very long error message without whitespace', +}; diff --git a/src/platform/plugins/shared/es_ui_shared/.storybook/manager.ts b/src/platform/plugins/shared/es_ui_shared/.storybook/manager.ts index 566332bc6a3e..cc25f64a4f6d 100644 --- a/src/platform/plugins/shared/es_ui_shared/.storybook/manager.ts +++ b/src/platform/plugins/shared/es_ui_shared/.storybook/manager.ts @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { addons } from '@storybook/addons'; +import { addons } from '@storybook/manager-api'; import { create } from '@storybook/theming'; import { PANEL_ID } from '@storybook/addon-actions'; diff --git a/src/platform/plugins/shared/es_ui_shared/static/forms/hook_form_lib/components/form.stories.tsx b/src/platform/plugins/shared/es_ui_shared/static/forms/hook_form_lib/components/form.stories.tsx index 8490465a3249..4d978670b33f 100644 --- a/src/platform/plugins/shared/es_ui_shared/static/forms/hook_form_lib/components/form.stories.tsx +++ b/src/platform/plugins/shared/es_ui_shared/static/forms/hook_form_lib/components/form.stories.tsx @@ -8,12 +8,11 @@ */ import React from 'react'; -import { ComponentMeta } from '@storybook/react'; +import { Meta } from '@storybook/react'; import { EuiButton } from '@elastic/eui'; import { action } from '@storybook/addon-actions'; import { TextField } from '../../components'; -import { STORYBOOK_SECTION } from '../constants'; import { FormHook, FieldConfig } from '../types'; import { useForm } from '../hooks/use_form'; import { Form, Props as FormProps } from './form'; @@ -22,13 +21,13 @@ import { formStories } from './__stories__'; export default { component: Form, - title: `${STORYBOOK_SECTION}/Form`, + title: 'Form lib/Form', subcomponents: { UseField }, decorators: [(Story) =>
{Story()}
], parameters: { controls: { hideNoControlsWarning: true }, }, -} as ComponentMeta; +} as Meta; type Args = Pick; diff --git a/src/platform/plugins/shared/es_ui_shared/static/forms/hook_form_lib/components/use_array.stories.tsx b/src/platform/plugins/shared/es_ui_shared/static/forms/hook_form_lib/components/use_array.stories.tsx index fbaaa30218ff..0f7245fd3fb2 100644 --- a/src/platform/plugins/shared/es_ui_shared/static/forms/hook_form_lib/components/use_array.stories.tsx +++ b/src/platform/plugins/shared/es_ui_shared/static/forms/hook_form_lib/components/use_array.stories.tsx @@ -8,9 +8,8 @@ */ import React from 'react'; -import { ComponentMeta } from '@storybook/react'; +import { Meta } from '@storybook/react'; -import { STORYBOOK_SECTION } from '../constants'; import { UseArray } from './use_array'; import { useArrayStories } from './__stories__'; @@ -18,7 +17,7 @@ const { UseArrayBasic, UseArrayReorder, UseArrayComplex, UseArrayDynamicData } = export default { component: UseArray, - title: `${STORYBOOK_SECTION}/UseArray`, + title: 'Form lib/UseArray', decorators: [ (Story) => { return ( @@ -28,6 +27,6 @@ export default { ); }, ], -} as ComponentMeta; +} as Meta; export { UseArrayBasic, UseArrayReorder, UseArrayComplex, UseArrayDynamicData }; diff --git a/src/platform/plugins/shared/es_ui_shared/static/forms/hook_form_lib/components/use_field.stories.tsx b/src/platform/plugins/shared/es_ui_shared/static/forms/hook_form_lib/components/use_field.stories.tsx index 1e655fdaff8a..8cb3dce6dd6e 100644 --- a/src/platform/plugins/shared/es_ui_shared/static/forms/hook_form_lib/components/use_field.stories.tsx +++ b/src/platform/plugins/shared/es_ui_shared/static/forms/hook_form_lib/components/use_field.stories.tsx @@ -8,11 +8,10 @@ */ import React from 'react'; -import { ComponentMeta } from '@storybook/react'; +import { Meta } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { EuiButton, EuiSpacer } from '@elastic/eui'; -import { STORYBOOK_SECTION } from '../constants'; import { FormHook } from '../types'; import { useForm } from '../hooks/use_form'; @@ -37,7 +36,7 @@ const submitForm = async (form: FormHook) => { export default { component: UseField, - title: `${STORYBOOK_SECTION}/UseField`, + title: 'Form lib/UseField', decorators: [ (Story) => { const { form } = useForm(); @@ -54,6 +53,6 @@ export default { ); }, ], -} as ComponentMeta; +} as Meta; export { UseFieldFieldTypes, UseFieldChangeListeners }; diff --git a/src/platform/plugins/shared/es_ui_shared/static/forms/hook_form_lib/components/use_multi_field.stories.tsx b/src/platform/plugins/shared/es_ui_shared/static/forms/hook_form_lib/components/use_multi_field.stories.tsx index 3bf19add0267..441758506b32 100644 --- a/src/platform/plugins/shared/es_ui_shared/static/forms/hook_form_lib/components/use_multi_field.stories.tsx +++ b/src/platform/plugins/shared/es_ui_shared/static/forms/hook_form_lib/components/use_multi_field.stories.tsx @@ -8,11 +8,10 @@ */ import React from 'react'; -import { ComponentMeta } from '@storybook/react'; +import { Meta } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { EuiButton, EuiSpacer } from '@elastic/eui'; -import { STORYBOOK_SECTION } from '../constants'; import { FormHook } from '../types'; import { useForm } from '../hooks/use_form'; @@ -38,7 +37,7 @@ const submitForm = async (form: FormHook) => { export default { component: UseMultiFields, - title: `${STORYBOOK_SECTION}/UseMultiFields`, + title: 'Form lib/UseMultiFields', decorators: [ (Story) => { const { form } = useForm(); @@ -55,6 +54,6 @@ export default { ); }, ], -} as ComponentMeta; +} as Meta>; export { UseMultiFieldBasic }; diff --git a/src/platform/plugins/shared/es_ui_shared/static/forms/hook_form_lib/constants.ts b/src/platform/plugins/shared/es_ui_shared/static/forms/hook_form_lib/constants.ts index 5765e4ddd22f..dc2476f3df73 100644 --- a/src/platform/plugins/shared/es_ui_shared/static/forms/hook_form_lib/constants.ts +++ b/src/platform/plugins/shared/es_ui_shared/static/forms/hook_form_lib/constants.ts @@ -37,5 +37,3 @@ export const VALIDATION_TYPES = { /** If the field value is an Array, this error type would be returned if an _item_ of the array is invalid */ ARRAY_ITEM: 'arrayItem', }; - -export const STORYBOOK_SECTION = 'Form lib'; diff --git a/src/platform/plugins/shared/expression_error/public/components/debug/__stories__/debug.stories.tsx b/src/platform/plugins/shared/expression_error/public/components/debug/__stories__/debug.stories.tsx index 04603b0428a6..f0a05e611907 100644 --- a/src/platform/plugins/shared/expression_error/public/components/debug/__stories__/debug.stories.tsx +++ b/src/platform/plugins/shared/expression_error/public/components/debug/__stories__/debug.stories.tsx @@ -8,10 +8,19 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { Debug } from '../debug'; import { largePayload, smallPayload } from './helpers'; -storiesOf('components/Elements/Debug', module) - .add('small payload', () => ) - .add('large payload', () => ); +export default { + title: 'components/Elements/Debug', +}; + +export const SmallPayload = { + render: () => , + name: 'small payload', +}; + +export const LargePayload = { + render: () => , + name: 'large payload', +}; diff --git a/src/platform/plugins/shared/expression_error/public/expression_renderers/__stories__/error_renderer.stories.tsx b/src/platform/plugins/shared/expression_error/public/expression_renderers/__stories__/error_renderer.stories.tsx index ea28ff903582..8f33b127f84e 100644 --- a/src/platform/plugins/shared/expression_error/public/expression_renderers/__stories__/error_renderer.stories.tsx +++ b/src/platform/plugins/shared/expression_error/public/expression_renderers/__stories__/error_renderer.stories.tsx @@ -8,16 +8,22 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; -import { coreMock } from '@kbn/core/public/mocks'; import { Render } from '@kbn/presentation-util-plugin/public/__stories__'; +import { coreMock } from '@kbn/core/public/mocks'; import { getErrorRenderer } from '../error_renderer'; -storiesOf('renderers/error', module).add('default', () => { - const thrownError = new Error('There was an error'); - const config = { - error: thrownError, - }; +export default { + title: 'renderers/error', +}; - return ; -}); +export const Default = { + render: () => { + const thrownError = new Error('There was an error'); + const config = { + error: thrownError, + }; + return ; + }, + + name: 'default', +}; diff --git a/src/platform/plugins/shared/expression_image/public/expression_renderers/__stories__/image_renderer.stories.tsx b/src/platform/plugins/shared/expression_image/public/expression_renderers/__stories__/image_renderer.stories.tsx index 5c2156f5382c..2d4f5db24c50 100644 --- a/src/platform/plugins/shared/expression_image/public/expression_renderers/__stories__/image_renderer.stories.tsx +++ b/src/platform/plugins/shared/expression_image/public/expression_renderers/__stories__/image_renderer.stories.tsx @@ -8,9 +8,9 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { coreMock } from '@kbn/core/public/mocks'; import { Render } from '@kbn/presentation-util-plugin/public/__stories__'; +import type { Meta } from '@storybook/react'; import { elasticLogo } from '@kbn/expression-utils'; import { getImageRenderer } from '../image_renderer'; import { ImageMode } from '../../../common'; @@ -31,6 +31,14 @@ const Renderer = () => { ); }; -storiesOf('renderers/image', module).add('default', (_, props) => { - return ; -}); +export default { + title: 'renderers/image', +}; + +export const Default = { + render: (_, props) => { + return ; + }, + + name: 'default', +} as Meta; diff --git a/src/platform/plugins/shared/expression_metric/public/expression_renderers/__stories__/metric_renderer.stories.tsx b/src/platform/plugins/shared/expression_metric/public/expression_renderers/__stories__/metric_renderer.stories.tsx index 9c8e5d17dc3b..4fe8ac9aec33 100644 --- a/src/platform/plugins/shared/expression_metric/public/expression_renderers/__stories__/metric_renderer.stories.tsx +++ b/src/platform/plugins/shared/expression_metric/public/expression_renderers/__stories__/metric_renderer.stories.tsx @@ -8,7 +8,6 @@ */ import React, { CSSProperties } from 'react'; -import { storiesOf } from '@storybook/react'; import { coreMock } from '@kbn/core/public/mocks'; import { Style } from '@kbn/expressions-plugin/common'; import { Render } from '@kbn/presentation-util-plugin/public/__stories__'; @@ -38,10 +37,14 @@ const metricFontSpec: CSSProperties = { color: '#b83c6f', }; +export default { + title: 'renderers/Metric', +}; + const core = coreMock.createStart(); -storiesOf('renderers/Metric', module) - .add('with null metric', () => { +export const WithNullMetric = { + render: () => { const config: MetricRendererConfig = { metric: null, metricFont: {} as Style, @@ -50,8 +53,13 @@ storiesOf('renderers/Metric', module) metricFormat: '', }; return ; - }) - .add('with number metric', () => { + }, + + name: 'with null metric', +}; + +export const WithNumberMetric = { + render: () => { const config: MetricRendererConfig = { metric: '12345.6789', metricFont: metricFontSpec as Style, @@ -60,8 +68,13 @@ storiesOf('renderers/Metric', module) metricFormat: '', }; return ; - }) - .add('with string metric', () => { + }, + + name: 'with number metric', +}; + +export const WithStringMetric = { + render: () => { const config: MetricRendererConfig = { metric: '$12.34', metricFont: metricFontSpec as Style, @@ -70,8 +83,13 @@ storiesOf('renderers/Metric', module) metricFormat: '', }; return ; - }) - .add('with label', () => { + }, + + name: 'with string metric', +}; + +export const WithLabel = { + render: () => { const config: MetricRendererConfig = { metric: '$12.34', metricFont: metricFontSpec as Style, @@ -80,8 +98,13 @@ storiesOf('renderers/Metric', module) metricFormat: '', }; return ; - }) - .add('with number metric and a specified format', () => { + }, + + name: 'with label', +}; + +export const WithNumberMetricAndASpecifiedFormat = { + render: () => { const config: MetricRendererConfig = { metric: '-0.0024', metricFont: metricFontSpec as Style, @@ -90,8 +113,13 @@ storiesOf('renderers/Metric', module) metricFormat: '0.00%', }; return ; - }) - .add('with formatted string metric and a specified format', () => { + }, + + name: 'with number metric and a specified format', +}; + +export const WithFormattedStringMetricAndASpecifiedFormat = { + render: () => { const config: MetricRendererConfig = { metric: '$10000000.00', metricFont: metricFontSpec as Style, @@ -100,8 +128,13 @@ storiesOf('renderers/Metric', module) metricFormat: '$0a', }; return ; - }) - .add('with invalid metricFont', () => { + }, + + name: 'with formatted string metric and a specified format', +}; + +export const WithInvalidMetricFont = { + render: () => { const config: MetricRendererConfig = { metric: '$10000000.00', metricFont: metricFontSpec as Style, @@ -110,4 +143,7 @@ storiesOf('renderers/Metric', module) metricFormat: '$0a', }; return ; - }); + }, + + name: 'with invalid metricFont', +}; diff --git a/src/platform/plugins/shared/expression_repeat_image/public/expression_renderers/__stories__/repeat_image_renderer.stories.tsx b/src/platform/plugins/shared/expression_repeat_image/public/expression_renderers/__stories__/repeat_image_renderer.stories.tsx index a8a44ce0574e..417f2a3257a7 100644 --- a/src/platform/plugins/shared/expression_repeat_image/public/expression_renderers/__stories__/repeat_image_renderer.stories.tsx +++ b/src/platform/plugins/shared/expression_repeat_image/public/expression_renderers/__stories__/repeat_image_renderer.stories.tsx @@ -8,9 +8,9 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { coreMock } from '@kbn/core/public/mocks'; import { Render } from '@kbn/presentation-util-plugin/public/__stories__'; +import type { Meta } from '@storybook/react'; import { elasticLogo, elasticOutline } from '@kbn/expression-utils'; import { getRepeatImageRenderer } from '../repeat_image_renderer'; @@ -32,6 +32,12 @@ const Renderer = () => { ); }; -storiesOf('enderers/repeatImage', module).add('default', (_, props) => , { - decorators: [], -}); +export default { + title: 'enderers/repeatImage', +}; + +export const Default = { + render: (_, props) => , + + name: 'default', +} as Meta; diff --git a/src/platform/plugins/shared/expression_reveal_image/public/expression_renderers/__stories__/reveal_image_renderer.stories.tsx b/src/platform/plugins/shared/expression_reveal_image/public/expression_renderers/__stories__/reveal_image_renderer.stories.tsx index 3c98ca6c4da4..ef0ccd5b7ccc 100644 --- a/src/platform/plugins/shared/expression_reveal_image/public/expression_renderers/__stories__/reveal_image_renderer.stories.tsx +++ b/src/platform/plugins/shared/expression_reveal_image/public/expression_renderers/__stories__/reveal_image_renderer.stories.tsx @@ -8,10 +8,10 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { coreMock } from '@kbn/core/public/mocks'; -import { elasticOutline, elasticLogo } from '@kbn/expression-utils'; import { Render } from '@kbn/presentation-util-plugin/public/__stories__'; +import type { Meta } from '@storybook/react'; +import { elasticOutline, elasticLogo } from '@kbn/expression-utils'; import { getRevealImageRenderer } from '..'; import { Origin } from '../../../common/types/expression_functions'; @@ -26,6 +26,12 @@ const Renderer = () => { return ; }; -storiesOf('renderers/revealImage', module).add('default', (_, props) => , { - decorators: [], -}); +export default { + title: 'renderers/revealImage', +}; + +export const Default = { + render: (_, props) => , + + name: 'default', +} as Meta; diff --git a/src/platform/plugins/shared/expression_shape/public/expression_renderers/__stories__/progress_renderer.stories.tsx b/src/platform/plugins/shared/expression_shape/public/expression_renderers/__stories__/progress_renderer.stories.tsx index 79e975bf2d46..5ace5dd04991 100644 --- a/src/platform/plugins/shared/expression_shape/public/expression_renderers/__stories__/progress_renderer.stories.tsx +++ b/src/platform/plugins/shared/expression_shape/public/expression_renderers/__stories__/progress_renderer.stories.tsx @@ -8,28 +8,35 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { Render } from '@kbn/presentation-util-plugin/public/__stories__'; import { coreMock } from '@kbn/core/public/mocks'; import { getProgressRenderer } from '../progress_renderer'; import { Progress } from '../../../common'; -storiesOf('renderers/progress', module).add('default', () => { - const config = { - barColor: '#bc1234', - barWeight: 20, - font: { - css: '', - spec: {}, - type: 'style' as 'style', - }, - label: '66%', - max: 1, - shape: Progress.UNICORN, - value: 0.66, - valueColor: '#000', - valueWeight: 15, - }; +export default { + title: 'renderers/progress', +}; - return ; -}); +export const Default = { + render: () => { + const config = { + barColor: '#bc1234', + barWeight: 20, + font: { + css: '', + spec: {}, + type: 'style' as 'style', + }, + label: '66%', + max: 1, + shape: Progress.UNICORN, + value: 0.66, + valueColor: '#000', + valueWeight: 15, + }; + + return ; + }, + + name: 'default', +}; diff --git a/src/platform/plugins/shared/expression_shape/public/expression_renderers/__stories__/shape_renderer.stories.tsx b/src/platform/plugins/shared/expression_shape/public/expression_renderers/__stories__/shape_renderer.stories.tsx index f69f5d765484..dd1c53bf8984 100644 --- a/src/platform/plugins/shared/expression_shape/public/expression_renderers/__stories__/shape_renderer.stories.tsx +++ b/src/platform/plugins/shared/expression_shape/public/expression_renderers/__stories__/shape_renderer.stories.tsx @@ -8,21 +8,28 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { coreMock } from '@kbn/core/public/mocks'; import { Render } from '@kbn/presentation-util-plugin/public/__stories__'; import { getShapeRenderer } from '..'; import { Shape } from '../../../common/types'; -storiesOf('renderers/shape', module).add('default', () => { - const config = { - type: 'shape' as 'shape', - border: '#FFEEDD', - borderWidth: 8, - shape: Shape.BOOKMARK, - fill: '#112233', - maintainAspect: true, - }; +export default { + title: 'renderers/shape', +}; - return ; -}); +export const Default = { + render: () => { + const config = { + type: 'shape' as 'shape', + border: '#FFEEDD', + borderWidth: 8, + shape: Shape.BOOKMARK, + fill: '#112233', + maintainAspect: true, + }; + + return ; + }, + + name: 'default', +}; diff --git a/src/platform/plugins/shared/home/.storybook/manager.ts b/src/platform/plugins/shared/home/.storybook/manager.ts index 1d26facb8444..40dfbd048e00 100644 --- a/src/platform/plugins/shared/home/.storybook/manager.ts +++ b/src/platform/plugins/shared/home/.storybook/manager.ts @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { addons } from '@storybook/addons'; +import { addons } from '@storybook/manager-api'; import { create } from '@storybook/theming'; import { PANEL_ID } from '@storybook/addon-actions'; diff --git a/src/platform/plugins/shared/kibana_react/.storybook/manager.ts b/src/platform/plugins/shared/kibana_react/.storybook/manager.ts index 7c27b5829189..056b67131da1 100644 --- a/src/platform/plugins/shared/kibana_react/.storybook/manager.ts +++ b/src/platform/plugins/shared/kibana_react/.storybook/manager.ts @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { addons } from '@storybook/addons'; +import { addons } from '@storybook/manager-api'; import { create } from '@storybook/theming'; import { PANEL_ID } from '@storybook/addon-actions'; diff --git a/src/platform/plugins/shared/kibana_react/public/url_template_editor/url_template_editor.stories.tsx b/src/platform/plugins/shared/kibana_react/public/url_template_editor/url_template_editor.stories.tsx index f61bc39865af..9c25eeb3e206 100644 --- a/src/platform/plugins/shared/kibana_react/public/url_template_editor/url_template_editor.stories.tsx +++ b/src/platform/plugins/shared/kibana_react/public/url_template_editor/url_template_editor.stories.tsx @@ -7,21 +7,29 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import React from 'react'; import { CodeEditor } from '@kbn/code-editor'; import { UrlTemplateEditor } from './url_template_editor'; -storiesOf('UrlTemplateEditor', module) - .add('default', () => ( +export default { + title: 'UrlTemplateEditor', +}; + +export const Default = { + render: () => ( - )) - .add('with variables', () => ( + ), + + name: 'default', +}; + +export const WithVariables = { + render: () => ( - )); + ), + + name: 'with variables', +}; diff --git a/src/platform/plugins/shared/presentation_util/public/__stories__/wait_for.tsx b/src/platform/plugins/shared/presentation_util/public/__stories__/wait_for.tsx index c8b9c92cc4ae..b1c198b988e2 100644 --- a/src/platform/plugins/shared/presentation_util/public/__stories__/wait_for.tsx +++ b/src/platform/plugins/shared/presentation_util/public/__stories__/wait_for.tsx @@ -9,12 +9,12 @@ import React, { useState, useEffect, useRef, ReactElement } from 'react'; import { act } from 'react-test-renderer'; -import { Story } from '@storybook/react'; +import type { StoryFn } from '@storybook/react'; import { EuiLoadingSpinner } from '@elastic/eui'; export const waitFor = - (waitTarget: Promise, spinner: ReactElement | null = ) => - (CurrentStory: Story) => { + (waitTarget: Promise, spinner: ReactElement = ) => + (CurrentStory: StoryFn) => { const [storyComponent, setStory] = useState(); const componentIsMounted = useRef(false); diff --git a/src/platform/plugins/shared/presentation_util/public/components/dashboard_picker/dashboard_picker.stories.tsx b/src/platform/plugins/shared/presentation_util/public/components/dashboard_picker/dashboard_picker.stories.tsx index e92e0d16603c..dc4f3bfb2530 100644 --- a/src/platform/plugins/shared/presentation_util/public/components/dashboard_picker/dashboard_picker.stories.tsx +++ b/src/platform/plugins/shared/presentation_util/public/components/dashboard_picker/dashboard_picker.stories.tsx @@ -23,6 +23,8 @@ export default { }, }; -export const Example = ({ isDisabled }: { isDisabled: boolean }) => ( - -); +export const Example = { + render: ({ isDisabled }: { isDisabled: boolean }) => ( + + ), +}; diff --git a/src/platform/plugins/shared/presentation_util/public/components/expression_input/expression_input.stories.tsx b/src/platform/plugins/shared/presentation_util/public/components/expression_input/expression_input.stories.tsx index 51450736a196..cb7d5dc652ac 100644 --- a/src/platform/plugins/shared/presentation_util/public/components/expression_input/expression_input.stories.tsx +++ b/src/platform/plugins/shared/presentation_util/public/components/expression_input/expression_input.stories.tsx @@ -90,12 +90,14 @@ export default { ], } as Meta; -export const Example = ({ isCompact }: { isCompact: boolean }) => ( - -); +export const Example = { + render: ({ isCompact }: { isCompact: boolean }) => ( + + ), +}; diff --git a/src/platform/plugins/shared/presentation_util/public/components/labs/project_list_item.stories.tsx b/src/platform/plugins/shared/presentation_util/public/components/labs/project_list_item.stories.tsx index 3a157a972647..7844a8f8cf08 100644 --- a/src/platform/plugins/shared/presentation_util/public/components/labs/project_list_item.stories.tsx +++ b/src/platform/plugins/shared/presentation_util/public/components/labs/project_list_item.stories.tsx @@ -35,46 +35,48 @@ export function EmptyList() { return ; } -export const ListItem = ( - props: Pick< - Props['project'], - 'description' | 'isActive' | 'name' | 'solutions' | 'environments' | 'isDisplayed' - > & - Omit -) => { - const { kibana, browser, session, ...rest } = props; - const status: EnvironmentStatus = { kibana, browser, session }; - const projectConfig: ProjectConfig = { - ...rest, - id: 'storybook:component' as ProjectID, - }; +export const ListItem = { + render: ( + props: Pick< + Props['project'], + 'description' | 'isActive' | 'name' | 'solutions' | 'environments' | 'isDisplayed' + > & + Omit + ) => { + const { kibana, browser, session, ...rest } = props; + const status: EnvironmentStatus = { kibana, browser, session }; + const projectConfig: ProjectConfig = { + ...rest, + id: 'storybook:component' as ProjectID, + }; - return ( -
- ({ ...status, [env]: enabled })} - /> -
- ); -}; + return ( +
+ ({ ...status, [env]: enabled })} + /> +
+ ); + }, -ListItem.args = { - isActive: false, - name: 'Demo Project', - description: 'This is a demo project, and this is the description of the demo project.', - kibana: false, - browser: false, - session: false, - solutions: ['dashboard', 'canvas'], - environments: ['kibana', 'browser', 'session'], -}; + args: { + isActive: false, + name: 'Demo Project', + description: 'This is a demo project, and this is the description of the demo project.', + kibana: false, + browser: false, + session: false, + solutions: ['dashboard', 'canvas'], + environments: ['kibana', 'browser', 'session'], + }, -ListItem.argTypes = { - environments: { - control: { - type: 'check', - options: ['kibana', 'browser', 'session'], + argTypes: { + environments: { + control: { + type: 'check', + options: ['kibana', 'browser', 'session'], + }, }, }, }; diff --git a/src/platform/plugins/shared/presentation_util/storybook/decorator.tsx b/src/platform/plugins/shared/presentation_util/storybook/decorator.tsx index 214ab42176ce..1aa3bbff7bb3 100644 --- a/src/platform/plugins/shared/presentation_util/storybook/decorator.tsx +++ b/src/platform/plugins/shared/presentation_util/storybook/decorator.tsx @@ -11,7 +11,7 @@ import React from 'react'; import { I18nProvider } from '@kbn/i18n-react'; import { KibanaContextProvider as KibanaReactProvider } from '@kbn/kibana-react-plugin/public'; -import { DecoratorFn } from '@storybook/react'; +import { Decorator } from '@storybook/react'; import { setStubKibanaServices } from '../public/services/mocks'; const settings = new Map(); @@ -29,7 +29,7 @@ const services = { uiSettings: settings, }; -export const servicesContextDecorator: DecoratorFn = (story: Function, storybook) => { +export const servicesContextDecorator: Decorator = (story: Function, storybook) => { setStubKibanaServices(); return ( diff --git a/src/platform/plugins/shared/presentation_util/storybook/manager.ts b/src/platform/plugins/shared/presentation_util/storybook/manager.ts index e879b1d1a234..4da0403ee1c3 100644 --- a/src/platform/plugins/shared/presentation_util/storybook/manager.ts +++ b/src/platform/plugins/shared/presentation_util/storybook/manager.ts @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { addons } from '@storybook/addons'; +import { addons } from '@storybook/manager-api'; import { create } from '@storybook/theming'; import { PANEL_ID } from '@storybook/addon-actions'; diff --git a/src/platform/plugins/shared/presentation_util/storybook/preview.tsx b/src/platform/plugins/shared/presentation_util/storybook/preview.tsx index a6b872f2d52c..7af0c1f6d71a 100644 --- a/src/platform/plugins/shared/presentation_util/storybook/preview.tsx +++ b/src/platform/plugins/shared/presentation_util/storybook/preview.tsx @@ -9,13 +9,11 @@ import React from 'react'; import * as jest from 'jest-mock'; -import { addDecorator } from '@storybook/react'; - -import { Title, Subtitle, Description, Primary, Stories } from '@storybook/addon-docs/blocks'; +import { Title, Subtitle, Description, Primary, Stories } from '@storybook/blocks'; import { servicesContextDecorator } from './decorator'; -addDecorator(servicesContextDecorator); +export const decorators = [servicesContextDecorator]; // @ts-ignore window.jest = jest; diff --git a/src/platform/plugins/shared/ui_actions_enhanced/public/components/action_wizard/action_wizard.stories.tsx b/src/platform/plugins/shared/ui_actions_enhanced/public/components/action_wizard/action_wizard.stories.tsx index 625a6d0133a0..cfbab4ee7b87 100644 --- a/src/platform/plugins/shared/ui_actions_enhanced/public/components/action_wizard/action_wizard.stories.tsx +++ b/src/platform/plugins/shared/ui_actions_enhanced/public/components/action_wizard/action_wizard.stories.tsx @@ -8,7 +8,6 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { SerializableRecord } from '@kbn/utility-types'; import { Demo, dashboardFactory, urlFactory } from './test_data'; import { ActionFactory, BaseActionFactoryContext } from '../../dynamic_actions'; @@ -25,13 +24,29 @@ const url = urlFactory as unknown as ActionFactory< BaseActionFactoryContext >; -storiesOf('components/ActionWizard', module) - .add('default', () => ) - .add('Only one factory is available', () => ( +export default { + title: 'components/ActionWizard', +}; + +export const Default = { + render: () => , + name: 'default', +}; + +export const OnlyOneFactoryIsAvailable = { + render: () => ( // to make sure layout doesn't break - )) - .add('Long list of action factories', () => ( + ), + + name: 'Only one factory is available', +}; + +export const LongListOfActionFactories = { + render: () => ( // to make sure layout doesn't break - )); + ), + + name: 'Long list of action factories', +}; diff --git a/src/platform/plugins/shared/ui_actions_enhanced/public/components/presentable_picker/presentable_picker.stories.tsx b/src/platform/plugins/shared/ui_actions_enhanced/public/components/presentable_picker/presentable_picker.stories.tsx index d28e072e9107..3124c15b0148 100644 --- a/src/platform/plugins/shared/ui_actions_enhanced/public/components/presentable_picker/presentable_picker.stories.tsx +++ b/src/platform/plugins/shared/ui_actions_enhanced/public/components/presentable_picker/presentable_picker.stories.tsx @@ -8,12 +8,15 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { PresentablePicker } from './presentable_picker'; -storiesOf('components/PresentablePicker', module) - .add('One item', () => ( +export default { + title: 'components/PresentablePicker', +}; + +export const OneItem = { + render: () => ( - )) - .add('Items are sorted', () => ( + ), + + name: 'One item', +}; + +export const ItemsAreSorted = { + render: () => ( - )) - .add('Items are sorted - 2', () => ( + ), + + name: 'Items are sorted', +}; + +export const ItemsAreSorted2 = { + render: () => ( - )) - .add('Two items', () => ( + ), + + name: 'Items are sorted - 2', +}; + +export const TwoItems = { + render: () => ( - )) - .add('Beta badge', () => ( + ), + + name: 'Two items', +}; + +export const BetaBadge = { + render: () => ( - )) - .add('Incompatible license', () => ( + ), + + name: 'Beta badge', +}; + +export const IncompatibleLicense = { + render: () => ( - )); + ), + + name: 'Incompatible license', +}; diff --git a/src/platform/plugins/shared/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/drilldown_form/drilldown_form.stories.tsx b/src/platform/plugins/shared/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/drilldown_form/drilldown_form.stories.tsx index 92c3728a7b57..942039d11cd1 100644 --- a/src/platform/plugins/shared/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/drilldown_form/drilldown_form.stories.tsx +++ b/src/platform/plugins/shared/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/drilldown_form/drilldown_form.stories.tsx @@ -8,7 +8,6 @@ */ import * as React from 'react'; -import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { DrilldownForm } from '.'; import type { TriggerPickerProps } from '../trigger_picker'; @@ -31,22 +30,32 @@ const triggers: TriggerPickerProps = { onChange: () => {}, }; -storiesOf('components/DrilldownForm', module) - .add('Default', () => { +export default { + title: 'components/DrilldownForm', +}; + +export const Default = () => { + return ( + + children... + + ); +}; + +export const WithLicenseLink = { + render: () => { return ( children... ); - }) - .add('With license link', () => { - return ( - - children... - - ); - }) - .add('No triggers', () => { + }, + + name: 'With license link', +}; + +export const NoTriggers = { + render: () => { return ( ); - }); + }, + + name: 'No triggers', +}; diff --git a/src/platform/plugins/shared/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/drilldown_hello_bar/drilldown_hello_bar.stories.tsx b/src/platform/plugins/shared/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/drilldown_hello_bar/drilldown_hello_bar.stories.tsx index f2b523c37cc9..58fafbf45d8d 100644 --- a/src/platform/plugins/shared/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/drilldown_hello_bar/drilldown_hello_bar.stories.tsx +++ b/src/platform/plugins/shared/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/drilldown_hello_bar/drilldown_hello_bar.stories.tsx @@ -8,7 +8,6 @@ */ import * as React from 'react'; -import { storiesOf } from '@storybook/react'; import { DrilldownHelloBar } from '.'; const Demo = () => { @@ -23,4 +22,11 @@ const Demo = () => { ) : null; }; -storiesOf('components/DrilldownHelloBar', module).add('default', () => ); +export default { + title: 'components/DrilldownHelloBar', +}; + +export const Default = { + render: () => , + name: 'default', +}; diff --git a/src/platform/plugins/shared/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/drilldown_table/drilldown_table.stories.tsx b/src/platform/plugins/shared/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/drilldown_table/drilldown_table.stories.tsx index ffe909688e03..d766fedf42b8 100644 --- a/src/platform/plugins/shared/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/drilldown_table/drilldown_table.stories.tsx +++ b/src/platform/plugins/shared/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/drilldown_table/drilldown_table.stories.tsx @@ -8,50 +8,59 @@ */ import * as React from 'react'; -import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { DrilldownTable } from './drilldown_table'; import { FlyoutFrame } from '../flyout_frame'; -storiesOf('components/ListManageDrilldowns', module) - .add('Default', () => ( - - )) - .add('Empty list', () => ( +export default { + title: 'components/ListManageDrilldowns', +}; + +export const Default = () => ( + +); + +export const EmptyList = { + render: () => ( - )) - .add('A single drilldown', () => ( + ), + + name: 'Empty list', +}; + +export const ASingleDrilldown = { + render: () => ( - )) - .add('Inside a flyout frame', () => ( + ), + + name: 'A single drilldown', +}; + +export const InsideAFlyoutFrame = { + render: () => ( - )); + ), + + name: 'Inside a flyout frame', +}; diff --git a/src/platform/plugins/shared/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/flyout_frame/flyout_frame.stories.tsx b/src/platform/plugins/shared/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/flyout_frame/flyout_frame.stories.tsx index 069f8a6d9bd0..4e4f3aeb3528 100644 --- a/src/platform/plugins/shared/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/flyout_frame/flyout_frame.stories.tsx +++ b/src/platform/plugins/shared/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/flyout_frame/flyout_frame.stories.tsx @@ -11,30 +11,58 @@ import * as React from 'react'; import { EuiFlyout, EuiButton } from '@elastic/eui'; -import { storiesOf } from '@storybook/react'; import { FlyoutFrame } from '.'; -storiesOf('components/FlyoutFrame', module) - .add('default', () => { +export default { + title: 'components/FlyoutFrame', +}; + +export const Default = { + render: () => { return test; - }) - .add('with title', () => { + }, + + name: 'default', +}; + +export const WithTitle = { + render: () => { return test; - }) - .add('with onClose', () => { + }, + + name: 'with title', +}; + +export const WithOnClose = { + render: () => { return console.log('onClose')}>test; - }) - .add('with onBack', () => { + }, + + name: 'with onClose', +}; + +export const WithOnBack = { + render: () => { return ( console.log('onClose')} title={'Title'}> test ); - }) - .add('custom footer', () => { + }, + + name: 'with onBack', +}; + +export const CustomFooter = { + render: () => { return click me!}>test; - }) - .add('open in flyout', () => { + }, + + name: 'custom footer', +}; + +export const OpenInFlyout = { + render: () => { return ( {}}> ); - }); + }, + + name: 'open in flyout', +}; diff --git a/src/platform/plugins/shared/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/trigger_picker/trigger_picker.stories.tsx b/src/platform/plugins/shared/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/trigger_picker/trigger_picker.stories.tsx index b6b149656c07..38e372eb3823 100644 --- a/src/platform/plugins/shared/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/trigger_picker/trigger_picker.stories.tsx +++ b/src/platform/plugins/shared/ui_actions_enhanced/public/drilldowns/drilldown_manager/components/trigger_picker/trigger_picker.stories.tsx @@ -8,7 +8,6 @@ */ import * as React from 'react'; -import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { TriggerPicker } from '.'; @@ -36,28 +35,33 @@ const Demo: React.FC = () => { ); }; -storiesOf('components/TriggerPicker', module) - .add('Default', () => { - return ( - - ); - }) - .add('With docs', () => { +export default { + title: 'components/TriggerPicker', +}; + +export const Default = () => { + return ( + + ); +}; + +export const WithDocs = { + render: () => { return ( ); - }) - .add('Selected trigger', () => { + }, + + name: 'With docs', +}; + +export const SelectedTrigger = { + render: () => { return ( ); - }) - .add('Interactive', () => { - return ; - }); + }, + + name: 'Selected trigger', +}; + +export const Interactive = () => { + return ; +}; diff --git a/src/platform/plugins/shared/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_collect_config.story.tsx b/src/platform/plugins/shared/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_collect_config.story.tsx index e3782a2ae2b5..0fdcf8da0e9d 100644 --- a/src/platform/plugins/shared/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_collect_config.story.tsx +++ b/src/platform/plugins/shared/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_collect_config.story.tsx @@ -8,7 +8,10 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { Demo } from './test_samples/demo'; -storiesOf('UrlDrilldownCollectConfig', module).add('default', () => ); +// eslint-disable-next-line import/no-default-export +export default { + title: 'UrlDrilldownCollectConfig', + render: () => , +}; diff --git a/src/platform/plugins/shared/unified_search/public/__stories__/search_bar.stories.tsx b/src/platform/plugins/shared/unified_search/public/__stories__/search_bar.stories.tsx index 576d777d65e3..e345d87d4305 100644 --- a/src/platform/plugins/shared/unified_search/public/__stories__/search_bar.stories.tsx +++ b/src/platform/plugins/shared/unified_search/public/__stories__/search_bar.stories.tsx @@ -10,7 +10,6 @@ import React from 'react'; import { action } from '@storybook/addon-actions'; import { DataViewBase, Query } from '@kbn/es-query'; -import { storiesOf } from '@storybook/react'; import { I18nProvider } from '@kbn/i18n-react'; import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; import type { DataView, DataViewsContract } from '@kbn/data-views-plugin/public'; @@ -223,9 +222,17 @@ function wrapSearchBarInContext( ); } -storiesOf('SearchBar', module) - .add('default', () => wrapSearchBarInContext({ showQueryInput: true } as SearchBarProps)) - .add('with dataviewPicker', () => +export default { + title: 'SearchBar', +}; + +export const Default = { + render: () => wrapSearchBarInContext({ showQueryInput: true } as SearchBarProps), + name: 'default', +}; + +export const WithDataviewPicker = { + render: () => wrapSearchBarInContext({ dataViewPickerComponentProps: { currentDataViewId: '1234', @@ -236,9 +243,13 @@ storiesOf('SearchBar', module) }, onChangeDataView: action('onChangeDataView'), }, - }) - ) - .add('with dataviewPicker enhanced', () => + }), + + name: 'with dataviewPicker', +}; + +export const WithDataviewPickerEnhanced = { + render: () => wrapSearchBarInContext({ dataViewPickerComponentProps: { currentDataViewId: '1234', @@ -251,29 +262,49 @@ storiesOf('SearchBar', module) onAddField: action('onAddField'), onDataViewCreated: action('onDataViewCreated'), }, - }) - ) - .add('with filterBar off', () => + }), + + name: 'with dataviewPicker enhanced', +}; + +export const WithFilterBarOff = { + render: () => wrapSearchBarInContext({ showFilterBar: false, - }) - ) - .add('with query input off', () => + }), + + name: 'with filterBar off', +}; + +export const WithQueryInputOff = { + render: () => wrapSearchBarInContext({ showQueryInput: false, - }) - ) - .add('with date picker off', () => + }), + + name: 'with query input off', +}; + +export const WithDatePickerOff = { + render: () => wrapSearchBarInContext({ showDatePicker: false, - }) - ) - .add('with disabled "Save query" menu', () => + }), + + name: 'with date picker off', +}; + +export const WithDisabledSaveQueryMenu = { + render: () => wrapSearchBarInContext({ showSaveQuery: false, - }) - ) - .add('with hidden "Manage saved objects" link in "Load saved query" menu', () => + }), + + name: 'with disabled "Save query" menu', +}; + +export const WithHiddenManageSavedObjectsLinkInLoadSavedQueryMenu = { + render: () => wrapSearchBarInContext( {}, { @@ -281,37 +312,57 @@ storiesOf('SearchBar', module) edit: false, }, } - ) - ) - .add('with the default date picker auto refresh interval on', () => + ), + + name: 'with hidden "Manage saved objects" link in "Load saved query" menu', +}; + +export const WithTheDefaultDatePickerAutoRefreshIntervalOn = { + render: () => wrapSearchBarInContext({ showDatePicker: true, onRefreshChange: action('onRefreshChange'), - }) - ) - .add('with the default date picker auto refresh interval off', () => + }), + + name: 'with the default date picker auto refresh interval on', +}; + +export const WithTheDefaultDatePickerAutoRefreshIntervalOff = { + render: () => wrapSearchBarInContext({ showDatePicker: true, isAutoRefreshDisabled: true, - }) - ) - .add('with only the date picker on', () => + }), + + name: 'with the default date picker auto refresh interval off', +}; + +export const WithOnlyTheDatePickerOn = { + render: () => wrapSearchBarInContext({ showDatePicker: true, showFilterBar: false, showQueryInput: false, - }) - ) - .add('with additional filters used for suggestions', () => + }), + + name: 'with only the date picker on', +}; + +export const WithAdditionalFiltersUsedForSuggestions = { + render: () => wrapSearchBarInContext({ filtersForSuggestions: [ buildExistsFilter({ type: 'keyword', name: 'geo.src' }, { id: undefined, } as unknown as DataViewBase), ], - } as unknown as SearchBarProps) - ) - .add('with only the filter bar on', () => + } as unknown as SearchBarProps), + + name: 'with additional filters used for suggestions', +}; + +export const WithOnlyTheFilterBarOn = { + render: () => wrapSearchBarInContext({ showDatePicker: false, showFilterBar: true, @@ -339,26 +390,38 @@ storiesOf('SearchBar', module) }, }, ], - } as unknown as SearchBarProps) - ) - .add('with only the query bar on', () => + } as unknown as SearchBarProps), + + name: 'with only the filter bar on', +}; + +export const WithOnlyTheQueryBarOn = { + render: () => wrapSearchBarInContext({ showDatePicker: false, showFilterBar: false, showQueryInput: true, query: { query: 'Test: miaou', language: 'kuery' }, - } as unknown as SearchBarProps) - ) - .add('with query menu off', () => + } as unknown as SearchBarProps), + + name: 'with only the query bar on', +}; + +export const WithQueryMenuOff = { + render: () => wrapSearchBarInContext({ showDatePicker: false, showFilterBar: false, showQueryInput: true, showQueryMenu: false, query: { query: 'Test: miaou', language: 'kuery' }, - } as unknown as SearchBarProps) - ) - .add('with only the filter bar and the date picker on', () => + } as unknown as SearchBarProps), + + name: 'with query menu off', +}; + +export const WithOnlyTheFilterBarAndTheDatePickerOn = { + render: () => wrapSearchBarInContext({ showDatePicker: true, showFilterBar: true, @@ -386,9 +449,13 @@ storiesOf('SearchBar', module) }, }, ], - } as unknown as SearchBarProps) - ) - .add('with loaded saved query without changes', () => + } as unknown as SearchBarProps), + + name: 'with only the filter bar and the date picker on', +}; + +export const WithLoadedSavedQueryWithoutChanges = { + render: () => wrapSearchBarInContext({ savedQuery: { id: '0173d0d0-b19a-11ec-8323-837d6b231b82', @@ -447,9 +514,13 @@ storiesOf('SearchBar', module) }, }, ], - } as unknown as SearchBarProps) - ) - .add('with loaded saved query with changes', () => + } as unknown as SearchBarProps), + + name: 'with loaded saved query without changes', +}; + +export const WithLoadedSavedQueryWithChanges = { + render: () => wrapSearchBarInContext({ savedQuery: { id: '0173d0d0-b19a-11ec-8323-837d6b231b82', @@ -485,9 +556,13 @@ storiesOf('SearchBar', module) ], }, }, - } as unknown as SearchBarProps) - ) - .add('with prepended controls', () => + } as unknown as SearchBarProps), + + name: 'with loaded saved query with changes', +}; + +export const WithPrependedControls = { + render: () => wrapSearchBarInContext({ prependFilterBar: ( ), showQueryInput: true, - }) - ) - .add('without switch query language', () => + }), + + name: 'with prepended controls', +}; + +export const WithoutSwitchQueryLanguage = { + render: () => wrapSearchBarInContext({ disableQueryLanguageSwitcher: true, - }) - ) - .add('show only query bar without submit', () => + }), + + name: 'without switch query language', +}; + +export const ShowOnlyQueryBarWithoutSubmit = { + render: () => wrapSearchBarInContext({ showDatePicker: false, showFilterBar: false, showAutoRefreshOnly: false, showQueryInput: true, showSubmitButton: false, - }) - ) - .add('show only datepicker without submit', () => + }), + + name: 'show only query bar without submit', +}; + +export const ShowOnlyDatepickerWithoutSubmit = { + render: () => wrapSearchBarInContext({ showDatePicker: true, showFilterBar: false, showAutoRefreshOnly: false, showQueryInput: false, showSubmitButton: false, - }) - ) - .add('show only query bar and timepicker without submit', () => + }), + + name: 'show only datepicker without submit', +}; + +export const ShowOnlyQueryBarAndTimepickerWithoutSubmit = { + render: () => wrapSearchBarInContext({ showDatePicker: true, showFilterBar: false, showAutoRefreshOnly: false, showQueryInput: true, showSubmitButton: false, - }) - ) - .add('with filter bar on but pinning option is hidden from menus', () => + }), + + name: 'show only query bar and timepicker without submit', +}; + +export const WithFilterBarOnButPinningOptionIsHiddenFromMenus = { + render: () => wrapSearchBarInContext({ showDatePicker: false, showFilterBar: true, @@ -565,9 +660,13 @@ storiesOf('SearchBar', module) }, }, ], - } as unknown as SearchBarProps) - ) - .add('with dataviewPicker with ES|QL', () => + } as unknown as SearchBarProps), + + name: 'with filter bar on but pinning option is hidden from menus', +}; + +export const WithDataviewPickerWithEsQl = { + render: () => wrapSearchBarInContext({ dataViewPickerComponentProps: { currentDataViewId: '1234', @@ -580,9 +679,13 @@ storiesOf('SearchBar', module) onAddField: action('onAddField'), onDataViewCreated: action('onDataViewCreated'), }, - } as SearchBarProps) - ) - .add('with dataviewPicker with ES|QL and ES|QL query', () => + } as SearchBarProps), + + name: 'with dataviewPicker with ES|QL', +}; + +export const WithDataviewPickerWithEsQlAndEsQlQuery = { + render: () => wrapSearchBarInContext({ dataViewPickerComponentProps: { currentDataViewId: '1234', @@ -596,9 +699,13 @@ storiesOf('SearchBar', module) onDataViewCreated: action('onDataViewCreated'), }, query: { esql: 'from dataview | project field1, field2' }, - } as unknown as SearchBarProps) - ) - .add('with dataviewPicker with ES|QL and large ES|QL query', () => + } as unknown as SearchBarProps), + + name: 'with dataviewPicker with ES|QL and ES|QL query', +}; + +export const WithDataviewPickerWithEsQlAndLargeEsQlQuery = { + render: () => wrapSearchBarInContext({ dataViewPickerComponentProps: { currentDataViewId: '1234', @@ -614,9 +721,13 @@ storiesOf('SearchBar', module) query: { esql: 'from dataview | project field1, field2, field 3, field 4, field 5 | where field5 > 5 | stats var = avg(field3)', }, - } as unknown as SearchBarProps) - ) - .add('with dataviewPicker with ES|QL and errors in ES|QL query', () => + } as unknown as SearchBarProps), + + name: 'with dataviewPicker with ES|QL and large ES|QL query', +}; + +export const WithDataviewPickerWithEsQlAndErrorsInEsQlQuery = { + render: () => wrapSearchBarInContext({ dataViewPickerComponentProps: { currentDataViewId: '1234', @@ -635,9 +746,13 @@ storiesOf('SearchBar', module) ), ], query: { esql: 'from dataview | project field10' }, - } as unknown as SearchBarProps) - ) - .add('in disabled state', () => + } as unknown as SearchBarProps), + + name: 'with dataviewPicker with ES|QL and errors in ES|QL query', +}; + +export const InDisabledState = { + render: () => wrapSearchBarInContext({ dataViewPickerComponentProps: { currentDataViewId: '1234', @@ -649,9 +764,13 @@ storiesOf('SearchBar', module) onChangeDataView: action('onChangeDataView'), }, isDisabled: true, - }) - ) - .add('no submit button', () => + }), + + name: 'in disabled state', +}; + +export const NoSubmitButton = { + render: () => wrapSearchBarInContext({ dataViewPickerComponentProps: { currentDataViewId: '1234', @@ -663,9 +782,13 @@ storiesOf('SearchBar', module) onChangeDataView: action('onChangeDataView'), }, showSubmitButton: false, - }) - ) - .add('submit button always as icon', () => + }), + + name: 'no submit button', +}; + +export const SubmitButtonAlwaysAsIcon = { + render: () => wrapSearchBarInContext({ dataViewPickerComponentProps: { currentDataViewId: '1234', @@ -677,9 +800,13 @@ storiesOf('SearchBar', module) onChangeDataView: action('onChangeDataView'), }, submitButtonStyle: 'iconOnly', - }) - ) - .add('submit button always as a full button', () => + }), + + name: 'submit button always as icon', +}; + +export const SubmitButtonAlwaysAsAFullButton = { + render: () => wrapSearchBarInContext({ dataViewPickerComponentProps: { currentDataViewId: '1234', @@ -691,10 +818,13 @@ storiesOf('SearchBar', module) onChangeDataView: action('onChangeDataView'), }, submitButtonStyle: 'full', - }) - ) + }), - .add('with renderQueryInputAppend prop', () => + name: 'submit button always as a full button', +}; + +export const WithRenderQueryInputAppendProp = { + render: () => wrapSearchBarInContext({ dataViewPickerComponentProps: { currentDataViewId: '1234', @@ -707,9 +837,13 @@ storiesOf('SearchBar', module) }, submitButtonStyle: 'full', renderQueryInputAppend: () => {}}>Append, - }) - ) - .add('with additional query bar menu items', () => + }), + + name: 'with renderQueryInputAppend prop', +}; + +export const WithAdditionalQueryBarMenuItems = { + render: () => wrapSearchBarInContext({ showFilterBar: true, additionalQueryBarMenuItems: { @@ -742,5 +876,7 @@ storiesOf('SearchBar', module) }, ], }, - }) - ); + }), + + name: 'with additional query bar menu items', +}; diff --git a/src/platform/plugins/shared/unified_search/public/filters_builder/__stories__/filter_builder.stories.tsx b/src/platform/plugins/shared/unified_search/public/filters_builder/__stories__/filter_builder.stories.tsx index 00357ea473ce..46fefb195e40 100644 --- a/src/platform/plugins/shared/unified_search/public/filters_builder/__stories__/filter_builder.stories.tsx +++ b/src/platform/plugins/shared/unified_search/public/filters_builder/__stories__/filter_builder.stories.tsx @@ -7,16 +7,16 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import React, { FC } from 'react'; -import { ComponentStory } from '@storybook/react'; +import React from 'react'; import { I18nProvider } from '@kbn/i18n-react'; import { EuiForm } from '@elastic/eui'; import type { DataView } from '@kbn/data-views-plugin/common'; import { action } from '@storybook/addon-actions'; import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; import type { Filter } from '@kbn/es-query'; +import type { StoryObj } from '@storybook/react'; import { getFiltersMock, getFiltersMockOrHide } from '../__mock__/filters'; -import FiltersBuilder, { FiltersBuilderProps } from '../filters_builder'; +import FiltersBuilder from '../filters_builder'; export default { title: 'Filters Builder', @@ -24,20 +24,7 @@ export default { decorators: [(story: Function) => {story()}], }; -const Template: ComponentStory> = (args) => ; - -export const Default = Template.bind({}); - -Default.decorators = [ - (Story) => ( - - - - - - ), -]; - +const filters = getFiltersMock(); const mockedDataView = { id: 'ff959d40-b880-11e8-a6d9-e546fe2bba5f', title: 'logstash-*', @@ -53,27 +40,38 @@ const mockedDataView = { ], } as DataView; -const filters = getFiltersMock(); +export const Default: StoryObj = { + decorators: [ + (Story) => ( + + + + + + ), + ], -Default.args = { - filters, - dataView: mockedDataView, - onChange: (f: Filter[]) => {}, - hideOr: false, + args: { + filters, + dataView: mockedDataView, + onChange: (f: Filter[]) => {}, + hideOr: false, + }, }; -export const withoutOR = Template.bind({}); -withoutOR.args = { ...Default.args, filters: getFiltersMockOrHide(), hideOr: true }; +export const withoutOR: StoryObj = { + args: { ...Default.args, filters: getFiltersMockOrHide(), hideOr: true }, -withoutOR.decorators = [ - (Story) => ( - - - - - - ), -]; + decorators: [ + (Story) => ( + + + + + + ), + ], +}; const createMockWebStorage = () => ({ clear: action('clear'), diff --git a/x-pack/platform/packages/private/kbn-random-sampling/.storybook/main.js b/x-pack/platform/packages/private/kbn-random-sampling/.storybook/main.js index cf33a3d9fbff..91aa9130970e 100644 --- a/x-pack/platform/packages/private/kbn-random-sampling/.storybook/main.js +++ b/x-pack/platform/packages/private/kbn-random-sampling/.storybook/main.js @@ -5,11 +5,10 @@ * 2.0. */ -const baseConfig = require('@kbn/storybook').defaultConfig; +const defaultConfig = require('@kbn/storybook').defaultConfig; module.exports = { - ...baseConfig, - stories: ['../**/*.stories.mdx', ...baseConfig.stories], + ...defaultConfig, typescript: { reactDocgen: 'react-docgen-typescript', }, diff --git a/x-pack/platform/packages/private/kbn-random-sampling/src/__stories__/control_slider.mdx b/x-pack/platform/packages/private/kbn-random-sampling/src/__stories__/control_slider.mdx new file mode 100644 index 000000000000..6c8cb015f6cd --- /dev/null +++ b/x-pack/platform/packages/private/kbn-random-sampling/src/__stories__/control_slider.mdx @@ -0,0 +1,24 @@ +import { Canvas, Meta, Story, Controls } from '@storybook/blocks'; +import * as ControlSliderStories from './control_slider.stories'; + + + +# Overview + +The following control slider component has been designed to work as a shared component in Kibana: + + + + + +When the control slider is disabled an explanation tooltip is shown to the user: + + + + + +## Component props + +The component exposes the following properties: + + diff --git a/x-pack/platform/packages/private/kbn-random-sampling/src/__stories__/control_slider.stories.mdx b/x-pack/platform/packages/private/kbn-random-sampling/src/__stories__/control_slider.stories.mdx deleted file mode 100644 index dff3556ea9d6..000000000000 --- a/x-pack/platform/packages/private/kbn-random-sampling/src/__stories__/control_slider.stories.mdx +++ /dev/null @@ -1,62 +0,0 @@ -import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs/blocks'; -import { I18nProvider } from '@kbn/i18n-react'; -import { ControlSlider } from '../ui/slider_control' - - -export const Template = (args) => ; - - - - -# Overview - -The following control slider component has been designed to work as a shared component in Kibana: - - - - {Template.bind({})} - - - -When the control slider is disabled an explanation tooltip is shown to the user: - - - - {Template.bind({})} - - - -## Component props - -The component exposes the following properties: - - diff --git a/x-pack/platform/packages/private/kbn-random-sampling/src/__stories__/control_slider.stories.tsx b/x-pack/platform/packages/private/kbn-random-sampling/src/__stories__/control_slider.stories.tsx new file mode 100644 index 000000000000..b430af43724c --- /dev/null +++ b/x-pack/platform/packages/private/kbn-random-sampling/src/__stories__/control_slider.stories.tsx @@ -0,0 +1,57 @@ +/* + * 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; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { I18nProvider } from '@kbn/i18n-react'; +import { ControlSlider, ControlSliderProps } from '../ui/slider_control'; + +const Template = (args: ControlSliderProps) => ( + + + +); + +export default { + title: 'Random Sampling/Control Slider', + component: ControlSlider, +}; + +export const Basic = { + render: Template.bind({}), + name: 'basic', + + args: { + values: [0.00001, 0.0001, 0.001, 0.01, 0.1, 1], + currentValue: 0.001, + 'data-test-subj': 'test-id', + }, + + argTypes: { + onChange: { + action: 'changed', + }, + }, +}; + +export const Disabled = { + render: Template.bind({}), + name: 'disabled', + + args: { + values: [0.00001, 0.0001, 0.001, 0.01, 0.1, 1], + currentValue: 0.001, + disabled: true, + disabledReason: 'Control was disabled due to X and Y', + 'data-test-subj': 'test-id', + }, + + argTypes: { + onChange: { + action: 'changed', + }, + }, +}; diff --git a/x-pack/platform/packages/private/kbn-random-sampling/src/__stories__/sampling_icon.mdx b/x-pack/platform/packages/private/kbn-random-sampling/src/__stories__/sampling_icon.mdx new file mode 100644 index 000000000000..2fca010b763a --- /dev/null +++ b/x-pack/platform/packages/private/kbn-random-sampling/src/__stories__/sampling_icon.mdx @@ -0,0 +1,18 @@ +import { Canvas, Meta, Story, Controls } from '@storybook/blocks'; +import * as SamplingIconStories from './sampling_icon.stories'; + + + +# Overview + +The shared Random Sampling icon is the following + + + + + +## Component table props + +On top of common SVGElement props also the following props are supported by the component: + + diff --git a/x-pack/platform/packages/private/kbn-random-sampling/src/__stories__/sampling_icon.stories.mdx b/x-pack/platform/packages/private/kbn-random-sampling/src/__stories__/sampling_icon.stories.mdx deleted file mode 100644 index b30eaef920ef..000000000000 --- a/x-pack/platform/packages/private/kbn-random-sampling/src/__stories__/sampling_icon.stories.mdx +++ /dev/null @@ -1,19 +0,0 @@ -import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs/blocks'; -import { RandomSamplingIcon } from '../ui/icon/sampling_icon' - - - -# Overview -The shared Random Sampling icon is the following - - - - - - - -## Component table props - -On top of common SVGElement props also the following props are supported by the component: - - diff --git a/x-pack/platform/packages/private/kbn-random-sampling/src/__stories__/sampling_icon.stories.tsx b/x-pack/platform/packages/private/kbn-random-sampling/src/__stories__/sampling_icon.stories.tsx new file mode 100644 index 000000000000..bde576b60cee --- /dev/null +++ b/x-pack/platform/packages/private/kbn-random-sampling/src/__stories__/sampling_icon.stories.tsx @@ -0,0 +1,18 @@ +/* + * 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; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { RandomSamplingIcon } from '../ui/icon/sampling_icon'; + +export default { + title: 'Random Sampling/Icon', +}; + +export const BasicIcon = { + render: () => , + name: 'Basic Icon', +}; diff --git a/x-pack/platform/packages/shared/ai-assistant/ai-assistant-cta/__stories__/add_connector.stories.tsx b/x-pack/platform/packages/shared/ai-assistant/ai-assistant-cta/__stories__/add_connector.stories.tsx index 13de6ef7d1ea..73e5ea98125e 100644 --- a/x-pack/platform/packages/shared/ai-assistant/ai-assistant-cta/__stories__/add_connector.stories.tsx +++ b/x-pack/platform/packages/shared/ai-assistant/ai-assistant-cta/__stories__/add_connector.stories.tsx @@ -6,7 +6,7 @@ */ import React from 'react'; -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Meta, StoryFn } from '@storybook/react'; import { AddConnector as Component } from '../add_connector'; @@ -16,6 +16,6 @@ export default { argTypes: { onAddConnector: { action: 'onAddConnector' }, }, -} as ComponentMeta; +} as Meta; -export const AddConnector: ComponentStory = (args) => ; +export const AddConnector: StoryFn = (args) => ; diff --git a/x-pack/platform/packages/shared/ai-assistant/ai-assistant-cta/__stories__/call_to_action.stories.tsx b/x-pack/platform/packages/shared/ai-assistant/ai-assistant-cta/__stories__/call_to_action.stories.tsx index 8c87a3f4b073..8470f604a0db 100644 --- a/x-pack/platform/packages/shared/ai-assistant/ai-assistant-cta/__stories__/call_to_action.stories.tsx +++ b/x-pack/platform/packages/shared/ai-assistant/ai-assistant-cta/__stories__/call_to_action.stories.tsx @@ -6,7 +6,7 @@ */ import React from 'react'; -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Meta, StoryFn } from '@storybook/react'; import { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { AssistantCallToAction as Component } from '../call_to_action'; @@ -22,9 +22,9 @@ export default { control: 'text', }, }, -} as ComponentMeta; +} as Meta; -export const CallToAction: ComponentStory = (args) => ( +export const CallToAction: StoryFn = (args) => ( diff --git a/x-pack/platform/packages/shared/ai-assistant/ai-assistant-cta/__stories__/install_knowledge_base.stories.tsx b/x-pack/platform/packages/shared/ai-assistant/ai-assistant-cta/__stories__/install_knowledge_base.stories.tsx index c2c537327093..abf4944244c2 100644 --- a/x-pack/platform/packages/shared/ai-assistant/ai-assistant-cta/__stories__/install_knowledge_base.stories.tsx +++ b/x-pack/platform/packages/shared/ai-assistant/ai-assistant-cta/__stories__/install_knowledge_base.stories.tsx @@ -6,7 +6,7 @@ */ import React from 'react'; -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Meta, StoryFn } from '@storybook/react'; import { InstallKnowledgeBase as Component } from '../install_knowledge_base'; @@ -16,8 +16,6 @@ export default { argTypes: { onInstallKnowledgeBase: { action: 'onInstallKnowledgeBase' }, }, -} as ComponentMeta; +} as Meta; -export const InstallKnowledgeBase: ComponentStory = (args) => ( - -); +export const InstallKnowledgeBase: StoryFn = (args) => ; diff --git a/x-pack/platform/packages/shared/ai-assistant/ai-assistant-cta/__stories__/need_license_upgrade.stories.tsx b/x-pack/platform/packages/shared/ai-assistant/ai-assistant-cta/__stories__/need_license_upgrade.stories.tsx index 7b60a0b822bf..dc1b5528ff40 100644 --- a/x-pack/platform/packages/shared/ai-assistant/ai-assistant-cta/__stories__/need_license_upgrade.stories.tsx +++ b/x-pack/platform/packages/shared/ai-assistant/ai-assistant-cta/__stories__/need_license_upgrade.stories.tsx @@ -6,7 +6,7 @@ */ import React from 'react'; -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Meta, StoryFn } from '@storybook/react'; import { NeedLicenseUpgrade as Component } from '../need_license_upgrade'; @@ -16,8 +16,6 @@ export default { argTypes: { onManageSubscription: { action: 'onManageSubscription' }, }, -} as ComponentMeta; +} as Meta; -export const NeedLicenseUpgrade: ComponentStory = (args) => ( - -); +export const NeedLicenseUpgrade: StoryFn = (args) => ; diff --git a/x-pack/platform/packages/shared/ai-assistant/ai-assistant-cta/__stories__/need_tier_upgrade.stories.tsx b/x-pack/platform/packages/shared/ai-assistant/ai-assistant-cta/__stories__/need_tier_upgrade.stories.tsx index 31c6e18ab39c..8acfe2ee772e 100644 --- a/x-pack/platform/packages/shared/ai-assistant/ai-assistant-cta/__stories__/need_tier_upgrade.stories.tsx +++ b/x-pack/platform/packages/shared/ai-assistant/ai-assistant-cta/__stories__/need_tier_upgrade.stories.tsx @@ -6,7 +6,7 @@ */ import React from 'react'; -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Meta, StoryFn } from '@storybook/react'; import { NeedTierUpgrade as Component } from '../need_tier_upgrade'; @@ -16,6 +16,6 @@ export default { argTypes: { onManageSubscription: { action: 'onManageSubscription' }, }, -} as ComponentMeta; +} as Meta; -export const NeedTierUpgrade: ComponentStory = (args) => ; +export const NeedTierUpgrade: StoryFn = (args) => ; diff --git a/x-pack/platform/packages/shared/ai-assistant/ai-assistant-cta/__stories__/no_connector_access.stories.tsx b/x-pack/platform/packages/shared/ai-assistant/ai-assistant-cta/__stories__/no_connector_access.stories.tsx index 95f119e1e4e7..4c52cecff79a 100644 --- a/x-pack/platform/packages/shared/ai-assistant/ai-assistant-cta/__stories__/no_connector_access.stories.tsx +++ b/x-pack/platform/packages/shared/ai-assistant/ai-assistant-cta/__stories__/no_connector_access.stories.tsx @@ -6,13 +6,13 @@ */ import React from 'react'; -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Meta, StoryFn } from '@storybook/react'; import { NoConnectorAccess as Component } from '../no_connector_access'; export default { title: 'Layout/Call to Action/Types', component: Component, -} as ComponentMeta; +} as Meta; -export const NoConnectorAccess: ComponentStory = () => ; +export const NoConnectorAccess: StoryFn = () => ; diff --git a/x-pack/platform/packages/shared/ai-assistant/ai-assistant-cta/__stories__/ready_to_help.stories.tsx b/x-pack/platform/packages/shared/ai-assistant/ai-assistant-cta/__stories__/ready_to_help.stories.tsx index 98721ebd9a29..3f4551a7c305 100644 --- a/x-pack/platform/packages/shared/ai-assistant/ai-assistant-cta/__stories__/ready_to_help.stories.tsx +++ b/x-pack/platform/packages/shared/ai-assistant/ai-assistant-cta/__stories__/ready_to_help.stories.tsx @@ -6,7 +6,7 @@ */ import React from 'react'; -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Meta, StoryFn } from '@storybook/react'; import { ReadyToHelp as Component } from '../ready_to_help'; @@ -20,6 +20,6 @@ export default { defaultValue: 'stack', }, }, -} as ComponentMeta; +} as Meta; -export const ReadyToHelp: ComponentStory = (args) => ; +export const ReadyToHelp: StoryFn = (args) => ; diff --git a/x-pack/platform/packages/shared/ai-assistant/icon/__stories__/avatar.stories.tsx b/x-pack/platform/packages/shared/ai-assistant/icon/__stories__/avatar.stories.tsx index 7de137211e4a..4bee98f35f0a 100644 --- a/x-pack/platform/packages/shared/ai-assistant/icon/__stories__/avatar.stories.tsx +++ b/x-pack/platform/packages/shared/ai-assistant/icon/__stories__/avatar.stories.tsx @@ -6,9 +6,8 @@ */ import React from 'react'; -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Meta, StoryFn } from '@storybook/react'; -import { EuiButton } from '@elastic/eui'; import { AssistantAvatar as Component } from '../avatar'; export default { @@ -30,11 +29,6 @@ export default { defaultValue: 'Elastic Assistant', }, }, -} as ComponentMeta; +} as Meta; -export const Avatar: ComponentStory = (args) => ( - <> - - Test - -); +export const Avatar: StoryFn = (args) => ; diff --git a/x-pack/platform/packages/shared/ai-assistant/icon/__stories__/beacon.stories.tsx b/x-pack/platform/packages/shared/ai-assistant/icon/__stories__/beacon.stories.tsx index 4027b431110a..de9d7ab903f0 100644 --- a/x-pack/platform/packages/shared/ai-assistant/icon/__stories__/beacon.stories.tsx +++ b/x-pack/platform/packages/shared/ai-assistant/icon/__stories__/beacon.stories.tsx @@ -6,7 +6,7 @@ */ import React from 'react'; -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Meta, StoryFn } from '@storybook/react'; import { AssistantBeacon as Component } from '../beacon'; @@ -25,6 +25,6 @@ export default { defaultValue: 'body', }, }, -} as ComponentMeta; +} as Meta; -export const Beacon: ComponentStory = (args) => ; +export const Beacon: StoryFn = (args) => ; diff --git a/x-pack/platform/packages/shared/ai-assistant/icon/__stories__/icon.stories.tsx b/x-pack/platform/packages/shared/ai-assistant/icon/__stories__/icon.stories.tsx index e27ec513e7aa..f5c546032e60 100644 --- a/x-pack/platform/packages/shared/ai-assistant/icon/__stories__/icon.stories.tsx +++ b/x-pack/platform/packages/shared/ai-assistant/icon/__stories__/icon.stories.tsx @@ -6,7 +6,7 @@ */ import React from 'react'; -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Meta, StoryFn } from '@storybook/react'; import { AssistantIcon as Component } from '../icon'; @@ -20,6 +20,6 @@ export default { defaultValue: 'xxl', }, }, -} as ComponentMeta; +} as Meta; -export const Icon: ComponentStory = (args) => ; +export const Icon: StoryFn = (args) => ; diff --git a/x-pack/platform/packages/shared/ai-assistant/icon/avatar.tsx b/x-pack/platform/packages/shared/ai-assistant/icon/avatar.tsx index ce539979f202..4722fc58a33a 100644 --- a/x-pack/platform/packages/shared/ai-assistant/icon/avatar.tsx +++ b/x-pack/platform/packages/shared/ai-assistant/icon/avatar.tsx @@ -7,6 +7,7 @@ import React from 'react'; import { EuiAvatar, EuiAvatarProps } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; import { AssistantIcon } from './icon'; @@ -18,6 +19,10 @@ export type AssistantAvatarProps = Omit< 'iconType' | 'initials' | 'initialsLength' | 'imageUrl' >; +const aiAssistantName = i18n.translate('xpack.aiAssistant.avatar.aiAssistantLabel', { + defaultMessage: 'AI Assistant', +}); + /** * A `EuiAvatar` component customized for the AI Assistant. */ @@ -26,5 +31,7 @@ export const AssistantAvatar = ({ size = 'm', ...props }: AssistantAvatarProps) => { - return ; + return ( + + ); }; diff --git a/x-pack/platform/packages/shared/ai-assistant/icon/tsconfig.json b/x-pack/platform/packages/shared/ai-assistant/icon/tsconfig.json index 7685366ff4b1..7d885a8d31be 100644 --- a/x-pack/platform/packages/shared/ai-assistant/icon/tsconfig.json +++ b/x-pack/platform/packages/shared/ai-assistant/icon/tsconfig.json @@ -18,5 +18,6 @@ "target/**/*" ], "kbn_references": [ + "@kbn/i18n", ] } diff --git a/x-pack/platform/packages/shared/kbn-ai-assistant/src/utils/storybook_decorator.stories.tsx b/x-pack/platform/packages/shared/kbn-ai-assistant/.storybook/decorator.tsx similarity index 96% rename from x-pack/platform/packages/shared/kbn-ai-assistant/src/utils/storybook_decorator.stories.tsx rename to x-pack/platform/packages/shared/kbn-ai-assistant/.storybook/decorator.tsx index e481897c2299..966a0c5aeacd 100644 --- a/x-pack/platform/packages/shared/kbn-ai-assistant/src/utils/storybook_decorator.stories.tsx +++ b/x-pack/platform/packages/shared/kbn-ai-assistant/.storybook/decorator.tsx @@ -13,7 +13,7 @@ import { } from '@kbn/observability-ai-assistant-plugin/public'; import { Subject } from 'rxjs'; import { coreMock } from '@kbn/core/public/mocks'; -import { AIAssistantAppService } from '../service/create_app_service'; +import { AIAssistantAppService } from '../src/service/create_app_service'; const mockService: AIAssistantAppService = { ...createStorybookService(), diff --git a/x-pack/platform/packages/shared/kbn-ai-assistant/.storybook/manager.ts b/x-pack/platform/packages/shared/kbn-ai-assistant/.storybook/manager.ts index 32abc09cb131..214cb5d2568e 100644 --- a/x-pack/platform/packages/shared/kbn-ai-assistant/.storybook/manager.ts +++ b/x-pack/platform/packages/shared/kbn-ai-assistant/.storybook/manager.ts @@ -5,9 +5,9 @@ * 2.0. */ -import { addons } from '@storybook/addons'; import { create } from '@storybook/theming'; import { PANEL_ID } from '@storybook/addon-actions'; +import { addons } from '@storybook/manager-api'; addons.setConfig({ theme: create({ diff --git a/x-pack/platform/packages/shared/kbn-ai-assistant/src/prompt_editor/prompt_editor.stories.tsx b/x-pack/platform/packages/shared/kbn-ai-assistant/src/prompt_editor/prompt_editor.stories.tsx deleted file mode 100644 index ed2948e50f15..000000000000 --- a/x-pack/platform/packages/shared/kbn-ai-assistant/src/prompt_editor/prompt_editor.stories.tsx +++ /dev/null @@ -1,97 +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; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import React from 'react'; -import { ComponentStory, ComponentStoryObj } from '@storybook/react'; -import { MessageRole } from '@kbn/observability-ai-assistant-plugin/public'; -import { KibanaReactStorybookDecorator } from '../utils/storybook_decorator.stories'; -import { PromptEditor as Component, PromptEditorProps } from './prompt_editor'; - -/* - JSON Schema validation in the PromptEditor compponent does not work - when rendering the component from within Storybook. - -*/ -export default { - component: Component, - title: 'app/Molecules/PromptEditor', - argTypes: {}, - parameters: { - backgrounds: { - default: 'white', - values: [{ name: 'white', value: '#fff' }], - }, - }, - decorators: [KibanaReactStorybookDecorator], -}; - -const Template: ComponentStory = (props: PromptEditorProps) => { - return ; -}; - -export const PromptEditorDisabled: ComponentStoryObj = { - args: { - disabled: true, - hidden: false, - loading: false, - initialRole: MessageRole.User, - initialFunctionCall: undefined, - initialContent: '', - onChangeHeight: () => {}, - onSendTelemetry: () => {}, - onSubmit: () => {}, - }, - render: Template, -}; - -export const PromptEditorLoading: ComponentStoryObj = { - args: { - disabled: false, - hidden: false, - loading: true, - initialRole: MessageRole.User, - initialFunctionCall: undefined, - initialContent: '', - onChangeHeight: () => {}, - onSendTelemetry: () => {}, - onSubmit: () => {}, - }, - render: Template, -}; - -export const PromptEditorWithInitialContent: ComponentStoryObj = { - args: { - disabled: false, - hidden: false, - loading: true, - initialRole: MessageRole.User, - initialFunctionCall: undefined, - initialContent: 'Can you help me with this?', - onChangeHeight: () => {}, - onSendTelemetry: () => {}, - onSubmit: () => {}, - }, - render: Template, -}; - -export const PromptEditorWithInitialFunction: ComponentStoryObj = { - args: { - disabled: false, - hidden: false, - loading: false, - initialRole: MessageRole.User, - initialFunctionCall: { - name: 'get stuff', - trigger: MessageRole.User, - }, - initialContent: '', - onChangeHeight: () => {}, - onSendTelemetry: () => {}, - onSubmit: () => {}, - }, - render: Template, -}; diff --git a/x-pack/platform/packages/shared/kbn-event-stacktrace/.storybook/jest_setup.js b/x-pack/platform/packages/shared/kbn-event-stacktrace/.storybook/jest_setup.js index 32071b8aa3f6..d789c541066f 100644 --- a/x-pack/platform/packages/shared/kbn-event-stacktrace/.storybook/jest_setup.js +++ b/x-pack/platform/packages/shared/kbn-event-stacktrace/.storybook/jest_setup.js @@ -5,7 +5,7 @@ * 2.0. */ -import { setGlobalConfig } from '@storybook/testing-react'; +import { setProjectAnnotations } from '@storybook/react'; import * as globalStorybookConfig from './preview'; -setGlobalConfig(globalStorybookConfig); +setProjectAnnotations(globalStorybookConfig); diff --git a/x-pack/platform/packages/shared/kbn-event-stacktrace/src/components/stacktrace/exception/exception_stacktrace.stories.tsx b/x-pack/platform/packages/shared/kbn-event-stacktrace/src/components/stacktrace/exception/exception_stacktrace.stories.tsx index eab4c3c03257..deb54756a20a 100644 --- a/x-pack/platform/packages/shared/kbn-event-stacktrace/src/components/stacktrace/exception/exception_stacktrace.stories.tsx +++ b/x-pack/platform/packages/shared/kbn-event-stacktrace/src/components/stacktrace/exception/exception_stacktrace.stories.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import type { Story } from '@storybook/react'; +import type { StoryObj } from '@storybook/react'; import type { ComponentProps, ComponentType } from 'react'; import React from 'react'; import { ExceptionStacktrace } from './exception_stacktrace'; @@ -17,2478 +17,2486 @@ export default { component: ExceptionStacktrace, }; -export const JavaWithLongLines: Story = (args) => ; -JavaWithLongLines.args = { - codeLanguage: 'java', - exceptions: [ - { - stacktrace: [ - { - library_frame: true, - exclude_from_grouping: false, - filename: 'AbstractJackson2HttpMessageConverter.java', - classname: 'org.springframework.http.converter.json.AbstractJackson2HttpMessageConverter', - line: { - number: 296, - }, - module: 'org.springframework.http.converter.json', - function: 'writeInternal', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'AbstractGenericHttpMessageConverter.java', - classname: 'org.springframework.http.converter.AbstractGenericHttpMessageConverter', - line: { - number: 102, - }, - module: 'org.springframework.http.converter', - function: 'write', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'AbstractMessageConverterMethodProcessor.java', - classname: - 'org.springframework.web.servlet.mvc.method.annotation.AbstractMessageConverterMethodProcessor', - line: { - number: 272, - }, - module: 'org.springframework.web.servlet.mvc.method.annotation', - function: 'writeWithMessageConverters', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'RequestResponseBodyMethodProcessor.java', - classname: - 'org.springframework.web.servlet.mvc.method.annotation.RequestResponseBodyMethodProcessor', - line: { - number: 180, - }, - module: 'org.springframework.web.servlet.mvc.method.annotation', - function: 'handleReturnValue', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'HandlerMethodReturnValueHandlerComposite.java', - classname: - 'org.springframework.web.method.support.HandlerMethodReturnValueHandlerComposite', - line: { - number: 82, - }, - module: 'org.springframework.web.method.support', - function: 'handleReturnValue', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ServletInvocableHandlerMethod.java', - classname: - 'org.springframework.web.servlet.mvc.method.annotation.ServletInvocableHandlerMethod', - line: { - number: 119, - }, - module: 'org.springframework.web.servlet.mvc.method.annotation', - function: 'invokeAndHandle', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'RequestMappingHandlerAdapter.java', - classname: - 'org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter', - line: { - number: 877, - }, - module: 'org.springframework.web.servlet.mvc.method.annotation', - function: 'invokeHandlerMethod', - }, - { - exclude_from_grouping: false, - library_frame: true, - filename: 'RequestMappingHandlerAdapter.java', - classname: - 'org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter', - line: { - number: 783, - }, - module: 'org.springframework.web.servlet.mvc.method.annotation', - function: 'handleInternal', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'AbstractHandlerMethodAdapter.java', - classname: 'org.springframework.web.servlet.mvc.method.AbstractHandlerMethodAdapter', - line: { - number: 87, - }, - function: 'handle', - module: 'org.springframework.web.servlet.mvc.method', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'DispatcherServlet.java', - classname: 'org.springframework.web.servlet.DispatcherServlet', - line: { - number: 991, - }, - module: 'org.springframework.web.servlet', - function: 'doDispatch', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'DispatcherServlet.java', - classname: 'org.springframework.web.servlet.DispatcherServlet', - line: { - number: 925, - }, - module: 'org.springframework.web.servlet', - function: 'doService', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'FrameworkServlet.java', - classname: 'org.springframework.web.servlet.FrameworkServlet', - line: { - number: 974, - }, - module: 'org.springframework.web.servlet', - function: 'processRequest', - }, - { - exclude_from_grouping: false, - library_frame: true, - filename: 'FrameworkServlet.java', - classname: 'org.springframework.web.servlet.FrameworkServlet', - line: { - number: 866, - }, - module: 'org.springframework.web.servlet', - function: 'doGet', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'HttpServlet.java', - classname: 'javax.servlet.http.HttpServlet', - line: { - number: 635, - }, - function: 'service', - module: 'javax.servlet.http', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'FrameworkServlet.java', - classname: 'org.springframework.web.servlet.FrameworkServlet', - line: { - number: 851, - }, - module: 'org.springframework.web.servlet', - function: 'service', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'HttpServlet.java', - classname: 'javax.servlet.http.HttpServlet', - line: { - number: 742, - }, - module: 'javax.servlet.http', - function: 'service', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ApplicationFilterChain.java', - classname: 'org.apache.catalina.core.ApplicationFilterChain', - line: { - number: 231, - }, - module: 'org.apache.catalina.core', - function: 'internalDoFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ApplicationFilterChain.java', - classname: 'org.apache.catalina.core.ApplicationFilterChain', - line: { - number: 166, - }, - module: 'org.apache.catalina.core', - function: 'doFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'WsFilter.java', - classname: 'org.apache.tomcat.websocket.server.WsFilter', - line: { - number: 52, - }, - module: 'org.apache.tomcat.websocket.server', - function: 'doFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ApplicationFilterChain.java', - classname: 'org.apache.catalina.core.ApplicationFilterChain', - line: { - number: 193, - }, - module: 'org.apache.catalina.core', - function: 'internalDoFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ApplicationFilterChain.java', - classname: 'org.apache.catalina.core.ApplicationFilterChain', - line: { - number: 166, - }, - module: 'org.apache.catalina.core', - function: 'doFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'RequestContextFilter.java', - classname: 'org.springframework.web.filter.RequestContextFilter', - line: { - number: 99, - }, - module: 'org.springframework.web.filter', - function: 'doFilterInternal', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'OncePerRequestFilter.java', - classname: 'org.springframework.web.filter.OncePerRequestFilter', - line: { - number: 107, - }, - module: 'org.springframework.web.filter', - function: 'doFilter', - }, - { - exclude_from_grouping: false, - library_frame: true, - filename: 'ApplicationFilterChain.java', - classname: 'org.apache.catalina.core.ApplicationFilterChain', - line: { - number: 193, - }, - module: 'org.apache.catalina.core', - function: 'internalDoFilter', - }, - { - exclude_from_grouping: false, - library_frame: true, - filename: 'ApplicationFilterChain.java', - classname: 'org.apache.catalina.core.ApplicationFilterChain', - line: { - number: 166, - }, - module: 'org.apache.catalina.core', - function: 'doFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'HttpPutFormContentFilter.java', - classname: 'org.springframework.web.filter.HttpPutFormContentFilter', - line: { - number: 109, - }, - module: 'org.springframework.web.filter', - function: 'doFilterInternal', - }, - { - exclude_from_grouping: false, - library_frame: true, - filename: 'OncePerRequestFilter.java', - classname: 'org.springframework.web.filter.OncePerRequestFilter', - line: { - number: 107, - }, - module: 'org.springframework.web.filter', - function: 'doFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ApplicationFilterChain.java', - classname: 'org.apache.catalina.core.ApplicationFilterChain', - line: { - number: 193, - }, - module: 'org.apache.catalina.core', - function: 'internalDoFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ApplicationFilterChain.java', - classname: 'org.apache.catalina.core.ApplicationFilterChain', - line: { - number: 166, - }, - module: 'org.apache.catalina.core', - function: 'doFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'HiddenHttpMethodFilter.java', - classname: 'org.springframework.web.filter.HiddenHttpMethodFilter', - line: { - number: 81, - }, - module: 'org.springframework.web.filter', - function: 'doFilterInternal', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'OncePerRequestFilter.java', - classname: 'org.springframework.web.filter.OncePerRequestFilter', - line: { - number: 107, - }, - module: 'org.springframework.web.filter', - function: 'doFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ApplicationFilterChain.java', - classname: 'org.apache.catalina.core.ApplicationFilterChain', - line: { - number: 193, - }, - module: 'org.apache.catalina.core', - function: 'internalDoFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ApplicationFilterChain.java', - classname: 'org.apache.catalina.core.ApplicationFilterChain', - line: { - number: 166, - }, - module: 'org.apache.catalina.core', - function: 'doFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'CharacterEncodingFilter.java', - classname: 'org.springframework.web.filter.CharacterEncodingFilter', - line: { - number: 200, - }, - module: 'org.springframework.web.filter', - function: 'doFilterInternal', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'OncePerRequestFilter.java', - classname: 'org.springframework.web.filter.OncePerRequestFilter', - line: { - number: 107, - }, - module: 'org.springframework.web.filter', - function: 'doFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ApplicationFilterChain.java', - classname: 'org.apache.catalina.core.ApplicationFilterChain', - line: { - number: 193, - }, - module: 'org.apache.catalina.core', - function: 'internalDoFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ApplicationFilterChain.java', - classname: 'org.apache.catalina.core.ApplicationFilterChain', - line: { - number: 166, - }, - module: 'org.apache.catalina.core', - function: 'doFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'StandardWrapperValve.java', - classname: 'org.apache.catalina.core.StandardWrapperValve', - line: { - number: 198, - }, - module: 'org.apache.catalina.core', - function: 'invoke', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'StandardContextValve.java', - classname: 'org.apache.catalina.core.StandardContextValve', - line: { - number: 96, - }, - module: 'org.apache.catalina.core', - function: 'invoke', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'AuthenticatorBase.java', - classname: 'org.apache.catalina.authenticator.AuthenticatorBase', - line: { - number: 496, - }, - module: 'org.apache.catalina.authenticator', - function: 'invoke', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'StandardHostValve.java', - classname: 'org.apache.catalina.core.StandardHostValve', - line: { - number: 140, - }, - module: 'org.apache.catalina.core', - function: 'invoke', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ErrorReportValve.java', - classname: 'org.apache.catalina.valves.ErrorReportValve', - line: { - number: 81, - }, - module: 'org.apache.catalina.valves', - function: 'invoke', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'StandardEngineValve.java', - classname: 'org.apache.catalina.core.StandardEngineValve', - line: { - number: 87, - }, - function: 'invoke', - module: 'org.apache.catalina.core', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'CoyoteAdapter.java', - classname: 'org.apache.catalina.connector.CoyoteAdapter', - line: { - number: 342, - }, - module: 'org.apache.catalina.connector', - function: 'service', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'Http11Processor.java', - classname: 'org.apache.coyote.http11.Http11Processor', - line: { - number: 803, - }, - module: 'org.apache.coyote.http11', - function: 'service', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'AbstractProcessorLight.java', - classname: 'org.apache.coyote.AbstractProcessorLight', - line: { - number: 66, - }, - module: 'org.apache.coyote', - function: 'process', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'AbstractProtocol.java', - classname: 'org.apache.coyote.AbstractProtocol$ConnectionHandler', - line: { - number: 790, - }, - module: 'org.apache.coyote', - function: 'process', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'NioEndpoint.java', - classname: 'org.apache.tomcat.util.net.NioEndpoint$SocketProcessor', - line: { - number: 1468, - }, - function: 'doRun', - module: 'org.apache.tomcat.util.net', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'SocketProcessorBase.java', - classname: 'org.apache.tomcat.util.net.SocketProcessorBase', - line: { - number: 49, - }, - module: 'org.apache.tomcat.util.net', - function: 'run', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'TaskThread.java', - classname: 'org.apache.tomcat.util.threads.TaskThread$WrappingRunnable', - line: { - number: 61, - }, - function: 'run', - module: 'org.apache.tomcat.util.threads', - }, - ], - type: 'org.springframework.http.converter.HttpMessageNotWritableException', - message: - 'Could not write JSON: Null return value from advice does not match primitive return type for: public abstract double co.elastic.apm.opbeans.repositories.Numbers.getRevenue(); nested exception is com.fasterxml.jackson.databind.JsonMappingException: Null return value from advice does not match primitive return type for: public abstract double co.elastic.apm.opbeans.repositories.Numbers.getRevenue() (through reference chain: co.elastic.apm.opbeans.repositories.Stats["numbers"]->com.sun.proxy.$Proxy128["revenue"])', - }, - { - stacktrace: [ - { - exclude_from_grouping: false, - library_frame: true, - filename: 'JsonMappingException.java', - classname: 'com.fasterxml.jackson.databind.JsonMappingException', - line: { - number: 391, - }, - module: 'com.fasterxml.jackson.databind', - function: 'wrapWithPath', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'JsonMappingException.java', - classname: 'com.fasterxml.jackson.databind.JsonMappingException', - line: { - number: 351, - }, - module: 'com.fasterxml.jackson.databind', - function: 'wrapWithPath', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'StdSerializer.java', - classname: 'com.fasterxml.jackson.databind.ser.std.StdSerializer', - line: { - number: 316, - }, - function: 'wrapAndThrow', - module: 'com.fasterxml.jackson.databind.ser.std', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'BeanSerializerBase.java', - classname: 'com.fasterxml.jackson.databind.ser.std.BeanSerializerBase', - line: { - number: 727, - }, - module: 'com.fasterxml.jackson.databind.ser.std', - function: 'serializeFields', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'BeanSerializer.java', - classname: 'com.fasterxml.jackson.databind.ser.BeanSerializer', - line: { - number: 155, - }, - module: 'com.fasterxml.jackson.databind.ser', - function: 'serialize', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'BeanPropertyWriter.java', - classname: 'com.fasterxml.jackson.databind.ser.BeanPropertyWriter', - line: { - number: 727, - }, - module: 'com.fasterxml.jackson.databind.ser', - function: 'serializeAsField', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'BeanSerializerBase.java', - classname: 'com.fasterxml.jackson.databind.ser.std.BeanSerializerBase', - line: { - number: 719, - }, - module: 'com.fasterxml.jackson.databind.ser.std', - function: 'serializeFields', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'BeanSerializer.java', - classname: 'com.fasterxml.jackson.databind.ser.BeanSerializer', - line: { - number: 155, - }, - module: 'com.fasterxml.jackson.databind.ser', - function: 'serialize', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'DefaultSerializerProvider.java', - classname: 'com.fasterxml.jackson.databind.ser.DefaultSerializerProvider', - line: { - number: 480, - }, - module: 'com.fasterxml.jackson.databind.ser', - function: '_serialize', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'DefaultSerializerProvider.java', - classname: 'com.fasterxml.jackson.databind.ser.DefaultSerializerProvider', - line: { - number: 319, - }, - module: 'com.fasterxml.jackson.databind.ser', - function: 'serializeValue', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ObjectWriter.java', - classname: 'com.fasterxml.jackson.databind.ObjectWriter$Prefetch', - line: { - number: 1396, - }, - module: 'com.fasterxml.jackson.databind', - function: 'serialize', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ObjectWriter.java', - classname: 'com.fasterxml.jackson.databind.ObjectWriter', - line: { - number: 913, - }, - module: 'com.fasterxml.jackson.databind', - function: 'writeValue', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'AbstractJackson2HttpMessageConverter.java', - classname: 'org.springframework.http.converter.json.AbstractJackson2HttpMessageConverter', - line: { - number: 286, - }, - module: 'org.springframework.http.converter.json', - function: 'writeInternal', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'AbstractGenericHttpMessageConverter.java', - classname: 'org.springframework.http.converter.AbstractGenericHttpMessageConverter', - line: { - number: 102, - }, - module: 'org.springframework.http.converter', - function: 'write', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'AbstractMessageConverterMethodProcessor.java', - classname: - 'org.springframework.web.servlet.mvc.method.annotation.AbstractMessageConverterMethodProcessor', - line: { - number: 272, - }, - module: 'org.springframework.web.servlet.mvc.method.annotation', - function: 'writeWithMessageConverters', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'RequestResponseBodyMethodProcessor.java', - classname: - 'org.springframework.web.servlet.mvc.method.annotation.RequestResponseBodyMethodProcessor', - line: { - number: 180, - }, - module: 'org.springframework.web.servlet.mvc.method.annotation', - function: 'handleReturnValue', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'HandlerMethodReturnValueHandlerComposite.java', - classname: - 'org.springframework.web.method.support.HandlerMethodReturnValueHandlerComposite', - line: { - number: 82, - }, - module: 'org.springframework.web.method.support', - function: 'handleReturnValue', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ServletInvocableHandlerMethod.java', - classname: - 'org.springframework.web.servlet.mvc.method.annotation.ServletInvocableHandlerMethod', - line: { - number: 119, - }, - module: 'org.springframework.web.servlet.mvc.method.annotation', - function: 'invokeAndHandle', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'RequestMappingHandlerAdapter.java', - classname: - 'org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter', - line: { - number: 877, - }, - module: 'org.springframework.web.servlet.mvc.method.annotation', - function: 'invokeHandlerMethod', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'RequestMappingHandlerAdapter.java', - classname: - 'org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter', - line: { - number: 783, - }, - function: 'handleInternal', - module: 'org.springframework.web.servlet.mvc.method.annotation', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'AbstractHandlerMethodAdapter.java', - classname: 'org.springframework.web.servlet.mvc.method.AbstractHandlerMethodAdapter', - line: { - number: 87, - }, - module: 'org.springframework.web.servlet.mvc.method', - function: 'handle', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'DispatcherServlet.java', - classname: 'org.springframework.web.servlet.DispatcherServlet', - line: { - number: 991, - }, - module: 'org.springframework.web.servlet', - function: 'doDispatch', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'DispatcherServlet.java', - classname: 'org.springframework.web.servlet.DispatcherServlet', - line: { - number: 925, - }, - module: 'org.springframework.web.servlet', - function: 'doService', - }, - { - exclude_from_grouping: false, - library_frame: true, - filename: 'FrameworkServlet.java', - classname: 'org.springframework.web.servlet.FrameworkServlet', - line: { - number: 974, - }, - module: 'org.springframework.web.servlet', - function: 'processRequest', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'FrameworkServlet.java', - classname: 'org.springframework.web.servlet.FrameworkServlet', - line: { - number: 866, - }, - module: 'org.springframework.web.servlet', - function: 'doGet', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'HttpServlet.java', - classname: 'javax.servlet.http.HttpServlet', - line: { - number: 635, - }, - module: 'javax.servlet.http', - function: 'service', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'FrameworkServlet.java', - classname: 'org.springframework.web.servlet.FrameworkServlet', - line: { - number: 851, - }, - module: 'org.springframework.web.servlet', - function: 'service', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'HttpServlet.java', - classname: 'javax.servlet.http.HttpServlet', - line: { - number: 742, - }, - module: 'javax.servlet.http', - function: 'service', - }, - { - exclude_from_grouping: false, - library_frame: true, - filename: 'ApplicationFilterChain.java', - classname: 'org.apache.catalina.core.ApplicationFilterChain', - line: { - number: 231, - }, - module: 'org.apache.catalina.core', - function: 'internalDoFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ApplicationFilterChain.java', - classname: 'org.apache.catalina.core.ApplicationFilterChain', - line: { - number: 166, - }, - module: 'org.apache.catalina.core', - function: 'doFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'WsFilter.java', - classname: 'org.apache.tomcat.websocket.server.WsFilter', - line: { - number: 52, - }, - module: 'org.apache.tomcat.websocket.server', - function: 'doFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ApplicationFilterChain.java', - classname: 'org.apache.catalina.core.ApplicationFilterChain', - line: { - number: 193, - }, - module: 'org.apache.catalina.core', - function: 'internalDoFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ApplicationFilterChain.java', - classname: 'org.apache.catalina.core.ApplicationFilterChain', - line: { - number: 166, - }, - module: 'org.apache.catalina.core', - function: 'doFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'RequestContextFilter.java', - classname: 'org.springframework.web.filter.RequestContextFilter', - line: { - number: 99, - }, - module: 'org.springframework.web.filter', - function: 'doFilterInternal', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'OncePerRequestFilter.java', - classname: 'org.springframework.web.filter.OncePerRequestFilter', - line: { - number: 107, - }, - module: 'org.springframework.web.filter', - function: 'doFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ApplicationFilterChain.java', - classname: 'org.apache.catalina.core.ApplicationFilterChain', - line: { - number: 193, - }, - module: 'org.apache.catalina.core', - function: 'internalDoFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ApplicationFilterChain.java', - classname: 'org.apache.catalina.core.ApplicationFilterChain', - line: { - number: 166, - }, - module: 'org.apache.catalina.core', - function: 'doFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'HttpPutFormContentFilter.java', - classname: 'org.springframework.web.filter.HttpPutFormContentFilter', - line: { - number: 109, - }, - module: 'org.springframework.web.filter', - function: 'doFilterInternal', - }, - { - exclude_from_grouping: false, - library_frame: true, - filename: 'OncePerRequestFilter.java', - classname: 'org.springframework.web.filter.OncePerRequestFilter', - line: { - number: 107, - }, - module: 'org.springframework.web.filter', - function: 'doFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ApplicationFilterChain.java', - classname: 'org.apache.catalina.core.ApplicationFilterChain', - line: { - number: 193, - }, - module: 'org.apache.catalina.core', - function: 'internalDoFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ApplicationFilterChain.java', - classname: 'org.apache.catalina.core.ApplicationFilterChain', - line: { - number: 166, - }, - module: 'org.apache.catalina.core', - function: 'doFilter', - }, - { - exclude_from_grouping: false, - library_frame: true, - filename: 'HiddenHttpMethodFilter.java', - classname: 'org.springframework.web.filter.HiddenHttpMethodFilter', - line: { - number: 81, - }, - module: 'org.springframework.web.filter', - function: 'doFilterInternal', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'OncePerRequestFilter.java', - classname: 'org.springframework.web.filter.OncePerRequestFilter', - line: { - number: 107, - }, - module: 'org.springframework.web.filter', - function: 'doFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ApplicationFilterChain.java', - classname: 'org.apache.catalina.core.ApplicationFilterChain', - line: { - number: 193, - }, - module: 'org.apache.catalina.core', - function: 'internalDoFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ApplicationFilterChain.java', - classname: 'org.apache.catalina.core.ApplicationFilterChain', - line: { - number: 166, - }, - module: 'org.apache.catalina.core', - function: 'doFilter', - }, - { - exclude_from_grouping: false, - library_frame: true, - filename: 'CharacterEncodingFilter.java', - classname: 'org.springframework.web.filter.CharacterEncodingFilter', - line: { - number: 200, - }, - module: 'org.springframework.web.filter', - function: 'doFilterInternal', - }, - { - exclude_from_grouping: false, - library_frame: true, - filename: 'OncePerRequestFilter.java', - classname: 'org.springframework.web.filter.OncePerRequestFilter', - line: { - number: 107, - }, - module: 'org.springframework.web.filter', - function: 'doFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ApplicationFilterChain.java', - classname: 'org.apache.catalina.core.ApplicationFilterChain', - line: { - number: 193, - }, - module: 'org.apache.catalina.core', - function: 'internalDoFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ApplicationFilterChain.java', - classname: 'org.apache.catalina.core.ApplicationFilterChain', - line: { - number: 166, - }, - function: 'doFilter', - module: 'org.apache.catalina.core', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'StandardWrapperValve.java', - classname: 'org.apache.catalina.core.StandardWrapperValve', - line: { - number: 198, - }, - module: 'org.apache.catalina.core', - function: 'invoke', - }, - ], - message: - 'Null return value from advice does not match primitive return type for: public abstract double co.elastic.apm.opbeans.repositories.Numbers.getRevenue() (through reference chain: co.elastic.apm.opbeans.repositories.Stats["numbers"]->com.sun.proxy.$Proxy128["revenue"])', - type: 'com.fasterxml.jackson.databind.JsonMappingException', - }, - { - stacktrace: [ - { - exclude_from_grouping: false, - library_frame: true, - filename: 'JdkDynamicAopProxy.java', - classname: 'org.springframework.aop.framework.JdkDynamicAopProxy', - line: { - number: 226, - }, - module: 'org.springframework.aop.framework', - function: 'invoke', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'BeanPropertyWriter.java', - classname: 'com.fasterxml.jackson.databind.ser.BeanPropertyWriter', - line: { - number: 688, - }, - module: 'com.fasterxml.jackson.databind.ser', - function: 'serializeAsField', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'BeanSerializerBase.java', - classname: 'com.fasterxml.jackson.databind.ser.std.BeanSerializerBase', - line: { - number: 719, - }, - module: 'com.fasterxml.jackson.databind.ser.std', - function: 'serializeFields', - }, - { - exclude_from_grouping: false, - library_frame: true, - filename: 'BeanSerializer.java', - classname: 'com.fasterxml.jackson.databind.ser.BeanSerializer', - line: { - number: 155, - }, - module: 'com.fasterxml.jackson.databind.ser', - function: 'serialize', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'BeanPropertyWriter.java', - classname: 'com.fasterxml.jackson.databind.ser.BeanPropertyWriter', - line: { - number: 727, - }, - module: 'com.fasterxml.jackson.databind.ser', - function: 'serializeAsField', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'BeanSerializerBase.java', - classname: 'com.fasterxml.jackson.databind.ser.std.BeanSerializerBase', - line: { - number: 719, - }, - module: 'com.fasterxml.jackson.databind.ser.std', - function: 'serializeFields', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'BeanSerializer.java', - classname: 'com.fasterxml.jackson.databind.ser.BeanSerializer', - line: { - number: 155, - }, - module: 'com.fasterxml.jackson.databind.ser', - function: 'serialize', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'DefaultSerializerProvider.java', - classname: 'com.fasterxml.jackson.databind.ser.DefaultSerializerProvider', - line: { - number: 480, - }, - module: 'com.fasterxml.jackson.databind.ser', - function: '_serialize', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'DefaultSerializerProvider.java', - classname: 'com.fasterxml.jackson.databind.ser.DefaultSerializerProvider', - line: { - number: 319, - }, - module: 'com.fasterxml.jackson.databind.ser', - function: 'serializeValue', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ObjectWriter.java', - classname: 'com.fasterxml.jackson.databind.ObjectWriter$Prefetch', - line: { - number: 1396, - }, - module: 'com.fasterxml.jackson.databind', - function: 'serialize', - }, - { - exclude_from_grouping: false, - library_frame: true, - filename: 'ObjectWriter.java', - classname: 'com.fasterxml.jackson.databind.ObjectWriter', - line: { - number: 913, - }, - module: 'com.fasterxml.jackson.databind', - function: 'writeValue', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'AbstractJackson2HttpMessageConverter.java', - classname: 'org.springframework.http.converter.json.AbstractJackson2HttpMessageConverter', - line: { - number: 286, - }, - module: 'org.springframework.http.converter.json', - function: 'writeInternal', - }, - { - exclude_from_grouping: false, - library_frame: true, - filename: 'AbstractGenericHttpMessageConverter.java', - classname: 'org.springframework.http.converter.AbstractGenericHttpMessageConverter', - line: { - number: 102, - }, - module: 'org.springframework.http.converter', - function: 'write', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'AbstractMessageConverterMethodProcessor.java', - classname: - 'org.springframework.web.servlet.mvc.method.annotation.AbstractMessageConverterMethodProcessor', - line: { - number: 272, - }, - module: 'org.springframework.web.servlet.mvc.method.annotation', - function: 'writeWithMessageConverters', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'RequestResponseBodyMethodProcessor.java', - classname: - 'org.springframework.web.servlet.mvc.method.annotation.RequestResponseBodyMethodProcessor', - line: { - number: 180, - }, - function: 'handleReturnValue', - module: 'org.springframework.web.servlet.mvc.method.annotation', - }, - { - exclude_from_grouping: false, - library_frame: true, - filename: 'HandlerMethodReturnValueHandlerComposite.java', - classname: - 'org.springframework.web.method.support.HandlerMethodReturnValueHandlerComposite', - line: { - number: 82, - }, - module: 'org.springframework.web.method.support', - function: 'handleReturnValue', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ServletInvocableHandlerMethod.java', - classname: - 'org.springframework.web.servlet.mvc.method.annotation.ServletInvocableHandlerMethod', - line: { - number: 119, - }, - function: 'invokeAndHandle', - module: 'org.springframework.web.servlet.mvc.method.annotation', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'RequestMappingHandlerAdapter.java', - classname: - 'org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter', - line: { - number: 877, - }, - module: 'org.springframework.web.servlet.mvc.method.annotation', - function: 'invokeHandlerMethod', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'RequestMappingHandlerAdapter.java', - classname: - 'org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter', - line: { - number: 783, - }, - module: 'org.springframework.web.servlet.mvc.method.annotation', - function: 'handleInternal', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'AbstractHandlerMethodAdapter.java', - classname: 'org.springframework.web.servlet.mvc.method.AbstractHandlerMethodAdapter', - line: { - number: 87, - }, - module: 'org.springframework.web.servlet.mvc.method', - function: 'handle', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'DispatcherServlet.java', - classname: 'org.springframework.web.servlet.DispatcherServlet', - line: { - number: 991, - }, - module: 'org.springframework.web.servlet', - function: 'doDispatch', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'DispatcherServlet.java', - classname: 'org.springframework.web.servlet.DispatcherServlet', - line: { - number: 925, - }, - module: 'org.springframework.web.servlet', - function: 'doService', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'FrameworkServlet.java', - classname: 'org.springframework.web.servlet.FrameworkServlet', - line: { - number: 974, - }, - module: 'org.springframework.web.servlet', - function: 'processRequest', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'FrameworkServlet.java', - classname: 'org.springframework.web.servlet.FrameworkServlet', - line: { - number: 866, - }, - module: 'org.springframework.web.servlet', - function: 'doGet', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'HttpServlet.java', - classname: 'javax.servlet.http.HttpServlet', - line: { - number: 635, - }, - module: 'javax.servlet.http', - function: 'service', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'FrameworkServlet.java', - classname: 'org.springframework.web.servlet.FrameworkServlet', - line: { - number: 851, - }, - module: 'org.springframework.web.servlet', - function: 'service', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'HttpServlet.java', - classname: 'javax.servlet.http.HttpServlet', - line: { - number: 742, - }, - module: 'javax.servlet.http', - function: 'service', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ApplicationFilterChain.java', - classname: 'org.apache.catalina.core.ApplicationFilterChain', - line: { - number: 231, - }, - module: 'org.apache.catalina.core', - function: 'internalDoFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ApplicationFilterChain.java', - classname: 'org.apache.catalina.core.ApplicationFilterChain', - line: { - number: 166, - }, - module: 'org.apache.catalina.core', - function: 'doFilter', - }, - { - exclude_from_grouping: false, - library_frame: true, - filename: 'WsFilter.java', - classname: 'org.apache.tomcat.websocket.server.WsFilter', - line: { - number: 52, - }, - module: 'org.apache.tomcat.websocket.server', - function: 'doFilter', - }, - { - exclude_from_grouping: false, - library_frame: true, - filename: 'ApplicationFilterChain.java', - classname: 'org.apache.catalina.core.ApplicationFilterChain', - line: { - number: 193, - }, - module: 'org.apache.catalina.core', - function: 'internalDoFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ApplicationFilterChain.java', - classname: 'org.apache.catalina.core.ApplicationFilterChain', - line: { - number: 166, - }, - module: 'org.apache.catalina.core', - function: 'doFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'RequestContextFilter.java', - classname: 'org.springframework.web.filter.RequestContextFilter', - line: { - number: 99, - }, - module: 'org.springframework.web.filter', - function: 'doFilterInternal', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'OncePerRequestFilter.java', - classname: 'org.springframework.web.filter.OncePerRequestFilter', - line: { - number: 107, - }, - module: 'org.springframework.web.filter', - function: 'doFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ApplicationFilterChain.java', - classname: 'org.apache.catalina.core.ApplicationFilterChain', - line: { - number: 193, - }, - module: 'org.apache.catalina.core', - function: 'internalDoFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ApplicationFilterChain.java', - classname: 'org.apache.catalina.core.ApplicationFilterChain', - line: { - number: 166, - }, - module: 'org.apache.catalina.core', - function: 'doFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'HttpPutFormContentFilter.java', - classname: 'org.springframework.web.filter.HttpPutFormContentFilter', - line: { - number: 109, - }, - module: 'org.springframework.web.filter', - function: 'doFilterInternal', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'OncePerRequestFilter.java', - classname: 'org.springframework.web.filter.OncePerRequestFilter', - line: { - number: 107, - }, - module: 'org.springframework.web.filter', - function: 'doFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ApplicationFilterChain.java', - classname: 'org.apache.catalina.core.ApplicationFilterChain', - line: { - number: 193, - }, - module: 'org.apache.catalina.core', - function: 'internalDoFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ApplicationFilterChain.java', - classname: 'org.apache.catalina.core.ApplicationFilterChain', - line: { - number: 166, - }, - module: 'org.apache.catalina.core', - function: 'doFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'HiddenHttpMethodFilter.java', - classname: 'org.springframework.web.filter.HiddenHttpMethodFilter', - line: { - number: 81, - }, - module: 'org.springframework.web.filter', - function: 'doFilterInternal', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'OncePerRequestFilter.java', - classname: 'org.springframework.web.filter.OncePerRequestFilter', - line: { - number: 107, - }, - function: 'doFilter', - module: 'org.springframework.web.filter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ApplicationFilterChain.java', - classname: 'org.apache.catalina.core.ApplicationFilterChain', - line: { - number: 193, - }, - module: 'org.apache.catalina.core', - function: 'internalDoFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ApplicationFilterChain.java', - classname: 'org.apache.catalina.core.ApplicationFilterChain', - line: { - number: 166, - }, - function: 'doFilter', - module: 'org.apache.catalina.core', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'CharacterEncodingFilter.java', - classname: 'org.springframework.web.filter.CharacterEncodingFilter', - line: { - number: 200, - }, - module: 'org.springframework.web.filter', - function: 'doFilterInternal', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'OncePerRequestFilter.java', - classname: 'org.springframework.web.filter.OncePerRequestFilter', - line: { - number: 107, - }, - module: 'org.springframework.web.filter', - function: 'doFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ApplicationFilterChain.java', - classname: 'org.apache.catalina.core.ApplicationFilterChain', - line: { - number: 193, - }, - module: 'org.apache.catalina.core', - function: 'internalDoFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'ApplicationFilterChain.java', - classname: 'org.apache.catalina.core.ApplicationFilterChain', - line: { - number: 166, - }, - module: 'org.apache.catalina.core', - function: 'doFilter', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'StandardWrapperValve.java', - classname: 'org.apache.catalina.core.StandardWrapperValve', - line: { - number: 198, - }, - module: 'org.apache.catalina.core', - function: 'invoke', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'StandardContextValve.java', - classname: 'org.apache.catalina.core.StandardContextValve', - line: { - number: 96, - }, - function: 'invoke', - module: 'org.apache.catalina.core', - }, - ], - message: - 'Null return value from advice does not match primitive return type for: public abstract double co.elastic.apm.opbeans.repositories.Numbers.getRevenue()', - type: 'org.springframework.aop.AopInvocationException', - }, - ], -}; -JavaWithLongLines.decorators = [ - (StoryComponent: ComponentType) => ( -
- -
- ), -]; - -export const JavaScriptWithSomeContext: Story = (args) => ; -JavaScriptWithSomeContext.storyName = 'JavaScript With Some Context'; -JavaScriptWithSomeContext.args = { - codeLanguage: 'javascript', - exceptions: [ - { - code: '503', - stacktrace: [ - { - library_frame: true, - exclude_from_grouping: false, - filename: 'node_modules/elastic-apm-http-client/index.js', - abs_path: '/app/node_modules/elastic-apm-http-client/index.js', - line: { - number: 711, - context: - " const err = new Error('Unexpected APM Server response when polling config')", - }, - function: 'processConfigErrorResponse', - context: { - pre: ['', 'function processConfigErrorResponse (res, buf) {'], - post: ['', ' err.code = res.statusCode'], - }, - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'node_modules/elastic-apm-http-client/index.js', - abs_path: '/app/node_modules/elastic-apm-http-client/index.js', - line: { - number: 196, - context: ' res.destroy(processConfigErrorResponse(res, buf))', - }, - function: '', - context: { - pre: [' }', ' } else {'], - post: [' }', ' })'], - }, - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'node_modules/fast-stream-to-buffer/index.js', - abs_path: '/app/node_modules/fast-stream-to-buffer/index.js', - line: { - number: 20, - context: ' cb(err, buffers[0], stream)', - }, - function: 'IncomingMessage.', - context: { - pre: [' break', ' case 1:'], - post: [' break', ' default:'], - }, - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'node_modules/once/once.js', - abs_path: '/app/node_modules/once/once.js', - line: { - number: 25, - context: ' return f.value = fn.apply(this, arguments)', - }, - function: 'f', - context: { - pre: [' if (f.called) return f.value', ' f.called = true'], - post: [' }', ' f.called = false'], - }, - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'node_modules/end-of-stream/index.js', - abs_path: '/app/node_modules/end-of-stream/index.js', - line: { - number: 36, - context: '\t\tif (!writable) callback.call(stream);', - }, - function: 'onend', - context: { - pre: ['\tvar onend = function() {', '\t\treadable = false;'], - post: ['\t};', ''], - }, - }, - { - library_frame: true, - exclude_from_grouping: false, - abs_path: 'events.js', - filename: 'events.js', - line: { - number: 327, - }, - function: 'emit', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: '_stream_readable.js', - abs_path: '_stream_readable.js', - line: { - number: 1220, - }, - function: 'endReadableNT', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'internal/process/task_queues.js', - abs_path: 'internal/process/task_queues.js', - line: { - number: 84, - }, - function: 'processTicksAndRejections', - }, - ], - module: 'elastic-apm-http-client', - handled: false, - attributes: { - response: - '\r\n503 Service Temporarily Unavailable\r\n\r\n

503 Service Temporarily Unavailable

\r\n
nginx/1.17.7
\r\n\r\n\r\n', +export const JavaWithLongLines: StoryObj = { + args: { + codeLanguage: 'java', + exceptions: [ + { + stacktrace: [ + { + library_frame: true, + exclude_from_grouping: false, + filename: 'AbstractJackson2HttpMessageConverter.java', + classname: + 'org.springframework.http.converter.json.AbstractJackson2HttpMessageConverter', + line: { + number: 296, + }, + module: 'org.springframework.http.converter.json', + function: 'writeInternal', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'AbstractGenericHttpMessageConverter.java', + classname: 'org.springframework.http.converter.AbstractGenericHttpMessageConverter', + line: { + number: 102, + }, + module: 'org.springframework.http.converter', + function: 'write', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'AbstractMessageConverterMethodProcessor.java', + classname: + 'org.springframework.web.servlet.mvc.method.annotation.AbstractMessageConverterMethodProcessor', + line: { + number: 272, + }, + module: 'org.springframework.web.servlet.mvc.method.annotation', + function: 'writeWithMessageConverters', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'RequestResponseBodyMethodProcessor.java', + classname: + 'org.springframework.web.servlet.mvc.method.annotation.RequestResponseBodyMethodProcessor', + line: { + number: 180, + }, + module: 'org.springframework.web.servlet.mvc.method.annotation', + function: 'handleReturnValue', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'HandlerMethodReturnValueHandlerComposite.java', + classname: + 'org.springframework.web.method.support.HandlerMethodReturnValueHandlerComposite', + line: { + number: 82, + }, + module: 'org.springframework.web.method.support', + function: 'handleReturnValue', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ServletInvocableHandlerMethod.java', + classname: + 'org.springframework.web.servlet.mvc.method.annotation.ServletInvocableHandlerMethod', + line: { + number: 119, + }, + module: 'org.springframework.web.servlet.mvc.method.annotation', + function: 'invokeAndHandle', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'RequestMappingHandlerAdapter.java', + classname: + 'org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter', + line: { + number: 877, + }, + module: 'org.springframework.web.servlet.mvc.method.annotation', + function: 'invokeHandlerMethod', + }, + { + exclude_from_grouping: false, + library_frame: true, + filename: 'RequestMappingHandlerAdapter.java', + classname: + 'org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter', + line: { + number: 783, + }, + module: 'org.springframework.web.servlet.mvc.method.annotation', + function: 'handleInternal', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'AbstractHandlerMethodAdapter.java', + classname: 'org.springframework.web.servlet.mvc.method.AbstractHandlerMethodAdapter', + line: { + number: 87, + }, + function: 'handle', + module: 'org.springframework.web.servlet.mvc.method', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'DispatcherServlet.java', + classname: 'org.springframework.web.servlet.DispatcherServlet', + line: { + number: 991, + }, + module: 'org.springframework.web.servlet', + function: 'doDispatch', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'DispatcherServlet.java', + classname: 'org.springframework.web.servlet.DispatcherServlet', + line: { + number: 925, + }, + module: 'org.springframework.web.servlet', + function: 'doService', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'FrameworkServlet.java', + classname: 'org.springframework.web.servlet.FrameworkServlet', + line: { + number: 974, + }, + module: 'org.springframework.web.servlet', + function: 'processRequest', + }, + { + exclude_from_grouping: false, + library_frame: true, + filename: 'FrameworkServlet.java', + classname: 'org.springframework.web.servlet.FrameworkServlet', + line: { + number: 866, + }, + module: 'org.springframework.web.servlet', + function: 'doGet', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'HttpServlet.java', + classname: 'javax.servlet.http.HttpServlet', + line: { + number: 635, + }, + function: 'service', + module: 'javax.servlet.http', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'FrameworkServlet.java', + classname: 'org.springframework.web.servlet.FrameworkServlet', + line: { + number: 851, + }, + module: 'org.springframework.web.servlet', + function: 'service', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'HttpServlet.java', + classname: 'javax.servlet.http.HttpServlet', + line: { + number: 742, + }, + module: 'javax.servlet.http', + function: 'service', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ApplicationFilterChain.java', + classname: 'org.apache.catalina.core.ApplicationFilterChain', + line: { + number: 231, + }, + module: 'org.apache.catalina.core', + function: 'internalDoFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ApplicationFilterChain.java', + classname: 'org.apache.catalina.core.ApplicationFilterChain', + line: { + number: 166, + }, + module: 'org.apache.catalina.core', + function: 'doFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'WsFilter.java', + classname: 'org.apache.tomcat.websocket.server.WsFilter', + line: { + number: 52, + }, + module: 'org.apache.tomcat.websocket.server', + function: 'doFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ApplicationFilterChain.java', + classname: 'org.apache.catalina.core.ApplicationFilterChain', + line: { + number: 193, + }, + module: 'org.apache.catalina.core', + function: 'internalDoFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ApplicationFilterChain.java', + classname: 'org.apache.catalina.core.ApplicationFilterChain', + line: { + number: 166, + }, + module: 'org.apache.catalina.core', + function: 'doFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'RequestContextFilter.java', + classname: 'org.springframework.web.filter.RequestContextFilter', + line: { + number: 99, + }, + module: 'org.springframework.web.filter', + function: 'doFilterInternal', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'OncePerRequestFilter.java', + classname: 'org.springframework.web.filter.OncePerRequestFilter', + line: { + number: 107, + }, + module: 'org.springframework.web.filter', + function: 'doFilter', + }, + { + exclude_from_grouping: false, + library_frame: true, + filename: 'ApplicationFilterChain.java', + classname: 'org.apache.catalina.core.ApplicationFilterChain', + line: { + number: 193, + }, + module: 'org.apache.catalina.core', + function: 'internalDoFilter', + }, + { + exclude_from_grouping: false, + library_frame: true, + filename: 'ApplicationFilterChain.java', + classname: 'org.apache.catalina.core.ApplicationFilterChain', + line: { + number: 166, + }, + module: 'org.apache.catalina.core', + function: 'doFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'HttpPutFormContentFilter.java', + classname: 'org.springframework.web.filter.HttpPutFormContentFilter', + line: { + number: 109, + }, + module: 'org.springframework.web.filter', + function: 'doFilterInternal', + }, + { + exclude_from_grouping: false, + library_frame: true, + filename: 'OncePerRequestFilter.java', + classname: 'org.springframework.web.filter.OncePerRequestFilter', + line: { + number: 107, + }, + module: 'org.springframework.web.filter', + function: 'doFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ApplicationFilterChain.java', + classname: 'org.apache.catalina.core.ApplicationFilterChain', + line: { + number: 193, + }, + module: 'org.apache.catalina.core', + function: 'internalDoFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ApplicationFilterChain.java', + classname: 'org.apache.catalina.core.ApplicationFilterChain', + line: { + number: 166, + }, + module: 'org.apache.catalina.core', + function: 'doFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'HiddenHttpMethodFilter.java', + classname: 'org.springframework.web.filter.HiddenHttpMethodFilter', + line: { + number: 81, + }, + module: 'org.springframework.web.filter', + function: 'doFilterInternal', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'OncePerRequestFilter.java', + classname: 'org.springframework.web.filter.OncePerRequestFilter', + line: { + number: 107, + }, + module: 'org.springframework.web.filter', + function: 'doFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ApplicationFilterChain.java', + classname: 'org.apache.catalina.core.ApplicationFilterChain', + line: { + number: 193, + }, + module: 'org.apache.catalina.core', + function: 'internalDoFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ApplicationFilterChain.java', + classname: 'org.apache.catalina.core.ApplicationFilterChain', + line: { + number: 166, + }, + module: 'org.apache.catalina.core', + function: 'doFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'CharacterEncodingFilter.java', + classname: 'org.springframework.web.filter.CharacterEncodingFilter', + line: { + number: 200, + }, + module: 'org.springframework.web.filter', + function: 'doFilterInternal', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'OncePerRequestFilter.java', + classname: 'org.springframework.web.filter.OncePerRequestFilter', + line: { + number: 107, + }, + module: 'org.springframework.web.filter', + function: 'doFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ApplicationFilterChain.java', + classname: 'org.apache.catalina.core.ApplicationFilterChain', + line: { + number: 193, + }, + module: 'org.apache.catalina.core', + function: 'internalDoFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ApplicationFilterChain.java', + classname: 'org.apache.catalina.core.ApplicationFilterChain', + line: { + number: 166, + }, + module: 'org.apache.catalina.core', + function: 'doFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'StandardWrapperValve.java', + classname: 'org.apache.catalina.core.StandardWrapperValve', + line: { + number: 198, + }, + module: 'org.apache.catalina.core', + function: 'invoke', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'StandardContextValve.java', + classname: 'org.apache.catalina.core.StandardContextValve', + line: { + number: 96, + }, + module: 'org.apache.catalina.core', + function: 'invoke', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'AuthenticatorBase.java', + classname: 'org.apache.catalina.authenticator.AuthenticatorBase', + line: { + number: 496, + }, + module: 'org.apache.catalina.authenticator', + function: 'invoke', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'StandardHostValve.java', + classname: 'org.apache.catalina.core.StandardHostValve', + line: { + number: 140, + }, + module: 'org.apache.catalina.core', + function: 'invoke', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ErrorReportValve.java', + classname: 'org.apache.catalina.valves.ErrorReportValve', + line: { + number: 81, + }, + module: 'org.apache.catalina.valves', + function: 'invoke', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'StandardEngineValve.java', + classname: 'org.apache.catalina.core.StandardEngineValve', + line: { + number: 87, + }, + function: 'invoke', + module: 'org.apache.catalina.core', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'CoyoteAdapter.java', + classname: 'org.apache.catalina.connector.CoyoteAdapter', + line: { + number: 342, + }, + module: 'org.apache.catalina.connector', + function: 'service', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'Http11Processor.java', + classname: 'org.apache.coyote.http11.Http11Processor', + line: { + number: 803, + }, + module: 'org.apache.coyote.http11', + function: 'service', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'AbstractProcessorLight.java', + classname: 'org.apache.coyote.AbstractProcessorLight', + line: { + number: 66, + }, + module: 'org.apache.coyote', + function: 'process', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'AbstractProtocol.java', + classname: 'org.apache.coyote.AbstractProtocol$ConnectionHandler', + line: { + number: 790, + }, + module: 'org.apache.coyote', + function: 'process', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'NioEndpoint.java', + classname: 'org.apache.tomcat.util.net.NioEndpoint$SocketProcessor', + line: { + number: 1468, + }, + function: 'doRun', + module: 'org.apache.tomcat.util.net', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'SocketProcessorBase.java', + classname: 'org.apache.tomcat.util.net.SocketProcessorBase', + line: { + number: 49, + }, + module: 'org.apache.tomcat.util.net', + function: 'run', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'TaskThread.java', + classname: 'org.apache.tomcat.util.threads.TaskThread$WrappingRunnable', + line: { + number: 61, + }, + function: 'run', + module: 'org.apache.tomcat.util.threads', + }, + ], + type: 'org.springframework.http.converter.HttpMessageNotWritableException', + message: + 'Could not write JSON: Null return value from advice does not match primitive return type for: public abstract double co.elastic.apm.opbeans.repositories.Numbers.getRevenue(); nested exception is com.fasterxml.jackson.databind.JsonMappingException: Null return value from advice does not match primitive return type for: public abstract double co.elastic.apm.opbeans.repositories.Numbers.getRevenue() (through reference chain: co.elastic.apm.opbeans.repositories.Stats["numbers"]->com.sun.proxy.$Proxy128["revenue"])', }, - type: 'Error', - message: 'Unexpected APM Server response when polling config', - }, + { + stacktrace: [ + { + exclude_from_grouping: false, + library_frame: true, + filename: 'JsonMappingException.java', + classname: 'com.fasterxml.jackson.databind.JsonMappingException', + line: { + number: 391, + }, + module: 'com.fasterxml.jackson.databind', + function: 'wrapWithPath', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'JsonMappingException.java', + classname: 'com.fasterxml.jackson.databind.JsonMappingException', + line: { + number: 351, + }, + module: 'com.fasterxml.jackson.databind', + function: 'wrapWithPath', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'StdSerializer.java', + classname: 'com.fasterxml.jackson.databind.ser.std.StdSerializer', + line: { + number: 316, + }, + function: 'wrapAndThrow', + module: 'com.fasterxml.jackson.databind.ser.std', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'BeanSerializerBase.java', + classname: 'com.fasterxml.jackson.databind.ser.std.BeanSerializerBase', + line: { + number: 727, + }, + module: 'com.fasterxml.jackson.databind.ser.std', + function: 'serializeFields', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'BeanSerializer.java', + classname: 'com.fasterxml.jackson.databind.ser.BeanSerializer', + line: { + number: 155, + }, + module: 'com.fasterxml.jackson.databind.ser', + function: 'serialize', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'BeanPropertyWriter.java', + classname: 'com.fasterxml.jackson.databind.ser.BeanPropertyWriter', + line: { + number: 727, + }, + module: 'com.fasterxml.jackson.databind.ser', + function: 'serializeAsField', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'BeanSerializerBase.java', + classname: 'com.fasterxml.jackson.databind.ser.std.BeanSerializerBase', + line: { + number: 719, + }, + module: 'com.fasterxml.jackson.databind.ser.std', + function: 'serializeFields', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'BeanSerializer.java', + classname: 'com.fasterxml.jackson.databind.ser.BeanSerializer', + line: { + number: 155, + }, + module: 'com.fasterxml.jackson.databind.ser', + function: 'serialize', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'DefaultSerializerProvider.java', + classname: 'com.fasterxml.jackson.databind.ser.DefaultSerializerProvider', + line: { + number: 480, + }, + module: 'com.fasterxml.jackson.databind.ser', + function: '_serialize', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'DefaultSerializerProvider.java', + classname: 'com.fasterxml.jackson.databind.ser.DefaultSerializerProvider', + line: { + number: 319, + }, + module: 'com.fasterxml.jackson.databind.ser', + function: 'serializeValue', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ObjectWriter.java', + classname: 'com.fasterxml.jackson.databind.ObjectWriter$Prefetch', + line: { + number: 1396, + }, + module: 'com.fasterxml.jackson.databind', + function: 'serialize', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ObjectWriter.java', + classname: 'com.fasterxml.jackson.databind.ObjectWriter', + line: { + number: 913, + }, + module: 'com.fasterxml.jackson.databind', + function: 'writeValue', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'AbstractJackson2HttpMessageConverter.java', + classname: + 'org.springframework.http.converter.json.AbstractJackson2HttpMessageConverter', + line: { + number: 286, + }, + module: 'org.springframework.http.converter.json', + function: 'writeInternal', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'AbstractGenericHttpMessageConverter.java', + classname: 'org.springframework.http.converter.AbstractGenericHttpMessageConverter', + line: { + number: 102, + }, + module: 'org.springframework.http.converter', + function: 'write', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'AbstractMessageConverterMethodProcessor.java', + classname: + 'org.springframework.web.servlet.mvc.method.annotation.AbstractMessageConverterMethodProcessor', + line: { + number: 272, + }, + module: 'org.springframework.web.servlet.mvc.method.annotation', + function: 'writeWithMessageConverters', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'RequestResponseBodyMethodProcessor.java', + classname: + 'org.springframework.web.servlet.mvc.method.annotation.RequestResponseBodyMethodProcessor', + line: { + number: 180, + }, + module: 'org.springframework.web.servlet.mvc.method.annotation', + function: 'handleReturnValue', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'HandlerMethodReturnValueHandlerComposite.java', + classname: + 'org.springframework.web.method.support.HandlerMethodReturnValueHandlerComposite', + line: { + number: 82, + }, + module: 'org.springframework.web.method.support', + function: 'handleReturnValue', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ServletInvocableHandlerMethod.java', + classname: + 'org.springframework.web.servlet.mvc.method.annotation.ServletInvocableHandlerMethod', + line: { + number: 119, + }, + module: 'org.springframework.web.servlet.mvc.method.annotation', + function: 'invokeAndHandle', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'RequestMappingHandlerAdapter.java', + classname: + 'org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter', + line: { + number: 877, + }, + module: 'org.springframework.web.servlet.mvc.method.annotation', + function: 'invokeHandlerMethod', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'RequestMappingHandlerAdapter.java', + classname: + 'org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter', + line: { + number: 783, + }, + function: 'handleInternal', + module: 'org.springframework.web.servlet.mvc.method.annotation', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'AbstractHandlerMethodAdapter.java', + classname: 'org.springframework.web.servlet.mvc.method.AbstractHandlerMethodAdapter', + line: { + number: 87, + }, + module: 'org.springframework.web.servlet.mvc.method', + function: 'handle', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'DispatcherServlet.java', + classname: 'org.springframework.web.servlet.DispatcherServlet', + line: { + number: 991, + }, + module: 'org.springframework.web.servlet', + function: 'doDispatch', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'DispatcherServlet.java', + classname: 'org.springframework.web.servlet.DispatcherServlet', + line: { + number: 925, + }, + module: 'org.springframework.web.servlet', + function: 'doService', + }, + { + exclude_from_grouping: false, + library_frame: true, + filename: 'FrameworkServlet.java', + classname: 'org.springframework.web.servlet.FrameworkServlet', + line: { + number: 974, + }, + module: 'org.springframework.web.servlet', + function: 'processRequest', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'FrameworkServlet.java', + classname: 'org.springframework.web.servlet.FrameworkServlet', + line: { + number: 866, + }, + module: 'org.springframework.web.servlet', + function: 'doGet', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'HttpServlet.java', + classname: 'javax.servlet.http.HttpServlet', + line: { + number: 635, + }, + module: 'javax.servlet.http', + function: 'service', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'FrameworkServlet.java', + classname: 'org.springframework.web.servlet.FrameworkServlet', + line: { + number: 851, + }, + module: 'org.springframework.web.servlet', + function: 'service', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'HttpServlet.java', + classname: 'javax.servlet.http.HttpServlet', + line: { + number: 742, + }, + module: 'javax.servlet.http', + function: 'service', + }, + { + exclude_from_grouping: false, + library_frame: true, + filename: 'ApplicationFilterChain.java', + classname: 'org.apache.catalina.core.ApplicationFilterChain', + line: { + number: 231, + }, + module: 'org.apache.catalina.core', + function: 'internalDoFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ApplicationFilterChain.java', + classname: 'org.apache.catalina.core.ApplicationFilterChain', + line: { + number: 166, + }, + module: 'org.apache.catalina.core', + function: 'doFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'WsFilter.java', + classname: 'org.apache.tomcat.websocket.server.WsFilter', + line: { + number: 52, + }, + module: 'org.apache.tomcat.websocket.server', + function: 'doFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ApplicationFilterChain.java', + classname: 'org.apache.catalina.core.ApplicationFilterChain', + line: { + number: 193, + }, + module: 'org.apache.catalina.core', + function: 'internalDoFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ApplicationFilterChain.java', + classname: 'org.apache.catalina.core.ApplicationFilterChain', + line: { + number: 166, + }, + module: 'org.apache.catalina.core', + function: 'doFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'RequestContextFilter.java', + classname: 'org.springframework.web.filter.RequestContextFilter', + line: { + number: 99, + }, + module: 'org.springframework.web.filter', + function: 'doFilterInternal', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'OncePerRequestFilter.java', + classname: 'org.springframework.web.filter.OncePerRequestFilter', + line: { + number: 107, + }, + module: 'org.springframework.web.filter', + function: 'doFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ApplicationFilterChain.java', + classname: 'org.apache.catalina.core.ApplicationFilterChain', + line: { + number: 193, + }, + module: 'org.apache.catalina.core', + function: 'internalDoFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ApplicationFilterChain.java', + classname: 'org.apache.catalina.core.ApplicationFilterChain', + line: { + number: 166, + }, + module: 'org.apache.catalina.core', + function: 'doFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'HttpPutFormContentFilter.java', + classname: 'org.springframework.web.filter.HttpPutFormContentFilter', + line: { + number: 109, + }, + module: 'org.springframework.web.filter', + function: 'doFilterInternal', + }, + { + exclude_from_grouping: false, + library_frame: true, + filename: 'OncePerRequestFilter.java', + classname: 'org.springframework.web.filter.OncePerRequestFilter', + line: { + number: 107, + }, + module: 'org.springframework.web.filter', + function: 'doFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ApplicationFilterChain.java', + classname: 'org.apache.catalina.core.ApplicationFilterChain', + line: { + number: 193, + }, + module: 'org.apache.catalina.core', + function: 'internalDoFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ApplicationFilterChain.java', + classname: 'org.apache.catalina.core.ApplicationFilterChain', + line: { + number: 166, + }, + module: 'org.apache.catalina.core', + function: 'doFilter', + }, + { + exclude_from_grouping: false, + library_frame: true, + filename: 'HiddenHttpMethodFilter.java', + classname: 'org.springframework.web.filter.HiddenHttpMethodFilter', + line: { + number: 81, + }, + module: 'org.springframework.web.filter', + function: 'doFilterInternal', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'OncePerRequestFilter.java', + classname: 'org.springframework.web.filter.OncePerRequestFilter', + line: { + number: 107, + }, + module: 'org.springframework.web.filter', + function: 'doFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ApplicationFilterChain.java', + classname: 'org.apache.catalina.core.ApplicationFilterChain', + line: { + number: 193, + }, + module: 'org.apache.catalina.core', + function: 'internalDoFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ApplicationFilterChain.java', + classname: 'org.apache.catalina.core.ApplicationFilterChain', + line: { + number: 166, + }, + module: 'org.apache.catalina.core', + function: 'doFilter', + }, + { + exclude_from_grouping: false, + library_frame: true, + filename: 'CharacterEncodingFilter.java', + classname: 'org.springframework.web.filter.CharacterEncodingFilter', + line: { + number: 200, + }, + module: 'org.springframework.web.filter', + function: 'doFilterInternal', + }, + { + exclude_from_grouping: false, + library_frame: true, + filename: 'OncePerRequestFilter.java', + classname: 'org.springframework.web.filter.OncePerRequestFilter', + line: { + number: 107, + }, + module: 'org.springframework.web.filter', + function: 'doFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ApplicationFilterChain.java', + classname: 'org.apache.catalina.core.ApplicationFilterChain', + line: { + number: 193, + }, + module: 'org.apache.catalina.core', + function: 'internalDoFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ApplicationFilterChain.java', + classname: 'org.apache.catalina.core.ApplicationFilterChain', + line: { + number: 166, + }, + function: 'doFilter', + module: 'org.apache.catalina.core', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'StandardWrapperValve.java', + classname: 'org.apache.catalina.core.StandardWrapperValve', + line: { + number: 198, + }, + module: 'org.apache.catalina.core', + function: 'invoke', + }, + ], + message: + 'Null return value from advice does not match primitive return type for: public abstract double co.elastic.apm.opbeans.repositories.Numbers.getRevenue() (through reference chain: co.elastic.apm.opbeans.repositories.Stats["numbers"]->com.sun.proxy.$Proxy128["revenue"])', + type: 'com.fasterxml.jackson.databind.JsonMappingException', + }, + { + stacktrace: [ + { + exclude_from_grouping: false, + library_frame: true, + filename: 'JdkDynamicAopProxy.java', + classname: 'org.springframework.aop.framework.JdkDynamicAopProxy', + line: { + number: 226, + }, + module: 'org.springframework.aop.framework', + function: 'invoke', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'BeanPropertyWriter.java', + classname: 'com.fasterxml.jackson.databind.ser.BeanPropertyWriter', + line: { + number: 688, + }, + module: 'com.fasterxml.jackson.databind.ser', + function: 'serializeAsField', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'BeanSerializerBase.java', + classname: 'com.fasterxml.jackson.databind.ser.std.BeanSerializerBase', + line: { + number: 719, + }, + module: 'com.fasterxml.jackson.databind.ser.std', + function: 'serializeFields', + }, + { + exclude_from_grouping: false, + library_frame: true, + filename: 'BeanSerializer.java', + classname: 'com.fasterxml.jackson.databind.ser.BeanSerializer', + line: { + number: 155, + }, + module: 'com.fasterxml.jackson.databind.ser', + function: 'serialize', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'BeanPropertyWriter.java', + classname: 'com.fasterxml.jackson.databind.ser.BeanPropertyWriter', + line: { + number: 727, + }, + module: 'com.fasterxml.jackson.databind.ser', + function: 'serializeAsField', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'BeanSerializerBase.java', + classname: 'com.fasterxml.jackson.databind.ser.std.BeanSerializerBase', + line: { + number: 719, + }, + module: 'com.fasterxml.jackson.databind.ser.std', + function: 'serializeFields', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'BeanSerializer.java', + classname: 'com.fasterxml.jackson.databind.ser.BeanSerializer', + line: { + number: 155, + }, + module: 'com.fasterxml.jackson.databind.ser', + function: 'serialize', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'DefaultSerializerProvider.java', + classname: 'com.fasterxml.jackson.databind.ser.DefaultSerializerProvider', + line: { + number: 480, + }, + module: 'com.fasterxml.jackson.databind.ser', + function: '_serialize', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'DefaultSerializerProvider.java', + classname: 'com.fasterxml.jackson.databind.ser.DefaultSerializerProvider', + line: { + number: 319, + }, + module: 'com.fasterxml.jackson.databind.ser', + function: 'serializeValue', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ObjectWriter.java', + classname: 'com.fasterxml.jackson.databind.ObjectWriter$Prefetch', + line: { + number: 1396, + }, + module: 'com.fasterxml.jackson.databind', + function: 'serialize', + }, + { + exclude_from_grouping: false, + library_frame: true, + filename: 'ObjectWriter.java', + classname: 'com.fasterxml.jackson.databind.ObjectWriter', + line: { + number: 913, + }, + module: 'com.fasterxml.jackson.databind', + function: 'writeValue', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'AbstractJackson2HttpMessageConverter.java', + classname: + 'org.springframework.http.converter.json.AbstractJackson2HttpMessageConverter', + line: { + number: 286, + }, + module: 'org.springframework.http.converter.json', + function: 'writeInternal', + }, + { + exclude_from_grouping: false, + library_frame: true, + filename: 'AbstractGenericHttpMessageConverter.java', + classname: 'org.springframework.http.converter.AbstractGenericHttpMessageConverter', + line: { + number: 102, + }, + module: 'org.springframework.http.converter', + function: 'write', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'AbstractMessageConverterMethodProcessor.java', + classname: + 'org.springframework.web.servlet.mvc.method.annotation.AbstractMessageConverterMethodProcessor', + line: { + number: 272, + }, + module: 'org.springframework.web.servlet.mvc.method.annotation', + function: 'writeWithMessageConverters', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'RequestResponseBodyMethodProcessor.java', + classname: + 'org.springframework.web.servlet.mvc.method.annotation.RequestResponseBodyMethodProcessor', + line: { + number: 180, + }, + function: 'handleReturnValue', + module: 'org.springframework.web.servlet.mvc.method.annotation', + }, + { + exclude_from_grouping: false, + library_frame: true, + filename: 'HandlerMethodReturnValueHandlerComposite.java', + classname: + 'org.springframework.web.method.support.HandlerMethodReturnValueHandlerComposite', + line: { + number: 82, + }, + module: 'org.springframework.web.method.support', + function: 'handleReturnValue', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ServletInvocableHandlerMethod.java', + classname: + 'org.springframework.web.servlet.mvc.method.annotation.ServletInvocableHandlerMethod', + line: { + number: 119, + }, + function: 'invokeAndHandle', + module: 'org.springframework.web.servlet.mvc.method.annotation', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'RequestMappingHandlerAdapter.java', + classname: + 'org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter', + line: { + number: 877, + }, + module: 'org.springframework.web.servlet.mvc.method.annotation', + function: 'invokeHandlerMethod', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'RequestMappingHandlerAdapter.java', + classname: + 'org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter', + line: { + number: 783, + }, + module: 'org.springframework.web.servlet.mvc.method.annotation', + function: 'handleInternal', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'AbstractHandlerMethodAdapter.java', + classname: 'org.springframework.web.servlet.mvc.method.AbstractHandlerMethodAdapter', + line: { + number: 87, + }, + module: 'org.springframework.web.servlet.mvc.method', + function: 'handle', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'DispatcherServlet.java', + classname: 'org.springframework.web.servlet.DispatcherServlet', + line: { + number: 991, + }, + module: 'org.springframework.web.servlet', + function: 'doDispatch', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'DispatcherServlet.java', + classname: 'org.springframework.web.servlet.DispatcherServlet', + line: { + number: 925, + }, + module: 'org.springframework.web.servlet', + function: 'doService', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'FrameworkServlet.java', + classname: 'org.springframework.web.servlet.FrameworkServlet', + line: { + number: 974, + }, + module: 'org.springframework.web.servlet', + function: 'processRequest', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'FrameworkServlet.java', + classname: 'org.springframework.web.servlet.FrameworkServlet', + line: { + number: 866, + }, + module: 'org.springframework.web.servlet', + function: 'doGet', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'HttpServlet.java', + classname: 'javax.servlet.http.HttpServlet', + line: { + number: 635, + }, + module: 'javax.servlet.http', + function: 'service', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'FrameworkServlet.java', + classname: 'org.springframework.web.servlet.FrameworkServlet', + line: { + number: 851, + }, + module: 'org.springframework.web.servlet', + function: 'service', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'HttpServlet.java', + classname: 'javax.servlet.http.HttpServlet', + line: { + number: 742, + }, + module: 'javax.servlet.http', + function: 'service', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ApplicationFilterChain.java', + classname: 'org.apache.catalina.core.ApplicationFilterChain', + line: { + number: 231, + }, + module: 'org.apache.catalina.core', + function: 'internalDoFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ApplicationFilterChain.java', + classname: 'org.apache.catalina.core.ApplicationFilterChain', + line: { + number: 166, + }, + module: 'org.apache.catalina.core', + function: 'doFilter', + }, + { + exclude_from_grouping: false, + library_frame: true, + filename: 'WsFilter.java', + classname: 'org.apache.tomcat.websocket.server.WsFilter', + line: { + number: 52, + }, + module: 'org.apache.tomcat.websocket.server', + function: 'doFilter', + }, + { + exclude_from_grouping: false, + library_frame: true, + filename: 'ApplicationFilterChain.java', + classname: 'org.apache.catalina.core.ApplicationFilterChain', + line: { + number: 193, + }, + module: 'org.apache.catalina.core', + function: 'internalDoFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ApplicationFilterChain.java', + classname: 'org.apache.catalina.core.ApplicationFilterChain', + line: { + number: 166, + }, + module: 'org.apache.catalina.core', + function: 'doFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'RequestContextFilter.java', + classname: 'org.springframework.web.filter.RequestContextFilter', + line: { + number: 99, + }, + module: 'org.springframework.web.filter', + function: 'doFilterInternal', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'OncePerRequestFilter.java', + classname: 'org.springframework.web.filter.OncePerRequestFilter', + line: { + number: 107, + }, + module: 'org.springframework.web.filter', + function: 'doFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ApplicationFilterChain.java', + classname: 'org.apache.catalina.core.ApplicationFilterChain', + line: { + number: 193, + }, + module: 'org.apache.catalina.core', + function: 'internalDoFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ApplicationFilterChain.java', + classname: 'org.apache.catalina.core.ApplicationFilterChain', + line: { + number: 166, + }, + module: 'org.apache.catalina.core', + function: 'doFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'HttpPutFormContentFilter.java', + classname: 'org.springframework.web.filter.HttpPutFormContentFilter', + line: { + number: 109, + }, + module: 'org.springframework.web.filter', + function: 'doFilterInternal', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'OncePerRequestFilter.java', + classname: 'org.springframework.web.filter.OncePerRequestFilter', + line: { + number: 107, + }, + module: 'org.springframework.web.filter', + function: 'doFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ApplicationFilterChain.java', + classname: 'org.apache.catalina.core.ApplicationFilterChain', + line: { + number: 193, + }, + module: 'org.apache.catalina.core', + function: 'internalDoFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ApplicationFilterChain.java', + classname: 'org.apache.catalina.core.ApplicationFilterChain', + line: { + number: 166, + }, + module: 'org.apache.catalina.core', + function: 'doFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'HiddenHttpMethodFilter.java', + classname: 'org.springframework.web.filter.HiddenHttpMethodFilter', + line: { + number: 81, + }, + module: 'org.springframework.web.filter', + function: 'doFilterInternal', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'OncePerRequestFilter.java', + classname: 'org.springframework.web.filter.OncePerRequestFilter', + line: { + number: 107, + }, + function: 'doFilter', + module: 'org.springframework.web.filter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ApplicationFilterChain.java', + classname: 'org.apache.catalina.core.ApplicationFilterChain', + line: { + number: 193, + }, + module: 'org.apache.catalina.core', + function: 'internalDoFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ApplicationFilterChain.java', + classname: 'org.apache.catalina.core.ApplicationFilterChain', + line: { + number: 166, + }, + function: 'doFilter', + module: 'org.apache.catalina.core', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'CharacterEncodingFilter.java', + classname: 'org.springframework.web.filter.CharacterEncodingFilter', + line: { + number: 200, + }, + module: 'org.springframework.web.filter', + function: 'doFilterInternal', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'OncePerRequestFilter.java', + classname: 'org.springframework.web.filter.OncePerRequestFilter', + line: { + number: 107, + }, + module: 'org.springframework.web.filter', + function: 'doFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ApplicationFilterChain.java', + classname: 'org.apache.catalina.core.ApplicationFilterChain', + line: { + number: 193, + }, + module: 'org.apache.catalina.core', + function: 'internalDoFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'ApplicationFilterChain.java', + classname: 'org.apache.catalina.core.ApplicationFilterChain', + line: { + number: 166, + }, + module: 'org.apache.catalina.core', + function: 'doFilter', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'StandardWrapperValve.java', + classname: 'org.apache.catalina.core.StandardWrapperValve', + line: { + number: 198, + }, + module: 'org.apache.catalina.core', + function: 'invoke', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'StandardContextValve.java', + classname: 'org.apache.catalina.core.StandardContextValve', + line: { + number: 96, + }, + function: 'invoke', + module: 'org.apache.catalina.core', + }, + ], + message: + 'Null return value from advice does not match primitive return type for: public abstract double co.elastic.apm.opbeans.repositories.Numbers.getRevenue()', + type: 'org.springframework.aop.AopInvocationException', + }, + ], + }, + + decorators: [ + (StoryComponent: ComponentType) => ( +
+ +
+ ), ], }; -export const RubyWithContextAndLibraryFrames: Story = (args) => ( - -); -RubyWithContextAndLibraryFrames.args = { - codeLanguage: 'ruby', - exceptions: [ - { - stacktrace: [ - { - library_frame: true, - exclude_from_grouping: false, - filename: 'active_record/core.rb', - abs_path: '/usr/local/bundle/gems/activerecord-5.2.4.1/lib/active_record/core.rb', - line: { - number: 177, +export const JavaScriptWithSomeContext: StoryObj = { + name: 'JavaScript With Some Context', + + args: { + codeLanguage: 'javascript', + exceptions: [ + { + code: '503', + stacktrace: [ + { + library_frame: true, + exclude_from_grouping: false, + filename: 'node_modules/elastic-apm-http-client/index.js', + abs_path: '/app/node_modules/elastic-apm-http-client/index.js', + line: { + number: 711, + context: + " const err = new Error('Unexpected APM Server response when polling config')", + }, + function: 'processConfigErrorResponse', + context: { + pre: ['', 'function processConfigErrorResponse (res, buf) {'], + post: ['', ' err.code = res.statusCode'], + }, }, - function: 'find', + { + library_frame: true, + exclude_from_grouping: false, + filename: 'node_modules/elastic-apm-http-client/index.js', + abs_path: '/app/node_modules/elastic-apm-http-client/index.js', + line: { + number: 196, + context: ' res.destroy(processConfigErrorResponse(res, buf))', + }, + function: '', + context: { + pre: [' }', ' } else {'], + post: [' }', ' })'], + }, + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'node_modules/fast-stream-to-buffer/index.js', + abs_path: '/app/node_modules/fast-stream-to-buffer/index.js', + line: { + number: 20, + context: ' cb(err, buffers[0], stream)', + }, + function: 'IncomingMessage.', + context: { + pre: [' break', ' case 1:'], + post: [' break', ' default:'], + }, + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'node_modules/once/once.js', + abs_path: '/app/node_modules/once/once.js', + line: { + number: 25, + context: ' return f.value = fn.apply(this, arguments)', + }, + function: 'f', + context: { + pre: [' if (f.called) return f.value', ' f.called = true'], + post: [' }', ' f.called = false'], + }, + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'node_modules/end-of-stream/index.js', + abs_path: '/app/node_modules/end-of-stream/index.js', + line: { + number: 36, + context: '\t\tif (!writable) callback.call(stream);', + }, + function: 'onend', + context: { + pre: ['\tvar onend = function() {', '\t\treadable = false;'], + post: ['\t};', ''], + }, + }, + { + library_frame: true, + exclude_from_grouping: false, + abs_path: 'events.js', + filename: 'events.js', + line: { + number: 327, + }, + function: 'emit', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: '_stream_readable.js', + abs_path: '_stream_readable.js', + line: { + number: 1220, + }, + function: 'endReadableNT', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'internal/process/task_queues.js', + abs_path: 'internal/process/task_queues.js', + line: { + number: 84, + }, + function: 'processTicksAndRejections', + }, + ], + module: 'elastic-apm-http-client', + handled: false, + attributes: { + response: + '\r\n503 Service Temporarily Unavailable\r\n\r\n

503 Service Temporarily Unavailable

\r\n
nginx/1.17.7
\r\n\r\n\r\n', }, - { - library_frame: false, - exclude_from_grouping: false, - filename: 'api/orders_controller.rb', - abs_path: '/app/app/controllers/api/orders_controller.rb', - line: { - number: 23, - context: ' render json: Order.find(params[:id])\n', - }, - function: 'show', - context: { - pre: ['\n', ' def show\n'], - post: [' end\n', ' end\n'], - }, - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'action_controller/metal/basic_implicit_render.rb', - abs_path: - '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_controller/metal/basic_implicit_render.rb', - line: { - number: 6, - }, - function: 'send_action', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'abstract_controller/base.rb', - abs_path: '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/abstract_controller/base.rb', - line: { - number: 194, - }, - function: 'process_action', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'action_controller/metal/rendering.rb', - abs_path: - '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_controller/metal/rendering.rb', - line: { - number: 30, - }, - function: 'process_action', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'abstract_controller/callbacks.rb', - abs_path: - '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/abstract_controller/callbacks.rb', - line: { - number: 42, - }, - function: 'block in process_action', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'active_support/callbacks.rb', - abs_path: '/usr/local/bundle/gems/activesupport-5.2.4.1/lib/active_support/callbacks.rb', - line: { - number: 132, - }, - function: 'run_callbacks', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'abstract_controller/callbacks.rb', - abs_path: - '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/abstract_controller/callbacks.rb', - line: { - number: 41, - }, - function: 'process_action', - }, - { - library_frame: true, - exclude_from_grouping: false, - abs_path: - '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_controller/metal/rescue.rb', - filename: 'action_controller/metal/rescue.rb', - line: { - number: 22, - }, - function: 'process_action', - }, - { - library_frame: true, - exclude_from_grouping: false, - abs_path: - '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_controller/metal/instrumentation.rb', - filename: 'action_controller/metal/instrumentation.rb', - line: { - number: 34, - }, - function: 'block in process_action', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'active_support/notifications.rb', - abs_path: - '/usr/local/bundle/gems/activesupport-5.2.4.1/lib/active_support/notifications.rb', - line: { - number: 168, - }, - function: 'block in instrument', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'active_support/notifications/instrumenter.rb', - abs_path: - '/usr/local/bundle/gems/activesupport-5.2.4.1/lib/active_support/notifications/instrumenter.rb', - line: { - number: 23, - }, - function: 'instrument', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'active_support/notifications.rb', - abs_path: - '/usr/local/bundle/gems/activesupport-5.2.4.1/lib/active_support/notifications.rb', - line: { - number: 168, - }, - function: 'instrument', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'action_controller/metal/instrumentation.rb', - abs_path: - '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_controller/metal/instrumentation.rb', - line: { - number: 32, - }, - function: 'process_action', - }, - { - library_frame: true, - exclude_from_grouping: false, - abs_path: - '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_controller/metal/params_wrapper.rb', - filename: 'action_controller/metal/params_wrapper.rb', - line: { - number: 256, - }, - function: 'process_action', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'active_record/railties/controller_runtime.rb', - abs_path: - '/usr/local/bundle/gems/activerecord-5.2.4.1/lib/active_record/railties/controller_runtime.rb', - line: { - number: 24, - }, - function: 'process_action', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'abstract_controller/base.rb', - abs_path: '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/abstract_controller/base.rb', - line: { - number: 134, - }, - function: 'process', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'action_view/rendering.rb', - abs_path: '/usr/local/bundle/gems/actionview-5.2.4.1/lib/action_view/rendering.rb', - line: { - number: 32, - }, - function: 'process', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'action_controller/metal.rb', - abs_path: '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_controller/metal.rb', - line: { - number: 191, - }, - function: 'dispatch', - }, - { - library_frame: true, - exclude_from_grouping: false, - abs_path: '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_controller/metal.rb', - filename: 'action_controller/metal.rb', - line: { - number: 252, - }, - function: 'dispatch', - }, - { - exclude_from_grouping: false, - library_frame: true, - filename: 'action_dispatch/routing/route_set.rb', - abs_path: - '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_dispatch/routing/route_set.rb', - line: { - number: 52, - }, - function: 'dispatch', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'action_dispatch/routing/route_set.rb', - abs_path: - '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_dispatch/routing/route_set.rb', - line: { - number: 34, - }, - function: 'serve', - }, - { - library_frame: true, - exclude_from_grouping: false, - abs_path: - '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_dispatch/journey/router.rb', - filename: 'action_dispatch/journey/router.rb', - line: { - number: 52, - }, - function: 'block in serve', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'action_dispatch/journey/router.rb', - abs_path: - '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_dispatch/journey/router.rb', - line: { - number: 35, - }, - function: 'each', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'action_dispatch/journey/router.rb', - abs_path: - '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_dispatch/journey/router.rb', - line: { - number: 35, - }, - function: 'serve', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'action_dispatch/routing/route_set.rb', - abs_path: - '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_dispatch/routing/route_set.rb', - line: { - number: 840, - }, - function: 'call', - }, - { - exclude_from_grouping: false, - library_frame: true, - filename: 'rack/static.rb', - abs_path: '/usr/local/bundle/gems/rack-2.2.3/lib/rack/static.rb', - line: { - number: 161, - }, - function: 'call', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'rack/tempfile_reaper.rb', - abs_path: '/usr/local/bundle/gems/rack-2.2.3/lib/rack/tempfile_reaper.rb', - line: { - number: 15, - }, - function: 'call', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'rack/etag.rb', - abs_path: '/usr/local/bundle/gems/rack-2.2.3/lib/rack/etag.rb', - line: { - number: 27, - }, - function: 'call', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'rack/conditional_get.rb', - abs_path: '/usr/local/bundle/gems/rack-2.2.3/lib/rack/conditional_get.rb', - line: { - number: 27, - }, - function: 'call', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'rack/head.rb', - abs_path: '/usr/local/bundle/gems/rack-2.2.3/lib/rack/head.rb', - line: { - number: 12, - }, - function: 'call', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'action_dispatch/http/content_security_policy.rb', - abs_path: - '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_dispatch/http/content_security_policy.rb', - line: { - number: 18, - }, - function: 'call', - }, - { - exclude_from_grouping: false, - library_frame: true, - filename: 'rack/session/abstract/id.rb', - abs_path: '/usr/local/bundle/gems/rack-2.2.3/lib/rack/session/abstract/id.rb', - line: { - number: 266, - }, - function: 'context', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'rack/session/abstract/id.rb', - abs_path: '/usr/local/bundle/gems/rack-2.2.3/lib/rack/session/abstract/id.rb', - line: { - number: 260, - }, - function: 'call', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'action_dispatch/middleware/cookies.rb', - abs_path: - '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_dispatch/middleware/cookies.rb', - line: { - number: 670, - }, - function: 'call', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'action_dispatch/middleware/callbacks.rb', - abs_path: - '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_dispatch/middleware/callbacks.rb', - line: { - number: 28, - }, - function: 'block in call', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'active_support/callbacks.rb', - abs_path: '/usr/local/bundle/gems/activesupport-5.2.4.1/lib/active_support/callbacks.rb', - line: { - number: 98, - }, - function: 'run_callbacks', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'action_dispatch/middleware/callbacks.rb', - abs_path: - '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_dispatch/middleware/callbacks.rb', - line: { - number: 26, - }, - function: 'call', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'action_dispatch/middleware/debug_exceptions.rb', - abs_path: - '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_dispatch/middleware/debug_exceptions.rb', - line: { - number: 61, - }, - function: 'call', - }, - { - exclude_from_grouping: false, - library_frame: true, - filename: 'action_dispatch/middleware/show_exceptions.rb', - abs_path: - '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_dispatch/middleware/show_exceptions.rb', - line: { - number: 33, - }, - function: 'call', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'lograge/rails_ext/rack/logger.rb', - abs_path: '/usr/local/bundle/gems/lograge-0.11.2/lib/lograge/rails_ext/rack/logger.rb', - line: { - number: 15, - }, - function: 'call_app', - }, - { - exclude_from_grouping: false, - library_frame: true, - filename: 'rails/rack/logger.rb', - abs_path: '/usr/local/bundle/gems/railties-5.2.4.1/lib/rails/rack/logger.rb', - line: { - number: 28, - }, - function: 'call', - }, - { - library_frame: true, - exclude_from_grouping: false, - abs_path: - '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_dispatch/middleware/remote_ip.rb', - filename: 'action_dispatch/middleware/remote_ip.rb', - line: { - number: 81, - }, - function: 'call', - }, - { - exclude_from_grouping: false, - library_frame: true, - filename: 'request_store/middleware.rb', - abs_path: '/usr/local/bundle/gems/request_store-1.5.0/lib/request_store/middleware.rb', - line: { - number: 19, - }, - function: 'call', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'action_dispatch/middleware/request_id.rb', - abs_path: - '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_dispatch/middleware/request_id.rb', - line: { - number: 27, - }, - function: 'call', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'rack/method_override.rb', - abs_path: '/usr/local/bundle/gems/rack-2.2.3/lib/rack/method_override.rb', - line: { - number: 24, - }, - function: 'call', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'rack/runtime.rb', - abs_path: '/usr/local/bundle/gems/rack-2.2.3/lib/rack/runtime.rb', - line: { - number: 22, - }, - function: 'call', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'active_support/cache/strategy/local_cache_middleware.rb', - abs_path: - '/usr/local/bundle/gems/activesupport-5.2.4.1/lib/active_support/cache/strategy/local_cache_middleware.rb', - line: { - number: 29, - }, - function: 'call', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'action_dispatch/middleware/executor.rb', - abs_path: - '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_dispatch/middleware/executor.rb', - line: { - number: 14, - }, - function: 'call', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'action_dispatch/middleware/static.rb', - abs_path: - '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_dispatch/middleware/static.rb', - line: { - number: 127, - }, - function: 'call', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'rack/sendfile.rb', - abs_path: '/usr/local/bundle/gems/rack-2.2.3/lib/rack/sendfile.rb', - line: { - number: 110, - }, - function: 'call', - }, - { - library_frame: false, - exclude_from_grouping: false, - filename: 'opbeans_shuffle.rb', - abs_path: '/app/lib/opbeans_shuffle.rb', - line: { - number: 32, - context: ' @app.call(env)\n', - }, - function: 'call', - context: { - pre: [' end\n', ' else\n'], - post: [' end\n', ' rescue Timeout::Error\n'], - }, - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'elastic_apm/middleware.rb', - abs_path: '/usr/local/bundle/gems/elastic-apm-3.8.0/lib/elastic_apm/middleware.rb', - line: { - number: 36, - }, - function: 'call', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'rails/engine.rb', - abs_path: '/usr/local/bundle/gems/railties-5.2.4.1/lib/rails/engine.rb', - line: { - number: 524, - }, - function: 'call', - }, - { - exclude_from_grouping: false, - library_frame: true, - filename: 'puma/configuration.rb', - abs_path: '/usr/local/bundle/gems/puma-4.3.5/lib/puma/configuration.rb', - line: { - number: 228, - }, - function: 'call', - }, - { - exclude_from_grouping: false, - library_frame: true, - filename: 'puma/server.rb', - abs_path: '/usr/local/bundle/gems/puma-4.3.5/lib/puma/server.rb', - line: { - number: 713, - }, - function: 'handle_request', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'puma/server.rb', - abs_path: '/usr/local/bundle/gems/puma-4.3.5/lib/puma/server.rb', - line: { - number: 472, - }, - function: 'process_client', - }, - { - library_frame: true, - exclude_from_grouping: false, - filename: 'puma/server.rb', - abs_path: '/usr/local/bundle/gems/puma-4.3.5/lib/puma/server.rb', - line: { - number: 328, - }, - function: 'block in run', - }, - { - exclude_from_grouping: false, - library_frame: true, - filename: 'puma/thread_pool.rb', - abs_path: '/usr/local/bundle/gems/puma-4.3.5/lib/puma/thread_pool.rb', - line: { - number: 134, - }, - function: 'block in spawn_thread', - }, - ], - handled: false, - module: 'ActiveRecord', - message: "Couldn't find Order with 'id'=956", - type: 'ActiveRecord::RecordNotFound', - }, - ], + type: 'Error', + message: 'Unexpected APM Server response when polling config', + }, + ], + }, +}; + +export const RubyWithContextAndLibraryFrames: StoryObj = { + args: { + codeLanguage: 'ruby', + exceptions: [ + { + stacktrace: [ + { + library_frame: true, + exclude_from_grouping: false, + filename: 'active_record/core.rb', + abs_path: '/usr/local/bundle/gems/activerecord-5.2.4.1/lib/active_record/core.rb', + line: { + number: 177, + }, + function: 'find', + }, + { + library_frame: false, + exclude_from_grouping: false, + filename: 'api/orders_controller.rb', + abs_path: '/app/app/controllers/api/orders_controller.rb', + line: { + number: 23, + context: ' render json: Order.find(params[:id])\n', + }, + function: 'show', + context: { + pre: ['\n', ' def show\n'], + post: [' end\n', ' end\n'], + }, + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'action_controller/metal/basic_implicit_render.rb', + abs_path: + '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_controller/metal/basic_implicit_render.rb', + line: { + number: 6, + }, + function: 'send_action', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'abstract_controller/base.rb', + abs_path: '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/abstract_controller/base.rb', + line: { + number: 194, + }, + function: 'process_action', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'action_controller/metal/rendering.rb', + abs_path: + '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_controller/metal/rendering.rb', + line: { + number: 30, + }, + function: 'process_action', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'abstract_controller/callbacks.rb', + abs_path: + '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/abstract_controller/callbacks.rb', + line: { + number: 42, + }, + function: 'block in process_action', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'active_support/callbacks.rb', + abs_path: + '/usr/local/bundle/gems/activesupport-5.2.4.1/lib/active_support/callbacks.rb', + line: { + number: 132, + }, + function: 'run_callbacks', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'abstract_controller/callbacks.rb', + abs_path: + '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/abstract_controller/callbacks.rb', + line: { + number: 41, + }, + function: 'process_action', + }, + { + library_frame: true, + exclude_from_grouping: false, + abs_path: + '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_controller/metal/rescue.rb', + filename: 'action_controller/metal/rescue.rb', + line: { + number: 22, + }, + function: 'process_action', + }, + { + library_frame: true, + exclude_from_grouping: false, + abs_path: + '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_controller/metal/instrumentation.rb', + filename: 'action_controller/metal/instrumentation.rb', + line: { + number: 34, + }, + function: 'block in process_action', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'active_support/notifications.rb', + abs_path: + '/usr/local/bundle/gems/activesupport-5.2.4.1/lib/active_support/notifications.rb', + line: { + number: 168, + }, + function: 'block in instrument', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'active_support/notifications/instrumenter.rb', + abs_path: + '/usr/local/bundle/gems/activesupport-5.2.4.1/lib/active_support/notifications/instrumenter.rb', + line: { + number: 23, + }, + function: 'instrument', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'active_support/notifications.rb', + abs_path: + '/usr/local/bundle/gems/activesupport-5.2.4.1/lib/active_support/notifications.rb', + line: { + number: 168, + }, + function: 'instrument', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'action_controller/metal/instrumentation.rb', + abs_path: + '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_controller/metal/instrumentation.rb', + line: { + number: 32, + }, + function: 'process_action', + }, + { + library_frame: true, + exclude_from_grouping: false, + abs_path: + '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_controller/metal/params_wrapper.rb', + filename: 'action_controller/metal/params_wrapper.rb', + line: { + number: 256, + }, + function: 'process_action', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'active_record/railties/controller_runtime.rb', + abs_path: + '/usr/local/bundle/gems/activerecord-5.2.4.1/lib/active_record/railties/controller_runtime.rb', + line: { + number: 24, + }, + function: 'process_action', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'abstract_controller/base.rb', + abs_path: '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/abstract_controller/base.rb', + line: { + number: 134, + }, + function: 'process', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'action_view/rendering.rb', + abs_path: '/usr/local/bundle/gems/actionview-5.2.4.1/lib/action_view/rendering.rb', + line: { + number: 32, + }, + function: 'process', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'action_controller/metal.rb', + abs_path: '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_controller/metal.rb', + line: { + number: 191, + }, + function: 'dispatch', + }, + { + library_frame: true, + exclude_from_grouping: false, + abs_path: '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_controller/metal.rb', + filename: 'action_controller/metal.rb', + line: { + number: 252, + }, + function: 'dispatch', + }, + { + exclude_from_grouping: false, + library_frame: true, + filename: 'action_dispatch/routing/route_set.rb', + abs_path: + '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_dispatch/routing/route_set.rb', + line: { + number: 52, + }, + function: 'dispatch', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'action_dispatch/routing/route_set.rb', + abs_path: + '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_dispatch/routing/route_set.rb', + line: { + number: 34, + }, + function: 'serve', + }, + { + library_frame: true, + exclude_from_grouping: false, + abs_path: + '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_dispatch/journey/router.rb', + filename: 'action_dispatch/journey/router.rb', + line: { + number: 52, + }, + function: 'block in serve', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'action_dispatch/journey/router.rb', + abs_path: + '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_dispatch/journey/router.rb', + line: { + number: 35, + }, + function: 'each', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'action_dispatch/journey/router.rb', + abs_path: + '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_dispatch/journey/router.rb', + line: { + number: 35, + }, + function: 'serve', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'action_dispatch/routing/route_set.rb', + abs_path: + '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_dispatch/routing/route_set.rb', + line: { + number: 840, + }, + function: 'call', + }, + { + exclude_from_grouping: false, + library_frame: true, + filename: 'rack/static.rb', + abs_path: '/usr/local/bundle/gems/rack-2.2.3/lib/rack/static.rb', + line: { + number: 161, + }, + function: 'call', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'rack/tempfile_reaper.rb', + abs_path: '/usr/local/bundle/gems/rack-2.2.3/lib/rack/tempfile_reaper.rb', + line: { + number: 15, + }, + function: 'call', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'rack/etag.rb', + abs_path: '/usr/local/bundle/gems/rack-2.2.3/lib/rack/etag.rb', + line: { + number: 27, + }, + function: 'call', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'rack/conditional_get.rb', + abs_path: '/usr/local/bundle/gems/rack-2.2.3/lib/rack/conditional_get.rb', + line: { + number: 27, + }, + function: 'call', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'rack/head.rb', + abs_path: '/usr/local/bundle/gems/rack-2.2.3/lib/rack/head.rb', + line: { + number: 12, + }, + function: 'call', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'action_dispatch/http/content_security_policy.rb', + abs_path: + '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_dispatch/http/content_security_policy.rb', + line: { + number: 18, + }, + function: 'call', + }, + { + exclude_from_grouping: false, + library_frame: true, + filename: 'rack/session/abstract/id.rb', + abs_path: '/usr/local/bundle/gems/rack-2.2.3/lib/rack/session/abstract/id.rb', + line: { + number: 266, + }, + function: 'context', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'rack/session/abstract/id.rb', + abs_path: '/usr/local/bundle/gems/rack-2.2.3/lib/rack/session/abstract/id.rb', + line: { + number: 260, + }, + function: 'call', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'action_dispatch/middleware/cookies.rb', + abs_path: + '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_dispatch/middleware/cookies.rb', + line: { + number: 670, + }, + function: 'call', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'action_dispatch/middleware/callbacks.rb', + abs_path: + '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_dispatch/middleware/callbacks.rb', + line: { + number: 28, + }, + function: 'block in call', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'active_support/callbacks.rb', + abs_path: + '/usr/local/bundle/gems/activesupport-5.2.4.1/lib/active_support/callbacks.rb', + line: { + number: 98, + }, + function: 'run_callbacks', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'action_dispatch/middleware/callbacks.rb', + abs_path: + '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_dispatch/middleware/callbacks.rb', + line: { + number: 26, + }, + function: 'call', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'action_dispatch/middleware/debug_exceptions.rb', + abs_path: + '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_dispatch/middleware/debug_exceptions.rb', + line: { + number: 61, + }, + function: 'call', + }, + { + exclude_from_grouping: false, + library_frame: true, + filename: 'action_dispatch/middleware/show_exceptions.rb', + abs_path: + '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_dispatch/middleware/show_exceptions.rb', + line: { + number: 33, + }, + function: 'call', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'lograge/rails_ext/rack/logger.rb', + abs_path: '/usr/local/bundle/gems/lograge-0.11.2/lib/lograge/rails_ext/rack/logger.rb', + line: { + number: 15, + }, + function: 'call_app', + }, + { + exclude_from_grouping: false, + library_frame: true, + filename: 'rails/rack/logger.rb', + abs_path: '/usr/local/bundle/gems/railties-5.2.4.1/lib/rails/rack/logger.rb', + line: { + number: 28, + }, + function: 'call', + }, + { + library_frame: true, + exclude_from_grouping: false, + abs_path: + '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_dispatch/middleware/remote_ip.rb', + filename: 'action_dispatch/middleware/remote_ip.rb', + line: { + number: 81, + }, + function: 'call', + }, + { + exclude_from_grouping: false, + library_frame: true, + filename: 'request_store/middleware.rb', + abs_path: '/usr/local/bundle/gems/request_store-1.5.0/lib/request_store/middleware.rb', + line: { + number: 19, + }, + function: 'call', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'action_dispatch/middleware/request_id.rb', + abs_path: + '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_dispatch/middleware/request_id.rb', + line: { + number: 27, + }, + function: 'call', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'rack/method_override.rb', + abs_path: '/usr/local/bundle/gems/rack-2.2.3/lib/rack/method_override.rb', + line: { + number: 24, + }, + function: 'call', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'rack/runtime.rb', + abs_path: '/usr/local/bundle/gems/rack-2.2.3/lib/rack/runtime.rb', + line: { + number: 22, + }, + function: 'call', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'active_support/cache/strategy/local_cache_middleware.rb', + abs_path: + '/usr/local/bundle/gems/activesupport-5.2.4.1/lib/active_support/cache/strategy/local_cache_middleware.rb', + line: { + number: 29, + }, + function: 'call', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'action_dispatch/middleware/executor.rb', + abs_path: + '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_dispatch/middleware/executor.rb', + line: { + number: 14, + }, + function: 'call', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'action_dispatch/middleware/static.rb', + abs_path: + '/usr/local/bundle/gems/actionpack-5.2.4.1/lib/action_dispatch/middleware/static.rb', + line: { + number: 127, + }, + function: 'call', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'rack/sendfile.rb', + abs_path: '/usr/local/bundle/gems/rack-2.2.3/lib/rack/sendfile.rb', + line: { + number: 110, + }, + function: 'call', + }, + { + library_frame: false, + exclude_from_grouping: false, + filename: 'opbeans_shuffle.rb', + abs_path: '/app/lib/opbeans_shuffle.rb', + line: { + number: 32, + context: ' @app.call(env)\n', + }, + function: 'call', + context: { + pre: [' end\n', ' else\n'], + post: [' end\n', ' rescue Timeout::Error\n'], + }, + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'elastic_apm/middleware.rb', + abs_path: '/usr/local/bundle/gems/elastic-apm-3.8.0/lib/elastic_apm/middleware.rb', + line: { + number: 36, + }, + function: 'call', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'rails/engine.rb', + abs_path: '/usr/local/bundle/gems/railties-5.2.4.1/lib/rails/engine.rb', + line: { + number: 524, + }, + function: 'call', + }, + { + exclude_from_grouping: false, + library_frame: true, + filename: 'puma/configuration.rb', + abs_path: '/usr/local/bundle/gems/puma-4.3.5/lib/puma/configuration.rb', + line: { + number: 228, + }, + function: 'call', + }, + { + exclude_from_grouping: false, + library_frame: true, + filename: 'puma/server.rb', + abs_path: '/usr/local/bundle/gems/puma-4.3.5/lib/puma/server.rb', + line: { + number: 713, + }, + function: 'handle_request', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'puma/server.rb', + abs_path: '/usr/local/bundle/gems/puma-4.3.5/lib/puma/server.rb', + line: { + number: 472, + }, + function: 'process_client', + }, + { + library_frame: true, + exclude_from_grouping: false, + filename: 'puma/server.rb', + abs_path: '/usr/local/bundle/gems/puma-4.3.5/lib/puma/server.rb', + line: { + number: 328, + }, + function: 'block in run', + }, + { + exclude_from_grouping: false, + library_frame: true, + filename: 'puma/thread_pool.rb', + abs_path: '/usr/local/bundle/gems/puma-4.3.5/lib/puma/thread_pool.rb', + line: { + number: 134, + }, + function: 'block in spawn_thread', + }, + ], + handled: false, + module: 'ActiveRecord', + message: "Couldn't find Order with 'id'=956", + type: 'ActiveRecord::RecordNotFound', + }, + ], + }, }; diff --git a/x-pack/platform/packages/shared/kbn-event-stacktrace/src/components/stacktrace/exception/exception_stacktrace.test.tsx b/x-pack/platform/packages/shared/kbn-event-stacktrace/src/components/stacktrace/exception/exception_stacktrace.test.tsx index 9661a42b8905..13f9f00002c7 100644 --- a/x-pack/platform/packages/shared/kbn-event-stacktrace/src/components/stacktrace/exception/exception_stacktrace.test.tsx +++ b/x-pack/platform/packages/shared/kbn-event-stacktrace/src/components/stacktrace/exception/exception_stacktrace.test.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import { composeStories } from '@storybook/testing-react'; +import { composeStories } from '@storybook/react'; import React from 'react'; import { mount } from 'enzyme'; import { EuiThemeProvider } from '@elastic/eui'; diff --git a/x-pack/platform/plugins/private/canvas/canvas_plugin_src/renderers/__stories__/table.stories.tsx b/x-pack/platform/plugins/private/canvas/canvas_plugin_src/renderers/__stories__/table.stories.tsx index 7707e5e49b5d..e4f57202f74a 100644 --- a/x-pack/platform/plugins/private/canvas/canvas_plugin_src/renderers/__stories__/table.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/canvas_plugin_src/renderers/__stories__/table.stories.tsx @@ -6,44 +6,51 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { coreMock } from '@kbn/core/public/mocks'; import { getTableRenderer } from '../table'; import { Render } from './render'; -storiesOf('renderers/table', module).add('default', () => { - const config = { - paginate: true, - perPage: 5, - showHeader: true, - datatable: { - type: 'datatable' as 'datatable', - columns: [ - { - name: 'Foo', - type: 'string' as 'string', - id: 'id-foo', - meta: { type: 'string' as 'string' }, - }, - { - name: 'Bar', - type: 'number' as 'number', - id: 'id-bar', - meta: { type: 'string' as 'string' }, - }, - ], - rows: [ - { Foo: 'a', Bar: 700 }, - { Foo: 'b', Bar: 600 }, - { Foo: 'c', Bar: 500 }, - { Foo: 'd', Bar: 400 }, - { Foo: 'e', Bar: 300 }, - { Foo: 'f', Bar: 200 }, - { Foo: 'g', Bar: 100 }, - ], - }, - }; - return ( - - ); -}); +export default { + title: 'renderers/table', +}; + +export const Default = { + render: () => { + const config = { + paginate: true, + perPage: 5, + showHeader: true, + datatable: { + type: 'datatable' as 'datatable', + columns: [ + { + name: 'Foo', + type: 'string' as 'string', + id: 'id-foo', + meta: { type: 'string' as 'string' }, + }, + { + name: 'Bar', + type: 'number' as 'number', + id: 'id-bar', + meta: { type: 'string' as 'string' }, + }, + ], + rows: [ + { Foo: 'a', Bar: 700 }, + { Foo: 'b', Bar: 600 }, + { Foo: 'c', Bar: 500 }, + { Foo: 'd', Bar: 400 }, + { Foo: 'e', Bar: 300 }, + { Foo: 'f', Bar: 200 }, + { Foo: 'g', Bar: 100 }, + ], + }, + }; + return ( + + ); + }, + + name: 'default', +}; diff --git a/x-pack/platform/plugins/private/canvas/canvas_plugin_src/renderers/filters/advanced_filter/component/__stories__/advanced_filter.stories.tsx b/x-pack/platform/plugins/private/canvas/canvas_plugin_src/renderers/filters/advanced_filter/component/__stories__/advanced_filter.stories.tsx index 76b5eff891dc..acf21f133a1d 100644 --- a/x-pack/platform/plugins/private/canvas/canvas_plugin_src/renderers/filters/advanced_filter/component/__stories__/advanced_filter.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/canvas_plugin_src/renderers/filters/advanced_filter/component/__stories__/advanced_filter.stories.tsx @@ -6,12 +6,23 @@ */ import { action } from '@storybook/addon-actions'; -import { storiesOf } from '@storybook/react'; import React from 'react'; import { AdvancedFilter } from '../advanced_filter'; -storiesOf('renderers/AdvancedFilter', module) - .add('default', () => ) - .add('with value', () => ( +export default { + title: 'renderers/AdvancedFilter', +}; + +export const Default = { + render: () => , + + name: 'default', +}; + +export const WithValue = { + render: () => ( - )); + ), + + name: 'with value', +}; diff --git a/x-pack/platform/plugins/private/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/__stories__/dropdown_filter.stories.tsx b/x-pack/platform/plugins/private/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/__stories__/dropdown_filter.stories.tsx index b7736fec4283..1a7d8b42a8ce 100644 --- a/x-pack/platform/plugins/private/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/__stories__/dropdown_filter.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/__stories__/dropdown_filter.stories.tsx @@ -6,7 +6,6 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { DropdownFilter } from '../dropdown_filter'; @@ -16,15 +15,38 @@ const choices: Array<[string, string]> = [ ['3', 'Item Three'], ]; -storiesOf('renderers/DropdownFilter', module) - .add('default', () => ) - .add('with new value', () => ( - - )) - .add('with choices', () => ) - .add('with choices and value', () => ( +export default { + title: 'renderers/DropdownFilter', +}; + +export const Default = { + render: () => , + name: 'default', +}; + +export const WithNewValue = { + render: () => , + + name: 'with new value', +}; + +export const WithChoices = { + render: () => , + name: 'with choices', +}; + +export const WithChoicesAndValue = { + render: () => ( - )) - .add('with choices and new value', () => ( + ), + + name: 'with choices and value', +}; + +export const WithChoicesAndNewValue = { + render: () => ( - )); + ), + + name: 'with choices and new value', +}; diff --git a/x-pack/platform/plugins/private/canvas/canvas_plugin_src/renderers/filters/time_filter/components/__stories__/time_filter.stories.tsx b/x-pack/platform/plugins/private/canvas/canvas_plugin_src/renderers/filters/time_filter/components/__stories__/time_filter.stories.tsx index d7dd0cb8b293..a1f01de77c34 100644 --- a/x-pack/platform/plugins/private/canvas/canvas_plugin_src/renderers/filters/time_filter/components/__stories__/time_filter.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/canvas_plugin_src/renderers/filters/time_filter/components/__stories__/time_filter.stories.tsx @@ -6,8 +6,8 @@ */ import { action } from '@storybook/addon-actions'; -import { storiesOf } from '@storybook/react'; import React from 'react'; +import type { Meta } from '@storybook/react'; import { TimeFilter } from '../time_filter'; const timeRanges = [ @@ -23,45 +23,75 @@ const timeRanges = [ { start: 'now-1y', end: 'now', label: 'Last 1 year' }, ]; -storiesOf('renderers/TimeFilter', module) - .addDecorator((story) => ( -
- {story()} -
- )) - .add('default', () => ( +export default { + title: 'renderers/TimeFilter', + + decorators: [ + (story) => ( +
+ {story()} +
+ ), + ], +} as Meta; + +export const Default = { + render: () => ( - )) - .add('with relative time bounds', () => ( + ), + + name: 'default', +}; + +export const WithRelativeTimeBounds = { + render: () => ( - )) - .add('with absolute time bounds', () => ( + ), + + name: 'with relative time bounds', +}; + +export const WithAbsoluteTimeBounds = { + render: () => ( - )) - .add('with dateFormat', () => ( + ), + + name: 'with absolute time bounds', +}; + +export const WithDateFormat = { + render: () => ( - )) - .add('with commonlyUsedRanges', () => ( + ), + + name: 'with dateFormat', +}; + +export const WithCommonlyUsedRanges = { + render: () => ( - )); + ), + + name: 'with commonlyUsedRanges', +}; diff --git a/x-pack/platform/plugins/private/canvas/canvas_plugin_src/renderers/markdown/__stories__/markdown.stories.tsx b/x-pack/platform/plugins/private/canvas/canvas_plugin_src/renderers/markdown/__stories__/markdown.stories.tsx index e7391f4e5e98..091907c61c11 100644 --- a/x-pack/platform/plugins/private/canvas/canvas_plugin_src/renderers/markdown/__stories__/markdown.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/canvas_plugin_src/renderers/markdown/__stories__/markdown.stories.tsx @@ -6,14 +6,18 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { coreMock } from '@kbn/core/public/mocks'; import { getMarkdownRenderer } from '..'; import { Render } from '../../__stories__/render'; const markdown = getMarkdownRenderer(coreMock.createStart()); -storiesOf('renderers/markdown', module) - .add('default', () => { + +export default { + title: 'renderers/markdown', +}; + +export const Default = { + render: () => { const config = { content: '# This is Markdown', font: { @@ -24,8 +28,13 @@ storiesOf('renderers/markdown', module) openLinksInNewTab: false, }; return ; - }) - .add('links in new tab', () => { + }, + + name: 'default', +}; + +export const LinksInNewTab = { + render: () => { const config = { content: '[Elastic.co](https://elastic.co)', font: { @@ -36,4 +45,7 @@ storiesOf('renderers/markdown', module) openLinksInNewTab: true, }; return ; - }); + }, + + name: 'links in new tab', +}; diff --git a/x-pack/platform/plugins/private/canvas/canvas_plugin_src/renderers/pie/__stories__/pie.stories.tsx b/x-pack/platform/plugins/private/canvas/canvas_plugin_src/renderers/pie/__stories__/pie.stories.tsx index 4b1a6b4c776d..b1aa5a1fb7a5 100644 --- a/x-pack/platform/plugins/private/canvas/canvas_plugin_src/renderers/pie/__stories__/pie.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/canvas_plugin_src/renderers/pie/__stories__/pie.stories.tsx @@ -6,7 +6,6 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { pie } from '..'; import { Render } from '../../__stories__/render'; @@ -42,8 +41,12 @@ const data = [ }, ]; -storiesOf('renderers/pie', module) - .add('default', () => { +export default { + title: 'renderers/pie', +}; + +export const Default = { + render: () => { const config = { data, options: pieOptions, @@ -54,8 +57,13 @@ storiesOf('renderers/pie', module) }, }; return ; - }) - .add('with legend', () => { + }, + + name: 'default', +}; + +export const WithLegend = { + render: () => { const options = { ...pieOptions, legend: { show: true }, @@ -72,4 +80,7 @@ storiesOf('renderers/pie', module) }; return ; - }); + }, + + name: 'with legend', +}; diff --git a/x-pack/platform/plugins/private/canvas/canvas_plugin_src/renderers/plot/__stories__/plot.stories.tsx b/x-pack/platform/plugins/private/canvas/canvas_plugin_src/renderers/plot/__stories__/plot.stories.tsx index 8943517931de..8b85f8bb08f8 100644 --- a/x-pack/platform/plugins/private/canvas/canvas_plugin_src/renderers/plot/__stories__/plot.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/canvas_plugin_src/renderers/plot/__stories__/plot.stories.tsx @@ -6,7 +6,6 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { plot } from '..'; import { Render } from '../../__stories__/render'; @@ -56,15 +55,23 @@ const data = [ }, ]; -storiesOf('renderers/plot', module).add('default', () => { - const config = { - data, - options: plotOptions, - font: { - css: '', - spec: {}, - type: 'style' as 'style', - }, - }; - return ; -}); +export default { + title: 'renderers/plot', +}; + +export const Default = { + render: () => { + const config = { + data, + options: plotOptions, + font: { + css: '', + spec: {}, + type: 'style' as 'style', + }, + }; + return ; + }, + + name: 'default', +}; diff --git a/x-pack/platform/plugins/private/canvas/canvas_plugin_src/uis/arguments/__stories__/palette.stories.tsx b/x-pack/platform/plugins/private/canvas/canvas_plugin_src/uis/arguments/__stories__/palette.stories.tsx index 27bec2675087..da463be10fd4 100644 --- a/x-pack/platform/plugins/private/canvas/canvas_plugin_src/uis/arguments/__stories__/palette.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/canvas_plugin_src/uis/arguments/__stories__/palette.stories.tsx @@ -5,31 +5,38 @@ * 2.0. */ -import { storiesOf } from '@storybook/react'; import React from 'react'; import { action } from '@storybook/addon-actions'; import { PaletteArgInput } from '../palette'; import { paulTor14 } from '../../../../common/lib/palettes'; -storiesOf('arguments/Palette', module).add('default', () => ( -
- ( +
+ -
-)); + ], + }} + onValueChange={action('onValueChange')} + renderError={action('renderError')} + typeInstance={{}} + /> +
+ ), + + name: 'default', +}; diff --git a/x-pack/platform/plugins/private/canvas/canvas_plugin_src/uis/arguments/axis_config/__stories__/extended_template.stories.tsx b/x-pack/platform/plugins/private/canvas/canvas_plugin_src/uis/arguments/axis_config/__stories__/extended_template.stories.tsx index 34bf763c6fe4..5dc79cd5bb0e 100644 --- a/x-pack/platform/plugins/private/canvas/canvas_plugin_src/uis/arguments/axis_config/__stories__/extended_template.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/canvas_plugin_src/uis/arguments/axis_config/__stories__/extended_template.stories.tsx @@ -6,8 +6,8 @@ */ import { action } from '@storybook/addon-actions'; -import { storiesOf } from '@storybook/react'; import React from 'react'; +import type { Meta } from '@storybook/react'; import { ExpressionAstExpression } from '../../../../../types'; import { ExtendedTemplate } from '../extended_template'; @@ -46,27 +46,39 @@ class Interactive extends React.Component<{}, typeof defaultValues> { } } -storiesOf('arguments/AxisConfig', module) - .addDecorator((story) => ( -
{story()}
- )) - .add('extended', () => ); +export default { + title: 'arguments/AxisConfig', -storiesOf('arguments/AxisConfig/components', module) - .addDecorator((story) => ( -
{story()}
- )) - .add('extended disabled', () => ( + decorators: [ + (story) =>
{story()}
, + ], +} as Meta; + +export const Extended = { + render: () => , + name: 'extended', +}; + +export const ExtendedDisabled = { + render: () => ( - )) - .add('extended', () => ( + ), + + name: 'extended disabled', +}; + +export const _Extended = { + render: () => ( - )); + ), + + name: 'extended', +}; diff --git a/x-pack/platform/plugins/private/canvas/canvas_plugin_src/uis/arguments/axis_config/__stories__/simple_template.stories.tsx b/x-pack/platform/plugins/private/canvas/canvas_plugin_src/uis/arguments/axis_config/__stories__/simple_template.stories.tsx index cd6411bc2a85..96aa111740e6 100644 --- a/x-pack/platform/plugins/private/canvas/canvas_plugin_src/uis/arguments/axis_config/__stories__/simple_template.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/canvas_plugin_src/uis/arguments/axis_config/__stories__/simple_template.stories.tsx @@ -6,8 +6,8 @@ */ import { action } from '@storybook/addon-actions'; -import { storiesOf } from '@storybook/react'; import React from 'react'; +import type { Meta } from '@storybook/react'; import { SimpleTemplate } from '../simple_template'; @@ -31,16 +31,21 @@ class Interactive extends React.Component<{}, typeof defaultValues> { } } -storiesOf('arguments/AxisConfig', module) - .addDecorator((story) => ( -
{story()}
- )) - .add('simple', () => ); +export default { + title: 'arguments/AxisConfig', -storiesOf('arguments/AxisConfig/components', module) - .addDecorator((story) => ( -
{story()}
- )) - .add('simple template', () => ( - - )); + decorators: [ + (story) =>
{story()}
, + ], +} as Meta; + +export const Simple = { + render: () => , + name: 'simple', +}; + +export const _SimpleTemplate = { + render: () => , + + name: 'simple template', +}; diff --git a/x-pack/platform/plugins/private/canvas/canvas_plugin_src/uis/arguments/date_format/__stories__/date_format.stories.tsx b/x-pack/platform/plugins/private/canvas/canvas_plugin_src/uis/arguments/date_format/__stories__/date_format.stories.tsx index cc363058ae61..674bbb2bf67c 100644 --- a/x-pack/platform/plugins/private/canvas/canvas_plugin_src/uis/arguments/date_format/__stories__/date_format.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/canvas_plugin_src/uis/arguments/date_format/__stories__/date_format.stories.tsx @@ -5,7 +5,6 @@ * 2.0. */ -import { storiesOf } from '@storybook/react'; import React from 'react'; import { action } from '@storybook/addon-actions'; import { DateFormatArgInput } from '../date_format'; @@ -16,8 +15,12 @@ const dateFormats = [ { value: 'LLL', text: 'Longhand' }, ]; -storiesOf('arguments/DateFormat', module) - .add('with no format', () => ( +export default { + title: 'arguments/DateFormat', +}; + +export const WithNoFormat = { + render: () => ( - )) - .add('with preset format', () => ( + ), + + name: 'with no format', +}; + +export const WithPresetFormat = { + render: () => ( - )) - .add('with custom format', () => ( + ), + + name: 'with preset format', +}; + +export const WithCustomFormat = { + render: () => ( - )); + ), + + name: 'with custom format', +}; diff --git a/x-pack/platform/plugins/private/canvas/canvas_plugin_src/uis/arguments/number_format/__stories__/number_format.stories.tsx b/x-pack/platform/plugins/private/canvas/canvas_plugin_src/uis/arguments/number_format/__stories__/number_format.stories.tsx index e28853a1dd76..d57a06f25a4c 100644 --- a/x-pack/platform/plugins/private/canvas/canvas_plugin_src/uis/arguments/number_format/__stories__/number_format.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/canvas_plugin_src/uis/arguments/number_format/__stories__/number_format.stories.tsx @@ -5,7 +5,6 @@ * 2.0. */ -import { storiesOf } from '@storybook/react'; import React from 'react'; import { action } from '@storybook/addon-actions'; import { NumberFormatArgInput } from '../number_format'; @@ -18,8 +17,12 @@ const numberFormats = [ { value: '0.0b', text: 'Bytes' }, ]; -storiesOf('arguments/NumberFormat', module) - .add('with no format', () => ( +export default { + title: 'arguments/NumberFormat', +}; + +export const WithNoFormat = { + render: () => ( - )) - .add('with preset format', () => ( + ), + + name: 'with no format', +}; + +export const WithPresetFormat = { + render: () => ( - )) - .add('with custom format', () => ( + ), + + name: 'with preset format', +}; + +export const WithCustomFormat = { + render: () => ( - )); + ), + + name: 'with custom format', +}; diff --git a/x-pack/platform/plugins/private/canvas/jest.config.js b/x-pack/platform/plugins/private/canvas/jest.config.js index 5198fd00fb35..7f32a6f0ba90 100644 --- a/x-pack/platform/plugins/private/canvas/jest.config.js +++ b/x-pack/platform/plugins/private/canvas/jest.config.js @@ -9,9 +9,6 @@ module.exports = { preset: '@kbn/test', rootDir: '../../../../..', roots: ['/x-pack/platform/plugins/private/canvas'], - transform: { - '^.+\\.stories\\.tsx?$': '@storybook/addon-storyshots/injectFileName', - }, coverageDirectory: '/target/kibana-coverage/jest/x-pack/platform/plugins/private/canvas', coverageReporters: ['text', 'html'], collectCoverageFrom: [ diff --git a/x-pack/platform/plugins/private/canvas/public/components/asset_manager/__stories__/asset.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/asset_manager/__stories__/asset.stories.tsx index 48cb570c4d7f..d9f5d040ae22 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/asset_manager/__stories__/asset.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/asset_manager/__stories__/asset.stories.tsx @@ -6,22 +6,38 @@ */ import { action } from '@storybook/addon-actions'; -import { storiesOf } from '@storybook/react'; import React from 'react'; +import type { Meta } from '@storybook/react'; import { reduxDecorator, getAddonPanelParameters } from '../../../../storybook'; import { Asset, AssetComponent } from '..'; import { AIRPLANE, MARKER, assets } from './assets'; -storiesOf('components/Assets/Asset', module) - .addDecorator((story) =>
{story()}
) - .addDecorator(reduxDecorator({ assets })) - .addParameters(getAddonPanelParameters()) - .add('redux: Asset', () => { - return ; - }) - .add('airplane', () => ( +export default { + title: 'components/Assets/Asset', + decorators: [ + (story) =>
{story()}
, + reduxDecorator({ assets }), + ], + parameters: getAddonPanelParameters(), +} as Meta; + +export const ReduxAsset = { + render: () => , + name: 'redux: Asset', +}; + +export const Airplane = { + render: () => ( - )) - .add('marker', () => ( + ), + + name: 'airplane', +}; + +export const Marker = { + render: () => ( - )); + ), + + name: 'marker', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/asset_manager/__stories__/asset_manager.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/asset_manager/__stories__/asset_manager.stories.tsx index 9b097de969f5..a8b6911a84e2 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/asset_manager/__stories__/asset_manager.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/asset_manager/__stories__/asset_manager.stories.tsx @@ -7,7 +7,6 @@ import React from 'react'; import { action } from '@storybook/addon-actions'; -import { storiesOf } from '@storybook/react'; import { reduxDecorator, getAddonPanelParameters } from '../../../../storybook'; import { AssetManager, AssetManagerComponent } from '..'; @@ -20,21 +19,37 @@ const promiseAction = return Promise.resolve(); }; -storiesOf('components/Assets/AssetManager', module) - .addDecorator(reduxDecorator({ assets })) - .addParameters(getAddonPanelParameters()) - .add('redux: AssetManager', () => ) - .add('no assets', () => ( +export default { + title: 'components/Assets/AssetManager', + decorators: [reduxDecorator({ assets })], + parameters: getAddonPanelParameters(), +}; + +export const ReduxAssetManager = { + render: () => , + name: 'redux: AssetManager', +}; + +export const NoAssets = { + render: () => ( - )) - .add('two assets', () => ( + ), + + name: 'no assets', +}; + +export const TwoAssets = { + render: () => ( - )); + ), + + name: 'two assets', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/color_dot/__stories__/color_dot.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/color_dot/__stories__/color_dot.stories.tsx index 9657ae805b8e..572026286569 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/color_dot/__stories__/color_dot.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/color_dot/__stories__/color_dot.stories.tsx @@ -6,13 +6,19 @@ */ import { EuiIcon } from '@elastic/eui'; -import { storiesOf } from '@storybook/react'; import React from 'react'; import { ColorDot } from '../color_dot'; -storiesOf('components/Color/ColorDot', module) - .addParameters({ info: { propTablesExclude: [EuiIcon] } }) - .add('color dots', () => ( +export default { + title: 'components/Color/ColorDot', + + parameters: { + info: { propTablesExclude: [EuiIcon] }, + }, +}; + +export const ColorDots = { + render: () => ( <> @@ -22,8 +28,13 @@ storiesOf('components/Color/ColorDot', module) - )) - .add('invalid dots', () => ( + ), + + name: 'color dots', +}; + +export const InvalidDots = { + render: () => ( <> @@ -33,8 +44,13 @@ storiesOf('components/Color/ColorDot', module) - )) - .add('color dots with children', () => ( + ), + + name: 'invalid dots', +}; + +export const ColorDotsWithChildren = { + render: () => ( <> @@ -49,4 +65,7 @@ storiesOf('components/Color/ColorDot', module) - )); + ), + + name: 'color dots with children', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/color_manager/__stories__/color_manager.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/color_manager/__stories__/color_manager.stories.tsx index daeb9ab11978..a6048a00bf71 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/color_manager/__stories__/color_manager.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/color_manager/__stories__/color_manager.stories.tsx @@ -6,7 +6,6 @@ */ import { action } from '@storybook/addon-actions'; -import { storiesOf } from '@storybook/react'; import React from 'react'; import { ColorManager } from '../color_manager'; @@ -43,8 +42,10 @@ class Interactive extends React.Component<{}, { hasButtons: boolean; value: stri } } -storiesOf('components/Color/ColorManager', module) - .addParameters({ +export default { + title: 'components/Color/ColorManager', + + parameters: { info: { inline: true, styles: { @@ -57,8 +58,11 @@ storiesOf('components/Color/ColorManager', module) }, }, }, - }) - .add('default', () => ( + }, +}; + +export const Default = { + render: () => ( <> @@ -68,8 +72,13 @@ storiesOf('components/Color/ColorManager', module) - )) - .add('invalid colors', () => ( + ), + + name: 'default', +}; + +export const InvalidColors = { + render: () => ( <> @@ -79,8 +88,13 @@ storiesOf('components/Color/ColorManager', module) - )) - .add('with buttons', () => ( + ), + + name: 'invalid colors', +}; + +export const WithButtons = { + render: () => ( <> - )) - .add('interactive', () => , { + ), + + name: 'with buttons', +}; + +export const _Interactive = { + render: () => , + name: 'interactive', + + parameters: { info: { inline: true, source: false, @@ -121,4 +143,5 @@ storiesOf('components/Color/ColorManager', module) }, }, }, - }); + }, +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/color_palette/__stories__/color_palette.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/color_palette/__stories__/color_palette.stories.tsx index 0c8033ef5cf5..45f2d58e60da 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/color_palette/__stories__/color_palette.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/color_palette/__stories__/color_palette.stories.tsx @@ -6,7 +6,6 @@ */ import { action } from '@storybook/addon-actions'; -import { storiesOf } from '@storybook/react'; import React from 'react'; import { ColorPalette } from '../color_palette'; @@ -29,26 +28,51 @@ class Interactive extends React.Component<{}, { value: string }> { } } -storiesOf('components/Color/ColorPalette', module) - .add('three colors', () => ( +export default { + title: 'components/Color/ColorPalette', +}; + +export const ThreeColors = { + render: () => ( <> - )) - .add('six colors', () => ( + ), + + name: 'three colors', +}; + +export const SixColors = { + render: () => ( <> - )) - .add('six colors, wrap at 4', () => ( + ), + + name: 'six colors', +}; + +export const SixColorsWrapAt4 = { + render: () => ( - )) - .add('six colors, value missing', () => ( - - )) - .add('interactive', () => , { + ), + + name: 'six colors, wrap at 4', +}; + +export const SixColorsValueMissing = { + render: () => , + + name: 'six colors, value missing', +}; + +export const _Interactive = { + render: () => , + name: 'interactive', + + parameters: { info: { inline: true, source: false, @@ -62,4 +86,5 @@ storiesOf('components/Color/ColorPalette', module) }, }, }, - }); + }, +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/color_picker/__stories__/color_picker.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/color_picker/__stories__/color_picker.stories.tsx index 812c056a67db..aa557de30b6a 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/color_picker/__stories__/color_picker.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/color_picker/__stories__/color_picker.stories.tsx @@ -6,9 +6,8 @@ */ import { action } from '@storybook/addon-actions'; -import { boolean } from '@storybook/addon-knobs'; -import { storiesOf } from '@storybook/react'; import React from 'react'; +import type { StoryObj } from '@storybook/react'; import { ColorPicker } from '../color_picker'; const THREE_COLORS = ['#fff', '#666', '#000']; @@ -54,8 +53,10 @@ class Interactive extends React.Component< } } -storiesOf('components/Color/ColorPicker', module) - .addParameters({ +export default { + title: 'components/Color/ColorPicker', + + parameters: { info: { inline: true, styles: { @@ -68,38 +69,62 @@ storiesOf('components/Color/ColorPicker', module) }, }, }, - }) - .add('three colors', () => ( + }, +}; + +export const ThreeColors: StoryObj = { + render: () => ( - )) - .add('six colors', () => ( + ), + args: { + hasButtons: true, + }, + name: 'three colors', +}; + +export const SixColors: StoryObj = { + render: () => ( - )) - .add('six colors, value missing', () => ( + ), + args: { + hasButtons: true, + }, + name: 'six colors', +}; + +export const SixColorsValueMissing: StoryObj = { + render: () => ( - )) - .add('interactive', () => , { + ), + args: { + hasButtons: true, + }, + name: 'six colors, value missing', +}; + +export const _Interactive = { + render: () => , + name: 'interactive', + + parameters: { info: { inline: true, source: false, @@ -114,4 +139,5 @@ storiesOf('components/Color/ColorPicker', module) }, }, }, - }); + }, +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/color_picker_popover/__stories__/color_picker_popover.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/color_picker_popover/__stories__/color_picker_popover.stories.tsx index d0956b25fa76..0f3bd7b01e00 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/color_picker_popover/__stories__/color_picker_popover.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/color_picker_popover/__stories__/color_picker_popover.stories.tsx @@ -6,7 +6,6 @@ */ import { action } from '@storybook/addon-actions'; -import { storiesOf } from '@storybook/react'; import React from 'react'; import { ColorPickerPopover } from '../color_picker_popover'; @@ -53,8 +52,10 @@ class Interactive extends React.Component< } } -storiesOf('components/Color/ColorPickerPopover', module) - .addParameters({ +export default { + title: 'components/Color/ColorPickerPopover', + + parameters: { info: { inline: true, styles: { @@ -67,8 +68,11 @@ storiesOf('components/Color/ColorPickerPopover', module) }, }, }, - }) - .add('three colors', () => ( + }, +}; + +export const ThreeColors = { + render: () => ( - )) - .add('six colors', () => ( + ), + + name: 'three colors', +}; + +export const SixColors = { + render: () => ( - )) - .add('six colors, value missing', () => ( + ), + + name: 'six colors', +}; + +export const SixColorsValueMissing = { + render: () => ( - )) - .add('interactive', () => , { + ), + + name: 'six colors, value missing', +}; + +export const _Interactive = { + render: () => , + name: 'interactive', + + parameters: { info: { inline: true, source: false, @@ -110,4 +132,5 @@ storiesOf('components/Color/ColorPickerPopover', module) }, }, }, - }); + }, +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/custom_element_modal/__stories__/custom_element_modal.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/custom_element_modal/__stories__/custom_element_modal.stories.tsx index 4bafe2af0b1c..be848d2d7e2f 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/custom_element_modal/__stories__/custom_element_modal.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/custom_element_modal/__stories__/custom_element_modal.stories.tsx @@ -6,20 +6,29 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; +import type { Meta, StoryObj } from '@storybook/react'; import { elasticLogo } from '@kbn/expression-utils'; import { CustomElementModal } from '../custom_element_modal'; -storiesOf('components/Elements/CustomElementModal', module) - .add('with title', () => ( +export default { + title: 'components/Elements/CustomElementModal', +} as Meta; + +export const WithTitle: StoryObj = { + render: () => ( - )) - .add('with name', () => ( + ), + + name: 'with title', +}; + +export const WithName: StoryObj = { + render: () => ( - )) - .add('with description', () => ( + ), + + name: 'with name', +}; + +export const WithDescription: StoryObj = { + render: () => ( - )) - .add( - 'with image', - (_, props) => ( - - ), - { decorators: [] } - ); + ), + + name: 'with description', +}; + +export const WithImage: StoryObj = { + render: (_, props) => ( + + ), + + name: 'with image', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/datasource/__stories__/datasource_component.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/datasource/__stories__/datasource_component.stories.tsx index 4543236c2bd5..f29282bad2d9 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/datasource/__stories__/datasource_component.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/datasource/__stories__/datasource_component.stories.tsx @@ -6,7 +6,6 @@ */ import { action } from '@storybook/addon-actions'; -import { storiesOf } from '@storybook/react'; import { EuiCallOut, EuiText } from '@elastic/eui'; import React from 'react'; // @ts-expect-error untyped local @@ -36,8 +35,10 @@ const args = { query: ['select * from kibana'], }; -storiesOf('components/datasource/DatasourceComponent', module) - .addParameters({ +export default { + title: 'components/datasource/DatasourceComponent', + + parameters: { info: { inline: true, styles: { @@ -50,8 +51,11 @@ storiesOf('components/datasource/DatasourceComponent', module) }, }, }, - }) - .add('simple datasource', () => ( + }, +}; + +export const SimpleDatasource = { + render: () => ( - )) - .add('datasource with expression arguments', () => ( + ), + + name: 'simple datasource', +}; + +export const DatasourceWithExpressionArguments = { + render: () => ( - )); + ), + + name: 'datasource with expression arguments', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/element_card/__stories__/element_card.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/element_card/__stories__/element_card.stories.tsx index 5c3bb5e0d6ce..b42a7d32fa38 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/element_card/__stories__/element_card.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/element_card/__stories__/element_card.stories.tsx @@ -6,50 +6,71 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; +import type { Meta, StoryObj } from '@storybook/react'; import { elasticLogo } from '@kbn/expression-utils'; import { ElementCard } from '../element_card'; -storiesOf('components/Elements/ElementCard', module) - .addDecorator((story) => ( -
- {story()} -
- )) - .add('with title and description', () => ( +export default { + title: 'components/Elements/ElementCard', + + decorators: [ + (story) => ( +
+ {story()} +
+ ), + ], +} as Meta; + +export const WithTitleAndDescription: StoryObj = { + render: () => ( - )) - .add( - 'with image', - (_, props) => ( - - ), - { decorators: [] } - ) - .add('with tags', () => ( + ), + + name: 'with title and description', +}; + +export const WithImage: StoryObj = { + render: (_, props) => ( + + ), + + name: 'with image', +}; + +export const WithTags: StoryObj = { + render: () => ( - )) - .add('with click handler', () => ( + ), + + name: 'with tags', +}; + +export const WithClickHandler: StoryObj = { + render: () => ( - )); + ), + + name: 'with click handler', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/expression_input/__stories__/expression_input.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/expression_input/__stories__/expression_input.stories.tsx index 96cdf6b96661..d619ae35ca17 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/expression_input/__stories__/expression_input.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/expression_input/__stories__/expression_input.stories.tsx @@ -6,7 +6,6 @@ */ import { action } from '@storybook/addon-actions'; -import { storiesOf } from '@storybook/react'; import React from 'react'; import { ExpressionFunction, @@ -64,11 +63,19 @@ const sampleFunctionDef = { registerExpressionsLanguage([sampleFunctionDef]); -storiesOf('components/ExpressionInput', module).add('default', () => ( - -)); +export default { + title: 'components/ExpressionInput', +}; + +export const Default = { + render: () => ( + + ), + + name: 'default', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/file_upload/file_upload.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/file_upload/file_upload.stories.tsx index db8580f1a5bb..aeebaf140218 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/file_upload/file_upload.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/file_upload/file_upload.stories.tsx @@ -6,10 +6,14 @@ */ import { action } from '@storybook/addon-actions'; -import { storiesOf } from '@storybook/react'; import React from 'react'; import { FileUpload } from './file_upload'; -storiesOf('components/FileUpload', module).add('default', () => ( - -)); +export default { + title: 'components/FileUpload', +}; + +export const Default = { + render: () => , + name: 'default', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/font_picker/__stories__/font_picker.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/font_picker/__stories__/font_picker.stories.tsx index 0c2dcc4acbca..9d1ecd799273 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/font_picker/__stories__/font_picker.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/font_picker/__stories__/font_picker.stories.tsx @@ -6,13 +6,21 @@ */ import { action } from '@storybook/addon-actions'; -import { storiesOf } from '@storybook/react'; import React from 'react'; import { americanTypewriter } from '../../../../common/lib/fonts'; import { FontPicker } from '../font_picker'; -storiesOf('components/FontPicker', module) - .add('default', () => ) - .add('with value', () => ( - - )); +export default { + title: 'components/FontPicker', +}; + +export const Default = { + render: () => , + name: 'default', +}; + +export const WithValue = { + render: () => , + + name: 'with value', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/home/my_workpads/workpad_table.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/home/my_workpads/workpad_table.stories.tsx index f9418f35e625..f9184baae868 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/home/my_workpads/workpad_table.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/home/my_workpads/workpad_table.stories.tsx @@ -24,7 +24,7 @@ export default { parameters: {}, }; -export const WorkpadTable = (args: { findWorkpads: number }) => { +const WorkpadTableComponent = (args: { findWorkpads: number }) => { const { findWorkpads } = args; const [workpads, setWorkpads] = useState(getSomeWorkpads(findWorkpads)); @@ -40,3 +40,7 @@ export const WorkpadTable = (args: { findWorkpads: number }) => { ); }; + +export const WorkpadTable = { + render: (args: { findWorkpads: number }) => , +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/item_grid/__stories__/item_grid.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/item_grid/__stories__/item_grid.stories.tsx index 981ed991271d..4b3a579b8330 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/item_grid/__stories__/item_grid.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/item_grid/__stories__/item_grid.stories.tsx @@ -6,28 +6,46 @@ */ import { EuiIcon, IconType } from '@elastic/eui'; -import { storiesOf } from '@storybook/react'; import React from 'react'; import { readableColor } from '../../../lib/readable_color'; import { ColorDot } from '../../color_dot'; import { ItemGrid } from '../item_grid'; -storiesOf('components/ItemGrid', module) - .add('simple grid', () => ( +export default { + title: 'components/ItemGrid', +}; + +export const SimpleGrid = { + render: () => (
{item}
} /> - )) - .add('icon grid', () => ( + ), + + name: 'simple grid', +}; + +export const IconGrid = { + render: () => ( } /> - )) - .add('color dot grid', () => ( + ), + + name: 'icon grid', +}; + +export const ColorDotGrid = { + render: () => ( {(item) => } - )) - .add('complex grid', () => ( + ), + + name: 'color dot grid', +}; + +export const ComplexGrid = { + render: () => ( )} - )); + ), + + name: 'complex grid', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/keyboard_shortcuts_doc/__stories__/keyboard_shortcuts_doc.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/keyboard_shortcuts_doc/__stories__/keyboard_shortcuts_doc.stories.tsx index d27e8f1f7c9a..fb23c8dbe473 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/keyboard_shortcuts_doc/__stories__/keyboard_shortcuts_doc.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/keyboard_shortcuts_doc/__stories__/keyboard_shortcuts_doc.stories.tsx @@ -5,11 +5,15 @@ * 2.0. */ -import { storiesOf } from '@storybook/react'; import React from 'react'; import { action } from '@storybook/addon-actions'; import { KeyboardShortcutsDoc } from '../keyboard_shortcuts_doc'; -storiesOf('components/KeyboardShortcutsDoc', module).add('default', () => ( - -)); +export default { + title: 'components/KeyboardShortcutsDoc', +}; + +export const Default = { + render: () => , + name: 'default', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/palette_picker/palette_picker/__stories__/palette_picker.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/palette_picker/palette_picker/__stories__/palette_picker.stories.tsx index b5d4967464c1..c95693cfb0b3 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/palette_picker/palette_picker/__stories__/palette_picker.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/palette_picker/palette_picker/__stories__/palette_picker.stories.tsx @@ -7,7 +7,7 @@ import React, { FC, useState } from 'react'; import { action } from '@storybook/addon-actions'; -import { storiesOf } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import { PalettePicker } from '..'; import { paulTor14, ColorPalette } from '../../../../../common/lib/palettes'; @@ -18,10 +18,23 @@ const Interactive: FC = () => { return ; }; -storiesOf('components/Color/PalettePicker', module) - .addDecorator((fn) =>
{fn()}
) - .add('default', () => ) - .add('clearable', () => ( - - )) - .add('interactive', () => ); +export default { + title: 'components/Color/PalettePicker', + decorators: [(fn) =>
{fn()}
], +} as Meta; + +export const Default = { + render: () => , + name: 'default', +}; + +export const Clearable = { + render: () => , + + name: 'clearable', +}; + +export const _Interactive = { + render: () => , + name: 'interactive', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/saved_elements_modal/__stories__/element_controls.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/saved_elements_modal/__stories__/element_controls.stories.tsx index 5b1fdfa2feb2..26edf79091ae 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/saved_elements_modal/__stories__/element_controls.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/saved_elements_modal/__stories__/element_controls.stories.tsx @@ -6,20 +6,28 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; +import type { Meta } from '@storybook/react'; import { ElementControls } from '../element_controls'; -storiesOf('components/SavedElementsModal/ElementControls', module) - .addDecorator((story) => ( -
- {story()} -
- )) - .add('has two buttons', () => ( - - )); +export default { + title: 'components/SavedElementsModal/ElementControls', + + decorators: [ + (story) => ( +
+ {story()} +
+ ), + ], +} as Meta; + +export const HasTwoButtons = { + render: () => , + + name: 'has two buttons', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/saved_elements_modal/__stories__/element_grid.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/saved_elements_modal/__stories__/element_grid.stories.tsx index 6b03873723c1..e2f1e5b4cc70 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/saved_elements_modal/__stories__/element_grid.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/saved_elements_modal/__stories__/element_grid.stories.tsx @@ -6,44 +6,53 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; +import type { Meta, StoryObj } from '@storybook/react'; import { waitFor } from '@kbn/presentation-util-plugin/public/__stories__'; import { ElementGrid } from '../element_grid'; import { getTestCustomElements } from './fixtures/test_elements'; -storiesOf('components/SavedElementsModal/ElementGrid', module) - .addDecorator((story) => ( -
- {story()} -
- )) - .add( - 'default', - (_, props) => ( - +export default { + title: 'components/SavedElementsModal/ElementGrid', + + decorators: [ + (story) => ( +
+ {story()} +
), - { decorators: [waitFor(getTestCustomElements())] } - ) - .add( - 'with text filter', - (_, props) => ( - - ), - { decorators: [waitFor(getTestCustomElements())] } - ); + ], +} as Meta; + +export const Default: StoryObj = { + render: (_, props) => ( + + ), + + name: 'default', + decorators: [waitFor(getTestCustomElements())], +}; + +export const WithTextFilter: StoryObj = { + render: (_, props) => ( + + ), + + name: 'with text filter', + decorators: [waitFor(getTestCustomElements())], +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/saved_elements_modal/__stories__/saved_elements_modal.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/saved_elements_modal/__stories__/saved_elements_modal.stories.tsx index 5044f82b67f5..4a62c9ab7272 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/saved_elements_modal/__stories__/saved_elements_modal.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/saved_elements_modal/__stories__/saved_elements_modal.stories.tsx @@ -6,15 +6,19 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; +import type { StoryObj } from '@storybook/react'; import { waitFor } from '@kbn/presentation-util-plugin/public/__stories__'; import { SavedElementsModal } from '../saved_elements_modal.component'; import { getTestCustomElements } from './fixtures/test_elements'; import { CustomElement } from '../../../../types'; -storiesOf('components/SavedElementsModal', module) - .add('no custom elements', () => ( +export default { + title: 'components/SavedElementsModal', +}; + +export const NoCustomElements: StoryObj = { + render: () => ( - )) - .add( - 'with custom elements', - (_, props) => ( - - ), - { decorators: [waitFor(getTestCustomElements())] } - ) - .add( - 'with text filter', - (_, props) => ( - - ), - { decorators: [waitFor(getTestCustomElements())] } - ); + ), + + name: 'no custom elements', +}; + +export const WithCustomElements: StoryObj = { + render: (_, props) => ( + + ), + + name: 'with custom elements', + decorators: [waitFor(getTestCustomElements())], +}; + +export const WithTextFilter: StoryObj = { + render: (_, props) => ( + + ), + + name: 'with text filter', + decorators: [waitFor(getTestCustomElements())], +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/shape_picker/__stories__/shape_picker.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/shape_picker/__stories__/shape_picker.stories.tsx index 0f6634b026ac..446a36f1b2ae 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/shape_picker/__stories__/shape_picker.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/shape_picker/__stories__/shape_picker.stories.tsx @@ -6,11 +6,16 @@ */ import { action } from '@storybook/addon-actions'; -import { storiesOf } from '@storybook/react'; import React from 'react'; import { getAvailableShapes } from '@kbn/expression-shape-plugin/common'; import { ShapePicker } from '../shape_picker'; -storiesOf('components/Shapes/ShapePicker', module).add('default', () => ( - -)); +export default { + title: 'components/Shapes/ShapePicker', +}; + +export const Default = { + render: () => , + + name: 'default', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/shape_picker_popover/__stories__/shape_picker_popover.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/shape_picker_popover/__stories__/shape_picker_popover.stories.tsx index 1d0ee9ffee53..5febc08c2a1b 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/shape_picker_popover/__stories__/shape_picker_popover.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/shape_picker_popover/__stories__/shape_picker_popover.stories.tsx @@ -6,7 +6,6 @@ */ import { action } from '@storybook/addon-actions'; -import { storiesOf } from '@storybook/react'; import React from 'react'; import { getAvailableShapes, Shape } from '@kbn/expression-shape-plugin/common'; import { ShapePickerPopover } from '../shape_picker_popover'; @@ -27,20 +26,36 @@ class Interactive extends React.Component<{}, { value: string }> { } } -storiesOf('components/Shapes/ShapePickerPopover', module) - .add('default', () => ( - - )) - .add('shape selected', () => ( +export default { + title: 'components/Shapes/ShapePickerPopover', +}; + +export const Default = { + render: () => , + + name: 'default', +}; + +export const ShapeSelected = { + render: () => ( - )) - .add('interactive', () => , { + ), + + name: 'shape selected', +}; + +export const _Interactive = { + render: () => , + name: 'interactive', + + parameters: { info: { source: false, propTablesExclude: [Interactive], }, - }); + }, +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/shape_preview/__stories__/shape_preview.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/shape_preview/__stories__/shape_preview.stories.tsx index db152953ba9c..7692717f6e48 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/shape_preview/__stories__/shape_preview.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/shape_preview/__stories__/shape_preview.stories.tsx @@ -5,11 +5,20 @@ * 2.0. */ -import { storiesOf } from '@storybook/react'; import React from 'react'; import { Shape } from '@kbn/expression-shape-plugin/public'; import { ShapePreview } from '../shape_preview'; -storiesOf('components/Shapes/ShapePreview', module) - .add('arrow', () => ) - .add('square', () => ); +export default { + title: 'components/Shapes/ShapePreview', +}; + +export const Arrow = { + render: () => , + name: 'arrow', +}; + +export const Square = { + render: () => , + name: 'square', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/sidebar/__stories__/group_settings.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/sidebar/__stories__/group_settings.stories.tsx index 926efa6e321d..dfb5b28c6dc2 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/sidebar/__stories__/group_settings.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/sidebar/__stories__/group_settings.stories.tsx @@ -6,7 +6,13 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { GroupSettings } from '../group_settings'; -storiesOf('components/Sidebar/GroupSettings', module).add('default', () => ); +export default { + title: 'components/Sidebar/GroupSettings', +}; + +export const Default = { + render: () => , + name: 'default', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/sidebar/__stories__/multi_element_settings.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/sidebar/__stories__/multi_element_settings.stories.tsx index 53bb64825675..a1d39c8f2764 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/sidebar/__stories__/multi_element_settings.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/sidebar/__stories__/multi_element_settings.stories.tsx @@ -6,9 +6,13 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { MultiElementSettings } from '../multi_element_settings'; -storiesOf('components/Sidebar/MultiElementSettings', module).add('default', () => ( - -)); +export default { + title: 'components/Sidebar/MultiElementSettings', +}; + +export const Default = { + render: () => , + name: 'default', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/sidebar_header/__stories__/sidebar_header.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/sidebar_header/__stories__/sidebar_header.stories.tsx index b98d994460de..da57704ba7ad 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/sidebar_header/__stories__/sidebar_header.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/sidebar_header/__stories__/sidebar_header.stories.tsx @@ -6,8 +6,8 @@ */ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; +import type { Meta } from '@storybook/react'; import { SidebarHeader } from '../sidebar_header.component'; const handlers = { @@ -17,9 +17,18 @@ const handlers = { sendToBack: action('sendToBack'), }; -storiesOf('components/Sidebar/SidebarHeader', module) - .addDecorator((story) =>
{story()}
) - .add('default', () => ) - .add('with layer controls', () => ( - - )); +export default { + title: 'components/Sidebar/SidebarHeader', + decorators: [(story) =>
{story()}
], +} as Meta; + +export const Default = { + render: () => , + name: 'default', +}; + +export const WithLayerControls = { + render: () => , + + name: 'with layer controls', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/tag/__stories__/tag.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/tag/__stories__/tag.stories.tsx index 0daa37c1b2dc..7a353245f807 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/tag/__stories__/tag.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/tag/__stories__/tag.stories.tsx @@ -5,12 +5,29 @@ * 2.0. */ -import { storiesOf } from '@storybook/react'; import React from 'react'; import { Tag } from '../tag'; -storiesOf('components/Tags/Tag', module) - .add('as health', () => ) - .add('as health with color', () => ) - .add('as badge', () => ) - .add('as badge with color', () => ); +export default { + title: 'components/Tags/Tag', +}; + +export const AsHealth = { + render: () => , + name: 'as health', +}; + +export const AsHealthWithColor = { + render: () => , + name: 'as health with color', +}; + +export const AsBadge = { + render: () => , + name: 'as badge', +}; + +export const AsBadgeWithColor = { + render: () => , + name: 'as badge with color', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/tag_list/__stories__/tag_list.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/tag_list/__stories__/tag_list.stories.tsx index 590af213da36..428f915e47fc 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/tag_list/__stories__/tag_list.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/tag_list/__stories__/tag_list.stories.tsx @@ -5,7 +5,6 @@ * 2.0. */ -import { storiesOf } from '@storybook/react'; import React from 'react'; import { TagList } from '../tag_list'; import { TagSpec } from '../../../lib/tag'; @@ -55,16 +54,34 @@ const mockTagRegistry: { [tag: string]: TagSpec } = { const getTag = (name: string): TagSpec => mockTagRegistry[name] || { name, color: '#666666' }; -storiesOf('components/Tags/TagList', module) - .add('empty list', () => ) - .add('with health tags', () => ) - .add('with badge tags', () => ( - - )) - .add('with lots of tags', () => ( +export default { + title: 'components/Tags/TagList', +}; + +export const EmptyList = { + render: () => , + name: 'empty list', +}; + +export const WithHealthTags = { + render: () => , + name: 'with health tags', +}; + +export const WithBadgeTags = { + render: () => , + + name: 'with badge tags', +}; + +export const WithLotsOfTags = { + render: () => ( - )); + ), + + name: 'with lots of tags', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/text_style_picker/__stories__/text_style_picker.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/text_style_picker/__stories__/text_style_picker.stories.tsx index 3f58aee93c62..4a17d56072f6 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/text_style_picker/__stories__/text_style_picker.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/text_style_picker/__stories__/text_style_picker.stories.tsx @@ -6,8 +6,8 @@ */ import React, { useState } from 'react'; -import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; +import type { Meta } from '@storybook/react'; import { TextStylePicker, StyleProps } from '../text_style_picker'; @@ -20,7 +20,17 @@ const Interactive = () => { return ; }; -storiesOf('components/TextStylePicker', module) - .addDecorator((fn) =>
{fn()}
) - .add('default', () => ) - .add('interactive', () => ); +export default { + title: 'components/TextStylePicker', + decorators: [(fn) =>
{fn()}
], +} as Meta; + +export const Default = { + render: () => , + name: 'default', +}; + +export const _Interactive = { + render: () => , + name: 'interactive', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/tool_tip_shortcut/__stories__/tool_tip_shortcut.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/tool_tip_shortcut/__stories__/tool_tip_shortcut.stories.tsx index 32657ef9a468..d2e84b217ec9 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/tool_tip_shortcut/__stories__/tool_tip_shortcut.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/tool_tip_shortcut/__stories__/tool_tip_shortcut.stories.tsx @@ -5,18 +5,51 @@ * 2.0. */ -import { storiesOf } from '@storybook/react'; import React from 'react'; +import type { Meta } from '@storybook/react'; import { ToolTipShortcut } from '../tool_tip_shortcut'; -storiesOf('components/ToolTipShortcut', module) - .addDecorator((story) => ( -
{story()}
- )) - .add('with shortcut', () => ) - .add('with cmd', () => ) - .add('with alt', () => ) - .add('with left arrow', () => ) - .add('with right arrow', () => ) - .add('with up arrow', () => ) - .add('with down arrow', () => ); +export default { + title: 'components/ToolTipShortcut', + + decorators: [ + (story) => ( +
{story()}
+ ), + ], +} as Meta; + +export const WithShortcut = { + render: () => , + name: 'with shortcut', +}; + +export const WithCmd = { + render: () => , + name: 'with cmd', +}; + +export const WithAlt = { + render: () => , + name: 'with alt', +}; + +export const WithLeftArrow = { + render: () => , + name: 'with left arrow', +}; + +export const WithRightArrow = { + render: () => , + name: 'with right arrow', +}; + +export const WithUpArrow = { + render: () => , + name: 'with up arrow', +}; + +export const WithDownArrow = { + render: () => , + name: 'with down arrow', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/toolbar/__stories__/toolbar.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/toolbar/__stories__/toolbar.stories.tsx index e571cc12f442..6152ba8ac77f 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/toolbar/__stories__/toolbar.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/toolbar/__stories__/toolbar.stories.tsx @@ -5,8 +5,8 @@ * 2.0. */ -import { storiesOf } from '@storybook/react'; import React from 'react'; +import type { Meta } from '@storybook/react'; // @ts-expect-error import { getDefaultPage } from '../../../state/defaults'; @@ -28,7 +28,12 @@ const Pages = ({ story }: { story: Function }) => ( ); -storiesOf('components/Toolbar', module) - .addDecorator((story) => ) - .addDecorator(reduxDecorator({ pages })) - .add('redux', () => ); +export default { + title: 'components/Toolbar', + decorators: [(story) => , reduxDecorator({ pages })], +} as Meta; + +export const Redux = { + render: () => , + name: 'redux', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/var_config/__stories__/delete_var.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/var_config/__stories__/delete_var.stories.tsx index e02f08fc5ab5..05e37f48b8bb 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/var_config/__stories__/delete_var.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/var_config/__stories__/delete_var.stories.tsx @@ -6,7 +6,6 @@ */ import { action } from '@storybook/addon-actions'; -import { storiesOf } from '@storybook/react'; import React from 'react'; import { CanvasVariable } from '../../../../types'; @@ -19,6 +18,14 @@ const variable: CanvasVariable = { type: 'string', }; -storiesOf('components/Variables/DeleteVar', module).add('default', () => ( - -)); +export default { + title: 'components/Variables/DeleteVar', +}; + +export const Default = { + render: () => ( + + ), + + name: 'default', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/var_config/__stories__/edit_var.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/var_config/__stories__/edit_var.stories.tsx index 7f34e10c6c40..e01fbfd92db8 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/var_config/__stories__/edit_var.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/var_config/__stories__/edit_var.stories.tsx @@ -6,7 +6,6 @@ */ import { action } from '@storybook/addon-actions'; -import { storiesOf } from '@storybook/react'; import React from 'react'; import { CanvasVariable } from '../../../../types'; @@ -31,36 +30,58 @@ const variables: CanvasVariable[] = [ }, ]; -storiesOf('components/Variables/EditVar', module) - .add('new variable', () => ( +export default { + title: 'components/Variables/EditVar', +}; + +export const NewVariable = { + render: () => ( - )) - .add('edit variable (string)', () => ( + ), + + name: 'new variable', +}; + +export const EditVariableString = { + render: () => ( - )) - .add('edit variable (number)', () => ( + ), + + name: 'edit variable (string)', +}; + +export const EditVariableNumber = { + render: () => ( - )) - .add('edit variable (boolean)', () => ( + ), + + name: 'edit variable (number)', +}; + +export const EditVariableBoolean = { + render: () => ( - )); + ), + + name: 'edit variable (boolean)', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/var_config/__stories__/var_config.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/var_config/__stories__/var_config.stories.tsx index 5dca0a89b3f0..1b74bdb53d78 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/var_config/__stories__/var_config.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/var_config/__stories__/var_config.stories.tsx @@ -6,7 +6,6 @@ */ import { action } from '@storybook/addon-actions'; -import { storiesOf } from '@storybook/react'; import React from 'react'; import { CanvasVariable } from '../../../../types'; @@ -31,12 +30,20 @@ const variables: CanvasVariable[] = [ }, ]; -storiesOf('components/Variables/VarConfig', module).add('default', () => ( - -)); +export default { + title: 'components/Variables/VarConfig', +}; + +export const Default = { + render: () => ( + + ), + + name: 'default', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/workpad_filters/__stories__/filter.component.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/workpad_filters/__stories__/filter.component.stories.tsx index dded39e2b7e1..b7bb865407ca 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/workpad_filters/__stories__/filter.component.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/workpad_filters/__stories__/filter.component.stories.tsx @@ -6,7 +6,6 @@ */ import { EuiText, EuiTextColor } from '@elastic/eui'; -import { storiesOf } from '@storybook/react'; import React, { FC } from 'react'; import { FormattedFilterViewInstance } from '../../../../types'; import { Filter } from '../filter.component'; @@ -38,16 +37,30 @@ const component: FC = ({ value }) => ( ); -storiesOf('components/WorkpadFilters/FilterComponent', module) - .add('default', () => ) - .add('with component field', () => ( - - )) - .add('with custom filter fields', () => ( +export default { + title: 'components/WorkpadFilters/FilterComponent', +}; + +export const Default = { + render: () => , + name: 'default', +}; + +export const WithComponentField = { + render: () => , + + name: 'with component field', +}; + +export const WithCustomFilterFields = { + render: () => ( - )); + ), + + name: 'with custom filter fields', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/workpad_filters/__stories__/filters_group.component.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/workpad_filters/__stories__/filters_group.component.stories.tsx index bdeb963dc883..3b357ba68f55 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/workpad_filters/__stories__/filters_group.component.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/workpad_filters/__stories__/filters_group.component.stories.tsx @@ -5,8 +5,8 @@ * 2.0. */ -import { storiesOf } from '@storybook/react'; import React from 'react'; +import type { Meta } from '@storybook/react'; import moment from 'moment'; import { FiltersGroup } from '../filters_group.component'; import { FiltersGroup as FiltersGroupType } from '../types'; @@ -39,9 +39,18 @@ const filtersGroup: FiltersGroupType = { ], }; -storiesOf('components/WorkpadFilters/FiltersGroupComponent', module) - .addDecorator((story) =>
{story()}
) - .add('default', () => ) - .add('empty group', () => ( - - )); +export default { + title: 'components/WorkpadFilters/FiltersGroupComponent', + decorators: [(story) =>
{story()}
], +} as Meta; + +export const Default = { + render: () => , + name: 'default', +}; + +export const EmptyGroup = { + render: () => , + + name: 'empty group', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/workpad_filters/__stories__/workpad_filters.component.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/workpad_filters/__stories__/workpad_filters.component.stories.tsx index 8dc062886a12..902a5761bdca 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/workpad_filters/__stories__/workpad_filters.component.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/workpad_filters/__stories__/workpad_filters.component.stories.tsx @@ -5,8 +5,8 @@ * 2.0. */ -import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; +import type { Meta } from '@storybook/react'; import React from 'react'; import moment from 'moment'; import { WorkpadFilters } from '../workpad_filters.component'; @@ -49,18 +49,30 @@ const filtersGroups: FiltersGroupType[] = [ }, ]; -storiesOf('components/WorkpadFilters/WorkpadFiltersComponent', module) - .addDecorator((story) => ( -
-
-
{story()}
+export default { + title: 'components/WorkpadFilters/WorkpadFiltersComponent', + + decorators: [ + (story) => ( +
+
+
{story()}
+
-
- )) - .add('default', () => ( + ), + ], +} as Meta; + +export const Default = { + render: () => ( - )) - .add('Filters groups without name', () => ( + ), + + name: 'default', +}; + +export const FiltersGroupsWithoutName = { + render: () => ( - )) - .add('Filters groups without group name', () => ( + ), + + name: 'Filters groups without name', +}; + +export const FiltersGroupsWithoutGroupName = { + render: () => ( - )) - .add('Filters groups without name and filters', () => ( + ), + + name: 'Filters groups without group name', +}; + +export const FiltersGroupsWithoutNameAndFilters = { + render: () => ( - )) - .add('Empty filters groups', () => ( - - )); + ), + + name: 'Filters groups without name and filters', +}; + +export const EmptyFiltersGroups = { + render: () => , + + name: 'Empty filters groups', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/workpad_filters/__stories__/workpad_filters.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/workpad_filters/__stories__/workpad_filters.stories.tsx index b477ac220f6a..e11e772ad795 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/workpad_filters/__stories__/workpad_filters.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/workpad_filters/__stories__/workpad_filters.stories.tsx @@ -5,20 +5,33 @@ * 2.0. */ -import { storiesOf } from '@storybook/react'; import React from 'react'; +import type { Meta } from '@storybook/react'; import { reduxDecorator } from '../../../../storybook'; import { WorkpadFilters } from '../workpad_filters'; import { elementWithGroup, elements } from './elements'; -storiesOf('components/WorkpadFilters/WorkpadFilters', module) - .addDecorator((story) => ( -
-
-
{story()}
+export default { + title: 'components/WorkpadFilters/WorkpadFilters', + + decorators: [ + (story) => ( +
+
+
{story()}
+
-
- )) - .addDecorator(reduxDecorator({ elements })) - .add('redux: default', () => ) - .add('redux: selected element with group', () => ); + ), + reduxDecorator({ elements }), + ], +} as Meta; + +export const ReduxDefault = { + render: () => , + name: 'redux: default', +}; + +export const ReduxSelectedElementWithGroup = { + render: () => , + name: 'redux: selected element with group', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/workpad_header/edit_menu/__stories__/edit_menu.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/workpad_header/edit_menu/__stories__/edit_menu.stories.tsx index 282814829499..d6b87e311f34 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/workpad_header/edit_menu/__stories__/edit_menu.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/workpad_header/edit_menu/__stories__/edit_menu.stories.tsx @@ -5,7 +5,6 @@ * 2.0. */ -import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import React from 'react'; import { EditMenu } from '../edit_menu.component'; @@ -36,42 +35,74 @@ const handlers = { redoHistory: action('redoHistory'), }; -storiesOf('components/WorkpadHeader/EditMenu', module) - .add('default', () => ( +export default { + title: 'components/WorkpadHeader/EditMenu', +}; + +export const Default = { + render: () => ( - )) - .add('clipboard data exists', () => ( + ), + + name: 'default', +}; + +export const ClipboardDataExists = { + render: () => ( - )) - .add('single element selected', () => ( + ), + + name: 'clipboard data exists', +}; + +export const SingleElementSelected = { + render: () => ( - )) - .add('single grouped element selected', () => ( + ), + + name: 'single element selected', +}; + +export const SingleGroupedElementSelected = { + render: () => ( - )) - .add('2 elements selected', () => ( + ), + + name: 'single grouped element selected', +}; + +export const _2ElementsSelected = { + render: () => ( - )) - .add('3+ elements selected', () => ( + ), + + name: '2 elements selected', +}; + +export const _3ElementsSelected = { + render: () => ( - )); + ), + + name: '3+ elements selected', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/workpad_header/editor_menu/__stories__/editor_menu.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/workpad_header/editor_menu/__stories__/editor_menu.stories.tsx index d274c268459f..105a01dfc6ee 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/workpad_header/editor_menu/__stories__/editor_menu.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/workpad_header/editor_menu/__stories__/editor_menu.stories.tsx @@ -5,14 +5,21 @@ * 2.0. */ -import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import React from 'react'; import { EditorMenu } from '../editor_menu.component'; -storiesOf('components/WorkpadHeader/EditorMenu', module).add('default', () => ( - action('createNewEmbeddableFromAction')} - /> -)); +export default { + title: 'components/WorkpadHeader/EditorMenu', +}; + +export const Default = { + render: () => ( + action('createNewEmbeddableFromAction')} + /> + ), + + name: 'default', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/workpad_header/element_menu/__stories__/element_menu.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/workpad_header/element_menu/__stories__/element_menu.stories.tsx index 62d070dbf00f..4669c05483d3 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/workpad_header/element_menu/__stories__/element_menu.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/workpad_header/element_menu/__stories__/element_menu.stories.tsx @@ -5,7 +5,6 @@ * 2.0. */ -import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import React from 'react'; import { ElementSpec } from '../../../../../types'; @@ -134,6 +133,12 @@ You can use standard Markdown in here, but you can also access your piped-in dat }, }; -storiesOf('components/WorkpadHeader/ElementMenu', module).add('default', () => ( - -)); +export default { + title: 'components/WorkpadHeader/ElementMenu', +}; + +export const Default = { + render: () => , + + name: 'default', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/workpad_header/share_menu/__stories__/share_menu.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/workpad_header/share_menu/__stories__/share_menu.stories.tsx index bdc65421cb7f..1a0dbc31dbec 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/workpad_header/share_menu/__stories__/share_menu.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/workpad_header/share_menu/__stories__/share_menu.stories.tsx @@ -6,18 +6,27 @@ */ import { action } from '@storybook/addon-actions'; -import { storiesOf } from '@storybook/react'; import React from 'react'; import { reduxDecorator } from '../../../../../storybook'; import { ShareMenu } from '../share_menu.component'; -storiesOf('components/WorkpadHeader/ShareMenu', module) - .addDecorator(reduxDecorator()) - .add('minimal', () => ); +export default { + title: 'components/WorkpadHeader/ShareMenu', + decorators: [reduxDecorator()], +}; -storiesOf('components/WorkpadHeader/ShareMenu', module).add('with Reporting', () => ( -
Provided Reporting Component
} - /> -)); +export const Minimal = { + render: () => , + name: 'minimal', +}; + +export const WithReporting = { + render: () => ( +
Provided Reporting Component
} + /> + ), + + name: 'with Reporting', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/workpad_header/share_menu/flyout/__stories__/flyout.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/workpad_header/share_menu/flyout/__stories__/flyout.stories.tsx index 3e1212f3f398..4e3e3d5f1fd3 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/workpad_header/share_menu/flyout/__stories__/flyout.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/workpad_header/share_menu/flyout/__stories__/flyout.stories.tsx @@ -5,15 +5,16 @@ * 2.0. */ -import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import React from 'react'; import { ShareWebsiteFlyout } from '../flyout.component'; import { reduxDecorator } from '../../../../../../storybook'; -storiesOf('components/WorkpadHeader/ShareMenu/ShareWebsiteFlyout', module) - .addDecorator(reduxDecorator()) - .addParameters({ +export default { + title: 'components/WorkpadHeader/ShareMenu/ShareWebsiteFlyout', + decorators: [reduxDecorator()], + + parameters: { info: { inline: true, styles: { @@ -26,14 +27,23 @@ storiesOf('components/WorkpadHeader/ShareMenu/ShareWebsiteFlyout', module) }, }, }, - }) - .add('default', () => ( - - )) - .add('unsupported renderers', () => ( + }, +}; + +export const Default = { + render: () => , + + name: 'default', +}; + +export const UnsupportedRenderers = { + render: () => ( - )); + ), + + name: 'unsupported renderers', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/components/workpad_header/view_menu/__stories__/view_menu.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/workpad_header/view_menu/__stories__/view_menu.stories.tsx index a9a4752b9657..9c2cb3ab668c 100644 --- a/x-pack/platform/plugins/private/canvas/public/components/workpad_header/view_menu/__stories__/view_menu.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/components/workpad_header/view_menu/__stories__/view_menu.stories.tsx @@ -5,7 +5,6 @@ * 2.0. */ -import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import React from 'react'; import { ViewMenu } from '../view_menu.component'; @@ -24,8 +23,12 @@ const handlers = { enableAutoplay: action('enableAutoplay'), }; -storiesOf('components/WorkpadHeader/ViewMenu', module) - .add('edit mode', () => ( +export default { + title: 'components/WorkpadHeader/ViewMenu', +}; + +export const EditMode = { + render: () => ( - )) - .add('read only mode', () => ( + ), + + name: 'edit mode', +}; + +export const ReadOnlyMode = { + render: () => ( - )) - .add('with refresh enabled', () => ( + ), + + name: 'read only mode', +}; + +export const WithRefreshEnabled = { + render: () => ( - )) - .add('with autoplay enabled', () => ( + ), + + name: 'with refresh enabled', +}; + +export const WithAutoplayEnabled = { + render: () => ( - )); + ), + + name: 'with autoplay enabled', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/expression_types/arg_types/container_style/__stories__/extended_template.stories.tsx b/x-pack/platform/plugins/private/canvas/public/expression_types/arg_types/container_style/__stories__/extended_template.stories.tsx index d80aaa6b39f2..d86db5fa6fca 100644 --- a/x-pack/platform/plugins/private/canvas/public/expression_types/arg_types/container_style/__stories__/extended_template.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/expression_types/arg_types/container_style/__stories__/extended_template.stories.tsx @@ -6,7 +6,7 @@ */ import { action } from '@storybook/addon-actions'; -import { storiesOf } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import React from 'react'; // @ts-expect-error untyped local import { getDefaultWorkpad } from '../../../../state/defaults'; @@ -55,31 +55,48 @@ const getArgValue: (arg: T) => Arguments[T] = (arg) = return defaultValues[arg]; }; -storiesOf('arguments/ContainerStyle', module) - .addDecorator((story) => ( -
{story()}
- )) - .add('extended', () => ); +export default { + title: 'arguments/ContainerStyle', -storiesOf('arguments/ContainerStyle/components', module) - .addDecorator((story) => ( -
{story()}
- )) - .add('appearance form', () => ( + decorators: [ + (story) =>
{story()}
, + ], +} as Meta; + +export const Extended = { + render: () => , + name: 'extended', +}; + +export const _AppearanceForm = { + render: () => ( - )) - .add('border form', () => ( + ), + + name: 'appearance form', +}; + +export const _BorderForm = { + render: () => ( - )) - .add('extended template', () => ( + ), + + name: 'border form', +}; + +export const _ExtendedTemplate = { + render: () => ( - )); + ), + + name: 'extended template', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/expression_types/arg_types/container_style/__stories__/simple_template.stories.tsx b/x-pack/platform/plugins/private/canvas/public/expression_types/arg_types/container_style/__stories__/simple_template.stories.tsx index 6619a7e55198..583f38070c19 100644 --- a/x-pack/platform/plugins/private/canvas/public/expression_types/arg_types/container_style/__stories__/simple_template.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/expression_types/arg_types/container_style/__stories__/simple_template.stories.tsx @@ -6,7 +6,7 @@ */ import { action } from '@storybook/addon-actions'; -import { storiesOf } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import React from 'react'; // @ts-expect-error untyped local import { getDefaultWorkpad } from '../../../../state/defaults'; @@ -44,20 +44,27 @@ const getArgValue: (arg: T) => Arguments[T] = (arg) = return defaultValues[arg]; }; -storiesOf('arguments/ContainerStyle', module) - .addDecorator((story) => ( -
{story()}
- )) - .add('simple', () => ); +export default { + title: 'arguments/ContainerStyle', -storiesOf('arguments/ContainerStyle/components', module) - .addDecorator((story) => ( -
{story()}
- )) - .add('simple template', () => ( + decorators: [ + (story) =>
{story()}
, + ], +} as Meta; + +export const Simple = { + render: () => , + name: 'simple', +}; + +export const _SimpleTemplate = { + render: () => ( - )); + ), + + name: 'simple template', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/expression_types/arg_types/series_style/__stories__/extended_template.stories.tsx b/x-pack/platform/plugins/private/canvas/public/expression_types/arg_types/series_style/__stories__/extended_template.stories.tsx index 10b6f1b17f4a..2b564bc26c4d 100644 --- a/x-pack/platform/plugins/private/canvas/public/expression_types/arg_types/series_style/__stories__/extended_template.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/expression_types/arg_types/series_style/__stories__/extended_template.stories.tsx @@ -6,9 +6,8 @@ */ import { action } from '@storybook/addon-actions'; -import { storiesOf } from '@storybook/react'; -import { array, radios, boolean } from '@storybook/addon-knobs'; -import React from 'react'; +import type { Meta } from '@storybook/react'; +import React, { useState } from 'react'; import { ExtendedTemplate } from '../extended_template'; import { ExpressionAstExpression } from '../../../../../types'; @@ -24,54 +23,70 @@ const defaultExpression: ExpressionAstExpression = { ], }; -const defaultValues = { - argValue: defaultExpression, -}; - -class Interactive extends React.Component<{}, { argValue: ExpressionAstExpression }> { - public state = defaultValues; - - public render() { - const include = []; - if (boolean('Lines', true)) { - include.push('lines'); - } - if (boolean('Bars', true)) { - include.push('bars'); - } - if (boolean('Points', true)) { - include.push('points'); - } - return ( - { - action('onValueChange')(argValue); - this.setState({ argValue }); - }} - resolved={{ labels: array('Series Labels', ['label1', 'label2']) }} - typeInstance={{ - name: radios('Type Instance', { default: 'defaultStyle', custom: 'custom' }, 'custom'), - options: { - include, - }, - }} - /> - ); - } +interface InteractiveProps { + lines?: boolean; + bars?: boolean; + points?: boolean; + seriesLabels: string[]; + typeInstance: 'defaultStyle' | 'custom'; } -storiesOf('arguments/SeriesStyle', module) - .addDecorator((story) => ( -
{story()}
- )) - .add('extended', () => ); +const Interactive = ({ + lines = true, + bars = true, + points = true, + seriesLabels = ['label1', 'label2'], + typeInstance = 'custom', +}: InteractiveProps) => { + const [argValue, setArgValue] = useState(defaultExpression); -storiesOf('arguments/SeriesStyle/components', module) - .addDecorator((story) => ( -
{story()}
- )) - .add('extended: defaults', () => ( + const include = []; + if (lines) include.push('lines'); + if (bars) include.push('bars'); + if (points) include.push('points'); + + return ( + { + action('onValueChange')(newValue); + setArgValue(newValue); + }} + resolved={{ labels: seriesLabels }} + typeInstance={{ + name: typeInstance, + options: { include }, + }} + /> + ); +}; + +export default { + title: 'arguments/SeriesStyle', + component: Interactive, + decorators: [ + (story) =>
{story()}
, + ], + args: { + lines: true, + bars: true, + points: true, + seriesLabels: ['label1', 'label2'], + typeInstance: 'custom', + }, + argTypes: { + typeInstance: { + control: 'radio', + options: ['defaultStyle', 'custom'], + }, + seriesLabels: { + control: 'object', + }, + }, +} as Meta; + +export const ExtendedDefaults = { + render: () => ( - )); + ), + + name: 'extended: defaults', +}; diff --git a/x-pack/platform/plugins/private/canvas/public/expression_types/arg_types/series_style/__stories__/simple_template.stories.tsx b/x-pack/platform/plugins/private/canvas/public/expression_types/arg_types/series_style/__stories__/simple_template.stories.tsx index b8a6fc3ac2da..becb9221715e 100644 --- a/x-pack/platform/plugins/private/canvas/public/expression_types/arg_types/series_style/__stories__/simple_template.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/public/expression_types/arg_types/series_style/__stories__/simple_template.stories.tsx @@ -6,7 +6,7 @@ */ import { action } from '@storybook/addon-actions'; -import { storiesOf } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import React from 'react'; // @ts-expect-error untyped local import { getDefaultWorkpad } from '../../../../state/defaults'; @@ -50,17 +50,21 @@ class Interactive extends React.Component<{}, { argValue: ExpressionAstExpressio } } -storiesOf('arguments/SeriesStyle', module) - .addDecorator((story) => ( -
{story()}
- )) - .add('simple', () => ); +export default { + title: 'arguments/SeriesStyle', -storiesOf('arguments/SeriesStyle/components', module) - .addDecorator((story) => ( -
{story()}
- )) - .add('simple: no labels', () => ( + decorators: [ + (story) =>
{story()}
, + ], +} as Meta; + +export const Simple = { + render: () => , + name: 'simple', +}; + +export const SimpleNoLabels = { + render: () => ( - )) - .add('simple: defaults', () => ( + ), + + name: 'simple: no labels', +}; + +export const SimpleDefaults = { + render: () => ( - )) - .add('simple: no series', () => ( + ), + + name: 'simple: defaults', +}; + +export const SimpleNoSeries = { + render: () => ( - )) - .add('simple: with series', () => ( + ), + + name: 'simple: no series', +}; + +export const SimpleWithSeries = { + render: () => ( - )); + ), + + name: 'simple: with series', +}; diff --git a/x-pack/platform/plugins/private/canvas/shareable_runtime/components/__stories__/canvas.stories.tsx b/x-pack/platform/plugins/private/canvas/shareable_runtime/components/__stories__/canvas.stories.tsx index 0c07affca227..363b8136826f 100644 --- a/x-pack/platform/plugins/private/canvas/shareable_runtime/components/__stories__/canvas.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/shareable_runtime/components/__stories__/canvas.stories.tsx @@ -5,7 +5,6 @@ * 2.0. */ -import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import React from 'react'; import { ExampleContext } from '../../test/context_example'; @@ -15,18 +14,32 @@ import { sharedWorkpads } from '../../test'; import { initialCanvasShareableState } from '../../context/state'; const { austin } = sharedWorkpads; -storiesOf('shareables/Canvas', module) - .add('contextual: austin', () => ( +export default { + title: 'shareables/Canvas', +}; + +export const ContextualAustin = { + render: () => ( - )) - .add('contextual: hello', () => ( + ), + + name: 'contextual: austin', +}; + +export const ContextualHello = { + render: () => ( - )) - .add('component', () => ( + ), + + name: 'contextual: hello', +}; + +export const Component = { + render: () => ( - )); + ), + + name: 'component', +}; diff --git a/x-pack/platform/plugins/private/canvas/shareable_runtime/components/__stories__/page.stories.tsx b/x-pack/platform/plugins/private/canvas/shareable_runtime/components/__stories__/page.stories.tsx index 1c01cffc0619..2b9b9fa7cf28 100644 --- a/x-pack/platform/plugins/private/canvas/shareable_runtime/components/__stories__/page.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/shareable_runtime/components/__stories__/page.stories.tsx @@ -5,7 +5,6 @@ * 2.0. */ -import { storiesOf } from '@storybook/react'; import React from 'react'; import { ExampleContext } from '../../test/context_example'; @@ -13,19 +12,36 @@ import { Page, PageComponent } from '../page'; import { sharedWorkpads } from '../../test'; const { austin } = sharedWorkpads; -storiesOf('shareables/Page', module) - .add('contextual: austin', () => ( +export default { + title: 'shareables/Page', +}; + +export const ContextualAustin = { + render: () => ( - )) - .add('contextual: hello', () => ( + ), + + name: 'contextual: austin', +}; + +export const ContextualHello = { + render: () => ( - )) - .add('component', () => ( + ), + + name: 'contextual: hello', +}; + +export const Component = { + render: () => ( - )); + ), + + name: 'component', +}; diff --git a/x-pack/platform/plugins/private/canvas/shareable_runtime/components/__stories__/rendered_element.stories.tsx b/x-pack/platform/plugins/private/canvas/shareable_runtime/components/__stories__/rendered_element.stories.tsx index ac35952a2976..1d8c2764a7cd 100644 --- a/x-pack/platform/plugins/private/canvas/shareable_runtime/components/__stories__/rendered_element.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/shareable_runtime/components/__stories__/rendered_element.stories.tsx @@ -5,7 +5,6 @@ * 2.0. */ -import { storiesOf } from '@storybook/react'; import React from 'react'; import { imageFunction } from '@kbn/expression-image-plugin/__fixtures__'; import { ExampleContext } from '../../test/context_example'; @@ -15,18 +14,32 @@ import { RenderedElement, RenderedElementComponent } from '../rendered_element'; const { austin, hello } = sharedWorkpads; -storiesOf('shareables/RenderedElement', module) - .add('contextual: hello', () => ( +export default { + title: 'shareables/RenderedElement', +}; + +export const ContextualHello = { + render: () => ( - )) - .add('contextual: austin', () => ( + ), + + name: 'contextual: hello', +}; + +export const ContextualAustin = { + render: () => ( - )) - .add('component', () => ( + ), + + name: 'contextual: austin', +}; + +export const Component = { + render: () => ( - )); + ), + + name: 'component', +}; diff --git a/x-pack/platform/plugins/private/canvas/shareable_runtime/components/footer/__stories__/footer.stories.tsx b/x-pack/platform/plugins/private/canvas/shareable_runtime/components/footer/__stories__/footer.stories.tsx index e33242735b28..4024e3ed4d47 100644 --- a/x-pack/platform/plugins/private/canvas/shareable_runtime/components/footer/__stories__/footer.stories.tsx +++ b/x-pack/platform/plugins/private/canvas/shareable_runtime/components/footer/__stories__/footer.stories.tsx @@ -5,20 +5,31 @@ * 2.0. */ -import { storiesOf } from '@storybook/react'; import React from 'react'; import { ExampleContext } from '../../../test/context_example'; import { Footer } from '../footer'; -storiesOf('shareables/Footer', module) - .add('contextual: hello', () => ( +export default { + title: 'shareables/Footer', +}; + +export const ContextualHello = { + render: () => (