updated codegen, added client query generation, etc.

app/client/pages/__root.tsx

@@ -1,4 +1,4 @@
-import { Button, HStack, Stack } from "@chakra-ui/react";
+import { Button, Stack } from "@chakra-ui/react";
 import { createRootRoute, Link, Outlet } from "@tanstack/react-router";
 import React from "react";
 
@@ -17,14 +17,20 @@ const TanStackRouterDevtools =
 export const Route = createRootRoute({
   component: () => (
     <Stack padding={3}>
-      <HStack>
+      <Stack flexDirection={"row"} justifyContent={"space-between"}>
         <Link to="/">
           <Button>Home</Button>
         </Link>
-        <Link to="/about">
-          <Button>About</Button>
-        </Link>
-      </HStack>
+
+        <Stack flexDirection={"row"}>
+          <Link to="/login">
+            <Button>Sign in</Button>
+          </Link>
+          <Link to="/register">
+            <Button>Sign up</Button>
+          </Link>
+        </Stack>
+      </Stack>
       <hr style={{ padding: "4px" }} />
       <Outlet />
       <TanStackRouterDevtools />

app/client/pages/about.lazy.tsx

@@ -1,21 +0,0 @@
-import { Text, Icon, Stack } from "@chakra-ui/react";
-import { createLazyFileRoute } from "@tanstack/react-router";
-
-export const Route = createLazyFileRoute("/about")({
-  component: About,
-});
-
-function About() {
-  return (
-    <Stack flexDirection={"row"} alignItems={"center"}>
-      <Text>Hello from About!</Text>
-      <Text>And NerdFonts!</Text>
-      <Icon>
-        <i className="nf nf-fa-heart" />
-      </Icon>
-      <Icon>
-        <i className="nf nf-custom-vim" />
-      </Icon>
-    </Stack>
-  );
-}

app/client/pages/index.tsx

@@ -1,14 +1,16 @@
-import { Text, Stack } from "@chakra-ui/react";
-import { createLazyFileRoute } from "@tanstack/react-router";
+import { Text, Stack } from '@chakra-ui/react';
+import { createFileRoute } from '@tanstack/react-router';
 
-import { gql, useQuery } from "@apollo/client";
+import { gql, useQuery } from '@apollo/client';
 
-export const Route = createLazyFileRoute("/")({
-  component: Index,
+import { BooksManyQuery } from '@generated/types';
+
+export const Route = createFileRoute('/')({
+  component: Index
 });
 
 function Index() {
-  const { data } = useQuery(getBooksQuery);
+  const { data } = useQuery<BooksManyQuery>(getBooksQuery);
 
   return (
     <Stack>

app/client/pages/login.tsx

@@ -0,0 +1,71 @@
+import { gql, useQuery } from '@apollo/client';
+import { Heading, Input, Stack } from '@chakra-ui/react';
+import { Button } from '@client/components/ui/button';
+import { Field } from '@client/components/ui/field';
+import { createFileRoute } from '@tanstack/react-router';
+import { useForm } from 'react-hook-form';
+import { valibotResolver } from '@hookform/resolvers/valibot';
+import * as v from 'valibot';
+
+export const Route = createFileRoute('/login')({
+  component: LoginComponent
+});
+
+function LoginComponent() {
+  // const { data } = useQuery(getBooksQuery);
+
+  return (
+    <Stack flexDirection={'column'} justifyContent={'center'} alignItems={'center'}>
+      <Heading>Login</Heading>
+      <Login />
+    </Stack>
+  );
+}
+
+interface FormValues {
+  email: string;
+  password: string;
+}
+
+function Login() {
+  const schema = v.pipe(
+    v.object({
+      email: v.pipe(v.string(), v.nonEmpty('Email is required'), v.email('Invalid email')),
+      password: v.pipe(v.string(), v.nonEmpty('Password is required'))
+    })
+  );
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors }
+  } = useForm<FormValues>({ resolver: valibotResolver(schema) });
+
+  return (
+    <form onSubmit={handleSubmit(data => alert(data))}>
+      <Stack>
+        <Field label="Email" invalid={errors.email != null} errorText={errors.email?.message}>
+          <Input {...register('email')} />
+        </Field>
+        <Field
+          label="Password"
+          invalid={errors.password != null}
+          errorText={errors.password?.message}
+        >
+          <Input {...register('password')} />
+        </Field>
+        <Button type="submit">Sign in</Button>
+      </Stack>
+    </form>
+  );
+}
+
+/* const getBooksQuery = gql`
+  query BooksMany {
+    booksMany {
+      id
+      author
+      title
+    }
+  }
+`; */

app/client/pages/register.tsx

@@ -0,0 +1,99 @@
+import { gql, useQuery } from '@apollo/client';
+import { Heading, Input, Stack } from '@chakra-ui/react';
+import { Button } from '@client/components/ui/button';
+import { Field } from '@client/components/ui/field';
+import { createFileRoute } from '@tanstack/react-router';
+import { useForm } from 'react-hook-form';
+import { valibotResolver } from '@hookform/resolvers/valibot';
+import * as v from 'valibot';
+
+export const Route = createFileRoute('/register')({
+  component: RegisterComponent
+});
+
+function RegisterComponent() {
+  // const { data } = useQuery(getBooksQuery);
+
+  return (
+    <Stack flexDirection={'column'} justifyContent={'center'} alignItems={'center'}>
+      <Heading>Sign up</Heading>
+      <Register />
+    </Stack>
+  );
+}
+
+interface FormValues {
+  email: string;
+  username: string;
+  password: string;
+  confirm_password: string;
+}
+
+function Register() {
+  const schema = v.pipe(
+    v.object({
+      email: v.pipe(v.string(), v.nonEmpty('Email is required'), v.email('Invalid email')),
+      username: v.pipe(v.string(), v.nonEmpty('Username is required')),
+      password: v.pipe(
+        v.string(),
+        v.nonEmpty('Password is required'),
+        v.minLength(8, 'Needs to be at least 8 characters')
+      ),
+      confirm_password: v.pipe(v.string(), v.nonEmpty('Confirm your password'))
+    }),
+    v.forward(
+      v.check(input => input.password === input.confirm_password, 'Passwords do not match'),
+      ['confirm_password']
+    )
+  );
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors }
+  } = useForm<FormValues>({ resolver: valibotResolver(schema) });
+
+  const onSubmit = handleSubmit(data => console.log(data));
+
+  return (
+    <form onSubmit={onSubmit}>
+      <Stack>
+        <Field label="Email" invalid={errors.email != null} errorText={errors.email?.message}>
+          <Input {...register('email')} />
+        </Field>
+        <Field
+          label="Username"
+          invalid={errors.username != null}
+          errorText={errors.username?.message}
+        >
+          <Input {...register('username')} />
+        </Field>
+        <Field
+          label="Password"
+          invalid={errors.password != null}
+          errorText={errors.password?.message}
+        >
+          <Input {...register('password')} />
+        </Field>
+        <Field
+          label="Confirm password"
+          invalid={errors.confirm_password != null}
+          errorText={errors.confirm_password?.message}
+        >
+          <Input {...register('confirm_password')} />
+        </Field>
+        <Button type="submit">Submit</Button>
+      </Stack>
+    </form>
+  );
+}
+
+/* const getBooksQuery = gql`
+  query BooksMany {
+    booksMany {
+      id
+      author
+      title
+    }
+  }
+`; */