Display platform-specific examples

Summary:
Rebased https://github.com/facebook/react-native/pull/7048

Sending a new PR to check that tests pass.

After adding simulator examples, it appears that some don't show up, ex:
http://facebook.github.io/react-native/docs/text.html#content

This is due to the fact that these examples are split into two platform-specific files. For this reason, the example code isn't being shown. The examples are also missing for TextInput.

**Test plan**

`cd website; npm install; npm start`

![screen shot 2016-05-05 at 12 25 41 pm](https://cloud.githubusercontent.com/assets/346214/15042571/08ee77e8-12bd-11e6-98a6-967dc5fefa07.png)

![screen shot 2016-05-05 at 12 25 20 pm](https://cloud.githubusercontent.com/assets/346214/15042573/119778f4-12bd-11e6-8cdd-fbf217223d45.png)

![screen shot 2016-05-05 at 12 25 35 pm](https://cloud.githubusercontent.com/assets/346214/15042570/071ae992-12bd-11e6-9cf6-5aaba5e7fa17.png)
Closes https://github.com/facebook/react-native/pull/7406

Differential Revision: D3264567

Pulled By: mkonicek

fb-gh-sync-id: cfb73eaed56a7b5c6c84ce313e113393d152e9a1
fbshipit-source-id: cfb73eaed56a7b5c6c84ce313e113393d152e9a1

Examples/UIExplorer/UIExplorerList.android.js

@@ -40,8 +40,8 @@ var ComponentExamples: Array<UIExplorerExample> = [
     module: require('./ModalExample'),
   },
   {
-    key: 'PickerAndroidExample',
-    module: require('./PickerAndroidExample'),
+    key: 'PickerExample',
+    module: require('./PickerExample'),
   },
   {
     key: 'ProgressBarAndroidExample',

Examples/UIExplorer/UIExplorerList.ios.js

@@ -69,6 +69,10 @@ var ComponentExamples: Array<UIExplorerExample> = [
     key: 'NavigatorIOSExample',
     module: require('./NavigatorIOSExample'),
   },
+  {
+    key: 'PickerExample',
+    module: require('./PickerExample'),
+  },
   {
     key: 'PickerIOSExample',
     module: require('./PickerIOSExample'),
@@ -144,6 +148,10 @@ var APIExamples: Array<UIExplorerExample> = [
     key: 'AdSupportIOSExample',
     module: require('./AdSupportIOSExample'),
   },
+  {
+    key: 'AlertExample',
+    module: require('./AlertExample').AlertExample,
+  },
   {
     key: 'AlertIOSExample',
     module: require('./AlertIOSExample'),

website/layout/AutodocsLayout.js

@@ -544,25 +544,39 @@ var Autodocs = React.createClass({
     );
   },
 
-  renderExample: function(docs, metadata) {
-    if (!docs.example) {
+  renderExample: function(example, metadata) {
+    if (!example) {
       return;
     }
 
     return (
       <div>
         <HeaderWithGithub
-          title="Examples"
-          path={docs.example.path}
+          title={example.title || 'Examples'}
+          level={example.title ? 4 : 3}
+          path={example.path}
           metadata={metadata}
         />
         <Prism>
-          {docs.example.content.replace(/^[\s\S]*?\*\//, '').trim()}
+          {example.content.replace(/^[\s\S]*?\*\//, '').trim()}
         </Prism>
       </div>
     );
   },
 
+  renderExamples: function(docs, metadata) {
+    if (!docs.examples || !docs.examples.length) {
+      return;
+    }
+
+    return (
+      <div>
+        {(docs.examples.length > 1) ? <H level={3}>Examples</H> : null}
+        {docs.examples.map(example => this.renderExample(example, metadata))}
+      </div>
+    );
+  },
+
   render: function() {
     var metadata = this.props.metadata;
     var docs = JSON.parse(this.props.children);
@@ -583,7 +597,7 @@ var Autodocs = React.createClass({
             />
             {content}
             {this.renderFullDescription(docs)}
-            {this.renderExample(docs, metadata)}
+            {this.renderExamples(docs, metadata)}
             <div className="docs-prevnext">
               {metadata.previous && <a className="docs-prev" href={'docs/' + metadata.previous + '.html#content'}>&larr; Prev</a>}
               {metadata.next && <a className="docs-next" href={'docs/' + metadata.next + '.html#content'}>Next &rarr;</a>}

website/server/extractDocs.js

@@ -57,18 +57,48 @@ function getPlatformFromPath(filepath) {
   return CROSS_SUFFIX;
 }
 
-function getExample(componentName, componentPlatform) {
-  let exPath = '../Examples/UIExplorer/' + componentName + 'Example.js';
-  if (!fs.existsSync(exPath)) {
-    exPath = '../Examples/UIExplorer/' + componentName + 'Example.' + componentPlatform + '.js';
-    if (!fs.existsSync(exPath)) {
-      return;
-    }
+function getExamplePaths(componentName, componentPlatform) {
+  var componentExample = '../Examples/UIExplorer/' + componentName + 'Example.';
+  var pathsToCheck = [
+    componentExample + 'js',
+    componentExample + componentPlatform + '.js',
+  ];
+  if (componentPlatform === CROSS_SUFFIX) {
+    pathsToCheck.push(
+      componentExample + IOS_SUFFIX + '.js',
+      componentExample + ANDROID_SUFFIX + '.js'
+    );
   }
-  return {
-    path: exPath.replace(/^\.\.\//, ''),
-    content: fs.readFileSync(exPath).toString(),
-  };
+  var paths = [];
+  pathsToCheck.map((p) => {
+    if (fs.existsSync(p)) {
+      paths.push(p);
+    }
+  });
+  return paths;
+}
+
+function getExamples(componentName, componentPlatform) {
+  var paths = getExamplePaths(componentName, componentPlatform);
+  if (paths) {
+    var examples = [];
+    paths.map((p) => {
+      var platform = p.match(/Example\.(.*)\.js$/);
+      var title = '';
+      if ((componentPlatform === CROSS_SUFFIX) && (platform !== null)) {
+        title = platform[1].toUpperCase();
+      }
+      examples.push(
+        {
+          path: p.replace(/^\.\.\//, ''),
+          title: title,
+          content: fs.readFileSync(p).toString(),
+        }
+      );
+    });
+    return examples;
+  }
+  return;
 }
 
 // Add methods that should not appear in the components documentation.
@@ -98,14 +128,12 @@ function filterMethods(method) {
 // Determines whether a component should have a link to a runnable example
 
 function isRunnable(componentName, componentPlatform) {
-  let exPath = '../Examples/UIExplorer/' + componentName + 'Example.js';
-  if (!fs.existsSync(exPath)) {
-    exPath = '../Examples/UIExplorer/' + componentName + 'Example.' + componentPlatform + '.js';
-    if (!fs.existsSync(exPath)) {
-      return false;
-    }
+  var paths = getExamplePaths(componentName, componentPlatform);
+  if (paths && paths.length > 0) {
+    return true;
+  } else {
+    return false;
   }
-  return true;
 }
 
 // Hide a component from the sidebar by making it return false from
@@ -148,7 +176,7 @@ function componentsToMarkdown(type, json, filepath, idx, styles) {
   if (styles) {
     json.styles = styles;
   }
-  json.example = getExample(componentName, componentPlatform);
+  json.examples = getExamples(componentName, componentPlatform);
 
   if (json.methods) {
     json.methods = json.methods.filter(filterMethods);