Theme integration

.prettierrc

@@ -1,4 +1,7 @@
 {
+  "printWidth": 100,
+  "tabWidth": 2,
+  "jsxBracketSameLine": true,
   "singleQuote": true,
   "trailingComma": "es5",
   "proseWrap": "always"

package.json

@@ -1,7 +1,7 @@
 {
   "name": "galio-framework",
   "main": "src/index.js",
-  "version": "1.0.3",
+  "version": "0.4.0",
   "files": [
     "src/"
   ],
@@ -25,35 +25,26 @@
   ],
   "scripts": {
     "precommit": "yarn lint",
-    "lint": "eslint src/**.js",
-    "test": "jest"
+    "lint": "eslint src/**.js"
   },
   "dependencies": {
-    "expo": "^29.0.0"
+    "expo": "^31.0.4"
   },
   "devDependencies": {
-    "babel-eslint": "^10.0.0",
-    "d3-shape": "^1.2.2",
-    "eslint": "^5.6.0",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-plugin-flowtype": "^2.50.2",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "^6.1.1",
-    "eslint-plugin-react": "^7.11.1",
-    "prettier": "^1.14.2",
+    "eslint": "^5.8.0",
+    "eslint-config-universe": "^1.0.7",
+    "prettier": "^1.15.1",
     "prop-types": "^15.6.2",
-    "react": "16.3.1",
-    "react-devtools": "^3.3.2",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-29.0.0.tar.gz",
-    "react-native-svg": "^7.0.3",
-    "react-native-svg-charts": "^5.2.0",
-    "react-native-vector-icons": "^6.0.2",
-    "react-navigation": "^2.13.0",
-    "whatwg-fetch": "^2.0.4"
+    "react": "16.5.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.1.tar.gz",
+    "react-native-vector-icons": "^6.0.2"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
     "react-native-vector-icons": "*"
+  },
+  "eslintConfig": {
+    "extends": "universe/native"
   }
 }

src/Block.js

@@ -1,28 +1,9 @@
 import React, { Component } from 'react';
 import { View, StyleSheet, SafeAreaView } from 'react-native';
 import PropTypes from 'prop-types';
-import theme from './theme';
-
-export default class Block extends Component {
-  static defaultProps = {
-    row: false,
-    flex: false,
-    center: false,
-    middle: false,
-    top: false,
-    bottom: false,
-    right: false,
-    left: false,
-    card: false,
-    shadow: false,
-    space: null,
-    fluid: false,
-    height: null,
-    width: null,
-    shadowColor: null,
-    safe: false,
-  }
+import GalioTheme, { withGalio } from './theme';
 
+class Block extends Component {
   render() {
     const {
       row,
@@ -43,6 +24,7 @@ export default class Block extends Component {
       safe,
       children,
       style,
+      styles,
       ...props
     } = this.props;
 
@@ -75,19 +57,37 @@ export default class Block extends Component {
     }
 
     return (
-      <View style={styleBlock} {...props}>
+      <View {...props} style={styleBlock}>
         {children}
       </View>
     );
   }
 }
 
+Block.defaultProps = {
+  row: false,
+  flex: false,
+  center: false,
+  middle: false,
+  top: false,
+  bottom: false,
+  right: false,
+  left: false,
+  card: false,
+  shadow: false,
+  space: null,
+  fluid: false,
+  height: null,
+  width: null,
+  shadowColor: null,
+  safe: false,
+  styles: {},
+  theme: GalioTheme,
+};
+
 Block.propTypes = {
   row: PropTypes.bool,
-  flex: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.number,
-  ]),
+  flex: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
   center: PropTypes.bool,
   middle: PropTypes.bool,
   top: PropTypes.bool,
@@ -102,50 +102,55 @@ Block.propTypes = {
   width: PropTypes.number,
   shadowColor: PropTypes.string,
   safe: PropTypes.bool,
+  styles: PropTypes.any,
+  theme: PropTypes.any,
 };
 
-const styles = StyleSheet.create({
-  block: {
-    flexDirection: 'column',
-  },
-  row: {
-    flexDirection: 'row',
-  },
-  middle: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  center: {
-    alignItems: 'center',
-    alignSelf: 'center',
-  },
-  left: {
-    alignItems: 'flex-start',
-  },
-  right: {
-    alignItems: 'flex-end',
-  },
-  top: {
-    alignItems: 'flex-start',
-    alignSelf: 'flex-start',
-  },
-  bottom: {
-    alignItems: 'flex-end',
-    alignSelf: 'flex-end',
-  },
-  card: {
-    borderRadius: theme.SIZES.BASE * 0.4,
-    borderWidth: theme.SIZES.BASE * 0.05,
-    borderColor: theme.COLORS.BLOCK,
-  },
-  shadow: {
-    shadowColor: theme.COLORS.BLOCK,
-    shadowOffset: { width: 0, height: 3 },
-    shadowOpacity: 0.15,
-    shadowRadius: 8,
-    elevation: 1,
-  },
-  fluid: {
-    width: 'auto',
-  },
-});
+const styles = theme =>
+  StyleSheet.create({
+    block: {
+      flexDirection: 'column',
+    },
+    row: {
+      flexDirection: 'row',
+    },
+    middle: {
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    center: {
+      alignItems: 'center',
+      alignSelf: 'center',
+    },
+    left: {
+      alignItems: 'flex-start',
+    },
+    right: {
+      alignItems: 'flex-end',
+    },
+    top: {
+      alignItems: 'flex-start',
+      alignSelf: 'flex-start',
+    },
+    bottom: {
+      alignItems: 'flex-end',
+      alignSelf: 'flex-end',
+    },
+    card: {
+      borderRadius: theme.SIZES.CARD_BORDER_RADIUS,
+      borderWidth: theme.SIZES.CARD_BORDER_WIDTH,
+      borderColor: theme.COLORS.BLOCK,
+    },
+    shadow: {
+      shadowColor: theme.COLORS.BLOCK,
+      shadowOffset: { width: 0, height: 3 },
+      shadowOpacity: theme.SIZES.BLOCK_SHADOW_OPACITY,
+      shadowRadius: theme.SIZES.BLOCK_SHADOW_RADIUS,
+      elevation: theme.SIZES.ANDROID_ELEVATION,
+    },
+    fluid: {
+      width: 'auto',
+    },
+  });
+
+export default withGalio(Block, styles);