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

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

@@ -1,21 +1,23 @@
-import React, { useState, useRef, useEffect } from 'react';
-import PropTypes from 'prop-types';
+import { Ionicons } from '@expo/vector-icons';
+import Constants from 'expo-constants';
+import { useEffect, useRef, useState } from 'react';
 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 = {
@@ -25,7 +27,7 @@ const STATUS = {
 
 const calcMarginTop = () => {
   if (Platform.OS === 'ios') {
-    return getStatusBarHeight(true) === 44 ? 10 : -50;
+    return Constants.statusBarHeight === 44 ? 10 : -50;
   } else {
     return -50;
   }
@@ -41,16 +43,43 @@ 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 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();
+  };
 
   useEffect(() => {
     pan.y.addListener(({ value }) => setAnimatedValueY(value));
@@ -58,6 +87,7 @@ const SwipeablePanel = ({
     if (autoMaximize) {
       setTimeout(() => _animateTo(STATUS.MEDIUM), 2000);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [offset, autoMaximize]);
 
   const panResponder = useRef(
@@ -76,10 +106,8 @@ const SwipeablePanel = ({
         pan.setValue({ x: 0, y: 0 });
       },
       onPanResponderMove: (evt, gestureState) => {
-        if (
-          status === STATUS.MEDIUM &&
-          Math.abs(pan.y._value) <= pan.y._offset
-        ) {
+        // @ts-expect-error omit ._value and ._offset
+        if (status === STATUS.MEDIUM && Math.abs(pan.y._value) <= pan.y._offset) {
           pan.setValue({
             x: 0,
             y: gestureState.dy,
@@ -100,35 +128,6 @@ 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>
@@ -137,9 +136,7 @@ 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
@@ -161,34 +158,32 @@ const SwipeablePanel = ({
           <TouchableOpacity
             onPress={() => {
               setCloseButtonClicked(true);
-              onClose();
+              if (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}>
-            <CountdownCircleTimer
-              isPlaying={true}
+            <DonutCountdown
               duration={closeAfterSeconds}
-              colors={Colors.green}
+              color={Colors.green}
               onComplete={() => {
                 if (!closeButtonClicked) {
-                  onClose();
+                  if (onClose) {
+                    onClose();
+                  }
                 }
               }}
-              size={40}
+              radius={16}
               strokeWidth={4}
-            >
-              {({ remainingTime, animatedColor }) => (
-                <Animated.Text style={{ color: animatedColor, fontSize: 14 }}>
-                  {remainingTime}
-                </Animated.Text>
-              )}
-            </CountdownCircleTimer>
+              textSize="small"
+            />
           </View>
         )}
 
@@ -210,26 +205,4 @@ 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.js → components/SwipeablePanel/style.ts}

@@ -1,9 +1,10 @@
-import {Dimensions} from 'react-native';
-import {Colors} from '../../configs/constants';
+import { Dimensions, StyleSheet } from 'react-native';
 
-const {width} = Dimensions.get('window');
+import { Colors } from '../../configs/constants';
 
-export default {
+const { width } = Dimensions.get('window');
+
+export default StyleSheet.create({
   background: {
     position: 'relative',
     width,
@@ -11,11 +12,11 @@ export default {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    overflow: 'hidden'
+    overflow: 'hidden',
   },
   backgroundLayer: {
     width,
-    flex: 1
+    flex: 1,
   },
   panel: {
     position: 'absolute',
@@ -41,25 +42,25 @@ export default {
     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',
@@ -70,11 +71,11 @@ export default {
     borderRadius: 15,
     backgroundColor: Colors.lightblue,
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   autoClose: {
     position: 'absolute',
     left: 10,
-    top: 10
+    top: 10,
   },
-};
+});

package/components/Switch/index.tsx

@@ -0,0 +1,30 @@
+import { Platform, Switch as RNSwitch } from 'react-native';
+
+import { Colors } from '../../configs/constants';
+
+import type { SwitchProps } from '../../configs/types';
+
+const Switch = ({ value, size = 'medium', ...props }: SwitchProps) => (
+  <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}
+  />
+);
+
+export default Switch;

package/components/TakePicture/confirmPictureModal.tsx

@@ -0,0 +1,37 @@
+import { Modal, TouchableOpacity, View } from 'react-native';
+
+import ImageResponsive from '../ImageResponsive';
+import Text from '../Text';
+import style from './style';
+
+import type { ConfirmPictureModalProps } from '../../configs/types';
+
+export const ConfirmPictureModal = ({
+  avatar,
+  visible,
+  onRepeatPhoto,
+  onUsePhoto,
+  image,
+  repeatPictureText,
+  usePictureText,
+}: ConfirmPictureModalProps) => (
+  <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
+        }
+        style={avatar ? style.cameraTakenImage : style.cameraContainer}
+      />
+
+      <View style={style.cameraRetakePhoto}>
+        <TouchableOpacity onPress={onRepeatPhoto}>
+          <Text style={style.cameraRetakePhotoText}>{repeatPictureText}</Text>
+        </TouchableOpacity>
+        <TouchableOpacity onPress={onUsePhoto}>
+          <Text style={style.cameraRetakePhotoText}>{usePictureText}</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  </Modal>
+);

package/components/TakePicture/index.tsx

@@ -0,0 +1,148 @@
+import type { CameraType } from 'expo-camera';
+
+import { Ionicons } from '@expo/vector-icons';
+import { CameraView, useCameraPermissions } from 'expo-camera';
+import * as ImageManipulator from 'expo-image-manipulator';
+import { useRef, useState } from 'react';
+import { ActivityIndicator, Modal, TouchableOpacity, View } from 'react-native';
+import { Circle, Defs, Mask, Rect, Svg } from 'react-native-svg';
+
+import { Colors } from '../../configs/constants';
+import Button from '../Button';
+import Container from '../Container';
+import Text from '../Text';
+import { ConfirmPictureModal } from './confirmPictureModal';
+import style from './style';
+
+import type { TakePictureProps } from '../../configs/types';
+
+const DESIRED_RATIO = '16:9';
+
+const SvgCircle = () => (
+  <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,
+}: TakePictureProps) => {
+  const [permission, requestPermission] = useCameraPermissions();
+  const [type, setType] = useState<CameraType>('back');
+  const [image, setImage] = useState<ImageManipulator.ImageResult | null>(null);
+  const [takingPicture, setTakingPicture] = useState<boolean>(false);
+  const camera = useRef<CameraView>(null);
+
+  const flipCamera = () => {
+    setType((current) => (current === 'back' ? 'front' : 'back'));
+  };
+
+  const takePicture = async () => {
+    if (camera.current) {
+      setTakingPicture(true);
+      const tempImage = await camera.current.takePictureAsync({ quality: 1.0 });
+
+      if (avatar) {
+        const avatarImage = await ImageManipulator.manipulateAsync(
+          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 = () => {
+    if (image) {
+      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} variant="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>
+  );
+};
+
+export default TakePicture;

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

@@ -1,9 +1,10 @@
-import { StyleSheet, 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({
   cameraContainer: {
     flex: 1,
     ...StyleSheet.absoluteFillObject,
@@ -25,7 +26,6 @@ export default {
     flex: 1,
     backgroundColor: Colors.transparent,
     flexDirection: 'row',
-    position: 'relative',
     marginBottom: 20,
     ...StyleSheet.absoluteFillObject,
   },
@@ -92,4 +92,4 @@ export default {
     justifyContent: 'center',
     alignItems: 'center',
   },
-};
+});

package/components/Text/index.tsx

@@ -0,0 +1,33 @@
+import { Text as RNText } from 'react-native';
+
+import style from './style';
+
+import type { TextProps } from '../../configs/types';
+
+const Text = ({
+  variant = 'default',
+  size = 'medium',
+  color = 'dark',
+  weight = 'regular',
+  align = 'left',
+  style: customStyle = {},
+  children,
+  ...props
+}: TextProps) => (
+  <RNText
+    style={[
+      style[variant as keyof typeof style],
+      style[size as keyof typeof style],
+      style[color as keyof typeof style],
+      style[weight as keyof typeof style],
+      style[align as keyof typeof style],
+      { ...customStyle },
+    ]}
+    allowFontScaling={false}
+    {...props}
+  >
+    {children}
+  </RNText>
+);
+
+export default Text;

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

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

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

@@ -1,16 +1,11 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import { TextInput } from 'react-native';
+
 import { Colors } from '../../configs/constants';
 import style from './style';
 
-const Textarea = ({
-  variant = 'default',
-  disabled,
-  numberOfLines = 4,
-  fitToContainer,
-  ...props
-}) => (
+import type { TextareaProps } from '../../configs/types';
+
+const Textarea = ({ variant = 'default', disabled, numberOfLines = 4, fitToContainer, ...props }: TextareaProps) => (
   <TextInput
     style={[
       style.textarea,
@@ -22,24 +17,10 @@ const Textarea = ({
     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.js → components/Textarea/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({
   textarea: {
     borderRadius,
     borderWidth: 1,
@@ -34,4 +35,4 @@ export default {
   disabled: {
     opacity: 0.5,
   },
-};
+});