refactor: restructure example code

Author: ethanneff

src/commons/Config.tsx

@@ -1,4 +1,4 @@
-interface IConfig {
+interface Config {
   app: {
     name: string;
   };
@@ -12,7 +12,7 @@ interface IConfig {
   };
 }
 
-const Config: IConfig = {
+export const Config: Config = {
   app: {
     name: "example"
   },
@@ -25,5 +25,3 @@ const Config: IConfig = {
     root: "root"
   }
 };
-
-export default Config;

src/commons/index.tsx

@@ -0,0 +1 @@
+export * from "./Config";

src/components/Instructions/__tests__/__snapshots__/index.tsx.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Instructions renders correctly with defaults 1`] = `
+Array [
+  <Text
+    style={
+      Object {
+        "fontSize": 20,
+        "margin": 10,
+        "textAlign": "center",
+      }
+    }
+  >
+    Welcome to React Native!
+  </Text>,
+  <Text
+    style={
+      Object {
+        "color": "#333333",
+        "marginBottom": 5,
+        "textAlign": "center",
+      }
+    }
+  >
+    To get started, edit ./src/containers/App/index.tsx
+  </Text>,
+  <Text
+    style={
+      Object {
+        "color": "#333333",
+        "marginBottom": 5,
+        "textAlign": "center",
+      }
+    }
+  >
+    123
+  </Text>,
+]
+`;

src/components/Instructions/__tests__/index.tsx

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { create } from "react-test-renderer";
+import { Instructions } from "..";
+
+describe("Instructions", () => {
+  it("renders correctly with defaults", () => {
+    const button = create(<Instructions instructions="123" />).toJSON();
+    expect(button).toMatchSnapshot();
+  });
+});

src/components/Instructions/index.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { StyleSheet, Text } from "react-native";
+
+const styles = StyleSheet.create({
+  welcome: {
+    fontSize: 20,
+    textAlign: "center",
+    margin: 10
+  },
+  instructions: {
+    color: "#333333",
+    textAlign: "center",
+    marginBottom: 5
+  }
+});
+
+interface Props {
+  instructions: string;
+}
+
+export const Instructions = ({ instructions }: Props) => (
+  <>
+    <Text style={styles.welcome}>Welcome to React Native!</Text>
+    <Text style={styles.instructions}>
+      To get started, edit ./src/containers/App/index.tsx
+    </Text>
+    <Text style={styles.instructions}>{instructions}</Text>
+  </>
+);

src/components/Hello/__tests__/__snapshots__/index.tsx.snap renamed to src/components/Welcome/__tests__/__snapshots__/index.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Hello renders correctly with defaults 1`] = `
+exports[`Welcome renders correctly with defaults 1`] = `
 <View
   style={
     Object {
@@ -37,13 +37,9 @@ exports[`Hello renders correctly with defaults 1`] = `
       }
     >
       <View
-        accessibilityComponentType="button"
         accessibilityLabel="decrement"
-        accessibilityTraits={
-          Array [
-            "button",
-          ]
-        }
+        accessibilityRole="button"
+        accessibilityStates={Array []}
         accessible={true}
         isTVSelectable={true}
         onResponderGrant={[Function]}
@@ -91,13 +87,9 @@ exports[`Hello renders correctly with defaults 1`] = `
       }
     >
       <View
-        accessibilityComponentType="button"
         accessibilityLabel="increment"
-        accessibilityTraits={
-          Array [
-            "button",
-          ]
-        }
+        accessibilityRole="button"
+        accessibilityStates={Array []}
         accessible={true}
         isTVSelectable={true}
         onResponderGrant={[Function]}

src/components/Hello/__tests__/index.tsx renamed to src/components/Welcome/__tests__/index.tsx

@@ -1,39 +1,41 @@
 import * as React from "react";
 import { create } from "react-test-renderer";
-import Hello, { IState } from "../";
+import { State, Welcome } from "..";
 
-describe("Hello", () => {
+describe("Welcome", () => {
   it("renders correctly with defaults", () => {
-    const button = create(<Hello name="World" enthusiasmLevel={1} />).toJSON();
+    const button = create(
+      <Welcome name="World" enthusiasmLevel={1} />
+    ).toJSON();
     expect(button).toMatchSnapshot();
   });
 
   it("increments", () => {
     const button: any = create(
-      <Hello name="World" enthusiasmLevel={1} />
+      <Welcome name="World" enthusiasmLevel={1} />
     ).getInstance();
     button.onIncrement();
     button.onIncrement();
-    const state: IState = button.state;
+    const state: State = button.state;
     expect(state.enthusiasmLevel).toBe(3);
   });
 
   it("decrements", () => {
     const button: any = create(
-      <Hello name="World" enthusiasmLevel={4} />
+      <Welcome name="World" enthusiasmLevel={4} />
     ).getInstance();
     button.onDecrement();
     button.onDecrement();
-    const state: IState = button.state;
+    const state: State = button.state;
     expect(state.enthusiasmLevel).toBe(2);
   });
 
   it("decrements at zero", () => {
     const button: any = create(
-      <Hello name="World" enthusiasmLevel={0} />
+      <Welcome name="World" enthusiasmLevel={0} />
     ).getInstance();
     button.onDecrement();
-    const state: IState = button.state;
+    const state: State = button.state;
     expect(state.enthusiasmLevel).toBe(0);
   });
 });

src/components/Hello/index.tsx renamed to src/components/Welcome/index.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { Button, StyleSheet, Text, View } from "react-native";
 
-// styles
 const styles = StyleSheet.create({
   root: {
     alignItems: "center",
@@ -20,35 +19,23 @@ const styles = StyleSheet.create({
   }
 });
 
-export interface IProps {
+interface Props {
   name: string;
   enthusiasmLevel?: number;
 }
 
-export interface IState {
+export interface State {
   enthusiasmLevel: number;
 }
 
-class Hello extends React.Component<IProps, IState> {
-  constructor(props: IProps) {
+export class Welcome extends React.Component<Props, State> {
+  constructor(props: Props) {
     super(props);
     this.state = {
       enthusiasmLevel: props.enthusiasmLevel || 1
     };
   }
 
-  public onIncrement = () =>
-    this.setState({ enthusiasmLevel: this.state.enthusiasmLevel + 1 });
-
-  public onDecrement = () =>
-    this.setState({
-      enthusiasmLevel:
-        this.state.enthusiasmLevel - 1 > 0 ? this.state.enthusiasmLevel - 1 : 0
-    });
-
-  public getExclamationMarks = (numChars: number) =>
-    Array(numChars + 1).join("!");
-
   public render() {
     return (
       <View style={styles.root}>
@@ -78,6 +65,16 @@ class Hello extends React.Component<IProps, IState> {
       </View>
     );
   }
-}
 
-export default Hello;
+  private onIncrement = () =>
+    this.setState({ enthusiasmLevel: this.state.enthusiasmLevel + 1 });
+
+  private onDecrement = () =>
+    this.setState({
+      enthusiasmLevel:
+        this.state.enthusiasmLevel - 1 > 0 ? this.state.enthusiasmLevel - 1 : 0
+    });
+
+  private getExclamationMarks = (numChars: number) =>
+    Array(numChars + 1).join("!");
+}

src/components/index.tsx

@@ -0,0 +1,2 @@
+export * from "./Welcome";
+export * from "./Instructions";

src/containers/App/__tests__/__snapshots__/index.tsx.snap

@@ -81,13 +81,9 @@ Cmd+D or shake for dev menu
         }
       >
         <View
-          accessibilityComponentType="button"
           accessibilityLabel="decrement"
-          accessibilityTraits={
-            Array [
-              "button",
-            ]
-          }
+          accessibilityRole="button"
+          accessibilityStates={Array []}
           accessible={true}
           isTVSelectable={true}
           onResponderGrant={[Function]}
@@ -135,13 +131,9 @@ Cmd+D or shake for dev menu
         }
       >
         <View
-          accessibilityComponentType="button"
           accessibilityLabel="increment"
-          accessibilityTraits={
-            Array [
-              "button",
-            ]
-          }
+          accessibilityRole="button"
+          accessibilityStates={Array []}
           accessible={true}
           isTVSelectable={true}
           onResponderGrant={[Function]}