MythEclipse/imphnen-frontend-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: login example

Browse Source
This commit is contained in:
Maulana Sodiqin
2025-04-03 12:21:10 +07:00
parent c05061becf
commit a6fea630a4
38 changed files with 942 additions and 755 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env
+1
View File
@@ -0,0 +1 @@
VITE_API_URL=https://api.imphnen.dev/v1
apps/gacha/src/app/_components/form/modal-form-forgot-password.tsx
+9 -10
View File
@@ -1,11 +1,11 @@
import { Button } from '@imphnen-frontend-service/ui/atoms';
import {
InputForm,
InputField,
Modal,
Stepper,
} from '@imphnen-frontend-service/ui/molecules';
import { useQueryState } from '../../../hooks/use-query-state';
import { useQueryState } from '@imphnen-frontend-service/utils';
import { Fragment } from 'react/jsx-runtime';
interface IModalFormForgotPasswordProps {
isOpen: boolean;
onClose: () => void;
@@ -62,7 +62,7 @@ interface IStepOneProps {
const StepOne = ({ nextStep, onClose }: IStepOneProps) => (
<>
<InputForm
<InputField
label="Email"
placeholder="Masukkan Email yang Terdaftar"
type="email"
@@ -86,9 +86,8 @@ interface IStepTwoProps {
}
const StepTwo = ({ nextStep, prevStep }: IStepTwoProps) => (
<>
{/* TODO: Change component using OTP Input */}
<InputForm
<Fragment>
<InputField
label="Kode OTP"
placeholder="Masukkan Kode OTP"
type="text"
@@ -108,7 +107,7 @@ const StepTwo = ({ nextStep, prevStep }: IStepTwoProps) => (
Reset Password
</Button>
</div>
</>
</Fragment>
);
interface IStepThreeProps {
@@ -118,14 +117,14 @@ interface IStepThreeProps {
const StepThree = ({ onClose, resetStep }: IStepThreeProps) => (
<>
<InputForm
<InputField
label="Password Baru"
placeholder="Masukkan Password Baru"
type="password"
size="lg"
className="w-full"
/>
<InputForm
<InputField
label="Ulang Password"
placeholder="Masukkan Ulang Password"
type="password"
apps/gacha/src/app/_components/form/modal-form-login.tsx
+42 -32
View File
@@ -1,6 +1,8 @@
import { Button } from '@imphnen-frontend-service/ui/atoms';
import { InputForm, Modal } from '@imphnen-frontend-service/ui/molecules';
import { Modal } from '@imphnen-frontend-service/ui/molecules';
import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
import { Link } from 'react-router-dom';
import { useLogin } from '../../_hooks/use-login';
interface IModalFormLogin {
isOpen: boolean;
@@ -13,6 +15,8 @@ const ModalFormLogin = ({
onClose,
onForgotPassword,
}: IModalFormLogin) => {
const { form, onSubmit } = useLogin();
return (
<Modal
className="py-[45px] min-w-[400px] lg:min-w-[455px] px-7"
@@ -25,38 +29,44 @@ const ModalFormLogin = ({
Login
</h1>
</Modal.Header>
<Modal.Content className="space-y-4">
<InputForm
label="Email"
placeholder="Masukkan Email"
type="email"
size="lg"
className="w-full"
/>
<InputForm
label="Password"
placeholder="Masukkan Password"
type="password"
size="lg"
className="w-full"
/>
<h1 className="text-end text-primary-500 text-xl font-medium">
<Button variant="text" onClick={onForgotPassword}>
Lupa Password?
<Modal.Content>
<form className="space-y-4" onSubmit={onSubmit}>
<ControlledInputField
control={form.control}
label="Email"
placeholder="Masukkan Email"
type="email"
name="email"
size="lg"
className="w-full"
/>
<ControlledInputField
control={form.control}
label="Password"
placeholder="Masukkan Password"
type="password"
name="password"
size="lg"
className="w-full"
/>
<h1 className="text-end text-primary-500 text-xl font-medium">
<Button variant="text" onClick={onForgotPassword}>
Lupa Password?
</Button>
</h1>
<Button type="submit" size="md" className="w-full">
Login
</Button>
</h1>
<Button size="md" className="w-full">
Login
</Button>
<div className="flex justify-center gap-2 pt-2.5 font-medium">
<p className="text-neutral-500">Belum punya akun?</p>
<Link
className="text-primary-500 hover:text-primary-600"
to="/register"
>
Daftar
</Link>
</div>
<div className="flex justify-center gap-2 pt-2.5 font-medium">
<p className="text-neutral-500">Belum punya akun?</p>
<Link
className="text-primary-500 hover:text-primary-600"
to="/register"
>
Daftar
</Link>
</div>
</form>
</Modal.Content>
</Modal>
);
apps/gacha/src/app/_components/form/modal-form-register.tsx
+8 -8
View File
@@ -1,6 +1,6 @@
import { Button } from '@imphnen-frontend-service/ui/atoms';
import { InputForm, Modal } from '@imphnen-frontend-service/ui/molecules';
import { useQueryState } from '../../../hooks/use-query-state';
import { InputField, Modal } from '@imphnen-frontend-service/ui/molecules';
import { useQueryState } from '@imphnen-frontend-service/utils';
interface IModalFormRegisterProps {
isOpen: boolean;
@@ -54,28 +54,28 @@ interface IStepOneProps {
const StepOne = ({ nextStep, onClose }: IStepOneProps) => (
<>
<InputForm
<InputField
label="Nama Lengkap"
placeholder="Masukkan Nama Lengkap"
type="text"
size="lg"
className="w-full"
/>
<InputForm
<InputField
label="Email"
placeholder="Masukkan Email Anda"
type="email"
size="lg"
className="w-full"
/>
<InputForm
<InputField
label="Password"
placeholder="Masukkan Password"
type="password"
size="lg"
className="w-full"
/>
<InputForm
<InputField
label="Ulangi Password"
placeholder="Masukkan Ulang Password"
type="password"
@@ -95,14 +95,14 @@ interface IStepTwoProps {
const StepTwo = ({ nextStep, prevStep }: IStepTwoProps) => (
<>
<InputForm
<InputField
label="Nomor Telepon"
placeholder="Masukkan Nomor Telepon Aktif"
type="text"
size="lg"
className="w-full"
/>
<InputForm
<InputField
label="Alamat Pengiriman"
placeholder="Masukkan Alamat Pengiriman"
type="text"
apps/gacha/src/app/_components/item/gacha-item.tsx
+29
View File
@@ -0,0 +1,29 @@
import { cn } from '@imphnen-frontend-service/utils';
import { FC, ReactElement } from 'react';
type TGachaItem = {
src: string;
label: string;
className?: string;
};
export const GachaItem: FC<TGachaItem> = ({
src,
label,
className,
}): ReactElement => {
return (
<div className="snap-center flex-auto justify-center items-center flex flex-col min-w-full overflow-hidden">
<div className="max-h-[180px] md:max-h-[270px] md:max-w-[500px] mb-2 md:mb-5 flex flex-1 justify-center items-center">
<img
src={src}
alt="Banner"
width={255}
height={255}
className={cn('h-[150px] md:h-[255px] object-contain', className)}
/>
</div>
<p className="font-semibold text-center md:text-p2">{label}</p>
</div>
);
};
apps/gacha/src/app/_hooks/use-login.ts
+26
View File
@@ -0,0 +1,26 @@
import { useForm } from 'react-hook-form';
import {
authLoginSchema,
TLoginRequest,
usePostLogin,
} from '@imphnen-frontend-service/service';
import { zodResolver } from '@hookform/resolvers/zod';
export const useLogin = () => {
const postLogin = usePostLogin();
const form = useForm<TLoginRequest>({
resolver: zodResolver(authLoginSchema),
mode: 'all',
});
const onSubmit = form.handleSubmit((data) => {
postLogin.mutate(data, {
onSuccess: () => console.log('Success Login'),
});
});
return {
form,
onSubmit,
};
};
apps/gacha/src/app/page.tsx
+1 -28
View File
@@ -1,37 +1,10 @@
import { ArrowDownOutlined } from '@ant-design/icons';
import { Button } from '@imphnen-frontend-service/ui/atoms';
import { cn } from '@imphnen-frontend-service/utils';
import { FC, Fragment, ReactElement, useState } from 'react';
import ModalFormForgotPassword from './_components/form/modal-form-forgot-password';
import ModalFormLogin from './_components/form/modal-form-login';
import ModalFormRegister from './_components/form/modal-form-register';
interface GachaItemProps {
src: string;
label: string;
className?: string;
}
const GachaItem: FC<GachaItemProps> = ({
src,
label,
className,
}): ReactElement => {
return (
<div className="snap-center flex-auto justify-center items-center flex flex-col min-w-full overflow-hidden">
<div className="max-h-[180px] md:max-h-[270px] md:max-w-[500px] mb-2 md:mb-5 flex flex-1 justify-center items-center">
<img
src={src}
alt="Banner"
width={255}
height={255}
className={cn('h-[150px] md:h-[255px] object-contain', className)}
/>
</div>
<p className="font-semibold text-center md:text-p2">{label}</p>
</div>
);
};
import { GachaItem } from './_components/item/gacha-item';
export const Components: FC = (): ReactElement => {
const [showModalForgotPassword, setShowModalForgotPassword] = useState(false);
libs/service/src/api/auth/index.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { api } from '@imphnen-frontend-service/utils';
import { api } from '../';
import {
TLoginRequest,
TLoginResponse,
libs/service/src/api/index.ts
+8
View File
@@ -1,3 +1,11 @@
import axios, { AxiosRequestConfig } from 'axios';
export * from './auth';
export * from './gacha';
export * from './users';
const config: AxiosRequestConfig = {
baseURL: import.meta.env.VITE_API_URL,
};
export const api = axios.create(config);
libs/service/src/hooks/auth/index.ts
+7
View File
@@ -6,6 +6,8 @@ import {
TRegisterRequest,
TVerifyEmailRequest,
} from '../../types/auth';
import { SessionToken, SessionUser } from '@imphnen-frontend-service/utils';
import { TResponseError, TResponseMessage } from '../../types/common';
export const usePostLogin = (): UseMutationResult<
@@ -17,6 +19,11 @@ export const usePostLogin = (): UseMutationResult<
return useMutation({
mutationKey: ['post-login'],
mutationFn: async (payload) => await postLogin(payload),
onSuccess: (res) => {
SessionUser.set(res.data.user);
SessionToken.set(res.data.token);
window.location.reload();
},
});
};
libs/service/src/index.ts
+1
View File
@@ -1,3 +1,4 @@
export * from './api';
export * from './hooks';
export * from './types';
export * from './schemas';
libs/service/src/schemas/auth/index.ts
+9
View File
@@ -0,0 +1,9 @@
import { z } from 'zod';
export const authLoginSchema = z.object({
email: z
.string()
.min(1, 'Email cannot be empty')
.email('Email must be valid'),
password: z.string().min(1, 'Password cannot be empty'),
});
libs/service/src/schemas/index.ts
+1
View File
@@ -0,0 +1 @@
export * from './auth';
libs/service/src/types/auth/index.ts
+3 -5
View File
@@ -1,3 +1,5 @@
import { TUserItem } from '../users';
export type TLoginRequest = {
email: string;
password: string;
@@ -9,11 +11,7 @@ export type TLoginResponse = {
access_token: string;
refresh_token: string;
};
user: {
fullname: string;
email: string;
is_active: boolean;
};
user: TUserItem;
};
};
libs/service/src/types/index.ts
+2
View File
@@ -1,3 +1,5 @@
export * from './auth';
export * from './gacha';
export * from './users';
export * from './roles';
export * from './permissions';
libs/service/src/types/permissions/index.ts
+6
View File
@@ -0,0 +1,6 @@
export type TPermissionItem = {
id: string;
name: string;
created_at: string;
updated_at: string;
};
libs/service/src/types/roles/index.ts
+9
View File
@@ -0,0 +1,9 @@
import { TPermissionItem } from '../permissions';
export type TRoleItem = {
id: string;
name: string;
created_at: string;
updated_at: string;
permissions: TPermissionItem[];
};
libs/service/src/types/users/index.ts
+19 -1
View File
@@ -1 +1,19 @@
export {};
import { TRoleItem } from '../roles';
export type TUserItem = {
id: string;
avatar: string;
birthdate: string;
email: string;
fullname: string;
gender: string;
identity_number: string;
is_active: boolean;
is_profile_completed: boolean;
phone_number: string;
referral_code: string;
referred_by: string;
religion: string;
student_type: string;
role: TRoleItem;
};
libs/ui/src/molecules/index.ts
+1 -1
View File
@@ -1,6 +1,6 @@
export * from './forgot-step';
export * from './otp-form';
export * from './input-form';
export * from './input-field';
export * from './pagination';
export * from './modal/modal';
export * from './stepper';
libs/ui/src/molecules/input-field/index.ts
+1
View File
@@ -0,0 +1 @@
export * from './input-field';
libs/ui/src/molecules/input-form/input-form.spec.tsx → libs/ui/src/molecules/input-field/input-field.spec.tsx
+3 -3
View File
@@ -1,9 +1,9 @@
import { render, screen } from '@testing-library/react';
import InputForm from './input-form';
import { InputField } from './input-field';
describe('InputForm Component', () => {
it('renders correctly with disabled prop', () => {
render(<InputForm label="Test Label" disabled={true} />);
render(<InputField label="Test Label" disabled={true} />);
const input = screen.getByLabelText('Test Label');
expect(input).toBeDisabled();
@@ -11,7 +11,7 @@ describe('InputForm Component', () => {
});
it('renders correctly without disabled prop', () => {
render(<InputForm label="Test Label" disabled={false} />);
render(<InputField label="Test Label" disabled={false} />);
const input = screen.getByLabelText('Test Label');
expect(input).not.toBeDisabled();
libs/ui/src/molecules/input-form/input-form.stories.tsx → libs/ui/src/molecules/input-field/input-field.stories.tsx
+3 -3
View File
@@ -1,9 +1,9 @@
import type { Meta, StoryObj } from '@storybook/react';
import { InputForm } from './input-form';
import { InputField } from './input-field';
const meta = {
title: 'Molecules/Input Form',
component: InputForm,
component: InputField,
parameters: {
layout: 'centered',
docs: {
@@ -27,7 +27,7 @@ Cek dan inspect element pada story With HtmlFor untuk melihat hasilnya.
},
},
tags: ['autodocs'],
} satisfies Meta<typeof InputForm>;
} satisfies Meta<typeof InputField>;
export default meta;
type Story = StoryObj<typeof meta>;
libs/ui/src/molecules/input-form/input-form.tsx → libs/ui/src/molecules/input-field/input-field.tsx
+4 -8
View File
@@ -7,10 +7,9 @@ import {
import { Input } from '../../atoms';
import { cn } from '@imphnen-frontend-service/utils';
type TInputType = 'text' | 'email' | 'password' | 'file';
type TInputSize = 'sm' | 'md' | 'lg';
type TInputFormProps = Omit<
export type TInputType = 'text' | 'email' | 'password' | 'file';
export type TInputSize = 'sm' | 'md' | 'lg';
export type TInputFieldProps = Omit<
DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
'size' | 'type'
> & {
@@ -19,7 +18,6 @@ type TInputFormProps = Omit<
size?: TInputSize;
error?: string;
disabled?: boolean;
helperText?: string;
htmlFor?: string;
};
@@ -39,7 +37,7 @@ const sizeClasses: Record<TInputSize, { label: string; helperText: string }> = {
},
};
export const InputForm: FC<TInputFormProps> = ({
export const InputField: FC<TInputFieldProps> = ({
label,
placeholder,
type = 'text',
@@ -88,5 +86,3 @@ export const InputForm: FC<TInputFormProps> = ({
</div>
);
};
export default InputForm;
libs/ui/src/molecules/input-form/index.ts
-1
View File
@@ -1 +0,0 @@
export * from './input-form';
libs/ui/src/organisms/controlled-field/controlled-input-field.tsx
+21
View File
@@ -0,0 +1,21 @@
import {
InputField,
TInputFieldProps,
} from '@imphnen-frontend-service/ui/molecules';
import {
FieldValues,
useController,
UseControllerProps,
} from 'react-hook-form';
export type TControlledInputFieldProps<T extends FieldValues> =
UseControllerProps<T> & TInputFieldProps;
export const ControlledInputField = <T extends FieldValues>(
props: TControlledInputFieldProps<T>
) => {
const { field, fieldState } = useController<T>(props);
return (
<InputField error={fieldState.error?.message} {...{ ...props, ...field }} />
);
};
libs/ui/src/organisms/controlled-field/index.ts
+1
View File
@@ -0,0 +1 @@
export * from './controlled-input-field';
libs/ui/src/organisms/index.ts
+6 -5
View File
@@ -1,6 +1,7 @@
export * from './navbar';
export * from "./modals-gacha";
export * from "./auth-banner";
export * from './backoffice-sidebar'
export * from './datatable'
export * from './filter'
export * from './modals-gacha';
export * from './auth-banner';
export * from './backoffice-sidebar';
export * from './datatable';
export * from './filter';
export * from './controlled-field';
libs/ui/src/organisms/navbar/navbar.spec.tsx
+2 -2
View File
@@ -163,7 +163,7 @@ describe('Navbar', () => {
}
});
it('has correct ARIA role for navigation', () => {
it('has correct ARIA role for nav', () => {
const { container }: RenderResult = render(
<BrowserRouter>
<Navbar />
@@ -171,6 +171,6 @@ describe('Navbar', () => {
);
const header: HTMLElement | null = container.querySelector('header');
expect(header).toHaveAttribute('role', 'navigation');
expect(header).toHaveAttribute('role', 'nav');
});
});
libs/ui/src/organisms/navbar/navbar.tsx
+33 -20
View File
@@ -1,16 +1,18 @@
import { MenuOutlined } from '@ant-design/icons';
import { Button } from '@imphnen-frontend-service/ui/atoms';
import { FC, ReactElement, useState } from 'react';
import { Link } from 'react-router-dom';
import { Button } from '../../atoms/button';
import { useSession } from '@imphnen-frontend-service/utils';
export const Navbar: FC = (): ReactElement => {
const [isDropdownOpen, setDropdownOpen] = useState(false);
const { session, signOut, isAuthenticated } = useSession();
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
return (
<div className="bg-primary-50 w-full px-[32px] pt-[32px] md:px-[60px] md:pt-[60px] lg:px-[80px] sticky top-0 z-50">
<header
className="bg-white shadow-lg rounded-lg min-h-[47px] max-h-[47px] md:min-h-[60px] md:max-h-[60px] lg:min-h-[71px] lg:max-h-[71px] flex justify-between w-full max-w-[1280px] xl:mx-auto"
role="navigation"
role="nav"
>
<div className="flex w-full items-center justify-between p-4 md:px-[32px] md:py-[10px]">
<div className="flex items-center">
@@ -40,20 +42,27 @@ export const Navbar: FC = (): ReactElement => {
<Link to="#">Merch Gacha</Link>
</Button>
</li>
<li>
<Button
size="md"
className="lg:text-[19px] lg:max-h-[44px] text-neutral-50 hover:text-neutral-200 transition-colors"
>
<Link to="/login">Login</Link>
</Button>
</li>
{!isAuthenticated ? (
<li>
<Button>Login</Button>
</li>
) : (
<li className="flex gap-x-4">
<span className="text-lg">{session.user?.fullname}</span>
<div
onClick={signOut}
className="text-lg text-red-500 font-bold"
>
Logout
</div>
</li>
)}
</ul>
<button
className={`md:hidden duration-200 ${
isDropdownOpen ? 'transform rotate-90' : ''
}`}
onClick={() => setDropdownOpen(!isDropdownOpen)}
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
>
<MenuOutlined style={{ color: '#1a8ce6' }} />
</button>
@@ -77,14 +86,18 @@ export const Navbar: FC = (): ReactElement => {
Merch Gacha
</Link>
</li>
<li>
<Link
to="#"
className="block text-gray-600 transition-colors px-4 py-2 text-center font-semibold"
>
Login
</Link>
</li>
{!isAuthenticated ? (
<li>
<Link
to="#"
className="block text-gray-600 transition-colors px-4 py-2 text-center font-semibold"
>
Login
</Link>
</li>
) : (
<li>{session.user?.fullname}</li>
)}
</ul>
</div>
)}
libs/utils/src/axios/api.ts
-7
View File
@@ -1,7 +0,0 @@
import axios, { AxiosRequestConfig } from 'axios';
const config: AxiosRequestConfig = {
baseURL: import.meta.env.VITE_API_URL,
};
export const api = axios.create(config);
libs/utils/src/axios/index.ts
-1
View File
@@ -1 +0,0 @@
export * from './api';
libs/utils/src/hooks/index.ts
+2
View File
@@ -0,0 +1,2 @@
export * from './use-query-state';
export * from './use-session';
apps/gacha/src/hooks/use-query-state.ts → libs/utils/src/hooks/use-query-state.ts
View File
libs/utils/src/hooks/use-session.ts
+22
View File
@@ -0,0 +1,22 @@
import { SessionToken, SessionUser } from '../local-storage';
export const useSession = () => {
const session = {
user: SessionUser.get(),
token: SessionToken.get(),
};
const isAuthenticated = !!session.token?.access_token;
const signOut = () => {
SessionUser.remove();
SessionToken.remove();
window.location.reload();
};
return {
isAuthenticated,
session,
signOut,
};
};
libs/utils/src/index.ts
+2 -1
View File
@@ -1,4 +1,5 @@
export * from './react-query';
export * from './react-router';
export * from './tailwind-merge';
export * from './axios';
export * from './hooks';
export * from './local-storage';
libs/utils/src/local-storage/index.ts
+60
View File
@@ -0,0 +1,60 @@
export type TPermissionItem = {
id: string;
name: string;
created_at: string;
updated_at: string;
};
type TRoleItem = {
id: string;
name: string;
created_at: string;
updated_at: string;
permissions: TPermissionItem[];
};
type TUserItem = {
id: string;
avatar: string;
birthdate: string;
email: string;
fullname: string;
gender: string;
identity_number: string;
is_active: boolean;
is_profile_completed: boolean;
phone_number: string;
referral_code: string;
referred_by: string;
religion: string;
student_type: string;
role: TRoleItem;
};
export const SessionUser = {
set: (val: TUserItem) => localStorage.setItem('users', JSON.stringify(val)),
get: (): TUserItem | undefined => {
const users = localStorage.getItem('users');
return users ? JSON.parse(users) : undefined;
},
remove: () => localStorage.removeItem('users'),
};
export const SessionToken = {
set: (val: { access_token: string; refresh_token: string }) => {
localStorage.setItem('access_token', val.access_token);
localStorage.setItem('refresh_token', val.refresh_token);
},
get: ():
| { access_token?: string | null; refresh_token?: string | null }
| undefined => {
return {
access_token: localStorage.getItem('access_token'),
refresh_token: localStorage.getItem('refresh_token'),
};
},
remove: () => {
localStorage.removeItem('access_token');
localStorage.removeItem('refresh_token');
},
};
package-lock.json
Generated
+591 -616
View File
File diff suppressed because it is too large Load Diff
package.json
+8 -2
View File
@@ -19,14 +19,19 @@
"private": true,
"dependencies": {
"@ant-design/icons": "^5.6.1",
"@hookform/resolvers": "^5.0.1",
"@tanstack/react-query": "^5.67.3",
"@tanstack/react-store": "^0.7.0",
"@tanstack/react-table": "^8.21.2",
"axios": "^1.8.3",
"clsx": "^2.1.1",
"js-cookie": "^3.0.5",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-hook-form": "^7.55.0",
"react-router-dom": "^7.3.0",
"tailwind-merge": "^3.0.2"
"tailwind-merge": "^3.0.2",
"zod": "^3.24.2"
},
"devDependencies": {
"@babel/core": "^7.14.5",
@@ -48,7 +53,7 @@
"@storybook/test-runner": "^0.19.0",
"@storybook/testing-library": "^0.2.2",
"@swc-node/register": "~1.9.1",
"@swc/cli": "~0.3.12",
"@swc/cli": "^0.6.0",
"@swc/core": "~1.5.7",
"@swc/helpers": "~0.5.11",
"@tailwindcss/postcss": "^4.0.13",
@@ -56,6 +61,7 @@
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^16.1.0",
"@testing-library/user-event": "^14.6.1",
"@types/js-cookie": "^3.0.6",
"@types/node": "18.16.9",
"@types/react": "19.0.0",
"@types/react-dom": "19.0.0",