@holper/react-native-holper-storybook 0.6.101 → 0.7.0

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

@@ -1,15 +1,16 @@
-import { Dimensions } from 'react-native';
+import { Dimensions, StyleSheet } from 'react-native';
+
 import { Colors } from '../../configs/constants';
 
 const { width, height } = Dimensions.get('window');
 
-export default {
+export default StyleSheet.create({
   container: {
     backgroundColor: 'rgba(0,0,0,0.9)',
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    position: 'relative'
+    position: 'relative',
   },
   closeIcon: {
     position: 'absolute',
@@ -21,17 +22,17 @@ export default {
     borderRadius: 15,
     backgroundColor: Colors.lightblue,
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   body: {
     width,
     height,
     alignSelf: 'center',
-    position: 'relative'
+    position: 'relative',
   },
   activityIndicator: {
-    top: (height / 2) - 100,
-    left: (width / 2) - 20,
-    position: 'absolute'
-  }
-};
+    top: height / 2 - 100,
+    left: width / 2 - 20,
+    position: 'absolute',
+  },
+});

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

@@ -1,8 +1,9 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { View, TextInput, Text } from 'react-native';
-import style from './style';
+import { Text, TextInput, View } from 'react-native';
+
 import { Colors } from '../../configs/constants';
+import style from './style';
+
+import type { InputProps } from '../../configs/types';
 
 const Input = ({
   variant = 'default',
@@ -17,7 +18,7 @@ const Input = ({
   value,
   maxLength = 100,
   ...props
-}) => (
+}: InputProps) => (
   <View style={style.container}>
     {showLabel && <Text style={style.label}>{label}</Text>}
     <View style={style.inputWrapper}>
@@ -58,32 +59,4 @@ 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.js → components/Input/style.ts}

@@ -1,9 +1,10 @@
-import { Dimensions } from 'react-native';
-import { Colors, borderRadius } from '../../configs/constants';
+import { Dimensions, StyleSheet } from 'react-native';
+
+import { borderRadius, Colors } from '../../configs/constants';
 
 const { width } = Dimensions.get('window');
 
-export default {
+export default StyleSheet.create({
   container: {
     marginVertical: 8,
   },
@@ -80,23 +81,11 @@ export default {
     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',
-    fixedSize: {
-      width: width - 80,
-    },
-    fitSize: {
-      width: '100%',
-    },
-  },
-};
+    width: '100%',
+  },
+});

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

@@ -1,15 +1,16 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { View } from 'react-native';
 import { times } from 'lodash';
+import { View } from 'react-native';
+
 import Text from '../Text';
 import style from './style';
 
-const InputPin = ({ values = [] }) => (
+import type { InputPinProps } from '../../configs/types';
+
+const InputPin = ({ values = [] }: InputPinProps) => (
   <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>
@@ -17,12 +18,4 @@ const InputPin = ({ values = [] }) => (
   </View>
 );
 
-InputPin.defaultProps = {
-  values: [],
-};
-
-InputPin.propTypes = {
-  values: PropTypes.arrayOf(PropTypes.number),
-};
-
 export default InputPin;

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

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

package/components/MenuItem/index.tsx

@@ -0,0 +1,25 @@
+import { Feather } from '@expo/vector-icons';
+import { TouchableOpacity, View } from 'react-native';
+
+import { Colors } from '../../configs/constants';
+import Text from '../Text';
+import style from './style';
+
+import type { MenuItemProps } from '../../configs/types';
+
+const MenuItem = ({ icon, text, disabled, onPress, last }: MenuItemProps) => (
+  <TouchableOpacity
+    style={[style.menuItem, last ? style.last : {}, disabled ? style.disabled : {}]}
+    onPress={onPress}
+    disabled={disabled}
+  >
+    <View style={style.left}>
+      {icon}
+      <Text style={style.text}>{text}</Text>
+    </View>
+
+    <Feather name="chevron-right" size={16} color={Colors.darkblue} style={style.rightIcon} />
+  </TouchableOpacity>
+);
+
+export default MenuItem;

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

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

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

@@ -1,11 +1,12 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import { Ionicons } from '@expo/vector-icons';
 import { TouchableOpacity, View } from 'react-native';
-import Ionicons from 'react-native-vector-icons/Ionicons';
-import Text from '../Text';
+
 import { Colors } from '../../configs/constants';
+import Text from '../Text';
 import style from './style';
 
+import type { NavigationTitleProps } from '../../configs/types';
+
 const NavigationTitle = ({
   type = 'close',
   title,
@@ -13,7 +14,7 @@ const NavigationTitle = ({
   xlarge,
   blockNavigation,
   onPress,
-}) => (
+}: NavigationTitleProps) => (
   <View
     style={[
       style.container,
@@ -25,17 +26,13 @@ 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>
     ) : (
@@ -45,7 +42,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>
         )}
       </>
@@ -53,22 +50,4 @@ 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.js → components/NavigationTitle/style.ts}

@@ -1,9 +1,10 @@
-import { Dimensions } from 'react-native';
+import { Dimensions, StyleSheet } from 'react-native';
+
 import { Colors } from '../../configs/constants';
 
 const { width } = Dimensions.get('window');
 
-export default {
+export default StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -13,20 +14,20 @@ export default {
     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,
@@ -34,7 +35,7 @@ export default {
     borderRadius: 15,
     backgroundColor: Colors.lightblue,
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   buttonBack: {
     height: 30,
@@ -43,6 +44,6 @@ export default {
     marginRight: 10,
     backgroundColor: Colors.lightblue,
     alignItems: 'center',
-    justifyContent: 'center'
-  }
-};
+    justifyContent: 'center',
+  },
+});

package/components/Notification/index.tsx

@@ -0,0 +1,44 @@
+import { Ionicons } from '@expo/vector-icons';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import { TouchableOpacity, View } from 'react-native';
+
+import { Colors } from '../../configs/constants';
+import ImageResponsive from '../ImageResponsive';
+import Text from '../Text';
+import style from './style';
+
+import type { NotificationProps } from '../../configs/types';
+
+dayjs.extend(relativeTime);
+
+const Notification = ({
+  first,
+  active,
+  hideAvatar,
+  avatar,
+  title,
+  description,
+  date = dayjs().fromNow(),
+  onPress,
+}: NotificationProps) => (
+  <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}>
+          {dayjs(date).fromNow()}
+        </Text>
+      </View>
+      <Text color="light" size="small" ellipsizeMode="tail" numberOfLines={3}>
+        {description}
+      </Text>
+    </View>
+  </TouchableOpacity>
+);
+
+export default Notification;

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

@@ -1,6 +1,8 @@
+import { StyleSheet } from 'react-native';
+
 import { Colors } from '../../configs/constants';
 
-export default {
+export default StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -9,11 +11,11 @@ export default {
     paddingVertical: 8,
     borderLeftWidth: 6,
     borderLeftColor: Colors.transparent,
-    paddingHorizontal: 10
+    paddingHorizontal: 10,
   },
   first: {
     borderTopWidth: 1,
-    borderTopColor: Colors.lightblue
+    borderTopColor: Colors.lightblue,
   },
   active: {
     borderLeftColor: Colors.green,
@@ -23,26 +25,26 @@ export default {
     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/components/PreventDoubleClick/index.tsx

@@ -0,0 +1,28 @@
+import type { ComponentType } from 'react';
+
+import { debounce } from 'lodash';
+import { PureComponent } from 'react';
+
+import type { withPreventDoubleClickProps } from '../../configs/types';
+
+function withPreventDoubleClick<P extends withPreventDoubleClickProps>(WrappedComponent: ComponentType<P>) {
+  class PreventDoubleClick extends PureComponent<P> {
+    debouncedOnPress = () => {
+      if (this.props.onPress) {
+        this.props.onPress();
+      }
+    };
+
+    onPress = debounce(this.debouncedOnPress, 300, { leading: true, trailing: false });
+    static displayName: string;
+
+    render() {
+      return <WrappedComponent {...this.props} onPress={this.onPress} />;
+    }
+  }
+
+  PreventDoubleClick.displayName = `withPreventDoubleClick(${WrappedComponent.displayName || WrappedComponent.name})`;
+  return PreventDoubleClick;
+}
+
+export default withPreventDoubleClick;

package/components/Select/index.tsx

@@ -0,0 +1,51 @@
+import { Feather } from '@expo/vector-icons';
+import { View } from 'react-native';
+import RNPickerSelect from 'react-native-picker-select';
+
+import style from './style';
+
+import type { SelectProps } from '../../configs/types';
+
+const Select = ({
+  disabled,
+  fitToContainer,
+  items = [],
+  onValueChange,
+  placeholder,
+  value = '',
+  variant = 'default',
+}: SelectProps) => (
+  <View style={[style.container, disabled ? style.disabled : {}, fitToContainer ? style.fit : {}]}>
+    <RNPickerSelect
+      value={value}
+      onValueChange={(val) => onValueChange?.(val)}
+      disabled={disabled}
+      placeholder={{
+        label: placeholder,
+        value: '',
+        color: style.placeholderStyle.color,
+      }}
+      items={items}
+      Icon={() => <Feather name="chevron-down" size={24} style={style.iconStyle} />}
+      useNativeAndroidPickerStyle={false}
+      pickerProps={{ mode: 'dropdown', enabled: !disabled, itemStyle: style.itemStyle }}
+      style={{
+        inputIOSContainer: { pointerEvents: 'none', ...style.basicStyle, ...style[`${variant}Container`] },
+        inputAndroidContainer: { ...style.basicStyle, ...style[`${variant}Container`] },
+        inputIOS: {
+          ...style.fontStyle,
+          ...(variant === 'error' ? style.errorFontStyle : {}),
+        },
+        inputAndroid: {
+          ...style.fontStyle,
+          ...(variant === 'error' ? style.errorFontStyle : {}),
+        },
+        placeholder: style.placeholderStyle,
+        chevronUp: style.selectIcon,
+        chevronDown: style.selectIcon,
+      }}
+    />
+  </View>
+);
+
+export default Select;

package/components/Select/style.ts

@@ -0,0 +1,64 @@
+import { Dimensions, StyleSheet } from 'react-native';
+
+import { borderRadius, Colors } from '../../configs/constants';
+
+const { width } = Dimensions.get('window');
+
+export default StyleSheet.create({
+  container: {
+    width: width - 60,
+    position: 'relative',
+  },
+  fit: {
+    width: '100%',
+    position: 'relative',
+  },
+  selectIcon: {
+    marginTop: 20,
+    marginRight: 15,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  basicStyle: {
+    height: 50,
+    width: '100%',
+    borderRadius,
+    borderWidth: 1,
+    paddingHorizontal: 10,
+    backgroundColor: Colors.white,
+    marginVertical: 6,
+  },
+  defaultContainer: {
+    borderColor: Colors.midblue,
+  },
+  completedContainer: {
+    borderColor: Colors.green,
+  },
+  errorContainer: {
+    borderColor: Colors.red,
+  },
+  fontStyle: {
+    flex: 1,
+    color: Colors.darkblue,
+    fontFamily: 'poppins_regular',
+  },
+  errorFontStyle: {
+    color: Colors.red,
+  },
+  placeholderStyle: {
+    fontSize: 14,
+    fontFamily: 'poppins_regular',
+    color: Colors.midblue,
+  },
+  iconStyle: {
+    marginRight: 10,
+    marginTop: 12,
+    color: Colors.darkblue,
+  },
+  itemStyle: {
+    color: Colors.darkblue,
+    fontFamily: 'poppins_regular',
+    fontSize: 16,
+  },
+});