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

package/components/SwipeablePanel/index.tsx

@@ -1,208 +0,0 @@
-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/components/SwipeablePanel/style.ts

@@ -1,81 +0,0 @@
-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/components/Switch/index.tsx

@@ -1,30 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,148 +0,0 @@
-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/components/TakePicture/style.ts

@@ -1,95 +0,0 @@
-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/components/Text/index.tsx

@@ -1,33 +0,0 @@
-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;