docs: enable story source for current stories (#557)

This commit add the storySource addon to visualize the source code of each stories on the right panel

Co-authored-by: Marco Vettorello <[email protected]>

.eslintrc.js

@@ -68,6 +68,7 @@ module.exports = {
     '@typescript-eslint/no-use-before-define': 'off',
     '@typescript-eslint/ban-ts-ignore': 'off',
     '@typescript-eslint/no-inferrable-types': 'off',
+    'react/jsx-curly-brace-presence': ['error', { props: 'never', children: 'never' }],
   },
   settings: {
     'import/resolver': {

.playground/playground.tsx

@@ -15,13 +15,13 @@ export class Playground extends React.Component<{}, { isSunburstShown: boolean }
       <>
         <div className="chart">
           <Chart>
-            <Axis id="y1" position={Position.Left} title={'y1'} />
-            <Axis id="y2" domain={{ fit: true }} groupId="g2" position={Position.Right} title={'y2'} />
-            <Axis id="x" position={Position.Bottom} title={'x'} />
+            <Axis id="y1" position={Position.Left} title="y1" />
+            <Axis id="y2" domain={{ fit: true }} groupId="g2" position={Position.Right} title="y2" />
+            <Axis id="x" position={Position.Bottom} title="x" />
             <LineSeries
               id="line1"
               xScaleType={ScaleType.Linear}
-              xAccessor={'x'}
+              xAccessor="x"
               yAccessors={['y']}
               splitSeriesAccessors={['g']}
               data={data}
@@ -30,7 +30,7 @@ export class Playground extends React.Component<{}, { isSunburstShown: boolean }
               id="line2"
               groupId="g2"
               xScaleType={ScaleType.Linear}
-              xAccessor={'x'}
+              xAccessor="x"
               yAccessors={['y1']}
               splitSeriesAccessors={['g']}
               data={data}

.storybook/addons.ts

@@ -1,3 +1,4 @@
 import '@storybook/addon-actions/register';
 import '@storybook/addon-knobs/register';
 import '@storybook/addon-docs/register';
+import '@storybook/addon-storysource/register';

.storybook/config.ts

@@ -24,7 +24,7 @@ addParameters({
   },
   info: {
     inline: true,
-    source: true,
+    source: false,
     propTables: false,
     styles: {
       infoBody: {
@@ -40,4 +40,4 @@ addParameters({
 addDecorator(withKnobs);
 addDecorator(withInfo);
 
-configure(require.context('../stories', true, /\.tsx$/), module);
+configure(require.context('../stories', true, /\.stories\.tsx?$/), module);

.storybook/webpack.config.js

@@ -36,6 +36,19 @@ module.exports = async ({ config }) => {
     exclude: /node_modules/,
   });
 
+  config.module.rules.push({
+    test: /\.tsx?$/,
+    include: [path.resolve(__dirname, '../stories/')],
+    exclude: [path.resolve(__dirname, '../stories/utils')],
+    loaders: [
+      {
+        loader: require.resolve('@storybook/source-loader'),
+        options: { parser: 'typescript' },
+      },
+    ],
+    enforce: 'pre',
+  });
+
   // Replace default css rules with nonce
   config.module.rules = config.module.rules.filter(({ test }) => !test.test('.css'));
   config.module.rules.push({

docs/charts.tsx

@@ -14,7 +14,7 @@ import {
 } from '../src';
 import React from 'react';
 import { KIBANA_METRICS } from '../src/utils/data_samples/test_dataset_kibana';
-import { arrayKnobs, getChartRotationKnob } from '../stories/common';
+import { arrayKnobs, getChartRotationKnob } from '../stories/utils/knobs';
 import { Icon } from '../src/components/icons/icon';
 
 export default {
@@ -39,7 +39,7 @@ export const Basic = () => {
     <Chart className={className}>
       <BarSeries
         id={specId}
-        name={'Simple bar series'}
+        name="Simple bar series"
         xScaleType={ScaleType.Linear}
         yScaleType={ScaleType.Linear}
         xAccessor="x"
@@ -61,7 +61,7 @@ export const AreaBasic = () => {
   const specId = toggleSpec ? 'areas1' : 'areas2';
 
   return (
-    <Chart className={'story-chart'}>
+    <Chart className="story-chart">
       <AreaSeries
         id={specId}
         xScaleType={ScaleType.Time}
@@ -104,7 +104,7 @@ export const lineBasicXDomainContinous = () => {
   const axisPosition = isBottom ? Position.Bottom : Position.Top;
 
   return (
-    <Chart className={'story-chart'}>
+    <Chart className="story-chart">
       <Settings showLegend debug={boolean('debug', false)} rotation={getChartRotationKnob()} />
       <LineAnnotation
         id={getAnnotationId('anno_1')}
@@ -113,10 +113,10 @@ export const lineBasicXDomainContinous = () => {
         style={style}
         marker={<Icon type="alert" />}
       />
-      <Axis id={'horizontal'} position={axisPosition} title={'x-domain axis'} />
-      <Axis id={'vertical'} title={'y-domain axis'} position={Position.Left} />
+      <Axis id="horizontal" position={axisPosition} title="x-domain axis" />
+      <Axis id="vertical" title="y-domain axis" position={Position.Left} />
       <BarSeries
-        id={'bars'}
+        id="bars"
         xScaleType={ScaleType.Linear}
         yScaleType={ScaleType.Linear}
         xAccessor="x"
@@ -138,19 +138,19 @@ export const lineBasicXDomainOrdinal = () => {
   const dataValues = generateAnnotationData(arrayKnobs('annotation values', ['a', 'c']));
 
   return (
-    <Chart className={'story-chart'}>
+    <Chart className="story-chart">
       <Settings debug={boolean('debug', false)} rotation={getChartRotationKnob()} />
       <LineAnnotation
-        id={'anno_1'}
+        id="anno_1"
         domainType={AnnotationDomainTypes.XDomain}
         dataValues={dataValues}
         marker={<Icon type="alert" />}
       />
-      <Axis id={'top'} position={Position.Top} title={'x-domain axis (top)'} />
-      <Axis id={'bottom'} position={Position.Bottom} title={'x-domain axis (bottom)'} />
-      <Axis id={'left'} title={'y-domain axis'} position={Position.Left} />
+      <Axis id="top" position={Position.Top} title="x-domain axis (top)" />
+      <Axis id="bottom" position={Position.Bottom} title="x-domain axis (bottom)" />
+      <Axis id="left" title="y-domain axis" position={Position.Left} />
       <BarSeries
-        id={'bars'}
+        id="bars"
         xScaleType={ScaleType.Ordinal}
         yScaleType={ScaleType.Linear}
         xAccessor="x"

integration/helpers.ts

@@ -21,7 +21,7 @@ function requireAllStories(basedir: string, directory: string) {
       const stats = lstatSync(join(basedir, relativePath));
       if (stats.isDirectory()) {
         result = result.concat(enumerateFiles(basedir, relativePath));
-      } else if (/\.tsx$/.test(relativePath)) {
+      } else if (/\.stories\.tsx$/.test(relativePath)) {
         result.push(relativePath);
       }
     });

integration/tests/annotations_stories.test.ts

@@ -4,22 +4,22 @@ describe('Annotations stories', () => {
   describe('rotation', () => {
     it('rotation - 0', async () => {
       await common.expectChartAtUrlToMatchScreenshot(
-        'http://localhost:9001/?path=/story/annotations--test-line-annotation-single-value-histogram&knob-debug=&knob-chartRotation=0',
+        'http://localhost:9001/?path=/story/annotations-lines--single-bar-histogram&knob-debug=&knob-chartRotation=0',
       );
     });
     it('rotation - 90', async () => {
       await common.expectChartAtUrlToMatchScreenshot(
-        'http://localhost:9001/?path=/story/annotations--test-line-annotation-single-value-histogram&knob-debug=&knob-chartRotation=90',
+        'http://localhost:9001/?path=/story/annotations-lines--single-bar-histogram&knob-debug=&knob-chartRotation=90',
       );
     });
     it('rotation - negative 90', async () => {
       await common.expectChartAtUrlToMatchScreenshot(
-        'http://localhost:9001/?path=/story/annotations--test-line-annotation-single-value-histogram&knob-debug=&knob-chartRotation=-90',
+        'http://localhost:9001/?path=/story/annotations-lines--single-bar-histogram&knob-debug=&knob-chartRotation=-90',
       );
     });
     it('rotation - 180', async () => {
       await common.expectChartAtUrlToMatchScreenshot(
-        'http://localhost:9001/?path=/story/annotations--test-line-annotation-single-value-histogram&knob-debug=&knob-chartRotation=180',
+        'http://localhost:9001/?path=/story/annotations-lines--single-bar-histogram&knob-debug=&knob-chartRotation=180',
       );
     });
   });

integration/tests/area_stories.test.ts

@@ -3,38 +3,38 @@ import { common } from '../page_objects';
 describe('Area series stories', () => {
   it('stacked as NOT percentage', async () => {
     await common.expectChartAtUrlToMatchScreenshot(
-      'http://localhost:9001/?path=/story/area-chart--stacked-as-percentage&knob-stacked as percentage=',
+      'http://localhost:9001/?path=/story/area-chart--stacked-percentage&knob-stacked as percentage=',
     );
   });
   describe('accessorFormats', () => {
     it('should show custom format', async () => {
       await common.expectChartAtUrlToMatchScreenshot(
-        'http://localhost:9001/?path=/story/area-chart--band-area-chart&knob-scale to extent=&knob-y0AccessorFormat= [min]&knob-y1AccessorFormat= [max]',
+        'http://localhost:9001/?path=/story/area-chart--band-area&knob-scale to extent=&knob-y0AccessorFormat= [min]&knob-y1AccessorFormat= [max]',
       );
     });
   });
   describe('scale to extents', () => {
     describe('scaleyScaleToDataExtent is true', () => {
       it('should show correct extents - Banded', async () => {
         await common.expectChartAtUrlToMatchScreenshot(
-          'http://localhost:9001/?path=/story/area-chart--stacked-band-area-chart&knob-scale to extent=true',
+          'http://localhost:9001/?path=/story/area-chart--stacked-band&knob-scale to extent=true',
         );
       });
       it('should show correct extents - stacked', async () => {
         await common.expectChartAtUrlToMatchScreenshot(
-          'http://localhost:9001/?path=/story/area-chart--stacked-band-area-chart&knob-scale to extent=true',
+          'http://localhost:9001/?path=/story/area-chart--stacked-band&knob-scale to extent=true',
         );
       });
     });
     describe('scaleyScaleToDataExtent is false', () => {
       it('should show correct extents - Banded', async () => {
         await common.expectChartAtUrlToMatchScreenshot(
-          'http://localhost:9001/?path=/story/area-chart--stacked-band-area-chart&knob-scale to extent=false',
+          'http://localhost:9001/?path=/story/area-chart--stacked-band&knob-scale to extent=false',
         );
       });
       it('should show correct extents - stacked', async () => {
         await common.expectChartAtUrlToMatchScreenshot(
-          'http://localhost:9001/?path=/story/area-chart--stacked-band-area-chart&knob-scale to extent=false',
+          'http://localhost:9001/?path=/story/area-chart--stacked-band&knob-scale to extent=false',
         );
       });
     });

integration/tests/axis_stories.test.ts

@@ -3,47 +3,47 @@ import { common } from '../page_objects';
 describe('Axis stories', () => {
   it('should render proper tick count', async () => {
     await common.expectChartAtUrlToMatchScreenshot(
-      'http://localhost:9001/?path=/story/axis--basic&knob-Tick Label Padding=0&knob-debug=&knob-Bottom overlap labels=&knob-Bottom overlap ticks=true&knob-Number of ticks on bottom=20&knob-Left overlap labels=&knob-Left overlap ticks=true&knob-Number of ticks on left=10',
+      'http://localhost:9001/?path=/story/axes--basic&knob-Tick Label Padding=0&knob-debug=&knob-Bottom overlap labels=&knob-Bottom overlap ticks=true&knob-Number of ticks on bottom=20&knob-Left overlap labels=&knob-Left overlap ticks=true&knob-Number of ticks on left=10',
     );
   });
   it('should render proper tick count with showOverlappingLabels', async () => {
     await common.expectChartAtUrlToMatchScreenshot(
-      'http://localhost:9001/?path=/story/axis--basic&knob-Tick Label Padding=0&knob-debug=&knob-Bottom overlap labels_Bottom Axis=true&knob-Bottom overlap ticks_Bottom Axis=true&knob-Number of ticks on bottom_Bottom Axis=20&knob-Left overlap labels_Left Axis=&knob-Left overlap ticks_Left Axis=true&knob-Number of ticks on left_Left Axis=10',
+      'http://localhost:9001/?path=/story/axes--basic&knob-Tick Label Padding=0&knob-debug=&knob-Bottom overlap labels_Bottom Axis=true&knob-Bottom overlap ticks_Bottom Axis=true&knob-Number of ticks on bottom_Bottom Axis=20&knob-Left overlap labels_Left Axis=&knob-Left overlap ticks_Left Axis=true&knob-Number of ticks on left_Left Axis=10',
     );
   });
   it('should render ticks with varied rotations', async () => {
     await common.expectChartAtUrlToMatchScreenshot(
-      'http://localhost:9001/?path=/story/axis--tick-label-rotation&knob-Tick Label Padding=0&knob-bottom axis tick label rotation=47&knob-hide bottom axis=&knob-left axis tick label rotation=-56&knob-hide left axis=&knob-top axis tick label rotation=-59&knob-hide top axis=&knob-right axis tick label rotation=30&knob-hide right axis=&knob-debug=',
+      'http://localhost:9001/?path=/story/axes--tick-label-rotation&knob-Tick Label Padding=0&knob-bottom axis tick label rotation=47&knob-hide bottom axis=&knob-left axis tick label rotation=-56&knob-hide left axis=&knob-top axis tick label rotation=-59&knob-hide top axis=&knob-right axis tick label rotation=30&knob-hide right axis=&knob-debug=',
     );
   });
   it('should hide bottom axis', async () => {
     await common.expectChartAtUrlToMatchScreenshot(
-      'http://localhost:9001/?path=/story/axis--tick-label-rotation&knob-Tick Label Padding=0&knob-bottom axis tick label rotation=47&knob-hide bottom axis=true&knob-left axis tick label rotation=-56&knob-hide left axis=&knob-top axis tick label rotation=-59&knob-hide top axis=&knob-right axis tick label rotation=30&knob-hide right axis=&knob-debug=',
+      'http://localhost:9001/?path=/story/axes--tick-label-rotation&knob-Tick Label Padding=0&knob-bottom axis tick label rotation=47&knob-hide bottom axis=true&knob-left axis tick label rotation=-56&knob-hide left axis=&knob-top axis tick label rotation=-59&knob-hide top axis=&knob-right axis tick label rotation=30&knob-hide right axis=&knob-debug=',
     );
   });
   it('should hide top axis', async () => {
     await common.expectChartAtUrlToMatchScreenshot(
-      'http://localhost:9001/?path=/story/axis--tick-label-rotation&knob-Tick Label Padding=0&knob-bottom axis tick label rotation=47&knob-hide bottom axis=&knob-left axis tick label rotation=-56&knob-hide left axis=&knob-top axis tick label rotation=-59&knob-hide top axis=true&knob-right axis tick label rotation=30&knob-hide right axis=&knob-debug=',
+      'http://localhost:9001/?path=/story/axes--tick-label-rotation&knob-Tick Label Padding=0&knob-bottom axis tick label rotation=47&knob-hide bottom axis=&knob-left axis tick label rotation=-56&knob-hide left axis=&knob-top axis tick label rotation=-59&knob-hide top axis=true&knob-right axis tick label rotation=30&knob-hide right axis=&knob-debug=',
     );
   });
   it('should hide left axis', async () => {
     await common.expectChartAtUrlToMatchScreenshot(
-      'http://localhost:9001/?path=/story/axis--tick-label-rotation&knob-Tick Label Padding=0&knob-bottom axis tick label rotation=47&knob-hide bottom axis=&knob-left axis tick label rotation=-56&knob-hide left axis=true&knob-top axis tick label rotation=-59&knob-hide top axis=&knob-right axis tick label rotation=30&knob-hide right axis=&knob-debug=',
+      'http://localhost:9001/?path=/story/axes--tick-label-rotation&knob-Tick Label Padding=0&knob-bottom axis tick label rotation=47&knob-hide bottom axis=&knob-left axis tick label rotation=-56&knob-hide left axis=true&knob-top axis tick label rotation=-59&knob-hide top axis=&knob-right axis tick label rotation=30&knob-hide right axis=&knob-debug=',
     );
   });
   it('should hide right axis', async () => {
     await common.expectChartAtUrlToMatchScreenshot(
-      'http://localhost:9001/?path=/story/axis--tick-label-rotation&knob-Tick Label Padding=0&knob-bottom axis tick label rotation=47&knob-hide bottom axis=&knob-left axis tick label rotation=-56&knob-hide left axis=&knob-top axis tick label rotation=-59&knob-hide top axis=&knob-right axis tick label rotation=30&knob-hide right axis=true&knob-debug=',
+      'http://localhost:9001/?path=/story/axes--tick-label-rotation&knob-Tick Label Padding=0&knob-bottom axis tick label rotation=47&knob-hide bottom axis=&knob-left axis tick label rotation=-56&knob-hide left axis=&knob-top axis tick label rotation=-59&knob-hide top axis=&knob-right axis tick label rotation=30&knob-hide right axis=true&knob-debug=',
     );
   });
   it('should render tick padding', async () => {
     await common.expectChartAtUrlToMatchScreenshot(
-      'http://localhost:9001/?path=/story/axis--w-many-tick-labels&knob-Tick Label Padding=60',
+      'http://localhost:9001/?path=/story/axes--many-tick-labels&knob-Tick Label Padding=60',
     );
   });
   it('should render with domain constraints', async () => {
     await common.expectChartAtUrlToMatchScreenshot(
-      'http://localhost:9001/?path=/story/axis--customizing-domain-limits-only-one-bound-defined&knob-left min=2&knob-xDomain max=2',
+      'http://localhost:9001/?path=/story/axes--custom-mixed&knob-left min=2&knob-xDomain max=2',
     );
   });
 });

integration/tests/line_stories.test.ts

@@ -4,22 +4,22 @@ describe('Line series stories', () => {
   describe('rotation', () => {
     it('rotation - 0', async () => {
       await common.expectChartAtUrlToMatchScreenshot(
-        'http://localhost:9001/?path=/story/line-chart--ordinal-w-axis&knob-chartRotation=0',
+        'http://localhost:9001/?path=/story/line-chart--ordinal-with-axis&knob-chartRotation=0',
       );
     });
     it('rotation - 90', async () => {
       await common.expectChartAtUrlToMatchScreenshot(
-        'http://localhost:9001/?path=/story/line-chart--ordinal-w-axis&knob-chartRotation=90',
+        'http://localhost:9001/?path=/story/line-chart--ordinal-with-axis&knob-chartRotation=90',
       );
     });
     it('rotation - negative 90', async () => {
       await common.expectChartAtUrlToMatchScreenshot(
-        'http://localhost:9001/?path=/story/line-chart--ordinal-w-axis&knob-chartRotation=-90',
+        'http://localhost:9001/?path=/story/line-chart--ordinal-with-axis&knob-chartRotation=-90',
       );
     });
     it('rotation - 180', async () => {
       await common.expectChartAtUrlToMatchScreenshot(
-        'http://localhost:9001/?path=/story/line-chart--ordinal-w-axis&knob-chartRotation=180',
+        'http://localhost:9001/?path=/story/line-chart--ordinal-with-axis&knob-chartRotation=180',
       );
     });
   });

package.json

@@ -69,6 +69,7 @@
     "@storybook/addon-info": "^5.2.8",
     "@storybook/addon-knobs": "5.2.8",
     "@storybook/addon-links": "^5.3.9",
+    "@storybook/addon-storysource": "^5.3.13",
     "@storybook/preset-typescript": "^1.1.0",
     "@storybook/react": "5.2.8",
     "@storybook/source-loader": "^5.3.9",

src/components/chart.test.tsx

@@ -19,7 +19,7 @@ describe('Chart', () => {
   it("should render 'No data to display' with settings but without series", () => {
     const wrapper = render(
       <Chart>
-        <Settings debug={true} rendering={'svg'} />
+        <Settings debug={true} rendering="svg" />
       </Chart>,
     );
     expect(wrapper.text()).toContain('No data to display');

src/components/chart_status.tsx

@@ -19,7 +19,9 @@ class ChartStatusComponent extends React.Component<ChartStatusStateProps> {
   dispatchRenderChange = () => {
     const { onRenderChange, rendered } = this.props;
     if (onRenderChange) {
-      onRenderChange(rendered);
+      window.requestAnimationFrame(() => {
+        onRenderChange(rendered);
+      });
     }
   };
   render() {

src/components/legend/legend.test.tsx

@@ -83,7 +83,7 @@ describe('Legend', () => {
           id="areas"
           xScaleType={ScaleType.Linear}
           yScaleType={ScaleType.Linear}
-          xAccessor={'x'}
+          xAccessor="x"
           yAccessors={['y']}
           splitSeriesAccessors={['g']}
           data={data}
@@ -113,7 +113,7 @@ describe('Legend', () => {
           id="areas"
           xScaleType={ScaleType.Linear}
           yScaleType={ScaleType.Linear}
-          xAccessor={'x'}
+          xAccessor="x"
           yAccessors={['y']}
           splitSeriesAccessors={['g']}
           data={data}