Initial commit

apps/frontend/src/features/home/home-page.tsx

@@ -0,0 +1,68 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+import { Button } from '@/components/ui/button'
+import { Field, FieldError, FieldLabel } from '@/components/ui/field'
+import { Input } from '@/components/ui/input'
+
+const emailSchema = z.object({
+  email: z.string().email('Ingresa un email válido.'),
+})
+
+type EmailForm = z.infer<typeof emailSchema>
+
+export function HomePage() {
+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors, isValid, isSubmitSuccessful },
+  } = useForm<EmailForm>({
+    resolver: zodResolver(emailSchema),
+    mode: 'onChange',
+    defaultValues: {
+      email: '',
+    },
+  })
+
+  const emailValue = watch('email')
+
+  const onSubmit = (_data: EmailForm) => {
+    // Demo form: no-op; success state is managed by react-hook-form.
+  }
+
+  return (
+    <main className="mx-auto flex min-h-[60vh] w-full max-w-6xl items-center justify-center px-6">
+      <section className="w-full max-w-3xl rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
+        <h1 className="mb-2 text-2xl font-semibold">Frontend listo</h1>
+        <p className="mb-4 text-sm text-muted-foreground">
+          React + Vite + TypeScript + shadcn + zod + react-hook-form.
+        </p>
+
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <Field data-invalid={Boolean(errors.email)}>
+            <FieldLabel htmlFor="email">Email</FieldLabel>
+            <Input
+              id="email"
+              type="email"
+              placeholder="tu@email.com"
+              aria-invalid={Boolean(errors.email)}
+              {...register('email')}
+            />
+            <FieldError errors={[errors.email]} />
+          </Field>
+
+          <Button type="submit" className="mt-3 w-full" disabled={!isValid}>
+            Continuar
+          </Button>
+        </form>
+
+        {isSubmitSuccessful && !errors.email && emailValue && (
+          <p className="mt-3 text-sm text-emerald-600">
+            Email válido según esquema zod.
+          </p>
+        )}
+      </section>
+    </main>
+  )
+}