* Resolve core legacy assets in @kbn/storybook webpack configuration * Ignore stories in Jest coverage * Combine effects in Cytoscape component so handlers are always added before events are triggered * Add mock context to ErrorRateAlertTrigger stories * Disable TransactionDurationAlertTrigger stories Changing the Cytoscape effect behavior is necessary because the layout was not being triggered when the final set of elements is provided as props to the component. When this is used in Kibana we're always starting with empty elements and fetching them, but in the Storybook we're starting out with the full elements. |
||
---|---|---|
.. | ||
lib | ||
storybook_config | ||
index.js | ||
package.json | ||
README.md | ||
yarn.lock |
Kibana Storybook
This package provides ability to add Storybook to any Kibana plugin.
Setup Instructions
-
Add
storybook.js
launcher file to your plugin. For example, create a file atsrc/plugins/<plugin>/scripts/storybook.js
, with the following contents:import { join } from 'path'; // eslint-disable-next-line require('@kbn/storybook').runStorybookCli({ name: '<plugin>', storyGlobs: [join(__dirname, '..', 'public', 'components', '**', '*.examples.tsx')], });
-
Add your plugin alias to
src/dev/storybook/aliases.ts
config. -
Create sample Storybook stories. For example, in your plugin create create a file at
src/plugins/<plugin>/public/components/hello_world/__examples__/hello_world.examples.tsx
with the following contents:import * as React from 'react'; import { storiesOf } from '@storybook/react'; storiesOf('Hello world', module).add('default', () => <div>Hello world!</div>);
-
Launch Storybook with
yarn storybook <plugin>
.