📕 Storybook for everyone (take 2) by streamich · Pull Request #43529 · elastic/kibana

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 merged 75 commits intoelastic:masterfrom
streamich:storybook-2

streamich commented Aug 19, 2019 •

edited

Loading

Uh oh!

Uh oh!

clintandrewhall commented Aug 30, 2019

Uh oh!

Uh oh!

spalger left a comment •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

clintandrewhall left a comment

Uh oh!

Uh oh!

kibanamachine commented Jan 15, 2020

Uh oh!

streamich commented Jan 15, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

Conversation

streamich commented Aug 19, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Canvas

Uh oh!

Uh oh!

clintandrewhall commented Aug 30, 2019

Uh oh!

Uh oh!

spalger left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

clintandrewhall left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

kibanamachine commented Jan 15, 2020

💚 Build Succeeded

History

Uh oh!

streamich commented Jan 15, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

streamich commented Aug 19, 2019 •

edited

Loading

spalger left a comment •

edited

Loading