@grupalia/rn-ui-kit 0.17.0 → 0.19.0

package/src/components/CameraWrapperModal.tsx

@@ -1,309 +0,0 @@
-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/DateSelector.tsx

@@ -1,91 +0,0 @@
-import {
-  eachDayOfInterval,
-  isBefore,
-  isAfter,
-  getDay,
-  addDays,
-  startOfDay,
-} from 'date-fns';
-import { styled } from 'nativewind';
-import React, { useMemo, useCallback } from 'react';
-import { ViewProps } from 'react-native';
-
-import { View } from '../hoc-components';
-import BaseDatesScrollView from './BaseDatesScrollView';
-import BaseText from './BaseText';
-
-export interface DateSelectorProps extends ViewProps {
-  value: Date | undefined;
-  onChange: (date?: Date) => void;
-  label?: string;
-  description?: string;
-  minDate?: Date;
-  maxDate?: Date;
-  disabledWeekDays?: number[];
-  disabled?: boolean;
-  error?: string;
-  allowPastDates?: boolean;
-}
-
-function DateSelector({
-  value,
-  label,
-  description,
-  onChange,
-  minDate,
-  maxDate,
-  disabledWeekDays = [],
-  disabled = false,
-  error,
-  allowPastDates = false,
-  ...props
-}: DateSelectorProps) {
-  const minDateStartOfDay = useMemo(() => startOfDay(minDate || new Date()), [minDate]);
-  const maxDateEndOfDay = useMemo(() => (maxDate ? startOfDay(maxDate) : null), [maxDate]);
-
-  const dateRange = useMemo(() => {
-    const startDate = minDateStartOfDay;
-    const endDate = maxDateEndOfDay || addDays(startDate, 7);
-
-    return eachDayOfInterval({ start: startDate, end: endDate });
-  }, [minDateStartOfDay, maxDateEndOfDay]);
-
-  const isDayDisabled = useCallback((day: Date) => {
-    if (disabled) return true;
-    if (minDateStartOfDay && isBefore(day, minDateStartOfDay)) return true;
-    if (maxDateEndOfDay && isAfter(day, maxDateEndOfDay)) return true;
-    if (disabledWeekDays.includes(getDay(day))) return true;
-    if (!allowPastDates && isBefore(day, startOfDay(new Date()))) return true;
-    return false;
-  }, [disabled, minDateStartOfDay, maxDateEndOfDay, disabledWeekDays, allowPastDates]);
-
-  const handleDayPress = useCallback((day: Date) => {
-    if (isDayDisabled(day)) return;
-
-    onChange?.(day);
-  }, [isDayDisabled, onChange]);
-
-  return (
-    <View
-      className="flex flex-col"
-      {...props}
-    >
-      {label && <BaseText className="mb-2 font-semibold text-secondary">{label}</BaseText>}
-      {description && <BaseText className="mb-2 text-tertiary">{description}</BaseText>}
-      <BaseDatesScrollView
-        dateRange={dateRange}
-        selectedDate={value}
-        isDayDisabled={isDayDisabled}
-        onDayPress={handleDayPress}
-      />
-      {error && (
-        <BaseText className="mt-2 text-error-primary">
-          {error}
-        </BaseText>
-      )}
-    </View>
-  );
-}
-
-export default styled(DateSelector);
-

package/src/components/DateTimeSelector.tsx

@@ -1,267 +0,0 @@
-import {
-  format,
-  eachDayOfInterval,
-  isSameDay,
-  isBefore,
-  isAfter,
-  getDay,
-  addDays,
-  startOfDay,
-  isToday,
-} from 'date-fns';
-import { styled } from 'nativewind';
-import React, { useMemo, useCallback, useState } from 'react';
-import { ViewProps } from 'react-native';
-
-import { View, GestureScrollView, LinearGradient } from '../hoc-components';
-import BaseDatesScrollView from './BaseDatesScrollView';
-import BaseRadioGroup, { RadioOption } from './BaseRadioGroup';
-import BaseText from './BaseText';
-
-interface TimeSlot {
-  hour: number;
-  minute: number;
-  endHour: number;
-  endMinute: number;
-  label: string;
-}
-
-interface TimeSlotsProps {
-  timeSlots: TimeSlot[];
-  selectedTime: { hour: number; minute: number } | null;
-  handleTimePress: (time: { hour: number; minute: number }) => void;
-  disabled: boolean;
-  timeLabel?: string;
-}
-
-function TimeSlots({
-  timeSlots,
-  selectedTime,
-  handleTimePress,
-  disabled,
-  timeLabel,
-}: TimeSlotsProps) {
-  const radioOptions: RadioOption[] = timeSlots.map((slot) => ({
-    label: slot.label,
-    value: `${slot.hour}-${slot.minute}`,
-  }));
-
-  const selectedValue = selectedTime ? `${selectedTime.hour}-${selectedTime.minute}` : undefined;
-
-  const handleRadioChange = (value: unknown) => {
-    const [hour, minute] = (value as string).split('-').map(Number);
-    handleTimePress({ hour, minute });
-  };
-
-  return (
-    <View className="mt-4 flex-1">
-      {timeLabel && (
-        <BaseText className="mb-3 text-sm font-semibold text-secondary">
-          {timeLabel}
-        </BaseText>
-      )}
-      <View className="relative flex-1">
-        <GestureScrollView
-          style={{ flex: 1, minHeight: 200 }}
-          showsVerticalScrollIndicator={false}
-          nestedScrollEnabled
-        >
-          <BaseRadioGroup
-            options={radioOptions}
-            value={selectedValue}
-            onChange={handleRadioChange}
-            disabled={disabled}
-          />
-          <View className="h-20" />
-        </GestureScrollView>
-        {radioOptions.length > 3 && (
-          <LinearGradient
-            colors={[
-              'rgba(255, 255, 255, 0)',
-              'rgba(255, 255, 255, 1)',
-            ]}
-            start={{ x: 0, y: 0 }}
-            end={{ x: 0, y: 1 }}
-            className="absolute bottom-0 left-0 h-32 w-full"
-            style={{ pointerEvents: 'none' }}
-          />
-        )}
-      </View>
-    </View>
-  );
-}
-
-export interface DateTimeSelectorProps extends ViewProps {
-  value: Date | undefined;
-  onChange: (date?: Date) => void;
-  minDate?: Date;
-  maxDate?: Date;
-  minHour?: number;
-  maxHour?: number;
-  timeSlotStepMinutes?: number;
-  disabledWeekDays?: number[];
-  disabledHours?: number[];
-  dateLabel?: string;
-  timeLabel?: string;
-  description?: string;
-  className?: string;
-  disabled?: boolean;
-  error?: string;
-  allowPastDatetimes?: boolean;
-}
-
-function DateTimeSelector({
-  value,
-  onChange,
-  minDate,
-  maxDate,
-  minHour = 0,
-  maxHour = 23,
-  timeSlotStepMinutes = 30,
-  disabledWeekDays = [],
-  disabledHours = [],
-  dateLabel,
-  timeLabel,
-  description,
-  disabled = false,
-  error,
-  allowPastDatetimes = false,
-  ...props
-}: DateTimeSelectorProps) {
-  const [selectedDate, setSelectedDate] = useState<Date | undefined>(value);
-
-  const minDateStartOfDay = useMemo(() => startOfDay(minDate || new Date()), [minDate]);
-  const maxDateEndOfDay = useMemo(() => (maxDate ? startOfDay(maxDate) : null), [maxDate]);
-
-  const dateRange = useMemo(() => {
-    const startDate = minDateStartOfDay;
-    const endDate = maxDateEndOfDay || addDays(startDate, 7);
-
-    return eachDayOfInterval({ start: startDate, end: endDate });
-  }, [minDateStartOfDay, maxDateEndOfDay]);
-
-  const getTimeSlotsForDate = useCallback((date: Date): TimeSlot[] => {
-    const slots: TimeSlot[] = [];
-    const now = new Date();
-
-    for (let hour = minHour; hour <= maxHour; hour += 1) {
-      if (disabledHours.includes(hour)) continue;
-      if (!allowPastDatetimes && isToday(date) && hour < now.getHours()) continue;
-
-      for (let minute = 0; minute < 60; minute += timeSlotStepMinutes) {
-        if (
-          !allowPastDatetimes
-            && isToday(date)
-            && hour === now.getHours()
-            && minute <= now.getMinutes()
-        ) continue;
-
-        const endTime = new Date();
-        endTime.setHours(hour, minute + timeSlotStepMinutes, 0, 0);
-        const endHour = endTime.getHours();
-        const endMinute = endTime.getMinutes();
-
-        const startTime = new Date().setHours(hour, minute);
-        const endTimeForLabel = new Date().setHours(endHour, endMinute);
-        const startLabel = format(startTime, 'h:mm');
-        const endLabel = format(endTimeForLabel, 'h:mm a');
-        const hourLabel = `${startLabel} - ${endLabel}`;
-
-        slots.push({
-          hour, minute, endHour, endMinute, label: hourLabel,
-        });
-      }
-    }
-
-    return slots;
-  }, [minHour, maxHour, timeSlotStepMinutes, disabledHours, allowPastDatetimes]);
-
-  const timeSlots = useMemo<TimeSlot[]>(() => {
-    if (!selectedDate) return [];
-    return getTimeSlotsForDate(selectedDate);
-  }, [selectedDate, getTimeSlotsForDate]);
-
-  const isDayDisabled = useCallback((day: Date) => {
-    if (disabled) return true;
-    if (minDateStartOfDay && isBefore(day, minDateStartOfDay)) return true;
-    if (maxDateEndOfDay && isAfter(day, maxDateEndOfDay)) return true;
-    if (disabledWeekDays.includes(getDay(day))) return true;
-    if (!allowPastDatetimes && isBefore(day, startOfDay(new Date()))) return true;
-
-    // Check if there are available time slots for this day
-    const availableSlots = getTimeSlotsForDate(day);
-    if (availableSlots.length === 0) return true;
-
-    return false;
-  }, [
-    disabled,
-    minDateStartOfDay,
-    maxDateEndOfDay,
-    disabledWeekDays,
-    allowPastDatetimes,
-    getTimeSlotsForDate,
-  ]);
-
-  const handleDayPress = useCallback((day: Date) => {
-    if (isDayDisabled(day)) return;
-    setSelectedDate(day);
-
-    if (value) {
-      onChange(undefined);
-    }
-  }, [isDayDisabled, onChange, value]);
-
-  const handleTimePress = useCallback((time: { hour: number; minute: number }) => {
-    if (selectedDate) {
-      const newDate = new Date(selectedDate);
-      newDate.setHours(time.hour, time.minute, 0, 0);
-      onChange(newDate);
-    }
-  }, [selectedDate, onChange]);
-
-  const selectedTime = useMemo(() => {
-    if (!value || !selectedDate || !isSameDay(value, selectedDate)) return null;
-
-    return { hour: value.getHours(), minute: value.getMinutes() };
-  }, [value, selectedDate]);
-
-  return (
-    <View
-      className="flex flex-1 flex-col"
-      {...props}
-    >
-      {dateLabel && (
-        <BaseText className="mb-2 font-semibold text-secondary">
-          {dateLabel}
-        </BaseText>
-      )}
-      {description && (
-        <BaseText className="mb-4 text-tertiary">
-          {description}
-        </BaseText>
-      )}
-      <BaseDatesScrollView
-        dateRange={dateRange}
-        selectedDate={selectedDate}
-        isDayDisabled={isDayDisabled}
-        onDayPress={handleDayPress}
-      />
-      {selectedDate && (
-        <TimeSlots
-          timeSlots={timeSlots}
-          selectedTime={selectedTime}
-          handleTimePress={handleTimePress}
-          disabled={disabled}
-          timeLabel={timeLabel}
-        />
-      )}
-      {error && (
-        <BaseText className="mt-2 text-error-primary">
-          {error}
-        </BaseText>
-      )}
-    </View>
-  );
-}
-
-export default styled(DateTimeSelector);

package/src/components/FormikCameraImageInput.tsx

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