Migrated to Storybook v4

It seems to work with Create React App 2. Flawlessly even.

.storybook/config.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { configure, addDecorator } from '@storybook/react';
+import { RootThemeProvider } from '../src/components/App/RootThemeProvider';
+import './styles.css';
+
+const themeDecorator = story => (
+  <RootThemeProvider>{story()}</RootThemeProvider>
+);
+addDecorator(themeDecorator);
+
+// This condition actually should detect if it's an Node environment
+// https://stackoverflow.com/questions/38332094/how-can-i-mock-webpacks-require-context-in-jest/42191018#42191018
+if (typeof require.context === 'undefined') {
+  const fs = require('fs');
+  const path = require('path');
+
+  require.context = (
+    base = '.',
+    scanSubDirectories = false,
+    regularExpression = /\.js$/
+  ) => {
+    const files = {};
+
+    function readDirectory(directory) {
+      fs.readdirSync(directory).forEach(file => {
+        const fullPath = path.resolve(directory, file);
+
+        if (fs.statSync(fullPath).isDirectory()) {
+          if (scanSubDirectories) readDirectory(fullPath);
+
+          return;
+        }
+
+        if (!regularExpression.test(fullPath)) return;
+
+        files[fullPath] = true;
+      });
+    }
+
+    readDirectory(path.resolve(__dirname, base));
+
+    function Module(file) {
+      return require(file);
+    }
+
+    Module.keys = () => Object.keys(files);
+
+    return Module;
+  };
+}
+
+const req = require.context('../src', true, /\.stories\.tsx$/);
+
+configure(() => {
+  req.keys().forEach(filename => req(filename));
+}, module);

package.json

@@ -26,10 +26,10 @@
     "styled-components": "^3.3.3"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^3.4.7",
-    "@storybook/addon-storyshots": "^3.4.7",
-    "@storybook/addons": "^3.4.7",
-    "@storybook/react": "^3.4.7",
+    "@storybook/addon-actions": "^4.1.2",
+    "@storybook/addon-storyshots": "^4.1.2",
+    "@storybook/addons": "^4.1.2",
+    "@storybook/react": "^4.1.2",
     "@types/enzyme": "^3.1.10",
     "@types/graphql": "^0.13.0",
     "@types/jest": "^23.1.0",
@@ -38,8 +38,8 @@
     "@types/react-redux": "^6.0.2",
     "@types/react-router-dom": "^4.2.7",
     "@types/react-side-effect": "^1.1.0",
-    "@types/storybook__addon-actions": "^3.0.3",
-    "@types/storybook__react": "^3.0.7",
+    "@types/storybook__addon-actions": "^3.4.1",
+    "@types/storybook__react": "^4.0.0",
     "apollo-server-express": "^2.3.1",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
@@ -62,7 +62,7 @@
   "scripts": {
     "fmt": "prettier --write $npm_package_config_prettierFiles",
     "check-all": "yarn query-codegen && yarn lint && CI=true yarn test",
-    "storybook": "REACT_APP_MOCK_RESOLVER=true start-storybook -p 9001 -c storybook",
+    "storybook": "REACT_APP_MOCK_RESOLVER=true start-storybook -p 9001 -c ./.storybook",
     "start-mock": "REACT_APP_MOCK_RESOLVER=true yarn start",
     "start": "react-scripts start",
     "build": "yarn query-codegen && react-scripts build",

src/storyshots.test.ts

@@ -1,4 +1,4 @@
 import initStoryshots, { renderOnly } from '@storybook/addon-storyshots';
 
-const configPath = './storybook';
+const configPath = './.storybook';
 initStoryshots({ suite: 'Smoke StoryShots', configPath, test: renderOnly });