fix: add better form validation & focus states

chroxify · chroxify · commit fd0f0769f45f · 2025-03-23T02:04:02.000+01:00
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
@@ -1,6 +1,7 @@
 import Image from "next/image";
 import { QRCodeUrl } from "@/components/QRCodeUrl";
 import { QRCodeCard } from "@/components/QRCodeCard";
+import Link from "next/link";
 
 export default function Home() {
   return (
@@ -20,53 +21,7 @@ export default function Home() {
           <QRCodeUrl />
         </div>
       </main>
-      <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
+      <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center" />
     </div>
   );
 }
diff --git a/apps/web/components/ColorInput.tsx b/apps/web/components/ColorInput.tsx
@@ -17,7 +17,7 @@ export function ColorInput({ type }: ColorInputProps) {
     <div
       className={cn(
         "flex w-full rounded-md transition-all duration-200 border bg-background overflow-hidden",
-        "focus-within:ring-2 focus-within:ring-primary focus-within:outline-none"
+        "focus-within:ring-[1.5px] focus-within:ring-primary focus-within:outline-none"
       )}
     >
       <div className="flex items-center justify-center min-w-9 text-sm bg-secondary border-r text-secondary-foreground">
diff --git a/apps/web/components/DataInput.tsx b/apps/web/components/DataInput.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useRef, useEffect } from "react";
+import { useRef, useEffect, useState } from "react";
 import { cn } from "@/lib/utils";
 import { Input } from "./ui/input";
 import {
@@ -20,6 +20,11 @@ export function DataInput() {
   const isSeparated = config.inputs.length > 1;
   const containerRef = useRef<HTMLDivElement>(null);
 
+  // Add validation state tracking
+  const [validationState, setValidationState] = useState<
+    Record<string, boolean>
+  >({});
+
   const gridCols =
     {
       1: "grid-cols-1",
@@ -28,11 +33,22 @@ export function DataInput() {
       4: "grid-cols-4",
     }[config.layout?.columns ?? 1] ?? "grid-cols-1";
 
-  // Handle input changes
-  const handleInputChange = (id: string, value: string) => {
+  // Handle input changes with validation
+  const handleInputChange = (
+    id: string,
+    value: string,
+    validation?: (value: string) => boolean
+  ) => {
     const values = { ...data?.data } as Record<string, string>;
     values[id] = value;
     setData(type, values);
+
+    if (validation) {
+      setValidationState((prev) => ({
+        ...prev,
+        [id]: validation(value),
+      }));
+    }
   };
 
   // Animate height changes
@@ -54,21 +70,33 @@ export function DataInput() {
     <div
       ref={containerRef}
       className="flex flex-col gap-4 w-full relative transition-[height] duration-300 ease-in-out"
-      style={{ height: "40px" }} // Initial height of single input
+      style={{ height: "40px" }}
     >
       <div className="absolute w-full">
-        <div className={cn("flex relative")}>
+        <div
+          className={cn(
+            "flex relative rounded-md transition-all duration-200",
+            !isSeparated &&
+              "focus-within:ring-[1.5px] focus-within:ring-primary"
+          )}
+        >
           <DataSelect type={type} onTypeSelect={(t) => setData(t, {})} />
           <Input
             type={config.inputs[0].type}
             id={config.inputs[0].id}
             value={data?.data?.[config.inputs[0].id] || ""}
             onChange={(e) =>
-              handleInputChange(config.inputs[0].id, e.target.value)
+              handleInputChange(
+                config.inputs[0].id,
+                e.target.value,
+                config.inputs[0].validation
+              )
             }
             className={cn(
-              "rounded-l-none focus-visible:ring-0 focus-visible:ring-offset-0 px-3 py-0",
-              isSeparated && "rounded-l-md ml-3"
+              "rounded-l-none focus-visible:ring-0 px-3 py-0",
+              isSeparated && "rounded-l-md ml-3 focus-visible:ring-[1.5px]",
+              validationState[config.inputs[0].id] === false &&
+                "text-destructive"
             )}
             placeholder={config.inputs[0].placeholder}
           />
@@ -88,12 +116,15 @@ export function DataInput() {
                 type={input.type}
                 id={input.id}
                 value={data?.data?.[input.id] || ""}
-                onChange={(e) => handleInputChange(input.id, e.target.value)}
+                onChange={(e) =>
+                  handleInputChange(input.id, e.target.value, input.validation)
+                }
                 placeholder={input.placeholder}
                 className={cn(
                   input.className,
                   "animate-in fade-in duration-300 ease-in-out",
-                  `delay-[${index * 75}ms]`
+                  `delay-[${index * 75}ms]`,
+                  validationState[input.id] === false && "text-destructive"
                 )}
               />
             ))}
diff --git a/apps/web/components/LogoInput.tsx b/apps/web/components/LogoInput.tsx
@@ -23,7 +23,7 @@ export function LogoInput() {
   }, [logo]);
 
   return (
-    <div className="flex w-full rounded-md transition-all duration-200 border bg-background overflow-hidden focus-within:ring-2 focus-within:ring-primary">
+    <div className="flex w-full rounded-md transition-all duration-200 border bg-background overflow-hidden focus-within:ring-[1.5px] focus-within:ring-primary">
       <div className="flex items-center justify-center min-w-9 text-sm bg-secondary border-r text-secondary-foreground">
         {isValidImage === true && logo ? (
           <img
diff --git a/apps/web/components/ui/input.tsx b/apps/web/components/ui/input.tsx
@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "w-full text-sm rounded-md transition-all duration-200 border bg-background px-4 py-2 outline-none focus:ring-2 focus:ring-primary h-9",
+        "w-full text-sm rounded-md transition-all duration-200 border bg-background px-4 py-2 outline-none focus:ring-[1.5px] focus:ring-primary h-9",
         className
       )}
       {...props}
diff --git a/apps/web/lib/qr/schema.ts b/apps/web/lib/qr/schema.ts
@@ -10,6 +10,7 @@ export const inputFieldSchema = z.object({
   type: z.enum(["text", "number", "email", "tel", "url"]).default("text"),
   label: z.string().optional(),
   className: z.string().optional(),
+  validation: z.function().args(z.string()).returns(z.boolean()).optional(),
 });
 
 // Data type schema
@@ -34,7 +35,10 @@ export const qrDataSchemas = {
     subject: z.string(),
     body: z.string(),
   }),
-  phone: z.object({ phone: z.string() }),
+  phone: z.object({
+    phone: z.string(),
+    message: z.string().optional(),
+  }),
   wifi: z.object({
     ssid: z.string(),
     password: z.string(),
@@ -68,6 +72,15 @@ export const DataInputs: QRDataTypesConfig = {
         id: "url",
         placeholder: "Enter URL",
         type: "url",
+        validation: (value) => {
+          // Allows URLs with or without protocol
+          // Must have valid domain structure (e.g. example.com, sub.example.co.uk)
+          // Can have paths, query params, fragments
+          // Protocol if present must be http:// or https://
+          return /^(?:(?:https?:\/\/)?(?:[\w-]+\.)+[a-z]{2,}(?:\/[^\s]*)?)?$/i.test(
+            value
+          );
+        },
       },
     ],
   },
@@ -79,6 +92,7 @@ export const DataInputs: QRDataTypesConfig = {
         id: "to",
         placeholder: "To Email",
         type: "email",
+        validation: (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
       },
       {
         id: "subject",
@@ -100,8 +114,18 @@ export const DataInputs: QRDataTypesConfig = {
         id: "phone",
         placeholder: "Enter phone number",
         type: "tel",
+        validation: (value) => /^\+?[\d\s-()]{10,}$/.test(value),
+      },
+      {
+        id: "message",
+        placeholder: "Message (optional)",
+        type: "text",
       },
     ],
+    layout: {
+      grid: true,
+      columns: 1,
+    },
   },
   wifi: {
     icon: Icons.WiFi,
diff --git a/apps/web/lib/qr/types.ts b/apps/web/lib/qr/types.ts
@@ -39,6 +39,7 @@ export type QRDataInput = {
   placeholder: string;
   label?: string;
   className?: string;
+  validation?: (value: string) => boolean;
 };
 export type QRDataConfig = {
   icon: FC<IconProps>;

Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@ export function ColorInput({ type }: ColorInputProps) {`
`17`	`17`	`<div`
`18`	`18`	`className={cn(`
`19`	`19`	`"flex w-full rounded-md transition-all duration-200 border bg-background overflow-hidden",`
`20`		`- "focus-within:ring-2 focus-within:ring-primary focus-within:outline-none"`
	`20`	`+ "focus-within:ring-[1.5px] focus-within:ring-primary focus-within:outline-none"`
`21`	`21`	`)}`
`22`	`22`	`>`
`23`	`23`	`<div className="flex items-center justify-center min-w-9 text-sm bg-secondary border-r text-secondary-foreground">`