📕 Storybook for everyone (take 2) #43529

streamich · 2019-08-19T14:38:35Z

Sets up a sample Storybook for embeddable, siem, and infra plugins.
Loads stories only for specific plugin.
Canvas Storybook still works as before (node x-pack/legacy/plugins/canvas/scripts/storybook).

See instructions:

yarn storybook

Run embeddable stories:

yarn storybook embeddable

Run siem stories:

yarn storybook siem

Run infra stories:

yarn storybook infra

Run canvas stories:

yarn storybook canvas

Canvas

We agreed that I would split Canvas stories in two: (1) the ones that can be run in new global Storybook; (2) and the ones that currently run only in the Canvas local one.

I went through all Canvas Storybook stories and was able to run the below 35 stories in the global Storybook. I changed their extension to .stories, so they now can be loaded with yarn storybook canvas. The internal Canvas Storybook will also load them, I changed it to support both extensions: .examples and .stories. For some of these stories to work in global Storybook I had to do small changes to imports and TypeScript types.

/public/components/file_upload/file_upload.stories.tsx
/public/components/font_picker/font_picker.stories.tsx
/public/components/color_dot/__examples__/color_dot.stories.tsx
/public/components/color_manager/__examples__/color_manager.stories.tsx
/public/components/color_palette/__examples__/color_palette.stories.tsx
/public/components/color_picker/__examples__/color_picker.stories.tsx
/public/components/color_picker_popover/__examples__/color_picker_popover.stories.tsx
/public/components/element_card/__examples__/element_card.stories.tsx
/public/components/element_types/__examples__/element_controls.stories.tsx
/public/components/element_types/__examples__/element_grid.stories.tsx
/public/components/item_grid/__examples__/item_grid.stories.tsx
/public/components/keyboard_shortcuts_doc/__examples__/keyboard_shortcuts_doc.stories.tsx
/public/components/shape_picker/__examples__/shape_picker.stories.tsx
/public/components/shape_preview/__examples__/shape_preview.stories.tsx
/public/components/shape_picker_popover/__examples__/shape_picker_popover.stories.tsx
/public/components/sidebar/__examples__/group_settings.stories.tsx
/public/components/sidebar/__examples__/multi_element_settings.stories.tsx
/public/components/sidebar_header/__examples__/sidebar_header.stories.tsx
/public/components/tag/__examples__/tag.stories.tsx
/public/components/tag_list/__examples__/tag_list.stories.tsx
/public/components/tool_tip_shortcut/__examples__/tool_tip_shortcut.stories.tsx
/public/components/workpad_header/workpad_export/__examples__/disabled_panel.stories.tsx
/public/components/workpad_header/workpad_export/__examples__/pdf_panel.stories.tsx
/public/components/workpad_header/workpad_export/flyout/__examples__/share_website_flyout.stories.tsx
/canvas_plugin_src/renderers/time_filter/components/datetime_range_absolute/__examples__/datetime_range_absolute.stories.tsx
/canvas_plugin_src/renderers/time_filter/components/datetime_calendar/__examples__/datetime_calendar.stories.tsx
/canvas_plugin_src/renderers/time_filter/components/datetime_quick_list/__examples__/datetime_quick_list.stories.tsx
/canvas_plugin_src/renderers/time_filter/components/datetime_input/__examples__/datetime_input.stories.tsx
/canvas_plugin_src/renderers/time_filter/components/time_picker/__examples__/time_picker.stories.tsx
/canvas_plugin_src/renderers/time_filter/components/pretty_duration/__examples__/pretty_duration.stories.tsx
/canvas_plugin_src/renderers/metric/component/__examples__/metric.stories.tsx
/canvas_plugin_src/uis/arguments/axis_config/__examples__/extended_template.stories.tsx
/canvas_plugin_src/uis/arguments/axis_config/__examples__/simple_template.stories.tsx
/canvas_plugin_src/uis/arguments/date_format/__examples__/date_format.stories.tsx
/canvas_plugin_src/uis/arguments/number_format/__examples__/number_format.stories.tsx

These remaining stories below would throw an error in global Storybook as they are using some state or some import from ui/public. Likely that not just the stories, but also the components themselves need some adjustment before they can be migrated to the New Platfrom and global Storybook:

/public/components/asset_manager/__examples__/asset.examples.tsx
/public/components/asset_manager/__examples__/asset_manager.examples.tsx
/public/components/custom_element_modal/__examples__/custom_element_modal.examples.tsx
/public/components/expression_input/__examples__/expression_input.examples.tsx
/public/components/workpad_header/workpad_export/__examples__/workpad_export.examples.tsx
/public/canvas_plugin_src/renderers/time_filter/components/time_filter/__examples__/time_filter.examples.tsx
/shareable_runtime/components/__examples__/canvas.examples.tsx
/shareable_runtime/components/__examples__/page.examples.tsx
/shareable_runtime/components/__examples__/rendered_element.examples.tsx
/shareable_runtime/components/footer/__examples__/page_controls.examples.tsx
/shareable_runtime/components/footer/__examples__/footer.examples.tsx
/shareable_runtime/components/footer/__examples__/scrubber.examples.tsx
/shareable_runtime/components/footer/__examples__/title.examples.tsx
/shareable_runtime/components/footer/settings/__examples__/autoplay_settings.examples.tsx
/shareable_runtime/components/footer/settings/__examples__/settings.examples.tsx
/shareable_runtime/components/footer/settings/__examples__/toolbar_settings.examples.tsx
/canvas_plugin_src/renderers/advanced_filter/component/__examples__/advanced_filter.examples.tsx
/canvas_plugin_src/renderers/dropdown_filter/component/__examples__/dropdown_filter.examples.tsx
/canvas_plugin_src/renderers/time_filter/components/time_picker_popover/__examples__/time_picker_popover.examples.tsx
/public/expression_types/arg_types/container_style/__examples__/simple_template.examples.tsx
/public/expression_types/arg_types/container_style/__examples__/extended_template.examples.tsx
/public/expression_types/arg_types/series_style/__examples__/extended_template.examples.tsx
/public/expression_types/arg_types/series_style/__examples__/simple_template.examples.tsx

Closes #37102

packages/kbn-storybook/storybook_config/webpack.config.js

clintandrewhall · 2019-08-30T16:51:35Z

Might want to take a look at #44511 ... I added a number of helpful flags to our script.

x-pack/legacy/plugins/canvas/public/components/popover/popover.tsx

spalger

LGTM once green, but a couple questions and two nits

src/dev/storybook/run_storybook_cli.ts

packages/kbn-storybook/index.js

src/dev/storybook/run_storybook_cli.ts

x-pack/package.json

clintandrewhall

Approving to unblock... most of the changes look good. I'll likely revisit the EuiPopoverAny, but could you please address the ticks in color_manager?

x-pack/legacy/plugins/canvas/public/components/color_manager/color_manager.tsx

kibanamachine · 2020-01-15T19:37:30Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: d4e7847

History

💚 Build #20587 succeeded 28dd3fb
💔 Build #20549 failed 3b42a13
💔 Build #20526 failed 9083e70
💔 Build #20093 failed eef1fc0
💔 Build #19694 failed 5386be1

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

streamich · 2020-01-15T20:30:31Z

Merging without the rest of the CODEOWNERS reviews as their changes don't have real code changes—only setup of sample Storybooks.

Add Storybook with help from changes in elastic#43529. We still need to do some work around having mocks for hooks and HTTP requests but the basics are there.

* 📕 Storybook for everyone (take 2) (#43529) * chore: 🤖 add Infra sample Storybook story * chore: 🤖 add @kbn/storybook package * chore: 🤖 add sample SIEM stories * chore: 🤖 add Canvas new Storybook config * fix: 🐛 fix TypeScript errors * chore: 🤖 add @kbn/babel-preset to package.json * chore: 🤖 move dependencies to devDependencies * chore: 🤖 make Storybook dependencies non-dev * chore: 🤖 upgrade Storybook dependencies * chore: 🤖 add packages to webpack * fix: 🐛 fix TypeScript type check * chore: 🤖 disable ESLint warnings * chore: 🤖 remove Storybook info plugin * chore: 🤖 upate yarn.lock * chore: 🤖 add Storbook to Embeddables * feat: 🎸 add --clean flag to Storybook CLI * coalesce yarn.lock versions * update kbn/pm dist * This reverts commit 97d8ff9 and 49b07cd. * chore: 🤖 use fs instead of mkdirp * chore: 🤖 use debug for message logging * chore: 🤖 update yarn.lock * feat: 🎸 add link to kbn-storybook package * docs: ✏️ add Storybook readme * chore: 🤖 remove packages that failed DLL build * style: 💄 add ESLint comma * chore: 🤖 apply changes from #52209 * fix: 🐛 make Canvas Storybook build again * chore: 🤖 move Canvas stories to global Storybook * chore: 🤖 move more Canvas components to global Storybook * chore: 🤖 move more Canvas stories to global Storybook * chore: 🤖 move <ItemGrid> and <KeyboardShortcutsDoc> to NP SB * chore: 🤖 move shape picker Canvas stories to global Storybook * chore: 🤖 move Canvas sidebar stories to global Storybook * fix: 🐛 split imports to not import path.resolve in Storybook * chore: 🤖 move tag and PDF panel Canvas stories to global SB * chore: 🤖 move Canvas share website flyout stories to global SB * fix: 🐛 clean up <ShareWebsiteFlyout> imports * chore: 🤖 add back Canvas withInfo decorator * chore: 🤖 look for Canvas stories everywhere in /canvas folder * test: 💍 mock correct files in Storyshots * test: 💍 update Canvas Storyshot snapshots * chore: 🤖 move more Canvas components to global Storybook * chore: 🤖 move more Canvas components to global Storybook * test: 💍 update Canvas Storyshots * chore: 🤖 rebuild @kbn/pm * chore: 🤖 refresh @kbn/pm dist/index.js artifact * chore: 🤖 update yarn.lock * chore: 🤖 update @kbn/pm artifact * feat: 🎸 address review comments * fix: 🐛 remove circular import * chore: 🤖 update yarn.lock * test: 💍 disable a test suite * test: 💍 update Canvas storyshots * chore: 🤖 remvoe build step from @kbn/storybook * chore: 🤖 enable disabled functional test suite Co-authored-by: Spencer <email@spalger.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> * chore: 🤖 update yarn.lock Co-authored-by: Spencer <email@spalger.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Add Storybook with help from changes in #43529. We still need to do some work around having mocks for hooks and HTTP requests but the basics are there.

* chore: 🤖 add Infra sample Storybook story * chore: 🤖 add @kbn/storybook package * chore: 🤖 add sample SIEM stories * chore: 🤖 add Canvas new Storybook config * fix: 🐛 fix TypeScript errors * chore: 🤖 add @kbn/babel-preset to package.json * chore: 🤖 move dependencies to devDependencies * chore: 🤖 make Storybook dependencies non-dev * chore: 🤖 upgrade Storybook dependencies * chore: 🤖 add packages to webpack * fix: 🐛 fix TypeScript type check * chore: 🤖 disable ESLint warnings * chore: 🤖 remove Storybook info plugin * chore: 🤖 upate yarn.lock * chore: 🤖 add Storbook to Embeddables * feat: 🎸 add --clean flag to Storybook CLI * coalesce yarn.lock versions * update kbn/pm dist * This reverts commit 97d8ff9 and 49b07cd. * chore: 🤖 use fs instead of mkdirp * chore: 🤖 use debug for message logging * chore: 🤖 update yarn.lock * feat: 🎸 add link to kbn-storybook package * docs: ✏️ add Storybook readme * chore: 🤖 remove packages that failed DLL build * style: 💄 add ESLint comma * chore: 🤖 apply changes from elastic#52209 * fix: 🐛 make Canvas Storybook build again * chore: 🤖 move Canvas stories to global Storybook * chore: 🤖 move more Canvas components to global Storybook * chore: 🤖 move more Canvas stories to global Storybook * chore: 🤖 move <ItemGrid> and <KeyboardShortcutsDoc> to NP SB * chore: 🤖 move shape picker Canvas stories to global Storybook * chore: 🤖 move Canvas sidebar stories to global Storybook * fix: 🐛 split imports to not import path.resolve in Storybook * chore: 🤖 move tag and PDF panel Canvas stories to global SB * chore: 🤖 move Canvas share website flyout stories to global SB * fix: 🐛 clean up <ShareWebsiteFlyout> imports * chore: 🤖 add back Canvas withInfo decorator * chore: 🤖 look for Canvas stories everywhere in /canvas folder * test: 💍 mock correct files in Storyshots * test: 💍 update Canvas Storyshot snapshots * chore: 🤖 move more Canvas components to global Storybook * chore: 🤖 move more Canvas components to global Storybook * test: 💍 update Canvas Storyshots * chore: 🤖 rebuild @kbn/pm * chore: 🤖 refresh @kbn/pm dist/index.js artifact * chore: 🤖 update yarn.lock * chore: 🤖 update @kbn/pm artifact * feat: 🎸 address review comments * fix: 🐛 remove circular import * chore: 🤖 update yarn.lock * test: 💍 disable a test suite * test: 💍 update Canvas storyshots * chore: 🤖 remvoe build step from @kbn/storybook * chore: 🤖 enable disabled functional test suite Co-authored-by: Spencer <email@spalger.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Add Storybook with help from changes in elastic#43529. We still need to do some work around having mocks for hooks and HTTP requests but the basics are there.

Add Storybook with help from changes in #43529. We still need to do some work around having mocks for hooks and HTTP requests but the basics are there.

streamich added 5 commits August 19, 2019 15:12

chore: 🤖 add Infra sample Storybook story

28971f3

chore: 🤖 add @kbn/storybook package

666871c

chore: 🤖 add sample SIEM stories

d783b52

chore: 🤖 add Canvas new Storybook config

a1ed9f4

fix: 🐛 fix TypeScript errors

2a83b27

elastic deleted a comment from elasticmachine Aug 19, 2019

tylersmalley reviewed Aug 19, 2019

View reviewed changes

packages/kbn-storybook/storybook_config/webpack.config.js Show resolved Hide resolved

streamich added 2 commits August 19, 2019 19:39

chore: 🤖 add @kbn/babel-preset to package.json

f49b9a6

chore: 🤖 move dependencies to devDependencies

4585e82

streamich changed the title ~~Storybook 2~~ 📕 Storybook for everyone (take 2) Aug 27, 2019

streamich mentioned this pull request Aug 27, 2019

📕 Storybook for everyone #38943

Closed

streamich added 2 commits August 30, 2019 16:13

chore: 🤖 catch up with master

1a357ec

chore: 🤖 make Storybook dependencies non-dev

5484761

clintandrewhall mentioned this pull request Aug 30, 2019

Update Storybook Dependencies #44519

Merged

2 tasks

clintandrewhall reviewed Aug 30, 2019

View reviewed changes

x-pack/legacy/plugins/canvas/public/components/popover/popover.tsx Show resolved Hide resolved

streamich added 7 commits December 5, 2019 21:22

chore: 🤖 catch-up with master

e800762

Merge remote-tracking branch 'upstream/master' into storybook-2

b4b587f

chore: 🤖 upgrade Storybook dependencies

a4f797f

chore: 🤖 add packages to webpack

6482901

fix: 🐛 fix TypeScript type check

e932374

chore: 🤖 catch-up with master

2d03884

chore: 🤖 disable ESLint warnings

f2a89f5

elastic deleted a comment from elasticmachine Dec 6, 2019

chore: 🤖 remove Storybook info plugin

cae01fa

elastic deleted a comment from elasticmachine Dec 6, 2019

chore: 🤖 upate yarn.lock

28e3c2b

elastic deleted a comment from elasticmachine Dec 6, 2019

elastic deleted a comment from elasticmachine Dec 7, 2019

streamich added 2 commits January 13, 2020 11:16

chore: 🤖 update yarn.lock

e41d520

chore: 🤖 update @kbn/pm artifact

5386be1

spalger approved these changes Jan 13, 2020

View reviewed changes

src/dev/storybook/run_storybook_cli.ts Outdated Show resolved Hide resolved

packages/kbn-storybook/index.js Show resolved Hide resolved

src/dev/storybook/run_storybook_cli.ts Outdated Show resolved Hide resolved

x-pack/package.json Show resolved Hide resolved

clintandrewhall approved these changes Jan 13, 2020

View reviewed changes

x-pack/legacy/plugins/canvas/public/components/color_manager/color_manager.tsx Outdated Show resolved Hide resolved

Merge remote-tracking branch 'upstream/master' into storybook-2

1b2d995

streamich mentioned this pull request Jan 14, 2020

📕 Storybook Roadmap #54707

Closed

11 tasks

streamich added v7.7.0 and removed v7.6.0 labels Jan 14, 2020

streamich added 8 commits January 14, 2020 12:59

feat: 🎸 address review comments

eef1fc0

fix: 🐛 remove circular import

4cc67d7

chore: 🤖 catch up with master

c773ec2

chore: 🤖 update yarn.lock

9083e70

test: 💍 disable a test suite

3b42a13

test: 💍 update Canvas storyshots

28dd3fb

chore: 🤖 remvoe build step from @kbn/storybook

2d8d08d

chore: 🤖 enable disabled functional test suite

d4e7847

streamich merged commit 22369c9 into elastic:master Jan 15, 2020

smith added a commit to smith/kibana that referenced this pull request Jan 15, 2020

[APM] Storybook support

93bb323

Add Storybook with help from changes in elastic#43529. We still need to do some work around having mocks for hooks and HTTP requests but the basics are there.

smith mentioned this pull request Jan 15, 2020

[APM] Storybook support #54970

Merged

streamich mentioned this pull request Jan 15, 2020

[7.x] 📕 Storybook for everyone (take 2) (#43529) #54992

Merged

smith added a commit that referenced this pull request Jan 16, 2020

[APM] Storybook support (#54970)

e60289f

Add Storybook with help from changes in #43529. We still need to do some work around having mocks for hooks and HTTP requests but the basics are there.

smith added a commit to smith/kibana that referenced this pull request Jan 30, 2020

[APM] Storybook support (elastic#54970)

09e75b0

Add Storybook with help from changes in elastic#43529. We still need to do some work around having mocks for hooks and HTTP requests but the basics are there.

smith added a commit that referenced this pull request Jan 31, 2020

[APM] Storybook support (#54970) (#56445)

cf19b86

Add Storybook with help from changes in #43529. We still need to do some work around having mocks for hooks and HTTP requests but the basics are there.

poffdeluxe mentioned this pull request Apr 14, 2020

[Canvas] Unify storybook example sets #63523

Closed

mshustov mentioned this pull request Jun 16, 2020

Remove unused deps #69243

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

📕 Storybook for everyone (take 2) #43529

📕 Storybook for everyone (take 2) #43529

streamich commented Aug 19, 2019 •

edited

Loading

clintandrewhall commented Aug 30, 2019

spalger left a comment •

edited

Loading

clintandrewhall left a comment

kibanamachine commented Jan 15, 2020

streamich commented Jan 15, 2020

📕 Storybook for everyone (take 2) #43529

📕 Storybook for everyone (take 2) #43529

Conversation

streamich commented Aug 19, 2019 • edited Loading

Canvas

clintandrewhall commented Aug 30, 2019

spalger left a comment • edited Loading

Choose a reason for hiding this comment

clintandrewhall left a comment

Choose a reason for hiding this comment

kibanamachine commented Jan 15, 2020

💚 Build Succeeded

History

streamich commented Jan 15, 2020

streamich commented Aug 19, 2019 •

edited

Loading

spalger left a comment •

edited

Loading