Upgrade to Storybook 6 and attempt to use the declarative configuration. The goals of this PR (as part of Kibana's Storybook roadmap, are: Upgrade to Storybook 6 Still allow running Storybooks with yarn storybook plugin_name Use the declarative configuration to (hopefully) make the configuration simpler to use an easier to understand, as well as avoiding deprecation warnings and loss of future compatibility The ways in which what I have so far differs from how we do things today are: In the alias configuration it takes a path to a storybook configuration directory instead of the storybook.js file from before Each plugin (it doesn't have to be a plugin; can be any directory) has a .storybook/main.js (the aliases file in @kbn/storybook specifies these locations) where they can define their Storybook configuration. You can require('@kbn/storybook').defaultConfig to get defaults and override them @kbn/storybook has a preset that can provide Webpack and Babel configuration and Storybook parameters and decorators Instead of dynamically creating the list of stories to import, we define them in the globs of the stories property in .storybook/main.js. Do not build a DLL. We are using @kbn/ui-shared-deps as externals. Startup time is not quite as fast but still acceptable. Other things done in this PR: Allow default exports in .stories. to allow for Common Story Format CSF stories Add guard in Webpack configuration needed for overriding CSS rules Update filename casing check to allow for files with required names in Storybook Clean up observability stories Rename *.examples.tsx and *.story.tsx to *.stories.tsx
1.5 KiB
Kibana Storybook
This package provides ability to add Storybook to any Kibana plugin.
Setup Instructions
-
Add a
.storybook/main.js
configuration file to your plugin. For example, create a file atsrc/plugins/<plugin>/.storybook/main.js
, with the following contents:module.exports = require('@kbn/storybook').defaultConfig;
-
Add your plugin alias to
src/dev/storybook/aliases.ts
config. -
Create sample Storybook stories. For example, in your plugin create a file at
src/plugins/<plugin>/public/components/hello_world/hello_world.stories.tsx
with the following Component Story Format contents:import { MyComponent } from './my_component'; export default { component: MyComponent, title: 'Path/In/Side/Navigation/ToComponent', }; export function Example() { return <MyComponent />; }
-
Launch Storybook with
yarn storybook <plugin>
, or build a static site withyarn storybook --site <plugin>
.
Customizing configuration
The defaultConfig
object provided by the @kbn/storybook package should be all you need to get running, but you can
override this in your .storybook/main.js. Using Storybook's configuration options.