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

package/lib/components/SwipeablePanel/index.tsx

@@ -0,0 +1,208 @@
+import { Ionicons } from '@expo/vector-icons';
+import Constants from 'expo-constants';
+import { useEffect, useRef, useState } from 'react';
+import {
+  Animated,
+  Dimensions,
+  PanResponder,
+  Platform,
+  ScrollView,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+
+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 = {
+  MEDIUM: 0,
+  LARGE: 1,
+};
+
+const calcMarginTop = () => {
+  if (Platform.OS === 'ios') {
+    return Constants.statusBarHeight === 44 ? 10 : -50;
+  } else {
+    return -50;
+  }
+};
+
+const SwipeablePanel = ({
+  offset = 0,
+  maximized,
+  lockPanel,
+  autoMaximize,
+  closeButton,
+  closeAfterSeconds = 0,
+  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();
+  };
+
+  useEffect(() => {
+    pan.y.addListener(({ value }) => setAnimatedValueY(value));
+    _animateTo(maximized ? STATUS.MEDIUM : STATUS.LARGE, true);
+    if (autoMaximize) {
+      setTimeout(() => _animateTo(STATUS.MEDIUM), 2000);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [offset, autoMaximize]);
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: (evt, gestureState) => true,
+      onPanResponderGrant: (evt, gestureState) => {
+        if (status === STATUS.LARGE) {
+          return;
+        }
+
+        pan.setOffset({
+          x: 0,
+          y: animatedValueY,
+        });
+
+        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) {
+          pan.setValue({
+            x: 0,
+            y: gestureState.dy,
+          });
+        }
+      },
+      onPanResponderRelease: (evt, gestureState) => {
+        pan.flattenOffset();
+
+        if (gestureState.dy === 0) {
+          _animateTo(status);
+        } else if (gestureState.dy < -100 || gestureState.vy < -0.5) {
+          _animateTo(STATUS.MEDIUM);
+        } else if (gestureState.dy > 100 || gestureState.vy > 0.5) {
+          _animateTo(STATUS.MEDIUM);
+        }
+      },
+    })
+  ).current;
+
+  const renderContent = () => (
+    <TouchableWithoutFeedback onPress={() => _animateTo(STATUS.MEDIUM)}>
+      <View style={style.contentContainer}>{children}</View>
+    </TouchableWithoutFeedback>
+  );
+
+  return (
+    <Animated.View style={style.background}>
+      <TouchableWithoutFeedback onPress={() => (maximized ? null : _animateTo(STATUS.LARGE))}>
+        <View style={style.backgroundLayer} />
+      </TouchableWithoutFeedback>
+      <Animated.View
+        style={[
+          style.panel,
+          {
+            bottom: MEDIUM_PANEL_HEIGHT - 1,
+            height: LARGE_PANEL_HEIGHT,
+            transform: pan.getTranslateTransform(),
+          },
+        ]}
+        {...panResponder.panHandlers}
+      >
+        <View style={style.barContainer}>
+          <View style={style.bar} />
+        </View>
+
+        {closeButton && (
+          <TouchableOpacity
+            onPress={() => {
+              setCloseButtonClicked(true);
+              if (onClose) {
+                onClose();
+              }
+            }}
+            style={style.closeButton}
+          >
+            <Ionicons name="close-outline" size={20} color={Colors.darkblue} />
+          </TouchableOpacity>
+        )}
+
+        {closeAfterSeconds > 0 && (
+          <View style={style.autoClose}>
+            <DonutCountdown
+              duration={closeAfterSeconds}
+              color={Colors.green}
+              onComplete={() => {
+                if (!closeButtonClicked) {
+                  if (onClose) {
+                    onClose();
+                  }
+                }
+              }}
+              radius={16}
+              strokeWidth={4}
+              textSize="small"
+            />
+          </View>
+        )}
+
+        {avoidScroll ? (
+          <>{renderContent()}</>
+        ) : (
+          <ScrollView
+            onTouchStart={() => false}
+            onTouchEnd={() => false}
+            showsVerticalScrollIndicator={false}
+            fadingEdgeLength={150}
+            scrollEnabled={status === STATUS.MEDIUM}
+          >
+            {renderContent()}
+          </ScrollView>
+        )}
+      </Animated.View>
+    </Animated.View>
+  );
+};
+
+export default SwipeablePanel;

package/lib/components/SwipeablePanel/style.ts

@@ -0,0 +1,81 @@
+import { Dimensions, StyleSheet } from 'react-native';
+
+import { Colors } from '../../configs/constants';
+
+const { width } = Dimensions.get('window');
+
+export default StyleSheet.create({
+  background: {
+    position: 'relative',
+    width,
+    zIndex: 1,
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden',
+  },
+  backgroundLayer: {
+    width,
+    flex: 1,
+  },
+  panel: {
+    position: 'absolute',
+    width,
+    display: 'flex',
+    flexDirection: 'column',
+    backgroundColor: Colors.white,
+    borderColor: Colors.lightblue,
+    borderWidth: 1,
+    borderBottomColor: Colors.transparent,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    overflow: 'hidden',
+    shadowColor: Colors.darkgray,
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.18,
+    shadowRadius: 1.0,
+    elevation: 1,
+    zIndex: 2,
+    paddingHorizontal: 20,
+    paddingBottom: 20,
+  },
+  barContainer: {
+    height: 50,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  bar: {
+    backgroundColor: Colors.lightblue,
+    height: 5,
+    width: width * 0.12,
+    borderRadius: 5,
+  },
+  content: {
+    paddingHorizontal: 20,
+  },
+  contentContainer: {
+    width: '100%',
+    flex: 1,
+  },
+  closeButton: {
+    position: 'absolute',
+    right: 10,
+    top: 10,
+    height: 30,
+    width: 30,
+    borderRadius: 15,
+    backgroundColor: Colors.lightblue,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  autoClose: {
+    position: 'absolute',
+    left: 10,
+    top: 10,
+  },
+});

package/lib/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/lib/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/lib/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.ts

@@ -0,0 +1,95 @@
+import { Dimensions, StyleSheet } from 'react-native';
+
+import { Colors } from '../../configs/constants';
+
+const { width } = Dimensions.get('window');
+
+export default StyleSheet.create({
+  cameraContainer: {
+    flex: 1,
+    ...StyleSheet.absoluteFillObject,
+    position: 'absolute',
+  },
+  closeIcon: {
+    position: 'absolute',
+    right: 25,
+    top: 50,
+    zIndex: 9999,
+    height: 30,
+    width: 30,
+    borderRadius: 15,
+    backgroundColor: Colors.lightblue,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  cameraFlipContainer: {
+    flex: 1,
+    backgroundColor: Colors.transparent,
+    flexDirection: 'row',
+    marginBottom: 20,
+    ...StyleSheet.absoluteFillObject,
+  },
+  cameraFlipBtn: {
+    flex: 0.2,
+    alignSelf: 'flex-end',
+    alignItems: 'center',
+    paddingLeft: 15,
+    paddingBottom: 10,
+    height: 60,
+  },
+  cameraFlipIcon: {
+    position: 'absolute',
+    bottom: 10,
+    left: 25,
+  },
+  cameraRecordBtn: {
+    position: 'absolute',
+    bottom: 0,
+    left: width / 2 - 25,
+  },
+  cameraRetakePhoto: {
+    height: 40,
+    width,
+    backgroundColor: Colors.green,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 10,
+    paddingHorizontal: 30,
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+  },
+  cameraRetakePhotoText: {
+    color: Colors.white,
+  },
+  cameraTakingPictureOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 999,
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+  },
+  cameraTakenImageContainer: {
+    backgroundColor: 'rgba(0,0,0,0.9)',
+    flex: 1,
+    ...StyleSheet.absoluteFillObject,
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  cameraTakenImage: {
+    width: width - 30,
+    height: width - 30,
+    alignSelf: 'center',
+    position: 'relative',
+  },
+  cameraPermissionsContainer: {
+    flex: 1,
+    ...StyleSheet.absoluteFillObject,
+    position: 'absolute',
+    backgroundColor: Colors.white,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/lib/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;