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

package/components/TimeOutButton/index.tsx

@@ -0,0 +1,67 @@
+import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import { Dimensions, TouchableOpacity, View } from 'react-native';
+
+import style from './style';
+
+import type { TimeOutButtonProps } from '../../configs/types';
+
+const { width } = Dimensions.get('window');
+const BUTTON_WIDTH = width * 0.6;
+
+const TimeOutButton = forwardRef(({ onPress, time = 3000, warning, children }: TimeOutButtonProps, ref) => {
+  const [elapsedTime, setElapsedTime] = useState<number>(0);
+  const [interval, setLocalInterval] = useState<NodeJS.Timeout | undefined>(undefined);
+
+  useEffect(() => {
+    let isCancelled = false;
+    const timer = setInterval(() => {
+      if (!isCancelled) {
+        setElapsedTime((prevElapsedTime) => prevElapsedTime + 1);
+      }
+    }, 1);
+    setLocalInterval(timer);
+
+    return () => {
+      clearInterval(timer);
+      isCancelled = true;
+    };
+  }, []);
+
+  useImperativeHandle(ref, () => ({
+    onStop() {
+      clearInterval(interval);
+    },
+  }));
+
+  const watchInterval = () => {
+    if (elapsedTime >= time) {
+      clearInterval(interval);
+      if (onPress) onPress();
+    }
+
+    return elapsedTime <= time ? (BUTTON_WIDTH * (time - elapsedTime)) / time : BUTTON_WIDTH;
+  };
+
+  const checkWarningPercent = () => (elapsedTime <= time ? time * 0.3 > time - elapsedTime : false);
+
+  const onLocalPress = () => {
+    setElapsedTime(time);
+    clearInterval(interval);
+    if (onPress) onPress();
+  };
+
+  return (
+    <TouchableOpacity style={[style.button, style.buttonBg]} onPress={onLocalPress}>
+      <View
+        style={[
+          style.button,
+          warning ? (checkWarningPercent() ? style.buttonOverlayWarning : style.buttonOverlay) : style.buttonOverlay,
+          { width: watchInterval() },
+        ]}
+      />
+      {children}
+    </TouchableOpacity>
+  );
+});
+
+export default TimeOutButton;

package/{lib/components/TimeOutButton/style.js → components/TimeOutButton/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({
   // Default button shape
   button: {
     margin: 8,
@@ -38,4 +39,4 @@ export default {
     left: -10,
     backgroundColor: Colors.red,
   },
-};
+});

package/components/Toast/index.tsx

@@ -0,0 +1,34 @@
+import { Ionicons } from '@expo/vector-icons';
+import { toast, Toaster } from 'sonner-native';
+
+import { Colors } from '../../configs/constants';
+import style from './style';
+
+import type { ToastMessageProps } from '../../configs/types';
+
+const Toast = () => (
+  <Toaster
+    autoWiggleOnUpdate="toast-change"
+    closeButton
+    duration={3000}
+    icons={{
+      error: <Ionicons name="alert-circle-outline" color={Colors.darkred} size={30} />,
+      success: <Ionicons name="checkmark-circle-outline" color={Colors.darkgreen} size={30} />,
+    }}
+    pauseWhenPageIsHidden
+    position="top-center"
+    richColors
+    swipeToDismissDirection="up"
+    visibleToasts={4}
+    toastOptions={{
+      titleStyle: style.titleStyle,
+      descriptionStyle: style.descriptionStyle,
+    }}
+  />
+);
+
+export const sendMessage = ({ variant, message, description }: ToastMessageProps) => {
+  toast[variant](message, { description });
+};
+
+export default Toast;

package/components/Toast/style.ts

@@ -0,0 +1,12 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  titleStyle: {
+    fontSize: 14,
+    fontFamily: 'poppins_semiBold',
+  },
+  descriptionStyle: {
+    fontSize: 14,
+    fontFamily: 'poppins_regular',
+  },
+});

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

@@ -1,22 +1,19 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import {
-  View,
-  TouchableOpacity,
-  ActivityIndicator,
-  Platform,
-} from 'react-native';
-import * as MediaLibrary from 'expo-media-library';
 import * as ExpoImagePicker from 'expo-image-picker';
-import Text from '../Text';
+import * as MediaLibrary from 'expo-media-library';
+import { useEffect, useState } from 'react';
+import { ActivityIndicator, Platform, TouchableOpacity, View } from 'react-native';
+
+import { Colors } from '../../configs/constants';
 import Button from '../Button';
 import ConfirmationModal from '../ConfirmationModal';
 import ImagePicker from '../ImagePicker';
 import ImageViewer from '../ImageViewer';
 import TakePicture from '../TakePicture';
-import { Colors } from '../../configs/constants';
+import Text from '../Text';
 import style from './style';
 
+import type { UploadDocumentProps } from '../../configs/types';
+
 const iOS = Platform.OS === 'ios';
 
 const UploadDocument = ({
@@ -33,17 +30,19 @@ const UploadDocument = ({
   onSelectImage,
   file,
   onPermissionDenied,
-}) => {
-  const [showMediaModal, setShowMediaModal] = useState(false);
-  const [showCamera, setShowCamera] = useState(false);
-  const [image, setImage] = useState(null);
-  const [loading, setLoading] = useState(true);
+}: UploadDocumentProps) => {
+  const [showMediaModal, setShowMediaModal] = useState<boolean>(false);
+  const [showCamera, setShowCamera] = useState<boolean>(false);
+  const [image, setImage] = useState<string | { uri: string }>();
+  const [loading, setLoading] = useState<boolean>(true);
 
   useEffect(() => {
     (async () => {
-      iOS
-        ? await MediaLibrary.requestPermissionsAsync()
-        : await ExpoImagePicker.getMediaLibraryPermissionsAsync();
+      if (iOS) {
+        await MediaLibrary.requestPermissionsAsync();
+      } else {
+        await ExpoImagePicker.getMediaLibraryPermissionsAsync();
+      }
     })();
   }, []);
 
@@ -51,9 +50,17 @@ const UploadDocument = ({
     if (!image) {
       setImage(file);
     }
-  }, [file]);
+  }, [file, image]);
 
-  const pickUploadMethod = async (method) => {
+  interface PickUploadMethodParams {
+    method: 'camera' | 'gallery' | string;
+  }
+
+  interface GalleryPermissionResult {
+    status: string;
+  }
+
+  const pickUploadMethod = async (method: PickUploadMethodParams['method']): Promise<void> => {
     setShowMediaModal(false);
 
     switch (method) {
@@ -64,17 +71,21 @@ const UploadDocument = ({
         break;
       case 'gallery':
         setTimeout(async () => {
-          const { status: galleryStatus } = iOS
+          const { status: galleryStatus }: GalleryPermissionResult = iOS
             ? await MediaLibrary.requestPermissionsAsync()
             : await ExpoImagePicker.getMediaLibraryPermissionsAsync();
 
           if (galleryStatus !== 'granted' && iOS) {
-            onPermissionDenied();
+            if (onPermissionDenied) {
+              onPermissionDenied();
+            }
             return;
           }
 
-          const image = await ImagePicker(isAvatarPicker);
-          selectImage(image);
+          const pickedImage = await ImagePicker(isAvatarPicker);
+          if (pickedImage !== undefined) {
+            selectImage(pickedImage);
+          }
         }, 500);
         break;
       default:
@@ -82,9 +93,11 @@ const UploadDocument = ({
     }
   };
 
-  const selectImage = (image) => {
-    setImage(image);
-    onSelectImage(image);
+  const selectImage = (selectedImage: any) => {
+    setImage(selectedImage);
+    if (onSelectImage) {
+      onSelectImage(selectedImage);
+    }
   };
 
   return (
@@ -97,28 +110,18 @@ const UploadDocument = ({
                 uri: typeof image === 'object' ? image.uri : image,
               }}
               style={style.image}
-              resizeMode='cover'
+              resizeMode="cover"
               avatar
               onLoadEnd={() => setLoading(false)}
             />
-            {loading && (
-              <ActivityIndicator
-                style={style.imageSpinner}
-                animating={loading}
-                color={Colors.darkblue}
-              />
-            )}
+            {loading && <ActivityIndicator style={style.imageSpinner} animating={loading} color={Colors.darkblue} />}
           </View>
           <View style={style.reUploadButtons}>
-            <Text
-              style={style.titleUploaded}
-              numberOfLines={1}
-              ellipsizeMode='tail'
-            >
+            <Text style={style.titleUploaded} numberOfLines={1} ellipsizeMode="tail">
               {title}
             </Text>
             <TouchableOpacity onPress={() => setShowMediaModal(true)}>
-              <Text size='tiny' style={style.reUpload}>
+              <Text size="tiny" style={style.reUpload}>
                 {reUploadButtonText}
               </Text>
             </TouchableOpacity>
@@ -127,19 +130,14 @@ const UploadDocument = ({
       ) : (
         <View style={style.noUploaded}>
           {icon}
-          <Text
-            size='large'
-            style={style.title}
-            numberOfLines={1}
-            ellipsizeMode='tail'
-          >
+          <Text size="large" style={style.title} numberOfLines={1} ellipsizeMode="tail">
             {title}
           </Text>
-          <Text size='small' style={style.description}>
+          <Text size="small" style={style.description}>
             {description}
           </Text>
-          <Button variant='dim' onPress={() => setShowMediaModal(true)}>
-            <Text>{uploadButtonText}</Text>
+          <Button variant={inverted ? 'inverted' : 'primary'} onPress={() => setShowMediaModal(true)}>
+            <Text color="white">{uploadButtonText}</Text>
           </Button>
         </View>
       )}
@@ -178,58 +176,4 @@ const UploadDocument = ({
   );
 };
 
-UploadDocument.defaultProps = {
-  title: ' ',
-  description: ' ',
-  uploadButtonText: ' ',
-  reUploadButtonText: ' ',
-  completed: false,
-  inverted: false,
-  isAvatarPicker: false,
-  icon: null,
-  onSelectImage: () => {},
-  file: null,
-  onPermissionDenied: () => {},
-  mediaModal: {
-    title: ' ',
-    confirmText: ' ',
-    cancelText: ' ',
-    description: ' ',
-  },
-  takePicture: {
-    cameraErrorMessage: ' ',
-    requestPermissionsMessage: ' ',
-    processingPictureMessage: ' ',
-    repeatPictureText: ' ',
-    usePictureText: ' ',
-  },
-};
-
-UploadDocument.propTypes = {
-  title: PropTypes.string,
-  description: PropTypes.string,
-  uploadButtonText: PropTypes.string,
-  reUploadButtonText: PropTypes.string,
-  completed: PropTypes.bool,
-  inverted: PropTypes.bool,
-  isAvatarPicker: PropTypes.bool,
-  icon: PropTypes.node,
-  onSelectImage: PropTypes.func,
-  file: PropTypes.string,
-  onPermissionDenied: PropTypes.func,
-  mediaModal: PropTypes.shape({
-    title: PropTypes.string,
-    confirmText: PropTypes.string,
-    cancelText: PropTypes.string,
-    description: PropTypes.string,
-  }),
-  takePicture: PropTypes.shape({
-    cameraErrorMessage: PropTypes.string,
-    requestPermissionsMessage: PropTypes.string,
-    processingPictureMessage: PropTypes.string,
-    repeatPictureText: PropTypes.string,
-    usePictureText: PropTypes.string,
-  }),
-};
-
 export default UploadDocument;

package/{lib/components/UploadDocument/style.js → components/UploadDocument/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: {
     borderWidth: 1,
     borderColor: Colors.dimgray,
@@ -11,46 +12,46 @@ export default {
     width: width - 80,
     padding: 15,
     justifyContent: 'center',
-    overflow: 'hidden'
+    overflow: 'hidden',
   },
   containerCompleted: {
-    borderColor: Colors.green
+    borderColor: Colors.green,
   },
   noUploaded: {
-    alignItems: 'center'
+    alignItems: 'center',
   },
   title: {
-    marginTop: 5
+    marginTop: 5,
   },
   titleUploaded: {
     marginTop: 5,
-    width: width - 225
+    width: width - 225,
   },
   description: {
-    marginBottom: 20
+    marginBottom: 20,
   },
   uploadedContainer: {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'flex-start'
+    justifyContent: 'flex-start',
   },
   image: {
     width: 100,
     height: 100,
     borderColor: Colors.dimgray,
-    borderWidth: 1
+    borderWidth: 1,
   },
   imageSpinner: {
     position: 'absolute',
     left: 0,
     right: 0,
     top: 0,
-    bottom: 0
+    bottom: 0,
   },
   reUpload: {
-    textDecorationLine: 'underline'
+    textDecorationLine: 'underline',
   },
   reUploadButtons: {
-    marginLeft: 15
-  }
-}
+    marginLeft: 15,
+  },
+});

package/components/VirtualKeyboard/index.tsx

@@ -0,0 +1,75 @@
+import { Ionicons } from '@expo/vector-icons';
+import { TouchableOpacity, View } from 'react-native';
+
+import Text from '../Text';
+import style from './style';
+
+import type { VirtualKeyboardProps } from '../../configs/types';
+
+const keys = [
+  {
+    key: <Text size="extra-large">1</Text>,
+    value: 1,
+  },
+  {
+    key: <Text size="extra-large">2</Text>,
+    value: 2,
+  },
+  {
+    key: <Text size="extra-large">3</Text>,
+    value: 3,
+  },
+  {
+    key: <Text size="extra-large">4</Text>,
+    value: 4,
+  },
+  {
+    key: <Text size="extra-large">5</Text>,
+    value: 5,
+  },
+  {
+    key: <Text size="extra-large">6</Text>,
+    value: 6,
+  },
+  {
+    key: <Text size="extra-large">7</Text>,
+    value: 7,
+  },
+  {
+    key: <Text size="extra-large">8</Text>,
+    value: 8,
+  },
+  {
+    key: <Text size="extra-large">9</Text>,
+    value: 9,
+  },
+  {
+    key: <Ionicons name="finger-print-outline" style={style.icon} />,
+    value: 'biometrics',
+  },
+  {
+    key: <Text size="extra-large">0</Text>,
+    value: 0,
+  },
+  {
+    key: <Ionicons name="backspace-outline" style={style.icon} />,
+    value: 'back',
+  },
+];
+
+const VirtualKeyboard = ({ onPress, hideBiometrics }: VirtualKeyboardProps) => (
+  <View style={style.container}>
+    {keys.map(({ key, value }) => (
+      <TouchableOpacity
+        key={`key-${value}`}
+        style={style.button}
+        onPress={() => onPress(value === 'biometrics' && hideBiometrics ? null : value)}
+        disabled={value === 'biometrics' && hideBiometrics}
+      >
+        {value === 'biometrics' && hideBiometrics ? <Text> </Text> : key}
+      </TouchableOpacity>
+    ))}
+  </View>
+);
+
+export default VirtualKeyboard;

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

@@ -1,24 +1,25 @@
-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: {
     width,
     flexDirection: 'row',
     flexWrap: 'wrap',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   button: {
     width: width / 3.3,
     height: width / 5,
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
   },
   icon: {
     color: Colors.darkblue,
-    opacity: .6,
-    fontSize: 34
-  }
-};
+    opacity: 0.6,
+    fontSize: 34,
+  },
+});

package/components/index.ts

@@ -0,0 +1,29 @@
+export { default as Button } from './Button';
+export { default as Card } from './Card';
+export { default as ConfirmationModal } from './ConfirmationModal';
+export { default as Container } from './Container';
+export { default as CustomChatView } from './CustomChatView';
+export { default as DeckSwiper } from './DeckSwiper';
+export { default as DonutCountdown } from './DonutCountdown';
+export { default as FloatingContainer } from './FloatingContainer';
+export { default as Footer } from './Footer';
+export { default as Header } from './Header';
+export { default as ImagePicker } from './ImagePicker';
+export { default as ImageResponsive } from './ImageResponsive';
+export { default as ImageViewer } from './ImageViewer';
+export { default as Input } from './Input';
+export { default as InputPin } from './InputPin';
+export { default as MenuItem } from './MenuItem';
+export { default as NavigationTitle } from './NavigationTitle';
+export { default as Notification } from './Notification';
+export { default as withPreventDoubleClick } from './PreventDoubleClick';
+export { default as Select } from './Select';
+export { default as SwipeablePanel } from './SwipeablePanel';
+export { default as Switch } from './Switch';
+export { default as TakePicture } from './TakePicture';
+export { default as Text } from './Text';
+export { default as Textarea } from './Textarea';
+export { default as TimeOutButton } from './TimeOutButton';
+export { sendMessage, default as Toast } from './Toast';
+export { default as UploadDocument } from './UploadDocument';
+export { default as VirtualKeyboard } from './VirtualKeyboard';