Dev (#5)

* DEV: fix prop types for components that have prop types children

* 0.0.5

* 0.0.6

* 0.0.7

* DEV: using eslint from expo + cleanup

* 0.0.8

* DEV: added Utils, components prop types fix

* 0.0.9

* DEV: component fix import constants from Utils

* 0.0.10

* DEV: Utils fix import all constants as variable

* 0.0.11

* DEV: Button fix title prop types

* 0.0.12

* DEV: Block fix for flex as number

* 0.0.13

* DEV: Block fix flex as bool or number

* 0.0.14

* DEV: readme updates + textStyle for button

* DEV: components small updates

Author: hetmann

.eslintrc

@@ -1,36 +1,3 @@
 {
-  "parser": "babel-eslint",
-  "extends": "airbnb",
-  "plugins": [
-    "react",
-    "react-native",
-    "flowtype",
-    "jsx-a11y",
-    "import"
-  ],
-  "rules": {
-    "react/jsx-filename-extension": [
-      1, { "extensions": [".js", ".jsx"] }
-    ],
-    "react/prefer-stateless-function": [
-      2, { "ignorePureComponents": true }
-    ],
-    "import/extensions": [1, "never", { "svg": "always" }],
-    "import/no-extraneous-dependencies": [
-      "error",
-      {
-        "devDependencies": true,
-        "optionalDependencies": false,
-        "peerDependencies": false
-      }
-    ],
-    "semi": ["error", "never"],
-    "no-use-before-define": 0,
-  },
-  "env": {
-    "node": true,
-    "browser": true,
-    "es6": true,
-    "jest": true
-  },
-}
+  extends: 'universe',
+}

.gitignore

@@ -8,3 +8,4 @@ yarn-debug.log*
 yarn-error.log*
 yarn.lock
 .DS_Store
+CNAME

README.md

@@ -1,14 +1,36 @@
 # React Native UI Kit
 React Native components based on React UI Kit
 
-Components list:
+Components:
 - buttons:
-  - Button
-  - Link
+  - [x] Button
+  - [x] Link
+  - [ ] Upload
 - inputs:
-  - Input
-  - Select
+  - [x] Input
+  - [x] Select
+  - [ ] Checkbox
+  - [ ] Datepiker
+  - [ ] Progress
 - views:
-  - Block
-  - Container
-  - Text
+  - [x] Block
+  - [x] Container
+  - [x] Text
+  - [ ] List
+  - [ ] Menu
+  - [ ] Tabs
+  - [ ] Badge
+  - [ ] Label
+
+Examples screens:
+- [ ] Login
+- [ ] Forgot
+- [ ] Register / Signup
+- [ ] Profile
+- [ ] Camera
+
+### To do
+[ ] export component styles as `componentStyle` and import
+
+### Requests
+Have an idea for a new component or Screen? Just contact us at [email protected] and will add it to our list.

components/buttons/Button.js

@@ -1,52 +1,46 @@
-import React from 'react'
-import { Text, TouchableOpacity, StyleSheet } from 'react-native'
-import PropTypes from 'prop-types'
+import React from 'react';
+// eslint-disable-next-line
+import { Text, TouchableOpacity, View, StyleSheet } from 'react-native';
+import PropTypes from 'prop-types';
 
-import * as specs from '../../constants'
+import * as specs from '../../utils/constants';
 
 class Button extends React.Component {
   renderContent = () => {
-    const {
-      color, label, title, basic, inverted, size, bold, icon,
-    } = this.props
-    const text = label || title || null
-    const textStyle = [
-      basic ? styles.basicText : null,
-      bold ? { fontWeight: 'bold' } : null,
+    const { color, label, title, basic, inverted, size, bold, icon, textStyle } = this.props;
+    const text = label || title || null;
+    const textStyles = [
+      basic && styles.basicText,
+      bold && { fontWeight: 'bold' },
+      inverted && styles.basicText,
+      textStyle && { ...textStyle },
       color ? { color } : { color: specs.COLOR_WHITE },
-      inverted ? styles.basicText : null,
       size ? { fontSize: size } : { fontSize: specs.BUTTON_FONT_SIZE },
-    ]
+    ];
 
-    if (icon && !text) return icon
+    if (icon && !text) return icon;
 
-    return (
-      <Text style={textStyle}>
-        {text}
-      </Text>
-    )
-  }
+    return <Text style={textStyles}>{text}</Text>;
+  };
 
   render() {
-    const {
-      color, label, title, disabled, basic, inverted, border, full, style, ...props
-    } = this.props
+    const { disabled, basic, inverted, border, full, style, ...props } = this.props;
 
     const buttonStyle = [
       styles.button,
-      basic ? styles.basic : null,
-      inverted ? styles.inverted : null,
-      border ? styles.border : null,
-      full ? styles.full : null,
-      disabled ? styles.disabled : null,
+      basic && styles.basic,
+      inverted && styles.inverted,
+      border && styles.border,
+      full && styles.full,
+      disabled && styles.disabled,
       style,
-    ]
+    ];
 
     return (
       <TouchableOpacity {...props} disabled={disabled} style={buttonStyle}>
         {this.renderContent()}
       </TouchableOpacity>
-    )
+    );
   }
 }
 
@@ -59,28 +53,29 @@ Button.propTypes = {
   full: PropTypes.bool,
   icon: PropTypes.bool,
   inverted: PropTypes.bool,
-  label: PropTypes.bool,
+  label: PropTypes.string,
   size: PropTypes.number,
-  style: TouchableOpacity.propTypes.style,
-  title: PropTypes.bool,
-}
+  style: View.propTypes.style,
+  textStyle: Text.propTypes.style,
+  title: PropTypes.string,
+};
 
 Button.defaultProps = {
   basic: false,
   bold: false,
   border: false,
   disabled: false,
-  color: specs.COLOR_WHITE,
+  color: specs.COLOR_PRIMARY,
   full: false,
-  icon: false,
+  icon: null,
   inverted: false,
-  label: false,
-  size: 0,
+  label: null,
+  size: specs.FONT_SIZE,
   style: {},
-  title: false,
-}
+  title: null,
+};
 
-export default Button
+export default Button;
 
 const styles = StyleSheet.create({
   button: {
@@ -89,8 +84,6 @@ const styles = StyleSheet.create({
     borderRadius: specs.BUTTON_RADIUS,
     height: specs.BUTTON_HEIGHT,
     justifyContent: 'center',
-    marginBottom: specs.MARGIN,
-    marginTop: specs.MARGIN,
     padding: specs.BUTTON_PADDING,
     width: specs.WIDTH * 0.5, // 50%
   },
@@ -101,11 +94,11 @@ const styles = StyleSheet.create({
   },
   inverted: {
     backgroundColor: specs.COLOR_WHITE,
-    borderColor: specs.COLOR_ACCENT,
+    borderColor: specs.COLOR_PRIMARY,
     borderWidth: 0.5,
   },
   border: {
-    borderColor: specs.COLOR_ACCENT,
+    borderColor: specs.COLOR_PRIMARY,
     borderWidth: 0.5,
   },
   disabled: {
@@ -115,6 +108,6 @@ const styles = StyleSheet.create({
     width: specs.WIDTH * 0.8, // 80%
   },
   basicText: {
-    color: specs.COLOR_ACCENT,
+    color: specs.COLOR_PRIMARY,
   },
-})
+});

components/buttons/Link.js

@@ -1,31 +1,25 @@
-import React from 'react'
-import { Linking, Text, StyleSheet } from 'react-native'
-import PropTypes from 'prop-types'
+import React from 'react';
+import { Linking, Text, StyleSheet } from 'react-native';
+import PropTypes from 'prop-types';
 
-import * as specs from '../../constants'
+import * as specs from '../../utils/constants';
 
 class Link extends React.Component {
   navigateURL = () => {
-    const { href, onPress } = this.props
+    const { href, onPress } = this.props;
 
-    Linking.openURL(href)
-    onPress()
-  }
+    Linking.openURL(href);
+    onPress();
+  };
 
   render() {
-    const {
-      style, color, onPress, ...props
-    } = this.props
+    const { style, color, ...props } = this.props;
 
     return (
-      <Text
-        onPress={this.navigateURL}
-        style={[styles.link, { color }, style]}
-        {...props}
-      >
+      <Text {...props} onPress={this.navigateURL} style={[styles.link, { color }, style]}>
         {props.children}
       </Text>
-    )
+    );
   }
 }
 
@@ -34,20 +28,20 @@ Link.propTypes = {
   href: PropTypes.string,
   onPress: PropTypes.func,
   style: Text.propTypes.style,
-}
+};
 
 Link.defaultProps = {
   color: specs.LINK_COLOR,
   href: 'null',
   onPress: () => {},
   style: {},
-}
+};
 
-export default Link
+export default Link;
 
 const styles = StyleSheet.create({
   link: {
     height: specs.BUTTON_HEIGHT,
     paddingVertical: specs.BUTTON_PADDING,
   },
-})
+});

components/inputs/Input.js

@@ -1,14 +1,12 @@
-import React from 'react'
-import { TextInput, StyleSheet } from 'react-native'
-import PropTypes from 'prop-types'
+import React from 'react';
+import { TextInput, StyleSheet } from 'react-native';
+import PropTypes from 'prop-types';
 
-import * as specs from '../../constants'
+import * as specs from '../../utils/constants';
 
 class Input extends React.PureComponent {
   render() {
-    const {
-      style, placeholderTextColor, multiline, ...rest
-    } = this.props
+    const { style, placeholderTextColor, multiline, ...rest } = this.props;
 
     if (multiline) {
       return (
@@ -19,7 +17,7 @@ class Input extends React.PureComponent {
           style={[styles.input, { height: 'auto' }, style]}
           underlineColorAndroid="transparent"
         />
-      )
+      );
     }
 
     return (
@@ -29,23 +27,23 @@ class Input extends React.PureComponent {
         placeholderTextColor={placeholderTextColor}
         underlineColorAndroid="transparent"
       />
-    )
+    );
   }
 }
 
 Input.propTypes = {
   placeholderTextColor: PropTypes.string,
   multiline: PropTypes.bool,
   style: TextInput.propTypes.style,
-}
+};
 
 Input.defaultProps = {
   placeholderTextColor: specs.PLACEHOLDER_COLOR,
   multiline: false,
   style: {},
-}
+};
 
-export default Input
+export default Input;
 
 const styles = StyleSheet.create({
   input: {
@@ -62,4 +60,4 @@ const styles = StyleSheet.create({
     textShadowColor: 'transparent',
     width: specs.WIDTH * 0.8, // 80%
   },
-})
+});