create-du-app 0.1.3 → 0.1.4

package/templates/mobile/expo/src/core/utils/image-format.util.ts

@@ -0,0 +1,117 @@
+export type SupportedImageMimeType = 'image/jpeg' | 'image/png';
+
+export type ImageAsset = {
+    uri: string;
+    type?: string | null;
+    name?: string | null;
+    fileName?: string | null;
+};
+
+const SUPPORTED_MIME_TYPES = new Set<SupportedImageMimeType>([
+    'image/jpeg',
+    'image/png',
+]);
+
+const MIME_TYPE_BY_EXTENSION: Record<string, SupportedImageMimeType> = {
+    jpg: 'image/jpeg',
+    jpeg: 'image/jpeg',
+    png: 'image/png',
+};
+
+const sanitizeValue = (value?: string | null): string =>
+    value?.split('?')[0]?.split('#')[0]?.trim() ?? '';
+
+const getExtension = (value?: string | null): string | undefined => {
+    const sanitized = sanitizeValue(value);
+
+    if (!sanitized) {
+        return undefined;
+    }
+
+    const lastDotIndex = sanitized.lastIndexOf('.');
+
+    if (lastDotIndex === -1 || lastDotIndex === sanitized.length - 1) {
+        return undefined;
+    }
+
+    return sanitized.slice(lastDotIndex + 1).toLowerCase();
+};
+
+export const getSupportedImageMimeType = (
+    asset: ImageAsset,
+): SupportedImageMimeType | undefined => {
+    const normalizedType = sanitizeValue(asset.type).toLowerCase();
+
+    if (
+        normalizedType &&
+        SUPPORTED_MIME_TYPES.has(normalizedType as SupportedImageMimeType)
+    ) {
+        return normalizedType as SupportedImageMimeType;
+    }
+
+    const extension =
+        getExtension(asset.name) ??
+        getExtension(asset.fileName) ??
+        getExtension(asset.uri);
+
+    if (!extension) {
+        return undefined;
+    }
+
+    return MIME_TYPE_BY_EXTENSION[extension];
+};
+
+export const isSupportedImageAsset = (asset: ImageAsset): boolean =>
+    Boolean(asset.uri && getSupportedImageMimeType(asset));
+
+const buildNormalizedFileName = (
+    asset: ImageAsset,
+    index: number,
+    mimeType: SupportedImageMimeType,
+): string => {
+    const extension = mimeType === 'image/png' ? 'png' : 'jpg';
+    const rawName = sanitizeValue(asset.name) || sanitizeValue(asset.fileName);
+
+    if (rawName) {
+        const baseName = rawName.replace(/\.[^/.]+$/, '');
+        return `${baseName}.${extension}`;
+    }
+
+    return `photo_${Date.now()}_${index}.${extension}`;
+};
+
+export const normalizeImageAsset = (
+    asset: ImageAsset,
+    index = 0,
+): { uri: string; type: SupportedImageMimeType; name: string } | null => {
+    const type = getSupportedImageMimeType(asset);
+
+    if (!asset.uri || !type) {
+        return null;
+    }
+
+    return {
+        uri: asset.uri,
+        type,
+        name: buildNormalizedFileName(asset, index, type),
+    };
+};
+
+export const filterSupportedImageAssets = (assets: ImageAsset[]) => {
+    const supported: ImageAsset[] = [];
+    const unsupported: ImageAsset[] = [];
+
+    assets.forEach(asset => {
+        if (isSupportedImageAsset(asset)) {
+            supported.push(asset);
+            return;
+        }
+
+        unsupported.push(asset);
+    });
+
+    return {
+        supported,
+        unsupported,
+    };
+};

package/templates/mobile/expo/src/core/utils/image-picker.util.ts

@@ -0,0 +1,84 @@
+import { PermissionsAndroid, Platform } from 'react-native'
+import {
+    CameraOptions,
+    ImageLibraryOptions,
+    launchCamera,
+    launchImageLibrary,
+} from 'react-native-image-picker'
+
+export class ImagePicker {
+    private static optionsDefault: CameraOptions | ImageLibraryOptions = {
+        mediaType: 'photo',
+        quality: 0.8,
+        maxHeight: 800,
+        maxWidth: 800,
+    }
+
+    public static async requestCameraPermission() {
+        if (Platform.OS === 'android') {
+            const granted = await PermissionsAndroid.request(
+                PermissionsAndroid.PERMISSIONS.CAMERA,
+                {
+                    title: 'Camera Permission',
+                    message: 'App needs access to your camera',
+                    buttonNeutral: 'Ask Me Later',
+                    buttonNegative: 'Cancel',
+                    buttonPositive: 'OK',
+                },
+            )
+            return granted === PermissionsAndroid.RESULTS.GRANTED
+        }
+        return true
+    }
+
+    public static async lauchCamera(
+        options?: CameraOptions,
+    ): Promise<IMediaFormData | undefined> {
+        const granted = await this.requestCameraPermission()
+        if (!granted) {
+            return undefined
+        }
+
+        const result = await launchCamera({
+            ...this.optionsDefault,
+            ...options,
+        })
+        if (result?.assets?.[0]) {
+            const media = {
+                name:
+                    result?.assets?.[0]?.fileName ||
+                    `img-${new Date().getTime()}`,
+                type: result?.assets?.[0]?.type || '',
+                uri: result?.assets?.[0]?.uri || '',
+            }
+            return media
+        } else {
+            return undefined
+        }
+    }
+
+    public static async launchImagesLibrary(
+        options?: ImageLibraryOptions,
+    ): Promise<IMediaFormData[]> {
+        return new Promise((resolve, reject) => {
+            launchImageLibrary({
+                ...this.optionsDefault,
+                ...options,
+            })
+                .then(({ assets, didCancel, errorCode }) => {
+                    if (didCancel || errorCode) {
+                        return reject(didCancel || errorCode)
+                    }
+                    const media = (assets || []).map(
+                        ({ fileName, uri, type }) => ({
+                            name: fileName || `img-${new Date().getTime()}`,
+                            type: type || '',
+                            uri: uri || '',
+                        }),
+                    )
+                    assets && resolve(media)
+                })
+                .catch(reject)
+        })
+    }
+}

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

@@ -0,0 +1,18 @@
+export * from './color.util';
+export * from './greeting.util';
+export * from './navigation.util';
+export * from './schema.util';
+export * from './size.util';
+export * from './storage.util';
+export * from './translator.util';
+export * from './validate.util';
+export * from './font.util';
+export * from './typography.util';
+export * from './image-picker.util';
+export * from './func.util';
+export * from './enum.util';
+export * from './toast.util';
+export * from './query-client.util';
+export * from './query-persister.util';
+export * from './date.util';
+export * from './linking.util';

package/templates/mobile/expo/src/core/utils/linking.util.ts

@@ -0,0 +1,16 @@
+import { Linking } from 'react-native';
+import { Translator } from './translator.util';
+import { showErrorToast } from './toast.util';
+
+export const openExternalUrl = async (url: string) => {
+    try {
+        const supported = await Linking.canOpenURL(url);
+        if (!supported) {
+            showErrorToast('', Translator.translate('common.cannotOpenUrl'));
+            return;
+        }
+        await Linking.openURL(url);
+    } catch {
+        showErrorToast('', Translator.translate('common.cannotOpenUrl'));
+    }
+};

package/templates/mobile/expo/src/core/utils/navigation.util.tsx

@@ -0,0 +1,100 @@
+import { CommonActions, NavigationContainerRef, Route, StackActions } from '@react-navigation/native';
+import { NavigatorParamList, Screen } from '@src/app/navigation/app-route-type';
+import { createRef } from 'react';
+
+export const navigationRef = createRef<NavigationContainerRef<NavigatorParamList>>();
+
+type Args<RouteName extends keyof NavigatorParamList> = RouteName extends unknown
+    ? undefined extends NavigatorParamList[RouteName]
+    ? [screen: RouteName] | [screen: RouteName, params: NavigatorParamList[RouteName]]
+    : [screen: RouteName, params: NavigatorParamList[RouteName]]
+    : never;
+
+export class NavigationUtil {
+    static reset(name?: Screen) {
+        if (navigationRef.current) {
+            navigationRef.current.reset({
+                index: 0,
+                routes: [{ name: name || Screen.SignIn }],
+            });
+        }
+    }
+
+    static navigate<RouteName extends keyof NavigatorParamList>(...args: Args<RouteName>) {
+        if (navigationRef.current) {
+            navigationRef.current.navigate(...args);
+        }
+    }
+
+    static push<RouteName extends keyof NavigatorParamList>(...args: Args<RouteName>) {
+        if (navigationRef.current) {
+            const [name, params] = args;
+            navigationRef.current.dispatch(StackActions.push(name, params));
+        }
+    }
+
+    static replace<RouteName extends keyof NavigatorParamList>(...args: Args<RouteName>) {
+        if (navigationRef.current) {
+            navigationRef.current.dispatch(StackActions.replace(args[0], args[1]));
+        }
+    }
+
+    static pop(count?: number) {
+        if (navigationRef.current) {
+            navigationRef.current.dispatch(StackActions.pop(count));
+        }
+    }
+
+    static popToTop() {
+        if (navigationRef.current) {
+            navigationRef.current.dispatch(StackActions.popToTop());
+        }
+    }
+
+    static goBack() {
+        if (navigationRef.current) {
+            navigationRef.current.goBack();
+        }
+    }
+
+    /**
+     * Reset to HomeTab with the specified tab active (preserving its internal
+     * history), then push the given screen on top of the root stack so the
+     * user can navigate back to the correct tab.
+     *
+     * @param tabIndex - which tab to activate inside HomeTab (default: 0)
+     */
+    static resetToHomeTabThenNavigate<RouteName extends keyof NavigatorParamList>(
+        tabIndex: number = 0,
+        ...args: Args<RouteName>
+    ) {
+        if (!navigationRef.current) return;
+        const [screen, params] = args;
+        const rootState = navigationRef.current.getRootState();
+        const homeTabRoute = rootState.routes[0]; // HomeTab is always the first route
+        const existingRoutes = [...(homeTabRoute.state?.routes ?? [])] as any[];
+
+        if (existingRoutes.length === 0) {
+            // HomeTab hasn't mounted yet — navigate normally
+            navigationRef.current.navigate(screen as any, params);
+            return;
+        }
+
+        navigationRef.current.dispatch(
+            CommonActions.reset({
+                ...rootState,
+                index: 1,
+                routes: [
+                    {
+                        ...homeTabRoute,
+                        state: {
+                            routes: existingRoutes,
+                            index: tabIndex, // activate the requested tab
+                        },
+                    },
+                    { name: screen as string, params: params as object | undefined },
+                ] as Omit<Route<string>, 'key'>[],
+            }),
+        );
+    }
+}

package/templates/mobile/expo/src/core/utils/number-format.ts

@@ -0,0 +1,28 @@
+export const priceFormatter = new Intl.NumberFormat('fr-FR', {
+    style: 'decimal',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+});
+
+export const normalizeNumber = (value?: string | number | null): number | null => {
+    if (value === null || value === undefined) return null;
+    const parsed = typeof value === 'number' ? value : Number(value);
+    return Number.isFinite(parsed) ? parsed : null;
+};
+
+export const formatPrice = (value?: string | number | null, fallbackPrice?: string | number | null): string => {
+    const normalized = normalizeNumber(value);
+
+    if (normalized === null || normalized === 0) {
+        const fb = normalizeNumber(fallbackPrice);
+        return fb !== null ? priceFormatter.format(fb) + ' €' : '—';
+    }
+
+    return priceFormatter.format(normalized) + ' €';
+};
+
+export const formatPriceLabel = (params: { price_label?: string | null; price?: string | number | null }): string => {
+    if (params.price_label) return params.price_label;
+    if (params.price) return formatPrice(params.price);
+    return '—';
+};

package/templates/mobile/expo/src/core/utils/query-client.util.ts

@@ -0,0 +1,35 @@
+import { QueryClient } from '@tanstack/react-query';
+
+// Persisted queries are restored from disk on a cold start, so the cache must
+// survive far longer than React Query's 5-minute default garbage-collection
+// window — otherwise an entry would be pruned in memory and never re-written to
+// disk, leaving nothing to show on a later offline launch. 24h keeps a day's
+// worth of feeds/lists ready offline while still expiring stale data.
+const OFFLINE_GC_TIME = 24 * 60 * 60 * 1000;
+
+class AppQueryClient {
+  private static instance: QueryClient;
+
+  static getInstance(): QueryClient {
+    if (!AppQueryClient.instance) {
+      AppQueryClient.instance = new QueryClient({
+        defaultOptions: {
+          queries: {
+            gcTime: OFFLINE_GC_TIME,
+            // `onlineManager` (wired to NetInfo in app-provider) already pauses
+            // queries while offline, so a failure here is a real server/timeout
+            // error — retrying once is enough; more just delays the cached
+            // fallback from showing.
+            retry: 1,
+          },
+        },
+      });
+    }
+    return AppQueryClient.instance;
+  }
+}
+
+export const queryClient = AppQueryClient.getInstance();
+
+export default AppQueryClient;
+

package/templates/mobile/expo/src/core/utils/query-persister.util.ts

@@ -0,0 +1,36 @@
+import { createMMKV } from 'react-native-mmkv';
+import {
+  PersistedClient,
+  Persister,
+} from '@tanstack/react-query-persist-client';
+
+/**
+ * Dedicated MMKV store for the React Query cache. Kept separate from any other
+ * MMKV usage so clearing the query cache never touches unrelated app storage.
+ * MMKV is synchronous + native-fast, so persisting on every cache mutation is
+ * cheap enough to keep the on-disk snapshot fresh for an offline cold start.
+ */
+const queryStorage = createMMKV({ id: 'react-query-cache' });
+
+const CACHE_KEY = 'REACT_QUERY_OFFLINE_CACHE';
+
+/**
+ * A {@link Persister} backed by MMKV. The persist client writes the whole
+ * dehydrated query cache under a single key; on launch it reads it straight
+ * back so the last-seen feeds/lists/profile are on screen before the network
+ * even resolves — the foundation of the offline-first experience.
+ */
+export const mmkvQueryPersister: Persister = {
+  persistClient: (client: PersistedClient) => {
+    queryStorage.set(CACHE_KEY, JSON.stringify(client));
+  },
+  restoreClient: () => {
+    const cached = queryStorage.getString(CACHE_KEY);
+    return cached ? (JSON.parse(cached) as PersistedClient) : undefined;
+  },
+  removeClient: () => {
+    queryStorage.remove(CACHE_KEY);
+  },
+};
+
+export default mmkvQueryPersister;