@computools/react-native-template-controller 0.0.10 → 0.0.12

package/template/ios/ReactNativeTemplate.xcworkspace/contents.xcworkspacedata

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Workspace
+   version = "1.0">
+   <FileRef
+      location = "group:ReactNativeTemplate.xcodeproj">
+   </FileRef>
+   <FileRef
+      location = "group:Pods/Pods.xcodeproj">
+   </FileRef>
+</Workspace>

package/template/ios/build/generated/ios/React-Codegen.podspec.json

@@ -1 +1 @@
-{"name":"React-Codegen","version":"0.72.0","summary":"Temp pod for generated files for React Native","homepage":"https://facebook.com/","license":"Unlicense","authors":"Facebook","compiler_flags":"-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32 -Wno-documentation -Wno-nullability-completeness -std=c++17","source":{"git":""},"header_mappings_dir":"./","platforms":{"ios":"12.4"},"source_files":"**/*.{h,mm,cpp}","pod_target_xcconfig":{"HEADER_SEARCH_PATHS":"\"$(PODS_ROOT)/boost\" \"$(PODS_ROOT)/RCT-Folly\" \"${PODS_ROOT}/Headers/Public/React-Codegen/react/renderer/components\" \"$(PODS_ROOT)/Headers/Private/React-Fabric\" \"$(PODS_ROOT)/Headers/Private/React-RCTFabric\"","FRAMEWORK_SEARCH_PATHS":[]},"dependencies":{"React-jsiexecutor":[],"RCT-Folly":[],"RCTRequired":[],"RCTTypeSafety":[],"React-Core":[],"React-jsi":[],"ReactCommon/turbomodule/bridging":[],"ReactCommon/turbomodule/core":[],"React-NativeModulesApple":[],"glog":[],"DoubleConversion":[],"hermes-engine":[],"React-rncore":[],"FBReactNativeSpec":[]}}
+{"name":"React-Codegen","version":"0.72.1","summary":"Temp pod for generated files for React Native","homepage":"https://facebook.com/","license":"Unlicense","authors":"Facebook","compiler_flags":"-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32 -Wno-documentation -Wno-nullability-completeness -std=c++17","source":{"git":""},"header_mappings_dir":"./","platforms":{"ios":"12.4"},"source_files":"**/*.{h,mm,cpp}","pod_target_xcconfig":{"HEADER_SEARCH_PATHS":"\"$(PODS_ROOT)/boost\" \"$(PODS_ROOT)/RCT-Folly\" \"${PODS_ROOT}/Headers/Public/React-Codegen/react/renderer/components\" \"$(PODS_ROOT)/Headers/Private/React-Fabric\" \"$(PODS_ROOT)/Headers/Private/React-RCTFabric\"","FRAMEWORK_SEARCH_PATHS":[]},"dependencies":{"React-jsiexecutor":[],"RCT-Folly":[],"RCTRequired":[],"RCTTypeSafety":[],"React-Core":[],"React-jsi":[],"ReactCommon/turbomodule/bridging":[],"ReactCommon/turbomodule/core":[],"React-NativeModulesApple":[],"glog":[],"DoubleConversion":[],"hermes-engine":[],"React-rncore":[],"FBReactNativeSpec":[]}}

package/template/package.json

@@ -15,10 +15,12 @@
     "@react-navigation/native": "6.1.6",
     "@react-navigation/native-stack": "6.9.12",
     "axios": "1.3.4",
+    "i18next": "23.2.8",
     "mobx": "6.9.0",
     "mobx-react-lite": "3.4.3",
     "react": "18.2.0",
     "react-hook-form": "7.43.5",
+    "react-i18next": "13.0.1",
     "react-native": "0.72.1",
     "react-native-bootsplash": "4.5.3",
     "react-native-mmkv": "2.6.3",
@@ -31,12 +33,12 @@
     "@babel/core": "^7.20.0",
     "@babel/preset-env": "^7.20.0",
     "@babel/runtime": "^7.20.0",
-    "@computools/eslint-config-react-native": "1.0.17",
+    "@computools/eslint-config-react-native": "1.0.3",
     "@react-native/eslint-config": "0.72.2",
     "@react-native/metro-config": "0.72.7",
     "@tsconfig/react-native": "^3.0.0",
-    "@types/metro-config": "^0.76.3",
     "@types/jest": "^29.2.1",
+    "@types/metro-config": "^0.76.3",
     "@types/react": "^18.0.24",
     "@types/react-test-renderer": "^18.0.0",
     "@typescript-eslint/parser": "5.53.0",

package/template/src/app/infrastructure/auth/screens/login/Login.screen.tsx

@@ -11,6 +11,7 @@ import {MainStackParamsList, MainStackRoutes} from '@infra/MainStackRoutes.route
 import {Computools} from '@ui-kit/icons/computools/Computools.icon';
 import {InputField} from '@ui-kit/InputField.component';
 import {Button} from '@ui-kit/buttons/Button.component';
+import {localization} from '@localization/localization';
 import {LoginController} from './login.controller';
 
 enum LoginField {
@@ -26,8 +27,11 @@ interface Form {
 const minPassLength = 8;
 const schema = yup
   .object({
-    [LoginField.UserName]: yup.string().required('username is required'),
-    [LoginField.Password]: yup.string().required('password is required').min(minPassLength, 'min 8 chars'),
+    [LoginField.UserName]: yup.string().required(localization.t('validation.usernameRequired')),
+    [LoginField.Password]: yup
+      .string()
+      .required(localization.t('validation.passRequired'))
+      .min(minPassLength, localization.t('validation.minChars', {min: minPassLength})),
   })
   .required();
 
@@ -60,11 +64,11 @@ export const Login: React.FC<NativeStackScreenProps<MainStackParamsList, MainSta
   };
 
   const renderUsername: ControllerProps<Form, LoginField.UserName>['render'] = ({fieldState, field}) => (
-    <InputField {...field} error={fieldState.error} containerStyle={styles.row} placeholder="Username, Mobile Number" />
+    <InputField {...field} error={fieldState.error} containerStyle={styles.row} placeholder={localization.t('placeholders.username')} />
   );
 
   const renderPassword: ControllerProps<Form, LoginField.Password>['render'] = ({fieldState, field}) => (
-    <InputField secureTextEntry {...field} error={fieldState.error} containerStyle={styles.row} placeholder="Password" />
+    <InputField secureTextEntry {...field} error={fieldState.error} containerStyle={styles.row} placeholder={localization.t('placeholders.pass')} />
   );
 
   return (
@@ -73,13 +77,13 @@ export const Login: React.FC<NativeStackScreenProps<MainStackParamsList, MainSta
         <View style={styles.iconWrapper}>
           <Computools />
         </View>
-        <Text style={styles.headerText}>Welcome 🤩 we glad to see you in computools rn template</Text>
+        <Text style={styles.headerText}>{localization.t('greetings')}</Text>
       </View>
       <Controller name={LoginField.UserName} control={control} render={renderUsername} />
       <Controller name={LoginField.Password} control={control} render={renderPassword} />
-      <Text style={[styles.forgetPassword, styles.row]}>Forget password?</Text>
-      <Button style={styles.row} onPress={handleSubmit(onLogin)} text="Login" />
-      <Button style={styles.row} onPress={onSignUp} text="Sign Up" />
+      <Text style={[styles.forgetPassword, styles.row]}>{localization.t('forgotPass')}</Text>
+      <Button style={styles.row} onPress={handleSubmit(onLogin)} text={localization.t('buttons.login')} />
+      <Button style={styles.row} onPress={onSignUp} text={localization.t('buttons.signup')} />
     </View>
   );
 };

package/template/src/app/infrastructure/auth/screens/login/login.controller.ts

@@ -8,14 +8,14 @@ export class LoginController {
 
   private loginProcessing: boolean = false;
 
-  public constructor() {
-    makeAutoObservable(this);
-  }
-
   public get isProcessing() {
     return this.loginProcessing;
   }
 
+  public constructor() {
+    makeAutoObservable(this);
+  }
+
   public async login(username: string, password: string) {
     this.loginProcessing = true;
     try {

package/template/src/app/infrastructure/auth/screens/sign-up/SignUp.screen.tsx

@@ -10,6 +10,7 @@ import {Computools} from '@ui-kit/icons/computools/Computools.icon';
 import {InputField} from '@ui-kit/InputField.component';
 import {Button} from '@ui-kit/buttons/Button.component';
 import {HeaderBack} from '@ui-kit/HeaderBack.component';
+import {localization} from '@localization/localization';
 
 enum SignUpField {
   UserName = 'username',
@@ -26,13 +27,16 @@ interface Form {
 const minPassLength = 8;
 const schema = yup
   .object({
-    [SignUpField.UserName]: yup.string().required('username is required'),
-    [SignUpField.Password]: yup.string().required('password is required').min(minPassLength, 'min 8 chars'),
+    [SignUpField.UserName]: yup.string().required(localization.t('validation.usernameRequired')),
+    [SignUpField.Password]: yup
+      .string()
+      .required(localization.t('validation.passRequired'))
+      .min(minPassLength, localization.t('validation.minChars', {min: minPassLength})),
     [SignUpField.RepeatPassword]: yup
       .string()
-      .required('password is required')
-      .min(minPassLength, 'min 8 chars')
-      .oneOf([yup.ref(SignUpField.Password)], 'Passwords do not match'),
+      .required(localization.t('validation.passRequired'))
+      .min(minPassLength, localization.t('validation.minChars', {min: minPassLength}))
+      .oneOf([yup.ref(SignUpField.Password)], localization.t('validation.passNotMatch')),
   })
   .required();
 
@@ -54,15 +58,21 @@ export const SignUp: React.FC<NativeStackScreenProps<MainStackParamsList, MainSt
   };
 
   const renderUsername: ControllerProps<Form, SignUpField.UserName>['render'] = ({fieldState, field}) => (
-    <InputField {...field} error={fieldState.error} containerStyle={styles.row} placeholder="Username, Mobile Number" />
+    <InputField {...field} error={fieldState.error} containerStyle={styles.row} placeholder={localization.t('placeholders.username')} />
   );
 
   const renderPassword: ControllerProps<Form, SignUpField.Password>['render'] = ({fieldState, field}) => (
-    <InputField secureTextEntry {...field} error={fieldState.error} containerStyle={styles.row} placeholder="Password" />
+    <InputField secureTextEntry {...field} error={fieldState.error} containerStyle={styles.row} placeholder={localization.t('placeholders.pass')} />
   );
 
   const renderRepeatPassword: ControllerProps<Form, SignUpField.RepeatPassword>['render'] = ({fieldState, field}) => (
-    <InputField secureTextEntry {...field} error={fieldState.error} containerStyle={styles.row} placeholder="Repeat password" />
+    <InputField
+      secureTextEntry
+      {...field}
+      error={fieldState.error}
+      containerStyle={styles.row}
+      placeholder={localization.t('placeholders.repeatPass')}
+    />
   );
 
   return (
@@ -73,12 +83,12 @@ export const SignUp: React.FC<NativeStackScreenProps<MainStackParamsList, MainSt
           <View style={styles.iconWrapper}>
             <Computools />
           </View>
-          <Text style={styles.headerText}>Welcome 🤩 we glad to see you in computools rn template</Text>
+          <Text style={styles.headerText}>{localization.t('greetings')}</Text>
         </View>
         <Controller name={SignUpField.UserName} control={control} render={renderUsername} />
         <Controller name={SignUpField.Password} control={control} render={renderPassword} />
         <Controller name={SignUpField.RepeatPassword} control={control} render={renderRepeatPassword} />
-        <Button style={styles.row} onPress={handleSubmit(onSignUp)} text="Sign Up" />
+        <Button style={styles.row} onPress={handleSubmit(onSignUp)} text={localization.t('buttons.signup')} />
       </View>
     </SafeAreaView>
   );

package/template/src/app/infrastructure/onboarding/Onboarding.screen.tsx

@@ -4,6 +4,7 @@ import {type NativeStackScreenProps} from '@react-navigation/native-stack';
 
 import {MainStackParamsList, MainStackRoutes} from '@infra/MainStackRoutes.routes';
 import {Button} from '@ui-kit/buttons/Button.component';
+import {localization} from '@localization/localization';
 import {Step} from './Step.component';
 
 const {width} = Dimensions.get('window');
@@ -20,12 +21,12 @@ export const Onboarding: React.FC<NativeStackScreenProps<MainStackParamsList, Ma
         decelerationRate="fast"
         style={styles.scroll}
         contentContainerStyle={styles.scrollContent}>
-        <Step text="UNLOCK TOMORROW 1" />
-        <Step text="UNLOCK TOMORROW 2" />
-        <Step text="UNLOCK TOMORROW 3" />
+        <Step text={localization.t('brandPhrase', {count: 1}).toUpperCase()} />
+        <Step text={localization.t('brandPhrase', {count: 2}).toUpperCase()} />
+        <Step text={localization.t('brandPhrase', {count: 3}).toUpperCase()} />
       </ScrollView>
       <View style={styles.controllsWrapper}>
-        <Button onPress={onSkip} text="Skip" />
+        <Button onPress={onSkip} text={localization.t('buttons.skip')} />
       </View>
     </View>
   );

package/template/src/localization/en.json

@@ -0,0 +1,21 @@
+{
+    "brandPhrase": "Unlock Tomorrow {{count}}",
+    "greetings": "Welcome 🤩 we glad to see you in computools rn template",
+    "forgotPass": "Forgot password?",
+    "buttons" : {
+        "skip": "Skip",
+        "login": "Login",
+        "signup": "Sign up"
+    },
+    "validation": {
+        "usernameRequired": "username is required",
+        "passRequired": "password is required",
+        "minChars": "min {{min}} chars",
+        "passNotMatch": "Passwords do not match"
+    },
+    "placeholders": {
+        "username": "Username, Mobile Number",
+        "pass": "Password",
+        "repeatPass": "Repeat password"
+    }
+}

package/template/src/localization/localization.ts

@@ -0,0 +1,53 @@
+import * as i18n from 'i18next';
+import {initReactI18next} from 'react-i18next';
+
+import en from './en.json';
+import uk from './uk.json';
+
+export enum Languages {
+  EN = 'en',
+  UK = 'uk',
+}
+
+export type ResourceKey = string | {[key: string]: string};
+
+export interface LangOptions {
+  fallbackLng: Languages;
+  resources: {[key in Languages]: {translation: Record<string, ResourceKey>}};
+}
+
+export interface Localization {
+  language: Languages;
+  t: (key: string, options?: {[key: string]: string | number}) => string;
+  selectLanguage: (langKey: Languages) => void;
+}
+
+export class NextLocalization implements Localization {
+  private currentLanguage: Languages;
+  public get language() {
+    return this.currentLanguage;
+  }
+
+  public constructor(options: LangOptions) {
+    this.currentLanguage = options.fallbackLng;
+    i18n.use(initReactI18next).init({
+      compatibilityJSON: 'v3',
+      ...options,
+    });
+  }
+
+  public t = (key: string, options?: {[key: string]: string | number}) => i18n.t(key, options);
+
+  public selectLanguage = (langKey: Languages) => {
+    this.currentLanguage = langKey;
+    i18n.changeLanguage(langKey);
+  };
+}
+
+export const localization: Localization = new NextLocalization({
+  fallbackLng: Languages.EN,
+  resources: {
+    [Languages.EN]: {translation: en},
+    [Languages.UK]: {translation: uk},
+  },
+});

package/template/src/localization/uk.json

@@ -0,0 +1,21 @@
+{
+    "brandPhrase": "Unlock Tomorrow {{count}}",
+    "greetings": "Ласкаво просимо 🤩 ми раді бачити вас у шаблоні computools rn",
+    "forgotPass": "Забули пароль?",
+    "buttons" : {
+        "skip": "Пропустити",
+        "login": "Логін",
+        "signup": "Зареєструватися"
+    },
+    "validation": {
+        "usernameRequired": "введіть ім'я користувача",
+        "passRequired": "потрібен пароль",
+        "minChars": "мінімум {{min}} символів",
+        "passNotMatch": "Паролі не збігаються"
+    },
+    "placeholders": {
+        "username": "Ім'я користувача, номер телефону",
+        "pass": "Пароль",
+        "repeatPass": "Повторіть пароль"
+    }
+}

package/template/tsconfig.json

@@ -2,6 +2,8 @@
   "extends": "@tsconfig/react-native/tsconfig.json",
   "compilerOptions": {
     "useDefineForClassFields": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
 
     "baseUrl": ".",
     "paths": {
@@ -11,6 +13,7 @@
       "@infra/*": ["src/app/infrastructure/*"],
       "@types/*": ["src/app/types/*"],
       "@ui-kit/*": ["src/app/ui-kit/*"],
+      "@localization/*": ["src/localization/*"],
     }
   }
 }