Improve Inputs

src/components/EmailInput.tsx

@@ -7,6 +7,7 @@ export const EmailInput = (props: ComponentProps<'input'>) => (
     id="email"
     placeholder="Digite seu e-mail"
     autoComplete="email"
+    format={sanitize}
     inputMode="email"
     type="text"
     minLength={5}
@@ -15,3 +16,5 @@ export const EmailInput = (props: ComponentProps<'input'>) => (
     {...props}
   />
 )
+
+const sanitize = (value: string) => value.toLowerCase().replace(/\s+/g, '').slice(0, 254)

src/components/NameInput.tsx

@@ -10,7 +10,18 @@ export const NameInput = (props: ComponentProps<'input'>) => (
     autoComplete="name"
     maxLength={120}
     minLength={2}
+    format={sanitize}
     required
     {...props}
   />
 )
+
+const sanitize = (value: string) =>
+  value
+    .normalize('NFC')
+    .replace(/[^\p{L}\p{M}\s-]+/gu, '')
+    .replace(/-+/g, '-')
+    .replace(/\s+/g, ' ')
+    .replace(/\s*-\s*/g, '-')
+    .trim()
+    .slice(0, 120)

src/components/PostalCodeInput.tsx

@@ -7,7 +7,18 @@ export const PostalCodeInput = (props: ComponentProps<'input'>) => (
     id="postalCode"
     type="text"
     placeholder="00000-000"
+    format={format}
+    options={{
+      setValueAs: sanitize,
+    }}
     pattern="^(?:\d{8})?$"
     {...props}
   />
 )
+
+const sanitize = (value: string) => value.replace(/\D/g, '').slice(0, 8)
+
+const format = (value: string) => {
+  const digits = sanitize(value)
+  return digits.length <= 5 ? digits : `${digits.slice(0, 5)}-${digits.slice(5)}`
+}