[FE][CPF-65] Add employee - personal details #77
Conversation
| @@ -0,0 +1,71 @@ | |||
| 'use client'; | |||
There was a problem hiding this comment.
when we set the convention of file and component structure/architecture I will get rid of that line of shame 😄
There was a problem hiding this comment.
As mentioned on the channel. Let's go for the interface files, hooks (logic), index and component that takes data from the hook
There was a problem hiding this comment.
I left that there because the whole page is a form and needs JS interactivity
r1skz3ro
force-pushed
the
feat/cpf-65-add-employee-layout
branch
from
cc6fcd0
to
1b26b45
Compare
r1skz3ro
force-pushed
the
feat/cpf-65-add-employee-layout
branch
from
ed22ef0
to
e6fdf0d
Compare
| <div className="w-full"> | ||
| <WorkflowTopbar /> | ||
| <main className="p-8"> | ||
| <div className="grid grid-cols-[minmax(200px,1fr),minmax(400px,1100px),1fr]"> |
There was a problem hiding this comment.
Assuming it's not a one-time use, perhaps it would be worth adding this grid cold to the theme?
| import { useEffect, useState } from 'react'; | ||
| import { useForm } from 'react-hook-form'; | ||
|
|
||
| enum PersonalDetailsFormNames { |
There was a problem hiding this comment.
We have established to use consts instead of enums
| @@ -0,0 +1,8 @@ | |||
| import { FieldValues, RegisterOptions } from 'react-hook-form'; | |||
|
|
|||
| export interface InputProps { | |||
There was a problem hiding this comment.
Should we add some props for the icon at the beginning/end of the field?
There was a problem hiding this comment.
I'll add input styles from Figma styleguide in the next PR. I didn't want to make this PR too big with all the extras.
| [PersonalDetailsFormNames.email]: string; | ||
| } | ||
|
|
||
| export default function PersonalDetails() { |
There was a problem hiding this comment.
According to our agreements about components structure, this should be moved to src/components/pages/PersonalDetails/. Then you can extract the logic to PersonalDetails.hooks.ts.
| import { Fragment } from 'react'; | ||
| import { Typography } from '@app/components/common/Typography'; | ||
|
|
||
| const Completed = () => { |
There was a problem hiding this comment.
What do you think about moving it to the utils file?
There was a problem hiding this comment.
you mean utils but in the context of sideStepper, so inside src/components/modules/SideStepper/utils?
frontend/src/store/peopleStore.ts
Outdated
| @@ -0,0 +1,27 @@ | |||
| import { AddNewPersonRouteKeys } from '@app/components/modules/EmployeeSideStepper'; | |||
There was a problem hiding this comment.
I am fine with this approach for now, though I believe as this file grows, we should split it into interfaces, utils, store and actions (potentially)
There was a problem hiding this comment.
totally agree, ive just changed that
#65