feat: setup tooling to handle forms

_templates/generators/page/componentFile.ejs.t

@@ -1,8 +1,8 @@
 ---
 to: src/screens/<%= h.changeCase.pascalCase(componentName) %>.tsx
 ---
-import { Box, Text } from '$shared/ui/primitives';
-import { Screen } from '$shared/ui/Screen';
+import { Box, Text } from '$shared/uiKit/primitives';
+import { Screen } from '$shared/uiKit/Screen';
 
 type <%= h.changeCase.pascalCase(componentName) %>Props = {
   someProp?: string;

_templates/generators/page/navigationInjection.ejs.t

@@ -1,7 +1,7 @@
 ---
 inject: true
 before: inject screens before this
-to: src/core/navigation/navigation.tsx
+to: src/core/navigation/RootStack.tsx
 ---
         <Stack.Screen
           component={screens.<%= h.changeCase.pascalCase(componentName) %>}

package.json

@@ -71,6 +71,7 @@
     "postpack": "pinst --enable"
   },
   "dependencies": {
+    "@hookform/resolvers": "3.3.4",
     "@react-native-masked-view/masked-view": "0.3.0",
     "@react-navigation/native": "6.1.17",
     "@react-navigation/native-stack": "6.9.26",
@@ -106,11 +107,12 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-error-boundary": "4.0.13",
+    "react-hook-form": "7.51.3",
     "react-i18next": "14.1.0",
     "react-native": "0.73.6",
     "react-native-device-info": "10.13.1",
     "react-native-gesture-handler": "~2.14.0",
-    "react-native-keyboard-aware-scroll-view": "0.9.5",
+    "react-native-keyboard-controller": "1.11.6",
     "react-native-mmkv": "2.11.0",
     "react-native-reanimated": "~3.6.2",
     "react-native-safe-area-context": "4.8.2",

src/App.tsx

@@ -4,6 +4,7 @@ import type { ErrorInfo } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { StatusBar, StyleSheet } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { KeyboardProvider } from 'react-native-keyboard-controller';
 import {
   SafeAreaProvider,
   initialWindowMetrics,
@@ -63,17 +64,19 @@ const App = () => {
           >
             <Splashscreen>
               <SafeAreaProvider initialMetrics={initialWindowMetrics}>
-                <Sandbox>
-                  <>
-                    <RootStack />
+                <KeyboardProvider>
+                  <Sandbox>
+                    <>
+                      <RootStack />
 
-                    <Toast config={toastConfig} />
+                      <Toast config={toastConfig} />
 
-                    <AppUpdateNeeded />
+                      <AppUpdateNeeded />
 
-                    <MaintenanceMode />
-                  </>
-                </Sandbox>
+                      <MaintenanceMode />
+                    </>
+                  </Sandbox>
+                </KeyboardProvider>
               </SafeAreaProvider>
             </Splashscreen>
           </ErrorBoundary>

src/core/i18n/resources/en/homeScreen.json

@@ -5,6 +5,7 @@
   },
   "navigation": {
     "content": "Press to navigate",
+    "screenTitle": "Home",
     "title": "Navigate to another page"
   },
   "sandbox": {

src/core/i18n/resources/en/miscScreens.json

@@ -11,6 +11,34 @@
     "description": "An app update is mandatory to be able to use the application.",
     "title": "Update is required"
   },
+  "dummyForm": {
+    "form": {
+      "email": {
+        "label": "Email",
+        "placeholder": "Enter your email",
+        "validation": {
+          "email": "Please enter a valid email"
+        }
+      },
+      "firstName": {
+        "label": "First name",
+        "placeholder": "John",
+        "validation": {
+          "maxLength": "First name must be at most 20 characters long",
+          "minLength": "First name must be at least 2 characters long"
+        }
+      },
+      "lastName": {
+        "label": "Last name",
+        "placeholder": "Doe",
+        "validation": {
+          "maxLength": "Last name must be at most 30 characters long",
+          "minLength": "Last name must be at least 2 characters long"
+        }
+      }
+    },
+    "screenTitle": "Dummy form"
+  },
   "errorBoundary": {
     "cta": "Relaunch the app",
     "description": "An unknown error occured. If the error persist, contact an administrator.",

src/core/i18n/resources/en/otherScreen.json

@@ -1,7 +1,13 @@
 {
+  "form": {
+    "cta": "Navigate",
+    "title": "Form example"
+  },
+  "graphql": {
+    "cta": "Navigate",
+    "title": "API call example"
+  },
   "navigation": {
-    "backCta": "Back",
-    "tabBar": "Another page",
-    "title": "Another page"
+    "title": "Other screen"
   }
 }

src/core/i18n/resources/fr/homeScreen.json

@@ -5,6 +5,7 @@
   },
   "navigation": {
     "content": "Touchez pour naviguer",
+    "screenTitle": "Accueil",
     "title": "Naviguer vers une autre page"
   },
   "sandbox": {

src/core/i18n/resources/fr/miscScreens.json

@@ -11,6 +11,34 @@
     "description": "Une mise à jour de l'application est requise pour fonctionner.",
     "title": "Mise à jour requise"
   },
+  "dummyForm": {
+    "form": {
+      "email": {
+        "label": "Email",
+        "placeholder": "Saisir un email",
+        "validation": {
+          "email": "Il faut un email valide"
+        }
+      },
+      "firstName": {
+        "label": "Prénom",
+        "placeholder": "Martin",
+        "validation": {
+          "maxLength": "Le prénom doit faire au plus 20 caractères",
+          "minLength": "Le prénom doit faire au moins 2 caractères"
+        }
+      },
+      "lastName": {
+        "label": "Nom",
+        "placeholder": "Dupont",
+        "validation": {
+          "maxLength": "Le nom doit faire au plus 30 caractères",
+          "minLength": "Le nom doit faire au moins 2 caractères"
+        }
+      }
+    },
+    "screenTitle": "Dummy form"
+  },
   "errorBoundary": {
     "cta": "Relancer l'app",
     "description": "Une erreur est survenue. Si l'erreur persiste, contacter un administrateur.",

src/core/i18n/resources/fr/otherScreen.json

@@ -1,7 +1,13 @@
 {
+  "form": {
+    "cta": "Naviguer",
+    "title": "Formulaire"
+  },
+  "graphql": {
+    "cta": "Naviguer",
+    "title": "Example d'appel API"
+  },
   "navigation": {
-    "backCta": "Retour en arrière",
-    "tabBar": "Une autre page",
-    "title": "Une autre page"
+    "title": "Autre écran"
   }
 }

src/core/monitoring/errorMonitoring.ts

@@ -31,7 +31,7 @@ class ErrorMonitoringClass {
 
     Sentry.init({
       dsn: config.sentryDsn,
-      debug: config.env === 'development',
+      debug: false,
       tracesSampleRate: sampleRate,
       enabled: isEnabled,
       environment: config.env,

src/core/navigation/RootStack.tsx

@@ -15,13 +15,6 @@ import { screens } from './screens';
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
 
-const navigatorScreenOptions: NativeStackNavigationOptions = {
-  gestureEnabled: true,
-};
-const screenOptions: NativeStackNavigationOptions = {
-  headerShown: false,
-};
-
 export const RootStack = () => {
   const routeNameRef = useRef<string>();
   const navigationRef = useNavigationContainerRef();
@@ -58,7 +51,10 @@ export const RootStack = () => {
         <Stack.Screen
           component={screens.HomeScreen}
           name="HomeScreen"
-          options={screenOptions}
+          options={{
+            ...screenOptions,
+            title: t('navigation.screenTitle', { ns: 'homeScreen' }),
+          }}
         />
 
         <Stack.Screen
@@ -68,8 +64,23 @@ export const RootStack = () => {
           options={{ title: t('navigation.title') }}
         />
 
+        <Stack.Screen component={screens.BlogPost} name="BlogPost" />
+
+        <Stack.Screen
+          component={screens.DummyForm}
+          name="DummyForm"
+          options={{ title: t('dummyForm.screenTitle', { ns: 'miscScreens' }) }}
+        />
+
         {/* inject screens before this */}
       </Stack.Navigator>
     </NavigationContainer>
   );
 };
+
+const navigatorScreenOptions: NativeStackNavigationOptions = {
+  gestureEnabled: true,
+};
+const screenOptions: NativeStackNavigationOptions = {
+  headerShown: false,
+};

src/core/navigation/navigation.types.ts

@@ -5,6 +5,8 @@ import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 export type RootStackParamList = {
   HomeScreen: undefined;
   OtherScreen: { someProps: string } | undefined;
+  BlogPost: undefined;
+  DummyForm: undefined;
   // inject stack types before this
 };
 
@@ -18,4 +20,12 @@ export type OtherScreenNavigationProp = NativeStackNavigationProp<
   RootStackParamList,
   'OtherScreen'
 >;
+export type BlogPostScreenNavigationProp = NativeStackNavigationProp<
+  RootStackParamList,
+  'BlogPost'
+>;
+export type DummyFormScreenNavigationProp = NativeStackNavigationProp<
+  RootStackParamList,
+  'DummyForm'
+>;
 // inject page types before this

src/core/navigation/screens.ts

@@ -1,9 +1,13 @@
+import { BlogPost } from '$screens/BlogPost';
+import { DummyForm } from '$screens/DummyForm';
 import { HomeScreen } from '$screens/HomeScreen';
 import { OtherScreen } from '$screens/OtherScreen';
 // inject pages before this
 
 export const screens = {
   HomeScreen,
   OtherScreen,
+  BlogPost,
+  DummyForm,
   // inject exports before this
 };