fix(docs): update valibot snippet

[zougari47]

Overview

What is it?

• Feature / enhancement
• Bug
• Docs / tests / types / typos

Description

I was trying to implement modular forms like on docs but when I installed valibot ^0.32.0 found there is no exported type Input (I think it's outdated).
When I looked in valibot docs they use InferOutput instead.

Use cases and why

Checklist:

• My code follows the developer guidelines of this project
• I have performed a self-review of my own code
• I have made corresponding changes to the documentation
• Added new tests to cover the fix / functionality

[netlify]

👷 Deploy request for qwik-insights pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	467b956

[zougari47]

const LoginSchema = object({
  email: string([
    minLength(1, 'Please enter your email.'),
    email('The email address is badly formatted.'),
  ]),
  password: string([
    minLength(1, 'Please enter your password.'),
    minLength(8, 'Your password must have 8 characters or more.'),
  ]),
});

I'm not a Valibot expert but this snippet from docs gives this error:

Argument of type '(MinLengthAction<LengthInput, 1, "Please enter your email."> | EmailAction<string, "The email address is badly formatted.">)[]' is not assignable to parameter of type 'ErrorMessage<StringIssue> | undefined'.ts(2345)

When I wrote it that way 👇. The error removed but I'm not sure if it's the same thing.

const LoginSchema = object({
  email: pipe(
    string(),
    minLength(1, 'Please enter your email'),
    email('he email address is badly formatted'),
  ),
  password: pipe(
    string(),
    minLength(1, 'Please enter your password.'),
    minLength(8, 'Your password must have 8 characters or more.'),
  ),
})

[gioboa]

const LoginSchema = object({
  email: string([
    minLength(1, 'Please enter your email.'),
    email('The email address is badly formatted.'),
  ]),
  password: string([
    minLength(1, 'Please enter your password.'),
    minLength(8, 'Your password must have 8 characters or more.'),
  ]),
});

I'm not a Valibot expert but this snippet from docs gives this error:

Argument of type '(MinLengthAction<LengthInput, 1, "Please enter your email."> | EmailAction<string, "The email address is badly formatted.">)[]' is not assignable to parameter of type 'ErrorMessage<StringIssue> | undefined'.ts(2345)

When I wrote it that way 👇. The error removed but I'm not sure if it's the same thing.

const LoginSchema = object({
  email: pipe(
    string(),
    minLength(1, 'Please enter your email'),
    email('he email address is badly formatted'),
  ),
  password: pipe(
    string(),
    minLength(1, 'Please enter your password.'),
    minLength(8, 'Your password must have 8 characters or more.'),
  ),
})

@fabian-hiller you are the master here 😄 can you have a look pls?

[fabian-hiller]

Thanks @zougari47! Can you also change the imports to import * as v from 'valibot';? Here is more context:

• https://valibot.dev/blog/valibot-v0.31.0-is-finally-available/
• https://valibot.dev/guides/migrate-to-v0.31.0/

[zougari47]

Thanks @zougari47! Can you also change the imports to import * as v from 'valibot';? Here is more context:

* https://valibot.dev/blog/valibot-v0.31.0-is-finally-available/

* https://valibot.dev/guides/migrate-to-v0.31.0/

Done ✅. Thank you for the recomandation.

[fabian-hiller]

Can you also update this file? https://github.com/QwikDev/qwik/blob/main/packages/docs/src/routes/demo/integration/modular-forms/index.tsx

[pkg-pr-new]

Run & review this pull request in StackBlitz Codeflow.

commit: 467b956

@builder.io/qwik

npm i https://pkg.pr.new/@builder.io/qwik@6569

@builder.io/qwik-city

npm i https://pkg.pr.new/@builder.io/qwik-city@6569

eslint-plugin-qwik

npm i https://pkg.pr.new/eslint-plugin-qwik@6569

create-qwik

npm i https://pkg.pr.new/create-qwik@6569

[gioboa]

Thanks @zougari47 for your help and @fabian-hiller for the review 👏

[fabian-hiller]

One last thing. Can you change v.minLength(1, 'Please enter your email.') to v.nonEmpty('Please enter your email.')?

[zougari47]

One last thing. Can you change v.minLength(1, 'Please enter your email.') to v.nonEmpty('Please enter your email.')?

Done ✅. Thank you for the review.