Yup Validation Example (obsolete)

import * as yup from 'yup';
import { prefix, post, operation, type VovkOutput } from 'vovk';
import { withYup } from 'vovk-yup';
 
@prefix('users-yup')
export default class UserYupController {
  @operation({
    summary: 'Update user (Yup)',
    description: 'Update user by ID with Yup validation',
  })
  @post('{id}')
  static updateUser = withYup({
    body: yup
      .object()
      .required()
      .shape({
        name: yup.string().required().meta({ description: 'User full name' }),
        age: yup.number().min(0).max(120).required().meta({ description: 'User age' }),
        email: yup.string().email().required().meta({ description: 'User email' }),
      })
      .meta({ description: 'User object' }),
    params: yup
      .object()
      .shape({
        id: yup.string().required().meta({ description: 'User ID' }),
      })
      .required(),
    query: yup
      .object()
      .shape({
        notify: yup.string().oneOf(['email', 'push', 'none']).required().meta({ description: 'Notification type' }),
      })
      .required(),
    output: yup
      .object()
      .shape({
        success: yup.boolean().required().meta({ description: 'Success status' }),
      })
      .meta({ description: 'Response object' })
      .required(),
    async handle(req, { id }) {
      const { name, age } = await req.json();
      const notify = req.nextUrl.searchParams.get('notify');
 
      // do something with the data
      console.log(`Updating user ${id}:`, { name, age, notify });
      return {
        success: true,
      } satisfies VovkOutput<typeof UserYupController.updateUser>;
    },
  });
}
 

'use client';
import { useState, type FormEvent } from 'react';
import { UserYupRPC } from '@/client';
import type { VovkReturnType } from 'vovk';
 
export default function YupFormExample() {
  const [response, setResponse] = useState<VovkReturnType<typeof UserYupRPC.updateUser> | null>(null);
  const [error, setError] = useState<Error | null>(null);
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [age, setAge] = useState(30);
  const [disableClientValidation, setDisableClientValidation] = useState(false);
  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    try {
      setResponse(
        await UserYupRPC.updateUser({
          body: { name, email, age },
          query: { notify: 'push' },
          params: { id: '5a279068-35d6-4d67-94e0-c21ef4052eea' },
          disableClientValidation,
        })
      );
      setError(null);
    } catch (e) {
      setError(e as Error);
      setResponse(null);
    }
  };
 
  return (
    <form onSubmit={onSubmit}>
      <input type="text" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} />
      <input type="text" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
      <label>Age:</label>
      <input type="number" placeholder="Age" value={age} onChange={(e) => setAge(e.target.valueAsNumber)} />
      <label className="block mb-4">
        <input
          type="checkbox"
          className="mr-2"
          checked={disableClientValidation}
          onChange={(e) => setDisableClientValidation(e.target.checked)}
        />
        Disable client-side validation
      </label>
      <button>Submit</button>
 
      {response && (
        <div className="text-left">
          <h3>Response:</h3>
          <pre>{JSON.stringify(response, null, 2)}</pre>
        </div>
      )}
 
      {error && <div className="overflow-auto">❌ {String(error)}</div>}
    </form>
  );
}