Add documentation URL in examples (#164)

* Add documentation URL
MLH-Fellowship · Jul 29, 2020 · 81d0199 · 81d0199
1 parent 6a58b86
commit 81d0199
Show file tree

Hide file tree

Showing 32 changed files with 62 additions and 11 deletions.
diff --git a/packages/RNTester/js/components/ExamplePage.js b/packages/RNTester/js/components/ExamplePage.js
@@ -12,13 +12,16 @@
 
 import * as React from 'react';
 import {
+  Alert,
   ScrollView,
   StyleSheet,
   View,
   Text,
   Dimensions,
   Image,
+  TouchableOpacity,
 } from 'react-native';
+import openURLInBrowser from 'react-native/Libraries/Core/Devtools/openURLInBrowser';
 
 import HeadingText from './HeadingText';
 import Background from './Background';
@@ -29,6 +32,7 @@ type Props = $ReadOnly<{|
   description?: ?string,
   ios?: ?boolean,
   android?: ?boolean,
+  documentationURL?: ?string,
 |}>;
 
 const ScreenHeight = Dimensions.get('window').height;
@@ -39,24 +43,33 @@ export default function ExamplePage(props: Props): React.Node {
 
   const description = props.description ?? '';
   const androidImage = props.android ? (
-    <Image
-      style={{height: 35, width: 30, margin: 2}}
-      source={imagePaths.android}
-    />
+    <Image style={styles.platformIcon} source={imagePaths.android} />
   ) : null;
 
   const appleImage = props.ios ? (
-    <Image style={{height: 35, width: 30, margin: 2}} source={imagePaths.ios} />
+    <Image style={styles.platformIcon} source={imagePaths.ios} />
   ) : null;
 
-  const docsImage = <Image source={imagePaths.docs} />;
+  const DoucumentationURL = ({url}) => (
+    <View>
+      <TouchableOpacity
+        onPress={() => {
+          if (!url) {
+            return Alert.alert('Error!', 'Documentation URL is not available.');
+          }
+          openURLInBrowser(url);
+        }}>
+        <Image source={imagePaths.docs} />
+      </TouchableOpacity>
+    </View>
+  );
 
   return (
     <React.Fragment>
       <View style={styles.titleView}>
         <View style={styles.titleContainer}>
           {title}
-          {docsImage}
+          <DoucumentationURL url={props.documentationURL} />
         </View>
         <View style={styles.iconContainer}>
           {appleImage}
@@ -119,6 +132,11 @@ const styles = StyleSheet.create({
     right: 0,
     paddingBottom: 10,
   },
+  platformIcon: {
+    height: 35,
+    width: 30,
+    margin: 2,
+  },
   description: {
     paddingHorizontal: 20,
   },

diff --git a/packages/RNTester/js/components/RNTesterExampleContainer.js b/packages/RNTester/js/components/RNTesterExampleContainer.js
@@ -10,7 +10,7 @@
 'use strict';
 
 const React = require('react');
-const {Platform, Text} = require('react-native');
+const {Platform} = require('react-native');
 const RNTesterBlock = require('./RNTesterBlock');
 const RNTesterExampleFilter = require('./RNTesterExampleFilter');
 
@@ -48,7 +48,8 @@ class RNTesterExampleContainer extends React.Component {
           title={module.title}
           description={module.description}
           android={module.android}
-          ios={module.ios}>
+          ios={module.ios}
+          documentationURL={module.documentationURL}>
           {module.examples[0].render()}
         </ExamplePage>
       );
@@ -59,7 +60,8 @@ class RNTesterExampleContainer extends React.Component {
           title={module.title}
           description={module.description}
           android={module.android}
-          ios={module.ios}>
+          ios={module.ios}
+          documentationURL={module.documentationURL}>
           {module.examples[0].render()}
         </ExamplePage>
       );
@@ -80,7 +82,8 @@ class RNTesterExampleContainer extends React.Component {
         title={module.title}
         description={module.description}
         android={module.android}
-        ios={module.ios}>
+        ios={module.ios}
+        documentationURL={module.documentationURL}>
         <RNTesterExampleFilter
           testID="example_search"
           sections={sections}

diff --git a/packages/RNTester/js/examples/Accessibility/AccessibilityExample.js b/packages/RNTester/js/examples/Accessibility/AccessibilityExample.js
@@ -752,6 +752,7 @@ class AnnounceForAccessibility extends React.Component<{}> {
 
 exports.title = 'Accessibility';
 exports.description = 'Examples of using Accessibility APIs.';
+exports.documentationURL = 'https://reactnative.dev/docs/accessibilityinfo';
 exports.examples = [
   {
     title: 'Accessibility elements',

diff --git a/packages/RNTester/js/examples/ActivityIndicator/ActivityIndicatorExample.js b/packages/RNTester/js/examples/ActivityIndicator/ActivityIndicatorExample.js
@@ -115,6 +115,7 @@ exports.displayName = (undefined: ?string);
 exports.framework = 'React';
 exports.title = '<ActivityIndicator>';
 exports.description = 'Animated loading indicators.';
+exports.documentationURL = 'https://reactnative.dev/docs/activityindicator';
 
 exports.examples = [
   {

diff --git a/packages/RNTester/js/examples/Animated/AnimatedExample.js b/packages/RNTester/js/examples/Animated/AnimatedExample.js
@@ -36,6 +36,7 @@ exports.title = 'Animated - Examples';
 exports.description = ('Animated provides a powerful ' +
   'and easy-to-use API for building modern, ' +
   'interactive user experiences.': string);
+exports.documentationURL = 'https://reactnative.dev/docs/animated';
 
 exports.examples = [
   {

diff --git a/packages/RNTester/js/examples/AppState/AppStateExample.js b/packages/RNTester/js/examples/AppState/AppStateExample.js
@@ -72,6 +72,7 @@ class AppStateSubscription extends React.Component<
 
 exports.title = 'AppState';
 exports.description = 'app background status';
+exports.documentationURL = 'https://reactnative.dev/docs/appstate';
 exports.examples = [
   {
     title: 'AppState.currentState',

diff --git a/packages/RNTester/js/examples/Appearance/AppearanceExample.js b/packages/RNTester/js/examples/Appearance/AppearanceExample.js
@@ -78,6 +78,7 @@ const ThemedText = props => (
 
 exports.title = 'Appearance';
 exports.description = 'Light and dark user interface examples.';
+exports.documentationURL = 'https://reactnative.dev/docs/appearance';
 exports.examples = [
   {
     title: 'useColorScheme hook',

diff --git a/packages/RNTester/js/examples/Button/ButtonExample.js b/packages/RNTester/js/examples/Button/ButtonExample.js
@@ -22,6 +22,7 @@ exports.displayName = 'ButtonExample';
 exports.framework = 'React';
 exports.title = '<Button>';
 exports.description = 'Simple React Native button component.';
+exports.documentationURL = 'https://reactnative.dev/docs/button';
 
 exports.examples = [
   {

diff --git a/packages/RNTester/js/examples/DevSettings/DevSettingsExample.js b/packages/RNTester/js/examples/DevSettings/DevSettingsExample.js
@@ -15,6 +15,7 @@ import {Alert, Button, DevSettings} from 'react-native';
 
 exports.title = 'DevSettings';
 exports.description = 'Customize the development settings';
+exports.documentationURL = 'https://reactnative.dev/docs/devsettings';
 exports.examples = [
   {
     title: 'Add dev menu item',

diff --git a/packages/RNTester/js/examples/Dimensions/DimensionsExample.js b/packages/RNTester/js/examples/Dimensions/DimensionsExample.js
@@ -42,6 +42,7 @@ class DimensionsSubscription extends React.Component<
 
 exports.title = 'Dimensions';
 exports.description = 'Dimensions of the viewport';
+exports.documentationURL = 'https://reactnative.dev/docs/dimensions';
 exports.examples = [
   {
     title: 'useWindowDimensions hook',

diff --git a/packages/RNTester/js/examples/FlatList/FlatListExample.js b/packages/RNTester/js/examples/FlatList/FlatListExample.js
@@ -275,6 +275,7 @@ const styles = StyleSheet.create({
 exports.title = '<FlatList>';
 exports.description = 'Performant, scrollable list of data.';
 exports.simpleExampleContainer = true;
+exports.documentationURL = 'https://reactnative.dev/docs/flatlist';
 exports.examples = [
   {
     title: 'Simple list of items',

diff --git a/packages/RNTester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js b/packages/RNTester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js
@@ -110,6 +110,7 @@ const styles = StyleSheet.create({
 exports.title = '<KeyboardAvoidingView>';
 exports.description =
   'Base component for views that automatically adjust their height or position to move out of the way of the keyboard.';
+exports.documentationURL = 'https://reactnative.dev/docs/keyboardavoidingview';
 exports.examples = [
   {
     title: 'Simple keyboard view',

diff --git a/packages/RNTester/js/examples/Layout/LayoutAnimationExample.js b/packages/RNTester/js/examples/Layout/LayoutAnimationExample.js
@@ -346,6 +346,7 @@ const styles = StyleSheet.create({
 
 exports.title = 'Layout Animation';
 exports.description = 'Layout animation';
+exports.documentationURL = 'https://reactnative.dev/docs/layoutanimation';
 exports.examples = [
   {
     title: 'Add and remove views',

diff --git a/packages/RNTester/js/examples/Linking/LinkingExample.js b/packages/RNTester/js/examples/Linking/LinkingExample.js
@@ -118,6 +118,7 @@ const styles = StyleSheet.create({
 
 exports.title = 'Linking';
 exports.description = 'Shows how to use Linking to open URLs.';
+exports.documentationURL = 'https://reactnative.dev/docs/linking';
 exports.examples = [
   {
     title: 'Simple list of items',

diff --git a/packages/RNTester/js/examples/Modal/ModalExample.js b/packages/RNTester/js/examples/Modal/ModalExample.js
@@ -214,6 +214,7 @@ exports.displayName = (undefined: ?string);
 exports.framework = 'React';
 exports.title = '<Modal>';
 exports.description = 'Component for presenting modal views.';
+exports.documentationURL = 'https://reactnative.dev/docs/modal';
 
 exports.examples = [
   {

diff --git a/packages/RNTester/js/examples/PanResponder/PanResponderExample.js b/packages/RNTester/js/examples/PanResponder/PanResponderExample.js
@@ -137,6 +137,7 @@ const styles = StyleSheet.create({
 exports.title = 'PanResponder Sample';
 exports.description =
   'Shows the Use of PanResponder to provide basic gesture handling';
+exports.documentationURL = 'https://reactnative.dev/docs/panresponder';
 exports.simpleExampleContainer = true;
 exports.examples = [
   {

diff --git a/packages/RNTester/js/examples/PlatformColor/PlatformColorExample.js b/packages/RNTester/js/examples/PlatformColor/PlatformColorExample.js
@@ -296,6 +296,7 @@ const styles = StyleSheet.create({
 exports.title = 'PlatformColor';
 exports.description =
   'Examples that show how PlatformColors may be used in an app.';
+exports.documentationURL = 'https://reactnative.dev/docs/platformcolor';
 exports.examples = [
   {
     title: 'Platform Colors',

diff --git a/packages/RNTester/js/examples/Pressable/PressableExample.js b/packages/RNTester/js/examples/Pressable/PressableExample.js
@@ -317,6 +317,7 @@ const styles = StyleSheet.create({
 exports.displayName = (undefined: ?string);
 exports.description = 'Component for making views pressable.';
 exports.title = '<Pressable>';
+exports.documentationURL = 'https://reactnative.dev/docs/pressable';
 exports.examples = [
   {
     title: 'Change content based on Press',

diff --git a/packages/RNTester/js/examples/RefreshControl/RefreshControlExample.js b/packages/RNTester/js/examples/RefreshControl/RefreshControlExample.js
@@ -116,6 +116,7 @@ class RefreshControlExample extends React.Component {
 
 exports.title = '<RefreshControl>';
 exports.description = 'Adds pull-to-refresh support to a scrollview.';
+exports.documentationURL = 'https://reactnative.dev/docs/refreshcontrol';
 exports.simpleExampleContainer = true;
 exports.examples = [
   {

diff --git a/packages/RNTester/js/examples/SafeAreaView/SafeAreaViewExample.js b/packages/RNTester/js/examples/SafeAreaView/SafeAreaViewExample.js
@@ -119,6 +119,7 @@ exports.framework = 'React';
 exports.title = '<SafeAreaView>';
 exports.description =
   'SafeAreaView automatically applies paddings reflect the portion of the view that is not covered by other (special) ancestor views.';
+exports.documentationURL = 'https://reactnative.dev/docs/safeareaview';
 exports.examples = [
   {
     title: '<SafeAreaView> Example',

diff --git a/packages/RNTester/js/examples/ScrollView/ScrollViewExample.js b/packages/RNTester/js/examples/ScrollView/ScrollViewExample.js
@@ -29,6 +29,7 @@ exports.displayName = 'ScrollViewExample';
 exports.title = '<ScrollView>';
 exports.description =
   'Component that enables scrolling through child components';
+exports.documentationURL = 'https://reactnative.dev/docs/scrollview';
 exports.examples = [
   {
     title: '<ScrollView>\n',

diff --git a/packages/RNTester/js/examples/SectionList/SectionListExample.js b/packages/RNTester/js/examples/SectionList/SectionListExample.js
@@ -292,6 +292,7 @@ const styles = StyleSheet.create({
 
 exports.title = '<SectionList>';
 exports.description = 'Performant, scrollable list of data.';
+exports.documentationURL = 'https://reactnative.dev/docs/sectionlist';
 exports.examples = [
   {
     title: 'Simple scrollable list',

diff --git a/packages/RNTester/js/examples/Share/ShareExample.js b/packages/RNTester/js/examples/Share/ShareExample.js
@@ -114,6 +114,7 @@ const styles = StyleSheet.create({
 exports.framework = 'React';
 exports.title = 'Share';
 exports.description = 'Share data with other Apps.';
+exports.documentationURL = 'https://reactnative.dev/docs/share';
 exports.examples = [
   {
     title: 'Share Text Content',

diff --git a/packages/RNTester/js/examples/StatusBar/StatusBarExample.js b/packages/RNTester/js/examples/StatusBar/StatusBarExample.js
@@ -434,6 +434,7 @@ class ModalExample extends React.Component<{...}, $FlowFixMeState> {
 exports.framework = 'React';
 exports.title = '<StatusBar>';
 exports.description = 'Component for controlling the status bar';
+exports.documentationURL = 'https://reactnative.dev/docs/statusbar';
 exports.examples = [
   {
     title: 'StatusBar hidden',

diff --git a/packages/RNTester/js/examples/Switch/SwitchExample.js b/packages/RNTester/js/examples/Switch/SwitchExample.js
@@ -260,6 +260,7 @@ const ExampleSwitchBackgroundColor = () => {
 exports.title = '<Switch>';
 exports.displayName = 'SwitchExample';
 exports.description = 'Native boolean input';
+exports.documentationURL = 'https://reactnative.dev/docs/switch';
 exports.examples = [
   {
     title: 'Basic Switch',

diff --git a/packages/RNTester/js/examples/Text/TextExample.android.js b/packages/RNTester/js/examples/Text/TextExample.android.js
@@ -857,6 +857,7 @@ const styles = StyleSheet.create({
 });
 exports.title = '<Text>';
 exports.description = 'Base component for rendering styled text.';
+exports.documentationURL = 'https://reactnative.dev/docs/text';
 exports.examples = [
   {
     title: 'Basic text',

diff --git a/packages/RNTester/js/examples/Text/TextExample.ios.js b/packages/RNTester/js/examples/Text/TextExample.ios.js
@@ -481,6 +481,7 @@ class TextWithCapBaseBox extends React.Component<*, *> {
 
 exports.title = '<Text>';
 exports.description = 'Base component for rendering styled text.';
+exports.documentationURL = 'https://reactnative.dev/docs/text';
 exports.displayName = 'TextExample';
 exports.examples = [
   {

diff --git a/packages/RNTester/js/examples/TextInput/TextInputExample.js b/packages/RNTester/js/examples/TextInput/TextInputExample.js
@@ -759,6 +759,7 @@ const EventHandlerOnTextInput = () => {
 exports.title = '<TextInput>';
 exports.description =
   'A foundational component for inputting text into the app via a keyboard.';
+exports.documentationURL = 'https://reactnative.dev/docs/textinput';
 exports.examples = ([
   {
     title: 'TextInput with autoFocus={true}',

diff --git a/packages/RNTester/js/examples/Touchable/TouchableExample.js b/packages/RNTester/js/examples/Touchable/TouchableExample.js
@@ -553,6 +553,7 @@ const styles = StyleSheet.create({
 
 exports.displayName = (undefined: ?string);
 exports.description = 'Touchable and onPress examples.';
+exports.documentationURL = 'https://reactnative.dev/docs/touchablehighlight';
 exports.title = '<Touchable*> and onPress';
 exports.examples = [
   {

diff --git a/packages/RNTester/js/examples/Transform/TransformExample.js b/packages/RNTester/js/examples/Transform/TransformExample.js
@@ -238,6 +238,7 @@ const styles = StyleSheet.create({
 
 exports.title = 'Transforms';
 exports.description = 'View transforms';
+exports.documentationURL = 'https://reactnative.dev/docs/transforms';
 exports.examples = [
   {
     title: 'Perspective, Rotate, Animation',

diff --git a/packages/RNTester/js/examples/Vibration/VibrationExample.js b/packages/RNTester/js/examples/Vibration/VibrationExample.js
@@ -24,6 +24,7 @@ const {
 exports.framework = 'React';
 exports.title = 'Vibration';
 exports.description = 'Vibration API';
+exports.documentationURL = 'https://reactnative.dev/docs/vibration';
 
 let pattern, patternLiteral, patternDescription;
 if (Platform.OS === 'android') {

diff --git a/packages/RNTester/js/examples/View/ViewExample.js b/packages/RNTester/js/examples/View/ViewExample.js
@@ -22,6 +22,7 @@ const {
 exports.title = '<View>';
 exports.description = ('Basic building block of all UI, examples that ' +
   'demonstrate some of the many styles available.': string);
+exports.documentationURL = 'https://reactnative.dev/docs/view';
 
 exports.displayName = 'ViewExample';
 exports.examples = [