Feat/mentor registration

.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
- . "$(dirname "$0")/_/husky.sh"
-
-pnpm lint:fix && pnpm format && pnpm type-check
+pnpm test

package.json

@@ -19,6 +19,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@hookform/resolvers": "^5.2.2",
     "@mui/icons-material": "^5.15.18",
     "@mui/material": "^5.15.18",
     "@testing-library/dom": "^10.1.0",
@@ -29,7 +30,9 @@
     "next": "14.2.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "ts-jest": "^29.1.2"
+    "react-hook-form": "^7.70.0",
+    "ts-jest": "^29.1.2",
+    "zod": "^4.1.13"
   },
   "devDependencies": {
     "@playwright/test": "^1.57.0",

playwright-tests/tests/home.page.spec.ts

@@ -53,7 +53,7 @@ test.describe('Validate Home Page', () => {
 
     await basePage.verifyURL('/mentorship/mentor-registration');
     await basePage.verifyPageContainsText(
-      'Welcome to the MentorRegistrationPage',
+      'WCC: Registration Form for Mentors',
     );
   });
 

src/components/mentorship/MentorshipSelect.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import { TextField, MenuItem } from '@mui/material';
+import { inputStyle } from './mentorshipStyles';
+
+interface MentorshipSelectProps {
+  name: string;
+  label?: string;
+  options: string[];
+}
+
+export const MentorshipSelect = ({ name, label, options }: MentorshipSelectProps) => {
+  const { control } = useFormContext();
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      defaultValue="Not Applicable"
+      render={({ field }) => (
+        <TextField
+          {...field}
+          label={label}
+          select
+          fullWidth
+          sx={inputStyle}
+          SelectProps={{
+            displayEmpty: true,
+            renderValue: (selected: any) => {
+              if (!selected) return "Not Applicable";
+              return selected;
+            }
+          }}
+        >
+          {options.map((option) => (
+            <MenuItem key={option} value={option}>
+              {option}
+            </MenuItem>
+          ))}
+        </TextField>
+      )}
+    />
+  );
+};