@stjoseph/prumo 0.0.1

package/templates/web/src/components/ui/field.tsx

@@ -0,0 +1,224 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from 'cn'
+import { useMemo } from 'react'
+
+import { Label } from '@/components/ui/label'
+import { Separator } from '@/components/ui/separator'
+
+function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        'flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  className,
+  variant = 'legend',
+  ...props
+}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        'mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        'group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva('group/field flex w-full gap-2 data-[invalid=true]:text-destructive', {
+  variants: {
+    orientation: {
+      vertical: 'flex-col *:w-full [&>.sr-only]:w-auto',
+      horizontal:
+        'flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+      responsive:
+        'flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+    },
+  },
+  defaultVariants: {
+    orientation: 'vertical',
+  },
+})
+
+function Field({
+  className,
+  orientation = 'vertical',
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn('group/field-content flex flex-1 flex-col gap-0.5 leading-snug', className)}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10',
+        'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        'flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        'text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5',
+        'last:mt-0 nth-last-2:-mt-1',
+        '[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'div'> & {
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
+        className,
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<'div'> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors?.length) {
+      return null
+    }
+
+    const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()]
+
+    if (uniqueErrors?.length === 1) {
+      return uniqueErrors[0]?.message
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error) => error?.message && <li key={error.message}>{error.message}</li>,
+        )}
+      </ul>
+    )
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn('text-sm font-normal text-destructive', className)}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldTitle,
+}

package/templates/web/src/components/ui/input.tsx

@@ -0,0 +1,19 @@
+import { Input as InputPrimitive } from '@base-ui/react/input'
+import { cn } from 'cn'
+import type * as React from 'react'
+
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+  return (
+    <InputPrimitive
+      type={type}
+      data-slot="input"
+      className={cn(
+        'h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

package/templates/web/src/components/ui/label.tsx

@@ -0,0 +1,17 @@
+import { cn } from 'cn'
+import type * as React from 'react'
+
+function Label({ className, ...props }: React.ComponentProps<'label'>) {
+  return (
+    <label
+      data-slot="label"
+      className={cn(
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

package/templates/web/src/components/ui/separator.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import { Separator as SeparatorPrimitive } from '@base-ui/react/separator'
+import { cn } from 'cn'
+
+function Separator({ className, orientation = 'horizontal', ...props }: SeparatorPrimitive.Props) {
+  return (
+    <SeparatorPrimitive
+      data-slot="separator"
+      orientation={orientation}
+      className={cn(
+        'shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

package/templates/web/src/config.ts

@@ -0,0 +1,7 @@
+import { z } from 'zod'
+
+const schema = z.object({
+  VITE_API_URL: z.url(),
+})
+
+export const config = schema.parse(import.meta.env)

package/templates/web/src/features/auth/auth-client.ts

@@ -0,0 +1,12 @@
+import { createAuthClient } from 'better-auth/react'
+import type { Transport } from '@/api-contract'
+
+export type AuthClient = ReturnType<typeof createAuth>
+
+export function createAuth({ baseUrl, fetch }: { baseUrl: string; fetch: Transport }) {
+  return createAuthClient({
+    baseURL: baseUrl,
+    basePath: '/api/auth',
+    fetchOptions: { customFetchImpl: fetch },
+  })
+}

package/templates/web/src/features/auth/session.ts

@@ -0,0 +1,17 @@
+import { queryOptions } from '@tanstack/react-query'
+import { ApiError } from '@/api-contract'
+import type { AuthClient } from './auth-client'
+
+export const sessionQuery = (auth: AuthClient) =>
+  queryOptions({
+    queryKey: ['session'],
+    queryFn: async () => {
+      const { data, error } = await auth.getSession()
+
+      if (error !== null) {
+        throw ApiError.fromAuthError(error)
+      }
+
+      return data
+    },
+  })

package/templates/web/src/features/auth/sign-in-form.spec.tsx

@@ -0,0 +1,30 @@
+import { screen, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it } from 'vitest'
+import { fakeTransport, json } from '../../../test/fake-transport'
+import { renderApp } from '../../../test/render-app'
+
+describe('SignInForm', () => {
+  it('shows a rejected sign-in as a form-level error', async () => {
+    const user = userEvent.setup()
+
+    renderApp(
+      '/sign-in',
+      fakeTransport({
+        'POST /api/auth/sign-in/email': () =>
+          json(401, { message: 'Invalid email or password', code: 'INVALID_EMAIL_OR_PASSWORD' }),
+      }),
+    )
+
+    await user.type(await screen.findByLabelText('Email'), 'ana@example.com')
+    await user.type(screen.getByLabelText('Password'), 'wrong-password')
+    await user.click(screen.getByRole('button', { name: 'Sign in' }))
+
+    const form = screen.getByRole('button', { name: 'Sign in' }).closest('form')
+
+    expect(form).not.toBeNull()
+    expect(
+      await within(form as HTMLFormElement).findByText('Invalid email or password'),
+    ).toBeInTheDocument()
+  })
+})

package/templates/web/src/features/auth/sign-in-form.tsx

@@ -0,0 +1,73 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useQueryClient } from '@tanstack/react-query'
+import { Link, useNavigate } from '@tanstack/react-router'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+import { ApiError } from '@/api-contract'
+import { Button } from '@/components/ui/button'
+import { Field, FieldError, FieldGroup, FieldLabel } from '@/components/ui/field'
+import { Input } from '@/components/ui/input'
+import { FormError } from '@/features/forms/form-error'
+import { applyServerError } from '@/features/forms/server-errors'
+import type { AuthClient } from './auth-client'
+import { sessionQuery } from './session'
+
+const schema = z.object({
+  email: z.email(),
+  password: z.string().min(1),
+})
+
+type SignInValues = z.infer<typeof schema>
+
+export function SignInForm({ auth, redirect }: { auth: AuthClient; redirect: string | undefined }) {
+  const queryClient = useQueryClient()
+  const navigate = useNavigate()
+  const form = useForm<SignInValues>({
+    resolver: zodResolver(schema),
+    mode: 'onTouched',
+    reValidateMode: 'onChange',
+    defaultValues: { email: '', password: '' },
+  })
+  const { errors, isSubmitting } = form.formState
+
+  async function onSubmit(values: SignInValues) {
+    const { error } = await auth.signIn.email(values)
+
+    if (error !== null) {
+      applyServerError(ApiError.fromAuthError(error), ['email', 'password'], form.setError)
+      return
+    }
+
+    await queryClient.invalidateQueries({ queryKey: sessionQuery(auth).queryKey })
+    await navigate({ to: redirect ?? '/' })
+  }
+
+  return (
+    <form onSubmit={form.handleSubmit(onSubmit)} noValidate className="flex flex-col gap-6">
+      <FormError errors={errors} />
+      <FieldGroup>
+        <Field data-invalid={errors.email !== undefined}>
+          <FieldLabel htmlFor="email">Email</FieldLabel>
+          <Input id="email" type="email" autoComplete="email" {...form.register('email')} />
+          <FieldError errors={[errors.email]} />
+        </Field>
+        <Field data-invalid={errors.password !== undefined}>
+          <FieldLabel htmlFor="password">Password</FieldLabel>
+          <Input
+            id="password"
+            type="password"
+            autoComplete="current-password"
+            {...form.register('password')}
+          />
+          <FieldError errors={[errors.password]} />
+        </Field>
+      </FieldGroup>
+      <Button type="submit" disabled={isSubmitting}>
+        Sign in
+      </Button>
+      <p className="text-sm text-muted-foreground">
+        No account? <Link to="/sign-up">Sign up</Link>
+      </p>
+    </form>
+  )
+}

package/templates/web/src/features/auth/sign-up-form.tsx

@@ -0,0 +1,79 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useQueryClient } from '@tanstack/react-query'
+import { Link, useNavigate } from '@tanstack/react-router'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+import { ApiError } from '@/api-contract'
+import { Button } from '@/components/ui/button'
+import { Field, FieldError, FieldGroup, FieldLabel } from '@/components/ui/field'
+import { Input } from '@/components/ui/input'
+import { FormError } from '@/features/forms/form-error'
+import { applyServerError } from '@/features/forms/server-errors'
+import type { AuthClient } from './auth-client'
+import { sessionQuery } from './session'
+
+const schema = z.object({
+  name: z.string().min(1).max(80),
+  email: z.email(),
+  password: z.string().min(8),
+})
+
+type SignUpValues = z.infer<typeof schema>
+
+export function SignUpForm({ auth }: { auth: AuthClient }) {
+  const queryClient = useQueryClient()
+  const navigate = useNavigate()
+  const form = useForm<SignUpValues>({
+    resolver: zodResolver(schema),
+    mode: 'onTouched',
+    reValidateMode: 'onChange',
+    defaultValues: { name: '', email: '', password: '' },
+  })
+  const { errors, isSubmitting } = form.formState
+
+  async function onSubmit(values: SignUpValues) {
+    const { error } = await auth.signUp.email(values)
+
+    if (error !== null) {
+      applyServerError(ApiError.fromAuthError(error), ['name', 'email', 'password'], form.setError)
+      return
+    }
+
+    await queryClient.invalidateQueries({ queryKey: sessionQuery(auth).queryKey })
+    await navigate({ to: '/' })
+  }
+
+  return (
+    <form onSubmit={form.handleSubmit(onSubmit)} noValidate className="flex flex-col gap-6">
+      <FormError errors={errors} />
+      <FieldGroup>
+        <Field data-invalid={errors.name !== undefined}>
+          <FieldLabel htmlFor="name">Name</FieldLabel>
+          <Input id="name" autoComplete="name" {...form.register('name')} />
+          <FieldError errors={[errors.name]} />
+        </Field>
+        <Field data-invalid={errors.email !== undefined}>
+          <FieldLabel htmlFor="email">Email</FieldLabel>
+          <Input id="email" type="email" autoComplete="email" {...form.register('email')} />
+          <FieldError errors={[errors.email]} />
+        </Field>
+        <Field data-invalid={errors.password !== undefined}>
+          <FieldLabel htmlFor="password">Password</FieldLabel>
+          <Input
+            id="password"
+            type="password"
+            autoComplete="new-password"
+            {...form.register('password')}
+          />
+          <FieldError errors={[errors.password]} />
+        </Field>
+      </FieldGroup>
+      <Button type="submit" disabled={isSubmitting}>
+        Create account
+      </Button>
+      <p className="text-sm text-muted-foreground">
+        Already registered? <Link to="/sign-in">Sign in</Link>
+      </p>
+    </form>
+  )
+}

package/templates/web/src/features/forms/form-error.tsx

@@ -0,0 +1,15 @@
+import type { FieldErrors } from 'react-hook-form'
+
+export function FormError({ errors }: { errors: FieldErrors }) {
+  const message = errors.root?.server?.message
+
+  if (message === undefined) {
+    return null
+  }
+
+  return (
+    <p role="alert" className="text-sm text-destructive">
+      {message}
+    </p>
+  )
+}

package/templates/web/src/features/forms/server-errors.ts

@@ -0,0 +1,33 @@
+import type { FieldValues, Path, UseFormSetError } from 'react-hook-form'
+import { ApiError } from '@/api-contract'
+
+export const FORM_ERROR = 'root.server'
+
+export function applyServerError<T extends FieldValues>(
+  error: unknown,
+  fields: readonly Path<T>[],
+  setError: UseFormSetError<T>,
+): void {
+  if (!(error instanceof ApiError)) {
+    throw error
+  }
+
+  const unmatched: string[] = []
+
+  for (const [field, messages] of Object.entries(error.errors)) {
+    const message = messages.join(' ')
+
+    if ((fields as readonly string[]).includes(field)) {
+      setError(field as Path<T>, { type: 'server', message })
+    } else {
+      unmatched.push(message)
+    }
+  }
+
+  if (unmatched.length > 0 || Object.keys(error.errors).length === 0) {
+    const detail = unmatched.length > 0 ? unmatched.join(' ') : (error.detail ?? error.title)
+    const reference = error.requestId === undefined ? '' : ` (${error.requestId})`
+
+    setError(FORM_ERROR as Path<T>, { type: 'server', message: `${detail}${reference}` })
+  }
+}

package/templates/web/src/features/profile/profile-form.spec.tsx

@@ -0,0 +1,58 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it } from 'vitest'
+import { createClient, type Profile } from '@/api-contract'
+import { API_URL, fakeTransport, json } from '../../../test/fake-transport'
+import { ProfileForm } from './profile-form'
+
+const profile: Profile = {
+  id: '01a09ffe-635c-77e5-9aeb-d3e9d1a7ee24',
+  userId: 'ef51f640-611b-4b9a-a188-510c455539eb',
+  displayName: 'Ana',
+  locale: 'en',
+  timezone: 'UTC',
+  createdAt: '2026-09-14T12:57:24.057Z',
+  updatedAt: '2026-09-14T12:57:24.057Z',
+}
+
+describe('ProfileForm', () => {
+  it('puts a server validation message on the field it names', async () => {
+    const user = userEvent.setup()
+    const api = createClient({
+      baseUrl: API_URL,
+      fetch: fakeTransport({
+        'PATCH /api/v1/users/me': () =>
+          json(
+            400,
+            {
+              type: 'about:blank',
+              title: 'Bad Request',
+              status: 400,
+              detail: 'Validation failed',
+              instance: '/api/v1/users/me',
+              requestId: 'req-1',
+              errors: { timezone: ['timezone must be a valid IANA zone'] },
+            },
+            'application/problem+json',
+          ),
+      }),
+    })
+
+    render(
+      <QueryClientProvider client={new QueryClient()}>
+        <ProfileForm api={api} profile={profile} />
+      </QueryClientProvider>,
+    )
+
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+
+    const timezone = screen.getByLabelText('Timezone').closest('[data-slot="field"]')
+
+    expect(timezone).not.toBeNull()
+    expect(timezone).toHaveTextContent('timezone must be a valid IANA zone')
+    expect(
+      screen.getByLabelText('Display name').closest('[data-slot="field"]'),
+    ).not.toHaveTextContent('timezone must be a valid IANA zone')
+  })
+})