[7.x] [pre-req] Move .storybook to storybook; standardize files (#72384) (#72650)

This commit is contained in:
Clint Andrew Hall 2020-07-21 12:13:06 -04:00 committed by GitHub
parent dfae294c49
commit 4d6c221bb6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
71 changed files with 136 additions and 938 deletions

View file

@ -33,7 +33,7 @@ target
/x-pack/plugins/canvas/canvas_plugin
/x-pack/plugins/canvas/canvas_plugin_src/lib/flot-charts
/x-pack/plugins/canvas/shareable_runtime/build
/x-pack/plugins/canvas/storybook
/x-pack/plugins/canvas/storybook/build
/x-pack/plugins/monitoring/public/lib/jquery_flot
/x-pack/plugins/reporting/server/export_types/printable_pdf/server/lib/pdf/assets/**
/x-pack/legacy/plugins/infra/common/graphql/types.ts

View file

@ -1226,6 +1226,12 @@ module.exports = {
],
},
},
{
files: ['x-pack/plugins/canvas/storybook/**'],
rules: {
'import/no-extraneous-dependencies': 0,
},
},
{
files: ['x-pack/plugins/canvas/canvas_plugin_src/**/*.js'],
globals: { canvas: true, $: true },

View file

@ -50,7 +50,7 @@ export const IGNORE_FILE_GLOBS = [
'.ci/pipeline-library/**/*',
// Files in this directory must match a pre-determined name in some cases.
'x-pack/plugins/canvas/.storybook/*',
'x-pack/plugins/canvas/storybook/*',
// filename must match language code which requires capital letters
'**/translations/*.json',

View file

@ -57,4 +57,4 @@ canvas_plugin/*
webpack_stats.json
# Don't commit storybook builds
storybook
storybook/build

View file

@ -1,134 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots renderers/TimeFilter default 1`] = `
<div
className="canvasTimeFilter"
>
<div
className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
>
<div
className="euiFlexItem"
>
<div
className="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
>
<div
className="euiPopover euiPopover--anchorDownLeft"
id="QuickSelectPopover"
onKeyDown={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}
onTouchEnd={[Function]}
onTouchStart={[Function]}
>
<div
className="euiPopover__anchor euiQuickSelectPopover__anchor"
>
<button
aria-label="Date quick select"
className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--iconRight euiFormControlLayout__prepend"
data-test-subj="superDatePickerToggleQuickMenuButton"
disabled={false}
onClick={[Function]}
type="button"
>
<span
className="euiButtonEmpty__content"
>
<svg
aria-hidden={true}
className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonEmpty__icon"
focusable="false"
height={16}
role="img"
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
<span
className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
>
<svg
aria-hidden={true}
className="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height={16}
role="img"
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</span>
</span>
</button>
</div>
</div>
<div
className="euiFormControlLayout__childrenWrapper"
>
<div
className="euiDatePickerRange euiDatePickerRange--inGroup"
>
<div
className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiSuperDatePicker__startPopoverButton"
onKeyDown={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}
onTouchEnd={[Function]}
onTouchStart={[Function]}
>
<div
className="euiPopover__anchor"
>
<button
className="euiDatePopoverButton euiDatePopoverButton--start"
data-test-subj="superDatePickerstartDatePopoverButton"
disabled={false}
onClick={[Function]}
title="now-1y"
>
~ a year ago
</button>
</div>
</div>
<div
className="euiText euiText--small euiDatePickerRange__delimeter"
>
<div
className="euiTextColor euiTextColor--subdued"
>
</div>
</div>
<div
className="euiPopover euiPopover--anchorDownRight euiPopover--displayBlock"
onKeyDown={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}
onTouchEnd={[Function]}
onTouchStart={[Function]}
>
<div
className="euiPopover__anchor"
>
<button
className="euiDatePopoverButton euiDatePopoverButton--end"
data-test-subj="superDatePickerendDatePopoverButton"
disabled={false}
onClick={[Function]}
title="now-7d"
>
~ 7 days ago
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;

View file

@ -1,37 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots components/Assets/AssetManager no assets 1`] = `
<button
className="euiButtonEmpty euiButtonEmpty--primary"
onClick={[Function]}
type="button"
>
<span
className="euiButtonEmpty__content"
>
<span
className="euiButtonEmpty__text"
>
Manage assets
</span>
</span>
</button>
`;
exports[`Storyshots components/Assets/AssetManager two assets 1`] = `
<button
className="euiButtonEmpty euiButtonEmpty--primary"
onClick={[Function]}
type="button"
>
<span
className="euiButtonEmpty__content"
>
<span
className="euiButtonEmpty__text"
>
Manage assets
</span>
</span>
</button>
`;

View file

@ -5,7 +5,7 @@
*/
import { action } from '@storybook/addon-actions';
import { boolean, withKnobs } from '@storybook/addon-knobs';
import { boolean } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/react';
import React from 'react';
import { ColorPicker } from '../color_picker';
@ -54,7 +54,6 @@ class Interactive extends React.Component<
}
storiesOf('components/Color/ColorPicker', module)
.addDecorator(withKnobs)
.addParameters({
info: {
inline: true,

View file

@ -1,98 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots components/ElementTypes/ElementControls has two buttons 1`] = `
<div
style={
Object {
"width": "50px",
}
}
>
<div
className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive canvasElementCard__controls"
>
<div
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<span
className="euiToolTipAnchor"
onMouseOut={[Function]}
onMouseOver={[Function]}
>
<button
aria-describedby="generated-id"
aria-label="Edit element"
className="euiButtonIcon euiButtonIcon--primary"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
type="button"
>
<svg
aria-hidden="true"
className="euiIcon euiIcon--medium euiButtonIcon__icon"
focusable="false"
height="16"
style={null}
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<defs>
<path
d="M12.148 3.148L11 2l-9 9v3h3l9-9-1.144-1.144-8.002 7.998a.502.502 0 0 1-.708 0 .502.502 0 0 1 0-.708l8.002-7.998zM11 1c.256 0 .512.098.707.293l3 3a.999.999 0 0 1 0 1.414l-9 9A.997.997 0 0 1 5 15H2a1 1 0 0 1-1-1v-3c0-.265.105-.52.293-.707l9-9A.997.997 0 0 1 11 1zM5 14H2v-3l3 3z"
id="pencil-a"
/>
</defs>
<use
xlinkHref="#pencil-a"
/>
</svg>
</button>
</span>
</div>
<div
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<span
className="euiToolTipAnchor"
onMouseOut={[Function]}
onMouseOver={[Function]}
>
<button
aria-describedby="generated-id"
aria-label="Delete element"
className="euiButtonIcon euiButtonIcon--danger"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
type="button"
>
<svg
aria-hidden="true"
className="euiIcon euiIcon--medium euiButtonIcon__icon"
focusable="false"
height="16"
style={null}
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<defs>
<path
d="M11 3h5v1H0V3h5V1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2zm-7.056 8H7v1H4.1l.392 2.519c.042.269.254.458.493.458h6.03c.239 0 .451-.189.493-.458l1.498-9.576H14l-1.504 9.73c-.116.747-.74 1.304-1.481 1.304h-6.03c-.741 0-1.365-.557-1.481-1.304l-1.511-9.73H9V5.95H3.157L3.476 8H8v1H3.632l.312 2zM6 3h4V1H6v2z"
id="trash-a"
/>
</defs>
<use
xlinkHref="#trash-a"
/>
</svg>
</button>
</span>
</div>
</div>
</div>
`;

View file

@ -6,7 +6,7 @@
import { action } from '@storybook/addon-actions';
import { storiesOf } from '@storybook/react';
import { withKnobs, array, radios, boolean } from '@storybook/addon-knobs';
import { array, radios, boolean } from '@storybook/addon-knobs';
import React from 'react';
import { ExtendedTemplate } from '../extended_template';
@ -64,7 +64,6 @@ storiesOf('arguments/SeriesStyle', module)
.addDecorator((story) => (
<div style={{ width: '323px', padding: '16px', background: '#fff' }}>{story()}</div>
))
.addDecorator(withKnobs)
.add('extended', () => <Interactive />);
storiesOf('arguments/SeriesStyle/components', module)

View file

@ -52,7 +52,7 @@ run(
if (all) {
log.info('Running all available tests. This will take a while...');
} else if (storybook) {
path = 'plugins/canvas/.storybook';
path = 'plugins/canvas/storybook';
log.info('Running Storybook Snapshot tests...');
} else {
log.info('Running tests. This does not include Storybook Snapshots...');

View file

@ -10,7 +10,7 @@ const del = require('del');
const { run } = require('@kbn/dev-utils');
const storybook = require('@storybook/react/standalone');
const execa = require('execa');
const { DLL_OUTPUT } = require('./../.storybook/constants');
const { DLL_OUTPUT } = require('./../storybook/constants');
const options = {
stdio: ['ignore', 'inherit', 'inherit'],
@ -18,7 +18,7 @@ const options = {
};
const storybookOptions = {
configDir: path.resolve(__dirname, './../.storybook'),
configDir: path.resolve(__dirname, './../storybook'),
mode: 'dev',
};
@ -51,7 +51,7 @@ run(
[
'webpack',
'--config',
'x-pack/plugins/canvas/.storybook/webpack.dll.config.js',
'x-pack/plugins/canvas/storybook/webpack.dll.config.js',
'--progress',
'--hide-modules',
'--display-entrypoints',

View file

@ -1,140 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots shareables/Footer/components PageControls 1`] = `
<div
className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
style={
Object {
"margin": "0 12px",
}
}
>
<div
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<button
aria-label="Previous Page"
className="euiButtonIcon euiButtonIcon--ghost"
data-test-subj="pageControlsPrevPage"
disabled={true}
onClick={[Function]}
type="button"
>
<svg
aria-hidden="true"
className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</button>
</div>
<div
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<button
className="euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small"
data-test-subj="pageControlsCurrentPage"
onClick={[Function]}
type="button"
>
<span
className="euiButtonEmpty__content"
>
<span
className="euiButtonEmpty__text"
>
<div
className="euiText euiText--small"
>
<div
className="euiTextColor euiTextColor--ghost"
>
Page
1
</div>
</div>
</span>
</span>
</button>
</div>
<div
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<button
aria-label="Next Page"
className="euiButtonIcon euiButtonIcon--ghost"
data-test-subj="pageControlsNextPage"
disabled={true}
onClick={[Function]}
type="button"
>
<svg
aria-hidden="true"
className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</button>
</div>
</div>
`;
exports[`Storyshots shareables/Footer/components Title 1`] = `
<div
style={
Object {
"background": "#333",
"padding": 10,
}
}
>
<div
className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
>
<div
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</div>
<div
className="euiFlexItem euiFlexItem--flexGrowZero"
style={
Object {
"cursor": "default",
"minWidth": 0,
}
}
>
<div
className="euiText euiText--small"
>
<div
className="euiTextColor euiTextColor--ghost"
>
<div
className="eui-textTruncate"
>
This is a test title.
</div>
</div>
</div>
</div>
</div>
</div>
`;

View file

@ -1,479 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots shareables/Settings/components AutoplaySettings, autoplay disabled 1`] = `
<div
style={
Object {
"padding": 16,
}
}
>
<div
className="euiSwitch"
>
<input
checked={false}
className="euiSwitch__input"
id="cycle"
name="cycle"
onChange={[Function]}
type="checkbox"
/>
<span
className="euiSwitch__body"
>
<span
className="euiSwitch__thumb"
/>
<span
className="euiSwitch__track"
>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</span>
</span>
<label
className="euiSwitch__label"
htmlFor="cycle"
>
Cycle Slides
</label>
</div>
<hr
className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
/>
<form
onSubmit={[Function]}
>
<div
className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
>
<div
className="euiFlexItem"
>
<div
className="euiFormRow euiFormRow--compressed"
id="generated-id-row"
>
<div
className="euiFormRow__labelWrapper"
>
<label
className="euiFormLabel euiFormRow__label"
htmlFor="generated-id"
>
Set a custom interval
</label>
</div>
<div
className="euiFormRow__fieldWrapper"
>
<div
className="euiFormControlLayout euiFormControlLayout--compressed"
>
<div
className="euiFormControlLayout__childrenWrapper"
>
<input
aria-describedby="generated-id-help"
className="euiFieldText euiFieldText--compressed"
id="generated-id"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
type="text"
value="5s"
/>
</div>
</div>
<div
className="euiFormHelpText euiFormRow__text"
id="generated-id-help"
>
Use shorthand notation, like 30s, 10m, or 1h
</div>
</div>
</div>
</div>
<div
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
className="euiFormRow"
id="generated-id-row"
>
<div
className="euiFormRow__labelWrapper"
>
<label
className="euiFormLabel euiFormRow__label"
htmlFor="generated-id"
>
 
</label>
</div>
<div
className="euiFormRow__fieldWrapper"
>
<button
className="euiButton euiButton--primary euiButton--small"
disabled={false}
id="generated-id"
onBlur={[Function]}
onFocus={[Function]}
style={
Object {
"minWidth": "auto",
}
}
type="submit"
>
<span
className="euiButton__content"
>
<span
className="euiButton__text"
>
Set
</span>
</span>
</button>
</div>
</div>
</div>
</div>
</form>
</div>
`;
exports[`Storyshots shareables/Settings/components AutoplaySettings, autoplay enabled 1`] = `
<div
style={
Object {
"padding": 16,
}
}
>
<div
className="euiSwitch"
>
<input
checked={true}
className="euiSwitch__input"
id="cycle"
name="cycle"
onChange={[Function]}
type="checkbox"
/>
<span
className="euiSwitch__body"
>
<span
className="euiSwitch__thumb"
/>
<span
className="euiSwitch__track"
>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</span>
</span>
<label
className="euiSwitch__label"
htmlFor="cycle"
>
Cycle Slides
</label>
</div>
<hr
className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
/>
<form
onSubmit={[Function]}
>
<div
className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
>
<div
className="euiFlexItem"
>
<div
className="euiFormRow euiFormRow--compressed"
id="generated-id-row"
>
<div
className="euiFormRow__labelWrapper"
>
<label
className="euiFormLabel euiFormRow__label"
htmlFor="generated-id"
>
Set a custom interval
</label>
</div>
<div
className="euiFormRow__fieldWrapper"
>
<div
className="euiFormControlLayout euiFormControlLayout--compressed"
>
<div
className="euiFormControlLayout__childrenWrapper"
>
<input
aria-describedby="generated-id-help"
className="euiFieldText euiFieldText--compressed"
id="generated-id"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
type="text"
value="5s"
/>
</div>
</div>
<div
className="euiFormHelpText euiFormRow__text"
id="generated-id-help"
>
Use shorthand notation, like 30s, 10m, or 1h
</div>
</div>
</div>
</div>
<div
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
className="euiFormRow"
id="generated-id-row"
>
<div
className="euiFormRow__labelWrapper"
>
<label
className="euiFormLabel euiFormRow__label"
htmlFor="generated-id"
>
 
</label>
</div>
<div
className="euiFormRow__fieldWrapper"
>
<button
className="euiButton euiButton--primary euiButton--small"
disabled={false}
id="generated-id"
onBlur={[Function]}
onFocus={[Function]}
style={
Object {
"minWidth": "auto",
}
}
type="submit"
>
<span
className="euiButton__content"
>
<span
className="euiButton__text"
>
Set
</span>
</span>
</button>
</div>
</div>
</div>
</div>
</form>
</div>
`;
exports[`Storyshots shareables/Settings/components ToolbarSettings, autohide disabled 1`] = `
<div
style={
Object {
"padding": 16,
}
}
>
<div
className="euiFormRow"
id="generated-id-row"
>
<div
className="euiFormRow__fieldWrapper"
>
<div
className="euiSwitch"
>
<input
aria-describedby="generated-id-help"
checked={false}
className="euiSwitch__input"
data-test-subj="hideToolbarSwitch"
id="generated-id"
name="toolbarHide"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
type="checkbox"
/>
<span
className="euiSwitch__body"
>
<span
className="euiSwitch__thumb"
/>
<span
className="euiSwitch__track"
>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</span>
</span>
<label
className="euiSwitch__label"
htmlFor="generated-id"
>
Hide Toolbar
</label>
</div>
<div
className="euiFormHelpText euiFormRow__text"
id="generated-id-help"
>
Hide the toolbar when the mouse is not within the Canvas?
</div>
</div>
</div>
</div>
`;
exports[`Storyshots shareables/Settings/components ToolbarSettings, autohide enabled 1`] = `
<div
style={
Object {
"padding": 16,
}
}
>
<div
className="euiFormRow"
id="generated-id-row"
>
<div
className="euiFormRow__fieldWrapper"
>
<div
className="euiSwitch"
>
<input
aria-describedby="generated-id-help"
checked={true}
className="euiSwitch__input"
data-test-subj="hideToolbarSwitch"
id="generated-id"
name="toolbarHide"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
type="checkbox"
/>
<span
className="euiSwitch__body"
>
<span
className="euiSwitch__thumb"
/>
<span
className="euiSwitch__track"
>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
</span>
</span>
<label
className="euiSwitch__label"
htmlFor="generated-id"
>
Hide Toolbar
</label>
</div>
<div
className="euiFormHelpText euiFormRow__text"
id="generated-id-help"
>
Hide the toolbar when the mouse is not within the Canvas?
</div>
</div>
</div>
</div>
`;

View file

@ -4,13 +4,11 @@
* you may not use this file except in compliance with the Elastic License.
*/
import React from 'react';
import { configure, addDecorator, addParameters } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs/react';
import { withInfo } from '@storybook/addon-info';
import { create } from '@storybook/theming';
import { KibanaContextProvider } from '../../../../src/plugins/kibana_react/public';
import { addDecorators } from './decorators';
// If we're running Storyshots, be sure to register the require context hook.
// Otherwise, add the other decorators.
@ -31,18 +29,9 @@ if (process.env.NODE_ENV === 'test') {
},
})
);
// Add optional knobs to customize each story.
addDecorator(withKnobs);
}
// Add New Platform Context for any stories that need it
const settings = new Map();
settings.set('darkMode', true);
const platform = {
uiSettings: settings,
};
addDecorator(fn => <KibanaContextProvider services={platform}>{fn()}</KibanaContextProvider>);
addDecorators();
function loadStories() {
require('./dll_contexts');
@ -54,14 +43,14 @@ function loadStories() {
true,
/plugins\/(?=canvas).*light\.css/
);
css.keys().forEach(filename => css(filename));
css.keys().forEach((filename) => css(filename));
// Find all files ending in *.examples.ts
const req = require.context('./..', true, /.(stories|examples).tsx$/);
req.keys().forEach(filename => req(filename));
// Find all files ending in *.stories.tsx
const req = require.context('./..', true, /.(stories).tsx$/);
req.keys().forEach((filename) => req(filename));
// Import Canvas CSS
require('../public/style/index.scss')
require('../public/style/index.scss');
}
// Set up the Storybook environment with custom settings.

View file

@ -0,0 +1,19 @@
/*
* 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.
*/
import { addDecorator } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
// @ts-expect-error
import { withInfo } from '@storybook/addon-info';
import { routerContextDecorator } from './router_decorator';
import { kibanaContextDecorator } from './kibana_decorator';
export const addDecorators = () => {
addDecorator(withKnobs);
addDecorator(kibanaContextDecorator);
addDecorator(routerContextDecorator);
};

View file

@ -0,0 +1,26 @@
/*
* 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.
*/
import React from 'react';
import { KibanaContextProvider } from '../../../../../src/plugins/kibana_react/public';
const settings = new Map();
settings.set('darkMode', true);
const platform = {
http: {
basePath: {
get: () => '',
prepend: () => '',
remove: () => '',
serverBasePath: '',
},
},
uiSettings: settings,
};
export const kibanaContextDecorator = (story: Function) => (
<KibanaContextProvider services={platform}>{story()}</KibanaContextProvider>
);

View file

@ -0,0 +1,30 @@
/*
* 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.
*/
import React from 'react';
import PropTypes from 'prop-types';
class RouterContext extends React.Component {
static childContextTypes = {
router: PropTypes.object.isRequired,
};
getChildContext() {
return {
router: {
getFullPath: () => 'path',
create: () => '',
},
};
}
render() {
return <>{this.props.children}</>;
}
}
export function routerContextDecorator(story: Function) {
return <RouterContext>{story()}</RouterContext>;
}

View file

@ -15,7 +15,7 @@ const css = require.context(
true,
/\.\/plugins\/(?!canvas).*light\.css/
);
css.keys().forEach(filename => {
css.keys().forEach((filename) => {
css(filename);
});
@ -25,7 +25,7 @@ const uiStyles = require.context(
false,
/[\/\\](?!mixins|variables|_|\.|bootstrap_(light|dark))[^\/\\]+\.less/
);
uiStyles.keys().forEach(key => uiStyles(key));
uiStyles.keys().forEach((key) => uiStyles(key));
const json = require.context('../shareable_runtime/test/workpads', false, /\.json$/);
json.keys().forEach(key => json(key));
json.keys().forEach((key) => json(key));

View file

@ -4,10 +4,13 @@
* you may not use this file except in compliance with the Elastic License.
*/
const serve = require('serve-static');
const path = require('path');
const serve = require('serve-static');
// Extend the Storybook Middleware to include a route to access Legacy UI assets
module.exports = function(router) {
router.get('/ui', serve(path.resolve(__dirname, '../../../../../src/core/server/core_app/assets')));
module.exports = function (router) {
router.get(
'/ui',
serve(path.resolve(__dirname, '../../../../../src/core/server/core_app/assets'))
);
};

View file

@ -53,7 +53,7 @@ jest.mock('@elastic/eui/packages/react-datepicker', () => {
});
// Mock React Portal for components that use modals, tooltips, etc
ReactDOM.createPortal = jest.fn(element => {
ReactDOM.createPortal = jest.fn((element) => {
return element;
});
@ -67,7 +67,7 @@ jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => {
// https://github.com/elastic/eui/issues/3712
jest.mock('@elastic/eui/lib/components/overlay_mask/overlay_mask', () => {
return {
EuiOverlayMask: ({children}) => children,
EuiOverlayMask: ({ children }) => children,
};
});
@ -79,19 +79,19 @@ jest.mock(
}
);
import { EuiObserver } from '@elastic/eui/test-env/components/observer/observer';
jest.mock('@elastic/eui/test-env/components/observer/observer');
EuiObserver.mockImplementation(() => 'EuiObserver');
// This element uses a `ref` and cannot be rendered by Jest snapshots.
import { RenderedElement } from '../shareable_runtime/components/rendered_element';
jest.mock('../shareable_runtime/components/rendered_element');
RenderedElement.mockImplementation(() => 'RenderedElement');
import { EuiObserver } from '@elastic/eui/test-env/components/observer/observer';
jest.mock('@elastic/eui/test-env/components/observer/observer');
EuiObserver.mockImplementation(() => 'EuiObserver');
addSerializer(styleSheetSerializer);
// Initialize Storyshots and build the Jest Snapshots
initStoryshots({
configPath: path.resolve(__dirname, './../.storybook'),
configPath: path.resolve(__dirname, './../storybook'),
test: multiSnapshotWithOptions({}),
});

View file

@ -14,7 +14,7 @@ const { DLL_OUTPUT, KIBANA_ROOT } = require('./constants');
module.exports = async ({ config }) => {
// Find and alter the CSS rule to replace the Kibana public path string with a path
// to the route we've added in middleware.js
const cssRule = config.module.rules.find(rule => rule.test.source.includes('.css$'));
const cssRule = config.module.rules.find((rule) => rule.test.source.includes('.css$'));
cssRule.use.push({
loader: 'string-replace-loader',
options: {
@ -153,7 +153,7 @@ module.exports = async ({ config }) => {
config.plugins.push(
// replace imports for `uiExports/*` modules with a synthetic module
// created by create_ui_exports_module.js
new webpack.NormalModuleReplacementPlugin(/^uiExports\//, resource => {
new webpack.NormalModuleReplacementPlugin(/^uiExports\//, (resource) => {
// uiExports used by Canvas
const extensions = {
hacks: [],
@ -179,10 +179,22 @@ module.exports = async ({ config }) => {
}),
// Mock out libs used by a few componets to avoid loading in kibana_legacy and platform
new webpack.NormalModuleReplacementPlugin(/(lib)?\/notify/, path.resolve(__dirname, '../tasks/mocks/uiNotify')),
new webpack.NormalModuleReplacementPlugin(/lib\/download_workpad/, path.resolve(__dirname, '../tasks/mocks/downloadWorkpad')),
new webpack.NormalModuleReplacementPlugin(/(lib)?\/custom_element_service/, path.resolve(__dirname, '../tasks/mocks/customElementService')),
new webpack.NormalModuleReplacementPlugin(/(lib)?\/ui_metric/, path.resolve(__dirname, '../tasks/mocks/uiMetric')),
new webpack.NormalModuleReplacementPlugin(
/(lib)?\/notify/,
path.resolve(__dirname, '../tasks/mocks/uiNotify')
),
new webpack.NormalModuleReplacementPlugin(
/lib\/download_workpad/,
path.resolve(__dirname, '../tasks/mocks/downloadWorkpad')
),
new webpack.NormalModuleReplacementPlugin(
/(lib)?\/custom_element_service/,
path.resolve(__dirname, '../tasks/mocks/customElementService')
),
new webpack.NormalModuleReplacementPlugin(
/(lib)?\/ui_metric/,
path.resolve(__dirname, '../tasks/mocks/uiMetric')
)
);
// Tell Webpack about relevant extensions
@ -196,7 +208,10 @@ module.exports = async ({ config }) => {
'../tasks/mocks/uiNotifyFormatMsg'
);
config.resolve.alias['ui/notify'] = path.resolve(__dirname, '../tasks/mocks/uiNotify');
config.resolve.alias['ui/url/absolute_to_parsed_url'] = path.resolve(__dirname, '../tasks/mocks/uiAbsoluteToParsedUrl');
config.resolve.alias['ui/url/absolute_to_parsed_url'] = path.resolve(
__dirname,
'../tasks/mocks/uiAbsoluteToParsedUrl'
);
config.resolve.alias['ui/chrome'] = path.resolve(__dirname, '../tasks/mocks/uiChrome');
config.resolve.alias.ui = path.resolve(KIBANA_ROOT, 'src/legacy/ui/public');
config.resolve.alias.ng_mock$ = path.resolve(KIBANA_ROOT, 'src/test_utils/public/ng_mock');

View file

@ -4,8 +4,8 @@
* you may not use this file except in compliance with the Elastic License.
*/
const webpack = require('webpack');
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { DLL_NAME, DLL_OUTPUT, KIBANA_ROOT } = require('./constants');