add JSX support to all stories

uber · Mar 26, 2018 · 30cf7c2 · 30cf7c2
1 parent d81ba1b
commit 30cf7c2
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 71 deletions.
diff --git a/website/storybook/axis-story.js b/website/storybook/axis-story.js
@@ -1,15 +1,16 @@
 import React from 'react';
 
 import {storiesOf} from '@storybook/react';
-import {withKnobs, color, number, object, select, text} from '@storybook/addon-knobs/react';
-import {LineSeries, HorizontalBarSeries, VerticalBarSeries, XAxis, YAxis} from 'react-vis';
+import {withKnobs, number, select} from '@storybook/addon-knobs/react';
+
+import {LineSeries, VerticalBarSeries, XAxis, YAxis} from 'react-vis';
 import {generateLinearData, getTime, getWord} from './storybook-data.js';
 
-import {SimpleChartWrapperNoAxes} from './storybook-utils';
+import {SimpleChartWrapperNoAxes, jsxOptions} from './storybook-utils';
 
 storiesOf('Axes and scales/Axis Formatting/Base', module)
   .addDecorator(withKnobs)
-  .add('Axis orientation', () => {
+  .addWithJSX('Axis orientation', () => {
     const XAxisOrientation = select('XAxis.orientation', {bottom: 'bottom', top: 'top'}, 'bottom');
     const YAxisOrientation = select('YAxis.orientation', {left: 'left', right: 'right'}, 'left');
     return (
@@ -24,8 +25,8 @@ storiesOf('Axes and scales/Axis Formatting/Base', module)
         <LineSeries data={generateLinearData({key: 'line1'})} />
       </SimpleChartWrapperNoAxes>
     );
-  })
-  .add('Axis titles', () => {
+  }, jsxOptions)
+  .addWithJSX('Axis titles', () => {
     const XAxisPosition = select('XAxis.position', {start: 'start', middle: 'middle', end: 'end'}, 'end');
     const YAxisPosition = select('YAxis.position', {start: 'start', middle: 'middle', end: 'end'}, 'end');
 
@@ -36,8 +37,8 @@ storiesOf('Axes and scales/Axis Formatting/Base', module)
         <LineSeries data={generateLinearData({key: 'line1'})} />
       </SimpleChartWrapperNoAxes>
     );
-  })
-  .add('Tick total', () => {
+  }, jsxOptions)
+  .addWithJSX('Tick total', () => {
     const xTickTotal = number('XAxis.tickTotal', 10, {max: 20, min: 0, range: true});
     const yTickTotal = number('YAxis.tickTotal', 10, {max: 20, min: 0, range: true});
 
@@ -48,8 +49,8 @@ storiesOf('Axes and scales/Axis Formatting/Base', module)
         <LineSeries data={generateLinearData({key: 'line1'})} />
       </SimpleChartWrapperNoAxes>
     );
-  })
-  .add('Tick Size', () => {
+  }, jsxOptions)
+  .addWithJSX('Tick Size', () => {
     const xTickSize = number('XAxis.tickSize', 6, {max: 10, min: 0, range: true});
     const yTickSize = number('YAxis.tickSize', 6, {max: 10, min: 0, range: true});
 
@@ -60,8 +61,8 @@ storiesOf('Axes and scales/Axis Formatting/Base', module)
         <LineSeries data={generateLinearData({key: 'line1'})} />
       </SimpleChartWrapperNoAxes>
     );
-  })
-  .add('Tick Size (Inner)', () => {
+  }, jsxOptions)
+  .addWithJSX('Tick Size (Inner)', () => {
     const xTickSize = number('XAxis.tickSizeInner', 6, {max: 10, min: 0, range: true});
     const yTickSize = number('YAxis.tickSizeInner', 6, {max: 10, min: 0, range: true});
 
@@ -72,8 +73,8 @@ storiesOf('Axes and scales/Axis Formatting/Base', module)
         <LineSeries data={generateLinearData({key: 'line1'})} />
       </SimpleChartWrapperNoAxes>
     );
-  })
-  .add('Tick Size (Outer)', () => {
+  }, jsxOptions)
+  .addWithJSX('Tick Size (Outer)', () => {
     const xTickSize = number('XAxis.tickSizeOuter', 6, {max: 10, min: 0, range: true});
     const yTickSize = number('YAxis.tickSizeOuter', 6, {max: 10, min: 0, range: true});
 
@@ -84,8 +85,8 @@ storiesOf('Axes and scales/Axis Formatting/Base', module)
         <LineSeries data={generateLinearData({key: 'line1'})} />
       </SimpleChartWrapperNoAxes>
     );
-  })
-  .add('Tick orientation', () => {
+  }, jsxOptions)
+  .addWithJSX('Tick orientation', () => {
     const tickLabelAngle = number('tickLabelAngle', 0, {max: 90, min: -90, range: true});
     return (
       <SimpleChartWrapperNoAxes margin={{bottom: 80}}>
@@ -99,10 +100,10 @@ storiesOf('Axes and scales/Axis Formatting/Base', module)
         />
       </SimpleChartWrapperNoAxes>
     );
-  });
+  }, jsxOptions);
 storiesOf('Axes and scales/Scales', module)
   .addDecorator(withKnobs)
-  .add('time Scale', () => {
+  .addWithJSX('time Scale', () => {
     return (
       <SimpleChartWrapperNoAxes margin={{right: 20}}>
         <XAxis tickFormat={d => new Date(d).toLocaleDateString()} />
@@ -115,8 +116,8 @@ storiesOf('Axes and scales/Scales', module)
         />
       </SimpleChartWrapperNoAxes>
     );
-  })
-  .add('category scale', () => {
+  }, jsxOptions)
+  .addWithJSX('category scale', () => {
     const data = generateLinearData({
       nbPoints: 8,
       changeRatio: 0.4,
@@ -129,8 +130,8 @@ storiesOf('Axes and scales/Scales', module)
         <VerticalBarSeries data={data} />
       </SimpleChartWrapperNoAxes>
     );
-  })
-  .add('ordinal scale', () => {
+  }, jsxOptions)
+  .addWithJSX('ordinal scale', () => {
     const data = generateLinearData({
       nbPoints: 8,
       changeRatio: 0.4,
@@ -144,4 +145,4 @@ storiesOf('Axes and scales/Scales', module)
         <VerticalBarSeries data={data} />
       </SimpleChartWrapperNoAxes>
     );
-  });
+  }, jsxOptions);
diff --git a/website/storybook/barseries-story.js b/website/storybook/barseries-story.js
@@ -6,7 +6,7 @@ import {withKnobs, color, number, object, text} from '@storybook/addon-knobs/rea
 import {HorizontalBarSeries, VerticalBarSeries} from 'react-vis';
 
 import {generateLinearData, intRandom, random} from './storybook-data.js';
-import {chooseColorScale, SimpleChartWrapper} from './storybook-utils.js';
+import {chooseColorScale, SimpleChartWrapper, jsxOptions} from './storybook-utils.js';
 
 function addBarSeriesStory(isVertical = true) {
   const seriesName = isVertical ? 'VerticalBarSeries' : 'HorizontalBarSeries';
@@ -31,23 +31,23 @@ function addBarSeriesStory(isVertical = true) {
 
   storiesOf(`Series/${seriesName}/Base`, module)
     .addDecorator(withKnobs)
-    .add(`single ${seriesName}`, () => {
+    .addWithJSX(`single ${seriesName}`, () => {
       return (
         <SimpleChartWrapper {...xyPlotParams}>
           <Series data={dataGenerator({nbPoints: 8, changeRatio: 0.4, key: 'bar1'})} />
         </SimpleChartWrapper>
       );
-    })
-    .add(`multiple ${seriesName} - clustered`, () => {
+    }, jsxOptions)
+    .addWithJSX(`multiple ${seriesName} - clustered`, () => {
       return (
         <SimpleChartWrapper {...xyPlotParams}>
           <Series data={dataGenerator({nbPoints: 8, changeRatio: 0.4, key: 'bar1'})} />
           <Series data={dataGenerator({nbPoints: 8, changeRatio: 0.4, key: 'bar2'})} />
           <Series data={dataGenerator({nbPoints: 8, changeRatio: 0.4, key: 'bar3'})} />
         </SimpleChartWrapper>
       );
-    })
-    .add(`multiple ${seriesName} - stacked`, () => {
+    }, jsxOptions)
+    .addWithJSX(`multiple ${seriesName} - stacked`, () => {
       return (
         <SimpleChartWrapper
           {...(isVertical ?
@@ -76,11 +76,11 @@ function addBarSeriesStory(isVertical = true) {
           />
         </SimpleChartWrapper>
       );
-    });
+    }, jsxOptions);
 
   storiesOf(`Series/${seriesName}/Styling/By datapoint`, module)
     .addDecorator(withKnobs)
-    .add('color', () => {
+    .addWithJSX('color', () => {
       const {colorScale, colorRange} = chooseColorScale();
 
       return (
@@ -96,7 +96,7 @@ function addBarSeriesStory(isVertical = true) {
         </SimpleChartWrapper>
       );
     })
-    .add('opacity', () => {
+    .addWithJSX('opacity', () => {
       return (
         <SimpleChartWrapper {...xyPlotParams}>
           <Series
@@ -109,11 +109,11 @@ function addBarSeriesStory(isVertical = true) {
           />
         </SimpleChartWrapper>
       );
-    });
+    }, jsxOptions);
 
   storiesOf(`Series/${seriesName}/Styling/At series level`, module)
     .addDecorator(withKnobs)
-    .add('fill', () => {
+    .addWithJSX('fill', () => {
       return (
         <SimpleChartWrapper {...xyPlotParams}>
           {styledSeries({
@@ -122,8 +122,8 @@ function addBarSeriesStory(isVertical = true) {
           })}
         </SimpleChartWrapper>
       );
-    })
-    .add('opacity', () => {
+    }, jsxOptions)
+    .addWithJSX('opacity', () => {
       return (
         <SimpleChartWrapper {...xyPlotParams}>
           {styledSeries({
@@ -132,8 +132,8 @@ function addBarSeriesStory(isVertical = true) {
           })}
         </SimpleChartWrapper>
       );
-    })
-    .add('stroke', () => {
+    }, jsxOptions)
+    .addWithJSX('stroke', () => {
       return (
         <SimpleChartWrapper {...xyPlotParams}>
           {styledSeries({
@@ -142,8 +142,8 @@ function addBarSeriesStory(isVertical = true) {
           })}
         </SimpleChartWrapper>
       );
-    })
-    .add('style', () => {
+    }, jsxOptions)
+    .addWithJSX('style', () => {
       return (
         <SimpleChartWrapper {...xyPlotParams}>
           {styledSeries({
@@ -155,7 +155,7 @@ function addBarSeriesStory(isVertical = true) {
           })}
         </SimpleChartWrapper>
       );
-    });
+    }, jsxOptions);
 }
 addBarSeriesStory();
 addBarSeriesStory(false);
diff --git a/website/storybook/index.js b/website/storybook/index.js
@@ -1,3 +1,7 @@
+import {setAddon} from '@storybook/react';
+import JSXAddon from 'storybook-addon-jsx';
+setAddon(JSXAddon);
+
 import '../../dist/style.css';
 import '../.storybook/storybook.css';
 

diff --git a/website/storybook/lineseries-story.js b/website/storybook/lineseries-story.js
@@ -1,9 +1,7 @@
 import React from 'react';
 
-import {setAddon, storiesOf} from '@storybook/react';
+import {storiesOf} from '@storybook/react';
 import {withKnobs, color, number, object, select, text} from '@storybook/addon-knobs/react';
-import JSXAddon from 'storybook-addon-jsx';
-setAddon(JSXAddon);
 
 import {LineSeries} from 'react-vis';