7a2e487f01
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
* Storybook 6 and config changes (#75357)
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
Co-authored-by: Tyler Smalley <tyler.smalley@elastic.co>
42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
/*
|
|
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
|
* or more contributor license agreements. Licensed under the Elastic License;
|
|
* you may not use this file except in compliance with the Elastic License.
|
|
*/
|
|
|
|
declare module '*.html' {
|
|
const template: string;
|
|
// eslint-disable-next-line import/no-default-export
|
|
export default template;
|
|
}
|
|
|
|
declare module '*.png' {
|
|
const content: string;
|
|
// eslint-disable-next-line import/no-default-export
|
|
export default content;
|
|
}
|
|
|
|
declare module '*.svg' {
|
|
const content: string;
|
|
// eslint-disable-next-line import/no-default-export
|
|
export default content;
|
|
}
|
|
|
|
type MethodKeysOf<T> = {
|
|
[K in keyof T]: T[K] extends (...args: any[]) => any ? K : never;
|
|
}[keyof T];
|
|
|
|
type PublicMethodsOf<T> = Pick<T, MethodKeysOf<T>>;
|
|
|
|
declare module 'axios/lib/adapters/xhr';
|
|
|
|
type Writable<T> = {
|
|
-readonly [K in keyof T]: T[K];
|
|
};
|
|
|
|
// Storybook references this module. It's @ts-ignored in the codebase but when
|
|
// built into its dist it strips that out. Add it here to avoid a type checking
|
|
// error.
|
|
//
|
|
// See https://github.com/storybookjs/storybook/issues/11684
|
|
declare module 'react-syntax-highlighter/dist/cjs/create-element';
|