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

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;
+};

package/template/src/components/shared/form-input/FormInput.tsx

@@ -0,0 +1,139 @@
+import { useState } from 'react';
+import { FormInputProps } from './type';
+import { StyleSheet, View } from 'react-native';
+import Tooltip from 'react-native-walkthrough-tooltip';
+import { Controller, FieldValues } from 'react-hook-form';
+import { FormInputRenderer } from './FormInputRenderer';
+import CustomText from '../text/CustomText';
+import { useAppTheme } from '@/context/ThemeContext';
+import Icon from '../Icon';
+import { isIOS } from '@/constants/device';
+import { FORM_FIELD } from './formFieldStyles';
+
+const FormInput = <T extends FieldValues>({
+  control,
+  name,
+  rules,
+  label,
+  error,
+  containerStyle,
+  labelStyle,
+  labelContainerStyle,
+  labelVariant = 'footnote',
+  labelWeight = '600',
+  isTooltip,
+  tooltipMessage,
+  variant,
+  ...rest
+}: FormInputProps<T>) => {
+  const [showTooltip, setShowTooltip] = useState<boolean>(false);
+  const { color, icon } = useAppTheme();
+
+  const handleTooltipPress = () => {
+    setShowTooltip(prev => !prev);
+  };
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      {label ? (
+        <View style={[styles.labelCont, labelContainerStyle]}>
+          <CustomText
+            style={[styles.label, labelStyle]}
+            variant={labelVariant}
+            weight={labelWeight}
+            textColor={color.text_primary}
+          >
+            {label}
+          </CustomText>
+
+          {isTooltip ? (
+            <Tooltip
+              isVisible={showTooltip}
+              placement="bottom"
+              tooltipStyle={styles.tooltip}
+              content={
+                <CustomText
+                  variant="label"
+                  textColor={color.text_input}
+                  style={styles.tooltipText}
+                >
+                  {tooltipMessage}
+                </CustomText>
+              }
+              contentStyle={[
+                styles.tooltipContent,
+                { backgroundColor: color.background_primary },
+              ]}
+              disableShadow
+              closeOnBackgroundInteraction={true}
+              closeOnContentInteraction={true}
+              childContentSpacing={isIOS ? 0 : -10}
+              showChildInTooltip={false}
+              onClose={handleTooltipPress}
+              backgroundColor="transparent"
+            >
+              <Icon
+                name={icon.tooltip}
+                size={15}
+                style={styles.tooltipIcon}
+                onPress={handleTooltipPress}
+                hitSlop={20}
+              />
+            </Tooltip>
+          ) : null}
+        </View>
+      ) : null}
+
+      <Controller
+        control={control}
+        name={name}
+        rules={rules}
+        render={({ field }) => (
+          <FormInputRenderer<T> variant={variant} field={field} {...rest} />
+        )}
+      />
+
+      {error ? (
+        <CustomText
+          variant="footnote"
+          weight="500"
+          textColor={color.danger}
+          style={styles.errorText}
+        >
+          {error}
+        </CustomText>
+      ) : null}
+    </View>
+  );
+};
+
+export default FormInput;
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    marginBottom: 0,
+  },
+  labelCont: {
+    flexDirection: 'row',
+    gap: 8,
+    alignItems: 'center',
+    marginBottom: FORM_FIELD.labelGap,
+  },
+  label: {
+    marginBottom: 0,
+  },
+  errorText: {
+    marginTop: 4,
+    marginBottom: 0,
+    marginLeft: 6,
+  },
+  tooltip: {
+    backgroundColor: 'transparent',
+  },
+  tooltipContent: {},
+  tooltipIcon: { marginBottom: 8 },
+  tooltipText: {
+    textAlign: 'center',
+  },
+});

package/template/src/components/shared/form-input/FormInputRenderer.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+  DropdownVariantProps,
+  FormInputProps,
+  TextInputVariantProps,
+} from './type';
+import TextInputVariant from './variants/TextInputVariant';
+import { ControllerRenderProps, FieldValues } from 'react-hook-form';
+import DropdownVariant from './variants/DropdownVariant';
+import CountryPhoneVariant from './variants/CountryPhoneVariant';
+import ToggleVariant from './variants/ToggleVariant';
+import DateTimeVariant from './variants/DateTimeVariant';
+
+type RendererProps<T extends FieldValues> = Omit<
+  FormInputProps<T>,
+  'control' | 'name' | 'rules' | 'label' | 'error'
+> & {
+  field: ControllerRenderProps<T>;
+};
+
+export const FormInputRenderer = <T extends FieldValues>(
+  props: RendererProps<T>,
+) => {
+  const { variant, field, ...rest } = props;
+
+  switch (variant) {
+    case 'dropdown': {
+      const dropdownProps = rest as DropdownVariantProps;
+
+      return <DropdownVariant mode="form" field={field} {...dropdownProps} />;
+    }
+
+    case 'country-phone': {
+      return (
+        <CountryPhoneVariant
+          ref={field.ref}
+          mode="form"
+          field={field}
+          {...rest}
+        />
+      );
+    }
+
+    case 'toggle': {
+      return <ToggleVariant mode="form" field={field} {...rest} />;
+    }
+
+    case 'date':
+      return (
+        <DateTimeVariant
+          mode="form"
+          field={field}
+          dateTimeMode="date"
+          {...rest}
+        />
+      );
+
+    case 'time':
+      return (
+        <DateTimeVariant
+          mode="form"
+          field={field}
+          dateTimeMode="time"
+          {...rest}
+        />
+      );
+
+    // case 'datetime':
+    //   return <DateField mode="datetime" field={field} {...rest} />;
+
+    default:
+      const textInputProps = rest as TextInputVariantProps;
+      return (
+        <TextInputVariant
+          field={field}
+          ref={field.ref}
+          mode="form"
+          {...textInputProps}
+        />
+      );
+  }
+};