guidelines: inertia-react: v0.1 of 'forms' guidelines

Author: ashleyhindle

.ai/inertia-react/1/forms.blade.php

@@ -0,0 +1,46 @@
+## Forms in Inertia
+
+- For form handling, use `router.post` and related methods. Do not use regular forms.
+
+@verbatim
+<code-snippet name="Inertia React Form Example" lang="react">
+import { useState } from 'react'
+import { router } from '@inertiajs/react'
+
+export default function Edit() {
+    const [values, setValues] = useState({
+        first_name: "",
+        last_name: "",
+        email: "",
+    })
+
+    function handleChange(e) {
+        const key = e.target.id;
+        const value = e.target.value
+
+        setValues(values => ({
+            ...values,
+            [key]: value,
+        }))
+    }
+
+    function handleSubmit(e) {
+        e.preventDefault()
+
+        router.post('/users', values)
+    }
+
+    return (
+    <form onSubmit={handleSubmit}>
+        <label htmlFor="first_name">First name:</label>
+        <input id="first_name" value={values.first_name} onChange={handleChange} />
+        <label htmlFor="last_name">Last name:</label>
+        <input id="last_name" value={values.last_name} onChange={handleChange} />
+        <label htmlFor="email">Email:</label>
+        <input id="email" value={values.email} onChange={handleChange} />
+        <button type="submit">Submit</button>
+    </form>
+    )
+}
+</code-snippet>
+@endverbatim

.ai/inertia-react/2/.gitkeep

@@ -0,0 +1,56 @@
+@php
+/** @var \Laravel\Boost\Install\GuidelineAssist $assist */
+@endphp
+
+## Forms in Inertia
+
+@if($assist->inertia()->hasFormComponent())
+- The recommended way to build forms when using Inertia is with the `<Form>` component. Use `search-docs` with `form component` for guidance.
+- Forms can also be built using the `useForm` helper for more programmatic control, or to follow existing conventions. Use `search-docs` with `useForm helper` for guidance.
+
+@boostsnippet("Example form using the `<Form>` component", "react")
+import { Form } from '@inertiajs/react'
+
+export default () => (
+    <Form action="/users" method="post">
+        {({
+        errors,
+        hasErrors,
+        processing,
+        progress,
+        wasSuccessful,
+        recentlySuccessful,
+        setError,
+        clearErrors,
+        resetAndClearErrors,
+        defaults,
+        isDirty,
+        reset,
+        submit,
+        }) => (
+        <>
+        <input type="text" name="name" />
+
+        {errors.name && <div>{errors.name}</div>}
+
+        <button type="submit" disabled={processing}>
+            {processing ? 'Creating...' : 'Create User'}
+        </button>
+
+        {wasSuccessful && <div>User created successfully!</div>}
+        </>
+    )}
+    </Form>
+)
+@endboostsnippet
+
+    @if($assist->inertia()->hasFormComponentResets())
+    - Added `resetOnError`, `resetOnSuccess`, and `setDefaultsOnSuccess` to the `<Form>` component. Use `search-docs` with 'form component resetting' for explicit guidance.
+    @else
+    - This version of Inertia does NOT support `resetOnError`, `resetOnSuccess`, or `setDefaultsOnSuccess` on the `<Form>` component.
+    @endif
+@endif
+
+@if($assist->inertia()->hasFormComponent() === false)
+            - Forms can be built using the `useForm` helper. Use `search-docs` with `useForm helper` for guidance.
+@endif

.ai/inertia-react/2/forms.blade.php

@@ -7,46 +7,3 @@
 
     <Link href="/">Home</Link>
 </code-snippet>
-
-- For form handling, use `router.post` and related methods. Do not use regular forms.
-
-<code-snippet lang="react" name="Inertia React Form Example">
-import { useState } from 'react'
-import { router } from '@inertiajs/react'
-
-export default function Edit() {
-    const [values, setValues] = useState({
-        first_name: "",
-        last_name: "",
-        email: "",
-    })
-
-    function handleChange(e) {
-        const key = e.target.id;
-        const value = e.target.value
-
-        setValues(values => ({
-            ...values,
-            [key]: value,
-        }))
-    }
-
-    function handleSubmit(e) {
-        e.preventDefault()
-
-        router.post('/users', values)
-    }
-
-    return (
-    <form onSubmit={handleSubmit}>
-        <label htmlFor="first_name">First name:</label>
-        <input id="first_name" value={values.first_name} onChange={handleChange} />
-        <label htmlFor="last_name">Last name:</label>
-        <input id="last_name" value={values.last_name} onChange={handleChange} />
-        <label htmlFor="email">Email:</label>
-        <input id="email" value={values.email} onChange={handleChange} />
-        <button type="submit">Submit</button>
-    </form>
-    )
-}
-</code-snippet>