docs: fix sb source and actions

package.json

@@ -76,7 +76,7 @@
     "@semantic-release/github": "^7.2.1",
     "@semantic-release/npm": "^7.1.1",
     "@semantic-release/release-notes-generator": "^9.0.2",
-    "@storybook/react": "^6.3.4",
+    "@storybook/react": "^6.3.7",
     "@types/chroma-js": "^2.0.0",
     "@types/classnames": "^2.2.7",
     "@types/color": "^3.0.1",

playground/playground.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 
-import { Example } from '../storybook/stories/goal/22_horizontal_plusminus';
+import { Example } from '../storybook/stories/goal/22_horizontal_plusminus.story';
 
 export class Playground extends React.Component {
   render() {

storybook/main.js

@@ -7,15 +7,18 @@
  */
 
 module.exports = {
-  stories: ['./stories/**/*.stories.ts', './stories/**/*.stories.tsx'],
+  stories: ['./stories/**/*.(stories|story).ts?(x)'],
   addons: [
+    '@storybook/addon-actions',
+    '@storybook/addon-docs',
     '@storybook/addon-knobs',
     '@storybook/addon-postcss',
+    '@storybook/addon-storysource',
     '@storybook/addon-viewport',
-    'storybook-addon-theme-toggle',
     'storybook-addon-background-toggle',
-    // https://github.com/storybookjs/storybook/issues/12199
-    // source no longer works with the bucketed `xxx.stories.tsx` files
-    // '@storybook/addon-storysource',
+    'storybook-addon-theme-toggle',
   ],
+  reactOptions: {
+    fastRefresh: true,
+  },
 };

storybook/package.json

@@ -20,17 +20,18 @@
     "seedrandom": "^3.0.5"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "~6.2.9",
-    "@storybook/addon-viewport": "~6.2.9",
+    "@storybook/addon-actions": "^6.3.7",
+    "@storybook/addon-docs": "^6.3.7",
     "@storybook/addon-knobs": "^6.3.0",
-    "@storybook/addon-links": "~6.2.9",
+    "@storybook/addon-links": "^6.3.7",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addon-storysource": "~6.2.9",
-    "@storybook/core": "~6.2.9",
-    "@storybook/core-common": "~6.2.9",
-    "@storybook/react": "~6.2.9",
-    "@storybook/source-loader": "~6.2.9",
-    "@storybook/theming": "~6.2.9",
+    "@storybook/addon-storysource": "^6.3.7",
+    "@storybook/addon-viewport": "^6.3.7",
+    "@storybook/core-common": "^6.3.7",
+    "@storybook/core": "^6.3.7",
+    "@storybook/react": "^6.3.7",
+    "@storybook/source-loader": "^6.3.7",
+    "@storybook/theming": "^6.3.7",
     "circular-dependency-plugin": "^5.2.2",
     "sass": "~1.32.0",
     "sass-loader": "^10.1.1",

storybook/parameters.ts

@@ -8,15 +8,30 @@
 
 import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
 import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+import type { Parameters as SBParameters } from '@storybook/addons';
 import { BackgroundParameter } from 'storybook-addon-background-toggle';
 import { ThemeParameter } from 'storybook-addon-theme-toggle';
 
-type Parameters = ThemeParameter & BackgroundParameter & { viewport: any };
+import { SB_KNOBS_PANEL, SB_SOURCE_PANEL } from './stories/utils/storybook';
+
+type Parameters = SBParameters & ThemeParameter & BackgroundParameter;
 
 const euiLogoUrl =
   'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8cGF0aCBmaWxsPSIjRkY5NTdEIiBkPSJNMTggMjVjLS41LTUuNS01LjUtMTAuNS0xMS0xMWw3LTdjLjUgNS41IDUuNSAxMC41IDExIDExbC03IDd6Ii8+CiAgPGNpcmNsZSBjeD0iNyIgY3k9IjciIHI9IjciIGZpbGw9IiNGMDRFOTgiLz4KICA8Y2lyY2xlIGN4PSIyNSIgY3k9IjI1IiByPSI3IiBmaWxsPSIjRkVDNTE0Ii8+CiAgPHBhdGggZmlsbD0iIzAwQkZCMyIgZD0iTTMxIDE0Yy03LjE4IDAtMTMtNS44Mi0xMy0xM2gxM3YxM3oiLz4KICA8cGF0aCBmaWxsPSIjMUJBOUY1IiBkPSJNMSAxOGM3LjE4IDAgMTMgNS44MiAxMyAxM0gxVjE4eiIvPgo8L3N2Zz4K';
 
 export const storybookParameters: Parameters = {
+  options: {
+    selectedPanel: process.env.NODE_ENV === 'development' ? SB_KNOBS_PANEL : SB_SOURCE_PANEL,
+  },
+  previewTabs: {
+    'storybook/docs/panel': {
+      hidden: true,
+    },
+    canvas: {
+      title: 'Story',
+      hidden: false,
+    },
+  },
   theme: {
     default: 'light',
     clearable: false,

storybook/stories/annotations/lines/8_advanced_markers.tsx → storybook/stories/annotations/lines/8_advanced_markers.story.tsx

@@ -26,7 +26,6 @@ import { isVerticalAxis } from '@elastic/charts/src/chart_types/xy_chart/utils/a
 
 import { useBaseTheme } from '../../../use_base_theme';
 import { getChartRotationKnob, getPositionKnob } from '../../utils/knobs';
-import { SB_KNOBS_PANEL } from '../../utils/storybook';
 
 const annotationStyle = {
   line: {
@@ -144,7 +143,6 @@ export const Example = () => {
 };
 
 Example.parameters = {
-  options: { selectedPanel: SB_KNOBS_PANEL },
   markdown: `The \`markerBody\` on the \`LineAnnotationSpec\` will be dynamically positioned to show content that would otherwise be hidden or overflow the chart.
     The \`marker\` prop (also on the \`LineAnnotationSpec\`) however, will always be positioned centered on the given \`dataValue\`.
     These can be used interchangeably to provide a content-rich annotation without losing the data reference.

storybook/stories/annotations/lines/line.stories.tsx

@@ -6,22 +6,17 @@
  * Side Public License, v 1.
  */
 
-import { SB_KNOBS_PANEL } from '../../utils/storybook';
-
 export default {
   title: 'Annotations/Lines',
-  parameters: {
-    options: { selectedPanel: SB_KNOBS_PANEL },
-  },
 };
 
-export { Example as xContinuousDomain } from './1_x_continuous';
-export { Example as xOrdinalDomain } from './2_x_ordinal';
-export { Example as xTimeDomain } from './3_x_time';
-export { Example as yDomain } from './4_y_domain';
-export { Example as styling } from './5_styling';
-export { Example as tooltipOptions } from './7_tooltip_options';
-export { Example as advancedMarkers } from './8_advanced_markers';
+export { Example as xContinuousDomain } from './1_x_continuous.story';
+export { Example as xOrdinalDomain } from './2_x_ordinal.story';
+export { Example as xTimeDomain } from './3_x_time.story';
+export { Example as yDomain } from './4_y_domain.story';
+export { Example as styling } from './5_styling.story';
+export { Example as tooltipOptions } from './7_tooltip_options.story';
+export { Example as advancedMarkers } from './8_advanced_markers.story';
 
 // for testing
-export { Example as singleBarHistogram } from './6_test_single_bar_histogram';
+export { Example as singleBarHistogram } from './6_test_single_bar_histogram.story';

storybook/stories/annotations/rects/rects.stories.tsx

@@ -6,20 +6,15 @@
  * Side Public License, v 1.
  */
 
-import { SB_KNOBS_PANEL } from '../../utils/storybook';
-
 export default {
   title: 'Annotations/Rects',
-  parameters: {
-    options: { selectedPanel: SB_KNOBS_PANEL },
-  },
 };
 
-export { Example as linearBarChart } from './1_linear_bar_chart';
-export { Example as ordinalBarChart } from './2_ordinal_bar_chart';
-export { Example as linearLineChart } from './3_linear_line_chart';
-export { Example as styling } from './4_styling';
-export { Example as tooltipOptions } from './5_tooltip_options';
-export { Example as zeroDomain } from './6_zero_domain';
-export { Example as withGroupId } from './7_with_group_id';
-export { Example as outside } from './8_outside';
+export { Example as linearBarChart } from './1_linear_bar_chart.story';
+export { Example as ordinalBarChart } from './2_ordinal_bar_chart.story';
+export { Example as linearLineChart } from './3_linear_line_chart.story';
+export { Example as styling } from './4_styling.story';
+export { Example as tooltipOptions } from './5_tooltip_options.story';
+export { Example as zeroDomain } from './6_zero_domain.story';
+export { Example as withGroupId } from './7_with_group_id.story';
+export { Example as outside } from './8_outside.story';

storybook/stories/area/10_stacked_same_naming.tsx → storybook/stories/area/10_stacked_same_naming.story.tsx

@@ -12,7 +12,6 @@ import { AreaSeries, Axis, Chart, Position, ScaleType, Settings, timeFormatter }
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
 import { useBaseTheme } from '../../use_base_theme';
-import { SB_SOURCE_PANEL } from '../utils/storybook';
 
 const dateFormatter = timeFormatter('HH:mm');
 
@@ -64,8 +63,3 @@ export const Example = () => (
     />
   </Chart>
 );
-
-// storybook configuration
-Example.parameters = {
-  options: { selectedPanel: SB_SOURCE_PANEL },
-};

storybook/stories/area/11_test_linear.tsx → storybook/stories/area/11_test_linear.story.tsx

@@ -12,7 +12,6 @@ import { AreaSeries, Axis, Chart, Position, ScaleType, Settings } from '@elastic
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
 import { useBaseTheme } from '../../use_base_theme';
-import { SB_SOURCE_PANEL } from '../utils/storybook';
 
 // for testing purposes only
 export const Example = () => {
@@ -48,8 +47,3 @@ export const Example = () => {
     </Chart>
   );
 };
-
-// storybook configuration
-Example.parameters = {
-  options: { selectedPanel: SB_SOURCE_PANEL },
-};

storybook/stories/area/12_test_time.tsx → storybook/stories/area/12_test_time.story.tsx

@@ -13,7 +13,6 @@ import { AreaSeries, Axis, Chart, Position, ScaleType, Settings, timeFormatter }
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
 import { useBaseTheme } from '../../use_base_theme';
-import { SB_SOURCE_PANEL } from '../utils/storybook';
 
 const dateFormatter = timeFormatter('HH:mm');
 
@@ -52,8 +51,3 @@ export const Example = () => {
     </Chart>
   );
 };
-
-// storybook configuration
-Example.parameters = {
-  options: { selectedPanel: SB_SOURCE_PANEL },
-};

storybook/stories/area/14_stacked_band.tsx → storybook/stories/area/14_stacked_band.story.tsx

@@ -12,7 +12,6 @@ import { AreaSeries, Axis, Chart, Position, ScaleType, Settings, timeFormatter }
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
 import { useBaseTheme } from '../../use_base_theme';
-import { SB_SOURCE_PANEL } from '../utils/storybook';
 
 const dateFormatter = timeFormatter('HH:mm');
 
@@ -60,8 +59,3 @@ export const Example = () => {
     </Chart>
   );
 };
-
-// storybook configuration
-Example.parameters = {
-  options: { selectedPanel: SB_SOURCE_PANEL },
-};

storybook/stories/area/15_stacked_grouped.tsx → storybook/stories/area/15_stacked_grouped.story.tsx

@@ -12,7 +12,6 @@ import { AreaSeries, Axis, Chart, Position, ScaleType, Settings } from '@elastic
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
 import { useBaseTheme } from '../../use_base_theme';
-import { SB_SOURCE_PANEL } from '../utils/storybook';
 
 export const Example = () => {
   const data1 = [
@@ -87,8 +86,3 @@ export const Example = () => {
     </Chart>
   );
 };
-
-// storybook configuration
-Example.parameters = {
-  options: { selectedPanel: SB_SOURCE_PANEL },
-};

storybook/stories/area/17_negative.tsx → storybook/stories/area/17_negative.story.tsx

@@ -13,7 +13,6 @@ import { AreaSeries, Axis, Chart, Position, ScaleType, Settings, timeFormatter }
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
 import { useBaseTheme } from '../../use_base_theme';
-import { SB_SOURCE_PANEL } from '../utils/storybook';
 
 const dateFormatter = timeFormatter('HH:mm');
 
@@ -52,8 +51,3 @@ export const Example = () => {
     </Chart>
   );
 };
-
-// storybook configuration
-Example.parameters = {
-  options: { selectedPanel: SB_SOURCE_PANEL },
-};

storybook/stories/area/18_negative_positive.tsx → storybook/stories/area/18_negative_positive.story.tsx

@@ -13,7 +13,6 @@ import { AreaSeries, Axis, Chart, Position, ScaleType, Settings, timeFormatter }
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
 import { useBaseTheme } from '../../use_base_theme';
-import { SB_SOURCE_PANEL } from '../utils/storybook';
 
 const dateFormatter = timeFormatter('HH:mm');
 
@@ -69,7 +68,3 @@ export const Example = () => {
     </Chart>
   );
 };
-// storybook configuration
-Example.parameters = {
-  options: { selectedPanel: SB_SOURCE_PANEL },
-};

storybook/stories/area/19_negative_band.tsx → storybook/stories/area/19_negative_band.story.tsx

@@ -12,7 +12,6 @@ import React from 'react';
 import { AreaSeries, Axis, Chart, Fit, LineSeries, Position, ScaleType, Settings } from '@elastic/charts';
 
 import { useBaseTheme } from '../../use_base_theme';
-import { SB_SOURCE_PANEL } from '../utils/storybook';
 
 export const Example = () => {
   const scaleType = select(
@@ -68,7 +67,3 @@ export const Example = () => {
     </Chart>
   );
 };
-// storybook configuration
-Example.parameters = {
-  options: { selectedPanel: SB_SOURCE_PANEL },
-};

storybook/stories/area/1_basic.tsx → storybook/stories/area/1_basic.story.tsx

@@ -12,7 +12,6 @@ import { AreaSeries, Chart, ScaleType, Settings } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
 import { useBaseTheme } from '../../use_base_theme';
-import { SB_SOURCE_PANEL } from '../utils/storybook';
 
 export const Example = () => {
   const { data } = KIBANA_METRICS.metrics.kibana_os_load[0];
@@ -30,8 +29,3 @@ export const Example = () => {
     </Chart>
   );
 };
-
-// storybook configuration
-Example.parameters = {
-  options: { selectedPanel: SB_SOURCE_PANEL },
-};

storybook/stories/area/20_stepped_area.tsx → storybook/stories/area/20_stepped_area.story.tsx

@@ -10,8 +10,6 @@ import React from 'react';
 
 import { AreaSeries, Axis, Chart, CurveType, Position, ScaleType } from '@elastic/charts';
 
-import { SB_SOURCE_PANEL } from '../utils/storybook';
-
 const data = [
   {
     key: 0,
@@ -438,7 +436,3 @@ export const Example = () => {
     </Chart>
   );
 };
-
-Example.parameters = {
-  options: { selectedPanel: SB_SOURCE_PANEL },
-};

storybook/stories/area/2_with_time.tsx → storybook/stories/area/2_with_time.story.tsx

@@ -15,7 +15,6 @@ import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_data
 
 import { useBaseTheme } from '../../use_base_theme';
 import { getChartRotationKnob, getPlacementKnob, getStickToKnob } from '../utils/knobs';
-import { SB_SOURCE_PANEL } from '../utils/storybook';
 
 const dateFormatter = timeFormatter('HH:mm');
 
@@ -54,8 +53,3 @@ export const Example = () => (
     />
   </Chart>
 );
-
-// storybook configuration
-Example.parameters = {
-  options: { selectedPanel: SB_SOURCE_PANEL },
-};

storybook/stories/area/3_with_linear.tsx → storybook/stories/area/3_with_linear.story.tsx

@@ -12,7 +12,6 @@ import { AreaSeries, Axis, Chart, CurveType, Position, ScaleType, Settings } fro
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
 import { useBaseTheme } from '../../use_base_theme';
-import { SB_SOURCE_PANEL } from '../utils/storybook';
 
 export const Example = () => {
   const start = KIBANA_METRICS.metrics.kibana_os_load[0].data[0][0];
@@ -40,8 +39,3 @@ export const Example = () => {
     </Chart>
   );
 };
-
-// storybook configuration
-Example.parameters = {
-  options: { selectedPanel: SB_SOURCE_PANEL },
-};

storybook/stories/area/4_with_log.tsx → storybook/stories/area/4_with_log.story.tsx

@@ -12,7 +12,6 @@ import { AreaSeries, Axis, Chart, CurveType, Position, ScaleType, Settings, time
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
 import { useBaseTheme } from '../../use_base_theme';
-import { SB_SOURCE_PANEL } from '../utils/storybook';
 
 const dateFormatter = timeFormatter('HH:mm');
 
@@ -41,8 +40,3 @@ export const Example = () => {
     </Chart>
   );
 };
-
-// storybook configuration
-Example.parameters = {
-  options: { selectedPanel: SB_SOURCE_PANEL },
-};