@croacroa/react-native-template 1.0.0

package/utils/accessibility.ts

@@ -0,0 +1,446 @@
+import { AccessibilityInfo, AccessibilityRole } from "react-native";
+import { useEffect, useState } from "react";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface AccessibilityProps {
+  /**
+   * A brief description of the element
+   */
+  accessibilityLabel?: string;
+
+  /**
+   * Additional context about what will happen when the element is activated
+   */
+  accessibilityHint?: string;
+
+  /**
+   * The role of the element (button, link, header, etc.)
+   */
+  accessibilityRole?: AccessibilityRole;
+
+  /**
+   * State of the element (selected, disabled, checked, etc.)
+   */
+  accessibilityState?: {
+    disabled?: boolean;
+    selected?: boolean;
+    checked?: boolean | "mixed";
+    busy?: boolean;
+    expanded?: boolean;
+  };
+
+  /**
+   * Value for sliders, progress bars, etc.
+   */
+  accessibilityValue?: {
+    min?: number;
+    max?: number;
+    now?: number;
+    text?: string;
+  };
+
+  /**
+   * Whether the element is accessible
+   */
+  accessible?: boolean;
+
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+}
+
+// ============================================================================
+// Accessibility Builders
+// ============================================================================
+
+/**
+ * Build accessibility props for a button
+ */
+export function buttonA11y(
+  label: string,
+  options?: {
+    hint?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    testID?: string;
+  }
+): AccessibilityProps {
+  return {
+    accessible: true,
+    accessibilityRole: "button",
+    accessibilityLabel: label,
+    accessibilityHint: options?.hint,
+    accessibilityState: {
+      disabled: options?.disabled || options?.loading,
+      busy: options?.loading,
+    },
+    testID: options?.testID,
+  };
+}
+
+/**
+ * Build accessibility props for a link
+ */
+export function linkA11y(
+  label: string,
+  options?: {
+    hint?: string;
+    testID?: string;
+  }
+): AccessibilityProps {
+  return {
+    accessible: true,
+    accessibilityRole: "link",
+    accessibilityLabel: label,
+    accessibilityHint: options?.hint || "Double tap to open",
+    testID: options?.testID,
+  };
+}
+
+/**
+ * Build accessibility props for a text input
+ */
+export function inputA11y(
+  label: string,
+  options?: {
+    hint?: string;
+    error?: string;
+    required?: boolean;
+    testID?: string;
+  }
+): AccessibilityProps {
+  let accessibilityLabel = label;
+  if (options?.required) {
+    accessibilityLabel += ", required";
+  }
+  if (options?.error) {
+    accessibilityLabel += `, error: ${options.error}`;
+  }
+
+  return {
+    accessible: true,
+    accessibilityLabel,
+    accessibilityHint: options?.hint || "Double tap to edit",
+    testID: options?.testID,
+  };
+}
+
+/**
+ * Build accessibility props for a checkbox/switch
+ */
+export function toggleA11y(
+  label: string,
+  checked: boolean,
+  options?: {
+    hint?: string;
+    disabled?: boolean;
+    testID?: string;
+  }
+): AccessibilityProps {
+  return {
+    accessible: true,
+    accessibilityRole: "checkbox",
+    accessibilityLabel: label,
+    accessibilityHint:
+      options?.hint || `Double tap to ${checked ? "uncheck" : "check"}`,
+    accessibilityState: {
+      checked,
+      disabled: options?.disabled,
+    },
+    testID: options?.testID,
+  };
+}
+
+/**
+ * Build accessibility props for a header
+ */
+export function headerA11y(
+  label: string,
+  level: 1 | 2 | 3 | 4 | 5 | 6 = 1
+): AccessibilityProps {
+  return {
+    accessible: true,
+    accessibilityRole: "header",
+    accessibilityLabel: `${label}, heading level ${level}`,
+  };
+}
+
+/**
+ * Build accessibility props for an image
+ */
+export function imageA11y(
+  description: string,
+  options?: {
+    isDecorative?: boolean;
+    testID?: string;
+  }
+): AccessibilityProps {
+  if (options?.isDecorative) {
+    return {
+      accessible: false,
+      accessibilityElementsHidden: true,
+    } as AccessibilityProps;
+  }
+
+  return {
+    accessible: true,
+    accessibilityRole: "image",
+    accessibilityLabel: description,
+    testID: options?.testID,
+  };
+}
+
+/**
+ * Build accessibility props for a list item
+ */
+export function listItemA11y(
+  label: string,
+  position: number,
+  total: number,
+  options?: {
+    hint?: string;
+    selected?: boolean;
+    testID?: string;
+  }
+): AccessibilityProps {
+  return {
+    accessible: true,
+    accessibilityLabel: `${label}, ${position} of ${total}`,
+    accessibilityHint: options?.hint,
+    accessibilityState: {
+      selected: options?.selected,
+    },
+    testID: options?.testID,
+  };
+}
+
+/**
+ * Build accessibility props for a progress indicator
+ */
+export function progressA11y(
+  label: string,
+  value: number,
+  options?: {
+    min?: number;
+    max?: number;
+    testID?: string;
+  }
+): AccessibilityProps {
+  const min = options?.min ?? 0;
+  const max = options?.max ?? 100;
+  const percentage = Math.round(((value - min) / (max - min)) * 100);
+
+  return {
+    accessible: true,
+    accessibilityRole: "progressbar",
+    accessibilityLabel: `${label}, ${percentage}% complete`,
+    accessibilityValue: {
+      min,
+      max,
+      now: value,
+      text: `${percentage}%`,
+    },
+    testID: options?.testID,
+  };
+}
+
+/**
+ * Build accessibility props for a tab
+ */
+export function tabA11y(
+  label: string,
+  selected: boolean,
+  position: number,
+  total: number,
+  options?: {
+    hint?: string;
+    testID?: string;
+  }
+): AccessibilityProps {
+  return {
+    accessible: true,
+    accessibilityRole: "tab",
+    accessibilityLabel: `${label}, tab ${position} of ${total}`,
+    accessibilityHint: options?.hint,
+    accessibilityState: {
+      selected,
+    },
+    testID: options?.testID,
+  };
+}
+
+/**
+ * Build accessibility props for an alert/notification
+ */
+export function alertA11y(
+  message: string,
+  options?: {
+    type?: "info" | "success" | "warning" | "error";
+    testID?: string;
+  }
+): AccessibilityProps {
+  const typeLabel = options?.type ? `${options.type}: ` : "";
+
+  return {
+    accessible: true,
+    accessibilityRole: "alert",
+    accessibilityLabel: `${typeLabel}${message}`,
+    accessibilityLiveRegion: "polite",
+    testID: options?.testID,
+  } as AccessibilityProps;
+}
+
+// ============================================================================
+// Hooks
+// ============================================================================
+
+/**
+ * Hook to check if screen reader is enabled
+ */
+export function useScreenReader(): boolean {
+  const [isEnabled, setIsEnabled] = useState(false);
+
+  useEffect(() => {
+    AccessibilityInfo.isScreenReaderEnabled().then(setIsEnabled);
+
+    const subscription = AccessibilityInfo.addEventListener(
+      "screenReaderChanged",
+      setIsEnabled
+    );
+
+    return () => subscription.remove();
+  }, []);
+
+  return isEnabled;
+}
+
+/**
+ * Hook to check if reduce motion is enabled
+ */
+export function useReduceMotion(): boolean {
+  const [isEnabled, setIsEnabled] = useState(false);
+
+  useEffect(() => {
+    AccessibilityInfo.isReduceMotionEnabled().then(setIsEnabled);
+
+    const subscription = AccessibilityInfo.addEventListener(
+      "reduceMotionChanged",
+      setIsEnabled
+    );
+
+    return () => subscription.remove();
+  }, []);
+
+  return isEnabled;
+}
+
+/**
+ * Hook to check if bold text is enabled
+ */
+export function useBoldText(): boolean {
+  const [isEnabled, setIsEnabled] = useState(false);
+
+  useEffect(() => {
+    AccessibilityInfo.isBoldTextEnabled().then(setIsEnabled);
+
+    const subscription = AccessibilityInfo.addEventListener(
+      "boldTextChanged",
+      setIsEnabled
+    );
+
+    return () => subscription.remove();
+  }, []);
+
+  return isEnabled;
+}
+
+/**
+ * Hook to get all accessibility preferences
+ */
+export function useAccessibilityPreferences() {
+  const isScreenReaderEnabled = useScreenReader();
+  const isReduceMotionEnabled = useReduceMotion();
+  const isBoldTextEnabled = useBoldText();
+
+  return {
+    isScreenReaderEnabled,
+    isReduceMotionEnabled,
+    isBoldTextEnabled,
+  };
+}
+
+// ============================================================================
+// Utilities
+// ============================================================================
+
+/**
+ * Announce a message to screen readers
+ */
+export function announce(message: string): void {
+  AccessibilityInfo.announceForAccessibility(message);
+}
+
+/**
+ * Set focus to a specific element (requires a ref)
+ */
+export function setAccessibilityFocus(ref: React.RefObject<unknown>): void {
+  if (ref.current) {
+    AccessibilityInfo.setAccessibilityFocus(ref.current);
+  }
+}
+
+/**
+ * Format a price for accessibility
+ */
+export function formatPriceA11y(
+  amount: number,
+  currency = "EUR",
+  locale = "fr-FR"
+): string {
+  const formatted = new Intl.NumberFormat(locale, {
+    style: "currency",
+    currency,
+  }).format(amount);
+
+  // Convert to speakable format
+  return formatted
+    .replace("€", "euros")
+    .replace("$", "dollars")
+    .replace("£", "pounds");
+}
+
+/**
+ * Format a date for accessibility
+ */
+export function formatDateA11y(date: Date | string, locale = "fr-FR"): string {
+  const d = typeof date === "string" ? new Date(date) : date;
+
+  return d.toLocaleDateString(locale, {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+}
+
+/**
+ * Format a duration for accessibility
+ */
+export function formatDurationA11y(seconds: number): string {
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  const secs = seconds % 60;
+
+  const parts = [];
+  if (hours > 0) parts.push(`${hours} hour${hours !== 1 ? "s" : ""}`);
+  if (minutes > 0) parts.push(`${minutes} minute${minutes !== 1 ? "s" : ""}`);
+  if (secs > 0 || parts.length === 0) {
+    parts.push(`${secs} second${secs !== 1 ? "s" : ""}`);
+  }
+
+  return parts.join(", ");
+}

package/utils/cn.ts

@@ -0,0 +1,14 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * Utility function to merge Tailwind CSS classes
+ * Combines clsx and tailwind-merge for conditional class handling
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+// Re-export toast and validation utilities
+export { toast, handleApiError } from "./toast";
+export * from "./validation";

package/utils/index.ts

@@ -0,0 +1,43 @@
+export { cn } from "./cn";
+export { toast, handleApiError } from "./toast";
+export {
+  emailSchema,
+  passwordSchema,
+  nameSchema,
+  loginSchema,
+  registerSchema,
+  forgotPasswordSchema,
+  changePasswordSchema,
+  profileSchema,
+} from "./validation";
+export type {
+  LoginFormData,
+  RegisterFormData,
+  ForgotPasswordFormData,
+  ChangePasswordFormData,
+  ProfileFormData,
+} from "./validation";
+
+// Accessibility utilities
+export {
+  buttonA11y,
+  linkA11y,
+  inputA11y,
+  toggleA11y,
+  headerA11y,
+  imageA11y,
+  listItemA11y,
+  progressA11y,
+  tabA11y,
+  alertA11y,
+  useScreenReader,
+  useReduceMotion,
+  useBoldText,
+  useAccessibilityPreferences,
+  announce,
+  setAccessibilityFocus,
+  formatPriceA11y,
+  formatDateA11y,
+  formatDurationA11y,
+} from "./accessibility";
+export type { AccessibilityProps } from "./accessibility";

package/utils/toast.ts

@@ -0,0 +1,113 @@
+import * as Burnt from "burnt";
+
+type ToastPreset = "done" | "error" | "none";
+
+interface ToastOptions {
+  title: string;
+  message?: string;
+  preset?: ToastPreset;
+  duration?: number;
+  haptic?: "success" | "warning" | "error" | "none";
+}
+
+/**
+ * Centralized toast notification system using Burnt
+ * Works on iOS (native) and Android (custom implementation)
+ */
+export const toast = {
+  /**
+   * Show a success toast
+   */
+  success: (title: string, message?: string) => {
+    Burnt.toast({
+      title,
+      message,
+      preset: "done",
+      haptic: "success",
+      duration: 3,
+    });
+  },
+
+  /**
+   * Show an error toast
+   */
+  error: (title: string, message?: string) => {
+    Burnt.toast({
+      title,
+      message,
+      preset: "error",
+      haptic: "error",
+      duration: 4,
+    });
+  },
+
+  /**
+   * Show an info toast
+   */
+  info: (title: string, message?: string) => {
+    Burnt.toast({
+      title,
+      message,
+      preset: "none",
+      haptic: "none",
+      duration: 3,
+    });
+  },
+
+  /**
+   * Show a custom toast with full options
+   */
+  custom: (options: ToastOptions) => {
+    Burnt.toast({
+      title: options.title,
+      message: options.message,
+      preset: options.preset ?? "none",
+      haptic: options.haptic ?? "none",
+      duration: options.duration ?? 3,
+    });
+  },
+
+  /**
+   * Show a native alert dialog
+   */
+  alert: (title: string, message?: string, preset?: "done" | "error" | "heart") => {
+    Burnt.alert({
+      title,
+      message,
+      preset: preset ?? "done",
+    });
+  },
+
+  /**
+   * Dismiss all visible toasts
+   */
+  dismiss: () => {
+    Burnt.dismissAllAlerts();
+  },
+};
+
+/**
+ * Handle API errors and show appropriate toast
+ */
+export const handleApiError = (error: unknown, fallbackMessage = "Something went wrong") => {
+  if (error instanceof Error) {
+    // Check for network errors
+    if (error.message.includes("Network") || error.message.includes("fetch")) {
+      toast.error("Connection Error", "Please check your internet connection");
+      return;
+    }
+
+    // Check for timeout
+    if (error.message.includes("timeout")) {
+      toast.error("Request Timeout", "The server took too long to respond");
+      return;
+    }
+
+    // API error with message
+    toast.error("Error", error.message);
+    return;
+  }
+
+  // Fallback for unknown errors
+  toast.error("Error", fallbackMessage);
+};

package/utils/validation.ts

@@ -0,0 +1,67 @@
+import { z } from "zod";
+
+// Common field schemas
+export const emailSchema = z
+  .string()
+  .min(1, "Email is required")
+  .email("Invalid email address");
+
+export const passwordSchema = z
+  .string()
+  .min(1, "Password is required")
+  .min(8, "Password must be at least 8 characters")
+  .regex(/[A-Z]/, "Password must contain at least one uppercase letter")
+  .regex(/[a-z]/, "Password must contain at least one lowercase letter")
+  .regex(/[0-9]/, "Password must contain at least one number");
+
+export const nameSchema = z
+  .string()
+  .min(1, "Name is required")
+  .min(2, "Name must be at least 2 characters")
+  .max(50, "Name must be less than 50 characters");
+
+// Form schemas
+export const loginSchema = z.object({
+  email: emailSchema,
+  password: z.string().min(1, "Password is required"),
+});
+
+export const registerSchema = z
+  .object({
+    name: nameSchema,
+    email: emailSchema,
+    password: passwordSchema,
+    confirmPassword: z.string().min(1, "Please confirm your password"),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: "Passwords don't match",
+    path: ["confirmPassword"],
+  });
+
+export const forgotPasswordSchema = z.object({
+  email: emailSchema,
+});
+
+export const changePasswordSchema = z
+  .object({
+    currentPassword: z.string().min(1, "Current password is required"),
+    newPassword: passwordSchema,
+    confirmNewPassword: z.string().min(1, "Please confirm your new password"),
+  })
+  .refine((data) => data.newPassword === data.confirmNewPassword, {
+    message: "Passwords don't match",
+    path: ["confirmNewPassword"],
+  });
+
+export const profileSchema = z.object({
+  name: nameSchema,
+  email: emailSchema,
+  bio: z.string().max(200, "Bio must be less than 200 characters").optional(),
+});
+
+// Type inference helpers
+export type LoginFormData = z.infer<typeof loginSchema>;
+export type RegisterFormData = z.infer<typeof registerSchema>;
+export type ForgotPasswordFormData = z.infer<typeof forgotPasswordSchema>;
+export type ChangePasswordFormData = z.infer<typeof changePasswordSchema>;
+export type ProfileFormData = z.infer<typeof profileSchema>;