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

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

@@ -1,10 +1,9 @@
-import { Dimensions, StyleSheet } from 'react-native';
-
+import { StyleSheet, Dimensions } from 'react-native';
 import { Colors } from '../../configs/constants';
 
 const { width } = Dimensions.get('window');
 
-export default StyleSheet.create({
+export default {
   cameraContainer: {
     flex: 1,
     ...StyleSheet.absoluteFillObject,
@@ -26,6 +25,7 @@ export default StyleSheet.create({
     flex: 1,
     backgroundColor: Colors.transparent,
     flexDirection: 'row',
+    position: 'relative',
     marginBottom: 20,
     ...StyleSheet.absoluteFillObject,
   },
@@ -92,4 +92,4 @@ export default StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
-});
+};

package/lib/components/Text/index.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Text as RNText } from 'react-native';
+import style from './style';
+
+const Text = ({
+  variant = 'default',
+  size = 'medium',
+  color = 'dark',
+  weight = 'regular',
+  align = 'left',
+  style: customStyle = {},
+  children,
+  ...props
+}) => (
+  <RNText
+    style={[
+      style[variant],
+      style[size],
+      style[color],
+      style[weight],
+      style[align],
+      { ...customStyle },
+    ]}
+    allowFontScaling={false}
+    {...props}
+  >
+    {children}
+  </RNText>
+);
+
+Text.defaultProps = {
+  color: 'dark',
+  variant: 'default',
+  size: 'medium',
+  weight: 'regular',
+  align: 'left',
+  style: {},
+  children: ' ',
+};
+
+Text.propTypes = {
+  color: PropTypes.oneOf([
+    'brightblue',
+    'brightviolet',
+    'dark',
+    'darkyellow',
+    'electricblue',
+    'gold',
+    'green',
+    'light',
+    'lighter',
+    'lightgold',
+    'midgreen',
+    'red',
+    'violet',
+    'white',
+    'yellow',
+  ]),
+  variant: PropTypes.oneOf(['default', 'lowercase', 'uppercase']),
+  size: PropTypes.oneOf([
+    'tiny',
+    'small',
+    'medium',
+    'large',
+    'extra-large',
+    'huge',
+  ]),
+  weight: PropTypes.oneOf(['regular', 'bold', 'semiBold']),
+  align: PropTypes.oneOf(['left', 'right', 'center', 'justify']),
+  style: PropTypes.any,
+  children: PropTypes.node,
+};
+
+export default Text;

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

@@ -1,8 +1,6 @@
-import { StyleSheet } from 'react-native';
-
 import { Colors } from '../../configs/constants';
 
-export default StyleSheet.create({
+export default {
   //  colors
   dark: {
     color: Colors.darkblue,
@@ -98,4 +96,4 @@ export default StyleSheet.create({
   justify: {
     textAlign: 'justify',
   },
-});
+};

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

@@ -1,11 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
 import { TextInput } from 'react-native';
-
 import { Colors } from '../../configs/constants';
 import style from './style';
 
-import type { TextareaProps } from '../../configs/types';
-
-const Textarea = ({ variant = 'default', disabled, numberOfLines = 4, fitToContainer, ...props }: TextareaProps) => (
+const Textarea = ({
+  variant = 'default',
+  disabled,
+  numberOfLines = 4,
+  fitToContainer,
+  ...props
+}) => (
   <TextInput
     style={[
       style.textarea,
@@ -17,10 +22,24 @@ const Textarea = ({ variant = 'default', disabled, numberOfLines = 4, fitToConta
     multiline
     editable={!disabled}
     numberOfLines={numberOfLines}
-    textAlignVertical="top"
+    textAlignVertical='top'
     placeholderTextColor={Colors.midblue}
     {...props}
   />
 );
 
+Textarea.defaultProps = {
+  variant: 'default',
+  disabled: false,
+  fitToContainer: false,
+  numberOfLines: 4,
+};
+
+Textarea.propTypes = {
+  variant: PropTypes.oneOf(['default', 'completed', 'error']),
+  disabled: PropTypes.bool,
+  fitToContainer: PropTypes.bool,
+  numberOfLines: PropTypes.number,
+};
+
 export default Textarea;

package/lib/components/Textarea/{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 {
   textarea: {
     borderRadius,
     borderWidth: 1,
@@ -35,4 +34,4 @@ export default StyleSheet.create({
   disabled: {
     opacity: 0.5,
   },
-});
+};

package/lib/components/TimeOutButton/index.js

@@ -0,0 +1,104 @@
+import React, {
+  forwardRef,
+  useEffect,
+  useState,
+  useImperativeHandle,
+} from 'react';
+import PropTypes from 'prop-types';
+import { TouchableOpacity, View, Dimensions } from 'react-native';
+import style from './style';
+
+const { width } = Dimensions.get('window');
+const BUTTON_WIDTH = width * 0.6;
+
+const TimeOutButton = forwardRef(
+  ({ onPress, time = 3000, warning, children }, ref) => {
+    const [elapsedTime, setElapsedTime] = useState(0);
+    const [interval, setLocalInterval] = useState();
+
+    useEffect(() => {
+      let isCancelled = false;
+      try {
+        setLocalInterval(
+          setInterval(() => {
+            if (!isCancelled) {
+              setElapsedTime((elapsedTime) => elapsedTime + 1);
+            }
+          }, 1)
+        );
+      } catch (e) {
+        if (!isCancelled) {
+          throw e;
+        }
+      }
+
+      return () => {
+        clearInterval(interval);
+        isCancelled = true;
+      };
+    }, []);
+
+    useImperativeHandle(ref, () => ({
+      onStop() {
+        clearInterval(interval);
+      },
+    }));
+
+    const watchInterval = () => {
+      if (elapsedTime >= time) {
+        clearInterval(interval);
+        onPress();
+      }
+
+      return elapsedTime <= time
+        ? (BUTTON_WIDTH * (time - elapsedTime)) / time
+        : BUTTON_WIDTH;
+    };
+
+    const checkWarningPercent = () => {
+      return elapsedTime <= time ? time * 0.3 > time - elapsedTime : false;
+    };
+
+    const onLocalPress = () => {
+      setElapsedTime(time);
+      clearInterval(interval);
+      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>
+    );
+  }
+);
+
+TimeOutButton.defaultProps = {
+  children: null,
+  time: 3000,
+  warning: false,
+  onPress: () => {},
+};
+
+TimeOutButton.propTypes = {
+  children: PropTypes.node,
+  time: PropTypes.number,
+  warning: PropTypes.bool,
+  onPress: PropTypes.func,
+};
+
+export default TimeOutButton;

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

package/lib/components/UploadDocument/index.js

@@ -0,0 +1,222 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { View, TouchableOpacity, ActivityIndicator } from "react-native";
+import * as ExpoImagePicker from "expo-image-picker";
+import Text from "../Text";
+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 style from "./style";
+
+const UploadDocument = ({
+  title,
+  description,
+  icon,
+  completed,
+  isAvatarPicker,
+  uploadButtonText,
+  reUploadButtonText,
+  mediaModal,
+  takePicture,
+  inverted,
+  onSelectImage,
+  file,
+  onPermissionDenied,
+}) => {
+  const [showMediaModal, setShowMediaModal] = useState(false);
+  const [showCamera, setShowCamera] = useState(false);
+  const [image, setImage] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    (async () => await ExpoImagePicker.requestMediaLibraryPermissionsAsync())();
+  }, []);
+
+  useEffect(() => {
+    if (!image) {
+      setImage(file);
+    }
+  }, [file]);
+
+  const pickUploadMethod = async (method) => {
+    setShowMediaModal(false);
+
+    switch (method) {
+      case "camera":
+        setTimeout(async () => {
+          setShowCamera(true);
+        }, 500);
+        break;
+      case "gallery":
+        setTimeout(async () => {
+          const { granted } =
+            await ExpoImagePicker.requestMediaLibraryPermissionsAsync();
+
+          if (!granted) {
+            onPermissionDenied();
+            return;
+          }
+
+          const image = await ImagePicker(isAvatarPicker);
+          selectImage(image);
+        }, 500);
+        break;
+      default:
+        break;
+    }
+  };
+
+  const selectImage = (image) => {
+    setImage(image);
+    onSelectImage(image);
+  };
+
+  return (
+    <View style={[style.container, completed ? style.containerCompleted : {}]}>
+      {image ? (
+        <View style={style.uploadedContainer}>
+          <View>
+            <ImageViewer
+              source={{
+                uri: typeof image === "object" ? image.uri : image,
+              }}
+              style={style.image}
+              resizeMode="cover"
+              avatar
+              onLoadEnd={() => setLoading(false)}
+            />
+            {loading && (
+              <ActivityIndicator
+                style={style.imageSpinner}
+                animating={loading}
+                color={Colors.darkblue}
+              />
+            )}
+          </View>
+          <View style={style.reUploadButtons}>
+            <Text
+              style={style.titleUploaded}
+              numberOfLines={1}
+              ellipsizeMode="tail"
+            >
+              {title}
+            </Text>
+            <TouchableOpacity onPress={() => setShowMediaModal(true)}>
+              <Text size="tiny" style={style.reUpload}>
+                {reUploadButtonText}
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      ) : (
+        <View style={style.noUploaded}>
+          {icon}
+          <Text
+            size="large"
+            style={style.title}
+            numberOfLines={1}
+            ellipsizeMode="tail"
+          >
+            {title}
+          </Text>
+          <Text size="small" style={style.description}>
+            {description}
+          </Text>
+          <Button variant="dim" onPress={() => setShowMediaModal(true)}>
+            <Text>{uploadButtonText}</Text>
+          </Button>
+        </View>
+      )}
+
+      <ConfirmationModal
+        visible={showMediaModal}
+        inverted={inverted}
+        title={mediaModal.title}
+        onConfirm={() => pickUploadMethod("camera")}
+        confirmText={mediaModal.confirmText}
+        onCancel={() => pickUploadMethod("gallery")}
+        cancelText={mediaModal.cancelText}
+        onClose={() => setShowMediaModal(false)}
+      >
+        <Text>{mediaModal.description}</Text>
+      </ConfirmationModal>
+
+      <TakePicture
+        visible={showCamera}
+        cameraErrorMessage={takePicture.cameraErrorMessage}
+        requestPermissionsMessage={takePicture.requestPermissionsMessage}
+        processingPictureMessage={takePicture.processingPictureMessage}
+        repeatPictureText={takePicture.repeatPictureText}
+        usePictureText={takePicture.usePictureText}
+        avatar={isAvatarPicker}
+        onClose={(selectedImage) => {
+          if (selectedImage) {
+            selectImage(selectedImage);
+          }
+          setTimeout(() => {
+            setShowCamera(false);
+          }, 0);
+        }}
+      />
+    </View>
+  );
+};
+
+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.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: {
     borderWidth: 1,
     borderColor: Colors.dimgray,
@@ -12,46 +11,46 @@ export default StyleSheet.create({
     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/lib/components/VirtualKeyboard/index.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { View, TouchableOpacity } from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import Text from '../Text';
+import style from './style';
+
+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 }) => (
+  <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>
+);
+
+VirtualKeyboard.defaultProps = {
+  onPress: () => {},
+  hideBiometrics: false,
+};
+
+VirtualKeyboard.propTypes = {
+  onPress: PropTypes.func,
+  hideBiometrics: PropTypes.bool,
+};
+
+export default VirtualKeyboard;