fix: build schema

Author: SKairinos

src/components/form/EmailField.tsx

@@ -5,7 +5,10 @@ import { string as YupString } from "yup"
 
 import TextField, { type TextFieldProps } from "./TextField"
 
-export type EmailFieldProps = Omit<TextFieldProps, "type" | "name" | "schema"> &
+export type EmailFieldProps = Omit<
+  TextFieldProps,
+  "type" | "name" | "baseSchema" | "allowedChars"
+> &
   Partial<Pick<TextFieldProps, "name">>
 
 const EmailField: FC<EmailFieldProps> = ({
@@ -18,7 +21,7 @@ const EmailField: FC<EmailFieldProps> = ({
   return (
     <TextField
       type="email"
-      schema={YupString().email()}
+      baseSchema={YupString().email()}
       name={name}
       label={label}
       placeholder={placeholder}

src/components/form/FirstNameField.tsx

@@ -3,24 +3,20 @@ import { InputAdornment } from "@mui/material"
 import type { FC } from "react"
 
 import TextField, { type TextFieldProps } from "./TextField"
-import { firstNameSchema } from "../../schemas/user"
 
-export type FirstNameFieldProps = Omit<
-  TextFieldProps,
-  "type" | "name" | "schema"
-> &
+export type FirstNameFieldProps = Omit<TextFieldProps, "type" | "name"> &
   Partial<Pick<TextFieldProps, "name">>
 
 const FirstNameField: FC<FirstNameFieldProps> = ({
   name = "first_name",
   label = "First name",
   placeholder = "Enter your first name",
+  maxChars = 150,
   InputProps = {},
   ...otherTextFieldProps
 }) => {
   return (
     <TextField
-      schema={firstNameSchema}
       name={name}
       label={label}
       placeholder={placeholder}

src/components/form/OtpField.tsx

@@ -1,11 +1,10 @@
 import { type FC } from "react"
-import { string as YupString } from "yup"
 
 import TextField, { type TextFieldProps } from "./TextField"
 
 export type OtpFieldProps = Omit<
   TextFieldProps,
-  "name" | "schema" | "required"
+  "name" | "schema" | "required" | "minChars" | "maxChars" | "allowedChars"
 > &
   Partial<Pick<TextFieldProps, "name">>
 
@@ -18,7 +17,9 @@ const OtpField: FC<OtpFieldProps> = ({
   <TextField
     name={name}
     label={label}
-    schema={YupString().matches(/^[0-9]{6}$/, "Must be exactly 6 digits.")}
+    allowedChars="0-9"
+    minChars={6}
+    maxChars={6}
     placeholder={placeholder}
     required
     {...otherTextFieldProps}

src/components/form/PasswordField.tsx

@@ -4,16 +4,15 @@ import {
 } from "@mui/icons-material"
 import { IconButton, InputAdornment } from "@mui/material"
 import { useState, type FC } from "react"
-import { string as YupString } from "yup"
 
 import RepeatField, { type RepeatFieldProps } from "./RepeatField"
 import TextField, { type TextFieldProps } from "./TextField"
 
 export type PasswordFieldProps = Omit<
   TextFieldProps,
-  "type" | "name" | "schema" | "autoComplete"
+  "type" | "name" | "autoComplete"
 > &
-  Partial<Pick<TextFieldProps, "name" | "schema">> & {
+  Partial<Pick<TextFieldProps, "name">> & {
     withRepeatField?: boolean
     repeatFieldProps?: Omit<RepeatFieldProps, "name" | "type">
   }
@@ -22,7 +21,6 @@ const PasswordField: FC<PasswordFieldProps> = ({
   name = "password",
   label = "Password",
   placeholder = "Enter your password",
-  schema = YupString(),
   InputProps = {},
   withRepeatField = false,
   repeatFieldProps = {},
@@ -51,7 +49,6 @@ const PasswordField: FC<PasswordFieldProps> = ({
         type={type}
         name={name}
         label={label}
-        schema={schema}
         placeholder={placeholder}
         InputProps={{ endAdornment, ...InputProps }}
         {...otherTextFieldProps}

src/components/form/TextField.tsx

@@ -5,11 +5,10 @@ import {
 import { Field, type FieldConfig, type FieldProps } from "formik"
 import { type FC, useState, useEffect } from "react"
 import {
-  type ArraySchema,
   type StringSchema,
   type ValidateOptions,
   array as YupArray,
-  type Schema,
+  string as YupString,
 } from "yup"
 
 import { schemaToFieldValidator } from "../../utils/form"
@@ -26,65 +25,104 @@ export type TextFieldProps = Omit<
   | "helperText"
 > & {
   name: string
-  schema: StringSchema
+  baseSchema?: StringSchema
   validateOptions?: ValidateOptions
   dirty?: boolean
   split?: string | RegExp
   unique?: boolean
   uniqueCaseInsensitive?: boolean
+  allowedChars?: string
+  minChars?: number
+  maxChars?: number
+  minValues?: number
+  maxValues?: number
 }
 
 // https://formik.org/docs/examples/with-material-ui
 const TextField: FC<TextFieldProps> = ({
   id,
   name,
-  schema,
+  baseSchema = YupString(),
   type = "text",
   required = false,
   dirty = false,
   unique = false,
   uniqueCaseInsensitive = false,
+  allowedChars,
+  minChars,
+  maxChars = 1000,
   split,
+  minValues,
+  maxValues = 1000,
   validateOptions,
   ...otherTextFieldProps
 }) => {
   const [initialValue, setInitialValue] = useState<string | string[]>("")
 
   const dotPath = name.split(".")
 
-  let _schema: Schema = schema
-  if (split) {
-    _schema = YupArray().of(_schema)
-    if (unique || uniqueCaseInsensitive) {
-      _schema = _schema.test({
+  function buildSchema() {
+    // Build schema for a single string.
+    let stringSchema = baseSchema
+    // 1: Validate string has min length.
+    if (required || minChars)
+      stringSchema = stringSchema.required().min(minChars ?? 1)
+    // 2: Validate string has max length.
+    stringSchema = stringSchema.max(maxChars)
+    // 3. Validate string has allowed characters.
+    if (allowedChars)
+      stringSchema = stringSchema.matches(new RegExp(`[${allowedChars}]*`))
+    // 4: Validate string is dirty.
+    if (dirty && !split)
+      stringSchema = stringSchema.notOneOf(
+        [initialValue as string],
+        "cannot be initial value",
+      )
+    // Return schema for a single string.
+    if (!split) return stringSchema
+
+    // Build schema for an array of strings.
+    let arraySchema = YupArray().of(stringSchema)
+    // 1: Validate string array has min length.
+    if (required || minValues)
+      arraySchema = arraySchema.required().min(minValues ?? 1)
+    // 2: Validate string array has max length.
+    arraySchema = arraySchema.max(maxValues)
+    // 3: Validate string array has unique values.
+    if (unique || uniqueCaseInsensitive)
+      arraySchema = arraySchema.test({
         message: "cannot have duplicates",
         test: values => {
-          if (Array.isArray(values) && values.length >= 2) {
+          if (
+            Array.isArray(values) &&
+            values.length >= 2 &&
+            values.every(value => typeof value === "string")
+          ) {
             return (
               new Set(
-                uniqueCaseInsensitive && typeof values[0] === "string"
+                uniqueCaseInsensitive
                   ? values.map(value => value.toLowerCase())
                   : values,
               ).size === values.length
             )
           }
-
           return true
         },
       })
-    }
-  }
-  if (required) {
-    _schema = _schema.required()
-    if (split) _schema = (_schema as ArraySchema<string[], any>).min(1)
+    // 4: Validate string array is dirty.
+    if (dirty)
+      arraySchema = arraySchema.notOneOf(
+        [initialValue as string[]],
+        "cannot be initial value",
+      )
+    // Return schema for an array of strings.
+    return arraySchema
   }
-  if (dirty)
-    _schema = _schema.notOneOf([initialValue], "cannot be initial value")
 
   const fieldConfig: FieldConfig = {
     name,
     type,
-    validate: schemaToFieldValidator(_schema, validateOptions),
+    validate: schemaToFieldValidator(buildSchema(), validateOptions),
   }
 
   const _Field: FC<FieldProps> = ({ form }) => {