Add an embedded simulator to the documentation site

Examples/UIExplorer/UIExplorer.xcodeproj/project.pbxproj

@@ -52,6 +52,8 @@
 		14DC67F41AB71881001358AB /* libRCTPushNotification.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 14DC67F11AB71876001358AB /* libRCTPushNotification.a */; };
 		3578590A1B28D2CF00341EDB /* libRCTLinking.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 357859011B28D2C500341EDB /* libRCTLinking.a */; };
 		3DB99D0C1BA0340600302749 /* UIExplorerIntegrationTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 3DB99D0B1BA0340600302749 /* UIExplorerIntegrationTests.m */; };
+		422D0C161BC9687000EC9FC0 /* RNUserDefaultsIOS.h in Sources */ = {isa = PBXBuildFile; fileRef = 422D0C141BC9687000EC9FC0 /* RNUserDefaultsIOS.h */; };
+		422D0C171BC9687000EC9FC0 /* RNUserDefaultsIOS.m in Sources */ = {isa = PBXBuildFile; fileRef = 422D0C151BC9687000EC9FC0 /* RNUserDefaultsIOS.m */; };
 		834C36EC1AF8DED70019C93C /* libRCTSettings.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 834C36D21AF8DA610019C93C /* libRCTSettings.a */; };
 		83636F8F1B53F22C009F943E /* RCTUIManagerScenarioTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 83636F8E1B53F22C009F943E /* RCTUIManagerScenarioTests.m */; };
 		8385CEF51B873B5C00C6273E /* RCTImageLoaderTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 8385CEF41B873B5C00C6273E /* RCTImageLoaderTests.m */; };
@@ -223,6 +225,8 @@
 		14E0EEC81AB118F7000DECC3 /* RCTActionSheet.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTActionSheet.xcodeproj; path = ../../Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj; sourceTree = "<group>"; };
 		357858F81B28D2C400341EDB /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = ../../Libraries/LinkingIOS/RCTLinking.xcodeproj; sourceTree = "<group>"; };
 		3DB99D0B1BA0340600302749 /* UIExplorerIntegrationTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = UIExplorerIntegrationTests.m; sourceTree = "<group>"; };
+		422D0C141BC9687000EC9FC0 /* RNUserDefaultsIOS.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; name = RNUserDefaultsIOS.h; path = UIExplorer/RNUserDefaultsIOS.h; sourceTree = "<group>"; };
+		422D0C151BC9687000EC9FC0 /* RNUserDefaultsIOS.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; name = RNUserDefaultsIOS.m; path = UIExplorer/RNUserDefaultsIOS.m; sourceTree = "<group>"; };
 		58005BE41ABA80530062E044 /* RCTTest.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTTest.xcodeproj; path = ../../Libraries/RCTTest/RCTTest.xcodeproj; sourceTree = "<group>"; };
 		83636F8E1B53F22C009F943E /* RCTUIManagerScenarioTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTUIManagerScenarioTests.m; sourceTree = "<group>"; };
 		8385CEF41B873B5C00C6273E /* RCTImageLoaderTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTImageLoaderTests.m; sourceTree = "<group>"; };
@@ -363,6 +367,8 @@
 		13B07FAE1A68108700A75B9A /* UIExplorer */ = {
 			isa = PBXGroup;
 			children = (
+				422D0C141BC9687000EC9FC0 /* RNUserDefaultsIOS.h */,
+				422D0C151BC9687000EC9FC0 /* RNUserDefaultsIOS.m */,
 				13B07FAF1A68108700A75B9A /* AppDelegate.h */,
 				13B07FB01A68108700A75B9A /* AppDelegate.m */,
 				13B07FB51A68108700A75B9A /* Images.xcassets */,
@@ -850,6 +856,8 @@
 			isa = PBXSourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				422D0C161BC9687000EC9FC0 /* RNUserDefaultsIOS.h in Sources */,
+				422D0C171BC9687000EC9FC0 /* RNUserDefaultsIOS.m in Sources */,
 				13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */,
 				13B07FC11A68108700A75B9A /* main.m in Sources */,
 			);

Examples/UIExplorer/UIExplorer/AppDelegate.m

@@ -71,13 +71,11 @@ - (NSURL *)sourceURLForBridge:(__unused RCTBridge *)bridge
      * then add the `main.jsbundle` file to your project and uncomment this line:
      */
 
-  //  sourceURL = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+    #if RUNNING_ON_CI
+       sourceURL = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+    #endif
 
-  #if RUNNING_ON_CI
-     sourceURL = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
-  #endif
-
-  return sourceURL;
+    return sourceURL;
 }
 
 - (void)loadSourceForBridge:(RCTBridge *)bridge

Examples/UIExplorer/UIExplorer/Info.plist

@@ -18,10 +18,28 @@
 	<string>1.0</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
+	<key>CFBundleURLTypes</key>
+	<array>
+		<dict>
+			<key>CFBundleTypeRole</key>
+			<string>Viewer</string>
+			<key>CFBundleURLName</key>
+			<string>UIExplorer</string>
+			<key>CFBundleURLSchemes</key>
+			<array>
+				<string>uiexplorer</string>
+			</array>
+		</dict>
+	</array>
 	<key>CFBundleVersion</key>
 	<string>1</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
+	<key>NSAppTransportSecurity</key>
+	<dict>
+		<key>NSAllowsArbitraryLoads</key>
+		<true/>
+	</dict>
 	<key>NSLocationWhenInUseUsageDescription</key>
 	<string>You need to add NSLocationWhenInUseUsageDescription key in Info.plist to enable geolocation, otherwise it is going to *fail silently*!</string>
 	<key>UILaunchStoryboardName</key>
@@ -38,11 +56,5 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
-	<key>NSAppTransportSecurity</key>
-  <dict>
-    <!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/-->
-    <key>NSAllowsArbitraryLoads</key>
-    <true/>
-  </dict>
 </dict>
 </plist>

Examples/UIExplorer/UIExplorer/RNUserDefaultsIOS.h

@@ -0,0 +1,10 @@
+//
+// Extracted from https://github.com/dsibiski/react-native-userdefaults-ios
+//
+
+#import <Foundation/Foundation.h>
+#import "RCTBridgeModule.h"
+
+@interface RNUserDefaultsIOS : NSObject <RCTBridgeModule>
+
+@end

Examples/UIExplorer/UIExplorer/RNUserDefaultsIOS.m

@@ -0,0 +1,21 @@
+//
+// Extracted from https://github.com/dsibiski/react-native-userdefaults-ios
+//
+
+#import "RNUserDefaultsIOS.h"
+
+@implementation RNUserDefaultsIOS
+
+RCT_EXPORT_MODULE()
+
+RCT_EXPORT_METHOD(stringForKey:(NSString *)key callback:(RCTResponseSenderBlock)callback) {
+    id response = [[NSUserDefaults standardUserDefaults] stringForKey:key];
+
+    if (response) {
+        callback(@[[NSNull null], response]);
+    } else {
+        callback(@[[NSNull null], [NSNull null]]);
+    }
+}
+
+@end

Examples/UIExplorer/UIExplorerApp.ios.js

@@ -28,7 +28,7 @@ var UIExplorerApp = React.createClass({
 
   getInitialState: function() {
     return {
-      openExternalExample: (null: ?React.Component),
+      openExternalExample: (null: ?React.Component)
     };
   },
 

Examples/UIExplorer/UIExplorerList.ios.js

@@ -21,6 +21,8 @@ var {
   Settings,
   SnapshotViewIOS,
   StyleSheet,
+  NativeModules,
+  LinkingIOS
 } = React;
 
 import type { NavigationContext } from 'NavigationContext';
@@ -106,11 +108,32 @@ type Props = {
 class UIExplorerList extends React.Component {
   props: Props;
 
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      route: null
+    };
+  }
+
+  componentWillMount() {
+    LinkingIOS.addEventListener('url', function(e) {
+      var url = e.url.replace('uiexplorer://', '').split('?');
+      var example = url[1];
+      var component = COMPONENTS.concat(APIS).find((component) => component.title === example);
+      this._openExample(component);
+    });
+
+    NativeModules.RNUserDefaultsIOS.stringForKey('route', (error, string) => {
+     this.setState({route: string});
+    });
+  }
+
   render() {
     return (
       <UIExplorerListBase
         components={COMPONENTS}
         apis={APIS}
+        route={this.state.route}
         searchText={Settings.get('searchText')}
         renderAdditionalView={this.renderAdditionalView.bind(this)}
         search={this.search.bind(this)}

Examples/UIExplorer/UIExplorerListBase.js

@@ -48,6 +48,16 @@ class UIExplorerListBase extends React.Component {
     this.search(this.state.searchText);
   }
 
+  componentDidUpdate() {
+    if (this.props.route !== null) {
+      var route = decodeURI(this.props.route);
+      var component = this.props.components.concat(this.props.apis).find((component) => component.title === route);
+      if (component) {
+        setTimeout(() => this.onPressRow(component), 80);
+      }
+    }
+  }
+
   render() {
     var topView = this.props.renderAdditionalView &&
       this.props.renderAdditionalView(this.renderRow.bind(this), this.renderTextInput.bind(this));

website/core/Site.js

@@ -51,7 +51,7 @@ var Site = React.createClass({
             {this.props.children}
 
             <footer className="wrap">
-              <div className="right">© 2015 Facebook Inc.</div>
+              <div className="center">© 2015 Facebook Inc.</div>
             </footer>
           </div>
 
@@ -68,6 +68,7 @@ var Site = React.createClass({
             ){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
             fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
           `}} />
+          <script src="/react-native/js/scripts.js" />
         </body>
       </html>
     );

website/layout/AutodocsLayout.js

@@ -451,10 +451,55 @@ var Autodocs = React.createClass({
               {metadata.next && <a className="docs-next" href={metadata.next + '.html#content'}>Next &rarr;</a>}
             </div>
           </div>
+
+          <EmbeddedSimulator shouldRender={metadata.runnable} metadata={metadata} />
+
         </section>
       </Site>
     );
   }
 });
 
+var EmbeddedSimulator = React.createClass({
+  render: function() {
+    if (!this.props.shouldRender) {
+      return null;
+    }
+
+    var metadata = this.props.metadata;
+
+    return (
+      <div className="column-left">
+        <p><strong>Run this example</strong></p>
+        <div className="modal-button-open">
+          <img src="/react-native/img/alertIOS.png" />
+        </div>
+        <Modal />
+      </div>
+    );
+  }
+});
+
+var Modal = React.createClass({
+  render: function() {
+    var appParams = {route: 'AlertIOS'};
+    var encodedParams = encodeURIComponent(JSON.stringify(appParams));
+    var url = `https://appetize.io/embed/bypdk4jnjra5uwyj2kzd2aenv4?device=iphone5s&scale=70&autoplay=false&orientation=portrait&deviceColor=white&params=${encodedParams}`;
+
+    return (
+      <div>
+        <div className="modal">
+          <div className="modal-content">
+            <button className="modal-button-close">&times;</button>
+            <div className="center">
+              <iframe className="simulator" src={url} width="274" height="550" frameborder="0" scrolling="no"></iframe>
+            </div>
+          </div>
+        </div>
+        <div className="modal-backdrop" />
+      </div>
+    );
+  }
+});
+
 module.exports = Autodocs;

website/server/generate.js

@@ -22,7 +22,7 @@ server.noconvert = true;
 // requests.
 var queue = Promise.resolve();
 
-glob('src/**/*.*', function(er, files) {
+glob('src/**/*.*', { ignore: 'src/react-native/js/**/*' }, function(er, files) {
   files.forEach(function(file) {
     var targetFile = file.replace(/^src/, 'build');