@computools/react-native-template-controller 1.0.40 → 1.0.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@computools/react-native-template-controller",
-  "version": "1.0.40",
+  "version": "1.0.42",
   "description": "Computools react native template by using mobx as controllers",
   "main": "template.config.js",
   "scripts": {

package/template/package.json

@@ -43,7 +43,7 @@
     "react-native-safe-area-context": "5.3.0",
     "react-native-screens": "4.9.2",
     "react-native-svg": "15.11.2",
-    "yup": "1.6.1"
+    "zod": "3.24.2"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

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

@@ -1,18 +1,19 @@
+import {z} from 'zod';
 import React from 'react';
-import * as yup from 'yup';
 import {useLocalObservable} from 'mobx-react-lite';
-import {yupResolver} from '@hookform/resolvers/yup';
+import {zodResolver} from '@hookform/resolvers/zod';
 import {View, Text, StyleSheet} from 'react-native';
 import {CommonActions} from '@react-navigation/native';
 import {useForm, Controller, ControllerProps} from 'react-hook-form';
 import {type NativeStackScreenProps} from '@react-navigation/native-stack';
 
-import {MainStackParamsList, MainStackRoutes} from '@infra/MainStackRoutes.routes';
-import {Computools} from '@ui-kit/icons/computools/Computools.icon';
+import {LoginController} from './login.controller';
 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';
+import {Computools} from '@ui-kit/icons/computools/Computools.icon';
+import {KeyboardView} from '@ui-kit/keyboard-view/keyboard-view.component';
+import {MainStackParamsList, MainStackRoutes} from '@infra/MainStackRoutes.routes';
 
 enum LoginField {
   UserName = 'username',
@@ -25,13 +26,12 @@ interface Form {
 }
 
 const minPassLength = 8;
-const schema = yup
+const schema = z
   .object({
-    [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})),
+    [LoginField.UserName]: z.string({required_error: localization.t('validation.usernameRequired')}),
+    [LoginField.Password]: z
+      .string({required_error: localization.t('validation.passRequired')})
+      .min(minPassLength, {message: localization.t('validation.minChars', {min: minPassLength})}),
   })
   .required();
 
@@ -39,7 +39,7 @@ export const Login: React.FC<NativeStackScreenProps<MainStackParamsList, MainSta
   const controller = useLocalObservable(() => new LoginController());
   const {control, handleSubmit, getValues} = useForm<Form>({
     mode: 'onBlur',
-    resolver: yupResolver(schema),
+    resolver: zodResolver(schema),
     defaultValues: {
       [LoginField.UserName]: '',
       [LoginField.Password]: '',
@@ -72,7 +72,7 @@ export const Login: React.FC<NativeStackScreenProps<MainStackParamsList, MainSta
   );
 
   return (
-    <View style={styles.screen}>
+    <KeyboardView style={styles.screen}>
       <View style={[styles.headerContainer, styles.row]}>
         <View style={styles.iconWrapper}>
           <Computools />
@@ -84,16 +84,14 @@ export const Login: React.FC<NativeStackScreenProps<MainStackParamsList, MainSta
       <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>
+    </KeyboardView>
   );
 };
 
 const styles = StyleSheet.create({
   screen: {
-    flex: 1,
     justifyContent: 'center',
     paddingHorizontal: 30,
-    paddingTop: 25,
   },
   headerContainer: {
     alignItems: 'center',

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

@@ -1,16 +1,17 @@
+import {z} from 'zod';
 import React from 'react';
-import * as yup from 'yup';
-import {yupResolver} from '@hookform/resolvers/yup';
+import {zodResolver} from '@hookform/resolvers/zod';
+import {View, Text, StyleSheet, Alert} from 'react-native';
 import {useForm, Controller, ControllerProps} from 'react-hook-form';
-import {View, Text, StyleSheet, Alert, SafeAreaView} from 'react-native';
 import {type NativeStackScreenProps} from '@react-navigation/native-stack';
 
-import {MainStackParamsList, MainStackRoutes} from '@infra/MainStackRoutes.routes';
-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';
+import {Computools} from '@ui-kit/icons/computools/Computools.icon';
+import {KeyboardView} from '@ui-kit/keyboard-view/keyboard-view.component';
+import {MainStackParamsList, MainStackRoutes} from '@infra/MainStackRoutes.routes';
 
 enum SignUpField {
   UserName = 'username',
@@ -25,26 +26,27 @@ interface Form {
 }
 
 const minPassLength = 8;
-const schema = yup
+const schema = z
   .object({
-    [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(localization.t('validation.passRequired'))
-      .min(minPassLength, localization.t('validation.minChars', {min: minPassLength}))
-      .oneOf([yup.ref(SignUpField.Password)], localization.t('validation.passNotMatch')),
+    [SignUpField.UserName]: z.string().min(2, localization.t('validation.usernameRequired')),
+    [SignUpField.Password]: z
+      .string({required_error: localization.t('validation.passRequired')})
+      .min(minPassLength, {message: localization.t('validation.minChars', {min: minPassLength})}),
+    [SignUpField.RepeatPassword]: z
+      .string({required_error: localization.t('validation.passRequired')})
+      .min(minPassLength, {message: localization.t('validation.minChars', {min: minPassLength})}),
   })
-  .required();
+  .required()
+  .refine(data => data[SignUpField.Password] === data[SignUpField.RepeatPassword], {
+    message: localization.t('validation.passNotMatch'),
+    path: [SignUpField.RepeatPassword],
+  });
 
 export const SignUp: React.FC<NativeStackScreenProps<MainStackParamsList, MainStackRoutes.SignUp>> = ({route, navigation}) => {
   const {username, password} = route.params || {username: '', password: ''};
   const {control, handleSubmit} = useForm<Form>({
     mode: 'onBlur',
-    resolver: yupResolver(schema),
+    resolver: zodResolver(schema),
     defaultValues: {
       [SignUpField.UserName]: username,
       [SignUpField.Password]: password,
@@ -76,7 +78,7 @@ export const SignUp: React.FC<NativeStackScreenProps<MainStackParamsList, MainSt
   );
 
   return (
-    <SafeAreaView style={styles.safeArea}>
+    <KeyboardView>
       <HeaderBack goBack={navigation.goBack} />
       <View style={styles.screen}>
         <View style={[styles.headerContainer, styles.row]}>
@@ -90,14 +92,11 @@ export const SignUp: React.FC<NativeStackScreenProps<MainStackParamsList, MainSt
         <Controller name={SignUpField.RepeatPassword} control={control} render={renderRepeatPassword} />
         <Button style={styles.row} onPress={handleSubmit(onSignUp)} text={localization.t('buttons.signup')} />
       </View>
-    </SafeAreaView>
+    </KeyboardView>
   );
 };
 
 const styles = StyleSheet.create({
-  safeArea: {
-    flex: 1,
-  },
   screen: {
     flex: 1,
     justifyContent: 'center',

package/template/src/app/ui-kit/keyboard-view/keyboard-view.component.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {Keyboard, KeyboardAvoidingView, KeyboardAvoidingViewProps, Platform, StyleSheet} from 'react-native';
+
+export const KeyboardView: React.FC<KeyboardAvoidingViewProps> = ({children, style, ...props}) => {
+  const {top} = useSafeAreaInsets();
+
+  return (
+    <KeyboardAvoidingView
+      onTouchStart={Keyboard.dismiss}
+      style={[styles.keyboardView, {paddingTop: top}, style]}
+      behavior={Platform.select({ios: 'padding', android: 'height'})}
+      {...props}>
+      {children}
+    </KeyboardAvoidingView>
+  );
+};
+
+const styles = StyleSheet.create({
+  keyboardView: {flex: 1},
+});