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

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

@@ -0,0 +1,175 @@
+import React, { useState, useCallback, useEffect, useRef, memo } from 'react';
+import { Pressable, StyleSheet, View, ViewStyle } from 'react-native';
+import AppImage from './AppImage';
+import { GlobalImage } from '@/assets/images';
+import Icon from './Icon';
+import { useAppTheme } from '@/context/ThemeContext';
+import { isIOS } from '@/constants/device';
+import { useImagePicker } from '@/hooks/useImagePicker';
+import ImagePickerSheet from './bottom-sheet/sheets/ImagePickerSheet';
+import { BSRef } from './bottom-sheet/types';
+import BaseSkelton from './skelton/BaseSkelton';
+import { avatarPickerLayout } from './skelton/layouts';
+
+type SourceType = 'gallery' | 'camera' | 'both';
+
+interface Props {
+  imageUrl?: string;
+  defaultImage?: any;
+  width?: number;
+  height?: number;
+  alignSelf?: ViewStyle['alignSelf'];
+  containerStyle?: ViewStyle;
+  editable?: boolean;
+  editIconSize?: number;
+  isLoading?: boolean;
+
+  source?: SourceType;
+  maxSize?: number;
+  quality?: number;
+  onImageChange?: (image: string) => void;
+}
+
+const AvatarPicker = ({
+  imageUrl,
+  defaultImage = GlobalImage.profilePlaceholder,
+  width = 100,
+  height = 100,
+  alignSelf = 'center',
+  containerStyle,
+  editable = false,
+  editIconSize = 28,
+  isLoading,
+  source = 'both',
+  maxSize = 256,
+  quality = 80,
+  onImageChange,
+}: Props) => {
+  const { color } = useAppTheme();
+  const { captureFromCamera, images, pickFromGallery } = useImagePicker({
+    maxSize,
+    quality,
+  });
+  const [localImageUri, setLocalImageUri] = useState<string | undefined>(
+    imageUrl,
+  );
+  const imageSource = localImageUri ? { uri: localImageUri } : defaultImage;
+  const sheetRef = useRef<BSRef>(null);
+
+  useEffect(() => {
+    if (images?.length > 0) {
+      const image = images[0];
+
+      setLocalImageUri(image.uri);
+      onImageChange?.(image.uri);
+    }
+  }, [images, onImageChange]);
+
+  useEffect(() => {
+    setLocalImageUri(imageUrl);
+  }, [imageUrl]);
+
+  const dynamicContainerStyle: ViewStyle = {
+    width,
+    height,
+    borderRadius: width / 2,
+    alignSelf,
+  };
+
+  // Main press handler
+  const handleEditPress = useCallback(() => {
+    if (source === 'both') {
+      sheetRef.current?.open();
+    } else if (source === 'camera') {
+      captureFromCamera();
+    } else {
+      pickFromGallery();
+    }
+  }, [source, captureFromCamera, pickFromGallery]);
+
+  return (
+    <>
+      <BaseSkelton
+        isLoading={isLoading}
+        layout={avatarPickerLayout({
+          size: width,
+        })}
+        containerStyle={[
+          styles.container,
+          dynamicContainerStyle,
+          containerStyle,
+        ]}
+      >
+        <View
+          style={[
+            styles.imageContainer,
+            { borderRadius: width / 2, borderColor: color.border },
+          ]}
+        >
+          <AppImage
+            source={imageSource}
+            style={styles.image}
+            resizeMode="cover"
+          />
+        </View>
+
+        {editable && (
+          <Pressable
+            onPress={handleEditPress}
+            style={({ pressed }) => [
+              styles.editIconContainer,
+              pressed && isIOS && { opacity: 0.7 },
+              {
+                width: editIconSize,
+                height: editIconSize,
+                borderRadius: editIconSize / 2,
+                backgroundColor: color.primary,
+                borderColor: color.background_secondary,
+              },
+            ]}
+            android_ripple={{
+              color: 'rgba(255,255,255,0.2)',
+              borderless: true,
+              foreground: true,
+            }}
+          >
+            <Icon name="edit" size={14} />
+          </Pressable>
+        )}
+      </BaseSkelton>
+      <ImagePickerSheet
+        ref={sheetRef}
+        onCamera={captureFromCamera}
+        onGallery={pickFromGallery}
+      />
+    </>
+  );
+};
+
+export default memo(AvatarPicker);
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 16,
+  },
+  imageContainer: {
+    overflow: 'hidden',
+    width: '100%',
+    height: '100%',
+    borderWidth: 0.5,
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  editIconContainer: {
+    position: 'absolute',
+    bottom: 2,
+    right: 2,
+    justifyContent: 'center',
+    alignItems: 'center',
+    elevation: 3,
+    borderWidth: 2,
+    overflow: 'hidden',
+  },
+});

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

@@ -0,0 +1,273 @@
+import { useNetwork } from '@/context/NetworkContext';
+import { useAppTheme } from '@/context/ThemeContext';
+import { ErrorToast } from '@/services/toast';
+import Haptics from '@mhpdev/react-native-haptics';
+import React, { memo, useRef, useCallback, ReactNode, useMemo } from 'react';
+import {
+  Pressable,
+  View,
+  ActivityIndicator,
+  StyleSheet,
+  TextStyle,
+  ViewStyle,
+  StyleProp,
+} from 'react-native';
+import { useTranslation } from 'react-i18next';
+import CustomText from './text/CustomText';
+import { normalize } from '@/utils/normalize';
+import { isHindiLanguage } from '@/utils/hindiText';
+import { isIOS } from '@/constants/device';
+import Icon from './Icon';
+import { IconName } from '@/assets/icons';
+import type { FontWeight, TextVariant } from '@/theme/typography';
+
+/* ───────────────── Types ───────────────── */
+
+type Variant = 'primary' | 'outline' | 'danger' | 'ghost';
+type Align = 'left' | 'center' | 'right';
+type HapticType = 'light' | 'medium' | 'heavy' | 'soft' | 'rigid';
+
+export interface AppButtonProps {
+  title?: string;
+  onPress?: () => Promise<void> | void;
+  onLongPress?: () => void;
+
+  variant?: Variant;
+  overrideVariantColor?: string;
+  overrideVariantTextColor?: string;
+
+  disabled?: boolean;
+  loading?: boolean;
+  /** Blocks the press while offline and shows a toast (use for API actions). */
+  requiresNetwork?: boolean;
+
+  align?: Align;
+  fullWidth?: boolean;
+
+  leftIcon?: IconName;
+  rightIcon?: IconName;
+  iconSize?: number;
+
+  haptic?: HapticType;
+
+  containerStyle?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+  textVariant?: TextVariant;
+  textWeight?: FontWeight;
+
+  backgroundColor?: string;
+  borderRadius?: number;
+
+  children?: ReactNode;
+}
+
+const CustomButton = ({
+  title,
+  onPress,
+  onLongPress,
+
+  variant = 'primary',
+  overrideVariantColor,
+  overrideVariantTextColor,
+
+  disabled = false,
+  loading = false,
+  requiresNetwork = false,
+
+  align = 'center',
+  fullWidth = false,
+
+  leftIcon,
+  rightIcon,
+  iconSize = 18,
+
+  haptic = 'light',
+
+  backgroundColor,
+  borderRadius = 16,
+
+  containerStyle,
+  textStyle,
+  textVariant = 'button',
+  textWeight = '600',
+  children,
+}: AppButtonProps) => {
+  const pressLock = useRef(false);
+  const { color } = useAppTheme();
+  const { t, i18n } = useTranslation();
+  const isHindi = isHindiLanguage(i18n.language);
+  const { isOffline } = useNetwork();
+  const isNetworkBlocked = requiresNetwork && isOffline;
+
+  const handlePress = useCallback(async () => {
+    if (pressLock.current || disabled || loading) return;
+
+    if (isNetworkBlocked) {
+      ErrorToast({
+        title: t('network.unavailableTitle'),
+        message: t('network.unavailableMessage'),
+      });
+      return;
+    }
+
+    pressLock.current = true;
+    try {
+      Haptics.impact(haptic);
+      await onPress?.();
+    } finally {
+      pressLock.current = false;
+    }
+  }, [isNetworkBlocked, disabled, loading, onPress, haptic, t]);
+
+  const alignSelf: ViewStyle['alignSelf'] =
+    align === 'left' ? 'flex-start' : align === 'right' ? 'flex-end' : 'center';
+
+  const isIconOnly = !title && !children && !!(leftIcon || rightIcon);
+
+  const variantButtonStyle = useMemo(
+    () => ({
+      primary: { backgroundColor: overrideVariantColor || color.primary },
+      danger: { backgroundColor: overrideVariantColor || color.danger },
+      outline: {
+        backgroundColor: 'transparent',
+        borderWidth: 1,
+        borderColor: overrideVariantColor || color.primary,
+      },
+      ghost: {
+        backgroundColor: overrideVariantColor || 'transparent',
+      },
+    }),
+    [color, overrideVariantColor],
+  );
+
+  const variantTextStyle = useMemo(
+    () => ({
+      primary: { color: overrideVariantTextColor || color.text_default },
+      danger: { color: overrideVariantTextColor || color.text_default },
+      outline: { color: overrideVariantTextColor || color.primary },
+      ghost: { color: color.primary },
+    }),
+    [color, overrideVariantTextColor],
+  );
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      onLongPress={onLongPress}
+      disabled={disabled || loading}
+      accessibilityRole="button"
+      accessibilityState={{ disabled: disabled || loading, busy: loading }}
+      style={({ pressed }) => [
+        buttonStyles.base,
+        isHindi && buttonStyles.baseHindi,
+        variantButtonStyle[variant],
+        fullWidth && buttonStyles.fullWidth,
+        disabled && buttonStyles.disabled,
+        pressed && isIOS && buttonStyles.pressedIOS,
+        pressed && !isIOS && buttonStyles.pressedAndroid,
+        { alignSelf },
+        backgroundColor && { backgroundColor },
+        { borderRadius },
+        containerStyle,
+      ]}
+      android_ripple={{
+        color: 'rgba(255,255,255,0.2)',
+        borderless: true,
+        foreground: true,
+      }}
+    >
+      {isIconOnly ? (
+        <Icon name={(leftIcon || rightIcon)!} size={iconSize} />
+      ) : (
+        <>
+          {leftIcon && (
+            <View style={fullWidth && buttonStyles.leftIcon}>
+              <Icon name={leftIcon} size={iconSize} />
+            </View>
+          )}
+          <View style={buttonStyles.content}>
+            {title ? (
+              <CustomText
+                style={[
+                  buttonStyles.title,
+                  loading && buttonStyles.hidden,
+                  variantTextStyle[variant],
+                  textStyle,
+                ]}
+                variant={textVariant}
+                weight={textWeight}
+                numberOfLines={1}
+              >
+                {title}
+              </CustomText>
+            ) : (
+              children
+            )}
+          </View>
+          {rightIcon && (
+            <View style={fullWidth && buttonStyles.rightIcon}>
+              <Icon name={rightIcon} size={iconSize} />
+            </View>
+          )}
+        </>
+      )}
+
+      {loading && (
+        <View style={buttonStyles.loader}>
+          <ActivityIndicator color={variantTextStyle[variant].color} />
+        </View>
+      )}
+    </Pressable>
+  );
+};
+
+export default memo(CustomButton);
+
+const buttonStyles = StyleSheet.create({
+  base: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    padding: 12,
+    minHeight: normalize(46),
+    gap: 8,
+  },
+  /** Extra vertical room for Devanagari matras inside overflow:hidden. */
+  baseHindi: {
+    paddingVertical: 14,
+    minHeight: normalize(50),
+  },
+  fullWidth: {
+    width: '100%',
+  },
+  disabled: {
+    opacity: 0.8,
+  },
+  pressedIOS: {
+    opacity: 0.9,
+    transform: [{ scale: 0.94 }],
+  },
+  pressedAndroid: {
+    opacity: 0.9,
+    transform: [{ scale: 0.96 }],
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flexShrink: 0,
+  },
+  title: {
+    flexShrink: 0,
+  },
+  loader: {
+    ...StyleSheet.absoluteFill,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  hidden: {
+    opacity: 0,
+  },
+  leftIcon: { position: 'absolute', left: 14 },
+  rightIcon: { position: 'absolute', right: 14 },
+});

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 }],
+  },
+});