Feat/mentee registration form #157
Conversation
117Isabell
requested review from
a team and
womencodingcommunity
as code owners
117Isabell
requested review from
daiterranova,
lilyndk,
nora-weisser and
sandra395
|
@117Isabell is attempting to deploy a commit to the Women Coding Community's projects Team on Vercel. A member of the Team first needs to authorize it. |
| sx={{ | ||
| minHeight: '100vh', | ||
| display: 'flex', | ||
| backgroundColor: '#C7E7FF', |
There was a problem hiding this comment.
@stepsen89 we don't have variable for colour to make simple the change or maintainability?
Also, we could use css class instead of add all css inside of the command, I am not sure if this is the convention with react, but looks like a but hard to maintain...
There was a problem hiding this comment.
We can use our default colours, if it's either primary or one we set in the theme.
The sx is the props/convention used for MUI components
There was a problem hiding this comment.
@dricazenck @stepsen89 Thanks for the feedback. I understood the feedback now. Now I'm not sure which default color to changge to as the color in the Figma doesn't match any of the primary colors in the theme.ts
| } from '@mui/material'; | ||
| import { Controller, Control, FieldPath, FieldValues } from 'react-hook-form'; | ||
|
|
||
| interface RHFCheckboxGroupProps<T extends FieldValues> { |
There was a problem hiding this comment.
React Hook Form - can you add this as a whole name, this will be easier for readability
|
|
||
| import { Typography } from '@mui/material'; | ||
| import MenteeFormLayout from '../../components/forms/MenteeFormLayout'; | ||
| import RHFCheckboxGroup from '../../components/forms/RHFCheckboxGroup'; |
There was a problem hiding this comment.
I now understand this name is something like ReactHookForm prefix, but Isn't possible to sure something easier like CustomRadioGroup or just RadioGroup or is this the react convention?
There was a problem hiding this comment.
Agree, we can use easier names for our internal components - @117Isabell could you modify these please?
Also please import from the index file inside the components folder
There was a problem hiding this comment.
Agree, we can use easier names for our internal components - @117Isabell could you modify these please?
Also please import from the index file inside the components folder
@stepsen89 @dricazenck done with the renaming
| menteeFormDefaultValues, | ||
| menteeFormSchema, | ||
| MenteeFormData, | ||
| } from '../../schemas/menteeSchema'; |
There was a problem hiding this comment.
Should we be using complete path instead of relative path? it would cause many problem if the folder/component is moved to another place and it can break everything and it is not easy to see. But I am not sure about the convention.
There was a problem hiding this comment.
We can add the schema folder to the ts config - so we would have '@Schema' or something, similar should be done with the '@components'
There was a problem hiding this comment.
Should we be using complete path instead of relative path? it would cause many problem if the folder/component is moved to another place and it can break everything and it is not easy to see. But I am not sure about the convention.
Hey Thanks for the feedback.
Changed:1e67a07
| { value: 'other', label: 'Other' }, | ||
| ]; | ||
|
|
||
| const languages = [ |
There was a problem hiding this comment.
I guess here should be tech languages, for mentee I don't think we have this attribute.
There was a problem hiding this comment.
I guess here should be tech languages, for mentee I don't think we have this attribute.
@dricazenck Hey This is the speaking languages according to the design.
| ]; | ||
|
|
||
| const cities = [ | ||
| { value: 'new-york', label: 'New York' }, |
There was a problem hiding this comment.
For city, we only have label as text, it can be typed anything.
There was a problem hiding this comment.
For city, we only have label as text, it can be typed anything.
@dricazenck Hey Should I follow the design? It's a dropdown icon in the design.⬇️
| /> | ||
| </Grid> | ||
| <Grid item xs={12} sm={6}> | ||
| <RHFSelect |
There was a problem hiding this comment.
in this case it should be input not select, for the city.
There was a problem hiding this comment.
in this case it should be input not select, for the city.
Thanks. Replied above.
| onClick={(event) => handleMenuOpen(item.title, event)} | ||
| > | ||
| {item.title} <Icon>arrow_drop_down</Icon> | ||
| {item.title} <ExpandMore /> |
There was a problem hiding this comment.
What is "ExpandMore"?
Hi
ExpandMore is a Material-UI icon component imported from @mui/icons-material. It renders a downward chevron to indicate an expandable item.
MUI's Select automatically includes a dropdown indicator icon (typically ExpandMore) to show it's a dropdown.
| } from '@mui/material'; | ||
| import { Controller, Control, FieldPath, FieldValues } from 'react-hook-form'; | ||
|
|
||
| interface RHFCheckboxGroupProps<T extends FieldValues> { |
There was a problem hiding this comment.
Can you just call this CheckBoxGroup?
There was a problem hiding this comment.
Can you just call this CheckBoxGroup?
Thanks. Done.
- Add @schemas/* path alias to tsconfig.json for schema imports - Update @components path alias to support both @components and @components/* patterns - Configure ESLint import resolver to recognize TypeScript path aliases - Update mentee-registration form to use @components/forms/* and @schemas/* path aliases instead of relative paths
- Create index.tsx in forms directory to export all form components - Export form components from main components index - Update mentee-registration form to use @components instead of relative paths - Remove @components/* path alias from tsconfig as it's no longer needed
|
- Add @schemas/* path alias to tsconfig.json for schema imports - Update @components path alias to support both @components and @components/* patterns - Configure ESLint import resolver to recognize TypeScript path aliases - Update mentee-registration form to use @components/forms/* and @schemas/* path aliases instead of relative paths
- Create index.tsx in forms directory to export all form components - Export form components from main components index - Update mentee-registration form to use @components instead of relative paths - Remove @components/* path alias from tsconfig as it's no longer needed
…nto feat/mentee-registration-form
Move useIsMobile import to be grouped with other component imports for better import organization and consistency across: - mentorship/index.tsx - mentorship/resources.tsx - mentorship/study-groups.tsx
Update lockfile to include new dependencies: - @hookform/resolvers - react-hook-form - zod This fixes the CI failure where pnpm install was failing due to outdated lockfile.
Resolved conflicts: - Removed package-lock.json (main branch uses pnpm-lock.yaml) - Merged src/components/index.tsx with form component exports
Format description into separate paragraphs with bold text for key phrases and add clickable link to code of conduct page
|
|
@stepsen89 Hey I updated the basic infor part based on the Google form https://docs.google.com/forms/d/e/1FAIpQLScWv7ogWbVOrC0QzHxA3ECcZsAFxa6g9kfWNU_pASSonYcXXA/formResponse and the mentee json provided by Ariana |
3 participants
Description
This PR implements the mentee registration form page with reusable form components, React Hook Form integration, and Zod validation. The form includes responsive design with a blue background (#C7E7FF) and background image, matching the provided design specifications.
Additionally, this PR fixes a navigation bar issue where Material Symbols icons were rendering as text instead of icons.
Type
Related Issue
(#84)
Screenshots
Changes Made
New Features
/mentorship/mentee-registration)RHFTextField- Text input with custom stylingRHFSelect- Dropdown select with custom stylingRHFTextArea- Multi-line text input with custom stylingRHFCheckboxGroup- Checkbox group with "Other" option supportRHFRadioGroup- Radio button groupMenteeFormLayoutcomponent with responsive blue background and imageBug Fixes
Iconcomponent with MUIExpandMoreiconPull request checklist