[FE][CPF-65] Add employee - personal details

frontend/.husky/pre-commit

@@ -1,5 +1,7 @@
 # hooks start from the project root directory
+
 cd frontend
 
-yarn lint:fix && yarn format
+yarn lint:fix
+yarn format
 yarn compile

frontend/package.json

@@ -15,15 +15,18 @@
   },
   "dependencies": {
     "@headlessui/react": "^2.0.4",
+    "@hookform/error-message": "^2.0.1",
     "clsx": "^2.1.0",
     "next": "14.1.3",
     "react": "^18",
     "react-dom": "^18",
+    "react-hook-form": "^7.52.0",
     "react-easy-crop": "^5.0.7",
     "react-markdown": "^9.0.1",
     "react-tooltip": "^5.26.3",
     "remark-gfm": "^4.0.0",
-    "tailwind-merge": "^2.2.2"
+    "tailwind-merge": "^2.2.2",
+    "zustand": "^4.5.4"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.13",

frontend/src/app/(app)/(peopleFlow)/people/add-new/layout.tsx

@@ -0,0 +1,18 @@
+import { EmployeeSideStepper } from '@app/components/modules/EmployeeSideStepper';
+import { WorkflowTopbar } from '@app/components/modules/WorkflowTopbar';
+
+export default function PeopleLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <div className="flex">
+      <div className="w-full">
+        <WorkflowTopbar />
+        <main className="p-8">
+          <div className="grid grid-cols-[minmax(200px,1fr),minmax(400px,1100px),1fr]">
+            <EmployeeSideStepper />
+            <div className="col-span-1 px-8">{children}</div>
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}

frontend/src/app/(app)/(peopleFlow)/people/add-new/personal-details/page.tsx

@@ -0,0 +1,83 @@
+'use client';
+import { Button } from '@app/components/common/Button';
+import { FormProvider } from '@app/components/common/FormProvider';
+import { Input } from '@app/components/common/Input';
+import { Typography } from '@app/components/common/Typography';
+import { routes } from '@app/constants';
+import { usePeopleStore } from '@app/store/peopleStore';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+
+enum PersonalDetailsFormNames {
+  firstName = 'firstName',
+  lastName = 'lastName',
+  email = 'email',
+}
+interface PersonalDetailsForm {
+  [PersonalDetailsFormNames.firstName]: string;
+  [PersonalDetailsFormNames.lastName]: string;
+  [PersonalDetailsFormNames.email]: string;
+}
+
+export default function PersonalDetails() {
+  const form = useForm<PersonalDetailsForm>({
+    mode: 'onChange',
+    defaultValues: {
+      [PersonalDetailsFormNames.firstName]: '',
+      [PersonalDetailsFormNames.lastName]: '',
+      [PersonalDetailsFormNames.email]: '',
+    },
+  });
+  const { isDirty, isValid } = form.formState;
+  const [formValid, setFormValid] = useState(false);
+  const updateProgress = usePeopleStore((state) => state.updateProgress);
+
+  useEffect(() => {
+    setFormValid(isDirty && isValid);
+  }, [isDirty, isValid]);
+
+  // INFO: update progress in sidebar stepper
+  useEffect(() => {
+    if (formValid) updateProgress({ [routes.people.addNew.personalDetails]: 'completed' });
+    else updateProgress({ [routes.people.addNew.personalDetails]: 'inProgress' });
+  }, [formValid, updateProgress]);
+
+  return (
+    <FormProvider<PersonalDetailsForm> form={form}>
+      <Typography variant="head-m/semibold" className="mb-6">
+        Personal details
+      </Typography>
+      <div className="mb-6 grid w-full grid-cols-2 gap-x-8 gap-y-6 rounded-[20px] border border-navy-200 bg-white p-8">
+        <Input
+          name={PersonalDetailsFormNames.firstName}
+          label="First name"
+          options={{
+            minLength: { value: 2, message: 'First name must contain at least 2 characters' },
+            required: { value: true, message: 'First Name is required' },
+          }}
+        />
+        <Input
+          name={PersonalDetailsFormNames.lastName}
+          label="Last name"
+          options={{
+            minLength: { value: 2, message: 'Last name must contain at least 2 characters' },
+            required: { value: true, message: 'Last name is required' },
+          }}
+        />
+        <Input
+          name={PersonalDetailsFormNames.email}
+          label="Email"
+          options={{
+            pattern: { value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i, message: 'invalid email address' },
+            required: { value: true, message: 'Email is required' },
+          }}
+        />
+      </div>
+      <div className="flex justify-end">
+        <Button styleType="primary" variant="border" onClick={(e) => e.preventDefault()} disabled={!formValid}>
+          Continue
+        </Button>
+      </div>
+    </FormProvider>
+  );
+}

frontend/src/app/(app)/(root)/layout.tsx

@@ -0,0 +1,14 @@
+import { Sidebar } from '@app/components/modules/Sidebar';
+import { Topbar } from '@app/components/modules/Topbar';
+
+export default function AppLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <div className="flex">
+      <Sidebar />
+      <div className="w-full">
+        <Topbar />
+        <main className="p-8">{children}</main>
+      </div>
+    </div>
+  );
+}

frontend/src/app/(app)/(root)/people/page.tsx

@@ -0,0 +1,14 @@
+import { Button } from '@app/components/common/Button';
+import { routes } from '@app/constants';
+import Link from 'next/link';
+
+export default function People() {
+  return (
+    <div>
+      <h1 className="mb-10 text-lg font-semibold leading-6 text-navy-900">People</h1>
+      <Button>
+        <Link href={routes.people.addNew.personalDetails}>+ Employee</Link>
+      </Button>
+    </div>
+  );
+}

frontend/src/app/layout.tsx

@@ -0,0 +1,19 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+
+import './globals.css';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+  title: 'CPF - Career Progression Framework',
+  description: 'Career Progression Framework Application',
+};
+
+export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="en">
+      <body className={`${inter.className} h-full bg-navy-50`}>{children}</body>
+    </html>
+  );
+}

frontend/src/components/common/Button/Button.interface.ts

@@ -1,11 +1,10 @@
-import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { ButtonHTMLAttributes } from 'react';
 
-export interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   styleType?: StyleTypes;
   variant?: Variants;
   disabled?: boolean;
   className?: string;
-  children: ReactNode;
 }
 
 export type StyleTypes = 'primary' | 'natural' | 'warning';

frontend/src/components/common/Button/Button.tsx

@@ -1,6 +1,6 @@
 import { generateClassNames } from '@app/utils';
-import React from 'react';
-import { Props, StyleTypes, Variants } from './Button.interface';
+import React, { FC } from 'react';
+import { ButtonProps, StyleTypes, Variants } from './Button.interface';
 
 const types: {
   [key in StyleTypes]: {
@@ -10,38 +10,45 @@ const types: {
   primary: {
     solid: 'bg-blue-600 text-white hover:bg-blue-900',
     border:
-      'bg-white text-blue-800 border border-blue-800 hover:bg-navy-100 active:bg-white active:text-blue-900 active:border-blue-900',
-    borderless: 'px-2 bg-transparent text-blue-800 hover:bg-navy-100 active:bg-white active:text-blue-900',
+      'bg-transparent text-blue-800 border border-blue-800 hover:bg-navy-100 active:text-blue-900 active:border-blue-900',
+    borderless: 'px-2 bg-transparent text-blue-800 hover:bg-navy-100 active:text-blue-900',
     link: 'px-0 bg-transparent text-blue-800 hover:underline hover:text-blue-900 active:text-blue-900 active:no-underline',
   },
   natural: {
     solid: 'bg-navy-600 text-white hover:bg-navy-700',
-    border: 'bg-white text-navy-600 border border-navy-300 hover:bg-navy-100',
+    border: 'bg-transparent text-navy-600 border border-navy-300 hover:bg-navy-100',
     borderless: 'px-2 bg-transparent text-navy-600 hover:bg-navy-50 active:bg-navy-100',
     link: 'px-0 bg-transparent text-navy-600 hover:underline hover:text-navy-700 active:no-underline',
   },
   warning: {
     solid: 'bg-red-600 text-white hover:bg-red-700',
-    border: 'bg-white text-red-600 border border-red-600 hover:bg-navy-100 hover:text-red-700',
+    border: 'bg-transparent text-red-600 border border-red-600 hover:bg-navy-100 hover:text-red-700',
     borderless:
       'px-2 bg-transparent text-red-600 hover:bg-navy-50 hover:border-[1.5px] hover:border-red-700 hover:text-red-700',
     link: 'px-0 bg-transparent text-red-600 hover:underline hover:text-red-700 active:no-underline',
   },
 };
 
-export const Button = ({
+const disabledStyles = {
+  solid: 'bg-navy-200',
+  border: 'bg-transparent border-navy-200 border',
+  borderless: 'px-2 border-none',
+  link: 'px-0 border-none',
+};
+
+export const Button: FC<ButtonProps> = ({
   styleType = 'primary',
   variant = 'solid',
   disabled = false,
   className,
   children,
   ...props
-}: Props) => {
+}) => {
   const buttonClass = generateClassNames(
     'h-11 px-5 items-center justify-center rounded-full transition duration-200',
     {
       [types[styleType][variant]]: !disabled,
-      'bg-navy-200 border-navy-200 text-navy-300 cursor-not-allowed': disabled,
+      [`text-navy-300 cursor-not-allowed ${disabledStyles[variant]}`]: disabled,
     },
     className,
   );

frontend/src/components/common/Button/index.ts

@@ -1,2 +1 @@
 export { Button } from './Button';
-export type { StyleTypes, Variants, Props } from './Button.interface';

frontend/src/components/common/FormProvider/FormProvider.tsx

@@ -0,0 +1,15 @@
+import { PropsWithChildren } from 'react';
+import { FieldValues, FormProvider as RHFFormProvider, UseFormReturn } from 'react-hook-form';
+
+interface Props<T extends FieldValues> extends PropsWithChildren {
+  form: UseFormReturn<T>;
+  onSubmit?: (values: T) => void;
+}
+
+export const FormProvider = <T extends FieldValues>({ form, onSubmit, children }: Props<T>) => {
+  return (
+    <RHFFormProvider {...form}>
+      <form {...(onSubmit && { onSubmit: form.handleSubmit(onSubmit) })}>{children}</form>
+    </RHFFormProvider>
+  );
+};

frontend/src/components/common/FormProvider/index.ts

@@ -0,0 +1 @@
+export { FormProvider } from './FormProvider';

frontend/src/components/common/Input/Input.interface.ts

@@ -0,0 +1,8 @@
+import { FieldValues, RegisterOptions } from 'react-hook-form';
+
+export interface InputProps {
+  label?: string;
+  placeholder?: string;
+  name: string;
+  options?: RegisterOptions<FieldValues, string>;
+}

frontend/src/components/common/Input/Input.tsx

@@ -0,0 +1,43 @@
+import { FC, memo } from 'react';
+import { InputProps } from './Input.interface';
+import { useFormContext } from 'react-hook-form';
+import { generateClassNames } from '@app/utils';
+import { ErrorMessage } from '@hookform/error-message';
+import { CheckMarkIcon } from '@app/static/icons/AlertTriangleIcon';
+
+export const Input: FC<InputProps> = memo(({ label, name, placeholder, options = {}, ...otherProps }) => {
+  const { formState, register, getFieldState } = useFormContext();
+  const error = getFieldState(name).error;
+
+  return (
+    <div className="flex flex-col gap-y-3">
+      {label && (
+        <label className="text-navy-900" htmlFor={`input-${name}`}>
+          {label}
+        </label>
+      )}
+      <input
+        className={generateClassNames(
+          'outline-black h-12 w-full rounded-xl border border-navy-200 px-4 outline-none focus:border-navy-700',
+          { 'border-red-600 focus:border-red-600': !!error },
+        )}
+        placeholder={placeholder}
+        id={`input-${name}`}
+        {...register(name, options)}
+        {...otherProps}
+      />
+      <ErrorMessage
+        errors={formState.errors}
+        name={name}
+        render={({ message }) => (
+          <div className="flex items-center gap-x-2">
+            <CheckMarkIcon />
+            <div className="text-sm text-red-600 first-letter:uppercase">{message}</div>
+          </div>
+        )}
+      />
+    </div>
+  );
+});
+
+Input.displayName = 'Input';

frontend/src/components/common/Input/index.ts

@@ -0,0 +1,2 @@
+export { Input } from './Input';
+export type { InputProps } from './Input.interface';

frontend/src/components/common/Typography/Typography.tsx

@@ -64,7 +64,7 @@ export const Typography = ({
     case 'h5':
       return <h5 className={classnames}>{children}</h5>;
     case 'h6':
-      return <p className={classnames}>{children}</p>;
+      return <h6 className={classnames}>{children}</h6>;
     case 'p':
     default:
       return <p className={classnames}>{children}</p>;

frontend/src/components/modules/EmployeeSideStepper/EmployeeSideStepper.const.ts

@@ -0,0 +1,8 @@
+import { routes } from '@app/constants';
+import { Step } from '../SideStepper';
+import { AddNewPersonRouteKeys } from './EmployeeSideStepper.interface';
+
+export const addEmployeeInitialSteps: Step<AddNewPersonRouteKeys>[] = [
+  { label: '1. Personal details', state: 'notStarted', current: true, href: routes.people.addNew.personalDetails },
+  { label: '2. Main ladder', state: 'notStarted', current: false, href: routes.people.addNew.mainLadder },
+];