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

package/index.js

@@ -1,4 +1,3 @@
+export {asyncLoadFont} from './configs/loadFonts';
+export {Colors, MapStyle, ConstantsWS, HiringStatus, CouponStatus, NotificationsTypes} from './configs/constants';
 export * from './components';
-export { Colors, ConstantsWS, CouponStatus, HiringStatus, MapStyle, NotificationsTypes } from './configs/constants';
-export * from './configs/types';
-export { useDebounce, useLoadFonts } from './hooks';

package/lib/components/Button/index.js

@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { TouchableOpacity, ActivityIndicator } from 'react-native';
+import withPreventDoubleClick from './../PreventDoubleClick';
+import { Colors } from '../../configs/constants';
+import style from './style';
+
+const Button = ({
+  onPress,
+  disabled,
+  isLoading,
+  bordered,
+  variant = 'primary',
+  size = 'medium',
+  noShadow,
+  style: customStyle,
+  debounceDelay = 0,
+  children,
+}) => {
+  const [isDisabled, setIsDisabled] = useState(disabled);
+
+  useEffect(() => setIsDisabled(disabled), [disabled]);
+
+  const getSpinnerColor = () => {
+    switch (variant) {
+      case 'primary':
+      case 'inverted':
+      case 'error':
+        return Colors.white;
+      default:
+        return Colors.darkblue;
+    }
+  };
+
+  const handleTap = () => {
+    onPress();
+    setIsDisabled(true);
+    setTimeout(() => {
+      setIsDisabled(false);
+    }, debounceDelay);
+  };
+
+  return (
+    <TouchableOpacity
+      style={[
+        style.button,
+        style[variant],
+        style[size],
+        bordered ? style.bordered : {},
+        isDisabled ? style.disabled : {},
+        noShadow ? style.noShadow : {},
+        customStyle,
+      ]}
+      disabled={isLoading || isDisabled}
+      onPress={handleTap}
+    >
+      {isLoading ? (
+        <ActivityIndicator color={getSpinnerColor()} size={28} />
+      ) : (
+        children
+      )}
+    </TouchableOpacity>
+  );
+};
+
+Button.defaultProps = {
+  children: null,
+  disabled: false,
+  isLoading: false,
+  bordered: false,
+  noShadow: false,
+  variant: 'primary',
+  size: 'medium',
+  style: {},
+  onPress: () => {},
+  debounceDelay: 0,
+};
+
+Button.propTypes = {
+  children: PropTypes.node,
+  disabled: PropTypes.bool,
+  isLoading: PropTypes.bool,
+  bordered: PropTypes.bool,
+  noShadow: PropTypes.bool,
+  variant: PropTypes.oneOf([
+    'brightblue',
+    'brightviolet',
+    'darkyellow',
+    'dim',
+    'electricblue',
+    'error',
+    'inverted',
+    'light',
+    'lightgreen',
+    'primary',
+    'secondary',
+  ]),
+  size: PropTypes.oneOf(['tiny', 'small', 'medium', 'fit', 'icon']),
+  style: PropTypes.any,
+  onPress: PropTypes.func,
+  debounceDelay: PropTypes.number,
+};
+
+export default withPreventDoubleClick(Button);

package/lib/components/Button/{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 {
   // Default button shape
   button: {
     height: 50,
@@ -38,9 +37,9 @@ export default StyleSheet.create({
     shadowColor: Colors.dimgray,
   },
   light: {
-    borderColor: Colors.gray,
-    backgroundColor: Colors.gray,
-    shadowColor: Colors.gray,
+    borderColor: Colors.lightblue,
+    backgroundColor: Colors.lightblue,
+    shadowColor: Colors.lightblue,
   },
   brightblue: {
     borderColor: Colors.brightblue,
@@ -108,4 +107,4 @@ export default StyleSheet.create({
     shadowColor: Colors.transparent,
     elevation: 0,
   },
-});
+};

package/lib/components/Card/index.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { View, TouchableOpacity } from 'react-native';
+import withPreventDoubleClick from '../PreventDoubleClick';
+import style from './style';
+
+const TappedTouchableOpacity = withPreventDoubleClick(TouchableOpacity);
+
+const Card = (
+  { children, isButton, onPress, noShadow, style: customStyle },
+  ...props
+) => (
+  <>
+    {isButton ? (
+      <TappedTouchableOpacity
+        onPress={onPress}
+        style={[style.card, customStyle, noShadow ? style.noShadow : {}]}
+        {...props}
+      >
+        {children}
+      </TappedTouchableOpacity>
+    ) : (
+      <View
+        style={[style.card, customStyle, noShadow ? style.noShadow : {}]}
+        {...props}
+      >
+        {children}
+      </View>
+    )}
+  </>
+);
+
+Card.defaultProps = {
+  style: {},
+  children: null,
+  isButton: false,
+  noShadow: false,
+  onPress: () => {},
+};
+
+Card.propTypes = {
+  style: PropTypes.any,
+  children: PropTypes.node,
+  isButton: PropTypes.bool,
+  noShadow: PropTypes.bool,
+  onPress: PropTypes.func,
+};
+
+export default Card;

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

@@ -1,11 +1,10 @@
-import { Dimensions, Platform, StyleSheet } from 'react-native';
-
-import { borderRadius, Colors } from '../../configs/constants';
+import { Dimensions, Platform } from 'react-native';
+import { Colors, borderRadius } from '../../configs/constants';
 
 const { width } = Dimensions.get('window');
 const isAndroid = Platform.OS === 'android';
 
-export default StyleSheet.create({
+export default {
   card: {
     margin: 8,
     minHeight: 50,
@@ -31,4 +30,4 @@ export default StyleSheet.create({
     elevation: 0,
     borderColor: Colors.lightblue,
   },
-});
+};

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

@@ -1,21 +1,20 @@
-import { Ionicons } from '@expo/vector-icons';
+import React from 'react';
 import {
-  Keyboard,
-  KeyboardAvoidingView,
   Modal,
-  Platform,
   TouchableOpacity,
-  TouchableWithoutFeedback,
   View,
+  Keyboard,
+  TouchableWithoutFeedback,
+  Platform,
+  KeyboardAvoidingView,
 } from 'react-native';
-
-import { Colors } from '../../configs/constants';
-import Button from '../Button';
+import PropTypes from 'prop-types';
+import Ionicons from 'react-native-vector-icons/Ionicons';
 import Text from '../Text';
+import Button from '../Button';
+import { Colors } from '../../configs/constants';
 import style from './style';
 
-import type { ConfirmationModalProps } from '../../configs/types';
-
 const ConfirmationModal = ({
   visible,
   title,
@@ -30,18 +29,25 @@ const ConfirmationModal = ({
   inverted,
   isPrime,
   children,
-}: ConfirmationModalProps) => (
-  <Modal animationType="slide" transparent visible={visible} onRequestClose={() => {}}>
-    <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+}) => (
+  <Modal
+    animationType='slide'
+    transparent={true}
+    visible={visible}
+    onRequestClose={() => {}}
+  >
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+    >
       <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
         <View style={style.container}>
           <View style={style.content}>
             <View style={alertMode && !closeButton ? {} : style.title}>
               <Text
                 style={alertMode && !closeButton ? {} : style.titleText}
-                size="large"
+                size='large'
                 align={alertMode && !closeButton ? 'center' : 'left'}
-                weight="semiBold"
+                weight='semiBold'
                 numberOfLines={1}
               >
                 {title}
@@ -52,33 +58,46 @@ const ConfirmationModal = ({
                     if (onClose) {
                       onClose();
                     } else {
-                      if (onCancel) {
-                        onCancel();
-                      }
+                      onCancel();
                     }
                   }}
                   style={style.button}
                 >
-                  <Ionicons name="close-outline" size={24} color={Colors.darkblue} />
+                  <Ionicons
+                    name='close-outline'
+                    size={24}
+                    color={Colors.darkblue}
+                  />
                 </TouchableOpacity>
               )}
             </View>
 
-            <View style={infoMode ? style.bodyInfo : style.body}>{children}</View>
+            <View style={infoMode ? style.bodyInfo : style.body}>
+              {children}
+            </View>
 
             {!infoMode && (
               <>
                 {alertMode ? (
-                  <Button size="fit" variant={inverted ? 'inverted' : 'primary'} onPress={onConfirm}>
-                    <Text size="large" color={isPrime ? 'lightgold' : 'white'}>
+                  <Button
+                    size='fit'
+                    variant={inverted ? 'inverted' : 'primary'}
+                    onPress={onConfirm}
+                  >
+                    <Text size='large' color={isPrime ? 'lightgold' : 'white'}>
                       {confirmText}
                     </Text>
                   </Button>
                 ) : (
                   <View style={style.buttons}>
                     {onCancel && (
-                      <Button size="small" bordered variant={inverted ? 'inverted' : 'primary'} onPress={onCancel}>
-                        <Text size="large">{cancelText}</Text>
+                      <Button
+                        size='small'
+                        bordered
+                        variant={inverted ? 'inverted' : 'primary'}
+                        onPress={onCancel}
+                      >
+                        <Text size='large'>{cancelText}</Text>
                       </Button>
                     )}
                     <Button
@@ -86,7 +105,10 @@ const ConfirmationModal = ({
                       size={onCancel ? 'small' : 'fit'}
                       onPress={onConfirm}
                     >
-                      <Text size="large" color={isPrime ? 'lightgold' : 'white'}>
+                      <Text
+                        size='large'
+                        color={isPrime ? 'lightgold' : 'white'}
+                      >
                         {confirmText}
                       </Text>
                     </Button>
@@ -101,4 +123,36 @@ const ConfirmationModal = ({
   </Modal>
 );
 
+ConfirmationModal.defaultProps = {
+  visible: false,
+  title: ' ',
+  confirmText: ' ',
+  cancelText: ' ',
+  onCancel: () => {},
+  onConfirm: () => {},
+  onClose: null,
+  alertMode: false,
+  closeButton: false,
+  infoMode: false,
+  inverted: false,
+  isPrime: false,
+  children: null,
+};
+
+ConfirmationModal.propTypes = {
+  visible: PropTypes.bool,
+  title: PropTypes.string,
+  confirmText: PropTypes.string,
+  cancelText: PropTypes.string,
+  onCancel: PropTypes.func,
+  onConfirm: PropTypes.func,
+  onClose: PropTypes.func,
+  alertMode: PropTypes.bool,
+  closeButton: PropTypes.bool,
+  infoMode: PropTypes.bool,
+  inverted: PropTypes.bool,
+  isPrime: PropTypes.bool,
+  children: PropTypes.node,
+};
+
 export default ConfirmationModal;

package/lib/components/ConfirmationModal/{style.tsx → style.js}

@@ -1,15 +1,14 @@
-import { Dimensions, StyleSheet } from 'react-native';
-
+import { Dimensions } from 'react-native';
 import { Colors } from '../../configs/constants';
 
 const { width, height } = Dimensions.get('window');
 
-export default StyleSheet.create({
+export default {
   container: {
     backgroundColor: 'rgba(0,0,0,0.3)',
     height,
     justifyContent: 'center',
-    alignItems: 'center',
+    alignItems: 'center'
   },
   content: {
     width: width - 60,
@@ -17,30 +16,30 @@ export default StyleSheet.create({
     padding: 20,
     borderRadius: 20,
     shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.4,
+    shadowOpacity:  0.4,
     shadowRadius: 3,
     elevation: 5,
-    shadowColor: Colors.gray,
+    shadowColor: Colors.gray
   },
   title: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    alignItems: 'center',
+    alignItems: 'center'
   },
   titleText: {
-    width: '90%',
+    width: '90%'
   },
   body: {
     marginTop: 20,
-    marginBottom: 35,
+    marginBottom: 35
   },
   bodyInfo: {
-    marginTop: 20,
+    marginTop: 20
   },
   buttons: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    alignItems: 'center',
+    alignItems: 'center'
   },
   button: {
     height: 30,
@@ -48,6 +47,6 @@ export default StyleSheet.create({
     borderRadius: 15,
     backgroundColor: Colors.lightblue,
     alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
+    justifyContent: 'center'
+  }
+};

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

@@ -1,10 +1,14 @@
-import { Keyboard, ScrollView, TouchableWithoutFeedback, View } from 'react-native';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { SafeAreaView } from 'react-native-safe-area-context';
-
+import {
+  TouchableWithoutFeedback,
+  Keyboard,
+  ScrollView,
+  View,
+} from 'react-native';
 import style from './style';
 
-import type { ContainerProps } from '../../configs/types';
-
 const Container = ({
   fullScreen = true,
   enableScroll,
@@ -12,13 +16,16 @@ const Container = ({
   scrollStyle,
   children,
   ...props
-}: ContainerProps) => (
-  <SafeAreaView {...props} style={[fullScreen ? style.fullScreen : {}, customStyle]}>
+}) => (
+  <SafeAreaView
+    {...props}
+    style={[fullScreen ? style.fullScreen : {}, customStyle]}
+  >
     {enableScroll ? (
       <ScrollView
         contentContainerStyle={scrollStyle}
         showsVerticalScrollIndicator={false}
-        keyboardDismissMode="on-drag"
+        keyboardDismissMode='on-drag'
       >
         {children}
       </ScrollView>
@@ -30,4 +37,18 @@ const Container = ({
   </SafeAreaView>
 );
 
+Container.defaultProps = {
+  fullScreen: true,
+  enableScroll: false,
+  style: {},
+  scrollStyle: {},
+};
+
+Container.propTypes = {
+  fullScreen: PropTypes.bool,
+  enableScroll: PropTypes.bool,
+  style: PropTypes.any,
+  scrollStyle: PropTypes.any,
+};
+
 export default Container;

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

@@ -1,13 +1,12 @@
-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 {
   fullScreen: {
     flex: 1,
     width,
-    backgroundColor: Colors.white,
-  },
-});
+    backgroundColor: Colors.white
+  }
+};

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

@@ -1,47 +1,43 @@
-import { Alert, Linking, Platform, TouchableOpacity } from 'react-native';
-import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
+import MapView, { PROVIDER_GOOGLE } from "react-native-maps";
+import PropTypes from "prop-types";
+import React from "react";
+import { Platform, TouchableOpacity, Alert, Linking } from "react-native";
+import { MapStyle } from "../../configs/constants";
+import styles from "./style";
 
-import { MapStyle } from '../../configs/constants';
-import styles from './style';
-
-import type { CustomChatViewProps } from '../../configs/types';
-
-const CustomChatView = ({ currentMessage, containerStyle, mapViewStyle }: CustomChatViewProps) => {
+const CustomChatView = ({ currentMessage, containerStyle, mapViewStyle }) => {
   const openMapAsync = async () => {
-    const { location } = currentMessage || {};
-
-    if (!location) {
-      Alert.alert('Location data is missing.');
-      return null;
-    }
+    const { location = {} } = currentMessage;
 
     const mapScheme = Platform.select({
-      ios: 'maps:0,0?q=',
-      android: 'geo:0,0?q=',
+      ios: "maps:0,0?q=",
+      android: "geo:0,0?q=",
     });
     const latLng = `${location.latitude},${location.longitude}`;
-    const label = `${currentMessage?.user?.name ?? ''}`;
+    const label = `${currentMessage.user.name}`;
 
     const url = Platform.select({
       ios: `${mapScheme}${label}@${latLng}`,
       android: `${mapScheme}${latLng}(${label})`,
-    }) as string;
+    });
 
     try {
       const supported = await Linking.canOpenURL(url);
       if (supported) {
         return Linking.openURL(url);
       }
-      Alert.alert('Opening the map is not supported.');
+      Alert.alert("Opening the map is not supported.");
     } catch ({ message }) {
       Alert.alert(message);
     }
-    return null;
   };
 
-  if (currentMessage?.location) {
+  if (currentMessage.location) {
     return (
-      <TouchableOpacity style={[styles.container, containerStyle]} onPress={openMapAsync}>
+      <TouchableOpacity
+        style={[styles.container, containerStyle]}
+        onPress={openMapAsync}
+      >
         <MapView
           style={[styles.mapView, mapViewStyle]}
           region={{
@@ -62,4 +58,16 @@ const CustomChatView = ({ currentMessage, containerStyle, mapViewStyle }: Custom
   return null;
 };
 
+CustomChatView.propTypes = {
+  currentMessage: PropTypes.object,
+  containerStyle: PropTypes.object,
+  mapViewStyle: PropTypes.object,
+};
+
+CustomChatView.defaultProps = {
+  currentMessage: {},
+  containerStyle: {},
+  mapViewStyle: {},
+};
+
 export default CustomChatView;

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

@@ -1,7 +1,7 @@
 export default {
   container: {},
   mapView: {
-    flexDirection: 'column-reverse',
+    flexDirection: "column-reverse",
     width: 250,
     height: 150,
     borderRadius: 13,