create-du-app 0.1.2 → 0.1.4

package/templates/mobile/rn/src/core/utils/size.util.tsx

@@ -0,0 +1,74 @@
+import { Dimensions, Platform } from 'react-native';
+
+const { width, height } = Dimensions.get('window');
+const [shortDimension, longDimension] = width < height ? [width, height] : [height, width];
+
+const guidelineBaseWidth = 375;
+const guidelineBaseHeight = 812;
+const WIDTH_SCREEN = width;
+const HEIGHT_SCREEN = height;
+
+const horizontalScale = (size: number) => (shortDimension / guidelineBaseWidth) * size;
+const verticalScale = (size: number) => (longDimension / guidelineBaseHeight) * size;
+const moderateScale = (size: number, factor = 0.5) =>
+  size + (horizontalScale(size) - size) * factor;
+// scale fontsize
+// const scaleWidth = width / guidelineBaseWidth;
+// const scaleHeight = height / guidelineBaseHeight;
+// const scale = Math.min(scaleWidth, scaleHeight);
+const fontSize = (size: number) => size;
+
+const isIOS = Platform.OS === 'ios';
+
+// Spacing tokens — Life-Master-Design (Figma "Spacing & Grid").
+// Base unit 4px. Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64.
+const Spacing = {
+  spacing_none: 0, // 0px
+  spacing_2xs: 2, // 2px (nudge, off-scale)
+  spacing_xs: 4, // xs
+  spacing_s_nudge: 6, // 6px (nudge, off-scale)
+  spacing_sm: 8, // sm
+  spacing_m_nudge: 10, // 10px (nudge, off-scale)
+  spacing_md: 12, // md
+  spacing_base: 16, // base
+  spacing_lg: 20, // lg
+  spacing_xl: 24, // xl
+  spacing_2xl: 32, // 2xl
+  spacing_3xl: 40, // 3xl
+  spacing_4xl: 48, // 4xl
+  spacing_5xl: 64, // 5xl
+} as const;
+
+// Border-radius tokens — Life-Master-Design (Figma "Border Radius").
+// Scale: 4, 8, 12, 16, 24, full.
+const Radius = {
+  radius_none: 0, // 0px
+  radius_xs: 2, // xs
+  radius_sm: 4, // sm
+  radius_md: 8, // md
+  radius_lg: 12, // lg
+  radius_xl: 16, // xl
+  radius_2xl: 24, // 2xl
+  radius_full: 999, // full
+} as const;
+
+// stroke width tokens (theo Figma, dùng px thô)
+const Stroke = {
+  stroke_none: 0, // 0px
+  stroke_xs: 0.5, // 0.5px
+  stroke_s: 1, // 1px
+  stroke_m: 2, // 2px
+} as const;
+
+export {
+  fontSize,
+  HEIGHT_SCREEN,
+  horizontalScale,
+  isIOS,
+  moderateScale,
+  Radius,
+  Spacing,
+  Stroke,
+  verticalScale,
+  WIDTH_SCREEN,
+};

package/templates/mobile/rn/src/core/utils/storage.util.tsx

@@ -0,0 +1,53 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+export enum StorageKeys {
+  APP_ACCESS_TOKEN = 'APP_ACCESS_TOKEN',
+  APP_REFRESH_TOKEN = 'APP_REFRESH_TOKEN',
+  LANGUAGE = 'LANGUAGE',
+  FAVORIS_SEARCH_HISTORY = 'FAVORIS_SEARCH_HISTORY',
+  CHAT_LIST_SEARCH_HISTORY = 'CHAT_LIST_SEARCH_HISTORY',
+  ENUM_VALUES = 'ENUM_VALUES',
+  THEME = 'THEME',
+  USER_PATH_TYPE = 'USER_PATH_TYPE',
+  LIBRARY_ITEMS = 'LIBRARY_ITEMS',
+  ENTITLEMENT = 'ENTITLEMENT',
+  ONBOARDED = 'ONBOARDED',
+}
+
+export class AppStorageUtil {
+  static setItem = async (key: string, value: any) => {
+    try {
+      await AsyncStorage.setItem(key, JSON.stringify(value));
+    } catch {
+      // ignored
+    }
+  };
+
+  static getItem = async (key: string) => {
+    try {
+      const data: any = await AsyncStorage.getItem(key);
+      return JSON.parse(data);
+    } catch {
+      return null;
+    }
+  };
+
+  static removeItem = async (key: string) => {
+    try {
+      await AsyncStorage.removeItem(key);
+    } catch {
+      // ignored
+    }
+  };
+
+  static removeAll = async () => {
+    try {
+      Promise.all([
+        AppStorageUtil.removeItem(StorageKeys.APP_ACCESS_TOKEN),
+        AppStorageUtil.removeItem(StorageKeys.APP_REFRESH_TOKEN),
+      ]);
+    } catch {
+      // ignored
+    }
+  };
+}

package/templates/mobile/rn/src/core/utils/toast.util.tsx

@@ -0,0 +1,151 @@
+import { Colors } from './color.util';
+import { IconToastError, IconToastSuccess } from '@src/assets/svgs';
+import {
+    fontSize,
+    horizontalScale,
+    verticalScale,
+} from './size.util';
+import { Font } from './font.util';
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import Toast, {
+    BaseToast,
+    BaseToastProps,
+    ToastConfig,
+} from 'react-native-toast-message';
+
+const toastProps: BaseToastProps = {
+    text1Style: {
+        fontSize: 12,
+        fontWeight: undefined,
+    },
+    text2Style: {
+        fontSize: 12,
+    },
+    text2NumberOfLines: 0,
+    style: {
+        height: 'auto',
+        paddingVertical: 20,
+        paddingHorizontal: 0,
+        marginTop: 20,
+    },
+};
+
+const CustomSuccessToast = (props: BaseToastProps) => (
+    <TouchableOpacity
+        activeOpacity={1}
+        onPress={props.onPress}
+        style={styles.container}
+    >
+        <IconToastSuccess width={horizontalScale(24)} height={horizontalScale(24)} />
+        <View style={styles.textWrapper}>
+            {props.text1 ? (
+                <Text style={styles.text1} numberOfLines={1}>
+                    {props.text1}
+                </Text>
+            ) : null}
+            {props.text2 ? (
+                <Text style={styles.text2} numberOfLines={0}>
+                    {props.text2}
+                </Text>
+            ) : null}
+        </View>
+    </TouchableOpacity>
+);
+
+const CustomErrorToast = (props: BaseToastProps) => (
+    <TouchableOpacity
+        activeOpacity={1}
+        onPress={props.onPress}
+        style={[styles.container, { borderWidth: 1 }]}
+    >
+        <IconToastError width={horizontalScale(24)} height={horizontalScale(24)} />
+        <View style={styles.textWrapper}>
+            {props.text1 ? (
+                <Text style={styles.text1} numberOfLines={1}>
+                    {props.text1}
+                </Text>
+            ) : null}
+            {props.text2 ? (
+                <Text style={styles.text2} numberOfLines={0}>
+                    {props.text2}
+                </Text>
+            ) : null}
+        </View>
+    </TouchableOpacity>
+);
+
+export const toastConfig: ToastConfig = {
+    success: props => <CustomSuccessToast {...props} />,
+    error: props => <CustomErrorToast {...props} />,
+    warning: props => (
+        <BaseToast
+            {...props}
+            {...toastProps}
+            style={[
+                toastProps.style,
+                {
+                    borderLeftColor: Colors.bd_warning_normal,
+                },
+            ]}
+        />
+    ),
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        backgroundColor: Colors.hFFFFFF,
+        borderRadius: horizontalScale(16),
+        padding: horizontalScale(12),
+        marginTop: verticalScale(20),
+        shadowColor: Colors.h000000,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.08,
+        shadowRadius: 8,
+        elevation: 4,
+        marginHorizontal: horizontalScale(16),
+        gap: verticalScale(8),
+        borderColor: '#FEE9E7',
+    },
+    textWrapper: {
+        flex: 1,
+        justifyContent: 'center',
+    },
+    text1: {
+        fontSize: fontSize(16),
+        fontFamily: Font.rethinkSansSemiBold,
+        color: Colors.text_primary,
+        marginBottom: verticalScale(2),
+    },
+    text2: {
+        fontSize: fontSize(14),
+        fontFamily: Font.rethinkSansRegular,
+        color: Colors.sub_text,
+    },
+});
+
+export const showErrorToast = (title?: string, message?: string) => {
+    Toast.show({
+        type: 'error',
+        text1: title || 'Erreur!',
+        text2: message || '',
+    });
+};
+
+export const showSuccessToast = (title?: string, message?: string, onPress?: () => void) => {
+    Toast.show({
+        type: 'success',
+        text1: title ?? 'Succès',
+        text2: message || '',
+        onPress
+    });
+};
+
+export const showWarningToast = (title?: string, message?: string) => {
+    Toast.show({
+        type: 'warning',
+        text1: title || 'Warning!',
+        text2: message || '',
+    });
+};

package/templates/mobile/rn/src/core/utils/translator.util.tsx

@@ -0,0 +1,23 @@
+import I18n, { i18n, InitOptions } from 'i18next'
+import { initReactI18next } from 'react-i18next'
+
+export class Translator {
+  public static setup(options: InitOptions): i18n {
+    I18n.use(initReactI18next).init(options)
+
+    return I18n
+  }
+
+  public static translate(message: string): string {
+    return I18n.t(message) || message
+  }
+
+  public static changeLanguages = (lng: string | undefined) => {
+    I18n.changeLanguage(lng)
+  }
+
+  /** The active i18n language (e.g. 'fr' | 'en'); '' before init. */
+  public static currentLanguage(): string {
+    return I18n.language ?? ''
+  }
+}

package/templates/mobile/rn/src/core/utils/typography.util.tsx

@@ -0,0 +1,69 @@
+import { TextStyle } from 'react-native';
+import { Font } from './font.util';
+
+/**
+ * Typography scale — Life-Master-Design (Figma "Typography", DM Sans).
+ *
+ * Each token is a ready-to-spread `TextStyle` (fontFamily + fontSize + lineHeight).
+ * Use these instead of hand-writing font sizes so text stays consistent with the
+ * design system.
+ *
+ * @example
+ * <Text style={Typography.headingXl}>Life Master</Text>
+ * <Text style={[Typography.bodyM, { color: Colors.sub_text }]}>...</Text>
+ *
+ * | Token        | size | weight    | line | usage                 |
+ * |--------------|------|-----------|------|-----------------------|
+ * | headingXl    | 32   | SemiBold  | 40   | Page titles, hero     |
+ * | headingL     | 24   | SemiBold  | 32   | Section headings      |
+ * | headingM     | 20   | Medium    | 28   | Card titles           |
+ * | bodyL        | 16   | Regular   | 24   | Primary body text     |
+ * | bodyM        | 14   | Regular   | 20   | Secondary body text   |
+ * | bodyMBold    | 14   | SemiBold  | 20   | Emphasized body text  |
+ * | caption      | 12   | Regular   | 18   | Captions, labels      |
+ * | captionBold  | 10   | Medium    | 14   | Tags, badges          |
+ */
+export const Typography = {
+  headingXl: {
+    fontFamily: Font.dmSansSemiBold,
+    fontSize: 32,
+    lineHeight: 40,
+  },
+  headingL: {
+    fontFamily: Font.dmSansSemiBold,
+    fontSize: 24,
+    lineHeight: 32,
+  },
+  headingM: {
+    fontFamily: Font.dmSansMedium,
+    fontSize: 20,
+    lineHeight: 28,
+  },
+  bodyL: {
+    fontFamily: Font.dmSansRegular,
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  bodyM: {
+    fontFamily: Font.dmSansRegular,
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  bodyMBold: {
+    fontFamily: Font.dmSansSemiBold,
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  caption: {
+    fontFamily: Font.dmSansRegular,
+    fontSize: 12,
+    lineHeight: 18,
+  },
+  captionBold: {
+    fontFamily: Font.dmSansMedium,
+    fontSize: 10,
+    lineHeight: 14,
+  },
+} satisfies Record<string, TextStyle>;
+
+export type TypographyToken = keyof typeof Typography;

package/templates/mobile/rn/src/core/utils/validate.util.tsx

@@ -0,0 +1,13 @@
+  import * as _ from 'lodash'
+export const regexNumber = /^[0-9]+$/;
+export const checkEmail = (value: string) => value && /^[\w+\-]+(\.[\w+\-]+)*@[\w\-]+(\.[\w\-]+)*\.\w{2,}$/.test(value) ? 1 : 0
+export const requiredTrim = (value: string) => value && _.startsWith(value, ' ') || _.endsWith(value, ' ') ? 0 : 1
+export const minLenght8 = (value: string) => value && value.length >= 8 ? 1 : 0
+export const isPhoneNumber = (value: string) => value && /([0-9\s\-]{7,})(?:\s*(?:#|x\.?|ext\.?|extension)\s*(\d+))?$/g.test(value) ? 1 : 0
+export const regexEmail = /^[\w+\-]+(\.[\w+\-]+)*@[\w\-]+(\.[\w\-]+)*\.\w{2,}$/
+export const isAppleEmail = (value?: string | null) =>
+    !!value && /@(icloud|me|mac)\.com$/i.test(value.trim())
+export const removeFromArray = (original: Array<{ _id?: string | number }>, remove: Array<{ _id?: string | number }>) => {
+  const removeIds = remove.map(item => item?._id);
+  return original.filter(value => !removeIds.includes(value?._id));
+}

package/templates/mobile/rn/src/declarations.d.ts

@@ -0,0 +1,54 @@
+declare module '*.svg' {
+    import { SvgProps } from 'react-native-svg';
+    import React from 'react';
+
+    const content: React.FC<SvgProps>;
+    export default content;
+}
+
+declare module '*.png' {
+    const value: any;
+    export default value;
+}
+
+declare module 'react-native-fs' {
+    type DownloadFileOptions = {
+        fromUrl: string;
+        toFile: string;
+        headers?: Record<string, string>;
+        background?: boolean;
+        cacheable?: boolean;
+        progressInterval?: number;
+        progressDivider?: number;
+        begin?: (res: { contentLength: number; statusCode: number }) => void;
+        progress?: (res: { bytesWritten: number; contentLength: number }) => void;
+    };
+    type DownloadResult = {
+        statusCode: number;
+        bytesWritten: number;
+    };
+    const RNFS: {
+        CachesDirectoryPath: string;
+        DocumentDirectoryPath: string;
+        exists(path: string): Promise<boolean>;
+        mkdir(path: string): Promise<void>;
+        unlink(path: string): Promise<void>;
+        stopDownload(jobId: number): void;
+        writeFile(
+            path: string,
+            contents: string,
+            encoding: string,
+        ): Promise<void>;
+        stat(path: string): Promise<{
+            size: number | string;
+            isFile(): boolean;
+            isDirectory(): boolean;
+        }>;
+        downloadFile(options: DownloadFileOptions): {
+            jobId: number;
+            promise: Promise<DownloadResult>;
+        };
+    };
+
+    export default RNFS;
+}

package/templates/mobile/rn/src/modules/home/home.screen.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
+import { useTranslation } from 'react-i18next';
+// Example feature API (React Query) — demonstrates the ApiService + @repo/shared
+// ApiEndpoints pattern. Copy core/api/example.api.ts per feature.
+import { useExampleList } from '@src/core/api';
+import { useTheme } from '@src/core/theme';
+
+export function HomeScreen() {
+  const { t } = useTranslation();
+  const { colors } = useTheme();
+  const { data, isLoading, isError } = useExampleList();
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.bg_elevation_level_1_normal }]}>
+      <Text style={[styles.title, { color: colors.fg_neutral_normal }]}>
+        {t('home.greeting', { name: '{{PROJECT_NAME}}' })}
+      </Text>
+      {isLoading ? <ActivityIndicator color={colors.fg_primary_normal} /> : null}
+      {isError ? (
+        <Text style={{ color: colors.bd_danger_normal }}>{t('home.loadError')}</Text>
+      ) : null}
+      {data ? (
+        <Text style={{ color: colors.fg_neutral_faded }}>{t('home.count', { n: data.length })}</Text>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, padding: 24, gap: 16 },
+  title: { fontSize: 22, fontWeight: '600' },
+});

package/templates/mobile/rn/src/modules/profile/profile.screen.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@src/core/components/ui';
+import { useTheme } from '@src/core/theme';
+import { useAuthStore } from '@src/app/stores';
+
+export function ProfileScreen() {
+  const { t } = useTranslation();
+  const { colors } = useTheme();
+  const clearTokens = useAuthStore(s => s.clearTokens);
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.bg_elevation_level_1_normal }]}>
+      <Text style={[styles.title, { color: colors.fg_neutral_normal }]}>{t('profile.title')}</Text>
+      <Button
+        label={t('profile.signOut')}
+        variant="solid"
+        colorScheme="primary"
+        onPress={() => clearTokens()}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, padding: 24, gap: 24 },
+  title: { fontSize: 22, fontWeight: '600' },
+});

package/templates/mobile/rn/src/scripts/link-fonts.js

@@ -0,0 +1,60 @@
+#!/usr/bin/env node
+
+/**
+ * Script to help link fonts in React Native
+ * Fonts are automatically linked when you build the app,
+ * but this script helps verify configuration and prepare for linking
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const fontsDir = path.join(__dirname, '../../src/assets/fonts');
+const configFile = path.join(__dirname, '../../react-native.config.js');
+
+console.log('🔍 Checking font configuration...\n');
+
+// Check if fonts directory exists
+if (!fs.existsSync(fontsDir)) {
+  console.error('❌ Fonts directory not found:', fontsDir);
+  process.exit(1);
+}
+
+// List all font files
+const fontFiles = fs.readdirSync(fontsDir).filter(file => 
+  file.endsWith('.ttf') || file.endsWith('.otf')
+);
+
+if (fontFiles.length === 0) {
+  console.warn('⚠️  No font files found in:', fontsDir);
+  console.log('   Please add your font files (.ttf or .otf) to this directory.\n');
+} else {
+  console.log(`✅ Found ${fontFiles.length} font file(s):`);
+  fontFiles.forEach(file => {
+    console.log(`   - ${file}`);
+  });
+  console.log('');
+}
+
+// Check react-native.config.js
+if (fs.existsSync(configFile)) {
+  const configContent = fs.readFileSync(configFile, 'utf8');
+  if (configContent.includes('./src/assets/fonts')) {
+    console.log('✅ react-native.config.js is configured correctly');
+  } else {
+    console.warn('⚠️  react-native.config.js might not include fonts path');
+  }
+} else {
+  console.error('❌ react-native.config.js not found');
+  process.exit(1);
+}
+
+console.log('\n📝 Next steps:');
+console.log('   1. For iOS: Run "cd ios && pod install" (if needed)');
+console.log('   2. Rebuild your app:');
+console.log('      - iOS: npm run ios');
+console.log('      - Android: npm run android');
+console.log('\n✨ Fonts will be automatically linked when you build the app!\n');
+
+
+

package/templates/mobile/rn/src/scripts/sync-images.js

@@ -0,0 +1,56 @@
+const fs = require('fs')
+const path = require('path')
+
+function sync(dir) {
+    console.log('*** Sync images ***')
+
+    const imageDirs = fs
+        .readdirSync(dir, {withFileTypes: true})
+        .filter(f => f.name.includes('.png') || f.name.includes('.jpg'))
+        .map(f => {
+            const [fileName, type] = f.name.split('.')
+            const [name] = fileName.split('@')
+            return `${name}.${type}`
+        })
+
+    const imageDirsUnique = [...new Set(imageDirs)]
+
+    const images = imageDirsUnique.map(imageDir => {
+        const parts = imageDir.split('-')
+        let name = ''
+        for (let i = 0; i < parts.length; i++) {
+            name +=
+                parts[i][0].toUpperCase() +
+                parts[i].substring(1, parts[i].length)
+        }
+        return 'Img' + name
+    })
+
+    const imports = imageDirsUnique.reduce((ret, imageDir, idx) => {
+        const [image] = images[idx].split('.')
+        return (
+            ret +
+            `import ${image} from './${imageDir}'` +
+            (idx !== imageDirsUnique.length - 1 ? '\n' : '')
+        )
+    }, '')
+
+    const exports = images.reduce((ret, img, idx) => {
+        const [name] = img.split('.')
+        return ret + `  ${name},\n` + (idx === images.length - 1 ? '}\n' : '')
+    }, 'export {\n')
+
+    if (images.length === 0) {
+        return '\n// Export\nexport {}'
+    }
+
+    return `// Image\n${imports}\n\n// Export\n${exports}`
+}
+
+const imagesPath = path.join(__dirname, '../assets/Images')
+
+let output = sync(imagesPath)
+
+fs.writeFile(path.join(__dirname, '../assets/Images/index.ts'), output, err =>
+    console.log(`Sync images ${err ? 'failed: ' + err : 'succeeded'}`),
+)

package/templates/mobile/rn/src/scripts/sync-svgs.js

@@ -0,0 +1,50 @@
+const fs = require('fs')
+const path = require('path')
+
+function sync(dir) {
+    console.log('*** Sync svgs ***')
+
+    const svgDirs = fs
+        .readdirSync(dir, {
+            withFileTypes: true,
+        })
+        .filter(f => f.name.includes('.svg'))
+        .map(f => f.name.split('.')[0])
+
+    const svgs = svgDirs.map(svgDir => {
+        const parts = svgDir.split('-')
+        let name = ''
+        for (let i = 0; i < parts.length; i++) {
+            name +=
+                parts[i][0].toUpperCase() +
+                parts[i].substring(1, parts[i].length)
+        }
+        return 'Icon' + name
+    })
+
+    const imports = svgDirs.reduce((ret, svgDir, idx) => {
+        return (
+            ret +
+            `import ${svgs[idx]} from './${svgDir}.svg'` +
+            (idx !== svgDirs.length - 1 ? '\n' : '')
+        )
+    }, '')
+
+    const exports = svgs.reduce((ret, svg, idx) => {
+        return ret + `  ${svg},\n` + (idx === svgs.length - 1 ? '}\n' : '')
+    }, 'export {\n')
+
+    if (svgs.length === 0) {
+        return '\n// Export\nexport {}'
+    }
+
+    return `// Icon\n${imports}\n\n// Export\n${exports}`
+}
+
+const svgsPath = path.join(__dirname, '../assets/svgs')
+
+let output = sync(svgsPath)
+
+fs.writeFile(path.join(__dirname, '../assets/svgs/index.ts'), output, err =>
+    console.log(`Sync svgs ${err ? 'failed: ' + err : 'succeeded'}`),
+)