n98: refactor: Migrate from yup to zod

cypress/component/Dialog.cy.tsx

@@ -1,9 +1,10 @@
 import { Button, Typography } from "@mui/material"
+import { FC } from "react"
 import { useToggle } from "react-use"
 
 import { Dialog } from "#components/Dialog"
 
-const SampleComponentWithDialog: React.FC = () => {
+const SampleComponentWithDialog: FC = () => {
   const [isMyDialogOpen, toggleIsMyDialogOpen] = useToggle(false)
 
   return (

cypress/e2e/budget-board-creating.cy.ts

@@ -13,7 +13,7 @@ describe("Budget board creating", () => {
     cy.contains('"clever-budgetiers" budget board already exists.').should("be.visible")
   })
 
-  it("board craeted successfully", () => {
+  it("board created successfully", () => {
     cy.authorize(testUsers.johnDoe.id)
 
     cy.visit("/boards")

cypress/e2e/budget-board-settings.cy.ts

@@ -48,8 +48,7 @@ describe("Budget board settings", () => {
       it("board default currency is edited correctly", () => {
         cy.authorize(testUsers.johnDoe.id)
 
-        cy.visit("/boards/1/records")
-        cy.get("[aria-label='Add record']").click()
+        cy.visit("/boards/1/records/add")
         cy.get("#mui-component-select-currencySlug").should("contain", "GEL ₾")
 
         cy.visit("/boards/1/settings")
@@ -61,14 +60,13 @@ describe("Budget board settings", () => {
         cy.get("td").contains("GEL ₾").should("not.exist")
         cy.get("td").contains("USD $").should("be.visible")
 
-        cy.visit("/boards/1/records")
-        cy.get("[aria-label='Add record']").click()
+        cy.visit("/boards/1/records/add")
         cy.get("#mui-component-select-currencySlug").should("contain", "USD $")
       })
     })
   })
 
-  describe.only("Budget categories settings", () => {
+  describe("Budget categories settings", () => {
     it("budget board settings are fetched and rendered correctly", () => {
       cy.authorize(testUsers.johnDoe.id)
       cy.visit("/boards/1/settings")

cypress/e2e/budget-records.cy.ts

@@ -41,7 +41,7 @@ describe("Budget records", () => {
     cy.get("[role='progressbar'][aria-label='Loading more records']").should("not.exist")
   })
 
-  it.only("is created correctly", () => {
+  it("is created correctly", () => {
     cy.authorize(testUsers.johnDoe.id)
     cy.visit("/boards/1/records")
 
@@ -51,7 +51,7 @@ describe("Budget records", () => {
     cy.get("[role='option']").contains("education").click()
     cy.get("#mui-component-select-currencySlug").click()
     cy.get("[role='option']").contains("USD $").click()
-    cy.get("p").contains("amount must be a positive number").should("be.visible")
+    cy.get("p").contains("Number must be greater than 0").should("be.visible")
     cy.get("input[name='amount']").clear().type("4.53")
     // TODO: Enter a date.
     cy.get("button").contains("Add").click()

package.json

@@ -16,7 +16,7 @@
     "react-router-dom": "6.13.0",
     "react-use": "17.4.0",
     "recharts": "2.7.1",
-    "yup": "1.2.0"
+    "zod": "3.21.4"
   },
   "devDependencies": {
     "@babel/core": "7.22.5",

src/components/Navbar/helpers.tsx

@@ -1,7 +1,8 @@
 import { Dashboard as DashboardIcon, Person as PersonIcon } from "@mui/icons-material"
+import { ReactElement } from "react"
 
 type TSection = {
-  icon: React.ReactElement
+  icon: ReactElement
   id: string
   path: string
 }

src/utils/getChildByDisplayName.ts

@@ -1,12 +1,6 @@
-import { Children, isValidElement } from "react"
+import { Children, ReactNode, isValidElement } from "react"
 
-export const getChildByDisplayName = ({
-  children,
-  displayName,
-}: {
-  children: React.ReactNode
-  displayName: string
-}) => {
+export const getChildByDisplayName = ({ children, displayName }: { children: ReactNode; displayName: string }) => {
   return Children.map(children, (child) => {
     if (!isValidElement(child)) return null
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

src/views/auth/Login/form-helpers.ts

@@ -1,20 +1,20 @@
-import * as yup from "yup"
+import { z } from "zod"
 
 export enum FieldName {
   Password = "password",
   Username = "username",
 }
 
-export const validationSchema = yup
-  .object({
-    [FieldName.Password]: yup.string().required(),
-    [FieldName.Username]: yup.string().required(),
-  })
-  .required()
+export const validationSchema = z.object({
+  [FieldName.Password]: z.string().nonempty(),
+  [FieldName.Username]: z.string().nonempty(),
+})
 
-export const defaultValues: TFormValues = {
-  password: "",
-  username: "",
-}
+export type TFormValidValues = z.infer<typeof validationSchema>
+
+export type TFormDefaultValues = TFormValidValues
 
-export type TFormValues = yup.InferType<typeof validationSchema>
+export const defaultValues: TFormValidValues = {
+  [FieldName.Password]: "",
+  [FieldName.Username]: "",
+}

src/views/auth/Login/index.tsx

@@ -1,4 +1,4 @@
-import { yupResolver } from "@hookform/resolvers/yup"
+import { zodResolver } from "@hookform/resolvers/zod"
 import { Button, TextField, Typography } from "@mui/material"
 import { FC } from "react"
 import { useForm } from "react-hook-form"
@@ -10,7 +10,7 @@ import { RowGroup } from "#components/RowGroup"
 import { apolloClient } from "#utils/apolloClient"
 
 import { Container } from "../components"
-import { FieldName, TFormValues, defaultValues, validationSchema } from "./form-helpers"
+import { FieldName, TFormDefaultValues, TFormValidValues, defaultValues, validationSchema } from "./form-helpers"
 
 export const Login: FC = () => {
   const navigate = useNavigate()
@@ -21,10 +21,10 @@ export const Login: FC = () => {
     handleSubmit,
     register,
     setError,
-  } = useForm<TFormValues>({
+  } = useForm<TFormDefaultValues, void, TFormValidValues>({
     defaultValues,
     mode: "onChange",
-    resolver: yupResolver(validationSchema),
+    resolver: zodResolver(validationSchema),
   })
 
   const onSubmit = handleSubmit(async ({ password, username }) => {