Merge pull request react-dates#601 from airbnb/maja-bump-storybook-version

Bump storybook version to v3 and webpack to v2

Author: majapw

.storybook/.eslintrc

@@ -0,0 +1,8 @@
+{
+  "rules": {
+    "import/no-extraneous-dependencies": [2, {
+      "devDependencies": true
+    }],
+    "global-require": 2,
+  }
+}

.storybook/addons.js

@@ -1,2 +1,4 @@
-import '@kadira/storybook/addons';
-import '@kadira/storybook-addon-options/register';
+/* eslint-disable import/no-extraneous-dependencies, import/extensions */
+
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';

.storybook/config.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import moment from 'moment';
-import { configure, addDecorator, setAddon } from '@kadira/storybook';
-import infoAddon from '@kadira/react-storybook-addon-info';
-import { setOptions } from '@kadira/storybook-addon-options';
+import { configure, addDecorator, setAddon } from '@storybook/react';
+import infoAddon from '@storybook/addon-info';
+import { setOptions } from '@storybook/addon-options';
+import './storybook.scss';
 import '../css/styles.scss';
 
 addDecorator((story) => {

.storybook/head.html

@@ -2,19 +2,35 @@ const path = require('path');
 
 module.exports = {
   module: {
-    loaders: [
+    rules: [
       {
-        test:   /\.scss$/,
-        loaders: ['style', 'raw', 'sass'],
-        include: path.resolve(__dirname, '../css/')
+        test: /\.scss$/,
+        use: ['style-loader', 'raw-loader', 'sass-loader'],
+        include: [
+          path.resolve(__dirname, './'),
+          path.resolve(__dirname, '../css/'),
+        ],
       },
       {
         test: /\.svg$/,
-        loader: 'babel!react-svg'
-      }
-    ]
+        use: [
+          {
+            loader: 'babel-loader',
+            query: {
+              presets: ['airbnb'],
+            },
+          },
+          {
+            loader: 'react-svg-loader',
+            query: {
+              jsx: true,
+            },
+          },
+        ],
+      },
+    ],
   },
   resolve: {
-    extensions: ['', '.js', '.jsx'],
+    extensions: ['.js', '.jsx'],
   },
 };

public/storybook.css renamed to .storybook/storybook.scss

@@ -27,7 +27,7 @@ module.exports = (config) => {
         }),
       ],
       module: {
-        loaders: [
+        rules: [
           {
             test: /\.jsx?$/,
             loader: 'babel-loader',
@@ -42,19 +42,32 @@ module.exports = (config) => {
           },
           {
             test: /\.svg$/,
-            loader: 'babel!react-svg',
+            use: [
+              {
+                loader: 'babel-loader',
+                query: {
+                  presets: ['airbnb'],
+                },
+              },
+              {
+                loader: 'react-svg-loader',
+                query: {
+                  jsx: true,
+                },
+              },
+            ],
             include: [
               path.join(__dirname, 'src'),
             ],
           },
           { test: /\.json$/, loader: 'json-loader' },
 
           // Inject the Airbnb shims into the bundle
-          { test: /test\/_helpers/, loader: 'imports?shims=airbnb-js-shims' },
+          { test: /test\/_helpers/, loader: 'imports-loader?shims=airbnb-js-shims' },
         ],
       },
       resolve: {
-        extensions: ['', '.js', '.jsx'],
+        extensions: ['.js', '.jsx'],
       },
     },
 

.storybook/webpack.config.js

@@ -13,15 +13,15 @@
     "cover": "cross-env NODE_ENV=test node --max-old-space-size=2048 $(which nyc) npm run mocha test",
     "lint": "eslint --ext .js,.jsx src test",
     "mocha": "mocha ./test/_helpers",
-    "storybook:uninstall": "rimraf node_modules/@kadira node_modules/react-modal node_modules/react-dom-factories node_modules/react-svg-loader",
-    "react:clean": "npm run storybook:uninstall && npm uninstall --no-save react react-dom react-addons-test-utils react-test-renderer && rimraf node_modules/react-test-renderer node_modules/react && npm prune",
+    "storybook:uninstall": "rimraf node_modules/@storybook node_modules/react-modal node_modules/react-dom-factories node_modules/react-svg-loader",
+    "react:clean": "npm run storybook:uninstall && npm install ajv ajv-keywords && npm uninstall --no-save react react-dom react-addons-test-utils react-test-renderer && rimraf node_modules/react-test-renderer node_modules/react && npm prune",
     "react:14": "rimraf node_modules/.bin/npm && npm run react:clean && npm i --no-save [email protected] [email protected] [email protected] && npm run storybook:uninstall && npm prune",
     "react:15": "rimraf node_modules/.bin/npm && npm run react:clean && npm i --no-save react@15 react-dom@15 react-addons-test-utils@15 react-test-renderer@15 && npm run storybook:uninstall && npm prune",
     "pretest": "npm run --silent lint",
     "tests-only": "npm run mocha --silent test",
     "tests-karma": "karma start",
     "test": "npm run tests-only && npm run tests-karma",
-    "storybook": "start-storybook -p 9001 -s ./public",
+    "storybook": "start-storybook -p 9001",
     "tag": "git tag v$npm_package_version",
     "gh-pages:clean": "rimraf _gh-pages",
     "gh-pages:build": "$(npm bin)/build-storybook -o _gh-pages",
@@ -49,14 +49,13 @@
   },
   "homepage": "https://github.com/airbnb/react-dates#readme",
   "devDependencies": {
-    "@kadira/react-storybook-addon-info": "^3.4.0",
-    "@kadira/storybook": "^2.35.3",
-    "@kadira/storybook-addon-options": "^1.0.2",
-    "@kadira/storybook-addons": "^1.6.1",
+    "@storybook/addon-info": "^3.1.6",
+    "@storybook/addon-options": "^3.1.6",
+    "@storybook/react": "^3.1.6",
     "airbnb-js-shims": "^1.1.1",
     "babel-cli": "^6.24.1",
     "babel-core": "^6.25.0",
-    "babel-loader": "^6.4.1",
+    "babel-loader": "^7.1.1",
     "babel-plugin-istanbul": "^4.1.4",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-replace-object-assign": "^0.2.1",
@@ -96,11 +95,11 @@
     "react-test-renderer": "^15.5.4",
     "rimraf": "^2.6.1",
     "safe-publish-latest": "^1.1.1",
-    "sass-loader": "^4.1.1",
+    "sass-loader": "^6.0.6",
     "sinon": "^2.3.5",
     "sinon-sandbox": "^1.0.2",
     "style-loader": "^0.16.1",
-    "webpack": "^1.15.0"
+    "webpack": "^2.6.1"
   },
   "dependencies": {
     "airbnb-prop-types": "^2.5.4",

karma.conf.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import moment from 'moment';
 import momentJalaali from 'moment-jalaali';
-import { storiesOf } from '@kadira/storybook';
+import { storiesOf } from '@storybook/react';
 
 import DateRangePickerWrapper from '../examples/DateRangePickerWrapper';
 

package.json

@@ -1,6 +1,6 @@
 import React from 'react';
 import moment from 'moment';
-import { storiesOf } from '@kadira/storybook';
+import { storiesOf } from '@storybook/react';
 
 import { VERTICAL_ORIENTATION, ANCHOR_RIGHT } from '../constants';
 
@@ -136,12 +136,6 @@ storiesOf('DRP - Calendar Props', module)
       autoFocus
     />
   ))
-  .addWithInfo('with keyboard shorcuts panel hidden', () => (
-    <DateRangePickerWrapper
-      hideKeyboardShortcutsPanel
-      autoFocus
-    />
-  ))
   .addWithInfo('with RTL support (and anchor right)', () => (
     <div style={{ float: 'right' }}>
       <DateRangePickerWrapper