Added common components

.eslintrc.js

@@ -46,7 +46,8 @@ module.exports = {
     "import/no-extraneous-dependencies": "off",
     "import/default": "off",
     "import/namespace": "off",
-    "import/no-absolute-path": "error"
+    "import/no-absolute-path": "error",
+    "react/no-typos": "off"
   },
   "settings": {
     "import/resolver": {

generators/app/files.js

@@ -43,6 +43,44 @@ module.exports.CUSTOM_TEXT_PATH = `${module.exports.COMPONENTS_PATH}/CustomText`
 module.exports.CUSTOM_TEXT = `${module.exports.CUSTOM_TEXT_PATH}/index.js`;
 module.exports.CUSTOM_TEXT_STYLES = `${module.exports.CUSTOM_TEXT_PATH}/styles.js`;
 
+// COMPONENTS - CUSTOM TEXT INPUT
+module.exports.CUSTOM_TEXT_INPUT_PATH = `${module.exports.COMPONENTS_PATH}/CustomTextInput`;
+module.exports.CUSTOM_TEXT_INPUT = `${module.exports.CUSTOM_TEXT_INPUT_PATH}/index.js`;
+module.exports.CUSTOM_TEXT_INPUT_STYLES = `${module.exports.CUSTOM_TEXT_INPUT_PATH}/styles.js`;
+module.exports.CUSTOM_TEXT_INPUT_ASSETS_PATH = `${module.exports.CUSTOM_TEXT_INPUT_PATH}/assets`;
+module.exports.CUSTOM_TEXT_INPUT_ASSETS_VISIBILITY = `${
+  module.exports.CUSTOM_TEXT_INPUT_ASSETS_PATH
+}/ic_visibility.png`;
+module.exports.CUSTOM_TEXT_INPUT_ASSETS_VISIBILITY_2X = `${
+  module.exports.CUSTOM_TEXT_INPUT_ASSETS_PATH
+}/[email protected]`;
+module.exports.CUSTOM_TEXT_INPUT_ASSETS_VISIBILITY_3X = `${
+  module.exports.CUSTOM_TEXT_INPUT_ASSETS_PATH
+}/[email protected]`;
+module.exports.CUSTOM_TEXT_INPUT_ASSETS_VISIBILITY_OFF = `${
+  module.exports.CUSTOM_TEXT_INPUT_ASSETS_PATH
+}/ic_visibility_off.png`;
+module.exports.CUSTOM_TEXT_INPUT_ASSETS_VISIBILITY_OFF_2X = `${
+  module.exports.CUSTOM_TEXT_INPUT_ASSETS_PATH
+}/[email protected]`;
+module.exports.CUSTOM_TEXT_INPUT_ASSETS_VISIBILITY_OFF_3X = `${
+  module.exports.CUSTOM_TEXT_INPUT_ASSETS_PATH
+}/[email protected]`;
+module.exports.CUSTOM_TEXT_INPUT_SHOW_PASSWORD_PATH = `${
+  module.exports.CUSTOM_TEXT_INPUT_PATH
+}/components/ShowPassword`;
+module.exports.CUSTOM_TEXT_INPUT_SHOW_PASSWORD = `${
+  module.exports.CUSTOM_TEXT_INPUT_SHOW_PASSWORD_PATH
+}/index.js`;
+module.exports.CUSTOM_TEXT_INPUT_SHOW_PASSWORD_STYLES = `${
+  module.exports.CUSTOM_TEXT_INPUT_SHOW_PASSWORD_PATH
+}/styles.js`;
+
+// COMPONENTS - CUSTOM TEXT
+module.exports.CUSTOM_BUTTON_PATH = `${module.exports.COMPONENTS_PATH}/CustomButton`;
+module.exports.CUSTOM_BUTTON = `${module.exports.CUSTOM_BUTTON_PATH}/index.js`;
+module.exports.CUSTOM_BUTTON_STYLES = `${module.exports.CUSTOM_BUTTON_PATH}/styles.js`;
+
 // COMPONENTS - DRAWER
 module.exports.DRAWER_PATH = `${module.exports.COMPONENTS_PATH}/Drawer`;
 module.exports.DRAWER_INDEX = `${module.exports.DRAWER_PATH}/index.js`;
@@ -54,6 +92,11 @@ module.exports.DRAWER_OVERLAY_PATH = `${module.exports.DRAWER_PATH}/components/D
 module.exports.DRAWER_OVERLAY_INDEX = `${module.exports.DRAWER_OVERLAY_PATH}/index.js`;
 module.exports.DRAWER_OVERLAY_STYLES = `${module.exports.DRAWER_OVERLAY_PATH}/styles.js`;
 
+// COMPONENTS - LOADABLE
+module.exports.LOADABLE_PATH = `${module.exports.COMPONENTS_PATH}/Loadable`;
+module.exports.LOADABLE = `${module.exports.LOADABLE_PATH}/index.js`;
+module.exports.LOADABLE_STYLES = `${module.exports.LOADABLE_PATH}/styles.js`;
+
 // REDUX
 module.exports.REDUX_STORE = `${module.exports.REDUX_PATH}/store.js`;
 
@@ -93,6 +136,7 @@ module.exports.ROUTES_CONSTANTS = `${module.exports.CONSTANTS_PATH}/routes.js`;
 module.exports.ARRAY_UTILS = `${module.exports.UTILS_PATH}/arrayUtils.js`;
 module.exports.I18N_UTILS = `${module.exports.UTILS_PATH}/i18nUtils.js`;
 module.exports.NAV_UTILS = `${module.exports.UTILS_PATH}/navUtils.js`;
+module.exports.STYLE_UTILS = `${module.exports.UTILS_PATH}/styleUtils.js`;
 
 // TEST
 module.exports.ARRAY_UTILS_TESTS = `${module.exports.TEST_PATH}/utils/arrayUtils.spec.js`;

generators/app/tasks/appSetup/baseFilesTemplate.js

@@ -8,6 +8,20 @@ const {
   APP_NAVIGATOR,
   CUSTOM_TEXT,
   CUSTOM_TEXT_STYLES,
+  CUSTOM_BUTTON,
+  CUSTOM_BUTTON_STYLES,
+  CUSTOM_TEXT_INPUT,
+  CUSTOM_TEXT_INPUT_STYLES,
+  CUSTOM_TEXT_INPUT_ASSETS_VISIBILITY,
+  CUSTOM_TEXT_INPUT_ASSETS_VISIBILITY_2X,
+  CUSTOM_TEXT_INPUT_ASSETS_VISIBILITY_3X,
+  CUSTOM_TEXT_INPUT_ASSETS_VISIBILITY_OFF,
+  CUSTOM_TEXT_INPUT_ASSETS_VISIBILITY_OFF_2X,
+  CUSTOM_TEXT_INPUT_ASSETS_VISIBILITY_OFF_3X,
+  CUSTOM_TEXT_INPUT_SHOW_PASSWORD,
+  CUSTOM_TEXT_INPUT_SHOW_PASSWORD_STYLES,
+  LOADABLE,
+  LOADABLE_STYLES,
   PLATFORM_CONSTANTS,
   COLORS_CONSTANTS,
   ROUTES_CONSTANTS,
@@ -21,6 +35,7 @@ const {
   I18N_CONFIG,
   I18N_UTILS,
   NAV_UTILS,
+  STYLE_UTILS,
   INDEX,
   APP,
   SCREENS
@@ -35,13 +50,28 @@ const FILES = [
   APP_NAVIGATOR,
   CUSTOM_TEXT,
   CUSTOM_TEXT_STYLES,
+  CUSTOM_BUTTON,
+  CUSTOM_BUTTON_STYLES,
+  CUSTOM_TEXT_INPUT,
+  CUSTOM_TEXT_INPUT_STYLES,
+  CUSTOM_TEXT_INPUT_ASSETS_VISIBILITY,
+  CUSTOM_TEXT_INPUT_ASSETS_VISIBILITY_2X,
+  CUSTOM_TEXT_INPUT_ASSETS_VISIBILITY_3X,
+  CUSTOM_TEXT_INPUT_ASSETS_VISIBILITY_OFF,
+  CUSTOM_TEXT_INPUT_ASSETS_VISIBILITY_OFF_2X,
+  CUSTOM_TEXT_INPUT_ASSETS_VISIBILITY_OFF_3X,
+  CUSTOM_TEXT_INPUT_SHOW_PASSWORD,
+  CUSTOM_TEXT_INPUT_SHOW_PASSWORD_STYLES,
+  LOADABLE,
+  LOADABLE_STYLES,
   PLATFORM_CONSTANTS,
   COLORS_CONSTANTS,
   ARRAY_UTILS,
   ARRAY_UTILS_TESTS,
   I18N_CONFIG,
   I18N_UTILS,
   NAV_UTILS,
+  STYLE_UTILS,
   TEST_ESLINT_CONFIG,
   HOME_STYLES
 ];

generators/app/templates/.eslintrc.ejs

@@ -44,6 +44,7 @@ module.exports = {
     "import/named": "error",
     "import/default": "error",
     "import/namespace": "error",
-    "import/no-absolute-path": "error"
+    "import/no-absolute-path": "error",
+    "react/no-typos": "off"
   }
 };

generators/app/templates/src/app/components/CustomButton/index.js

@@ -0,0 +1,63 @@
+import React, { PureComponent } from 'react';
+import { TouchableOpacity, Image, ViewPropTypes } from 'react-native';
+import PropTypes from 'prop-types';
+
+import CustomText from '../CustomText';
+import { getCustomStyles } from '../../../utils/styleUtils';
+
+import styles from './styles';
+
+class CustomButton extends PureComponent {
+  static VARIANTS = ['borderless', 'radial', 'black', 'green', 'white', 'gray'];
+
+  customStyles = () => getCustomStyles(CustomButton.VARIANTS, this.props, styles);
+
+  customTextStyles = () => getCustomStyles(CustomButton.VARIANTS, this.props, styles, 'Content');
+
+  render() {
+    const {
+      onPress,
+      style,
+      activeOpacity,
+      icon,
+      title,
+      iconStyle,
+      disabled,
+      textStyle,
+      ...textProps
+    } = this.props;
+    // TODO: Set android ripple while pressing a button
+    return (
+      <TouchableOpacity
+        onPress={onPress}
+        style={[styles.container, this.customStyles(), style]}
+        activeOpacity={activeOpacity}
+        disabled={disabled}
+      >
+        {icon && <Image source={icon} resizeMode="contain" style={[styles.icon, iconStyle]} />}
+        {title && (
+          <CustomText {...textProps} style={[styles.text, this.customTextStyles(), textStyle]}>
+            {title}
+          </CustomText>
+        )}
+      </TouchableOpacity>
+    );
+  }
+}
+
+CustomButton.defaultProps = {
+  activeOpacity: 1
+};
+
+CustomButton.propTypes = {
+  activeOpacity: PropTypes.number,
+  disabled: PropTypes.bool,
+  icon: PropTypes.number,
+  iconStyle: ViewPropTypes.style,
+  onPress: PropTypes.func.isRequired,
+  style: ViewPropTypes.style,
+  textStyle: PropTypes.number,
+  title: PropTypes.string
+};
+
+export default CustomButton;

generators/app/templates/src/app/components/CustomButton/styles.js

@@ -0,0 +1,54 @@
+import { StyleSheet } from 'react-native';
+
+import { transparent, black, green, gray, white } from '../../../constants/colors';
+
+const iconSize = 20;
+
+const borderlessStyle = {
+  borderWidth: 0,
+  backgroundColor: transparent
+};
+
+export default StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 8
+  },
+  icon: {
+    height: iconSize,
+    width: iconSize
+  },
+  borderless: borderlessStyle,
+  radial: {
+    borderRadius: 100
+  },
+  black: {
+    backgroundColor: black
+  },
+  blackContent: {
+    color: white
+  },
+  white: {
+    backgroundColor: white
+  },
+  whiteContent: {
+    color: black
+  },
+  gray: {
+    backgroundColor: gray
+  },
+  grayContent: {
+    color: black
+  },
+  borderlessContent: {
+    color: gray
+  },
+  green: {
+    backgroundColor: green
+  },
+  text: {
+    color: black
+  }
+});

generators/app/templates/src/app/components/CustomText/index.js

@@ -2,9 +2,11 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { Text } from 'react-native';
 
+import { getCustomStyles } from '../../../utils/styleUtils';
+
 import styles from './styles';
 
-export default class CustomText extends PureComponent {
+class CustomText extends PureComponent {
   /*
   ** You can add styles to Base like Family Font to be the Text styles base!
   ** if you want to add a custom style, you need to add it here and in VARIANTS
@@ -24,10 +26,7 @@ export default class CustomText extends PureComponent {
     'gray'
   ];
 
-  customStyles = () =>
-    CustomText.VARIANTS
-      .map(variant => (this.props[variant] ? styles[variant] : null))
-      .filter(style => style !== null);
+  customStyles = () => getCustomStyles(CustomText.VARIANTS, this.props, styles);
 
   render() {
     return (
@@ -50,3 +49,5 @@ CustomText.propTypes = {
 CustomText.VARIANTS.forEach(variant => {
   CustomText.propTypes[variant] = PropTypes.bool;
 });
+
+export default CustomText;

generators/app/templates/src/app/components/CustomTextInput/components/ShowPassword/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { TouchableOpacity, Image } from 'react-native';
+
+import icVisible from '../../assets/ic_visibility.png';
+import icVisibleOff from '../../assets/ic_visibility_off.png';
+
+import styles from './styles';
+
+const ShowPassword = ({ onShowPassword, passwordVisible }) => (
+  <TouchableOpacity onPress={onShowPassword} style={styles.container}>
+    <Image source={passwordVisible ? icVisible : icVisibleOff} resizeMode="contain" style={styles.icon} />
+  </TouchableOpacity>
+);
+
+ShowPassword.propTypes = {
+  onShowPassword: PropTypes.func.isRequired,
+  passwordVisible: PropTypes.bool.isRequired
+};
+
+export default ShowPassword;

generators/app/templates/src/app/components/CustomTextInput/components/ShowPassword/styles.js

@@ -0,0 +1,13 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  icon: {
+    width: 20,
+    marginLeft: 8
+  }
+});