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

package/lib/components/Select/style.js

@@ -0,0 +1,81 @@
+import { Dimensions } from 'react-native';
+import { Colors, borderRadius } from '../../configs/constants';
+
+const { width } = Dimensions.get('window');
+
+export default {
+  container: {
+    width: width - 60,
+    position: 'relative',
+  },
+  fit: {
+    width: '100%',
+    position: 'relative',
+  },
+  selectIcon: {
+    marginTop: 20,
+    marginRight: 15,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+};
+
+const fontStyle = {
+  color: Colors.darkblue,
+  fontFamily: 'poppins_regular',
+};
+
+const basicStyle = {
+  height: 50,
+  width: '100%',
+  borderRadius,
+  borderWidth: 1,
+  paddingHorizontal: 10,
+  backgroundColor: Colors.white,
+  marginVertical: 6,
+  ...fontStyle,
+};
+
+export const includesSelect = {
+  default: {
+    ...basicStyle,
+    borderColor: Colors.midblue,
+  },
+  completed: {
+    ...basicStyle,
+    borderColor: Colors.green,
+  },
+  error: {
+    ...basicStyle,
+    borderColor: Colors.red,
+    color: Colors.red,
+  },
+};
+
+export const placeholderStyle = {
+  fontSize: 16,
+  ...fontStyle,
+  color: Colors.midblue,
+};
+
+export const listItemLabelStyle = {
+  ...fontStyle,
+  fontSize: 18,
+  paddingHorizontal: 20,
+};
+
+export const listItemContainerStyle = {
+  height: 55,
+  borderBottomWidth: 1,
+  borderBottomColor: Colors.gray,
+};
+
+export const selectedItemLabelStyle = {
+  fontFamily: 'poppins_semiBold',
+};
+
+export const textStyle = {
+  ...fontStyle,
+  fontSize: 16,
+};

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

@@ -1,23 +1,21 @@
-import { Ionicons } from '@expo/vector-icons';
-import Constants from 'expo-constants';
-import { useEffect, useRef, useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
 import {
+  View,
+  ScrollView,
   Animated,
   Dimensions,
   PanResponder,
+  TouchableWithoutFeedback,
   Platform,
-  ScrollView,
   TouchableOpacity,
-  TouchableWithoutFeedback,
-  View,
 } from 'react-native';
-
+import { getStatusBarHeight } from 'react-native-status-bar-height';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import { CountdownCircleTimer } from 'react-native-countdown-circle-timer';
 import { Colors } from '../../configs/constants';
-import DonutCountdown from '../DonutCountdown';
 import style from './style';
 
-import type { SwipeablePanelProps } from '../../configs/types';
-
 const { height: screenHeight } = Dimensions.get('window');
 
 const STATUS = {
@@ -27,7 +25,7 @@ const STATUS = {
 
 const calcMarginTop = () => {
   if (Platform.OS === 'ios') {
-    return Constants.statusBarHeight === 44 ? 10 : -50;
+    return getStatusBarHeight(true) === 44 ? 10 : -50;
   } else {
     return -50;
   }
@@ -43,43 +41,16 @@ const SwipeablePanel = ({
   onClose,
   avoidScroll,
   children,
-}: SwipeablePanelProps) => {
+}) => {
   const LARGE_PANEL_HEIGHT = screenHeight - offset - calcMarginTop(); // This is the margin top
   const MEDIUM_PANEL_HEIGHT = 400; // Fixed height
 
   const [closeButtonClicked, setCloseButtonClicked] = useState(false);
   const [status, setStatus] = useState(STATUS.LARGE);
   const [animatedValueY, setAnimatedValueY] = useState(LARGE_PANEL_HEIGHT);
-  const pan = useRef(new Animated.ValueXY({ x: 0, y: LARGE_PANEL_HEIGHT })).current;
-
-  const _animateTo = (newStatus = 0, firstAnimate?: boolean) => {
-    if (!firstAnimate && lockPanel) {
-      return;
-    }
-
-    if (status === newStatus) {
-      return;
-    }
-
-    let newY = 0;
-
-    if (newStatus === STATUS.MEDIUM) {
-      newY = MEDIUM_PANEL_HEIGHT;
-    } else if (newStatus === STATUS.LARGE) {
-      newY = LARGE_PANEL_HEIGHT;
-    }
-
-    setStatus(newStatus);
-
-    Animated.spring(pan, {
-      toValue: { x: 0, y: newY },
-      tension: 80,
-      friction: 25,
-      useNativeDriver: true,
-      restDisplacementThreshold: 10,
-      restSpeedThreshold: 10,
-    }).start();
-  };
+  const pan = useRef(
+    new Animated.ValueXY({ x: 0, y: LARGE_PANEL_HEIGHT })
+  ).current;
 
   useEffect(() => {
     pan.y.addListener(({ value }) => setAnimatedValueY(value));
@@ -87,7 +58,6 @@ const SwipeablePanel = ({
     if (autoMaximize) {
       setTimeout(() => _animateTo(STATUS.MEDIUM), 2000);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [offset, autoMaximize]);
 
   const panResponder = useRef(
@@ -106,8 +76,10 @@ const SwipeablePanel = ({
         pan.setValue({ x: 0, y: 0 });
       },
       onPanResponderMove: (evt, gestureState) => {
-        // @ts-expect-error omit ._value and ._offset
-        if (status === STATUS.MEDIUM && Math.abs(pan.y._value) <= pan.y._offset) {
+        if (
+          status === STATUS.MEDIUM &&
+          Math.abs(pan.y._value) <= pan.y._offset
+        ) {
           pan.setValue({
             x: 0,
             y: gestureState.dy,
@@ -128,6 +100,35 @@ const SwipeablePanel = ({
     })
   ).current;
 
+  const _animateTo = (newStatus = 0, firstAnimate) => {
+    if (!firstAnimate && lockPanel) {
+      return;
+    }
+
+    if (status === newStatus) {
+      return;
+    }
+
+    let newY = 0;
+
+    if (newStatus === STATUS.MEDIUM) {
+      newY = MEDIUM_PANEL_HEIGHT;
+    } else if (newStatus === STATUS.LARGE) {
+      newY = LARGE_PANEL_HEIGHT;
+    }
+
+    setStatus(newStatus);
+
+    Animated.spring(pan, {
+      toValue: { x: 0, y: newY },
+      tension: 80,
+      friction: 25,
+      useNativeDriver: true,
+      restDisplacementThreshold: 10,
+      restSpeedThreshold: 10,
+    }).start();
+  };
+
   const renderContent = () => (
     <TouchableWithoutFeedback onPress={() => _animateTo(STATUS.MEDIUM)}>
       <View style={style.contentContainer}>{children}</View>
@@ -136,7 +137,9 @@ const SwipeablePanel = ({
 
   return (
     <Animated.View style={style.background}>
-      <TouchableWithoutFeedback onPress={() => (maximized ? null : _animateTo(STATUS.LARGE))}>
+      <TouchableWithoutFeedback
+        onPress={() => (maximized ? null : _animateTo(STATUS.LARGE))}
+      >
         <View style={style.backgroundLayer} />
       </TouchableWithoutFeedback>
       <Animated.View
@@ -158,32 +161,34 @@ const SwipeablePanel = ({
           <TouchableOpacity
             onPress={() => {
               setCloseButtonClicked(true);
-              if (onClose) {
-                onClose();
-              }
+              onClose();
             }}
             style={style.closeButton}
           >
-            <Ionicons name="close-outline" size={20} color={Colors.darkblue} />
+            <Ionicons name='close-outline' size={20} color={Colors.darkblue} />
           </TouchableOpacity>
         )}
 
         {closeAfterSeconds > 0 && (
           <View style={style.autoClose}>
-            <DonutCountdown
+            <CountdownCircleTimer
+              isPlaying={true}
               duration={closeAfterSeconds}
-              color={Colors.green}
+              colors={Colors.green}
               onComplete={() => {
                 if (!closeButtonClicked) {
-                  if (onClose) {
-                    onClose();
-                  }
+                  onClose();
                 }
               }}
-              radius={16}
+              size={40}
               strokeWidth={4}
-              textSize="small"
-            />
+            >
+              {({ remainingTime, animatedColor }) => (
+                <Animated.Text style={{ color: animatedColor, fontSize: 14 }}>
+                  {remainingTime}
+                </Animated.Text>
+              )}
+            </CountdownCircleTimer>
           </View>
         )}
 
@@ -205,4 +210,26 @@ const SwipeablePanel = ({
   );
 };
 
+SwipeablePanel.defaultProps = {
+  offset: 0,
+  maximized: false,
+  lockPanel: false,
+  autoMaximize: false,
+  closeButton: false,
+  avoidScroll: false,
+  closeAfterSeconds: 0,
+  onClose: () => {},
+};
+
+SwipeablePanel.propTypes = {
+  offset: PropTypes.number,
+  maximized: PropTypes.bool,
+  lockPanel: PropTypes.bool,
+  autoMaximize: PropTypes.bool,
+  closeAfterSeconds: PropTypes.number,
+  closeButton: PropTypes.bool,
+  avoidScroll: PropTypes.bool,
+  onClose: PropTypes.func,
+};
+
 export default SwipeablePanel;

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

@@ -1,10 +1,9 @@
-import { Dimensions, StyleSheet } from 'react-native';
+import {Dimensions} from 'react-native';
+import {Colors} from '../../configs/constants';
 
-import { Colors } from '../../configs/constants';
+const {width} = Dimensions.get('window');
 
-const { width } = Dimensions.get('window');
-
-export default StyleSheet.create({
+export default {
   background: {
     position: 'relative',
     width,
@@ -12,11 +11,11 @@ export default StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    overflow: 'hidden',
+    overflow: 'hidden'
   },
   backgroundLayer: {
     width,
-    flex: 1,
+    flex: 1
   },
   panel: {
     position: 'absolute',
@@ -42,25 +41,25 @@ export default StyleSheet.create({
     elevation: 1,
     zIndex: 2,
     paddingHorizontal: 20,
-    paddingBottom: 20,
+    paddingBottom: 20
   },
   barContainer: {
     height: 50,
     justifyContent: 'center',
-    alignItems: 'center',
+    alignItems: 'center'
   },
   bar: {
     backgroundColor: Colors.lightblue,
     height: 5,
     width: width * 0.12,
-    borderRadius: 5,
+    borderRadius: 5
   },
   content: {
-    paddingHorizontal: 20,
+    paddingHorizontal: 20
   },
   contentContainer: {
     width: '100%',
-    flex: 1,
+    flex: 1
   },
   closeButton: {
     position: 'absolute',
@@ -71,11 +70,11 @@ export default StyleSheet.create({
     borderRadius: 15,
     backgroundColor: Colors.lightblue,
     alignItems: 'center',
-    justifyContent: 'center',
+    justifyContent: 'center'
   },
   autoClose: {
     position: 'absolute',
     left: 10,
-    top: 10,
+    top: 10
   },
-});
+};

package/lib/components/Switch/index.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Switch as RNSwitch, Platform } from 'react-native';
+import { Colors } from '../../configs/constants';
+
+const Switch = ({ value, size = 'medium', ...props }) => (
+  <RNSwitch
+    trackColor={{
+      false: Colors.lightblue,
+      true: Colors.lightblue,
+    }}
+    thumbColor={value ? Colors.green : Colors.midblue}
+    ios_backgroundColor={Colors.white}
+    value={value}
+    style={{
+      transform: [
+        {
+          scaleX:
+            size === 'small'
+              ? Platform.OS === 'ios'
+                ? 0.5
+                : 0.7
+              : Platform.OS === 'ios'
+              ? 0.7
+              : 0.9,
+        },
+        {
+          scaleY:
+            size === 'small'
+              ? Platform.OS === 'ios'
+                ? 0.5
+                : 0.7
+              : Platform.OS === 'ios'
+              ? 0.7
+              : 0.9,
+        },
+      ],
+    }}
+    {...props}
+  />
+);
+
+Switch.defaultProps = {
+  onValueChange: () => {},
+  value: false,
+  disabled: false,
+  size: 'medium',
+};
+
+Switch.propTypes = {
+  onValueChange: PropTypes.func,
+  value: PropTypes.bool,
+  disabled: PropTypes.bool,
+  size: PropTypes.oneOf(['medium', 'small']),
+};
+
+export default Switch;

package/lib/components/TakePicture/{confirmPictureModal.tsx → confirmPictureModal.js}

@@ -1,11 +1,10 @@
+import React from 'react';
+import PropTypes from 'prop-types';
 import { Modal, TouchableOpacity, View } from 'react-native';
-
-import ImageResponsive from '../ImageResponsive';
 import Text from '../Text';
+import ImageResponsive from '../ImageResponsive';
 import style from './style';
 
-import type { ConfirmPictureModalProps } from '../../configs/types';
-
 export const ConfirmPictureModal = ({
   avatar,
   visible,
@@ -14,13 +13,18 @@ export const ConfirmPictureModal = ({
   image,
   repeatPictureText,
   usePictureText,
-}: ConfirmPictureModalProps) => (
-  <Modal animationType="slide" transparent={false} visible={visible} onRequestClose={() => {}}>
+}) => (
+  <Modal
+    animationType='slide'
+    transparent={false}
+    visible={visible}
+    onRequestClose={() => {}}
+  >
     <View style={style.cameraTakenImageContainer}>
       <ImageResponsive
-        source={
-          image && typeof image === 'object' && 'uri' in image ? { uri: image.uri } : image === null ? undefined : image
-        }
+        source={{
+          uri: image ? image.uri : null,
+        }}
         style={avatar ? style.cameraTakenImage : style.cameraContainer}
       />
 
@@ -35,3 +39,23 @@ export const ConfirmPictureModal = ({
     </View>
   </Modal>
 );
+
+ConfirmPictureModal.defaultProps = {
+  visible: false,
+  avatar: false,
+  repeatPictureText: ' ',
+  usePictureText: ' ',
+  image: null,
+  onRepeatPhoto: () => {},
+  onUsePhoto: () => {},
+};
+
+ConfirmPictureModal.propTypes = {
+  visible: PropTypes.bool.isRequired,
+  avatar: PropTypes.bool,
+  repeatPictureText: PropTypes.string.isRequired,
+  usePictureText: PropTypes.string.isRequired,
+  image: PropTypes.object,
+  onRepeatPhoto: PropTypes.func.isRequired,
+  onUsePhoto: PropTypes.func.isRequired,
+};

package/lib/components/TakePicture/index.js

@@ -0,0 +1,198 @@
+import React, { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { Modal, TouchableOpacity, View, ActivityIndicator } from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import { CameraView, useCameraPermissions } from 'expo-camera';
+import * as ImageManipulator from 'expo-image-manipulator';
+import { Svg, Defs, Rect, Mask, Circle } from 'react-native-svg';
+import Text from '../Text';
+import Container from '../Container';
+import Button from '../Button';
+import { Colors } from '../../configs/constants';
+import { ConfirmPictureModal } from './confirmPictureModal';
+import style from './style';
+
+const DESIRED_RATIO = '16:9';
+
+const SvgCircle = () => {
+  return (
+    <Svg height='100%' width='100%'>
+      <Defs>
+        <Mask id='mask' x='0' y='0' height='100%' width='100%'>
+          <Rect height='100%' width='100%' fill={Colors.white} />
+          <Circle r='29%' cx='50%' cy='50%' fill={Colors.darkgray} />
+        </Mask>
+      </Defs>
+      <Rect
+        height='100%'
+        width='100%'
+        fill='rgba(0, 0, 0, 0.8)'
+        mask='url(#mask)'
+        fill-opacity='0'
+      />
+    </Svg>
+  );
+};
+
+const TakePicture = ({
+  visible,
+  onClose,
+  avatar,
+  cameraErrorMessage,
+  requestPermissionsMessage,
+  processingPictureMessage,
+  repeatPictureText,
+  usePictureText,
+}) => {
+  const [permission, requestPermission] = useCameraPermissions();
+  const [type, setType] = useState('back');
+  const [image, setImage] = useState(null);
+  const [takingPicture, setTakingPicture] = useState(false);
+  const camera = useRef();
+
+  const flipCamera = () => {
+    setType((current) => (current === 'back' ? 'front' : 'back'));
+  };
+
+  const takePicture = async () => {
+    if (camera) {
+      setTakingPicture(true);
+      const tempImage = await camera.current.takePictureAsync({ quality: 1.0 });
+
+      if (avatar) {
+        const avatarImage = await ImageManipulator.manipulateAsync(
+          tempImage.localUri || tempImage.uri,
+          [
+            {
+              crop: {
+                originX: 0,
+                originY: (tempImage.height - tempImage.width) / 2,
+                width: tempImage.width,
+                height: tempImage.width,
+              },
+            },
+          ],
+          { compress: 1.0, format: ImageManipulator.SaveFormat.PNG }
+        );
+
+        setImage(avatarImage);
+        setTakingPicture(false);
+      } else {
+        setImage(tempImage);
+        setTakingPicture(false);
+      }
+    }
+  };
+
+  const repeatPhoto = () => {
+    setImage(null);
+  };
+
+  const usePhoto = () => {
+    onClose(typeof image === 'object' ? image.uri : image);
+    setImage(null);
+  };
+
+  const closeModal = () => {
+    setImage(null);
+    onClose();
+  };
+
+  if (!permission?.granted) {
+    return (
+      <View style={style.cameraPermissionsContainer}>
+        <Text color='red'>{cameraErrorMessage}</Text>
+        <Button onPress={requestPermission} color='inverted'>
+          <Text color='white'>{requestPermissionsMessage}</Text>
+        </Button>
+      </View>
+    );
+  }
+
+  return (
+    <Modal
+      animationType='slide'
+      transparent={false}
+      visible={visible}
+      onRequestClose={onClose}
+    >
+      <Container style={style.cameraContainer}>
+        <CameraView
+          ref={camera}
+          style={style.cameraContainer}
+          facing={type}
+          ratio={DESIRED_RATIO}
+        >
+          {avatar && <SvgCircle />}
+
+          <View style={style.cameraFlipContainer}>
+            <TouchableOpacity onPress={closeModal} style={style.closeIcon}>
+              <Ionicons
+                name='close-outline'
+                color={Colors.darkblue}
+                size={24}
+              />
+            </TouchableOpacity>
+            <TouchableOpacity style={style.cameraFlipBtn} onPress={flipCamera}>
+              <Ionicons
+                name='camera-reverse-outline'
+                style={style.cameraFlipIcon}
+                color={Colors.white}
+                size={40}
+              />
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={style.cameraRecordBtn}
+              onPress={takePicture}
+            >
+              <Ionicons
+                name='radio-button-on-outline'
+                color={Colors.red}
+                size={60}
+              />
+            </TouchableOpacity>
+          </View>
+        </CameraView>
+
+        {takingPicture && (
+          <View style={style.cameraTakingPictureOverlay}>
+            <ActivityIndicator color={Colors.darkblue} />
+            <Text color='white'>{processingPictureMessage} ...</Text>
+          </View>
+        )}
+        <ConfirmPictureModal
+          visible={image !== null}
+          image={image}
+          repeatPictureText={repeatPictureText}
+          usePictureText={usePictureText}
+          onRepeatPhoto={repeatPhoto}
+          onUsePhoto={usePhoto}
+        />
+      </Container>
+    </Modal>
+  );
+};
+
+TakePicture.defaultProps = {
+  visible: false,
+  onClose: () => {},
+  avatar: false,
+  cameraErrorMessage: ' ',
+  requestPermissionsMessage: ' ',
+  processingPictureMessage: ' ',
+  repeatPictureText: ' ',
+  usePictureText: ' ',
+};
+
+TakePicture.propTypes = {
+  visible: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  avatar: PropTypes.bool,
+  cameraErrorMessage: PropTypes.string.isRequired,
+  requestPermissionsMessage: PropTypes.string.isRequired,
+  processingPictureMessage: PropTypes.string.isRequired,
+  repeatPictureText: PropTypes.string.isRequired,
+  usePictureText: PropTypes.string.isRequired,
+};
+
+export default TakePicture;