Upgrade docs to use @storybook/react

docs/package.json

@@ -3,11 +3,11 @@
   "private": true,
   "scripts": {
     "build": "yarn && build-storybook -o ./dist -c ./storybook/.storybook",
-    "start": "start-storybook -p 9001 -c ./storybook/.storybook --dont-track",
+    "start": "start-storybook -p 9001 -c ./storybook/.storybook",
     "publish": "yarn build && git checkout gh-pages && rm -rf ./storybook && mv docs/dist storybook && git add -A && git commit -m \"Storybook deploy\" && git push origin gh-pages && git checkout -"
   },
   "dependencies": {
-    "@kadira/storybook": "^2.35.3",
-    "@kadira/storybook-addon-options": "^1.0.2"
+    "@storybook/addon-options": "^3.1.6",
+    "@storybook/react": "^3.1.9"
   }
 }

docs/storybook/.storybook/addons.js

@@ -1 +1 @@
-import '@kadira/storybook-addon-options/register';
+import '@storybook/addon-options/register';

docs/storybook/.storybook/config.js

@@ -1,6 +1,6 @@
-import { setOptions } from '@kadira/storybook-addon-options';
+import { setOptions } from '@storybook/addon-options';
 import centered from './decorator-centered';
-import { configure, addDecorator } from '@kadira/storybook';
+import { configure, addDecorator } from '@storybook/react';
 
 const context = require.context('../', true, /Screen\.js$/);
 

docs/storybook/.storybook/webpack.config.js

@@ -1,33 +1,36 @@
 const path = require('path');
 const webpack = require('webpack');
 
-const DEV = process.env.NODE_ENV !== 'production';
+module.exports = (storybookBaseConfig, configType) => {
+  const DEV = configType === 'DEVELOPMENT';
 
-module.exports = {
-  module: {
-    loaders: [
-      {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        loader: 'babel-loader',
-        query: { cacheDirectory: true }
-      },
-      {
-        test: /\.(gif|jpe?g|png|svg)$/,
-        loader: 'url-loader',
-        query: { name: '[name].[ext]' }
-      }
-    ]
-  },
-  plugins: [
+  storybookBaseConfig.module.rules.push({
+    test: /\.js$/,
+    exclude: /node_modules/,
+    use: {
+      loader: 'babel-loader',
+      options: { cacheDirectory: true }
+    }
+  });
+
+  storybookBaseConfig.module.rules.push({
+    test: /\.(gif|jpe?g|png|svg)$/,
+    use: {
+      loader: 'url-loader',
+      options: { name: '[name].[ext]' }
+    }
+  });
+
+  storybookBaseConfig.plugins.push(
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
       'process.env.__REACT_NATIVE_DEBUG_ENABLED__': DEV
     })
-  ],
-  resolve: {
-    alias: {
-      'react-native': path.join(__dirname, '../../../src/module')
-    }
-  }
+  );
+
+  storybookBaseConfig.resolve.alias = {
+    'react-native': path.join(__dirname, '../../../src/module')
+  };
+
+  return storybookBaseConfig;
 };

docs/storybook/1-components/ActivityIndicator/ActivityIndicatorScreen.js

@@ -9,8 +9,7 @@ import PropColor from './examples/PropColor';
 import PropHidesWhenStopped from './examples/PropHidesWhenStopped';
 import PropSize from './examples/PropSize';
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
-import UIExplorer, { Description, DocItem, Section } from '../../ui-explorer';
+import UIExplorer, { Description, DocItem, Section, storiesOf } from '../../ui-explorer';
 
 const ActivityIndicatorScreen = () =>
   <UIExplorer title="ActivityIndicator" url="components/ActivityIndicator">

docs/storybook/1-components/Button/ButtonScreen.js

@@ -8,8 +8,14 @@ import React from 'react';
 import PropColor from './examples/PropColor';
 import PropDisabled from './examples/PropDisabled';
 import PropOnPress from './examples/PropOnPress';
-import UIExplorer, { AppText, Code, Description, DocItem, Section } from '../../ui-explorer';
-import { storiesOf } from '@kadira/storybook';
+import UIExplorer, {
+  AppText,
+  Code,
+  Description,
+  DocItem,
+  Section,
+  storiesOf
+} from '../../ui-explorer';
 
 const ButtonScreen = () =>
   <UIExplorer title="Button" url="components/Button">

docs/storybook/1-components/Image/ImageScreen.js

@@ -16,8 +16,14 @@ import PropResizeMode from './examples/PropResizeMode';
 import PropSource from './examples/PropSource';
 import StaticGetSizeExample from './examples/StaticGetSize';
 import StaticPrefetchExample from './examples/StaticPrefetch';
-import { storiesOf } from '@kadira/storybook';
-import UIExplorer, { AppText, Code, Description, DocItem, Section } from '../../ui-explorer';
+import UIExplorer, {
+  AppText,
+  Code,
+  Description,
+  DocItem,
+  Section,
+  storiesOf
+} from '../../ui-explorer';
 
 const ImageScreen = () =>
   <UIExplorer title="Image" url="components/Image">

docs/storybook/1-components/ProgressBar/ProgressScreen.js

@@ -8,8 +8,7 @@ import PropIndeterminate from './examples/PropIndeterminate';
 import PropProgress from './examples/PropProgress';
 import PropTrackColor from './examples/PropTrackColor';
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
-import UIExplorer, { Description, DocItem, Section } from '../../ui-explorer';
+import UIExplorer, { Description, DocItem, Section, storiesOf } from '../../ui-explorer';
 
 const ProgressBarScreen = () =>
   <UIExplorer title="ProgressBar" url="components/ProgressBar">

docs/storybook/1-components/ScrollView/ScrollViewScreen.js

@@ -8,13 +8,13 @@ import { HorizontalExample } from './examples/Horizontal';
 import ScrollToExample from './examples/ScrollTo';
 import ScrollToEndExample from './examples/ScrollToEnd';
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
 import UIExplorer, {
   AppText,
   Code,
   Description,
   DocItem,
   Section,
+  storiesOf,
   TextList
 } from '../../ui-explorer';
 

docs/storybook/1-components/ScrollView/examples/Horizontal.js

@@ -5,10 +5,11 @@
  */
 
 import React from 'react';
-import { action } from '@kadira/storybook';
 import { ScrollView, StyleSheet, Text, View } from 'react-native';
 
-const onScroll = action('ScrollView.onScroll');
+const onScroll = () => {
+  console.log('ScrollView.onScroll');
+};
 
 const VerticalExample = () =>
   <View style={styles.scrollViewContainer}>

docs/storybook/1-components/Switch/SwitchScreen.js

@@ -13,8 +13,14 @@ import PropThumbColor from './examples/PropThumbColor';
 import PropTrackColor from './examples/PropTrackColor';
 import PropValue from './examples/PropValue';
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
-import UIExplorer, { AppText, Code, Description, DocItem, Section } from '../../ui-explorer';
+import UIExplorer, {
+  AppText,
+  Code,
+  Description,
+  DocItem,
+  Section,
+  storiesOf
+} from '../../ui-explorer';
 
 const SwitchScreen = () =>
   <UIExplorer title="Switch" url="components/Switch">

docs/storybook/1-components/Text/TextScreen.js

@@ -8,13 +8,13 @@ import PropChildren from './examples/PropChildren';
 import PropNumberOfLines from './examples/PropNumberOfLines';
 import PropOnPress from './examples/PropOnPress';
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
 import UIExplorer, {
   AppText,
   Code,
   Description,
   DocItem,
   Section,
+  storiesOf,
   StyleList
 } from '../../ui-explorer';
 

docs/storybook/1-components/Text/examples/legacy.js

@@ -5,8 +5,7 @@
 /*
 import createReactClass from 'create-react-class';
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
-import UIExplorer, { PropText, StyleList } from '../../ui-explorer';
+import UIExplorer, { PropText, storiesOf, StyleList } from '../../ui-explorer';
 import { Image, Text, View } from 'react-native';
 
 const AttributeToggler = createReactClass({

docs/storybook/1-components/TextInput/TextInputScreen.js

@@ -19,13 +19,13 @@ import PropSelectTextOnFocus from './examples/PropSelectTextOnFocus';
 import TextInputEvents from './examples/TextInputEvents';
 import TextInputRewrite, { TextInputRewriteInvalidCharacters } from './examples/Rewrite';
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
 import UIExplorer, {
   AppText,
   Code,
   Description,
   DocItem,
   Section,
+  storiesOf,
   StyleList,
   TextList
 } from '../../ui-explorer';

docs/storybook/1-components/Touchable/TouchableHighlightScreen.js

@@ -8,9 +8,8 @@ import CustomStyleOverrides from './examples/CustomStyleOverrides';
 import DelayEvents from './examples/DelayEvents';
 import FeedbackEvents from './examples/FeedbackEvents';
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
 import { TouchableHighlightDisabled } from './examples/PropDisabled';
-import UIExplorer, { AppText, Description, DocItem, Section } from '../../ui-explorer';
+import UIExplorer, { AppText, Description, DocItem, Section, storiesOf } from '../../ui-explorer';
 
 const TouchableHighlightScreen = () =>
   <UIExplorer title="TouchableHighlight" url="components/Touchable">

docs/storybook/1-components/Touchable/TouchableOpacityScreen.js

@@ -7,9 +7,8 @@
 import DelayEvents from './examples/DelayEvents';
 import FeedbackEvents from './examples/FeedbackEvents';
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
 import { TouchableOpacityDisabled } from './examples/PropDisabled';
-import UIExplorer, { AppText, Description, DocItem, Section } from '../../ui-explorer';
+import UIExplorer, { AppText, Description, DocItem, Section, storiesOf } from '../../ui-explorer';
 
 const TouchableOpacityScreen = () =>
   <UIExplorer title="TouchableOpacity" url="components/Touchable">

docs/storybook/1-components/Touchable/TouchableWithoutFeedbackScreen.js

@@ -8,9 +8,15 @@ import DelayEvents from './examples/DelayEvents';
 import FeedbackEvents from './examples/FeedbackEvents';
 import React from 'react';
 import PropHitSlop from './examples/PropHitSlop';
-import { storiesOf } from '@kadira/storybook';
 import { TouchableWithoutFeedbackDisabled } from './examples/PropDisabled';
-import UIExplorer, { AppText, Code, Description, DocItem, Section } from '../../ui-explorer';
+import UIExplorer, {
+  AppText,
+  Code,
+  Description,
+  DocItem,
+  Section,
+  storiesOf
+} from '../../ui-explorer';
 
 const TouchableWithoutFeedbackScreen = () =>
   <UIExplorer title="TouchableWithoutFeedback" url="components/Touchable">

docs/storybook/1-components/Touchable/examples/PropDisabled.js

@@ -3,7 +3,6 @@
  */
 
 import React from 'react';
-import { action } from '@kadira/storybook';
 import {
   StyleSheet,
   View,
@@ -13,6 +12,10 @@ import {
   TouchableWithoutFeedback
 } from 'react-native';
 
+const action = msg => () => {
+  console.log(msg);
+};
+
 class TouchableHighlightDisabled extends React.Component {
   render() {
     return (

docs/storybook/1-components/View/ViewScreen.js

@@ -8,7 +8,6 @@ import PropPointerEvents from './examples/PropPointerEvents';
 import transformExamples from './examples/transforms';
 import ZIndexExample from './examples/ZIndex';
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
 import UIExplorer, {
   AppText,
   Code,
@@ -16,6 +15,7 @@ import UIExplorer, {
   DocItem,
   ExternalLink,
   Section,
+  storiesOf,
   StyleList
 } from '../../ui-explorer';
 

docs/storybook/2-apis/AppRegistry/AppRegistryScreen.js

@@ -3,8 +3,14 @@
  */
 
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
-import UIExplorer, { AppText, Code, Description, DocItem, Section } from '../../ui-explorer';
+import UIExplorer, {
+  AppText,
+  Code,
+  Description,
+  DocItem,
+  Section,
+  storiesOf
+} from '../../ui-explorer';
 
 const AppRegistryScreen = () =>
   <UIExplorer title="AppRegistry" url="apis/AppRegistry">

docs/storybook/2-apis/AppState/AppStateScreen.js

@@ -6,8 +6,14 @@
 
 import React from 'react';
 import StateChangesExample from './examples/StateChanges';
-import { storiesOf } from '@kadira/storybook';
-import UIExplorer, { AppText, Code, Description, DocItem, Section } from '../../ui-explorer';
+import UIExplorer, {
+  AppText,
+  Code,
+  Description,
+  DocItem,
+  Section,
+  storiesOf
+} from '../../ui-explorer';
 
 const AppStateScreen = () =>
   <UIExplorer title="AppState" url="apis/AppState">

docs/storybook/2-apis/AsyncStorage/AsyncStorageScreen.js

@@ -3,8 +3,14 @@
  */
 
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
-import UIExplorer, { AppText, Code, Description, DocItem, Section } from '../../ui-explorer';
+import UIExplorer, {
+  AppText,
+  Code,
+  Description,
+  DocItem,
+  Section,
+  storiesOf
+} from '../../ui-explorer';
 
 const AsyncStorageScreen = () =>
   <UIExplorer title="AsyncStorage" url="apis/AsyncStorage">

docs/storybook/2-apis/Clipboard/ClipboardScreen.js

@@ -4,8 +4,7 @@
 
 import React from 'react';
 import SetStringExample from './examples/SetString';
-import { storiesOf } from '@kadira/storybook';
-import UIExplorer, { Description, DocItem, Section } from '../../ui-explorer';
+import UIExplorer, { Description, DocItem, Section, storiesOf } from '../../ui-explorer';
 
 const ClipboardScreen = () =>
   <UIExplorer title="Clipboard" url="apis/Clipboard">

docs/storybook/2-apis/Dimensions/DimensionsScreen.js

@@ -5,13 +5,13 @@
  */
 
 import DimensionsChange from './examples/DimensionsChange';
-import { storiesOf } from '@kadira/storybook';
 import UIExplorer, {
   AppText,
   Code,
   Description,
   DocItem,
   Section,
+  storiesOf,
   TextList
 } from '../../ui-explorer';
 import React from 'react';

docs/storybook/2-apis/I18nManager/I18nManagerScreen.js

@@ -6,8 +6,7 @@
 
 import RTLToggle from './examples/RTLToggle';
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
-import UIExplorer, { Description, DocItem, Section } from '../../ui-explorer';
+import UIExplorer, { Description, DocItem, Section, storiesOf } from '../../ui-explorer';
 
 const I18nManagerScreen = () =>
   <UIExplorer title="I18nManager" url="apis/I18nManager">

docs/storybook/2-apis/Linking/LinkingScreen.js

@@ -6,8 +6,7 @@
 
 import OpenURL from './examples/OpenURL';
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
-import UIExplorer, { Description, DocItem, Section } from '../../ui-explorer';
+import UIExplorer, { Description, DocItem, Section, storiesOf } from '../../ui-explorer';
 
 const LinkingScreen = () =>
   <UIExplorer title="Linking" url="apis/Linking">

docs/storybook/2-apis/NetInfo/NetInfoScreen.js

@@ -3,13 +3,13 @@
  */
 
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
 import UIExplorer, {
   AppText,
   Code,
   Description,
   DocItem,
   Section,
+  storiesOf,
   TextList
 } from '../../ui-explorer';
 

docs/storybook/2-apis/PanResponder/PanResponderScreen.js

@@ -3,9 +3,8 @@
  */
 
 import DraggableCircleExample from './examples/DraggableCircle';
-import { storiesOf } from '@kadira/storybook';
 import React from 'react';
-import UIExplorer, { AppText, Description, DocItem, Section } from '../../ui-explorer';
+import UIExplorer, { AppText, Description, DocItem, Section, storiesOf } from '../../ui-explorer';
 
 const PanResponderScreen = () =>
   <UIExplorer title="PanResponder" url="apis/PanResponder">

docs/storybook/2-apis/PixelRatio/PixelRatioScreen.js

@@ -3,8 +3,14 @@
  */
 
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
-import UIExplorer, { AppText, Code, Description, DocItem, Section } from '../../ui-explorer';
+import UIExplorer, {
+  AppText,
+  Code,
+  Description,
+  DocItem,
+  Section,
+  storiesOf
+} from '../../ui-explorer';
 
 const PixelRatioScreen = () =>
   <UIExplorer title="PixelRatio" url="apis/PixelRatio">

docs/storybook/2-apis/Platform/PlatformScreen.js

@@ -2,9 +2,8 @@
  * @flow
  */
 
-import { storiesOf } from '@kadira/storybook';
 import React from 'react';
-import UIExplorer, { Description, DocItem, Section } from '../../ui-explorer';
+import UIExplorer, { Description, DocItem, Section, storiesOf } from '../../ui-explorer';
 
 const PlatformScreen = () =>
   <UIExplorer title="Platform" url="apis/Platform">

docs/storybook/2-apis/StyleSheet/StyleSheetScreen.js

@@ -2,9 +2,15 @@
  * @flow
  */
 
-import { storiesOf } from '@kadira/storybook';
 import React from 'react';
-import UIExplorer, { AppText, Code, Description, DocItem, Section } from '../../ui-explorer';
+import UIExplorer, {
+  AppText,
+  Code,
+  Description,
+  DocItem,
+  Section,
+  storiesOf
+} from '../../ui-explorer';
 
 const StyleSheetScreen = () =>
   <UIExplorer title="StyleSheet" url="apis/StyleSheet">

docs/storybook/2-apis/Vibration/VibrationScreen.js

@@ -2,9 +2,15 @@
  * @flow
  */
 
-import { storiesOf } from '@kadira/storybook';
 import React from 'react';
-import UIExplorer, { AppText, Code, Description, DocItem, Section } from '../../ui-explorer';
+import UIExplorer, {
+  AppText,
+  Code,
+  Description,
+  DocItem,
+  Section,
+  storiesOf
+} from '../../ui-explorer';
 
 const VibrationScreen = () =>
   <UIExplorer title="Vibration" url="apis/Vibration">

docs/storybook/3-demos/Calculator/CalculatorScreen.js

@@ -1,6 +1,6 @@
 import Calculator from './Calculator';
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
+import { storiesOf } from '../../ui-explorer';
 import { StyleSheet, View } from 'react-native';
 
 const CalculatorScreen = () =>

docs/storybook/3-demos/Game2048/Game2048Screen.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
+import { storiesOf } from '../../ui-explorer';
 import Game2048 from './Game2048';
 
 const Game2048Screen = () => <Game2048 />;

docs/storybook/3-demos/TicTacToe/TicTacToeScreen.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { storiesOf } from '@kadira/storybook';
+import { storiesOf } from '../../ui-explorer';
 import TicTacToe from './TicTacToe';
 
 const TicTacToeScreen = () => <TicTacToe />;

docs/storybook/ui-explorer/index.js

@@ -7,9 +7,20 @@ import Code from './Code';
 import DocItem from './DocItem';
 import ExternalLink from './ExternalLink';
 import Section from './Section';
+import { storiesOf } from '@storybook/react';
 import StyleList from './StyleList';
 import TextList from './TextList';
 import UIExplorer, { Description } from './UIExplorer';
 
 export default UIExplorer;
-export { AppText, Code, Description, DocItem, ExternalLink, Section, StyleList, TextList };
+export {
+  AppText,
+  Code,
+  Description,
+  DocItem,
+  ExternalLink,
+  Section,
+  storiesOf,
+  StyleList,
+  TextList
+};