create-react-native-starter-kit 0.0.0-stage → 1.0.1

package/template/src/components/shared/DocumentPicker.tsx

@@ -0,0 +1,86 @@
+import React, {
+  forwardRef,
+  memo,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+import {
+  useDocumentPicker,
+  type PickedFile,
+} from '@/hooks/useDocumentPicker';
+import ImagePickerSheet from './bottom-sheet/sheets/ImagePickerSheet';
+import { BSRef } from './bottom-sheet/types';
+
+export type DocumentPickerRef = {
+  open: () => void;
+  close: () => void;
+};
+
+type SourceType = 'files' | 'camera' | 'both';
+
+interface Props {
+  source?: SourceType;
+  maxSize?: number;
+  quality?: number;
+  multiple?: boolean;
+  onDocumentChange?: (file: PickedFile) => void;
+}
+
+const DocumentPicker = forwardRef<DocumentPickerRef, Props>(
+  (
+    {
+      source = 'both',
+      maxSize = 1024,
+      quality = 85,
+      multiple = false,
+      onDocumentChange,
+    },
+    ref,
+  ) => {
+    const sheetRef = useRef<BSRef>(null);
+    const { captureFromCamera, documents, pickFromFiles, resetDocuments } =
+      useDocumentPicker({
+        maxSize,
+        quality,
+        multiple,
+      });
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        open: () => {
+          if (source === 'both') {
+            sheetRef.current?.open();
+          } else if (source === 'camera') {
+            captureFromCamera();
+          } else {
+            pickFromFiles();
+          }
+        },
+        close: () => sheetRef.current?.close(),
+      }),
+      [source, captureFromCamera, pickFromFiles],
+    );
+
+    useEffect(() => {
+      if (!documents.length) return;
+
+      onDocumentChange?.(documents[0]);
+      resetDocuments();
+    }, [documents, onDocumentChange, resetDocuments]);
+
+    return (
+      <ImagePickerSheet
+        ref={sheetRef}
+        onCamera={captureFromCamera}
+        onGallery={pickFromFiles}
+        canDocUpload
+      />
+    );
+  },
+);
+
+DocumentPicker.displayName = 'DocumentPicker';
+
+export default memo(DocumentPicker);

package/template/src/components/shared/GlobalLoader.tsx

@@ -0,0 +1,47 @@
+import { useAppTheme } from '@/context/ThemeContext';
+import { useAppSelector } from '@/hooks/useAppSelector';
+import React from 'react';
+import { View, ActivityIndicator, StyleSheet, Modal } from 'react-native';
+
+const GlobalLoader = () => {
+  const isLoading = useAppSelector(state => state.loader.isLoading);
+  const { color } = useAppTheme();
+
+  return (
+    <Modal transparent visible={isLoading} statusBarTranslucent>
+      <View style={styles.container}>
+        <View
+          style={[
+            styles.loaderBox,
+            { backgroundColor: color.background_secondary },
+          ]}
+        >
+          <ActivityIndicator size="large" color={color.primary} />
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export default GlobalLoader;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  loaderBox: {
+    width: 70,
+    height: 70,
+    borderRadius: 12,
+    justifyContent: 'center',
+    alignItems: 'center',
+    elevation: 5,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+  },
+});

package/template/src/components/shared/Icon.tsx

@@ -0,0 +1,28 @@
+import { IconName, Icons } from '@/assets/icons';
+import React from 'react';
+import { SvgProps } from 'react-native-svg';
+
+export interface IconProps extends SvgProps {
+  name: IconName;
+  size?: number;
+  color?: string;
+}
+
+const Icon = ({ name, size = 24, color, ...props }: IconProps) => {
+  const Component = Icons[name];
+
+  if (!Component) {
+    return null;
+  }
+
+  return (
+    <Component
+      width={size}
+      height={size}
+      {...(color ? { fill: color } : {})}
+      {...props}
+    />
+  );
+};
+
+export default Icon;

package/template/src/components/shared/PressableIcon.tsx

@@ -0,0 +1,104 @@
+import Haptics from '@mhpdev/react-native-haptics';
+import React, { memo, useCallback, useRef } from 'react';
+import {
+  Pressable,
+  StyleSheet,
+  ViewStyle,
+  StyleProp,
+  Insets,
+} from 'react-native';
+import { isIOS } from '@/constants/device';
+import Icon from './Icon';
+import { IconName } from '@/assets/icons';
+
+type HapticType = 'light' | 'medium' | 'heavy' | 'soft' | 'rigid';
+
+export interface PressableIconProps {
+  name: IconName;
+  size?: number;
+  color?: string;
+  onPress?: () => Promise<void> | void;
+  onLongPress?: () => void;
+  disabled?: boolean;
+  haptic?: HapticType;
+  hitSlop?: number | Insets;
+  backgroundColor?: string;
+  borderRadius?: number;
+  containerStyle?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string;
+}
+
+const PressableIcon = ({
+  name,
+  size = 22,
+  color,
+  onPress,
+  onLongPress,
+  disabled = false,
+  haptic = 'light',
+  hitSlop = 8,
+  backgroundColor,
+  borderRadius,
+  containerStyle,
+  accessibilityLabel,
+}: PressableIconProps) => {
+  const pressLock = useRef(false);
+
+  const handlePress = useCallback(async () => {
+    if (pressLock.current || disabled) return;
+
+    pressLock.current = true;
+    Haptics.impact(haptic);
+
+    try {
+      await onPress?.();
+    } finally {
+      pressLock.current = false;
+    }
+  }, [disabled, haptic, onPress]);
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      onLongPress={onLongPress}
+      disabled={disabled}
+      hitSlop={hitSlop}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? name}
+      accessibilityState={{ disabled }}
+      android_ripple={{ color: 'transparent' }}
+      style={({ pressed }) => [
+        styles.base,
+        backgroundColor != null && { backgroundColor },
+        borderRadius != null && { borderRadius },
+        disabled && styles.disabled,
+        pressed && isIOS && styles.pressedIOS,
+        pressed && !isIOS && styles.pressedAndroid,
+        containerStyle,
+      ]}
+    >
+      <Icon name={name} size={size} color={color} />
+    </Pressable>
+  );
+};
+
+export default memo(PressableIcon);
+
+const styles = StyleSheet.create({
+  base: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden',
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  pressedIOS: {
+    opacity: 0.7,
+    transform: [{ scale: 0.94 }],
+  },
+  pressedAndroid: {
+    opacity: 0.85,
+    transform: [{ scale: 0.96 }],
+  },
+});

package/template/src/components/shared/bottom-sheet/BaseBottomSheet.tsx

@@ -0,0 +1,30 @@
+import React, { forwardRef, memo, useMemo } from 'react';
+import BottomSheet, { BottomSheetProps } from '@gorhom/bottom-sheet';
+import { useAppTheme } from '@/context/ThemeContext';
+
+interface Props extends Partial<Omit<BottomSheetProps, 'snapPoints'>> {
+  children: React.ReactNode;
+  snapPoints?: string[];
+}
+
+const BaseBottomSheet = forwardRef<BottomSheet, Props>(
+  ({ children, snapPoints = ['50%'], ...rest }, ref) => {
+    const memoSnapPoints = useMemo(() => snapPoints, [snapPoints]);
+    const { color } = useAppTheme();
+
+    return (
+      <BottomSheet
+        ref={ref}
+        snapPoints={memoSnapPoints}
+        backgroundStyle={[{ backgroundColor: color.background_secondary }]}
+        enablePanDownToClose
+        enableDynamicSizing
+        {...rest}
+      >
+        {children}
+      </BottomSheet>
+    );
+  },
+);
+
+export default memo(BaseBottomSheet);

package/template/src/components/shared/bottom-sheet/BaseBottomSheetModal.tsx

@@ -0,0 +1,50 @@
+import React, { forwardRef, memo, useCallback, useMemo } from 'react';
+import {
+  BottomSheetBackdrop,
+  BottomSheetModal,
+  BottomSheetModalProps,
+} from '@gorhom/bottom-sheet';
+import { BottomSheetDefaultBackdropProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetBackdrop/types';
+import { useAppTheme } from '@/context/ThemeContext';
+
+interface Props extends Partial<Omit<BottomSheetModalProps, 'snapPoints'>> {
+  children: React.ReactNode;
+  snapPoints?: string[];
+}
+
+const BaseBottomSheetModal = forwardRef<BottomSheetModal, Props>(
+  ({ children, snapPoints = ['50%'], ...rest }, ref) => {
+    const memoSnapPoints = useMemo(() => snapPoints, [snapPoints]);
+    const { color } = useAppTheme();
+
+    const bottomSheetBackdropRenderer = useCallback(
+      (backdropProps: BottomSheetDefaultBackdropProps) => {
+        return (
+          <BottomSheetBackdrop
+            {...backdropProps}
+            disappearsOnIndex={-1}
+            appearsOnIndex={0}
+            pressBehavior={'close'}
+          />
+        );
+      },
+      [],
+    );
+    return (
+      <BottomSheetModal
+        ref={ref}
+        snapPoints={memoSnapPoints}
+        backgroundStyle={[{ backgroundColor: color.background_secondary }]}
+        enablePanDownToClose
+        enableDynamicSizing
+        backdropComponent={bottomSheetBackdropRenderer}
+        handleIndicatorStyle={{ backgroundColor: color.border }}
+        {...rest}
+      >
+        {children}
+      </BottomSheetModal>
+    );
+  },
+);
+
+export default memo(BaseBottomSheetModal);

package/template/src/components/shared/bottom-sheet/sheets/ImagePickerSheet.tsx

@@ -0,0 +1,310 @@
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useCallback,
+  useMemo,
+  useRef,
+} from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import {
+  BottomSheetModal,
+  BottomSheetView,
+} from '@gorhom/bottom-sheet';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTranslation } from 'react-i18next';
+import type { IconName } from '@/assets/icons';
+import Icon from '@/components/shared/Icon';
+import CustomText from '@/components/shared/text/CustomText';
+import { useAppTheme } from '@/context/ThemeContext';
+import { ColorType, spacing } from '@/theme';
+import { normalize } from '@/utils/normalize';
+import BaseBottomSheetModal from '../BaseBottomSheetModal';
+import { BSRef } from '../types';
+
+interface Props {
+  onCamera: () => void;
+  onGallery: () => void;
+  /** When true, uses document-upload copy (images, PDF, etc.). */
+  canDocUpload?: boolean;
+}
+
+const OPEN_PICKER_DELAY_MS = 300;
+
+type SourceOption = {
+  id: 'camera' | 'gallery';
+  icon: IconName;
+  photoLabelKey: 'imagePicker.camera' | 'imagePicker.gallery';
+  photoHintKey: 'imagePicker.cameraHint' | 'imagePicker.galleryHint';
+  docLabelKey: 'imagePicker.docCamera' | 'imagePicker.docGallery';
+  docHintKey: 'imagePicker.docCameraHint' | 'imagePicker.docGalleryHint';
+};
+
+const SOURCE_OPTIONS: SourceOption[] = [
+  {
+    id: 'camera',
+    icon: 'claim_upload',
+    photoLabelKey: 'imagePicker.camera',
+    photoHintKey: 'imagePicker.cameraHint',
+    docLabelKey: 'imagePicker.docCamera',
+    docHintKey: 'imagePicker.docCameraHint',
+  },
+  {
+    id: 'gallery',
+    icon: 'folder',
+    photoLabelKey: 'imagePicker.gallery',
+    photoHintKey: 'imagePicker.galleryHint',
+    docLabelKey: 'imagePicker.docGallery',
+    docHintKey: 'imagePicker.docGalleryHint',
+  },
+];
+
+const ImagePickerSheet = forwardRef<BSRef, Props>(
+  ({ onCamera, onGallery, canDocUpload = false }, ref) => {
+    const { t } = useTranslation();
+    const insets = useSafeAreaInsets();
+    const { color } = useAppTheme();
+    const styles = useMemo(() => makeStyles(color), [color]);
+    const sheetRef = useRef<BottomSheetModal>(null);
+    const pendingActionRef = useRef<(() => void) | null>(null);
+
+    const titleKey = canDocUpload
+      ? 'imagePicker.docTitle'
+      : 'imagePicker.title';
+    const subtitleKey = canDocUpload
+      ? 'imagePicker.docSubtitle'
+      : 'imagePicker.subtitle';
+
+    useImperativeHandle(ref, () => ({
+      open: () => sheetRef.current?.present(),
+      close: () => sheetRef.current?.dismiss(),
+    }));
+
+    const runAfterClose = useCallback((action: () => void) => {
+      pendingActionRef.current = action;
+      sheetRef.current?.dismiss();
+    }, []);
+
+    const handleDismiss = useCallback(() => {
+      const action = pendingActionRef.current;
+      pendingActionRef.current = null;
+      if (!action) return;
+      setTimeout(action, OPEN_PICKER_DELAY_MS);
+    }, []);
+
+    const handleCamera = useCallback(() => {
+      runAfterClose(onCamera);
+    }, [onCamera, runAfterClose]);
+
+    const handleGallery = useCallback(() => {
+      runAfterClose(onGallery);
+    }, [onGallery, runAfterClose]);
+
+    const handleCancel = useCallback(() => {
+      sheetRef.current?.dismiss();
+    }, []);
+
+    const handleOptionPress = useCallback(
+      (id: SourceOption['id']) => {
+        if (id === 'camera') {
+          handleCamera();
+          return;
+        }
+        handleGallery();
+      },
+      [handleCamera, handleGallery],
+    );
+
+    return (
+      <BaseBottomSheetModal
+        ref={sheetRef}
+        enableDynamicSizing
+        enablePanDownToClose
+        onDismiss={handleDismiss}
+        backgroundStyle={styles.sheetBackground}
+        handleIndicatorStyle={styles.handleIndicator}
+      >
+        <BottomSheetView
+          style={[
+            styles.content,
+            { paddingBottom: Math.max(insets.bottom, spacing.md) },
+          ]}
+        >
+          <View style={styles.header}>
+            <View style={styles.headerTop}>
+              <CustomText
+                variant="titleSm"
+                weight="700"
+                textColor={color.text_heading}
+                style={styles.title}
+              >
+                {t(titleKey)}
+              </CustomText>
+              <Pressable
+                onPress={handleCancel}
+                hitSlop={12}
+                style={({ pressed }) => [
+                  styles.cancelHit,
+                  pressed && styles.cancelPressed,
+                ]}
+                accessibilityRole="button"
+                accessibilityLabel={t('common.cancel')}
+              >
+                <CustomText
+                  variant="label"
+                  weight="600"
+                  textColor={color.danger_strong}
+                  style={styles.cancelLabel}
+                >
+                  {t('common.cancel')}
+                </CustomText>
+              </Pressable>
+            </View>
+            <CustomText
+              variant="label"
+              weight="400"
+              textColor={color.text_secondary}
+              style={styles.subtitle}
+            >
+              {t(subtitleKey)}
+            </CustomText>
+          </View>
+
+          <View style={styles.options}>
+            {SOURCE_OPTIONS.map(option => {
+              const labelKey = canDocUpload
+                ? option.docLabelKey
+                : option.photoLabelKey;
+              const hintKey = canDocUpload
+                ? option.docHintKey
+                : option.photoHintKey;
+
+              return (
+              <Pressable
+                key={option.id}
+                onPress={() => handleOptionPress(option.id)}
+                style={({ pressed }) => [
+                  styles.optionCard,
+                  pressed && styles.optionPressed,
+                ]}
+                accessibilityRole="button"
+                accessibilityLabel={t(labelKey)}
+              >
+                <View style={styles.optionIconTile}>
+                  <Icon name={option.icon} width={20} height={20} />
+                </View>
+                <View style={styles.optionCopy}>
+                  <CustomText
+                    variant="label"
+                    weight="700"
+                    textColor={color.text_heading}
+                    style={styles.optionLabel}
+                  >
+                    {t(labelKey)}
+                  </CustomText>
+                  <CustomText
+                    variant="caption"
+                    weight="400"
+                    textColor={color.text_subtle}
+                    style={styles.optionHint}
+                  >
+                    {t(hintKey)}
+                  </CustomText>
+                </View>
+              </Pressable>
+              );
+            })}
+          </View>
+        </BottomSheetView>
+      </BaseBottomSheetModal>
+    );
+  },
+);
+
+export default React.memo(ImagePickerSheet);
+
+const makeStyles = (color: ColorType) =>
+  StyleSheet.create({
+    sheetBackground: {
+      backgroundColor: color.background_primary,
+      borderTopLeftRadius: normalize(24),
+      borderTopRightRadius: normalize(24),
+    },
+    handleIndicator: {
+      width: normalize(40),
+      height: normalize(4),
+      borderRadius: 999,
+      backgroundColor: color.border,
+    },
+    content: {
+      paddingHorizontal: spacing.md,
+      paddingTop: spacing.xs,
+    },
+    header: {
+      marginBottom: spacing.md,
+      gap: 6,
+    },
+    headerTop: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: 12,
+    },
+    title: {
+      marginBottom: 0,
+      flex: 1,
+    },
+    cancelHit: {
+      paddingVertical: 2,
+      paddingLeft: 8,
+    },
+    cancelLabel: {
+      marginBottom: 0,
+    },
+    cancelPressed: {
+      opacity: 0.7,
+    },
+    subtitle: {
+      marginBottom: 0,
+      lineHeight: normalize(20),
+    },
+    options: {
+      gap: 10,
+      marginBottom: spacing.xs,
+    },
+    optionCard: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+      minHeight: normalize(72),
+      paddingHorizontal: spacing.md,
+      paddingVertical: spacing.sm + 2,
+      borderRadius: normalize(16),
+      backgroundColor: color.background_soft,
+      borderWidth: 1,
+      borderColor: color.border,
+      overflow: 'hidden',
+    },
+    optionPressed: {
+      opacity: 0.88,
+      transform: [{ scale: 0.98 }],
+    },
+    optionIconTile: {
+      width: normalize(44),
+      height: normalize(44),
+      borderRadius: normalize(14),
+      backgroundColor: color.secondary_muted,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    optionCopy: {
+      flex: 1,
+      gap: 2,
+      minWidth: 0,
+    },
+    optionLabel: {
+      marginBottom: 0,
+    },
+    optionHint: {
+      marginBottom: 0,
+    },
+  });

package/template/src/components/shared/bottom-sheet/types.ts

@@ -0,0 +1,4 @@
+export type BSRef = {
+  open: () => void;
+  close: () => void;
+};