@croacroa/react-native-template 2.1.0 → 3.2.0

package/utils/animations/presets.ts

@@ -0,0 +1,182 @@
+import { Easing } from "react-native-reanimated";
+import type {
+  WithTimingConfig,
+  WithSpringConfig,
+} from "react-native-reanimated";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+/**
+ * Available entry animation types
+ */
+export type EntryAnimation =
+  | "fadeIn"
+  | "slideUp"
+  | "slideDown"
+  | "slideLeft"
+  | "slideRight"
+  | "scale"
+  | "none";
+
+/**
+ * Initial values for an entry animation
+ */
+export interface EntryConfig {
+  opacity: number;
+  translateX: number;
+  translateY: number;
+  scale: number;
+}
+
+// ============================================================================
+// Timing Presets
+// ============================================================================
+
+/**
+ * Timing-based animation presets
+ *
+ * @example
+ * ```ts
+ * withTiming(targetValue, TIMING.fast);
+ * withTiming(targetValue, TIMING.bounce);
+ * ```
+ */
+export const TIMING = {
+  /** Quick interactions - 200ms */
+  fast: {
+    duration: 200,
+    easing: Easing.out(Easing.quad),
+  },
+  /** Standard transitions - 300ms */
+  normal: {
+    duration: 300,
+    easing: Easing.out(Easing.quad),
+  },
+  /** Deliberate, emphasis animations - 500ms */
+  slow: {
+    duration: 500,
+    easing: Easing.out(Easing.quad),
+  },
+  /** Playful overshoot effect - 400ms */
+  bounce: {
+    duration: 400,
+    easing: Easing.out(Easing.back(1.5)),
+  },
+} satisfies Record<string, WithTimingConfig>;
+
+// ============================================================================
+// Spring Presets
+// ============================================================================
+
+/**
+ * Spring-based animation presets
+ *
+ * @example
+ * ```ts
+ * withSpring(targetValue, SPRING.gentle);
+ * withSpring(targetValue, SPRING.bouncy);
+ * ```
+ */
+export const SPRING = {
+  /** Soft, slow spring - great for large movements */
+  gentle: {
+    damping: 20,
+    stiffness: 100,
+    mass: 1,
+  },
+  /** Playful spring with visible overshoot */
+  bouncy: {
+    damping: 8,
+    stiffness: 150,
+    mass: 0.8,
+  },
+  /** Rigid, fast spring - minimal overshoot */
+  stiff: {
+    damping: 20,
+    stiffness: 400,
+    mass: 0.5,
+  },
+  /** Quick response with slight bounce */
+  snappy: {
+    damping: 15,
+    stiffness: 300,
+    mass: 0.6,
+  },
+} satisfies Record<string, WithSpringConfig>;
+
+// ============================================================================
+// Entry Configs
+// ============================================================================
+
+/**
+ * Initial transform values for each entry animation type.
+ * The animation interpolates from these values (progress=0) to the
+ * identity transform (progress=1): opacity 1, translate 0, scale 1.
+ */
+export const ENTRY_CONFIGS: Record<EntryAnimation, EntryConfig> = {
+  fadeIn: {
+    opacity: 0,
+    translateX: 0,
+    translateY: 0,
+    scale: 1,
+  },
+  slideUp: {
+    opacity: 0,
+    translateX: 0,
+    translateY: 30,
+    scale: 1,
+  },
+  slideDown: {
+    opacity: 0,
+    translateX: 0,
+    translateY: -30,
+    scale: 1,
+  },
+  slideLeft: {
+    opacity: 0,
+    translateX: 30,
+    translateY: 0,
+    scale: 1,
+  },
+  slideRight: {
+    opacity: 0,
+    translateX: -30,
+    translateY: 0,
+    scale: 1,
+  },
+  scale: {
+    opacity: 0,
+    translateX: 0,
+    translateY: 0,
+    scale: 0.85,
+  },
+  none: {
+    opacity: 1,
+    translateX: 0,
+    translateY: 0,
+    scale: 1,
+  },
+};
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+/**
+ * Calculate stagger delay for a list item at the given index.
+ *
+ * @param index - The item index in the list
+ * @param baseDelay - Delay between each item in ms (default 50)
+ * @returns Total delay in ms for this item
+ *
+ * @example
+ * ```ts
+ * // Stagger 5 items, each 80ms apart
+ * items.map((item, i) => staggerDelay(i, 80)); // [0, 80, 160, 240, 320]
+ * ```
+ */
+export function staggerDelay(index: number, baseDelay: number = 50): number {
+  return index * baseDelay;
+}

package/utils/animations/transitions.ts

@@ -0,0 +1,62 @@
+import type { NativeStackNavigationOptions } from "@react-navigation/native-stack";
+
+// ============================================================================
+// Screen Transition Presets
+// ============================================================================
+
+/**
+ * Pre-configured screen transition options for Expo Router / React Navigation.
+ *
+ * Apply to individual `Stack.Screen` components or to `screenOptions` on a
+ * `Stack` navigator.
+ *
+ * @example
+ * ```tsx
+ * // Single screen
+ * <Stack.Screen name="details" options={screenTransitions.slide} />
+ *
+ * // All screens in a navigator
+ * <Stack screenOptions={screenTransitions.fade}>
+ *   ...
+ * </Stack>
+ * ```
+ */
+export const screenTransitions = {
+  /** Standard platform slide (iOS: slide from right, Android: slide from bottom) */
+  slide: {
+    animation: "slide_from_right",
+  } satisfies NativeStackNavigationOptions,
+
+  /** Cross-fade between screens */
+  fade: {
+    animation: "fade",
+  } satisfies NativeStackNavigationOptions,
+
+  /** Modal presentation (slides up from bottom with card styling) */
+  modal: {
+    animation: "slide_from_bottom",
+    presentation: "modal",
+  } satisfies NativeStackNavigationOptions,
+
+  /** Full-screen modal (no card inset) */
+  fullScreenModal: {
+    animation: "slide_from_bottom",
+    presentation: "fullScreenModal",
+  } satisfies NativeStackNavigationOptions,
+
+  /** Transparent modal (overlay on top of current screen) */
+  transparentModal: {
+    animation: "fade",
+    presentation: "transparentModal",
+  } satisfies NativeStackNavigationOptions,
+
+  /** No animation at all */
+  none: {
+    animation: "none",
+  } satisfies NativeStackNavigationOptions,
+} as const;
+
+/**
+ * Type of available screen transition keys
+ */
+export type ScreenTransitionName = keyof typeof screenTransitions;

package/utils/index.ts

@@ -1,52 +1,63 @@
-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";
-
-// Accessibility enforcement HOC and utilities
-export {
-  withAccessibility,
-  useAccessibilityValidation,
-  createA11yProps,
-  A11yContext,
-  auditAccessibility,
-} from "./withAccessibility";
+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";
+
+// Accessibility enforcement HOC and utilities
+export {
+  withAccessibility,
+  useAccessibilityValidation,
+  createA11yProps,
+  A11yContext,
+  auditAccessibility,
+} from "./withAccessibility";
+
+// Animation presets and transitions
+export {
+  TIMING,
+  SPRING,
+  ENTRY_CONFIGS,
+  staggerDelay,
+} from "./animations/presets";
+export type { EntryAnimation, EntryConfig } from "./animations/presets";
+export { screenTransitions } from "./animations/transitions";
+export type { ScreenTransitionName } from "./animations/transitions";

package/utils/toast.ts

@@ -70,7 +70,11 @@ export const toast = {
   /**
    * Show a native alert dialog
    */
-  alert: (title: string, message?: string, preset?: "done" | "error" | "heart") => {
+  alert: (
+    title: string,
+    message?: string,
+    preset?: "done" | "error" | "heart"
+  ) => {
     Burnt.alert({
       title,
       message,
@@ -89,7 +93,10 @@ export const toast = {
 /**
  * Handle API errors and show appropriate toast
  */
-export const handleApiError = (error: unknown, fallbackMessage = "Something went wrong") => {
+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")) {

package/utils/validation.ts

@@ -13,7 +13,10 @@ export const passwordSchema = z
   .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")
-  .regex(/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/, "Password must contain at least one special character");
+  .regex(
+    /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/,
+    "Password must contain at least one special character"
+  );
 
 export const nameSchema = z
   .string()