Merge pull request #1568 from storybooks/1222-parse-rn-packager-host

Use the RN packager's host by default

app/react-native/package.json

@@ -59,6 +59,7 @@
     "react-native-compat": "0.0.2",
     "shelljs": "^0.7.8",
     "style-loader": "^0.17.0",
+    "url-parse": "^1.1.9",
     "url-loader": "^0.5.8",
     "util-deprecate": "^1.0.2",
     "uuid": "^3.1.0",

app/react-native/src/preview/index.js

@@ -1,6 +1,8 @@
 /* eslint no-underscore-dangle: 0 */
 
 import React from 'react';
+import { NativeModules } from 'react-native';
+import parse from 'url-parse';
 import addons from '@storybook/addons';
 import createChannel from '@storybook/channel-websocket';
 import { EventEmitter } from 'events';
@@ -55,8 +57,7 @@ export default class Preview {
       let webUrl = null;
       let channel = addons.getChannel();
       if (params.resetStorybook || !channel) {
-        const host = params.host || 'localhost';
-
+        const host = params.host || parse(NativeModules.SourceCode.scriptURL).hostname;
         const port = params.port !== false ? `:${params.port || 7007}` : '';
 
         const query = params.query || '';

examples/crna-kitchen-sink/.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": ["babel-preset-expo"],
+  "env": {
+    "development": {
+      "plugins": ["transform-react-jsx-source"]
+    }
+  }
+}

examples/crna-kitchen-sink/.flowconfig

@@ -0,0 +1,63 @@
+[ignore]
+; We fork some components by platform
+.*/*[.]android.js
+
+; Ignore "BUCK" generated dirs
+<PROJECT_ROOT>/\.buckd/
+
+; Ignore unexpected extra "@providesModule"
+.*/node_modules/.*/node_modules/fbjs/.*
+
+; Ignore duplicate module providers
+; For RN Apps installed via npm, "Libraries" folder is inside
+; "node_modules/react-native" but in the source repo it is in the root
+.*/Libraries/react-native/React.js
+.*/Libraries/react-native/ReactNative.js
+
+; Additional create-react-native-app ignores
+
+; Ignore duplicate module providers
+.*/node_modules/fbemitter/lib/*
+
+; Ignore misbehaving dev-dependencies
+.*/node_modules/xdl/build/*
+.*/node_modules/reqwest/tests/*
+
+; Ignore missing expo-sdk dependencies (temporarily)
+; https://github.com/expo/expo/issues/162
+.*/node_modules/expo/src/*
+
+; Ignore react-native-fbads dependency of the expo sdk
+.*/node_modules/react-native-fbads/*
+
+[include]
+
+[libs]
+node_modules/react-native/Libraries/react-native/react-native-interface.js
+node_modules/react-native/flow
+flow/
+
+[options]
+module.system=haste
+
+emoji=true
+
+experimental.strict_type_args=true
+
+munge_underscores=true
+
+module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
+
+suppress_type=$FlowIssue
+suppress_type=$FlowFixMe
+suppress_type=$FixMe
+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-7]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-7]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
+suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
+
+unsafe.enable_getters_and_setters=true
+
+[version]
+^0.47.0

examples/crna-kitchen-sink/.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+.expo/
+npm-debug.*

examples/crna-kitchen-sink/.watchmanconfig

@@ -0,0 +1 @@
+{}

examples/crna-kitchen-sink/App.js

@@ -0,0 +1,29 @@
+export default from './storybook';
+
+// NOTE: The code below is what CRNA generates out of the box. We currently
+// have no clever way of replacing this with Storybook's UI (Vanilla RN does!)
+// so for now we just replace the code outright. Keeping this here for clarity.
+//
+// import React from 'react';
+// import { StyleSheet, Text, View } from 'react-native';
+//
+// export default class App extends React.Component {
+//   render() {
+//     return (
+//       <View style={styles.container}>
+//         <Text>Open up App.js to start working on your app!</Text>
+//         <Text>Changes you make will automatically reload.</Text>
+//         <Text>Shake your phone to open the developer menu.</Text>
+//       </View>
+//     );
+//   }
+// }
+//
+// const styles = StyleSheet.create({
+//   container: {
+//     flex: 1,
+//     backgroundColor: '#fff',
+//     alignItems: 'center',
+//     justifyContent: 'center',
+//   },
+// });

examples/crna-kitchen-sink/App.test.js

@@ -0,0 +1,9 @@
+import renderer from 'react-test-renderer';
+
+import React from 'react';
+import App from './App';
+
+it('renders without crashing', () => {
+  const rendered = renderer.create(<App />).toJSON();
+  expect(rendered).toBeTruthy();
+});

examples/crna-kitchen-sink/README.md

@@ -0,0 +1,3 @@
+# CRNA Kitchen Sink
+
+This project was bootstrapped with [Create React Native App](https://github.com/react-community/create-react-native-app) and storybook using [getstorybook](https://www.npmjs.com/package/@storybook/cli).

examples/crna-kitchen-sink/app.json

@@ -0,0 +1,5 @@
+{
+  "expo": {
+    "sdkVersion": "19.0.0"
+  }
+}

examples/crna-kitchen-sink/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "crna-kitchen-sink",
+  "version": "0.1.0",
+  "private": true,
+  "devDependencies": {
+    "@storybook/addon-actions": "file:../../addons/actions",
+    "@storybook/addon-links": "file:../../addons/links",
+    "@storybook/addon-options": "file:../../addons/options",
+    "@storybook/addon-storyshots": "file:../../addons/storyshots",
+    "@storybook/addons": "file:../../lib/addons",
+    "@storybook/channels": "file:../../lib/channels",
+    "@storybook/channel-postmessage": "file:../../lib/channel-postmessage",
+    "@storybook/react-native": "file:../../app/react-native",
+    "@storybook/ui": "file:../../lib/ui",
+    "react-native-scripts": "1.1.0",
+    "jest-expo": "~19.0.0",
+    "react-test-renderer": "16.0.0-alpha.12"
+  },
+  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
+  "scripts": {
+    "start": "react-native-scripts start",
+    "eject": "react-native-scripts eject",
+    "android": "react-native-scripts android",
+    "ios": "react-native-scripts ios",
+    "test": "node node_modules/jest/bin/jest.js --watch",
+    "storybook": "storybook start -p 7007"
+  },
+  "jest": {
+    "preset": "jest-expo"
+  },
+  "dependencies": {
+    "expo": "^19.0.0",
+    "react": "16.0.0-alpha.12",
+    "react-native": "^0.46.1"
+  }
+}

examples/crna-kitchen-sink/storybook/addons.js

@@ -0,0 +1,3 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';
+import '@storybook/addon-options/register';

examples/crna-kitchen-sink/storybook/index.js

@@ -0,0 +1,24 @@
+import { getStorybookUI, configure } from '@storybook/react-native';
+import { setOptions } from '@storybook/addon-options';
+
+// import stories
+configure(() => {
+  // eslint-disable-next-line global-require
+  require('./stories');
+}, module);
+
+const StorybookUI = getStorybookUI({
+  port: 7007,
+  onDeviceUI: true,
+});
+
+setTimeout(
+  () =>
+    setOptions({
+      name: 'CRNA React Native App',
+      onDeviceUI: true,
+    }),
+  100
+);
+
+export default StorybookUI;

examples/crna-kitchen-sink/storybook/stories/Button/index.android.js

@@ -0,0 +1,22 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
+import React, { PropTypes } from 'react';
+import { TouchableNativeFeedback } from 'react-native';
+
+export default function Button(props) {
+  return (
+    <TouchableNativeFeedback onPress={props.onPress}>
+      {props.children}
+    </TouchableNativeFeedback>
+  );
+}
+
+Button.defaultProps = {
+  children: null,
+  onPress: () => {},
+};
+
+Button.propTypes = {
+  children: PropTypes.node,
+  onPress: PropTypes.func,
+};

examples/crna-kitchen-sink/storybook/stories/Button/index.ios.js

@@ -0,0 +1,22 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
+import React, { PropTypes } from 'react';
+import { TouchableHighlight } from 'react-native';
+
+export default function Button(props) {
+  return (
+    <TouchableHighlight onPress={props.onPress}>
+      {props.children}
+    </TouchableHighlight>
+  );
+}
+
+Button.defaultProps = {
+  children: null,
+  onPress: () => {},
+};
+
+Button.propTypes = {
+  children: PropTypes.node,
+  onPress: PropTypes.func,
+};

examples/crna-kitchen-sink/storybook/stories/CenterView/index.js

@@ -0,0 +1,21 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
+import React, { PropTypes } from 'react';
+import { View } from 'react-native';
+import style from './style';
+
+export default function CenterView(props) {
+  return (
+    <View style={style.main}>
+      {props.children}
+    </View>
+  );
+}
+
+CenterView.defaultProps = {
+  children: null,
+};
+
+CenterView.propTypes = {
+  children: PropTypes.node,
+};

examples/crna-kitchen-sink/storybook/stories/CenterView/style.js

@@ -0,0 +1,8 @@
+export default {
+  main: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+};

examples/crna-kitchen-sink/storybook/stories/Welcome/index.js

@@ -0,0 +1,54 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
+import React, { PropTypes } from 'react';
+import { View, Text } from 'react-native';
+
+export default class Welcome extends React.Component {
+  styles = {
+    wrapper: {
+      flex: 1,
+      padding: 24,
+      justifyContent: 'center',
+    },
+    header: {
+      fontSize: 18,
+      marginBottom: 18,
+    },
+    content: {
+      fontSize: 12,
+      marginBottom: 10,
+      lineHeight: 18,
+    },
+  };
+
+  showApp(event) {
+    event.preventDefault();
+    if (this.props.showApp) this.props.showApp();
+  }
+
+  render() {
+    return (
+      <View style={this.styles.wrapper}>
+        <Text style={this.styles.header}>Welcome to React Native Storybook</Text>
+        <Text style={this.styles.content}>
+          This is a UI Component development environment for your React Native app. Here you can
+          display and interact with your UI components as stories. A story is a single state of one
+          or more UI components. You can have as many stories as you want. In other words a story is
+          like a visual test case.
+        </Text>
+        <Text style={this.styles.content}>
+          We have added some stories inside the "storybook/stories" directory for examples. Try
+          editing the "storybook/stories/Welcome.js" file to edit this message.
+        </Text>
+      </View>
+    );
+  }
+}
+
+Welcome.defaultProps = {
+  showApp: null,
+};
+
+Welcome.propTypes = {
+  showApp: PropTypes.func,
+};

examples/crna-kitchen-sink/storybook/stories/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import { storiesOf } from '@storybook/react-native';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import Button from './Button';
+import CenterView from './CenterView';
+import Welcome from './Welcome';
+
+storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
+
+storiesOf('Button', module)
+  .addDecorator(getStory =>
+    <CenterView>
+      {getStory()}
+    </CenterView>
+  )
+  .add('with text', () =>
+    <Button onPress={action('clicked-text')}>
+      <Text>Hello Button</Text>
+    </Button>
+  )
+  .add('with some emoji', () =>
+    <Button onPress={action('clicked-emoji')}>
+      <Text>😀 😎 👍 💯</Text>
+    </Button>
+  );

examples/react-native-vanilla/storybook/storybook.js

@@ -10,9 +10,7 @@ configure(() => {
 
 const StorybookUI = getStorybookUI({
   port: 7007,
-  host: 'localhost',
   onDeviceUI: true,
-  resetStorybook: true,
 });
 
 setTimeout(