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

package/template/src/utils/imagePickerHandler.ts

@@ -0,0 +1,200 @@
+import {
+  launchCamera,
+  launchImageLibrary,
+  CameraOptions,
+  ImageLibraryOptions,
+} from 'react-native-image-picker';
+import { getCompressedImage } from './imageCompress';
+import { ErrorHandler } from '@/services/errors';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+type ImageSourceType = 'gallery' | 'camera' | 'both';
+
+interface CompressedImageResult {
+  uri: string;
+  width: number;
+  height: number;
+}
+
+interface PickImageOptions {
+  /**
+   * Source type for image selection
+   * - 'gallery': Pick from photo library only
+   * - 'camera': Capture from camera only
+   * - 'both': Show action sheet to choose (handled by caller)
+   */
+  source: ImageSourceType;
+
+  /**
+   * Allow multiple image selection (only works with 'gallery' source)
+   * @default false
+   */
+  multiple?: boolean;
+
+  /**
+   * Maximum dimension (width/height) for resizing
+   * @default 256
+   */
+  maxSize?: number;
+
+  /**
+   * Compression quality (0-100)
+   * @default 80
+   */
+  quality?: number;
+
+  /**
+   * Maximum number of images to select (0 = unlimited, only for multiple)
+   * @default 0
+   */
+  selectionLimit?: number;
+}
+
+interface PickImageResult {
+  /** Array of compressed image results */
+  images: CompressedImageResult[];
+  /** Whether the operation was cancelled */
+  cancelled: boolean;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Default Options
+// ─────────────────────────────────────────────────────────────────────────────
+
+const defaultOptions: Required<Omit<PickImageOptions, 'source'>> = {
+  multiple: false,
+  maxSize: 256,
+  quality: 80,
+  selectionLimit: 0,
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Main Function
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Unified image picker with compression
+ *
+ * @example
+ * // Pick single image from gallery
+ * const result = await pickImage({ source: 'gallery' });
+ *
+ * // Capture from camera
+ * const result = await pickImage({ source: 'camera' });
+ *
+ * // Pick multiple images with custom compression
+ * const result = await pickImage({
+ *   source: 'gallery',
+ *   multiple: true,
+ *   maxSize: 512,
+ *   quality: 85,
+ *   selectionLimit: 5,
+ * });
+ */
+export const pickImage = async (
+  options: PickImageOptions,
+): Promise<PickImageResult> => {
+  const config = { ...defaultOptions, ...options };
+  const { source, multiple, maxSize, quality, selectionLimit } = config;
+
+  try {
+    // Prepare picker options
+    const pickerOptions: CameraOptions & ImageLibraryOptions = {
+      mediaType: 'photo',
+      includeBase64: false,
+      quality: 1, // Get full quality, we compress manually
+      selectionLimit: multiple ? selectionLimit : 1,
+    };
+
+    // Launch appropriate picker
+    const result =
+      source === 'camera'
+        ? await launchCamera(pickerOptions)
+        : await launchImageLibrary(pickerOptions);
+
+    // Handle cancellation
+    if (result.didCancel || !result.assets?.length) {
+      return { images: [], cancelled: true };
+    }
+
+    // Compress all selected images
+    const compressedImages: CompressedImageResult[] = [];
+
+    for (const asset of result.assets) {
+      if (!asset.uri) continue;
+
+      const compressed = await getCompressedImage({
+        path: asset.uri,
+        maxWidth: asset.width ?? maxSize,
+        maxHeight: asset.height ?? maxSize,
+        maxSize,
+        quality,
+      });
+
+      if (compressed?.path) {
+        compressedImages.push({
+          uri: compressed.path,
+          width: compressed.width,
+          height: compressed.height,
+        });
+      }
+    }
+
+    return {
+      images: compressedImages,
+      cancelled: false,
+    };
+  } catch (error) {
+    ErrorHandler(error);
+    return { images: [], cancelled: false };
+  }
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Convenience Functions
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Pick single image from gallery
+ */
+export const pickSingleImage = async (
+  options?: Partial<Omit<PickImageOptions, 'source' | 'multiple'>>,
+): Promise<CompressedImageResult | null> => {
+  const result = await pickImage({
+    source: 'gallery',
+    multiple: false,
+    ...options,
+  });
+  return result.images[0] ?? null;
+};
+
+/**
+ * Capture image from camera
+ */
+export const captureImage = async (
+  options?: Partial<Omit<PickImageOptions, 'source' | 'multiple'>>,
+): Promise<CompressedImageResult | null> => {
+  const result = await pickImage({
+    source: 'camera',
+    multiple: false,
+    ...options,
+  });
+  return result.images[0] ?? null;
+};
+
+/**
+ * Pick multiple images from gallery
+ */
+export const pickMultipleImages = async (
+  options?: Partial<Omit<PickImageOptions, 'source' | 'multiple'>>,
+): Promise<CompressedImageResult[] | null> => {
+  const result = await pickImage({
+    source: 'gallery',
+    multiple: true,
+    ...options,
+  });
+  return result.images.length ? result.images : null;
+};

package/template/src/utils/maskPhone.ts

@@ -0,0 +1,17 @@
+/**
+ * Masks a phone number, keeping the first `visibleDigits` digits.
+ * Example: 9876543210 → +91 98XXXXXXX (default)
+ */
+export const maskPhone = (
+  phone?: string | null,
+  visibleDigits = 2,
+  countryCode = '+91',
+): string => {
+  const digits = (phone ?? '').replace(/\D/g, '');
+  if (!digits) return '—';
+
+  const visible = digits.slice(0, visibleDigits);
+  const masked = 'X'.repeat(Math.max(digits.length - visibleDigits, 0));
+
+  return `${countryCode} ${visible}${masked}`;
+};

package/template/src/utils/normalize.ts

@@ -0,0 +1,12 @@
+import { AppDimensions } from '@/constants/device';
+import { PixelRatio } from 'react-native';
+
+const BASE_WIDTH = 375;
+const MAX_SCALE = 1.2;
+
+export const normalize = (size: number) => {
+  const scale = Math.min(AppDimensions.windowWidth / BASE_WIDTH, MAX_SCALE);
+  const newSize = size * scale;
+
+  return PixelRatio.roundToNearestPixel(newSize);
+};

package/template/src/validation/messages.ts

@@ -0,0 +1,11 @@
+export const MSG = {
+  required: 'validation.required',
+  min: 'validation.minLength',
+  max: 'validation.maxLength',
+  email: 'validation.invalidEmail',
+  phone: 'validation.invalidPhone',
+  hasLetter: 'validation.hasLetter',
+  zip: 'validation.invalidZip',
+  strongPassword: 'validation.strongPassword',
+  selectOption: 'validation.selectOption',
+};

package/template/src/validation/rules.ts

@@ -0,0 +1,44 @@
+import { REGEX } from '@/constants/regex';
+import { MSG } from './messages';
+import { LIMITS } from '@/constants/limits';
+
+type Limits = { min?: number; max?: number };
+
+const withLength = (limits?: Limits) => ({
+  ...(limits?.min && {
+    minLength: { value: limits.min, message: MSG.min },
+  }),
+  ...(limits?.max && {
+    maxLength: { value: limits.max, message: MSG.max },
+  }),
+});
+
+const base = (limits?: Limits) => ({
+  setValueAs: (v: string) => v?.trim(),
+  ...withLength(limits),
+});
+
+// NOTE:
+// This file contains rule-based validation for reference and fallback use.
+// If you are not using schema-based validation (Yup), you may use these
+// rules directly with FormInput.
+
+export const rules = {
+  name: (override?: Limits) => ({
+    required: MSG.required,
+    pattern: { value: REGEX.HAS_LETTER, message: MSG.hasLetter },
+    ...base({ ...LIMITS.NAME, ...override }),
+  }),
+
+  email: () => ({
+    required: MSG.required,
+    pattern: { value: REGEX.EMAIL, message: MSG.email },
+    ...base(),
+  }),
+
+  password: () => ({
+    required: MSG.required,
+    pattern: { value: REGEX.STRONG_PASSWORD, message: MSG.strongPassword },
+    setValueAs: (v: string) => v?.trim(),
+  }),
+};

package/template/src/validation/schema/auth.schema.ts

@@ -0,0 +1,53 @@
+import * as yup from 'yup';
+import { LIMITS } from '../../constants/limits';
+import { REGEX } from '../../constants/regex';
+import { MSG } from '../messages';
+
+export const registerSchema = yup.object({
+  email: yup
+    .string()
+    .trim()
+    .required(MSG.required)
+    .email(MSG.email)
+    .min(LIMITS.EMAIL.min, MSG.min)
+    .max(LIMITS.EMAIL.max, MSG.max)
+    .matches(REGEX.EMAIL, MSG.email),
+
+  password: yup
+    .string()
+    .trim()
+    .required(MSG.required)
+    .min(LIMITS.PASSWORD.min, MSG.min)
+    .max(LIMITS.PASSWORD.max, MSG.max)
+    .matches(REGEX.STRONG_PASSWORD, MSG.strongPassword),
+});
+
+export const loginSchema = yup.object({
+  email: yup
+    .string()
+    .trim()
+    .required(MSG.required)
+    .email(MSG.email)
+    .min(LIMITS.EMAIL.min, MSG.min)
+    .max(LIMITS.EMAIL.max, MSG.max)
+    .matches(REGEX.EMAIL, MSG.email),
+
+  password: yup
+    .string()
+    .trim()
+    .required(MSG.required)
+    .min(LIMITS.PASSWORD.min, MSG.min)
+    .max(LIMITS.PASSWORD.max, MSG.max)
+    .matches(REGEX.STRONG_PASSWORD, MSG.strongPassword),
+});
+
+export const forgotPasswordSchema = yup.object({
+  email: yup
+    .string()
+    .trim()
+    .required(MSG.required)
+    .email(MSG.email)
+    .min(LIMITS.EMAIL.min, MSG.min)
+    .max(LIMITS.EMAIL.max, MSG.max)
+    .matches(REGEX.EMAIL, MSG.email),
+});

package/template/src/validation/schema/user.schema.ts

@@ -0,0 +1,46 @@
+import { LIMITS } from '@/constants/limits';
+import { REGEX } from '@/constants/regex';
+import * as yup from 'yup';
+import { MSG } from '../messages';
+
+export const profileSetupSchema = yup.object({
+  name: yup
+    .string()
+    .trim()
+    .required(MSG.required)
+    .min(LIMITS.NAME.min, MSG.min)
+    .max(LIMITS.NAME.max, MSG.max)
+    .matches(REGEX.HAS_LETTER, MSG.hasLetter),
+
+  phone: yup
+    .string()
+    .trim()
+    .required(MSG.required)
+    .test('phone-min', MSG.min, val => {
+      if (!val) return false;
+      const digits = val.replace(/\D/g, '');
+      return digits.length >= LIMITS.PHONE.min;
+    })
+    .test('phone-max', MSG.max, val => {
+      if (!val) return false;
+      const digits = val.replace(/\D/g, '');
+      return digits.length <= LIMITS.PHONE.max;
+    })
+    .matches(REGEX.PHONE, MSG.phone),
+
+  gender: yup.string().trim().required(MSG.selectOption),
+
+  address: yup
+    .string()
+    .trim()
+    .required(MSG.required)
+    .min(LIMITS.ADDRESS.min, MSG.min)
+    .max(LIMITS.ADDRESS.max, MSG.max)
+    .matches(REGEX.HAS_LETTER, MSG.hasLetter),
+
+  dob: yup.date().required(MSG.required),
+
+  currentTime: yup.date().required(MSG.required),
+
+  profilePicture: yup.string().nullable().notRequired(),
+});

package/template/src/validation/tValError.ts

@@ -0,0 +1,13 @@
+import { TFunction } from 'i18next';
+import { FieldError } from 'react-hook-form';
+
+type Params = {
+  min?: number;
+  max?: number;
+  field?: string;
+};
+
+export const tValError = (t: TFunction, err?: FieldError, params?: Params) => {
+  if (!err?.message) return undefined;
+  return t(err.message as any, { ...params });
+};