Stop using deprecated React methods

addons/background/src/BackgroundPanel.js

@@ -63,7 +63,7 @@ export default class BackgroundPanel extends Component {
   constructor(props) {
     super(props);
 
-    const { channel, api } = props;
+    const { channel } = props;
 
     // A channel is explicitly passed in for testing
     if (channel) {
@@ -73,6 +73,20 @@ export default class BackgroundPanel extends Component {
     }
 
     this.state = { backgrounds: [] };
+  }
+
+  componentDidMount() {
+    this.iframe = document.getElementById(storybookIframe);
+
+    if (!this.iframe) {
+      throw new Error('Cannot find Storybook iframe');
+    }
+
+    Object.keys(style.iframe).forEach(prop => {
+      this.iframe.style[prop] = style.iframe[prop];
+    });
+
+    const { api } = this.props;
 
     this.channel.on('background-set', backgrounds => {
       this.setState({ backgrounds });
@@ -93,18 +107,6 @@ export default class BackgroundPanel extends Component {
     });
   }
 
-  componentDidMount() {
-    this.iframe = document.getElementById(storybookIframe);
-
-    if (!this.iframe) {
-      throw new Error('Cannot find Storybook iframe');
-    }
-
-    Object.keys(style.iframe).forEach(prop => {
-      this.iframe.style[prop] = style.iframe[prop];
-    });
-  }
-
   setBackgroundFromSwatch = background => {
     this.updateIframe(background);
     this.props.api.setQueryParams({ background });

addons/background/src/index.js

@@ -7,34 +7,26 @@ export class BackgroundDecorator extends React.Component {
   constructor(props) {
     super(props);
 
-    const { channel, story } = props;
+    const { channel } = props;
 
     // A channel is explicitly passed in for testing
     if (channel) {
       this.channel = channel;
     } else {
       this.channel = addons.getChannel();
     }
-
-    this.story = story();
   }
 
-  componentWillMount() {
+  componentDidMount() {
     this.channel.emit('background-set', this.props.backgrounds);
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.story !== this.props.story) {
-      this.story = nextProps.story();
-    }
-  }
-
   componentWillUnmount() {
     this.channel.emit('background-unset');
   }
 
   render() {
-    return this.story;
+    return this.props.story();
   }
 }
 BackgroundDecorator.propTypes = {

addons/centered/package.json

@@ -14,7 +14,7 @@
     "global": "^4.3.2"
   },
   "devDependencies": {
-    "react-dom": "^16.2.0"
+    "react-dom": "^16.3.0"
   },
   "peerDependencies": {
     "react": "*"

addons/info/package.json

@@ -30,7 +30,7 @@
   "devDependencies": {
     "@storybook/addon-actions": "4.0.0-alpha.1",
     "@storybook/react": "4.0.0-alpha.1",
-    "react-test-renderer": "^16.1.0"
+    "react-test-renderer": "^16.3.0"
   },
   "peerDependencies": {
     "react": "*",

addons/knobs/src/components/Panel.js

@@ -60,6 +60,9 @@ export default class Panel extends React.Component {
 
     this.lastEdit = getTimestamp();
     this.loadedFromUrl = false;
+  }
+
+  componentDidMount() {
     this.props.channel.on('addon:knobs:setKnobs', this.setKnobs);
     this.props.channel.on('addon:knobs:setOptions', this.setOptions);
 

addons/links/package.json

@@ -30,8 +30,8 @@
   "devDependencies": {
     "@storybook/react": "4.0.0-alpha.1",
     "enzyme": "^3.3.0",
-    "react": "^16.1.0",
-    "react-dom": "^16.1.0"
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0"
   },
   "peerDependencies": {
     "@storybook/addons": "^3.3.0",

addons/storyshots/package.json

@@ -32,8 +32,8 @@
     "@storybook/addons": "4.0.0-alpha.1",
     "@storybook/react": "4.0.0-alpha.1",
     "enzyme-to-json": "^3.3.3",
-    "react": "^16.1.0",
-    "react-dom": "^16.1.0"
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0"
   },
   "peerDependencies": {
     "@storybook/addons": "4.0.0-alpha.1",

addons/storysource/src/StoryPanel.js

@@ -46,7 +46,13 @@ export default class StoryPanel extends Component {
 
     this.state = { source: '// Here will be dragons 🐉' };
 
-    const { channel } = props;
+    this.setSelectedStoryRef = this.setSelectedStoryRef.bind(this);
+    this.lineRenderer = this.lineRenderer.bind(this);
+    this.clickOnStory = this.clickOnStory.bind(this);
+  }
+
+  componentDidMount() {
+    const { channel } = this.props;
 
     channel.on(EVENT_ID, ({ source, currentLocation, locationsMap }) => {
       const locationsKeys = StoryPanel.getLocationKeys(locationsMap);
@@ -58,10 +64,6 @@ export default class StoryPanel extends Component {
         locationsKeys,
       });
     });
-
-    this.setSelectedStoryRef = this.setSelectedStoryRef.bind(this);
-    this.lineRenderer = this.lineRenderer.bind(this);
-    this.clickOnStory = this.clickOnStory.bind(this);
   }
 
   componentDidUpdate() {

app/mithril/package.json

@@ -49,8 +49,8 @@
     "html-webpack-plugin": "^3.1.0",
     "json5": "^0.5.1",
     "markdown-loader": "^2.0.2",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0",
     "util-deprecate": "^1.0.2",
     "webpack": "^4.4.1",
     "webpack-hot-middleware": "^2.21.2"

app/polymer/package.json

@@ -49,8 +49,8 @@
     "global": "^4.3.2",
     "html-webpack-plugin": "^3.1.0",
     "json5": "^0.5.1",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0",
     "util-deprecate": "^1.0.2",
     "webpack": "^4.4.1",
     "webpack-hot-middleware": "^2.21.2"

app/react-native/package.json

@@ -48,6 +48,7 @@
     "babel-runtime": "^6.26.0",
     "case-sensitive-paths-webpack-plugin": "^2.1.2",
     "commander": "^2.15.1",
+    "dotenv-webpack": "^1.5.5",
     "express": "^4.16.3",
     "find-cache-dir": "^1.0.0",
     "global": "^4.3.2",

app/react-native/src/server/config/webpack.config.js

@@ -1,5 +1,6 @@
 import path from 'path';
 import webpack from 'webpack';
+import Dotenv from 'dotenv-webpack';
 import WatchMissingNodeModulesPlugin from '@storybook/react-dev-utils/WatchMissingNodeModulesPlugin';
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
@@ -27,6 +28,7 @@ const getConfig = options => ({
     new webpack.HotModuleReplacementPlugin(),
     new CaseSensitivePathsPlugin(),
     new WatchMissingNodeModulesPlugin(nodeModulesPaths),
+    new Dotenv({ silent: true }),
   ],
   module: {
     rules: [

app/react-native/src/server/config/webpack.config.prod.js

@@ -1,5 +1,6 @@
 import path from 'path';
 import webpack from 'webpack';
+import Dotenv from 'dotenv-webpack';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import { includePaths, excludePaths } from './utils';
 
@@ -31,6 +32,7 @@ const getConfig = options => {
       }),
       new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }),
       new webpack.optimize.DedupePlugin(),
+      new Dotenv({ silent: true }),
     ],
     module: {
       rules: [

app/react/package.json

@@ -67,7 +67,7 @@
   "peerDependencies": {
     "babel-core": "^6.26.0 || ^7.0.0-0",
     "babel-runtime": ">=6.0.0",
-    "react": ">=15.0.0 || ^16.0.0",
-    "react-dom": ">=15.0.0 || ^16.0.0"
+    "react": ">=15.0.0",
+    "react-dom": ">=15.0.0"
   }
 }

app/react/src/client/preview/render.js

@@ -19,12 +19,19 @@ if (isBrowser) {
   rootEl = document.getElementById('root');
 }
 
+function render(node, el) {
+  ReactDOM.render(
+    process.env.STORYBOOK_EXAMPLE_APP ? <React.StrictMode>{node}</React.StrictMode> : node,
+    el
+  );
+}
+
 export function renderError(error) {
   const properError = new Error(error.title);
   properError.stack = error.description;
 
   const redBox = <ErrorDisplay error={properError} />;
-  ReactDOM.render(redBox, rootEl);
+  render(redBox, rootEl);
 }
 
 export function renderException(error) {
@@ -33,7 +40,7 @@ export function renderException(error) {
   const realError = new Error(error.message);
   realError.stack = error.stack;
   const redBox = <ErrorDisplay error={realError} />;
-  ReactDOM.render(redBox, rootEl);
+  render(redBox, rootEl);
 
   // Log the stack to the console. So, user could check the source code.
   logger.error(error.stack);
@@ -49,7 +56,7 @@ export function renderMain(data, storyStore, forceRender) {
   const revision = storyStore.getRevision();
   const story = storyStore.getStoryWithContext(selectedKind, selectedStory);
   if (!story) {
-    ReactDOM.render(noPreview, rootEl);
+    render(noPreview, rootEl);
     return null;
   }
 
@@ -101,7 +108,7 @@ export function renderMain(data, storyStore, forceRender) {
     return renderError(error);
   }
 
-  ReactDOM.render(element, rootEl);
+  render(element, rootEl);
   return null;
 }
 

app/vue/package.json

@@ -47,8 +47,8 @@
     "html-webpack-plugin": "^3.1.0",
     "json5": "^0.5.1",
     "markdown-loader": "^2.0.2",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0",
     "util-deprecate": "^1.0.2",
     "webpack": "^4.4.1",
     "webpack-hot-middleware": "^2.21.2"

examples/angular-cli/.env

@@ -0,0 +1 @@
+STORYBOOK_EXAMPLE_APP=true

examples/cra-kitchen-sink/package.json

@@ -13,8 +13,8 @@
   "dependencies": {
     "global": "^4.3.2",
     "prop-types": "^15.6.1",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0"
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "4.0.0-alpha.1",

examples/crna-kitchen-sink/.env

@@ -0,0 +1 @@
+STORYBOOK_EXAMPLE_APP=true

examples/mithril-kitchen-sink/.env

@@ -0,0 +1 @@
+STORYBOOK_EXAMPLE_APP=true

examples/mithril-kitchen-sink/.gitignore

@@ -11,5 +11,4 @@ build
 
 # misc
 .DS_Store
-.env
 npm-debug.log

examples/official-storybook/.env

@@ -1 +1,2 @@
 DISPLAY_WARNING=none
+STORYBOOK_EXAMPLE_APP=true

examples/official-storybook/package.json

@@ -35,9 +35,9 @@
     "global": "^4.3.2",
     "paths.macro": "^2.0.2",
     "prop-types": "^15.6.1",
-    "react": "^16.2.0",
+    "react": "^16.3.0",
     "react-chromatic": "^0.8.1",
-    "react-dom": "^16.2.0",
+    "react-dom": "^16.3.0",
     "uuid": "^3.2.1"
   }
 }

examples/polymer-cli/.env

@@ -0,0 +1 @@
+STORYBOOK_EXAMPLE_APP=true

examples/react-native-vanilla/.env

@@ -0,0 +1 @@
+STORYBOOK_EXAMPLE_APP=true

lib/components/src/navigation/routed_link.js

@@ -6,18 +6,18 @@ const LEFT_BUTTON = 0;
 const isPlainLeftClick = e =>
   e.button === LEFT_BUTTON && !e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey;
 
-const wrapOnClick = fn => e => (isPlainLeftClick(e) ? e.preventDefault() || fn(e) : false);
-
 export default class RoutedLink extends React.Component {
-  constructor(props, ...rest) {
-    super(...[props, ...rest]);
+  constructor(...attrs) {
+    super(...attrs);
 
-    const { onClick } = props;
-    this.onClick = onClick ? wrapOnClick(onClick) : undefined;
+    this.onClick = this.onClick.bind(this);
   }
 
-  componentWillUpdate({ onClick }) {
-    this.onClick = wrapOnClick(onClick);
+  onClick(e) {
+    if (isPlainLeftClick(e)) {
+      e.preventDefault();
+      this.props.onClick(e);
+    }
   }
 
   render() {

lib/core/package.json

@@ -37,8 +37,6 @@
     "postcss-loader": "^2.1.3",
     "prop-types": "^15.6.1",
     "qs": "^6.5.1",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
     "redux": "^3.7.2",
     "serve-favicon": "^2.4.5",
     "shelljs": "^0.8.1",
@@ -48,5 +46,9 @@
     "webpack": "^4.4.1",
     "webpack-dev-middleware": "^3.1.0",
     "webpack-hot-middleware": "^2.21.2"
+  },
+  "peerDependencies": {
+    "react": ">=15.0.0",
+    "react-dom": ">=15.0.0"
   }
 }

lib/ui/package.json

@@ -18,7 +18,7 @@
     "@storybook/components": "4.0.0-alpha.1",
     "@storybook/mantra-core": "^1.7.2",
     "@storybook/podda": "^1.2.3",
-    "@storybook/react-komposer": "^2.0.3",
+    "@storybook/react-komposer": "^2.0.4",
     "babel-runtime": "^6.26.0",
     "deep-equal": "^1.0.1",
     "events": "^2.0.0",
@@ -33,6 +33,7 @@
     "qs": "^6.5.1",
     "react-fuzzy": "^0.5.2",
     "react-icons": "^2.2.7",
+    "react-lifecycles-compat": "^1.1.0",
     "react-modal": "^3.3.2",
     "react-split-pane": "^0.1.77",
     "react-treebeard": "^2.1.0"