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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Chromatic
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/{readme.md → README.md}

@@ -8,31 +8,29 @@ To: `"main": "lib/index.js",`
 
 And revert the change after publish.
 
-
-
 #### Publish the library for npm
 
 Run the command: `npm publish` this will build the lib before publishing.
 
 #### How to set up
-`import { asyncLoadFont } from  from 'react-native-holper-storybook';` and call the `asyncLoadFont` function in your app entry point.
+
+`import { useLoadFonts } from  from 'react-native-holper-storybook';` and call the `useLoadFonts` function in your app entry point.
 
 ```
-import React, { useEffect, useState } from 'react';
-import { asyncLoadFont } from 'react-native-holper-storybook';
+import { useEffect, useState } from 'react';
+import { useLoadFonts } from 'react-native-holper-storybook';
 
 export default function App() {
-  const [fontsLoaded, setFontsLoaded] = useState(false);
+  const { loaded, error } = useLoadFonts();
 
   useEffect(() => {
-    (async function() {
-      await asyncLoadFont;
-      setFontsLoaded(true);
-    })();
-  }, []);
-
-  if (!fontsLoaded) {
-    return <View/>;
+    if (loaded || error) {
+      SplashScreen.hideAsync();
+    }
+  }, [loaded, error]);
+
+  if (!loaded && !error) {
+    return null;
   }
 
   return (
@@ -41,25 +39,26 @@ export default function App() {
 }
 ```
 
-#### Using FlashMessage
-This library uses https://www.npmjs.com/package/react-native-flash-message, in order to use it, include `<FlashMessage/>` in you root component.
+#### Using Toast
+
+This library uses https://github.com/gunnartorfis/sonner-native, in order to use it, include `<Toaster />` in you root component.
 
 ```
 import React from 'react';
 import { View } from 'react-native';
-import { FlashMessage } from 'react-native-holper-storybook';
+import { Toaster } from 'react-native-holper-storybook';
 
 export default function App() {
   return (
     <View>
         ...
-        <FlashMessage />
+        <Toaster />
     </View>
   );
 }
 ```
 
-###### Sending a messages
+#### Sending a messages
 
 ```
 import React from 'react';
@@ -79,4 +78,4 @@ export default MyComponent = () => {
     </View>
   );
 }
-```
+```

package/index.js

@@ -1,3 +1,4 @@
-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.tsx

@@ -0,0 +1,66 @@
+import { useEffect, useState } from 'react';
+import { ActivityIndicator, TouchableOpacity } from 'react-native';
+
+import { Colors } from '../../configs/constants';
+import withPreventDoubleClick from './../PreventDoubleClick';
+import style from './style';
+
+import type { ButtonProps } from '../../configs/types';
+
+const Button = ({
+  onPress,
+  disabled,
+  isLoading,
+  bordered,
+  variant = 'primary',
+  size = 'medium',
+  noShadow,
+  style: customStyle,
+  debounceDelay = 0,
+  children,
+}: ButtonProps) => {
+  const [isDisabled, setIsDisabled] = useState<boolean>(disabled || false);
+
+  useEffect(() => setIsDisabled(disabled || false), [disabled]);
+
+  const getSpinnerColor = () => {
+    switch (variant) {
+      case 'primary':
+      case 'inverted':
+      case 'error':
+        return Colors.white;
+      default:
+        return Colors.darkblue;
+    }
+  };
+
+  const handleTap = () => {
+    if (onPress) {
+      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>
+  );
+};
+
+export default withPreventDoubleClick(Button);

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

package/lib/components/Card/index.tsx

@@ -0,0 +1,33 @@
+import type { TouchableOpacityProps, ViewProps } from 'react-native';
+
+import { TouchableOpacity, View } from 'react-native';
+
+import withPreventDoubleClick from '../PreventDoubleClick';
+import style from './style';
+
+import type { CardProps } from '../../configs/types';
+
+const TappedTouchableOpacity = withPreventDoubleClick(TouchableOpacity);
+
+const Card = (
+  { children, isButton, onPress, noShadow, style: customStyle }: CardProps,
+  ...props: (TouchableOpacityProps & ViewProps)[]
+) => (
+  <>
+    {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>
+    )}
+  </>
+);
+
+export default Card;

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

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

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

@@ -1,20 +1,21 @@
-import React from 'react';
+import { Ionicons } from '@expo/vector-icons';
 import {
+  Keyboard,
+  KeyboardAvoidingView,
   Modal,
+  Platform,
   TouchableOpacity,
-  View,
-  Keyboard,
   TouchableWithoutFeedback,
-  Platform,
-  KeyboardAvoidingView,
+  View,
 } from 'react-native';
-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 Button from '../Button';
+import Text from '../Text';
 import style from './style';
 
+import type { ConfirmationModalProps } from '../../configs/types';
+
 const ConfirmationModal = ({
   visible,
   title,
@@ -29,25 +30,18 @@ const ConfirmationModal = ({
   inverted,
   isPrime,
   children,
-}) => (
-  <Modal
-    animationType='slide'
-    transparent={true}
-    visible={visible}
-    onRequestClose={() => {}}
-  >
-    <KeyboardAvoidingView
-      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-    >
+}: ConfirmationModalProps) => (
+  <Modal animationType="slide" transparent 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}
@@ -58,46 +52,33 @@ const ConfirmationModal = ({
                     if (onClose) {
                       onClose();
                     } else {
-                      onCancel();
+                      if (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
@@ -105,10 +86,7 @@ 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>
@@ -123,36 +101,4 @@ 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.js → style.tsx}

@@ -1,14 +1,15 @@
-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.3)',
     height,
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
   },
   content: {
     width: width - 60,
@@ -16,30 +17,30 @@ export default {
     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,
@@ -47,6 +48,6 @@ export default {
     borderRadius: 15,
     backgroundColor: Colors.lightblue,
     alignItems: 'center',
-    justifyContent: 'center'
-  }
-};
+    justifyContent: 'center',
+  },
+});

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

@@ -1,14 +1,10 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import { Keyboard, ScrollView, TouchableWithoutFeedback, View } from 'react-native';
 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,
@@ -16,16 +12,13 @@ const Container = ({
   scrollStyle,
   children,
   ...props
-}) => (
-  <SafeAreaView
-    {...props}
-    style={[fullScreen ? style.fullScreen : {}, customStyle]}
-  >
+}: ContainerProps) => (
+  <SafeAreaView {...props} style={[fullScreen ? style.fullScreen : {}, customStyle]}>
     {enableScroll ? (
       <ScrollView
         contentContainerStyle={scrollStyle}
         showsVerticalScrollIndicator={false}
-        keyboardDismissMode='on-drag'
+        keyboardDismissMode="on-drag"
       >
         {children}
       </ScrollView>
@@ -37,18 +30,4 @@ 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.js → style.ts}

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

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

@@ -1,43 +1,47 @@
-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 { Alert, Linking, Platform, TouchableOpacity } from 'react-native';
+import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
 
-const CustomChatView = ({ currentMessage, containerStyle, mapViewStyle }) => {
+import { MapStyle } from '../../configs/constants';
+import styles from './style';
+
+import type { CustomChatViewProps } from '../../configs/types';
+
+const CustomChatView = ({ currentMessage, containerStyle, mapViewStyle }: CustomChatViewProps) => {
   const openMapAsync = async () => {
-    const { location = {} } = currentMessage;
+    const { location } = currentMessage || {};
+
+    if (!location) {
+      Alert.alert('Location data is missing.');
+      return null;
+    }
 
     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={{
@@ -58,16 +62,4 @@ const CustomChatView = ({ currentMessage, containerStyle, mapViewStyle }) => {
   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.js → style.ts}

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