@grupalia/rn-ui-kit 0.15.0 → 0.16.0

package/src/components/CameraWrapperModal.tsx

@@ -0,0 +1,309 @@
+import { useAppState } from '@react-native-community/hooks';
+import { useIsFocused } from '@react-navigation/native';
+import { captureException } from '@sentry/react-native';
+import { useMutation } from '@tanstack/react-query';
+import clsx from 'clsx';
+import { styled } from 'nativewind';
+import {
+  ComponentProps, useRef, useState, useCallback,
+} from 'react';
+import toast from 'react-hot-toast/headless';
+import { Linking } from 'react-native';
+import {
+  ArrowLongLeftIcon, ArrowPathIcon, ArrowUturnLeftIcon, CheckIcon,
+} from 'react-native-heroicons/outline';
+import {
+  PhotoFile,
+  Camera as RNVisionCamera,
+  useCameraPermission,
+  useCameraDevice,
+  useCameraFormat,
+  FormatFilter,
+  CameraPosition,
+} from 'react-native-vision-camera';
+
+import {
+  View, Modal, Pressable, Image,
+} from '../hoc-components';
+import BaseButton from './BaseButton';
+import BaseIcon from './BaseIcon';
+import BaseText from './BaseText';
+import PressableOpacity from './PressableOpacity';
+import { useIsAboveBreakpoint } from '../hooks/useIsAboveBreakpoint';
+import { ensureDirExists } from '../utils/fileDirectoryUtils';
+import CameraSvg from './svgs/Camera';
+import Toasts from './Toasts';
+
+interface PermissionCardProps {
+  onPermissionRequestPress: () => void;
+}
+
+export type CameraWrapperModalImage = PhotoFile & { uri: string };
+
+function PermissionCard({ onPermissionRequestPress }: PermissionCardProps) {
+  const largePhone = useIsAboveBreakpoint('xs');
+
+  return (
+    <View className={clsx(
+      'w-full flex-col items-center rounded-lg bg-white p-4',
+      largePhone ? 'mt-10 space-y-10' : 'space-y-4',
+    )}
+    >
+      <BaseText className={clsx('text-center font-semibold', largePhone && 'text-xl')}>
+        Necesitamos permiso para acceder a la camara
+      </BaseText>
+      <CameraSvg
+        width="100%"
+        height={largePhone ? 200 : 100}
+      />
+      <BaseButton
+        className="w-full"
+        size={largePhone ? 'md' : 'xs'}
+        text="Permitir"
+        onPress={onPermissionRequestPress}
+      />
+    </View>
+  );
+}
+
+interface CameraPreviewProps {
+  onCapture: (photoFile: CameraWrapperModalImage) => void;
+  previewOverlay: JSX.Element | undefined;
+  filters: FormatFilter[];
+  allowDeviceSwitching: boolean;
+  isActive: boolean;
+  initialDevice: CameraPosition;
+  pathToSave?: string;
+}
+
+function CameraPreview({
+  onCapture,
+  previewOverlay,
+  filters,
+  isActive,
+  allowDeviceSwitching,
+  initialDevice,
+  pathToSave,
+}: CameraPreviewProps) {
+  const cameraRef = useRef<RNVisionCamera>(null);
+  const [selectedDevice, setSelectedDevice] = useState<CameraPosition>(initialDevice);
+  const device = useCameraDevice(selectedDevice);
+  const format = useCameraFormat(device, filters);
+
+  const { mutate } = useMutation<PhotoFile, Error, void>({
+    mutationFn: async () => {
+      if (cameraRef.current) {
+        if (pathToSave) await ensureDirExists(pathToSave);
+
+        const file = await cameraRef.current.takePhoto({ path: pathToSave?.replace('file://', '') ?? undefined });
+
+        return file;
+      }
+
+      return Promise.reject(new Error('Camera ref is not defined'));
+    },
+    networkMode: 'always',
+    onSuccess: (photoFile) => onCapture({ ...photoFile, uri: `file://${photoFile.path}` }),
+    onError: (error) => {
+      captureException(error);
+      toast.error('Ocurrió un error al tomar la foto');
+    },
+  });
+
+  return (
+    <View className="flex h-full w-full flex-col">
+      {device ? (
+        <View className="relative h-full w-full flex-1 overflow-hidden rounded-xl border-2">
+          <RNVisionCamera
+            style={{ flex: 1, width: '100%', height: '100%' }}
+            ref={cameraRef}
+            device={device}
+            format={format}
+            isActive={isActive}
+            photo
+          />
+          {previewOverlay}
+          {allowDeviceSwitching && (
+            <PressableOpacity
+              onPress={() => setSelectedDevice(selectedDevice === 'back' ? 'front' : 'back')}
+              className="absolute bottom-8 right-8 flex h-12 w-12 items-center justify-center rounded-full bg-secondary"
+            >
+              <BaseIcon
+                icon={ArrowPathIcon}
+                className="h-full w-full"
+                color="utility-gray-200"
+              />
+            </PressableOpacity>
+          )}
+        </View>
+      ) : (
+        <View className="flex h-full w-full items-center justify-center bg-utility-gray-200">
+          <BaseText className="text-secondary">
+            No fue posible acceder a la camara
+          </BaseText>
+        </View>
+      )}
+      <PressableOpacity
+        onPress={() => mutate()}
+        className="my-10 h-20 w-20 self-center rounded-full border-4 border-white bg-black p-1"
+      >
+        <View
+          className="h-full w-full rounded-full bg-white"
+        />
+      </PressableOpacity>
+    </View>
+  );
+}
+
+interface PhotoFilePreviewProps {
+  photoFile: CameraWrapperModalImage;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+function PhotoFilePreview({ photoFile, onConfirm, onCancel }: PhotoFilePreviewProps) {
+  return (
+    <View className="flex h-full w-full flex-col items-center pb-10">
+      <View className="w-full flex-1 overflow-hidden rounded-xl">
+        <Image
+          style={{ width: 'auto', height: '100%' }}
+          source={{ uri: photoFile.uri }}
+          resizeMode="cover"
+        />
+      </View>
+      <View className="mt-12 flex flex-row items-center space-x-16">
+        <Pressable
+          onPress={onCancel}
+        >
+          <BaseIcon
+            icon={ArrowUturnLeftIcon}
+            size={64}
+            color="fg-error-primary"
+          />
+        </Pressable>
+        <Pressable
+          onPress={onConfirm}
+          className="self-end"
+        >
+          <BaseIcon
+            icon={CheckIcon}
+            size={64}
+            color="fg-success-primary"
+          />
+        </Pressable>
+      </View>
+    </View>
+  );
+}
+
+interface Props extends ComponentProps<typeof Modal> {
+  onCapture: (photoFile: CameraWrapperModalImage) => void;
+  onClose: () => void;
+  filters?: FormatFilter[];
+  previewOverlay?: JSX.Element;
+  allowDeviceSwitching?: boolean;
+  initialDevice?: CameraPosition;
+  pathToSave?: string;
+}
+
+function CameraWrapperModal({
+  onCapture,
+  onClose,
+  filters = [{ photoResolution: { width: 720, height: 1280 } }],
+  previewOverlay = undefined,
+  allowDeviceSwitching = true,
+  initialDevice = 'back',
+  pathToSave = undefined,
+  ...modalProps
+}: Props) {
+  const [photoFile, setPhotoFile] = useState<CameraWrapperModalImage | null>(null);
+  const [permissionRequested, setPermissionRequested] = useState(false);
+
+  const isFocused = useIsFocused();
+  const appState = useAppState();
+  const isActive = isFocused && appState === 'active';
+
+  const { hasPermission, requestPermission } = useCameraPermission();
+
+  const handlePermissionRequestPress = useCallback(() => {
+    if (!permissionRequested) {
+      setPermissionRequested(true);
+      requestPermission();
+    } else {
+      Linking.openSettings();
+    }
+  }, [permissionRequested, requestPermission]);
+
+  const handleCaptureConfirm = useCallback(() => {
+    if (photoFile) {
+      onCapture({
+        ...photoFile,
+        uri: `file://${photoFile.path}`,
+      });
+      setPhotoFile(null);
+    }
+  }, [onCapture, photoFile]);
+
+  const removePhotoFile = useCallback(() => {
+    setPhotoFile(null);
+  }, [setPhotoFile]);
+
+  let content;
+
+  if (!hasPermission) {
+    content = (
+      <PermissionCard
+        onPermissionRequestPress={handlePermissionRequestPress}
+      />
+    );
+  } else if (photoFile) {
+    content = (
+      <PhotoFilePreview
+        photoFile={photoFile}
+        onCancel={removePhotoFile}
+        onConfirm={handleCaptureConfirm}
+      />
+    );
+  } else {
+    content = (
+      <CameraPreview
+        isActive={isActive}
+        filters={filters}
+        onCapture={setPhotoFile}
+        previewOverlay={previewOverlay}
+        allowDeviceSwitching={allowDeviceSwitching}
+        initialDevice={initialDevice}
+        pathToSave={pathToSave}
+      />
+    );
+  }
+
+  return (
+    <Modal
+      animationType="slide"
+      statusBarTranslucent
+      {...modalProps}
+    >
+      <Toasts />
+      <View className="flex h-full w-full flex-col items-center bg-black px-4 pt-12">
+        <View className="self-start py-4">
+          <Pressable
+            hitSlop={10}
+            onPress={onClose}
+          >
+            <BaseIcon
+              icon={ArrowLongLeftIcon}
+              color="fg-brand-primary"
+              size={32}
+            />
+          </Pressable>
+        </View>
+        <View className="mb-4 w-full flex-1">
+          {content}
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+export default styled(CameraWrapperModal);

package/src/components/FormikCameraImageInput.tsx

@@ -0,0 +1,39 @@
+import { ErrorMessage, useField } from 'formik';
+import { styled } from 'nativewind';
+import React from 'react';
+import { ViewProps } from 'react-native';
+
+import BaseText from './BaseText';
+import CameraImageInput, { CameraImageInputProps } from './CameraImageInput';
+
+interface FormikCameraImageInputProps extends Omit<CameraImageInputProps, 'value' | 'onValueChange' | 'hasError'>, ViewProps {
+  name: string;
+}
+
+function FormikCameraImageInput({
+  name,
+  ...props
+}: FormikCameraImageInputProps) {
+  const [field, meta, helpers] = useField(name);
+
+  const hasError = !!(meta.error && meta.touched);
+
+  return (
+    <>
+      <CameraImageInput
+        value={field.value}
+        onValueChange={helpers.setValue}
+        hasError={hasError}
+        showImages
+        {...props}
+      />
+      {hasError && (
+        <ErrorMessage name={name}>
+          {(msg) => <BaseText className="mt-1 text-sm text-error-primary">{msg}</BaseText>}
+        </ErrorMessage>
+      )}
+    </>
+  );
+}
+
+export default styled(FormikCameraImageInput);

package/src/components/ImagePickerBottomSheet.tsx

@@ -0,0 +1,109 @@
+import { BottomSheetModal } from '@gorhom/bottom-sheet';
+import {
+  ComponentProps,
+  useState, useRef, useEffect, useCallback,
+} from 'react';
+
+import BaseBottomSheetModal from './BaseBottomSheetModal';
+import BaseText from './BaseText';
+import CameraWrapperModal, { CameraWrapperModalImage } from './CameraWrapperModal';
+import PhotoPickerModal, { PhotoPickerModalImage } from './PhotoPickerModal';
+import PressableOpacity from './PressableOpacity';
+import { View } from '../hoc-components';
+
+export type ImagePickerBottomSheetImage = PhotoPickerModalImage | CameraWrapperModalImage;
+
+interface Props extends Partial<ComponentProps<typeof BaseBottomSheetModal>> {
+  open: boolean;
+  onImagePick: (image: ImagePickerBottomSheetImage) => void;
+  onDismiss: () => void;
+  galleryAllowed?: boolean;
+  cameraWrapperProps?: Omit<ComponentProps<typeof CameraWrapperModal>, 'onCapture' | 'onClose'>;
+}
+
+export default function ImagePickerBottomSheet({
+  open,
+  onImagePick,
+  onDismiss,
+  galleryAllowed = true,
+  cameraWrapperProps = {},
+  ...props
+}: Props) {
+  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+  const [isCameraModalOpen, setIsCameraModalOpen] = useState(false);
+  const [isPhotoPickerModalOpen, setIsPhotoPickerModalOpen] = useState(false);
+
+  useEffect(() => {
+    if (open) {
+      if (galleryAllowed) {
+        bottomSheetModalRef.current?.present();
+      } else {
+        setIsCameraModalOpen(true);
+      }
+    } else {
+      bottomSheetModalRef.current?.dismiss();
+      setIsCameraModalOpen(false);
+      setIsPhotoPickerModalOpen(false);
+    }
+  }, [open, galleryAllowed]);
+
+  const handleClose = useCallback(() => {
+    setIsCameraModalOpen(false);
+    setIsPhotoPickerModalOpen(false);
+    onDismiss();
+  }, [onDismiss]);
+
+  const onPhotoPick = useCallback((image: PhotoPickerModalImage) => {
+    onImagePick(image);
+  }, [onImagePick]);
+
+  const onCameraImagePick = useCallback((image: CameraWrapperModalImage) => {
+    onImagePick(({
+      uri: `file://${image.path}`,
+      width: image.width,
+      height: image.height,
+    }));
+  }, [onImagePick]);
+
+  return (
+    <>
+      <BaseBottomSheetModal
+        enableDynamicSizing
+        ref={bottomSheetModalRef}
+        onDismiss={handleClose}
+        {...props}
+      >
+        <View className="flex flex-col items-center space-y-8 py-8">
+          <PressableOpacity
+            className="flex w-1/2 flex-row items-center justify-between space-x-4 p-2"
+            onPress={() => setIsCameraModalOpen(true)}
+          >
+            <BaseText className="text-xl">Tomar foto</BaseText>
+            <BaseText className="text-xl">📸</BaseText>
+          </PressableOpacity>
+          <PressableOpacity
+            className="flex w-1/2 flex-row items-center justify-between space-x-4 p-2"
+            onPress={() => setIsPhotoPickerModalOpen(true)}
+          >
+            <BaseText className="text-xl">Abrir galería</BaseText>
+            <BaseText className="text-xl">🌅</BaseText>
+          </PressableOpacity>
+        </View>
+      </BaseBottomSheetModal>
+      <PhotoPickerModal
+        visible={isPhotoPickerModalOpen}
+        onImagePick={onPhotoPick}
+        onClose={handleClose}
+        onRequestClose={handleClose}
+      />
+      <CameraWrapperModal
+        visible={isCameraModalOpen}
+        className="h-full w-full"
+        onCapture={onCameraImagePick}
+        onClose={handleClose}
+        onRequestClose={handleClose}
+        {...cameraWrapperProps}
+      />
+    </>
+  );
+}

package/src/components/PhotoPickerModal.tsx

@@ -0,0 +1,116 @@
+import { styled } from 'nativewind';
+import { ComponentProps, useEffect, useState } from 'react';
+import toast from 'react-hot-toast/headless';
+import {
+  launchImageLibrary, PhotoQuality, Asset,
+} from 'react-native-image-picker';
+
+import BaseButton from './BaseButton';
+import BaseText from './BaseText';
+import { View, Modal, Image } from '../hoc-components';
+import PressableOpacity from './PressableOpacity';
+
+export type PhotoPickerModalImage = Asset & { uri: string };
+
+interface Props extends ComponentProps<typeof Modal> {
+  onImagePick: (image: PhotoPickerModalImage) => void;
+  onClose: () => void;
+  imageOptions?: {
+    maxWidth?: number;
+    maxHeight?: number;
+    quality?: PhotoQuality;
+    includeBase64?: boolean;
+  };
+}
+
+function MediaLibraryModal({
+  onImagePick,
+  onClose,
+  visible,
+  imageOptions = {
+    maxWidth: 1024,
+    maxHeight: 1024,
+    quality: 0.8,
+    includeBase64: false,
+  },
+  ...props
+}: Props) {
+  const [image, setImage] = useState<PhotoPickerModalImage | undefined>();
+
+  useEffect(() => {
+    const handleImageSelect = async () => {
+      try {
+        const result = await launchImageLibrary({
+          mediaType: 'photo',
+          selectionLimit: 1,
+          ...imageOptions,
+        });
+
+        if (result.didCancel) {
+          onClose();
+          return;
+        }
+
+        if (!result.assets?.length) {
+          return;
+        }
+
+        const asset = result.assets[0];
+        if (!asset.uri) {
+          toast.error('Error al seleccionar la imagen');
+          return;
+        }
+
+        setImage({
+          uri: asset.uri,
+          type: asset.type,
+          width: asset.width,
+          height: asset.height,
+        });
+      } catch {
+        toast.error('Error al seleccionar la imagen');
+      }
+    };
+
+    if (visible) {
+      handleImageSelect();
+    }
+  }, [visible]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <Modal
+      visible={visible}
+      {...props}
+    >
+      <View className="flex h-full flex-col px-4 py-8">
+        <PressableOpacity
+          onPress={onClose}
+          hitSlop={6}
+          className="mb-4 self-end"
+        >
+          <BaseText className="font-medium text-gray-700">
+            Cancelar
+          </BaseText>
+        </PressableOpacity>
+        {image && (
+          <>
+            <View className="w-full flex-1 overflow-hidden rounded-xl">
+              <Image
+                className="h-full w-auto"
+                source={{ uri: image.uri }}
+                resizeMode="contain"
+              />
+            </View>
+            <BaseButton
+              text="Confirmar"
+              onPress={() => onImagePick(image)}
+              className="mt-4 w-full self-center"
+            />
+          </>
+        )}
+      </View>
+    </Modal>
+  );
+}
+
+export default styled(MediaLibraryModal);