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

package/lib/components/TakePicture/index.js

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

package/lib/components/Text/index.js

@@ -1,75 +0,0 @@
-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/TimeOutButton/index.js

@@ -1,104 +0,0 @@
-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/VirtualKeyboard/index.js

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

package/lib/components/index.js

@@ -1,28 +0,0 @@
-export { default as Button } from "./Button";
-export { default as Card } from "./Card";
-export { default as ConfirmationModal } from "./ConfirmationModal";
-export { default as Container } from "./Container";
-export { default as DeckSwiper } from "./DeckSwiper";
-export { default as FlashMessage, sendMessage } from "./FlashMessage";
-export { default as FloatingContainer } from "./FloatingContainer";
-export { default as Footer } from "./Footer";
-export { default as Header } from "./Header";
-export { default as ImagePicker } from "./ImagePicker";
-export { default as ImageResponsive } from "./ImageResponsive";
-export { default as ImageViewer } from "./ImageViewer";
-export { default as Input } from "./Input";
-export { default as InputPin } from "./InputPin";
-export { default as MenuItem } from "./MenuItem";
-export { default as NavigationTitle } from "./NavigationTitle";
-export { default as Notification } from "./Notification";
-export { default as Select } from "./Select";
-export { default as SwipeablePanel } from "./SwipeablePanel";
-export { default as Switch } from "./Switch";
-export { default as TakePicture } from "./TakePicture";
-export { default as Text } from "./Text";
-export { default as Textarea } from "./Textarea";
-export { default as TimeOutButton } from "./TimeOutButton";
-export { default as UploadDocument } from "./UploadDocument";
-export { default as VirtualKeyboard } from "./VirtualKeyboard";
-export { default as withPreventDoubleClick } from "./PreventDoubleClick";
-export { default as CustomChatView } from "./CustomChatView";

package/lib/configs/loadFonts.js

@@ -1,11 +0,0 @@
-import * as Font from 'expo-font';
-
-export const asyncLoadFont = Font.loadAsync({
-  poppins_bold: require('../assets/fonts/Poppins-Bold.ttf'),
-  poppins_regular: require('../assets/fonts/Poppins-Regular.ttf'),
-  poppins_semiBold: require('../assets/fonts/Poppins-SemiBold.ttf')
-});
-
-export const loadFonts = [
-  asyncLoadFont
-];

package/lib/hooks/index.js

@@ -1 +0,0 @@
-export { default as useDebounce } from './useDebounce';