chore(examples): add auto submit example

Author: guilhermerodz

apps/website/src/app/(local-pages)/example-auto-submit/page.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import * as React from 'react'
+
+import { Button } from '@/components/ui/button'
+import { formAction } from './server/form-action'
+import { ExampleComponent } from '../example-playground/component'
+
+export default function ExampleAutoSubmit() {
+  const formRef = React.useRef<HTMLFormElement>(null)
+
+  const [value, setValue] = React.useState('12')
+
+  return (
+    <form ref={formRef} action={formAction}>
+      <ExampleComponent
+        name="otp"
+        value={value}
+        onChange={setValue}
+        onComplete={() => formRef.current?.submit()}
+      />
+      <Button type="submit">Submit</Button>
+    </form>
+  )
+}

apps/website/src/app/(local-pages)/example-auto-submit/server/form-action.ts

@@ -0,0 +1,9 @@
+'use server'
+
+export async function formAction(formData: FormData) {
+  const rawFormData = {
+    otp: formData.get('otp'),
+  }
+
+  console.log({ rawFormData })
+}

apps/website/src/app/(local-pages)/example-playground/component.tsx

@@ -1,12 +1,16 @@
 'use client'
 
-import { cn } from '@/lib/utils'
-
+import * as React from 'react'
 import { OTPInput, SlotProps } from 'input-otp'
 
-export function ExampleComponent() {
+import { cn } from '@/lib/utils'
+
+export function ExampleComponent(
+  props: Partial<React.ComponentProps<typeof OTPInput>>,
+) {
   return (
     <OTPInput
+      {...props}
       maxLength={6}
       containerClassName="group flex items-center has-[:disabled]:opacity-30"
       render={({ slots }) => (

apps/website/src/app/(pages)/(home)/_components/showcase.tsx

@@ -48,11 +48,11 @@ export function Showcase({ className, ...props }: { className?: string }) {
   }, [value.length])
 
   async function onSubmit(e?: React.FormEvent<HTMLFormElement>) {
+    e?.preventDefault?.()
+
     inputRef.current?.select()
     await new Promise(r => setTimeout(r, 1_00))
 
-    e?.preventDefault?.()
-
     if (value === '123456') {
       setHasGuessed(true)