docs: upgrade storybook to 5.2.8 and refactor stories to CSF (#508)

* update stories from storiesOf format to CSF with storybook upgrade to 5.2.8 
* test: update vrt snapshots as a result of url changing for vrts

.storybook/config.ts

@@ -40,20 +40,4 @@ addParameters({
 addDecorator(withKnobs);
 addDecorator(withInfo);
 
-function loadStories() {
-  require('../stories/bar_chart.tsx');
-  require('../stories/line_chart.tsx');
-  require('../stories/area_chart.tsx');
-  require('../stories/axis.tsx');
-  require('../stories/mixed.tsx');
-  require('../stories/legend.tsx');
-  require('../stories/interactions.tsx');
-  require('../stories/rotations.tsx');
-  require('../stories/styling.tsx');
-  require('../stories/grid.tsx');
-  require('../stories/annotations.tsx');
-  require('../stories/scales.tsx');
-  return [require('../stories/sunburst.tsx'), require('../stories/treemap.tsx')];
-}
-
-configure(loadStories, module);
+configure(require.context('../stories', true, /\.tsx$/), module);

integration/helpers.ts

@@ -1,6 +1,6 @@
-import { join } from 'path';
-import { readdirSync } from 'fs';
-import { getStorybook } from '@storybook/react';
+import { join, resolve } from 'path';
+import { lstatSync, readdirSync } from 'fs';
+import { getStorybook, configure } from '@storybook/react';
 
 export interface StoryInfo {
   title: string;
@@ -13,12 +13,33 @@ export interface StoryGroupInfo {
   stories: StoryInfo[];
 }
 
-function requireAllStories() {
-  const normalizedPath = join(__dirname, '../stories');
+function requireAllStories(basedir: string, directory: string) {
+  function enumerateFiles(basedir: string, dir: string) {
+    let result: string[] = [];
+    readdirSync(join(basedir, dir)).forEach(function(file) {
+      const relativePath = join(dir, file);
+      const stats = lstatSync(join(basedir, relativePath));
+      if (stats.isDirectory()) {
+        result = result.concat(enumerateFiles(basedir, relativePath));
+      } else if (/\.tsx$/.test(relativePath)) {
+        result.push(relativePath);
+      }
+    });
+    return result;
+  }
+  const absoluteDirectory = resolve(basedir, directory);
+
+  const keys = enumerateFiles(absoluteDirectory, '.');
+  function requireContext(key: string) {
+    if (!keys.includes(key)) {
+      throw new Error(`Cannot find module '${key}'`);
+    }
+    const fullKey = require('path').resolve(absoluteDirectory, key);
+    return require(fullKey);
+  }
 
-  readdirSync(normalizedPath).forEach((file) => {
-    require(join(normalizedPath, file));
-  });
+  requireContext.keys = () => keys;
+  return requireContext;
 }
 
 function encodeString(string: string) {
@@ -34,8 +55,7 @@ function encodeString(string: string) {
 }
 
 export function getStorybookInfo(): StoryGroupInfo[] {
-  requireAllStories();
-
+  configure(requireAllStories(__dirname, '../stories'), module);
   return getStorybook()
     .filter(({ kind }) => kind)
     .map(({ kind: group, stories: storiesRaw }) => {

integration/tests/bar-stories.test.ts

@@ -4,7 +4,7 @@ describe('Bar series stories', () => {
   describe('[test] switch ordinal/linear x axis', () => {
     it('using ordinal x axis', async () => {
       await common.expectChartAtUrlToMatchScreenshot(
-        'http://localhost:9001/?path=/story/bar-chart--test-switch-ordinal-linear-x-axis&knob-scaleType=ordinal',
+        'http://localhost:9001/?path=/story/bar-chart--test-switch-ordinal-linear-axis&knob-scaleType=ordinal',
       );
     });
   });

integration/tests/legend-stories.test.ts

@@ -18,7 +18,7 @@ describe('Legend stories', () => {
   });
   it('should 0 legend buffer', async () => {
     await common.expectChartAtUrlToMatchScreenshot(
-      'http://localhost:9001/?path=/story/legend--legend-spacingbuffer&knob-legend buffer value=0',
+      'http://localhost:9001/?path=/story/legend--legend-spacing-buffer&knob-legend buffer value=0',
     );
   });
 });