create-du-app 0.1.3 → 0.1.4

package/templates/mobile/expo/src/core/hook/useNetworkStatus.ts

@@ -0,0 +1,68 @@
+import { useEffect, useState } from 'react';
+import NetInfo, { NetInfoState } from '@react-native-community/netinfo';
+
+export interface NetworkStatus {
+    /** The device has an active network interface (wifi / cellular). */
+    isConnected: boolean;
+    /**
+     * The interface can actually reach the internet — distinguishes a captive
+     * portal or a "connected but no data" wifi from a real connection. `null`
+     * while NetInfo is still probing (treated as reachable to avoid a false
+     * offline flash on launch).
+     */
+    isInternetReachable: boolean | null;
+    /**
+     * The single flag screens should branch on: truly offline only when there
+     * is no interface, or the interface is confirmed unable to reach the
+     * internet. A `null` (probing) reachability does NOT count as offline.
+     */
+    isOffline: boolean;
+}
+
+/**
+ * Maps a raw NetInfo state to our {@link NetworkStatus}. Exported for unit
+ * testing the offline-detection rule (connected + reachable handling).
+ */
+export const deriveNetworkStatus = (state: NetInfoState): NetworkStatus => {
+    const isConnected = state.isConnected ?? true;
+    const isInternetReachable = state.isInternetReachable;
+    const isOffline = !isConnected || isInternetReachable === false;
+    return { isConnected, isInternetReachable, isOffline };
+};
+
+/**
+ * Latest known offline state, kept in sync by a module-scope NetInfo listener.
+ * Lets non-React code (the player store / queue transport, which runs outside
+ * the component tree) read offline status synchronously via {@link isDeviceOffline}
+ * — the React hook below can't reach those call sites. Starts `false` so we never
+ * report a false "offline" before NetInfo's first probe lands.
+ */
+let deviceOffline = false;
+NetInfo.addEventListener(state => {
+    deviceOffline = deriveNetworkStatus(state).isOffline;
+});
+
+/**
+ * Synchronous offline check for non-React callers (e.g. the player queue, which
+ * must decide whether stepping to the next track is playable without internet).
+ * Components should use {@link useNetworkStatus} instead so they re-render on change.
+ */
+export const isDeviceOffline = (): boolean => deviceOffline;
+
+export const useNetworkStatus = (): NetworkStatus => {
+    const [status, setStatus] = useState<NetworkStatus>({
+        isConnected: true,
+        isInternetReachable: null,
+        isOffline: false,
+    });
+
+    useEffect(() => {
+        const unsubscribe = NetInfo.addEventListener(state => {
+            setStatus(deriveNetworkStatus(state));
+        });
+
+        return unsubscribe;
+    }, []);
+
+    return status;
+};

package/templates/mobile/expo/src/core/hook/useTimeout.tsx

@@ -0,0 +1,30 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+export default function useTimeout(callback: () => void, delay: number) {
+  const callbackRef = useRef(callback);
+  const timeoutRef = useRef<any>(null);
+
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  const set = useCallback(() => {
+    timeoutRef.current = setTimeout(() => callbackRef.current(), delay);
+  }, [delay]);
+
+  const clear = useCallback(() => {
+    timeoutRef.current && clearTimeout(timeoutRef.current);
+  }, []);
+
+  useEffect(() => {
+    set();
+    return clear;
+  }, [delay, set, clear]);
+
+  const reset = useCallback(() => {
+    clear();
+    set();
+  }, [clear, set]);
+
+  return { reset, clear };
+}

package/templates/mobile/expo/src/core/index.ts

@@ -0,0 +1,7 @@
+export * from './api';
+export * from './components';
+export * from './constants';
+export * from './context';
+export * from './services';
+export * from './utils';
+export * from './theme';

package/templates/mobile/expo/src/core/services/api.service.ts

@@ -0,0 +1,230 @@
+import { useAuthStore, useLoadingStore } from '@src/app/stores';
+import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
+import qs from 'qs';
+import { Alert } from 'react-native';
+import Config from 'react-native-config';
+import { Screen } from '@src/app/navigation/app-route-type';
+import { NavigationUtil, navigationRef } from '@src/core/utils/navigation.util';
+import { Translator } from '@src/core/utils/translator.util';
+import { getDeviceId } from './device-id.service';
+import { triggerSessionEnd } from './session-end.bridge';
+
+// Backend supports French and English; map anything else to English so OTP
+// emails and other localized responses match the user's selected language
+// (LIFEMASTER-369). i18n.language is the source of truth — the profile language
+// switch drives it directly.
+const acceptLanguage = (): string => (Translator.currentLanguage().startsWith('fr') ? 'fr' : 'en');
+
+// API Configuration
+export const API_VERSION = 'v1';
+export const BaseURL = `${Config.BASE_URL}${API_VERSION}/`;
+// Create axios instance with default configuration
+const axiosInstance = axios.create({
+    timeout: 10000,
+    baseURL: BaseURL,
+});
+
+axiosInstance.interceptors.request.use(async (config) => {
+    try {
+        const deviceId = await getDeviceId();
+        config.headers.set('X-Device-Id', deviceId);
+    } catch {
+        // Device ID resolution failed — proceed without header
+    }
+    return config;
+});
+
+let sessionExpiredAlertShown = false;
+
+const handleSessionExpired = async () => {
+    if (sessionExpiredAlertShown) return;
+    // Full session teardown on a 401 (token, premium lease, player audio, React
+    // Query cache, library, favorites…). Routed through the bridge — the actual
+    // `endSession` lives in the app layer and pulls feature stores, so importing
+    // it here would create a core → app import cycle.
+    triggerSessionEnd();
+    // Cold launch: the navigation container isn't mounted yet (App renders null
+    // until the bootstrap route resolves), so a 401 from the bootstrap resume
+    // fetch must NOT pop a "session expired" alert over Onboarding — bootstrap
+    // already routes there. Clear silently and let it own the routing.
+    if (!navigationRef.current) return;
+    sessionExpiredAlertShown = true;
+    NavigationUtil.reset(Screen.SignIn);
+    Alert.alert(
+        Translator.translate('auth.sessionExpired.title'),
+        Translator.translate('auth.sessionExpired.message'),
+        [{
+            text: Translator.translate('auth.sessionExpired.cta'),
+            onPress: () => { sessionExpiredAlertShown = false; },
+        }],
+        { cancelable: false, onDismiss: () => { sessionExpiredAlertShown = false; } },
+    );
+};
+
+axiosInstance.interceptors.response.use(
+    (response: AxiosResponse) => response,
+    (error) => {
+        if (error?.response?.status === 401 && useAuthStore.getState().token) {
+            handleSessionExpired();
+        }
+        return Promise.reject(error);
+    }
+);
+
+// Types
+interface ApiError {
+    message: string;
+    code?: string;
+    success: boolean;
+    status?: number;
+}
+
+interface ApiResponse<T = any> {
+    data?: T;
+    success: boolean;
+    errors?: Array<{ message: string; code?: string }>;
+}
+
+// Error handling utility
+const handleApiError = (error: any): ApiError => {
+    const status = error?.response?.status;
+    if (error.response?.data) {
+        const { data } = error.response;
+        const { errors, success } = data;
+
+        if (!success && errors?.length > 0) {
+            const { message, code } = errors[0];
+            return {
+                message: message?.message || message || 'An error occurred',
+                code,
+                success: false,
+                status,
+            };
+        }
+
+        return { ...data, status };
+    }
+
+    return {
+        message: error.message || 'Network error occurred',
+        success: false,
+        status,
+    };
+};
+
+// Response preprocessing utility
+const preprocessResponse = <T>(result: ApiResponse<T>): T | ApiError => {
+    const { success, errors } = result || {};
+
+    if (success) {
+        return (result) as T;
+    }
+
+    if (errors && errors.length > 0) {
+        return { ...errors[0], success: false };
+    }
+
+    return result as T;
+};
+
+export class ApiService {
+    // Get authorization headers
+    private static getAuthHeaders(): Record<string, string> {
+        const token = useAuthStore.getState().token;
+        return {
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+            'Accept-Language': acceptLanguage(),
+            ...(token && { Authorization: `Bearer ${token}` }),
+        };
+    }
+
+    // Form-data headers. Content-Type is intentionally OMITTED: axios must set it
+    // itself so it appends the `; boundary=...` the server needs to split the
+    // parts. Hardcoding `multipart/form-data` (no boundary) made the backend fail
+    // to parse the file — the avatar upload then errored on some photos but not
+    // others depending on the payload (LIFEMASTER-260).
+    private static getFormDataHeaders(): Record<string, string> {
+        const token = useAuthStore.getState().token;
+        return {
+            Accept: 'application/json',
+            'Accept-Language': acceptLanguage(),
+            ...(token && { Authorization: `Bearer ${token}` }),
+        };
+    }
+
+    // Generic request method. Drives the global loading overlay via the
+    // ref-counted loading store; pass `silent: true` on the config to opt out
+    // (e.g. background refetch / polling) so it doesn't block the UI.
+    private static async makeRequest<T>(
+        config: AxiosRequestConfig & { silent?: boolean },
+    ): Promise<T> {
+        const { silent, ...axiosConfig } = config;
+        if (!silent) useLoadingStore.getState().showLoading();
+        try {
+            const response = await axiosInstance(axiosConfig);
+            return preprocessResponse(response.data) as T;
+        } catch (error) {
+            throw handleApiError(error);
+        } finally {
+            if (!silent) useLoadingStore.getState().hideLoading();
+        }
+    }
+
+    // GET request — pass silent=true to skip the global loading overlay.
+    static async get<T = any>(url: string, params?: any, silent = false): Promise<IResponse<T>> {
+        return this.makeRequest<IResponse<T>>({
+            method: 'GET',
+            url,
+            headers: this.getAuthHeaders(),
+            params,
+            paramsSerializer: (p) => qs.stringify(p, { arrayFormat: 'repeat' }),
+            silent,
+        });
+    }
+
+    // POST request
+    static async post<T = any>(url: string, data?: any, isFormData = false, silent = false): Promise<IResponse<T>> {
+        return this.makeRequest<IResponse<T>>({
+            method: 'POST',
+            url,
+            headers: isFormData ? this.getFormDataHeaders() : this.getAuthHeaders(),
+            data,
+            silent,
+        });
+    }
+
+    // PUT request
+    static async put<T = any>(url: string, data?: any, silent = false): Promise<IResponse<T>> {
+        return this.makeRequest<IResponse<T>>({
+            method: 'PUT',
+            url,
+            headers: this.getAuthHeaders(),
+            data,
+            silent,
+        });
+    }
+
+    // DELETE request
+    static async delete<T = any>(url: string, data?: any, silent = false): Promise<IResponse<T>> {
+        return this.makeRequest<IResponse<T>>({
+            method: 'DELETE',
+            url,
+            headers: this.getAuthHeaders(),
+            data,
+            silent,
+        });
+    }
+
+    // PATCH request (added for completeness)
+    static async patch<T = any>(url: string, data?: any, silent = false): Promise<IResponse<T>> {
+        return this.makeRequest<IResponse<T>>({
+            method: 'PATCH',
+            url,
+            headers: this.getAuthHeaders(),
+            data,
+            silent,
+        });
+    }
+
+}

package/templates/mobile/expo/src/core/services/device-id.service.ts

@@ -0,0 +1,23 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import DeviceInfo from 'react-native-device-info';
+
+const DEVICE_ID_KEY = 'device_id';
+
+let cachedDeviceId: string | null = null;
+
+export const getDeviceId = async (): Promise<string> => {
+    if (cachedDeviceId) return cachedDeviceId;
+
+    const stored = await AsyncStorage.getItem(DEVICE_ID_KEY);
+    if (stored) {
+        cachedDeviceId = stored;
+        return stored;
+    }
+
+    const nativeId = await DeviceInfo.getUniqueId();
+    await AsyncStorage.setItem(DEVICE_ID_KEY, nativeId);
+    cachedDeviceId = nativeId;
+    return nativeId;
+};
+
+export const getCachedDeviceId = (): string | null => cachedDeviceId;

package/templates/mobile/expo/src/core/services/index.ts

@@ -0,0 +1,3 @@
+export * from './api.service'
+export * from './device-id.service'
+export * from './session-end.bridge'

package/templates/mobile/expo/src/core/services/session-end.bridge.ts

@@ -0,0 +1,26 @@
+/**
+ * Session-teardown bridge.
+ *
+ * The 401 response interceptor in `api.service` must trigger a FULL session
+ * reset (tokens, premium lease, player audio, React Query cache, library,
+ * favorites…). That teardown (`endSession`) lives in the app layer and pulls in
+ * feature stores, so importing it here would create a `core → app → core` import
+ * cycle — which this codebase deliberately avoids.
+ *
+ * Instead the app registers its teardown once at startup ({@link App}) and the
+ * interceptor fires it through this shim, keeping the import graph one-way
+ * (app → core). Until something registers, {@link triggerSessionEnd} is a no-op.
+ */
+type SessionEndHandler = () => void;
+
+let handler: SessionEndHandler | null = null;
+
+/** Wire the app-level `endSession` in. Called once at app startup. */
+export const registerSessionEndHandler = (fn: SessionEndHandler): void => {
+  handler = fn;
+};
+
+/** Run the registered teardown (no-op if the app hasn't registered one yet). */
+export const triggerSessionEnd = (): void => {
+  handler?.();
+};

package/templates/mobile/expo/src/core/theme/dark.theme.ts

@@ -0,0 +1,10 @@
+import { Colors } from '@src/core/utils';
+import { ThemeColors } from './theme.types';
+
+/**
+ * Dark palette. The existing static `Colors` object already encodes the dark
+ * look (light text on dark surfaces), so the dark theme reuses it verbatim —
+ * dark mode therefore renders identically to the pre-theme app, with zero
+ * visual regression.
+ */
+export const darkColors: ThemeColors = Colors;

package/templates/mobile/expo/src/core/theme/index.ts

@@ -0,0 +1,5 @@
+export * from './theme.types';
+export * from './dark.theme';
+export * from './light.theme';
+export * from './theme-context';
+export * from './use-themed-styles';

package/templates/mobile/expo/src/core/theme/light.theme.ts

@@ -0,0 +1,44 @@
+import { darkColors } from './dark.theme';
+import { ThemeColors } from './theme.types';
+
+/**
+ * Light palette. Built by spreading the dark theme and overriding only the
+ * neutral surface / text / border tokens with light values — brand tokens
+ * (primary purple, secondary blue, semantic colors) stay identical across
+ * themes so the brand reads the same in both modes.
+ *
+ * TODO(design): these light DS values are a pragmatic default derived from the
+ * existing legacy light tokens. Confirm the exact light palette against the
+ * Figma "Life-Master-Design" light variables when available.
+ */
+export const lightColors: ThemeColors = {
+    ...darkColors,
+
+    // --- foreground (text/icon) ---
+    fg_neutral_normal: '#0F0F0F', // primary text on light surface
+    fg_neutral_faded: '#525252', // muted / disabled text
+    fg_neutral_reverse: '#FBFAFF', // text on dark/reverse fill
+    fg_neutral_placeholder: '#A8A8A8',
+
+    // --- background (fill) ---
+    bg_elevation_reverse: '#141414', // dark fill (neutral solid) on light
+    bg_elevation_level_1_normal: '#FFFFFF', // base surface
+    bg_elevation_level_2_normal: '#F5F5F5', // raised / disabled surface
+    bg_input: 'rgba(0, 0, 0, 0.06)', // input field fill on light
+    bg_disable: '#E5E5E5',
+
+    // --- border ---
+    bd_neutral_normal: '#E5E5E5',
+    bd_neutral_faded: '#C6C6C6',
+
+    // --- danger surfaces (destructive actions) — softened for light surface ---
+    bg_danger_faded: '#FDE7EC', // light danger fill (logout button bg)
+    bd_danger_faded: '#F43F5E',
+    fg_danger_faded_ds: '#BE123C', // readable danger text on light fill
+
+    // --- translucent card overlays (rows over the light background) ---
+    bg_overlay_card: 'rgba(0, 0, 0, 0.04)',
+    bg_overlay_card_medium: 'rgba(0, 0, 0, 0.05)',
+    bg_overlay_card_strong: 'rgba(0, 0, 0, 0.06)',
+    bg_progress_track: 'rgba(0, 0, 0, 0.1)',
+};

package/templates/mobile/expo/src/core/theme/theme-context.tsx

@@ -0,0 +1,82 @@
+import React, {
+  createContext,
+  PropsWithChildren,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { useColorScheme } from 'react-native';
+import { AppStorageUtil, StorageKeys } from '@src/core/utils';
+import { darkColors } from './dark.theme';
+import { lightColors } from './light.theme';
+import {
+  ResolvedScheme,
+  ThemeContextValue,
+  ThemeScheme,
+} from './theme.types';
+
+// Only the dark theme is shipped for now — the light palette is a draft
+// pending design. Default to dark and (below) lock the resolved scheme to dark
+// so the OS/light never leaks through. To re-enable light later: set this back
+// to 'system' and remove the `LIGHT_THEME_ENABLED` lock in `resolved`.
+const DEFAULT_SCHEME: ThemeScheme = 'dark';
+const LIGHT_THEME_ENABLED = false;
+
+const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
+
+/**
+ * Provides theme tokens app-wide. Defaults to following the OS appearance and
+ * hydrates the persisted user override (AsyncStorage) after mount. Mount this
+ * once near the app root, above the navigation tree.
+ */
+export const ThemeProvider = ({ children }: PropsWithChildren) => {
+  const osScheme = useColorScheme();
+  const [scheme, setSchemeState] = useState<ThemeScheme>(DEFAULT_SCHEME);
+
+  // Hydrate the persisted preference once on mount (AsyncStorage is async, so
+  // the first frame uses the system default and corrects itself here).
+  useEffect(() => {
+    let active = true;
+    AppStorageUtil.getItem(StorageKeys.THEME).then(saved => {
+      if (active && (saved === 'light' || saved === 'dark' || saved === 'system')) {
+        setSchemeState(saved);
+      }
+    });
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  const setScheme = useCallback((next: ThemeScheme) => {
+    setSchemeState(next);
+    AppStorageUtil.setItem(StorageKeys.THEME, next);
+  }, []);
+
+  const requested: ResolvedScheme =
+    scheme === 'system' ? (osScheme === 'dark' ? 'dark' : 'light') : scheme;
+  // Light theme is not shipped yet — force dark until it is.
+  const resolved: ResolvedScheme = LIGHT_THEME_ENABLED ? requested : 'dark';
+
+  const value = useMemo<ThemeContextValue>(
+    () => ({
+      colors: resolved === 'dark' ? darkColors : lightColors,
+      scheme,
+      resolved,
+      setScheme,
+    }),
+    [resolved, scheme, setScheme],
+  );
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+};
+
+/** Access the active theme. Throws if used outside `ThemeProvider`. */
+export const useTheme = (): ThemeContextValue => {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return ctx;
+};

package/templates/mobile/expo/src/core/theme/theme.types.ts

@@ -0,0 +1,26 @@
+import { Colors } from '@src/core/utils';
+
+/**
+ * The theme color contract. Both the light and dark palettes must expose the
+ * exact same keys as the static `Colors` object, so design-system components
+ * can keep referencing token names (`colors.bg_primary_normal`) unchanged —
+ * only the *source* of the value switches with the active theme.
+ */
+export type ThemeColors = typeof Colors;
+
+/** What the user can pick: an explicit theme or "follow the OS". */
+export type ThemeScheme = 'light' | 'dark' | 'system';
+
+/** The concrete theme actually rendered after resolving `system`. */
+export type ResolvedScheme = 'light' | 'dark';
+
+export interface ThemeContextValue {
+  /** Active color tokens for the resolved scheme. */
+  colors: ThemeColors;
+  /** The user's preference (may be `system`). */
+  scheme: ThemeScheme;
+  /** The concrete scheme being rendered (`system` already resolved). */
+  resolved: ResolvedScheme;
+  /** Persist and apply a new preference. */
+  setScheme: (next: ThemeScheme) => void;
+}

package/templates/mobile/expo/src/core/theme/use-themed-styles.ts

@@ -0,0 +1,25 @@
+import { useMemo } from 'react';
+import { useTheme } from './theme-context';
+import { ThemeColors } from './theme.types';
+
+/**
+ * Build a themed StyleSheet that recomputes only when the active theme flips.
+ *
+ * Usage:
+ * ```ts
+ * const makeStyles = (c: ThemeColors) =>
+ *   StyleSheet.create({ box: { backgroundColor: c.bg_elevation_level_1_normal } });
+ *
+ * const Component = () => {
+ *   const styles = useThemedStyles(makeStyles);
+ *   return <View style={styles.box} />;
+ * };
+ * ```
+ *
+ * The factory must be a stable module-scope function (not an inline arrow) so
+ * the memo key stays the theme reference, not a new function each render.
+ */
+export const useThemedStyles = <T>(factory: (colors: ThemeColors) => T): T => {
+  const { colors } = useTheme();
+  return useMemo(() => factory(colors), [colors, factory]);
+};