@grupalia/rn-ui-kit 0.15.0 → 0.16.0

package/src/components/Toasts.tsx

@@ -0,0 +1,200 @@
+import Constants from 'expo-constants';
+import React, { useEffect, useRef, useState } from 'react';
+import { resolveValue, useToaster } from 'react-hot-toast/headless';
+import type { Toast, ToastType } from 'react-hot-toast/headless';
+import { Animated, LayoutChangeEvent } from 'react-native';
+import { CheckIcon, ExclamationTriangleIcon } from 'react-native-heroicons/outline';
+
+import BaseIcon from './BaseIcon';
+import BaseText from './BaseText';
+import { View, ActivityIndicator } from '../hoc-components';
+import utilityColors from '../styles/utility-colors';
+
+interface ToastProps {
+  t: Toast;
+  updateHeight: (height: number) => void;
+  offset: number;
+}
+
+function DefaultIcon({ type }: { type: ToastType }): JSX.Element | null {
+  switch (type) {
+    case 'success':
+      return (
+        <View className="mr-2 flex items-center justify-center rounded-full bg-white p-0.5">
+          <BaseIcon
+            icon={CheckIcon}
+            size={12}
+            strokeWidth={2}
+            color="fg-success-primary"
+          />
+        </View>
+      );
+    case 'error':
+      return (
+        <View className="mr-2">
+          <BaseIcon
+            icon={ExclamationTriangleIcon}
+            size={16}
+            strokeWidth={2}
+            color="fg-white"
+          />
+        </View>
+      );
+    default:
+      return null;
+  }
+}
+
+function ToastIcon({ t }: { t: Toast }) {
+  if (t.type === 'loading') {
+    return (
+      <ActivityIndicator
+        color={utilityColors['utility-gray-400'].light}
+        size="small"
+        style={{ marginRight: 8 }}
+      />
+    );
+  }
+
+  if (t.icon) {
+    return (
+      <BaseText className="mr-2">
+        {t.icon}
+        {' '}
+      </BaseText>
+    );
+  }
+
+  return <DefaultIcon type={t.type} />;
+}
+
+function Toast({ t, updateHeight, offset }: ToastProps) {
+  const fadeAnim = useRef(new Animated.Value(0.5)).current;
+  const posAnim = useRef(new Animated.Value(-80)).current;
+
+  useEffect(() => {
+    Animated.timing(fadeAnim, {
+      useNativeDriver: true,
+      toValue: t.visible ? 1 : 0,
+      duration: 300,
+    }).start();
+  }, [fadeAnim, t.visible]);
+
+  useEffect(() => {
+    Animated.spring(posAnim, {
+      useNativeDriver: true,
+      toValue: t.visible ? offset : -80,
+    }).start();
+  }, [posAnim, offset, t.visible]);
+
+  const backgroundColor = (): string => {
+    switch (t.type) {
+      case 'error': return utilityColors['utility-error-500'].light;
+      case 'success': return utilityColors['utility-success-500'].light;
+      case 'loading': return utilityColors['utility-gray-50'].light;
+      default: return utilityColors['utility-brand-500'].light;
+    }
+  };
+
+  const textColor = (): string => {
+    switch (t.type) {
+      case 'loading': return utilityColors['utility-gray-500'].light;
+      default: return 'white';
+    }
+  };
+
+  const [isMultiline, setIsMultiline] = useState(false);
+  const containerWidth = useRef(0);
+
+  const handleTextLayout = (event: LayoutChangeEvent) => {
+    const { height } = event.nativeEvent.layout;
+    const singleLineTextHeight = 40;
+
+    setIsMultiline(height > singleLineTextHeight);
+  };
+
+  const message = resolveValue(t.message, t);
+
+  return (
+    <Animated.View
+      style={{
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        zIndex: t.visible ? 9999 : undefined,
+        alignItems: 'center',
+        opacity: fadeAnim,
+        transform: [
+          {
+            translateY: posAnim,
+          },
+        ],
+      }}
+    >
+      <View
+        onLayout={(event: LayoutChangeEvent) => {
+          updateHeight(event.nativeEvent.layout.height);
+          containerWidth.current = event.nativeEvent.layout.width;
+        }}
+        key={t.id}
+        style={{
+          margin: Constants.statusBarHeight + 10,
+          backgroundColor: backgroundColor(),
+          borderRadius: 30,
+          borderWidth: t.type === 'loading' ? 1 : 0,
+          borderColor: utilityColors['utility-gray-200'].light,
+          flexDirection: 'row',
+          maxWidth: '80%',
+          minWidth: 200,
+          alignItems: 'center',
+          alignSelf: 'center',
+          paddingVertical: 8,
+          paddingHorizontal: 24,
+        }}
+      >
+        <ToastIcon t={t} />
+        {typeof message === 'string' ? (
+          <BaseText
+            onLayout={handleTextLayout}
+            style={{
+              color: textColor(),
+              padding: 4,
+              alignSelf: 'center',
+              flexGrow: 1,
+              textAlign: isMultiline ? 'left' : 'center',
+            }}
+          >
+            {message}
+          </BaseText>
+        ) : message}
+      </View>
+    </Animated.View>
+  );
+}
+
+export default function Toasts() {
+  const { toasts, handlers } = useToaster();
+
+  return (
+    <View
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        zIndex: 9999,
+      }}
+    >
+      {toasts.map((t) => (
+        <Toast
+          key={t.id}
+          t={t}
+          updateHeight={(height) => handlers.updateHeight(t.id, height)}
+          offset={handlers.calculateOffset(t, {
+            reverseOrder: false,
+          })}
+        />
+      ))}
+    </View>
+  );
+}

package/src/components/index.ts

@@ -17,3 +17,9 @@ export { default as FormikDateInput } from './FormikDateInput';
 export { default as BaseSwitch } from './BaseSwitch';
 export { default as PressableOpacity } from './PressableOpacity';
 export { default as BaseText } from './BaseText';
+export { default as Toasts } from './Toasts';
+export { default as CameraWrapperModal, CameraWrapperModalImage } from './CameraWrapperModal';
+export { default as ImagePickerBottomSheet, ImagePickerBottomSheetImage } from './ImagePickerBottomSheet';
+export { default as PhotoPickerModal } from './PhotoPickerModal';
+export { default as CameraImageInput, CameraImageInputProps, CameraImage } from './CameraImageInput';
+export { default as FormikCameraImageInput } from './FormikCameraImageInput';

package/src/components/svgs/Camera.tsx

@@ -0,0 +1,14 @@
+import { styled } from 'nativewind';
+import { ComponentProps } from 'react';
+
+import CameraSvg from '../../assets/illustrations/camera.svg';
+
+type Props = ComponentProps<typeof CameraSvg>;
+
+function Camera(props: Props) {
+  return (
+    <CameraSvg {...props} />
+  );
+}
+
+export default styled(Camera);

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './useBreakpoints';
+export * from './useIsAboveBreakpoint';
+export { default as useInternetConnectionStatus } from './useInternetConnectionStatus';

package/src/hooks/useBreakpoints.ts

@@ -0,0 +1,20 @@
+import { useMemo } from 'react';
+import { useWindowDimensions } from 'react-native';
+
+export const BREAKPOINTS = {
+  xs: 378,
+  sm: 436,
+  base: 494,
+};
+
+export type Breakpoint = keyof typeof BREAKPOINTS;
+
+export function useBreakpoints(): Breakpoint {
+  const { width } = useWindowDimensions();
+
+  return useMemo(() => {
+    if (width < BREAKPOINTS.sm) return 'xs';
+    if (width < BREAKPOINTS.base) return 'sm';
+    return 'base';
+  }, [width]);
+}

package/src/hooks/useInternetConnectionStatus.ts

@@ -0,0 +1,221 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { useNetInfo } from '@react-native-community/netinfo';
+import {
+  useState, useEffect, useCallback, useRef, useMemo,
+} from 'react';
+
+import { MS_IN_A_SECOND } from '../utils/timeConstants';
+
+export interface InternetConnectionStatus {
+  isConnected: boolean | null;
+  isLoading: boolean;
+  lastChecked: Date | null;
+  isWeakConnection: boolean;
+}
+
+export interface InternetConnectionStatusProps {
+  checkInterval?: number;
+  timeout?: number;
+  checkHealth: () => Promise<{ ok: boolean }>;
+}
+
+interface CachedInternetConnectionStatus {
+  hasInternetAccess: boolean;
+  timestamp: number;
+}
+
+const DEFAULT_SETTINGS: Required<Omit<InternetConnectionStatusProps, 'checkHealth'>> = {
+  checkInterval: 15 * MS_IN_A_SECOND,
+  timeout: 5 * MS_IN_A_SECOND,
+};
+
+const CACHE_KEY = 'internet_connectivity_status';
+const CACHE_EXPIRY_TIME = 10 * MS_IN_A_SECOND;
+const STRONG_CONNECTION_THRESHOLD = 20;
+
+let ongoingNetworkTest: Promise<boolean> | null = null;
+
+// Global event broadcaster for syncing all instances
+const globalListeners = new Set<(hasInternetAccess: boolean | null) => void>();
+
+function broadcastConnectionChange(hasInternetAccess: boolean | null) {
+  globalListeners.forEach((listener) => {
+    try {
+      listener(hasInternetAccess);
+    } catch {
+      // Ignore listener errors
+    }
+  });
+}
+
+async function getCachedStatus() {
+  try {
+    const cached = await AsyncStorage.getItem(CACHE_KEY);
+    if (!cached) return null;
+
+    const parsedCache: CachedInternetConnectionStatus = JSON.parse(cached);
+    const isExpired = Date.now() - parsedCache.timestamp > CACHE_EXPIRY_TIME;
+
+    if (isExpired) {
+      await AsyncStorage.removeItem(CACHE_KEY);
+      return null;
+    }
+
+    return parsedCache;
+  } catch {
+    return null;
+  }
+}
+
+async function setCachedStatus(internetAccess: boolean) {
+  try {
+    const cacheData: CachedInternetConnectionStatus = {
+      hasInternetAccess: internetAccess,
+      timestamp: Date.now(),
+    };
+    await AsyncStorage.setItem(CACHE_KEY, JSON.stringify(cacheData));
+  } catch {
+    // Silently fail if we can't write to cache
+  }
+}
+
+export default function useInternetConnectionStatus(props: InternetConnectionStatusProps) {
+  const { checkInterval, timeout, checkHealth } = { ...DEFAULT_SETTINGS, ...props };
+
+  const netInfo = useNetInfo();
+
+  const [successfulHealthCheck, setSuccessfulHealthCheck] = useState<boolean | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [lastChecked, setLastChecked] = useState<Date | null>(null);
+
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  const cleanupIntervals = useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+    }
+  }, []);
+
+  const performNetworkTest = useCallback(async (): Promise<boolean> => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+
+    const abortController = new AbortController();
+    abortControllerRef.current = abortController;
+
+    const timeoutId = setTimeout(() => {
+      abortController.abort();
+    }, timeout);
+
+    try {
+      const response = await checkHealth();
+
+      clearTimeout(timeoutId);
+      const isConnected = response.ok;
+
+      await setCachedStatus(isConnected);
+
+      setSuccessfulHealthCheck(isConnected);
+      setLastChecked(new Date());
+
+      broadcastConnectionChange(isConnected);
+
+      return isConnected;
+    } catch (err) {
+      clearTimeout(timeoutId);
+      if (err instanceof Error && err.name === 'AbortError') return false;
+
+      await setCachedStatus(false);
+
+      setSuccessfulHealthCheck(false);
+      setLastChecked(new Date());
+
+      broadcastConnectionChange(false);
+
+      return false;
+    } finally {
+      abortControllerRef.current = null;
+    }
+  }, [timeout]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const requestCachedStatusOrPerformNetworkTest = useCallback(async () => {
+    const cachedStatus = await getCachedStatus();
+    if (cachedStatus) {
+      setSuccessfulHealthCheck(cachedStatus.hasInternetAccess);
+      setLastChecked(new Date(cachedStatus.timestamp));
+
+      return cachedStatus.hasInternetAccess;
+    }
+
+    setIsLoading(true);
+
+    if (ongoingNetworkTest) {
+      try {
+        const result = await ongoingNetworkTest;
+        return result;
+      } catch {
+        return false;
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    ongoingNetworkTest = performNetworkTest();
+
+    try {
+      const result = await ongoingNetworkTest;
+      return result;
+    } catch {
+      return false;
+    } finally {
+      setIsLoading(false);
+      ongoingNetworkTest = null;
+    }
+  }, [performNetworkTest]);
+
+  // Setup
+  useEffect(() => {
+    cleanupIntervals();
+
+    if (checkInterval > 0) {
+      requestCachedStatusOrPerformNetworkTest();
+
+      intervalRef.current = setInterval(() => {
+        requestCachedStatusOrPerformNetworkTest();
+      }, checkInterval);
+    }
+
+    return cleanupIntervals;
+  }, [requestCachedStatusOrPerformNetworkTest, cleanupIntervals, checkInterval]);
+
+  const { isConnected, type, details } = netInfo;
+
+  const result = useMemo(() => ({
+    isConnected: successfulHealthCheck,
+    isLoading,
+    lastChecked,
+    isWeakConnection: isConnected === true && type === 'wifi' && details.strength && details.strength < STRONG_CONNECTION_THRESHOLD,
+  }), [successfulHealthCheck, isLoading, lastChecked, isConnected, type, details]);
+
+  // Listen for changes from other instances
+  useEffect(() => {
+    const listener = (globalHasInternetAccess: boolean | null) => {
+      if (successfulHealthCheck !== globalHasInternetAccess) {
+        setSuccessfulHealthCheck(globalHasInternetAccess);
+        AsyncStorage.removeItem(CACHE_KEY).catch(() => {});
+      }
+    };
+
+    globalListeners.add(listener);
+    return () => { globalListeners.delete(listener); };
+  }, [successfulHealthCheck]);
+
+  return result;
+}

package/src/hooks/useIsAboveBreakpoint.ts

@@ -0,0 +1,8 @@
+import { useWindowDimensions } from 'react-native';
+
+import { BREAKPOINTS, Breakpoint } from './useBreakpoints';
+
+export function useIsAboveBreakpoint(minBreakpoint: Breakpoint): boolean {
+  const { width } = useWindowDimensions();
+  return width >= BREAKPOINTS[minBreakpoint];
+}

package/src/utils/fileDirectoryUtils.ts

@@ -0,0 +1,12 @@
+import * as FileSystem from 'expo-file-system';
+
+const ensureDirExists = async (dirPath: string) => {
+  const dirInfo = await FileSystem.getInfoAsync(dirPath);
+  if (!dirInfo.exists) {
+    await FileSystem.makeDirectoryAsync(dirPath, { intermediates: true });
+  }
+
+  return dirPath;
+};
+
+export { ensureDirExists };

package/src/utils/index.ts

@@ -1 +1,3 @@
 export * from './clabe';
+export * from './fileDirectoryUtils';
+export * from './timeConstants';

package/src/utils/timeConstants.ts

@@ -0,0 +1,19 @@
+const MS_IN_A_SECOND = 1_000;
+const HOURS_IN_A_DAY = 24;
+const MINUTES_IN_A_HOUR = 60;
+const SECONDS_IN_A_MINUTE = 60;
+const DAYS_IN_A_WEEK = 7;
+const MS_IN_A_DAY = MS_IN_A_SECOND * SECONDS_IN_A_MINUTE * MINUTES_IN_A_HOUR * HOURS_IN_A_DAY;
+const MS_IN_A_MINUTE = MS_IN_A_SECOND * SECONDS_IN_A_MINUTE;
+const MS_IN_A_WEEK = MS_IN_A_DAY * DAYS_IN_A_WEEK;
+
+export {
+  MS_IN_A_SECOND,
+  HOURS_IN_A_DAY,
+  MINUTES_IN_A_HOUR,
+  SECONDS_IN_A_MINUTE,
+  DAYS_IN_A_WEEK,
+  MS_IN_A_DAY,
+  MS_IN_A_MINUTE,
+  MS_IN_A_WEEK,
+};