@holper/react-native-holper-storybook 0.7.1 → 0.8.0

package/lib/components/Input/{index.tsx → index.js}

@@ -1,9 +1,8 @@
-import { Text, TextInput, View } from 'react-native';
-
-import { Colors } from '../../configs/constants';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { View, TextInput, Text } from 'react-native';
 import style from './style';
-
-import type { InputProps } from '../../configs/types';
+import { Colors } from '../../configs/constants';
 
 const Input = ({
   variant = 'default',
@@ -18,7 +17,7 @@ const Input = ({
   value,
   maxLength = 100,
   ...props
-}: InputProps) => (
+}) => (
   <View style={style.container}>
     {showLabel && <Text style={style.label}>{label}</Text>}
     <View style={style.inputWrapper}>
@@ -59,4 +58,32 @@ const Input = ({
   </View>
 );
 
+Input.defaultProps = {
+  variant: 'default',
+  disabled: false,
+  leftIcon: null,
+  leftIconWide: false,
+  showLabel: false,
+  label: '',
+  count: false,
+  rightIcon: null,
+  value: '',
+  maxLength: 100,
+  size: 'fixed',
+};
+
+Input.propTypes = {
+  variant: PropTypes.oneOf(['default', 'completed', 'error']),
+  size: PropTypes.oneOf(['fixed', 'fit']),
+  disabled: PropTypes.bool,
+  leftIcon: PropTypes.node,
+  leftIconWide: PropTypes.bool,
+  showLabel: PropTypes.bool,
+  label: PropTypes.string,
+  count: PropTypes.bool,
+  rightIcon: PropTypes.node,
+  value: PropTypes.string,
+  maxLength: PropTypes.number,
+};
+
 export default Input;

package/lib/components/Input/{style.ts → style.js}

@@ -1,10 +1,9 @@
-import { Dimensions, StyleSheet } from 'react-native';
-
-import { borderRadius, Colors } from '../../configs/constants';
+import { Dimensions } from 'react-native';
+import { Colors, borderRadius } from '../../configs/constants';
 
 const { width } = Dimensions.get('window');
 
-export default StyleSheet.create({
+export default {
   container: {
     marginVertical: 8,
   },
@@ -81,11 +80,23 @@ export default StyleSheet.create({
     paddingRight: 2,
     borderRightWidth: 1,
   },
+  rightIconContainer: {
+    position: 'absolute',
+    right: 10,
+    top: 10,
+    height: 42,
+    justifyContent: 'center',
+  },
   count: {
     textAlign: 'right',
     fontSize: 12,
     color: Colors.gray,
     fontFamily: 'poppins_regular',
-    width: '100%',
-  },
-});
+    fixedSize: {
+      width: width - 80,
+    },
+    fitSize: {
+      width: '100%',
+    },
+  },
+};

package/lib/components/InputPin/{index.tsx → index.js}

@@ -1,16 +1,15 @@
-import { times } from 'lodash';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { View } from 'react-native';
-
+import { times } from 'lodash';
 import Text from '../Text';
 import style from './style';
 
-import type { InputPinProps } from '../../configs/types';
-
-const InputPin = ({ values = [] }: InputPinProps) => (
+const InputPin = ({ values = [] }) => (
   <View style={style.container}>
     {times(4, (index) => (
       <View style={style.input} key={`value-${index}`}>
-        <Text size="large" weight="semiBold">
+        <Text size='large' weight='semiBold'>
           {values[index]}
         </Text>
       </View>
@@ -18,4 +17,12 @@ const InputPin = ({ values = [] }: InputPinProps) => (
   </View>
 );
 
+InputPin.defaultProps = {
+  values: [],
+};
+
+InputPin.propTypes = {
+  values: PropTypes.arrayOf(PropTypes.number),
+};
+
 export default InputPin;

package/lib/components/InputPin/{style.ts → style.js}

@@ -1,14 +1,13 @@
-import { Dimensions, StyleSheet } from 'react-native';
-
+import {Dimensions} from 'react-native';
 import { Colors } from '../../configs/constants';
 
 const { width } = Dimensions.get('window');
 
-export default StyleSheet.create({
+export default {
   container: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    width: width - 60,
+    width: width - 60
   },
   input: {
     borderColor: Colors.gray,
@@ -17,6 +16,6 @@ export default StyleSheet.create({
     width: width / 6,
     height: width / 6,
     justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
+    alignItems: 'center'
+  }
+};

package/lib/components/MenuItem/index.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { TouchableOpacity, View } from 'react-native';
+import Feather from 'react-native-vector-icons/Feather';
+import Text from '../Text';
+import { Colors } from '../../configs/constants';
+import style from './style';
+
+const MenuItem = ({icon, text, disabled, onPress, last}) => (
+  <TouchableOpacity
+    style={[
+      style.menuItem,
+      last ? style.last : {},
+      disabled ? style.disabled : {}
+    ]}
+    onPress={onPress}
+    disabled={disabled}
+  >
+    <View style={style.left}>
+      {icon}
+      <Text size='large' style={style.text}>{text}</Text>
+    </View>
+
+    <Feather name='chevron-right' size={15} color={Colors.darkblue} style={style.rightIcon} />
+  </TouchableOpacity>
+);
+
+MenuItem.defaultProps = {
+  icon: null,
+  text: '',
+  last: false,
+  disabled: false,
+  onPress: () => {}
+};
+
+MenuItem.propTypes = {
+  icon: PropTypes.node,
+  text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  last: PropTypes.bool,
+  disabled: PropTypes.bool,
+  onPress: PropTypes.func
+};
+
+export default MenuItem;

package/lib/components/MenuItem/{style.ts → style.js}

@@ -1,8 +1,6 @@
-import { StyleSheet } from 'react-native';
-
 import { Colors } from '../../configs/constants';
 
-export default StyleSheet.create({
+export default {
   // Default MenuItem
   menuItem: {
     backgroundColor: Colors.white,
@@ -14,7 +12,7 @@ export default StyleSheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
     borderBottomWidth: 1,
-    borderBottomColor: Colors.lightblue,
+    borderBottomColor: Colors.lightblue
   },
   left: {
     flexDirection: 'row',
@@ -22,7 +20,7 @@ export default StyleSheet.create({
     alignItems: 'center',
   },
   text: {
-    marginLeft: 10,
+    marginLeft: 10
   },
   rightIcon: {
     height: 20,
@@ -36,9 +34,9 @@ export default StyleSheet.create({
     alignItems: 'center',
   },
   last: {
-    borderBottomColor: Colors.transparent,
+    borderBottomColor: Colors.transparent
   },
   disabled: {
-    opacity: 0.5,
-  },
-});
+    opacity: 0.5
+  }
+};

package/lib/components/NavigationTitle/{index.tsx → index.js}

@@ -1,12 +1,11 @@
-import { Ionicons } from '@expo/vector-icons';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { TouchableOpacity, View } from 'react-native';
-
-import { Colors } from '../../configs/constants';
+import Ionicons from 'react-native-vector-icons/Ionicons';
 import Text from '../Text';
+import { Colors } from '../../configs/constants';
 import style from './style';
 
-import type { NavigationTitleProps } from '../../configs/types';
-
 const NavigationTitle = ({
   type = 'close',
   title,
@@ -14,7 +13,7 @@ const NavigationTitle = ({
   xlarge,
   blockNavigation,
   onPress,
-}: NavigationTitleProps) => (
+}) => (
   <View
     style={[
       style.container,
@@ -26,13 +25,17 @@ const NavigationTitle = ({
       <>
         {type === 'back' && (
           <TouchableOpacity onPress={onPress} style={style.buttonBack}>
-            <Ionicons name="arrow-back-outline" size={20} color={Colors.darkblue} />
+            <Ionicons
+              name='arrow-back-outline'
+              size={20}
+              color={Colors.darkblue}
+            />
           </TouchableOpacity>
         )}
       </>
     )}
     {typeof title === 'string' ? (
-      <Text size={xlarge ? 'extra-large' : 'large'} weight="semiBold">
+      <Text size={xlarge ? 'extra-large' : 'large'} weight='semiBold'>
         {title}
       </Text>
     ) : (
@@ -42,7 +45,7 @@ const NavigationTitle = ({
       <>
         {type === 'close' && (
           <TouchableOpacity onPress={onPress} style={style.button}>
-            <Ionicons name="close-outline" size={24} color={Colors.darkblue} />
+            <Ionicons name='close-outline' size={24} color={Colors.darkblue} />
           </TouchableOpacity>
         )}
       </>
@@ -50,4 +53,22 @@ const NavigationTitle = ({
   </View>
 );
 
+NavigationTitle.defaultProps = {
+  type: 'close',
+  title: ' ',
+  noShadow: false,
+  xlarge: false,
+  blockNavigation: false,
+  onPress: () => {},
+};
+
+NavigationTitle.propTypes = {
+  type: PropTypes.oneOf(['close', 'back']),
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  noShadow: PropTypes.bool,
+  xlarge: PropTypes.bool,
+  blockNavigation: PropTypes.bool,
+  onPress: PropTypes.func,
+};
+
 export default NavigationTitle;

package/lib/components/NavigationTitle/{style.ts → style.js}

@@ -1,10 +1,9 @@
-import { Dimensions, StyleSheet } from 'react-native';
-
+import { Dimensions } from 'react-native';
 import { Colors } from '../../configs/constants';
 
 const { width } = Dimensions.get('window');
 
-export default StyleSheet.create({
+export default {
   container: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -14,20 +13,20 @@ export default StyleSheet.create({
     borderRadius: 10,
     width,
     shadowOffset: { width: 0, height: 3 },
-    shadowOpacity: 0.4,
+    shadowOpacity:  0.4,
     shadowRadius: 3,
     elevation: 5,
-    shadowColor: Colors.lightblue,
+    shadowColor: Colors.lightblue
   },
   noShadow: {
     shadowOpacity: 0,
-    elevation: 0,
+    elevation: 0
   },
   containerClose: {
-    justifyContent: 'space-between',
+    justifyContent: 'space-between'
   },
   containerBack: {
-    justifyContent: 'flex-start',
+    justifyContent: 'flex-start'
   },
   button: {
     height: 30,
@@ -35,7 +34,7 @@ export default StyleSheet.create({
     borderRadius: 15,
     backgroundColor: Colors.lightblue,
     alignItems: 'center',
-    justifyContent: 'center',
+    justifyContent: 'center'
   },
   buttonBack: {
     height: 30,
@@ -44,6 +43,6 @@ export default StyleSheet.create({
     marginRight: 10,
     backgroundColor: Colors.lightblue,
     alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
+    justifyContent: 'center'
+  }
+};

package/lib/components/Notification/index.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { TouchableOpacity, View } from 'react-native';
+import Text from '../Text';
+import ImageResponsive from '../ImageResponsive';
+import { Colors } from '../../configs/constants';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import moment from 'moment';
+import style from './style';
+
+const Notification = ({
+  first,
+  active,
+  hideAvatar,
+  avatar,
+  title,
+  description,
+  date = moment().fromNow(),
+  onPress,
+}) => {
+  return (
+    <TouchableOpacity
+      style={[
+        style.container,
+        first ? style.first : {},
+        active ? style.active : {},
+      ]}
+      onPress={onPress}
+    >
+      {!hideAvatar && (
+        <ImageResponsive source={avatar} avatar style={style.avatar} />
+      )}
+      <View style={style.textContainer}>
+        <View style={style.text}>
+          <View style={style.textInner}>
+            <Text weight='semiBold'>{title}</Text>
+            {active && (
+              <Ionicons
+                name='ellipse'
+                color={Colors.green}
+                size={12}
+                style={style.icon}
+              />
+            )}
+          </View>
+          <Text color='light' size='tiny' style={style.time}>
+            {moment(date).fromNow()}
+          </Text>
+        </View>
+        <Text color='light' size='small' ellipsizeMode='tail' numberOfLines={3}>
+          {description}
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+Notification.defaultProps = {
+  first: false,
+  active: false,
+  hideAvatar: false,
+  avatar: null,
+  title: '',
+  description: '',
+  date: moment().fromNow(),
+  onPress: () => {},
+};
+
+Notification.propTypes = {
+  first: PropTypes.bool,
+  active: PropTypes.bool,
+  hideAvatar: PropTypes.bool,
+  avatar: PropTypes.any,
+  title: PropTypes.string,
+  description: PropTypes.string,
+  date: PropTypes.instanceOf(moment),
+  onPress: PropTypes.func,
+};
+
+export default Notification;

package/lib/components/Notification/{style.ts → style.js}

@@ -1,8 +1,6 @@
-import { StyleSheet } from 'react-native';
-
 import { Colors } from '../../configs/constants';
 
-export default StyleSheet.create({
+export default {
   container: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -11,11 +9,11 @@ export default StyleSheet.create({
     paddingVertical: 8,
     borderLeftWidth: 6,
     borderLeftColor: Colors.transparent,
-    paddingHorizontal: 10,
+    paddingHorizontal: 10
   },
   first: {
     borderTopWidth: 1,
-    borderTopColor: Colors.lightblue,
+    borderTopColor: Colors.lightblue
   },
   active: {
     borderLeftColor: Colors.green,
@@ -25,26 +23,26 @@ export default StyleSheet.create({
     width: 60,
     borderWidth: 1,
     borderColor: Colors.lightblue,
-    marginRight: 15,
+    marginRight: 15
   },
   textContainer: {
     flex: 1,
     justifyContent: 'space-evenly',
-    height: 60,
+    height: 60
   },
   text: {
     flexDirection: 'row',
-    justifyContent: 'space-between',
+    justifyContent: 'space-between'
   },
   textInner: {
     flexDirection: 'row',
-    alignItems: 'center',
+    alignItems: 'center'
   },
   time: {
-    alignSelf: 'flex-start',
+    alignSelf: 'flex-start'
   },
   icon: {
     marginLeft: 5,
-    marginTop: 2,
-  },
-});
+    marginTop: 2
+  }
+};

package/lib/components/PreventDoubleClick/index.js

@@ -0,0 +1,21 @@
+import React, { PureComponent } from 'react';
+import { debounce } from 'lodash';
+
+const withPreventDoubleClick = (WrappedComponent) => {
+  class PreventDoubleClick extends PureComponent {
+    debouncedOnPress = () => {
+      this.props.onPress && this.props.onPress();
+    }
+
+    onPress = debounce(this.debouncedOnPress, 300, { leading: true, trailing: false });
+
+    render() {
+      return <WrappedComponent {...this.props} onPress={this.onPress} />;
+    }
+  }
+
+  PreventDoubleClick.displayName = `withPreventDoubleClick(${WrappedComponent.displayName ||WrappedComponent.name})`
+  return PreventDoubleClick;
+}
+
+export default withPreventDoubleClick;

package/lib/components/Select/index.js

@@ -0,0 +1,89 @@
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import PropTypes from 'prop-types';
+import DropDownPicker from 'react-native-dropdown-picker';
+import style, {
+  includesSelect,
+  placeholderStyle,
+  listItemLabelStyle,
+  listItemContainerStyle,
+  selectedItemLabelStyle,
+  textStyle,
+} from './style';
+import { useEffect } from 'react';
+
+const Select = ({
+  value,
+  onValueChange,
+  items = [],
+  variant = 'default',
+  disabled,
+  fitToContainer,
+  placeholder,
+}) => {
+  const [open, setOpen] = useState(false);
+  const [val, setVal] = useState(value);
+
+  useEffect(() => {
+    setVal(value);
+  }, [value]);
+
+  return (
+    <View
+      style={[
+        style.container,
+        disabled ? style.disabled : {},
+        fitToContainer ? style.fit : {},
+      ]}
+    >
+      <DropDownPicker
+        style={includesSelect[variant]}
+        open={open}
+        value={val}
+        items={items}
+        setOpen={setOpen}
+        setValue={setVal}
+        onSelectItem={(selected) => onValueChange(selected.value)}
+        disabled={disabled}
+        placeholder={placeholder}
+        placeholderStyle={placeholderStyle}
+        listItemLabelStyle={listItemLabelStyle}
+        listItemContainerStyle={listItemContainerStyle}
+        selectedItemLabelStyle={selectedItemLabelStyle}
+        listMode='MODAL'
+        textStyle={textStyle}
+        dropDownContainerStyle={{
+          ...includesSelect[variant],
+          height: 'auto',
+        }}
+      />
+    </View>
+  );
+};
+
+Select.defaultProps = {
+  variant: 'default',
+  placeholder: ' ',
+  disabled: false,
+  fitToContainer: false,
+  onValueChange: () => {},
+  value: null,
+  items: [],
+};
+
+Select.propTypes = {
+  variant: PropTypes.oneOf(['default', 'completed', 'error']),
+  placeholder: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
+  fitToContainer: PropTypes.bool,
+  onValueChange: PropTypes.func,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string,
+      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    })
+  ),
+};
+
+export default Select;