Merge pull request #57 from tpucci/canal/state

Add createCanal declarative usage

Author: tpucci

.github/CODEOWNERS

@@ -6,3 +6,10 @@ example
 
 # Coverage
 coverage
+
+# VSCode
+.vscode
+
+# Jest
+__mocks__
+jest

.npmignore

@@ -5,5 +5,6 @@
   "jest.showCoverageOnLoad": true,
   "typescript.validate.enable": true,
   "npm.packageManager": "yarn",
-  "eslint.packageManager": "yarn"
+  "eslint.packageManager": "yarn",
+  "prettier.tslintIntegration": true
 }

.vscode/settings.json

@@ -0,0 +1,8 @@
+/**
+ * useEffect does not trigger on render.
+ * See https://github.com/facebook/react/issues/14050#issuecomment-438173736.
+ * @TODO 2019-05-15 Check if this can be removed
+ */
+
+const React = require.requireActual('react');
+module.exports = { ...React, useEffect: React.useLayoutEffect };

__mocks__/react.js

@@ -1,3 +1,4 @@
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
+  plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]],
 };

babel.config.js

@@ -1,3 +1,4 @@
 module.exports = {
   presets: ['module:metro-react-native-babel-preset', '@babel/preset-typescript'],
+  plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]],
 };

example/babel.config.js

@@ -19,8 +19,10 @@ module.exports = {
       // See https://github.com/facebook/metro/issues/7#issuecomment-464668678.
       mobx: path.resolve(__dirname, '../node_modules/mobx'),
       'mobx-react': path.resolve(__dirname, '../node_modules/mobx-react'),
+      'mobx-utils': path.resolve(__dirname, '../node_modules/mobx-utils'),
       react: path.resolve(__dirname, '../node_modules/react'),
       'react-native': path.resolve(__dirname, '../node_modules/react-native'),
+      '@babel/plugin-proposal-decorators': path.resolve(__dirname, '../node_modules/@babel/plugin-proposal-decorators'),
     },
   },
   transformer: {

example/metro.config.js

@@ -6,6 +6,7 @@
     "start": "node ../node_modules/react-native/local-cli/cli.js start",
     "test:lint": "cd .. && yarn tslint example/src/**/*.ts{,x} && cd example",
     "test:unit": "cd .. && yarn jest --config=example/jest.config.js && cd example",
+    "test:unit:u": "cd .. && yarn jest --config=example/jest.config.js -u && cd example",
     "test:unit:ci": "cd .. && yarn jest --config=example/jest.config.js --runInBand && cd example",
     "test:type": "tsc --noEmit",
     "test": "yarn test:lint && yarn test:unit && yarn test:type",

example/package.json

@@ -1,14 +1,9 @@
 import React, { Component } from 'react';
-import { NavigationProvider } from 'react-gondola';
 import { SignIn } from './canals/SignIn';
 
 interface IProps {}
 export default class App extends Component<IProps> {
   render() {
-    return (
-      <NavigationProvider>
-        <SignIn />
-      </NavigationProvider>
-    );
+    return <SignIn />;
   }
 }

example/src/App.tsx

@@ -1,12 +1,14 @@
 import React, { Component } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
 
 interface IProps {}
 export class FirstName extends Component<IProps> {
   render() {
     return (
       <View style={styles.container}>
-        <Text>FirstName</Text>
+        <Text>Waht is your first name ?</Text>
+        <TextInput placeholder="Type here" />
+        <Button title="Next" onPress={() => true} />
       </View>
     );
   }
@@ -17,6 +19,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     backgroundColor: '#FFAAAA',
     flex: 1,
-    justifyContent: 'center',
+    justifyContent: 'space-around',
   },
 });