✅ (type) Add typechecking on example project

Syncs up @types modules between root and example folders

Author: tpucci

example/package.json

@@ -4,7 +4,12 @@
   "private": true,
   "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start",
-    "test": "jest"
+    "test:lint": "cd .. && yarn tslint example/src/**/*.ts{,x} && cd example",
+    "test:unit": "jest",
+    "test:unit:ci": "jest --runInBand",
+    "test:type": "tsc --noEmit",
+    "test": "yarn test:lint && yarn test:unit && yarn test:type",
+    "test:ci": "yarn test:lint && yarn test:unit:ci && yarn test:type"
   },
   "dependencies": {
     "mobx": "^5.9.4",
@@ -19,7 +24,6 @@
     "@types/jest": "^24.0.11",
     "@types/react-native": "^0.57.42",
     "@types/react-test-renderer": "^16.8.1",
-    "@types/react": "^16.8.11",
     "babel-jest": "^24.7.0",
     "babel-plugin-module-resolver": "^3.2.0",
     "jest": "^24.7.0",

example/src/App.tsx

@@ -2,8 +2,8 @@ import React, { Component } from 'react';
 import { View } from 'react-native';
 import { NavigationProvider } from 'react-gondola';
 
-interface Props {}
-export default class App extends Component<Props> {
+interface IProps {}
+export default class App extends Component<IProps> {
   render() {
     return (
       <NavigationProvider>

example/src/canals/SignIn/FirstName.tsx

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
-import { Platform, StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 
-interface Props {}
-export class FirstName extends Component<Props> {
+interface IProps {}
+export class FirstName extends Component<IProps> {
   render() {
     return (
       <View style={styles.container}>
@@ -14,9 +14,9 @@ export class FirstName extends Component<Props> {
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
-    justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '#FFAAAA',
+    flex: 1,
+    justifyContent: 'center',
   },
 });

example/src/canals/SignIn/LastName.tsx

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
-import { Platform, StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 
-interface Props {}
-export class LastName extends Component<Props> {
+interface IProps {}
+export class LastName extends Component<IProps> {
   render() {
     return (
       <View style={styles.container}>
@@ -14,9 +14,9 @@ export class LastName extends Component<Props> {
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
-    justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '#FF9999',
+    flex: 1,
+    justifyContent: 'center',
   },
 });

example/src/canals/SignIn/__tests__/FirstName.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import TestRenderer from 'react-test-renderer';
+
+import { FirstName } from '../FirstName';
+
+describe('FirstName', () => {
+  it('renders correctly', () => {
+    const testRenderer = TestRenderer.create(<FirstName />);
+    expect(testRenderer.toJSON()).toMatchSnapshot();
+  });
+});

example/src/canals/SignIn/__tests__/LastName.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import TestRenderer from 'react-test-renderer';
+
+import { LastName } from '../LastName';
+
+describe('LastName', () => {
+  it('renders correctly', () => {
+    const testRenderer = TestRenderer.create(<LastName />);
+    expect(testRenderer.toJSON()).toMatchSnapshot();
+  });
+});

example/src/canals/SignIn/__tests__/__snapshots__/FirstName.test.tsx.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FirstName renders correctly 1`] = `
+<View
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#FFAAAA",
+      "flex": 1,
+      "justifyContent": "center",
+    }
+  }
+>
+  <Text>
+    FirstName
+  </Text>
+</View>
+`;

example/src/canals/SignIn/__tests__/__snapshots__/LastName.test.tsx.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LastName renders correctly 1`] = `
+<View
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#FF9999",
+      "flex": 1,
+      "justifyContent": "center",
+    }
+  }
+>
+  <Text>
+    LastName
+  </Text>
+</View>
+`;

example/src/canals/SignIn/index.ts

@@ -1,4 +1,5 @@
 import { FirstName } from './FirstName';
 import { LastName } from './LastName';
 
+// @ts-ignore
 export const SignIn = canal(FirstName, LastName);

example/tsconfig.json

@@ -1,24 +1,43 @@
 {
   "compilerOptions": {
-    "allowJs": true,
+    "target": "esnext",
     "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "isolatedModules": true,
+    "outDir": "dist",
+    "module": "commonjs",
     "jsx": "react",
-    "lib": ["es6"],
-    "moduleResolution": "node",
-    "noEmit": true,
     "strict": true,
-    "target": "esnext",
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "strictBindCallApply": true,
+    "strictPropertyInitialization": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
     "baseUrl": "./src",
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "noEmit": true,
+    "allowJs": true,
+    "lib": ["es6"],
+    "types": ["react-native"],
+    "isolatedModules": true,
+    "moduleResolution": "node",
     "paths": {
       "react-gondola": ["../../src"]
     }
   },
+  "include": ["./src"],
   "exclude": [
+    "../node_modules",
     "node_modules",
     "babel.config.js",
     "metro.config.js",
-    "jest.config.js"
+    "jest.config.js",
+    "**/__tests__/*"
   ]
 }