wip: improve dev workflow

.flowconfig

@@ -1,43 +1,40 @@
 [ignore]
-
-# We fork some components by platform.
+; We fork some components by platform
 .*/*[.]android.js
 
-# Ignore templates with `@flow` in header
-.*/local-cli/generator.*
-
-# Ignore malformed json
-.*/node_modules/y18n/test/.*\.json
+; Ignore templates for 'react-native init'
+.*/local-cli/templates/.*
 
-# Ignore the website subdir
+; Ignore the website subdir
 <PROJECT_ROOT>/website/.*
 
-# Ignore BUCK generated dirs
+; Ignore "BUCK" generated dirs
 <PROJECT_ROOT>/\.buckd/
 
-# Ignore unexpected extra @providesModule
-.*/node_modules/commoner/test/source/widget/share.js
+; Ignore unexpected extra "@providesModule"
+.*/node_modules/.*/node_modules/fbjs/.*
++.*/node_modules/react-dom/.*
 
-# Ignore duplicate module providers
-# For RN Apps installed via npm, "Libraries" folder is inside node_modules/react-native but in the source repo it is in the root
+; Ignore duplicate module providers
+; For RN Apps installed via npm, "Libraries" folder is inside
+; "node_modules/react-native" but in the source repo it is in the root
 .*/Libraries/react-native/React.js
 .*/Libraries/react-native/ReactNative.js
-.*/node_modules/jest-runtime/build/__tests__/.*
 
-.*/node_modules/glamor/es6/CSSPropertyOperations/
-
-.*/example/node_modules/fbjs/
-.*/example/node_modules/react/
-.*/example/node_modules/react-static-container/
-.*/example/node_modules/react-native/
-.*/example/node_modules/exponent/
-.*/example/node_modules/@exponent/
-.*/example/node_modules/fbemitter/
+; Ignore duplicate modules under example/
+.*/example/node_modules/fbjs
+.*/example/node_modules/fbemitter
+.*/example/node_modules/react
+.*/example/node_modules/react-native
+.*/example/node_modules/expo
+.*/example/node_modules/@expo/ex-navigation
 .*/example/\.buckd/
 
-.*/docs/node_modules/fbjs/
-.*/docs/node_modules/react/
-.*/docs/node_modules/fbemitter/
+[include]
+
+[libs]
+node_modules/react-native/Libraries/react-native/react-native-interface.js
+node_modules/react-native/flow
 
 [include]
 
@@ -46,32 +43,28 @@ node_modules/react-native/Libraries/react-native/react-native-interface.js
 node_modules/react-native/flow
 
 [options]
-module.system=haste
+emoji=true
 
-esproposal.decorators=ignore
-esproposal.class_static_fields=enable
-esproposal.class_instance_fields=enable
-esproposal.export_star_as=enable
-
-unsafe.enable_getters_and_setters=true
+module.system=haste
 
 experimental.strict_type_args=true
 
 munge_underscores=true
 
-module.name_mapper='^exponent$' -> 'emptyObject'
-module.name_mapper='^@exponent/ex-navigation$' -> 'emptyObject'
-module.name_mapper='^react-native-vector-icons/MaterialIcons$' -> 'emptyObject'
-module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
+module.name_mapper='^expo$' -> 'emptyObject'
+module.name_mapper='^@expo/ex-navigation$' -> 'emptyObject'
 module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
 
 suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FixMe
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-2]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-2]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-2]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-2]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
+suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
+
+unsafe.enable_getters_and_setters=true
 
 [version]
-^0.33.0
+^0.42.0

example/.babelrc

@@ -1,8 +1,18 @@
 {
-  "presets": ["react-native-stage-0/decorator-support"],
-  "env": {
-    "development": {
-      "plugins": ["transform-react-jsx-source"]
-    }
-  }
+  "presets": [
+    "expo"
+  ],
+  "plugins": [
+    ["module-resolver", {
+      "alias": {
+        "react-native-paper": "..",
+        "react-native-vector-icons": "@expo-vector-icons",
+        "@expo-vector-icons/lib/create-icon-set": "react-native-vector-icons/lib/create-icon-set",
+        "@expo-vector-icons/lib/icon-button": "react-native-vector-icons/lib/icon-button",
+        "@expo-vector-icons/lib/create-icon-set-from-fontello": "react-native-vector-icons/lib/create-icon-set-from-fontello",
+        "@expo-vector-icons/lib/create-icon-set-from-icomoon": "react-native-vector-icons/lib/create-icon-set-from-icomoon",
+        "@expo-vector-icons/glyphmaps": "react-native-vector-icons/glyphmaps"
+      }
+    }]
+  ]
 }

example/.gitignore

@@ -1,3 +1,3 @@
 node_modules/**/*
-.exponent/*
+.expo/*
 npm-debug.*

example/exp.json

@@ -2,20 +2,19 @@
   "name": "React Native Paper Example",
   "description": "Example for React Native Paper",
   "slug": "react-native-paper-example",
-  "sdkVersion": "11.0.0",
+  "sdkVersion": "16.0.0",
   "version": "1.0.0",
   "orientation": "default",
   "primaryColor": "#cccccc",
-  "iconUrl": "https://s3.amazonaws.com/exp-brand-assets/ExponentEmptyManifest_192.png",
   "notification": {
-    "iconUrl": "https://s3.amazonaws.com/exp-us-standard/placeholder-push-icon-blue-circle.png",
+    "icon": "https://s3.amazonaws.com/exp-us-standard/placeholder-push-icon-blue-circle.png",
     "color": "#000000"
   },
-  "loading": {
-    "iconUrl": "https://s3.amazonaws.com/exp-brand-assets/ExponentEmptyManifest_192.png",
-    "hideExponentText": false
-  },
   "packagerOpts": {
-    "assetExts": ["ttf", "mp4"]
+    "assetExts": [
+      "ttf"
+    ],
+    "config": "./rn-cli.config.js",
+    "projectRoots": ""
   }
 }

example/main.js

@@ -1,6 +1,6 @@
 /* @flow */
 
-import Exponent from 'exponent';
+import Expo from 'expo';
 import React, { Component } from 'react';
 import {
   View,
@@ -10,7 +10,7 @@ import {
 import {
   NavigationProvider,
   StackNavigation,
-} from '@exponent/ex-navigation';
+} from '@expo/ex-navigation';
 import {
   Colors,
   Drawer,
@@ -89,4 +89,4 @@ const styles = StyleSheet.create({
   },
 });
 
-Exponent.registerRootComponent(App);
+Expo.registerRootComponent(App);

example/package.json

@@ -6,12 +6,17 @@
   "private": true,
   "main": "main.js",
   "dependencies": {
-    "@exponent/ex-navigation": "^2.0.0",
-    "@exponent/vector-icons": "^2.0.3",
-    "exponent": "^11.0.2",
-    "react": "~15.3.2",
-    "react-native": "github:exponentjs/react-native#sdk-11.0.3",
-    "react-native-paper": "file:../",
-    "react-native-vector-icons": "git+https://github.com/exponentjs/react-native-vector-icons.git"
+    "@expo/ex-navigation": "^2.0.0",
+    "@expo/vector-icons": "^4.0.0",
+    "escape-string-regexp": "^1.0.5",
+    "expo": "~16.0.0",
+    "polished": "^1.1.2",
+    "react": "16.0.0-alpha.6",
+    "react-native": "git+https://github.com/expo/react-native.git#sdk-16.0.0",
+    "react-native-drawer": "^2.3.0"
+  },
+  "devDependencies": {
+    "babel-plugin-module-resolver": "^2.7.0",
+    "babel-preset-expo": "^1.0.0"
   }
 }

example/rn-cli.config.js

@@ -0,0 +1,24 @@
+/* eslint-disable import/no-commonjs */
+
+const path = require('path');
+const escape = require('escape-string-regexp');
+const blacklist = require('react-native/packager/blacklist');
+
+module.exports = {
+  getProjectRoots() {
+    return [__dirname, path.resolve(__dirname, '..')];
+  },
+  getProvidesModuleNodeModules() {
+    return ['react-native', 'react', 'prop-types', 'react-native-drawer', 'polished'];
+  },
+  getBlacklistRE() {
+    return blacklist([
+      new RegExp(
+        `^${escape(path.resolve(__dirname, '..', 'node_modules'))}\\/.*$` // eslint-disable-line prettier/prettier
+      ),
+      new RegExp(
+        `^${escape(path.resolve(__dirname, '..', 'docs', 'node_modules'))}\\/.*$` // eslint-disable-line prettier/prettier
+      ),
+    ]);
+  },
+};

example/src/Router.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import {
   createRouter,
-} from '@exponent/ex-navigation';
+} from '@expo/ex-navigation';
 import ExampleList, { examples } from './ExampleList';
 
 const routes = Object.keys(examples)

example/third-party/@expo-vector-icons/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@expo-vector-icons",
+  "version": "1.0.0",
+  "main": "../../node_modules/@expo/vector-icons/index.js",
+  "license": "MIT"
+}

package.json

@@ -3,44 +3,43 @@
   "version": "0.0.1",
   "description": "",
   "main": "src/index.js",
-  "scripts": {
-    "flow": "flow",
-    "lint": "eslint .",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
   "files": [
     "src/"
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/ahmedlhanafy/react-native-paper.git"
+    "url": "git+https://github.com/callstackio/react-native-paper.git"
   },
   "author": "",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/ahmedlhanafy/react-native-paper/issues"
+    "url": "https://github.com/callstackio/react-native-paper/issues"
   },
-  "homepage": "https://github.com/ahmedlhanafy/react-native-paper#readme",
+  "homepage": "https://github.com/callstackio/react-native-paper#readme",
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
     "react-native-vector-icons": "*"
   },
   "devDependencies": {
-    "babel-eslint": "^7.1.0",
-    "eslint": "^3.9.1",
-    "eslint-plugin-babel": "^3.3.0",
+    "babel-eslint": "^7.2.3",
+    "eslint": "^3.19.0",
+    "eslint-plugin-babel": "^4.1.1",
     "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-react": "^6.6.0",
-    "eslint-plugin-react-native": "^2.0.0",
-    "flow-bin": "^0.33.0",
-    "react": "~15.3.2",
-    "react-native": "~0.37.0",
-    "react-native-vector-icons": "~3.0.0"
+    "eslint-plugin-react": "^7.0.0",
+    "eslint-plugin-react-native": "^2.3.2",
+    "flow-bin": "~0.42.0",
+    "react": "16.0.0-alpha.6",
+    "react-native": "~0.44.0",
+    "react-native-vector-icons": "~4.1.1"
   },
   "dependencies": {
-    "color": "^0.11.4",
-    "highlight.js": "^9.8.0",
+    "polished": "^1.1.2",
     "react-native-drawer": "^2.3.0"
+  },
+  "scripts": {
+    "flow": "flow",
+    "lint": "eslint .",
+    "test": "echo \"Error: no test specified\" && exit 1"
   }
 }

src/components/Button.js

@@ -1,6 +1,6 @@
 /* @flow */
 
-import color from 'color';
+import { transparentize } from 'polished';
 import React, {
   PureComponent,
   PropTypes,
@@ -166,7 +166,9 @@ class Button extends PureComponent<void, Props, State> {
     if (typeof dark === 'boolean') {
       isDark = dark;
     } else {
-      isDark = backgroundColor === 'transparent' ? false : !color(backgroundColor).light();
+      // TODO: determine if color id dark
+      // isDark = backgroundColor === 'transparent' ? false : isColorDark(backgroundColor);
+      isDark = backgroundColor === 'transparent';
     }
 
     if (disabled) {
@@ -187,7 +189,7 @@ class Button extends PureComponent<void, Props, State> {
       }
     }
 
-    const rippleColor = color(textColor).alpha(0.32).rgbaString();
+    const rippleColor = transparentize(0.32, textColor);
     const buttonStyle = { backgroundColor, borderRadius: roundness };
     const touchableStyle = { borderRadius: roundness };
     const textStyle = { color: textColor, fontFamily };

src/components/Checkbox.js

@@ -10,7 +10,7 @@ import {
   View,
   StyleSheet,
 } from 'react-native';
-import color from 'color';
+import { transparentize } from 'polished';
 import Icon from './Icon';
 import TouchableRipple from './TouchableRipple';
 import withTheme from '../core/withTheme';
@@ -104,7 +104,7 @@ class Checkbox extends Component <void, Props, State> {
       rippleColor = 'rgba(0, 0, 0, .16)';
       checkboxColor = 'rgba(0, 0, 0, .26)';
     } else {
-      rippleColor = color(checkedColor).clearer(0.32).rgbaString();
+      rippleColor = transparentize(0.32, checkedColor);
       checkboxColor = checked ? checkedColor : uncheckedColor;
     }
 

src/components/Drawer/DrawerItem.js

@@ -1,6 +1,6 @@
 /* @flow */
 
-import color from 'color';
+import { transparentize } from 'polished';
 import React, {
   PropTypes,
 } from 'react';
@@ -21,8 +21,8 @@ type Props = {
 
 const DrawerItem = ({ icon, label, active, onPress, theme, ...props }: Props) => {
   const { colors } = theme;
-  const labelColor = active ? colors.primary : color(colors.text).alpha(0.87).rgbaString();
-  const iconColor = active ? colors.primary : color(colors.text).alpha(0.54).rgbaString();
+  const labelColor = active ? colors.primary : transparentize(0.87, colors.text);
+  const iconColor = active ? colors.primary : transparentize(0.54, colors.text);
   const fontFamily = theme.fonts.medium;
   const labelMargin = icon ? 32 : 0;
   return (