docs: upgrade to Storybook v5.3 (#521)

* chore(tech): upgrade to Storybook 5.3

* refactor(configs): update Storybook configs to new triconfig

* test(configs): fix storyshots compatability

* refactor(stories): replace deprecated hierarchy separators

.storybook/main.js

@@ -0,0 +1,16 @@
+module.exports = {
+  stories: [
+    '../src/**/*.(stories|story).(js|ts|tsx|mdx)',
+    '../docs/**/*.(stories|story).(js|ts|tsx|mdx)'
+  ],
+  addons: [
+    '@storybook/addon-docs/',
+    '@storybook/addon-storysource',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-jest',
+    '@storybook/addon-knobs',
+    '@storybook/addon-a11y',
+    '@storybook/addon-viewport'
+  ]
+};

.storybook/manager.js

@@ -0,0 +1,12 @@
+import { addons } from '@storybook/addons';
+import { create } from '@storybook/theming/create';
+
+import { theme, components } from './util/theme';
+
+addons.setConfig({
+  theme,
+  isFullscreen: false,
+  showPanel: false,
+  panelPosition: 'bottom',
+  isToolshown: true
+});

.storybook/config.js → .storybook/preview.js

@@ -1,13 +1,12 @@
 import React from 'react';
-import { configure, addDecorator, addParameters } from '@storybook/react';
+import { addDecorator, addParameters } from '@storybook/react';
 import { withKnobs } from '@storybook/addon-knobs';
 import { withA11y } from '@storybook/addon-a11y';
 import { ThemeProvider } from 'emotion-theming';
 import styled from '@emotion/styled';
-import requireContext from 'require-context.macro';
 
 import { theme as themes, BaseStyles } from '../src';
-import { theme, components } from './util/theme';
+import { components } from './util/theme';
 import { sortStories } from './util/story-helpers';
 
 const { circuit } = themes;
@@ -33,15 +32,9 @@ const SORT_ORDER = {
 addParameters({
   options: {
     storySort: sortStories(SORT_ORDER),
-    theme,
-    isFullscreen: false,
-    showPanel: false,
-    panelPosition: 'bottom',
-    isToolshown: true
+    showRoots: true
   },
-  docs: {
-    components
-  }
+  docs: { components }
 });
 
 const Story = styled.div`
@@ -78,11 +71,3 @@ if (!__TEST__) {
 }
 
 addDecorator(withThemeProvider);
-
-configure(
-  [
-    requireContext('../src', true, /\.(stories|story)\.(js|ts|tsx|mdx)$/),
-    requireContext('../docs', true, /\.(stories|story)\.(js|ts|tsx|mdx)$/)
-  ],
-  module
-);

.storybook/util/story-helpers.js

@@ -33,9 +33,7 @@ export function sortStories(sortOrder) {
 }
 
 export function splitStoryName(name) {
-  const [group, story] = name.split('|');
-  const [component, ...rest] = story.split('/');
-  return [group, component, ...rest];
+  return name.split('/');
 }
 
 const LINK_PREFIXES = ['/', 'http', 'mailto', '#', 'tel'];

docs/advanced/components.story.mdx

@@ -1,6 +1,6 @@
 import { Meta, Intro } from '../../.storybook/components';
 
-<Meta title="Advanced|Base Components" />
+<Meta title="Advanced/Base Components" />
 
 # Base Components
 

docs/advanced/fonts.story.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '../../.storybook/components';
 
-<Meta title="Advanced|Fonts" />
+<Meta title="Advanced/Fonts" />
 
 # Fonts
 

docs/advanced/grid.story.mdx

@@ -1,6 +1,6 @@
 import { Meta, Preview, Grid, Row, Col } from '../../.storybook/components';
 
-<Meta title="Advanced|Grid" />
+<Meta title="Advanced/Grid" />
 
 # Grid
 

docs/advanced/static-css.story.mdx

@@ -1,6 +1,6 @@
 import { Meta, Status, Intro } from '../../.storybook/components';
 
-<Meta title="Advanced|Static CSS" />
+<Meta title="Advanced/Static CSS" />
 
 # Static CSS
 

docs/advanced/theme.story.mdx

@@ -11,7 +11,7 @@ import {
 } from '../../.storybook/components';
 import { Heading, SubHeading, Text } from '../../src';
 
-<Meta title="Advanced|Theme" />
+<Meta title="Advanced/Theme" />
 
 # Theming
 

docs/introduction/code-of-conduct.story.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '../../.storybook/components';
 
-<Meta title="Introduction|Code of Conduct" />
+<Meta title="Introduction/Code of Conduct" />
 
 # Contributor Covenant Code of Conduct
 

docs/introduction/contributing.story.mdx

@@ -1,6 +1,6 @@
 import { Meta, Intro, Image } from '../../.storybook/components';
 
-<Meta title="Introduction|Contributing" />
+<Meta title="Introduction/Contributing" />
 
 # How to contribute
 

docs/introduction/design-principles.story.mdx

@@ -1,6 +1,6 @@
 import { Meta, Intro } from '../../.storybook/components';
 
-<Meta title="Introduction|Design Principles" />
+<Meta title="Introduction/Design Principles" />
 
 # Design principles
 

docs/introduction/getting-started.story.mdx

@@ -1,6 +1,6 @@
 import { Meta, Status, Intro, Link } from '../../.storybook/components';
 
-<Meta title="Introduction|Getting Started" />
+<Meta title="Introduction/Getting Started" />
 
 # Getting Started
 

docs/introduction/welcome.story.mdx

@@ -6,7 +6,7 @@ import {
   Teaser
 } from '../../.storybook/components';
 
-<Meta title="Introduction|Welcome" />
+<Meta title="Introduction/Welcome" />
 
 <Image
   width="2400"

jest.config.js

@@ -27,10 +27,15 @@ module.exports = {
     '!**/node_modules/**'
   ],
   moduleDirectories: ['node_modules', 'src'],
+  // HACK: See https://github.com/storybookjs/storybook/pull/9292
+  moduleNameMapper: {
+    'react-syntax-highlighter/dist/esm/(.*)':
+      'react-syntax-highlighter/dist/cjs/$1'
+  },
   transform: {
-    '^.+\\.js$': 'babel-jest',
+    '^.+\\.jsx?$': 'babel-jest',
     '^.+\\.svg$': '<rootDir>/jest.fileTransformer.js',
-    '^.+\\.mdx$': '<rootDir>/jest.mdxTransformer.js'
+    '^.+\\.mdx?$': '<rootDir>/jest.mdxTransformer.js'
   },
   setupFilesAfterEnv: ['<rootDir>/jest.setup.js']
 };

package.json

@@ -109,7 +109,6 @@
     "prettier": "1.16.4",
     "prettier-eslint": "^8.8.2",
     "react-test-renderer": "^16.8.6",
-    "require-context.macro": "^1.2.2",
     "style-loader": "^0.23.1",
     "webpack-merge": "^4.2.1",
     "yargs": "^14.0.0"