Merge pull request #4836 from storybooks/react/cra-integration-fixes

React - use babel presets/plugins based on CRA.

.babelrc.js

@@ -14,7 +14,7 @@ module.exports = {
   ],
   env: {
     test: {
-      plugins: ['babel-plugin-require-context-hook'],
+      plugins: ['babel-plugin-require-context-hook', 'babel-plugin-dynamic-import-node'],
     },
   },
   overrides: [

app/react/package.json

@@ -28,13 +28,17 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
+    "@babel/plugin-transform-react-constant-elements": "^7.0.0",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/runtime": "^7.1.2",
     "@emotion/styled": "^0.10.6",
     "@storybook/core": "4.1.0-alpha.7",
     "@storybook/node-logger": "4.1.0-alpha.7",
+    "@svgr/webpack": "^4.0.3",
+    "babel-plugin-named-asset-import": "^0.2.3",
     "babel-plugin-react-docgen": "^2.0.0",
+    "babel-preset-react-app": "^6.1.0",
     "common-tags": "^1.8.0",
     "global": "^4.3.2",
     "lodash": "^4.17.11",

app/react/src/server/cra-config.js

@@ -10,22 +10,30 @@ const cssModuleExtensions = ['.module.css', '.module.scss', '.module.sass'];
 const typeScriptExtensions = ['.ts', '.tsx'];
 
 let reactScriptsPath;
+
 export function getReactScriptsPath({ noCache } = {}) {
   if (reactScriptsPath && !noCache) return reactScriptsPath;
+
   const appDirectory = fs.realpathSync(process.cwd());
   const reactScriptsScriptPath = fs.realpathSync(
     path.join(appDirectory, '/node_modules/.bin/react-scripts')
   );
+
   reactScriptsPath = path.join(reactScriptsScriptPath, '../..');
+  const scriptsPkgJson = path.join(reactScriptsPath, 'package.json');
+
+  if (!fs.existsSync(scriptsPkgJson)) {
+    reactScriptsPath = 'react-scripts';
+  }
+
   return reactScriptsPath;
 }
 
 export function isReactScriptsInstalled(requiredVersion = '2.0.0') {
   try {
-    // eslint-disable-next-line global-require, import/no-dynamic-require
+    // eslint-disable-next-line import/no-dynamic-require,global-require
     const reactScriptsJson = require(path.join(getReactScriptsPath(), 'package.json'));
-    if (semver.lt(reactScriptsJson.version, requiredVersion)) return false;
-    return true;
+    return !semver.lt(reactScriptsJson.version, requiredVersion);
   } catch (e) {
     return false;
   }
@@ -57,13 +65,25 @@ const getStyleRules = getRules(cssExtensions.concat(cssModuleExtensions));
 const getTypeScriptRules = getRules(typeScriptExtensions);
 
 export function getCraWebpackConfig(mode) {
-  if (mode === 'production') {
-    // eslint-disable-next-line global-require, import/no-dynamic-require
-    return require(path.join(getReactScriptsPath(), 'config/webpack.config.prod'));
+  const pathToReactScripts = getReactScriptsPath();
+
+  const craWebpackConfig =
+    mode === 'production' ? 'config/webpack.config.prod' : 'config/webpack.config.dev';
+
+  let pathToWebpackConfig = require.resolve(path.join(pathToReactScripts, craWebpackConfig));
+
+  if (!fs.existsSync(pathToWebpackConfig)) {
+    pathToWebpackConfig = path.join(pathToReactScripts, 'config/webpack.config');
+  }
+
+  // eslint-disable-next-line import/no-dynamic-require,global-require
+  const webpackConfig = require(pathToWebpackConfig);
+
+  if (typeof webpackConfig === 'function') {
+    return webpackConfig(mode);
   }
 
-  // eslint-disable-next-line global-require, import/no-dynamic-require
-  return require(path.join(getReactScriptsPath(), 'config/webpack.config.dev'));
+  return webpackConfig;
 }
 
 export function applyCRAWebpackConfig(baseConfig) {

app/react/src/server/__tests__/cra-config.test.js → app/react/src/server/cra-config.test.js

@@ -1,8 +1,9 @@
 import fs from 'fs';
-import { getReactScriptsPath } from '../cra-config';
+import { getReactScriptsPath } from './cra-config';
 
 jest.mock('fs', () => ({
   realpathSync: jest.fn(),
+  existsSync: () => true,
 }));
 jest.mock('mini-css-extract-plugin', () => {});
 

app/react/src/server/framework-preset-cra.js

@@ -0,0 +1,36 @@
+import { logger } from '@storybook/node-logger';
+import { applyCRAWebpackConfig, isReactScriptsInstalled } from './cra-config';
+
+export function webpackFinal(config) {
+  if (!isReactScriptsInstalled()) {
+    logger.info('=> Using base config because react-scripts is not installed.');
+    return config;
+  }
+
+  logger.info('=> Loading create-react-app config.');
+
+  return applyCRAWebpackConfig(config);
+}
+
+export function babelDefault(config) {
+  if (!isReactScriptsInstalled()) {
+    return config;
+  }
+
+  return {
+    ...config,
+    presets: [require.resolve('babel-preset-react-app')],
+    plugins: [
+      [
+        require.resolve('babel-plugin-named-asset-import'),
+        {
+          loaderMap: {
+            svg: {
+              ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
+            },
+          },
+        },
+      ],
+    ],
+  };
+}

app/react/src/server/options.js

@@ -5,7 +5,7 @@ export default {
   defaultConfigName: 'create-react-app',
   frameworkPresets: [
     require.resolve('./framework-preset-react.js'),
+    require.resolve('./framework-preset-cra.js'),
     require.resolve('./framework-preset-react-docgen.js'),
-    require.resolve('./framework-preset-cra-rules.js'),
   ],
 };

examples/cra-kitchen-sink/.storybook/config.js

@@ -1,18 +1,20 @@
-import { configure } from '@storybook/react';
-import { setOptions } from '@storybook/addon-options';
+import { configure, addDecorator } from '@storybook/react';
+import { withOptions } from '@storybook/addon-options';
 
-setOptions({
-  name: 'CRA Kitchen Sink',
-  url: 'https://github.com/storybooks/storybook/tree/master/examples/cra-kitchen-sink',
-  goFullScreen: false,
-  showAddonsPanel: true,
-  showSearchBox: false,
-  addonPanelInRight: true,
-  sortStoriesByKind: false,
-  hierarchySeparator: /\./,
-  hierarchyRootSeparator: /\|/,
-  enableShortcuts: true,
-});
+addDecorator(
+  withOptions({
+    name: 'CRA Kitchen Sink',
+    url: 'https://github.com/storybooks/storybook/tree/master/examples/cra-kitchen-sink',
+    goFullScreen: false,
+    showAddonsPanel: true,
+    showSearchBox: false,
+    addonPanelInRight: true,
+    sortStoriesByKind: false,
+    hierarchySeparator: /\./,
+    hierarchyRootSeparator: /\|/,
+    enableShortcuts: true,
+  })
+);
 
 function loadStories() {
   // put welcome screen at the top of the list so it's the first one displayed

examples/cra-kitchen-sink/jest.config.js

@@ -3,5 +3,15 @@ const config = require('../../jest.config');
 module.exports = {
   ...config,
   roots: [__dirname],
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/__mocks__/fileMock.js',
+    '\\.(css|scss)$': '<rootDir>/__mocks__/styleMock.js',
+    '\\.(md)$': '<rootDir>/__mocks__/htmlMock.js',
+  },
+  transform: {
+    ...config.transform,
+    '^.+\\.svg$': '<rootDir>/node_modules/react-scripts/config/jest/fileTransform.js',
+  },
   moduleDirectories: ['<rootDir>/node_modules', 'src'],
 };

examples/cra-kitchen-sink/src/stories/App.stories.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+// eslint-disable-next-line import/extensions,import/no-unresolved
+import App from 'App';
+
+storiesOf('App', module).add('full app', () => <App />);

examples/cra-kitchen-sink/src/stories/Lifecycle.stories.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import LifecycleLogger from '../components/LifecycleLogger';
+
+storiesOf('Lifecycle', module).add('logging', () => <LifecycleLogger />);

examples/cra-kitchen-sink/src/stories/__snapshots__/App.stories.storyshot

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots App full app 1`] = `
+<div
+  class="App"
+>
+  <div
+    class="App-header"
+  >
+    <img
+      alt="logo"
+      class="App-logo"
+      src="logo.svg"
+    />
+    <h2>
+      Welcome to React
+    </h2>
+  </div>
+  <p
+    class="App-intro"
+  >
+    To get started, edit 
+    <code>
+      src/App.js
+    </code>
+     and save to reload.
+  </p>
+</div>
+`;

examples/cra-kitchen-sink/src/stories/__snapshots__/Lifecycle.stories.storyshot

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Lifecycle logging 1`] = `
+<div>
+  Lifecycle methods are logged to the console
+</div>
+`;

examples/cra-kitchen-sink/src/stories/__snapshots__/cra-dynamic-import.stories.storyshot

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots CRA Dynamic import 1`] = `
+<div>
+  Waiting for Dynamic Import
+</div>
+`;
+
+exports[`Storyshots CRA Svgr 1`] = `
+<svg>
+  logo.svg
+</svg>
+`;

examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot

@@ -1,33 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots App full app 1`] = `
-<div
-  class="App"
->
-  <div
-    class="App-header"
-  >
-    <img
-      alt="logo"
-      class="App-logo"
-      src="file-stub"
-    />
-    <h2>
-      Welcome to React
-    </h2>
-  </div>
-  <p
-    class="App-intro"
-  >
-    To get started, edit 
-    <code>
-      src/App.js
-    </code>
-     and save to reload.
-  </p>
-</div>
-`;
-
 exports[`Storyshots Button addons composition 1`] = `
 .emotion-4 {
   display: -webkit-box;
@@ -168,13 +140,6 @@ exports[`Storyshots Button addons composition 1`] = `
                     &gt;
                   </span>
                 </div>
-                <div
-                  style="padding-left:33px;padding-right:3px"
-                >
-                  <span
-                    style="color:#444"
-                  />
-                </div>
                 <div
                   style="padding-left:33px;padding-right:3px"
                 >
@@ -445,13 +410,6 @@ exports[`Storyshots Button with new info 1`] = `
                     &gt;
                   </span>
                 </div>
-                <div
-                  style="padding-left:33px;padding-right:3px"
-                >
-                  <span
-                    style="color:#444"
-                  />
-                </div>
                 <div
                   style="padding-left:33px;padding-right:3px"
                 >
@@ -768,26 +726,3 @@ exports[`Storyshots Button with text 1`] = `
   Hello Button
 </button>
 `;
-
-exports[`Storyshots Lifecycle logging 1`] = `
-<div>
-  Lifecycle methods are logged to the console
-</div>
-`;
-
-exports[`Storyshots Some really long story kind description with text 1`] = `
-<div
-  style="position:fixed;top:0;left:0;bottom:0;right:0;display:flex;align-items:center;overflow:auto"
->
-  <div
-    style="margin:auto;max-height:100%"
-  >
-    <button
-      style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
-      type="button"
-    >
-      Hello Button
-    </button>
-  </div>
-</div>
-`;

examples/cra-kitchen-sink/src/stories/__snapshots__/long-description.stories.storyshot

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Some really long story kind description with text 1`] = `
+<div
+  style="position:fixed;top:0;left:0;bottom:0;right:0;display:flex;align-items:center;overflow:auto"
+>
+  <div
+    style="margin:auto;max-height:100%"
+  >
+    <button
+      style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
+      type="button"
+    >
+      Hello Button
+    </button>
+  </div>
+</div>
+`;