History

Nathan L Smith 2e3578602f APM Storybook fixes (#68671 ) * 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.		2020-06-09 16:17:28 -05:00
..
lib
storybook_config	APM Storybook fixes (#68671 )	2020-06-09 16:17:28 -05:00
index.js
package.json
README.md
yarn.lock

README.md

Kibana Storybook

This package provides ability to add Storybook to any Kibana plugin.

Setup Instructions

Setup Instructions

Add storybook.js launcher file to your plugin. For example, create a file at src/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>.