Added storybook

examples/react-native-typesript/package.json

@@ -4,7 +4,8 @@
   "private": true,
   "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start --config $PWD/rn-cli.config.js",
-    "test": "jest"
+    "test": "jest",
+    "storybook": "storybook start -p 7007 --metro-config $PWD/rn-cli.config.js"
   },
   "dependencies": {
     "react": "^16.3.0-alpha.1",
@@ -21,7 +22,25 @@
     "react-native-typescript-transformer": "^1.2.3",
     "react-test-renderer": "^16.3.0-alpha.1",
     "ts-jest": "^22.4.1",
-    "typescript": "^2.7.2"
+    "typescript": "^2.7.2",
+    "@storybook/addon-actions": "file:../../packs/storybook-addon-actions.tgz",
+    "@storybook/addon-knobs": "file:../../packs/storybook-addon-knobs.tgz",
+    "@storybook/addon-links": "file:../../packs/storybook-addon-links.tgz",
+    "@storybook/addon-options": "file:../../packs/storybook-addon-options.tgz",
+    "@storybook/addon-storyshots": "file:../../packs/storybook-addon-storyshots.tgz",
+    "@storybook/addons": "file:../../packs/storybook-addons.tgz",
+    "@storybook/channels": "file:../../packs/storybook-channels.tgz",
+    "@storybook/client-logger": "file:../../packs/storybook-client-logger.tgz",
+    "@storybook/channel-postmessage": "file:../../packs/storybook-channel-postmessage.tgz",
+    "@storybook/channel-websocket": "file:../../packs/storybook-channel-websocket.tgz",
+    "@storybook/components": "file:../../packs/storybook-components.tgz",
+    "@storybook/core": "file:../../packs/storybook-core.tgz",
+    "@storybook/node-logger": "file:../../packs/storybook-node-logger.tgz",
+    "@storybook/react-native": "file:../../packs/storybook-react-native.tgz",
+    "@storybook/ui": "file:../../packs/storybook-ui.tgz",
+    "babel-core": "^6.26.0",
+    "react-dom": "^16.3.0-alpha.1",
+    "prop-types": "^15.6.1"
   },
   "jest": {
     "preset": "react-native",

examples/react-native-typesript/storybook/addons.js

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

examples/react-native-typesript/storybook/index.android.ts

@@ -0,0 +1,3 @@
+import StorybookUI from './storybook';
+
+export default StorybookUI;

examples/react-native-typesript/storybook/index.ios.ts

@@ -0,0 +1,3 @@
+import StorybookUI from './storybook';
+
+export default StorybookUI;

examples/react-native-typesript/storybook/index.js

@@ -0,0 +1,3 @@
+import StorybookUI from './storybook';
+
+export default StorybookUI;

examples/react-native-typesript/storybook/stories/Welcome/index.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+
+/*
+interface Props {
+  showApp?: () => void,
+}
+*/
+
+type Props = {
+  showApp: () => void,
+};
+
+export default class Welcome extends React.Component<Props> {
+  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 (with Typescript)</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>
+    );
+  }
+}

examples/react-native-typesript/storybook/stories/index.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react-native';
+
+import Welcome from './Welcome';
+
+storiesOf('Welcome', module).add('to Storybook', () => <Welcome />);

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

@@ -0,0 +1,26 @@
+/* eslint-disable global-require */
+import React, { Component } from 'react';
+import { AppRegistry } from 'react-native';
+import { getStorybookUI, configure } from '@storybook/react-native';
+
+// import stories
+configure(() => {
+  // eslint-disable-next-line
+  require('./stories');
+}, module);
+
+// This assumes that storybook is running on the same host as your RN packager,
+// to set manually use, e.g. host: 'localhost' option
+const StorybookUIRoot = getStorybookUI({ port: 7007, onDeviceUI: true });
+
+// react-native hot module loader must take in a Class - https://github.com/facebook/react-native/issues/10991
+// https://github.com/storybooks/storybook/issues/2081
+// eslint-disable-next-line react/prefer-stateless-function
+class StorybookUIHMRRoot extends Component {
+  render() {
+    return <StorybookUIRoot />;
+  }
+}
+
+AppRegistry.registerComponent('ReactNativeTypescript', () => StorybookUIHMRRoot);
+export default StorybookUIHMRRoot;