Upgrade storybook@3.2.11

.storybook/.babelrc

@@ -0,0 +1,18 @@
+{
+  presets: [
+    "babel-preset-latest",
+    "babel-preset-react"
+  ],
+  plugins: [
+    "transform-class-properties",
+    "transform-object-rest-spread",
+    ["transform-regenerator", {
+      async: false
+    }],
+    ["transform-runtime", {
+      helpers: false,
+      polyfill: false,
+      regenerator: true,
+    }],
+  ]
+}

.storybook/addons.js

@@ -1,2 +1,2 @@
-import '@kadira/storybook/addons';
-import '@kadira/storybook-addon-knobs/register';
+import '@storybook/react/addons';
+import '@storybook/addon-knobs/register';

.storybook/config.js

@@ -1,4 +1,4 @@
-import { configure } from '@kadira/storybook';
+import { configure } from '@storybook/react';
 
 const req = require.context('../components', true, /.story.js$/)
 

.storybook/utils/actionWithComplexArgs.js

@@ -1,4 +1,4 @@
-import { action } from '@kadira/storybook';
+import { action } from '@storybook/react';
 
 export default name => (...args) => {
   /* eslint-disable no-console */

.storybook/webpack.config.js

@@ -1,94 +1,86 @@
+const merge = require('webpack-merge');
 const path = require('path');
-var paths = require('../config/paths');
-const combineLoaders = require('webpack-combine-loaders');
-const autoprefixer = require('autoprefixer');
-const customProperties = require('postcss-custom-properties');
-var customMedia = require('postcss-custom-media');
-var webpackPostcssTools = require('webpack-postcss-tools');
-var lost = require('lost');
+const babelConfig = require('../config/babel.dev');
+const paths = require('../config/paths');
 
-var cssMap = webpackPostcssTools.makeVarMap(path.join(paths.globalsSrc, 'index.css'));
+// Blacklist uglification until we figure out a fix for that.
+const PLUGIN_BLACKLIST = ['UglifyJsPlugin'];
 
-module.exports = {
-  module: {
-    noParse: /node_modules\/@appearhere\/mapbox-gl\/dist\/mapbox-gl.js/,
-    loaders: [
-      {
-        test: /\.css$/,
-        include: path.resolve(__dirname, '../'),
-        loader: combineLoaders([{
-          loader: 'style'
+module.exports = (storybookBaseConfig, configType) => {
+  if (configType === 'PRODUCTION') {
+    // eslint-disable-next-line no-param-reassign
+    storybookBaseConfig.plugins = storybookBaseConfig.plugins.filter(plugin =>
+      PLUGIN_BLACKLIST.indexOf(plugin.constructor.name) < 0
+    );
+  }
+
+  const extension = {
+    module: {
+      noParse: /node_modules\/@appearhere\/mapbox-gl\/dist\/mapbox-gl.js/,
+      rules: [{
+        oneOf: [{
+          test: /\.css$/,
+          use: [
+            'style-loader',
+            {
+              loader: 'css-loader',
+              options: {
+                modules: true,
+                localIdentName: '[name]__[local]___[hash:base64:5]',
+              },
+            }, {
+              loader: 'postcss-loader',
+              options: {
+                config: {
+                  path: path.resolve('./config/postcss.config.js'),
+                },
+              },
+            },
+          ],
+        }, {
+          test: /\.(js|jsx)$/,
+          include: [
+            paths.appSrc,
+            paths.componentSrc,
+            paths.utilsSrc,
+            paths.globalsSrc,
+            paths.constantsSrc,
+          ],
+          loader: require.resolve('babel-loader'),
+          options: babelConfig,
+        }, {
+          test: /icons\/.+\.svg$/,
+          include: [paths.componentSrc],
+          use: [
+            'raw-loader',
+            'svgo-loader',
+          ],
+        }, {
+          test: /\.(ico|jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
+          loader: 'file-loader',
+          options: {
+            name: 'static/media/[name].[hash:8].[ext]',
+          },
+        }, {
+          test: /\.(mp4|webm)(\?.*)?$/,
+          loader: 'url-loader',
+          options: {
+            limit: 10000,
+            name: 'static/media/[name].[hash:8].[ext]',
+          },
         }, {
-          loader: 'css',
-          query: {
-            autoprefixercss: false,
-            modules: true,
-            localIdentName: '[name]__[local]___[hash:base64:5]',
-            importLoaders: 1,
+          test: /\.html$/,
+          loader: 'html-loader',
+          options: {
+            attrs: ['link:href'],
           },
         }, {
-          loader: 'postcss'
-        }]),
-      },
-      // "file" loader makes sure those assets get served by WebpackDevServer.
-      // When you `import` an asset, you get its (virtual) filename.
-      // In production, they would get copied to the `build` folder.
-      {
-        test: /\.(ico|jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
-        exclude: /(\/favicon.ico|\/icons\/.+\.svg)$/,
-        loader: 'file',
-        query: {
-          name: 'static/media/[name].[hash:8].[ext]'
-        }
-      },
-      // "raw" loader for certain SVGs, i.e., icons, so we can embed them
-      // in the page itself
-      {
-        test: /icons\/.+\.svg$/,
-        include: [paths.componentSrc],
-        loaders: [
-          'raw',
-          'svgo',
-        ],
-      },
-      {
-        test: /\.json$/,
-        loader: 'json',
-      },
-      {
-        test: /\.md$/,
-        loader: 'raw'
-      },
-      // "url" loader works just like "file" loader but it also embeds
-      // assets smaller than specified size as data URLs to avoid requests.
-      {
-        test: /\.(mp4|webm)(\?.*)?$/,
-        loader: 'url',
-        query: {
-          limit: 10000,
-          name: 'static/media/[name].[hash:8].[ext]'
-        }
-      },
-    ]
-  },
-  // We use PostCSS for autoprefixing only.
-  postcss: function() {
-    return [
-      autoprefixer({
-        browsers: [
-          '>1%',
-          'last 4 versions',
-          'Firefox ESR',
-          'not ie < 9', // React doesn't support IE8 anyway
-        ]
-      }),
-      customProperties({
-        variables: cssMap.vars,
-      }),
-      customMedia({
-        extensions: cssMap.media,
-      }),
-      lost,
-    ];
-  },
-}
+          test: /\.md$/,
+          loader: 'raw-loader',
+        }],
+      }],
+    },
+  };
+
+  return merge(storybookBaseConfig, extension);
+};

components/Animate/Animate.story.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import keyMirror from 'key-mirror';
-import { storiesOf, linkTo } from '@kadira/storybook';
-import { withKnobs, select } from '@kadira/storybook-addon-knobs';
+import { storiesOf, linkTo } from '@storybook/react';
+import { withKnobs, select } from '@storybook/addon-knobs';
 
 import Circle from './Circle';
 import Sunrise from './Sunrise';

components/AreaUnits/AreaUnits.story.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
+import { storiesOf } from '@storybook/react';
 import AreaUnits from './AreaUnits';
 
 import { AREA_UNITS } from '../../constants/units';

components/Badge/Badge.story.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
+import { storiesOf } from '@storybook/react';
 import Badge from './Badge';
 
 storiesOf('Badge', module)

components/BookingRequestPreview/BookingRequestPreview.story.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
+import { storiesOf } from '@storybook/react';
 import BookingRequestPreview from './BookingRequestPreview';
 
 storiesOf('BookingRequestPreview', module)

components/Btn/Btn.story.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { storiesOf, action } from '@kadira/storybook';
+import { storiesOf, action } from '@storybook/react';
 import Btn from './Btn';
 import m from '../../globals/modifiers.css';
 import Icon from '../Icon/Icon';

components/BtnContainer/BtnContainer.story.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { storiesOf, action } from '@kadira/storybook';
+import { storiesOf, action } from '@storybook/react';
 import BtnContainer from './BtnContainer';
 
 storiesOf('BtnContainer', module)

components/BtnGroup/BtnGroup.story.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
+import { storiesOf } from '@storybook/react';
 import cx from 'classnames';
 
 import Medallion from '../Medallion/Medallion';

components/Calendar/CalendarItem/CalendarItem.story.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
+import { storiesOf } from '@storybook/react';
 import CalendarItem from './CalendarItem';
 
 storiesOf('CalendarItem', module)

components/Calendar/CalendarMonth/CalendarMonth.story.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
+import { storiesOf } from '@storybook/react';
 import CalendarMonth from './CalendarMonth';
 
 storiesOf('CalendarMonth', module)

components/Calendar/DayPicker/DayPicker.story.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import { storiesOf } from '@kadira/storybook';
-import { withKnobs, number } from '@kadira/storybook-addon-knobs';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, number } from '@storybook/addon-knobs';
 import moment from 'moment';
 import DayPicker from './DayPicker';
 import { defaultDayState } from './DayPickerItem';

components/Calendar/DayRange/DayRange.story.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
-import { withKnobs, number, select } from '@kadira/storybook-addon-knobs';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, number, select } from '@storybook/addon-knobs';
 import moment from 'moment';
 
 import DayRange from './DayRange';

components/Calendar/DayRangePicker/DayRangePicker.story.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
-import { withKnobs } from '@kadira/storybook-addon-knobs';
+import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
 import moment from 'moment';
 
 import DayRangePicker, { SELECT_DATE } from './DayRangePicker';

components/Cards/Cards.story.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { storiesOf, action } from '@kadira/storybook';
+import { storiesOf, action } from '@storybook/react';
 
 import Badge from '../Badge/Badge';
 import Card from './Card/Card';

components/Carousel/Carousel.story.js

@@ -1,5 +1,5 @@
 import React, { PropTypes } from 'react';
-import { storiesOf, action } from '@kadira/storybook';
+import { storiesOf, action } from '@storybook/react';
 
 import PictureCard from '../Cards/PictureCard/PictureCard';
 import Carousel from './Carousel';

components/DeviceFrame/DeviceFrame.story.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
+import { storiesOf } from '@storybook/react';
 import Macbook from './Macbook';
 import IPhone from './IPhone';
 

components/DismissablePanel/DismissablePanel.story.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { storiesOf, action } from '@kadira/storybook';
+import { storiesOf, action } from '@storybook/react';
 import DismissablePanel from './DismissablePanel';
 
 storiesOf('DismissablePanel', module)

components/Dropdown/Dropdown.story.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
+import { storiesOf } from '@storybook/react';
 
 import Dropdown, { HORIZONTAL_ATTACHMENTS } from './Dropdown';
 import DropdownInner from './DropdownInner';

components/Figure/Figure.story.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
+import { storiesOf } from '@storybook/react';
 import Figure from './Figure';
 
 storiesOf('Figure', module)

components/FittedImage/FittedImage.story.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
+import { storiesOf } from '@storybook/react';
 import FittedImage from './FittedImage';
 
 storiesOf('FittedImage', module)

components/FloatingActionBtn/FloatingActionBtn.story.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { storiesOf, action } from '@kadira/storybook';
+import { storiesOf, action } from '@storybook/react';
 import FloatingActionBtn from './FloatingActionBtn';
 import Icon from '../Icon/Icon';
 

components/Form/AutoComplete/AutoComplete.story.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { storiesOf, action } from '@kadira/storybook';
+import { storiesOf, action } from '@storybook/react';
 import AutoComplete from './AutoComplete';
 import Heading from './Heading';
 import Suggestion from './Suggestion';

components/Form/Checkbox/Checkbox.story.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { storiesOf, action } from '@kadira/storybook';
-import { withKnobs, boolean } from '@kadira/storybook-addon-knobs';
+import { storiesOf, action } from '@storybook/react';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
 import Checkbox from './Checkbox';
 
 const stories = storiesOf('FormComponents', module);

components/Form/CheckboxGroup/CheckboxGroup.story.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { storiesOf, action } from '@kadira/storybook';
-import { withKnobs, array } from '@kadira/storybook-addon-knobs';
+import { storiesOf, action } from '@storybook/react';
+import { withKnobs, array } from '@storybook/addon-knobs';
 import CheckboxGroup from './CheckboxGroup';
 
 const stories = storiesOf('FormComponents', module);

components/Form/FormComponents.story.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
-import { withKnobs } from '@kadira/storybook-addon-knobs';
+import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
 import {
   Field,
   Meta,