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

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

package/lib/components/TimeOutButton/index.tsx

@@ -1,67 +0,0 @@
-import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
-import { Dimensions, TouchableOpacity, View } from 'react-native';
-
-import style from './style';
-
-import type { TimeOutButtonProps } from '../../configs/types';
-
-const { width } = Dimensions.get('window');
-const BUTTON_WIDTH = width * 0.6;
-
-const TimeOutButton = forwardRef(({ onPress, time = 3000, warning, children }: TimeOutButtonProps, ref) => {
-  const [elapsedTime, setElapsedTime] = useState<number>(0);
-  const [interval, setLocalInterval] = useState<NodeJS.Timeout | undefined>(undefined);
-
-  useEffect(() => {
-    let isCancelled = false;
-    const timer = setInterval(() => {
-      if (!isCancelled) {
-        setElapsedTime((prevElapsedTime) => prevElapsedTime + 1);
-      }
-    }, 1);
-    setLocalInterval(timer);
-
-    return () => {
-      clearInterval(timer);
-      isCancelled = true;
-    };
-  }, []);
-
-  useImperativeHandle(ref, () => ({
-    onStop() {
-      clearInterval(interval);
-    },
-  }));
-
-  const watchInterval = () => {
-    if (elapsedTime >= time) {
-      clearInterval(interval);
-      if (onPress) onPress();
-    }
-
-    return elapsedTime <= time ? (BUTTON_WIDTH * (time - elapsedTime)) / time : BUTTON_WIDTH;
-  };
-
-  const checkWarningPercent = () => (elapsedTime <= time ? time * 0.3 > time - elapsedTime : false);
-
-  const onLocalPress = () => {
-    setElapsedTime(time);
-    clearInterval(interval);
-    if (onPress) 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>
-  );
-});
-
-export default TimeOutButton;

package/lib/components/Toast/index.tsx

@@ -1,34 +0,0 @@
-import { Ionicons } from '@expo/vector-icons';
-import { toast, Toaster } from 'sonner-native';
-
-import { Colors } from '../../configs/constants';
-import style from './style';
-
-import type { ToastMessageProps } from '../../configs/types';
-
-const Toast = () => (
-  <Toaster
-    autoWiggleOnUpdate="toast-change"
-    closeButton
-    duration={3000}
-    icons={{
-      error: <Ionicons name="alert-circle-outline" color={Colors.darkred} size={30} />,
-      success: <Ionicons name="checkmark-circle-outline" color={Colors.darkgreen} size={30} />,
-    }}
-    pauseWhenPageIsHidden
-    position="top-center"
-    richColors
-    swipeToDismissDirection="up"
-    visibleToasts={4}
-    toastOptions={{
-      titleStyle: style.titleStyle,
-      descriptionStyle: style.descriptionStyle,
-    }}
-  />
-);
-
-export const sendMessage = ({ variant, message, description }: ToastMessageProps) => {
-  toast[variant](message, { description });
-};
-
-export default Toast;

package/lib/components/Toast/style.ts

@@ -1,12 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export default StyleSheet.create({
-  titleStyle: {
-    fontSize: 14,
-    fontFamily: 'poppins_semiBold',
-  },
-  descriptionStyle: {
-    fontSize: 14,
-    fontFamily: 'poppins_regular',
-  },
-});

package/lib/components/UploadDocument/index.tsx

@@ -1,179 +0,0 @@
-import * as ExpoImagePicker from 'expo-image-picker';
-import * as MediaLibrary from 'expo-media-library';
-import { useEffect, useState } from 'react';
-import { ActivityIndicator, Platform, TouchableOpacity, View } from 'react-native';
-
-import { Colors } from '../../configs/constants';
-import Button from '../Button';
-import ConfirmationModal from '../ConfirmationModal';
-import ImagePicker from '../ImagePicker';
-import ImageViewer from '../ImageViewer';
-import TakePicture from '../TakePicture';
-import Text from '../Text';
-import style from './style';
-
-import type { UploadDocumentProps } from '../../configs/types';
-
-const iOS = Platform.OS === 'ios';
-
-const UploadDocument = ({
-  title,
-  description,
-  icon,
-  completed,
-  isAvatarPicker,
-  uploadButtonText,
-  reUploadButtonText,
-  mediaModal,
-  takePicture,
-  inverted,
-  onSelectImage,
-  file,
-  onPermissionDenied,
-}: UploadDocumentProps) => {
-  const [showMediaModal, setShowMediaModal] = useState<boolean>(false);
-  const [showCamera, setShowCamera] = useState<boolean>(false);
-  const [image, setImage] = useState<string | { uri: string }>();
-  const [loading, setLoading] = useState<boolean>(true);
-
-  useEffect(() => {
-    (async () => {
-      if (iOS) {
-        await MediaLibrary.requestPermissionsAsync();
-      } else {
-        await ExpoImagePicker.getMediaLibraryPermissionsAsync();
-      }
-    })();
-  }, []);
-
-  useEffect(() => {
-    if (!image) {
-      setImage(file);
-    }
-  }, [file, image]);
-
-  interface PickUploadMethodParams {
-    method: 'camera' | 'gallery' | string;
-  }
-
-  interface GalleryPermissionResult {
-    status: string;
-  }
-
-  const pickUploadMethod = async (method: PickUploadMethodParams['method']): Promise<void> => {
-    setShowMediaModal(false);
-
-    switch (method) {
-      case 'camera':
-        setTimeout(async () => {
-          setShowCamera(true);
-        }, 500);
-        break;
-      case 'gallery':
-        setTimeout(async () => {
-          const { status: galleryStatus }: GalleryPermissionResult = iOS
-            ? await MediaLibrary.requestPermissionsAsync()
-            : await ExpoImagePicker.getMediaLibraryPermissionsAsync();
-
-          if (galleryStatus !== 'granted' && iOS) {
-            if (onPermissionDenied) {
-              onPermissionDenied();
-            }
-            return;
-          }
-
-          const pickedImage = await ImagePicker(isAvatarPicker);
-          if (pickedImage !== undefined) {
-            selectImage(pickedImage);
-          }
-        }, 500);
-        break;
-      default:
-        break;
-    }
-  };
-
-  const selectImage = (selectedImage: any) => {
-    setImage(selectedImage);
-    if (onSelectImage) {
-      onSelectImage(selectedImage);
-    }
-  };
-
-  return (
-    <View style={[style.container, completed ? style.containerCompleted : {}]}>
-      {image ? (
-        <View style={style.uploadedContainer}>
-          <View>
-            <ImageViewer
-              source={{
-                uri: typeof image === 'object' ? image.uri : image,
-              }}
-              style={style.image}
-              resizeMode="cover"
-              avatar
-              onLoadEnd={() => setLoading(false)}
-            />
-            {loading && <ActivityIndicator style={style.imageSpinner} animating={loading} color={Colors.darkblue} />}
-          </View>
-          <View style={style.reUploadButtons}>
-            <Text style={style.titleUploaded} numberOfLines={1} ellipsizeMode="tail">
-              {title}
-            </Text>
-            <TouchableOpacity onPress={() => setShowMediaModal(true)}>
-              <Text size="tiny" style={style.reUpload}>
-                {reUploadButtonText}
-              </Text>
-            </TouchableOpacity>
-          </View>
-        </View>
-      ) : (
-        <View style={style.noUploaded}>
-          {icon}
-          <Text size="large" style={style.title} numberOfLines={1} ellipsizeMode="tail">
-            {title}
-          </Text>
-          <Text size="small" style={style.description}>
-            {description}
-          </Text>
-          <Button variant={inverted ? 'inverted' : 'primary'} onPress={() => setShowMediaModal(true)}>
-            <Text color="white">{uploadButtonText}</Text>
-          </Button>
-        </View>
-      )}
-
-      <ConfirmationModal
-        visible={showMediaModal}
-        inverted={inverted}
-        title={mediaModal.title}
-        onConfirm={() => pickUploadMethod('camera')}
-        confirmText={mediaModal.confirmText}
-        onCancel={() => pickUploadMethod('gallery')}
-        cancelText={mediaModal.cancelText}
-        onClose={() => setShowMediaModal(false)}
-      >
-        <Text>{mediaModal.description}</Text>
-      </ConfirmationModal>
-
-      <TakePicture
-        visible={showCamera}
-        cameraErrorMessage={takePicture.cameraErrorMessage}
-        requestPermissionsMessage={takePicture.requestPermissionsMessage}
-        processingPictureMessage={takePicture.processingPictureMessage}
-        repeatPictureText={takePicture.repeatPictureText}
-        usePictureText={takePicture.usePictureText}
-        avatar={isAvatarPicker}
-        onClose={(selectedImage) => {
-          if (selectedImage) {
-            selectImage(selectedImage);
-          }
-          setTimeout(() => {
-            setShowCamera(false);
-          }, 0);
-        }}
-      />
-    </View>
-  );
-};
-
-export default UploadDocument;

package/lib/components/VirtualKeyboard/index.tsx

@@ -1,75 +0,0 @@
-import { Ionicons } from '@expo/vector-icons';
-import { TouchableOpacity, View } from 'react-native';
-
-import Text from '../Text';
-import style from './style';
-
-import type { VirtualKeyboardProps } from '../../configs/types';
-
-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 }: VirtualKeyboardProps) => (
-  <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>
-);
-
-export default VirtualKeyboard;

package/lib/components/index.ts

@@ -1,29 +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 CustomChatView } from './CustomChatView';
-export { default as DeckSwiper } from './DeckSwiper';
-export { default as DonutCountdown } from './DonutCountdown';
-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 withPreventDoubleClick } from './PreventDoubleClick';
-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 { sendMessage, default as Toast } from './Toast';
-export { default as UploadDocument } from './UploadDocument';
-export { default as VirtualKeyboard } from './VirtualKeyboard';