chore(website): update docs

Author: TheEdoRan

website/docs/execute-actions/hooks/usestateaction.md

@@ -16,73 +16,10 @@ You can access the documentation for the deprecated `useStateAction()` hook in t
 
 ### From v8 onwards
 
-The `useStateAction()` hook has been deprecated in favor of the [`useActionState`](https://react.dev/reference/react/useActionState) hook from React, which was used under the hood. This is because the usage of `useStateAction`, while adding useful features, prevented progressive enhancement from working, since it wrapped the `useActionState` hook with additional functionality that only worked with JavaScript enabled.
+The `useStateAction()` hook has been deprecated in favor of the [`useActionState()`](https://react.dev/reference/react/useActionState) hook from React, which was used anyway under the hood. This is because the `useStateAction()` hook, while adding useful features, prevented progressive enhancement from working, since it wrapped the `useActionState()` hook with additional functionality that only worked with JavaScript enabled.
 
 Note that you can also use "stateless" actions with forms, as described in [this section](/docs/recipes/form-actions#stateless-form-actions).
 
 ### Example
 
-1. Define a new stateful action called `statefulAction`, that takes a name as input and returns the name you just passed, as well as the previous one (if any).
-
-Note two important things: 
-  1. We're defining an action that will be used as a Form Action, so here we use the [`zod-form-data`](https://www.npmjs.com/package/zod-form-data) library to generate the input validation schema;
-  2. We use [`stateAction()`](/docs/define-actions/instance-methods#action--stateaction) instance method to define the action. You **must** use this method, because `useActionState()` hook requires `prevResult` to be the first argument of the Server Action function. Using this method also allows you to access the previous action result in `serverCodeFn`, via the `prevResult` property in the second argument of the function:
-
-```typescript title=src/app/stateful-action.ts
-"use server";
-
-import { actionClient } from "@/lib/safe-action";
-import { z } from "zod";
-import { zfd } from "zod-form-data";
-
-const inputSchema = zfd.formData({
-  name: zfd.text(z.string().min(1).max(20)),
-});
-
-export const statefulAction = actionClient
-  .metadata({ actionName: "statefulAction" })
-  .inputSchema(inputSchema)
-  // Note that we need to explicitly give a type to `stateAction` here,
-  // for its return object. This is because TypeScript can't infer the
-  // return type of the function and then "pass it" to the second argument
-  // of the server code function (`prevResult`). If you don't need to
-  // access `prevResult`, though, you can omit the type here, since it
-  // will be inferred just like with `action` method.
-  // highlight-start
-  .stateAction<{
-    prevName?: string;
-    newName: string;
-  }>(async ({ parsedInput, metadata }, { prevResult }) => {
-    await new Promise((res) => setTimeout(res, 1000));
-
-    return {
-      prevName: prevResult.data?.newName,
-      newName: parsedInput.name,
-    };
-  });
-  // highlight-end
-```
-
-2. Then, in your Client Component, you can define a form like this one, and pass the action we just defined to the form `action` prop:
-
-```tsx
-"use client";
-
-import { useActionState } from "react";
-import { statefulAction } from "./action";
-
-export function TestForm() {
-  // Optionally pass initial state as the second argument.
-  // An empty object is required, even if you don't pass any initial state,
-  // since it has to match the type of the action's return object.
-  // highlight-next-line
-  const [state, action, isPending] = useActionState(statefulAction, {});
-
-  return {
-    // highlight-next-line
-    <form action={action}>
-      ...
-    </form>
-  }
-}
-```
+Take a look at [this section](/docs/recipes/form-actions#stateful-form-actions) of the documentation for an example of how to use the `useActionState()` hook to create a stateful action.

website/docs/getting-started.md

@@ -37,7 +37,7 @@ This is a basic client, without any options or middleware functions. If you want
 
 ### 2. Define a new action
 
-This is how a safe action is created. Providing a validation input schema to the function via [`inputSchema()`](/docs/define-actions/instance-methods#inputSchema), we're sure that data that comes in is type safe and validated.
+This is how a safe action is created. Providing a validation input schema to the function via [`inputSchema()`](/docs/define-actions/instance-methods#inputschema), we're sure that data that comes in is type safe and validated.
 The [`action()`](/docs/define-actions/instance-methods#action--stateaction) method lets you define what happens on the server when the action is called from client, via an async function that receives the parsed input and context as arguments. In short, this is your _server code_. **It never runs on the client.
 
 In this documentation, we'll use the Zod library to define our validation logic, but feel free to use any other library that implements the [Standard Schema](https://github.com/standard-schema/standard-schema) specification.

website/docs/migrations/v6-to-v7.md

@@ -137,7 +137,7 @@ By default, next-safe-action v7 returns validation errors in an object of the sa
 
 As already said above, by default version 7 now returns validation errors in the same format of the Zod's [`format`](https://zod.dev/ERROR_HANDLING?id=formatting-errors) method.
 
-This is customizable by using the `handleValidationErrorsShape`/`handleBindArgsValidationErrorsShape` optional functions in `schema`/`bindArgsSchemas` methods. Check out [this page](/docs/define-actions/validation-errors#customize-validation-errors-format) for more information. For example, if you need to work with flattened errors for a specific action, next-safe-action conveniently provides two functions to do that: [`flattenValidationErrors` and `flattenBindArgsValidationErrors`](/docs/define-actions/validation-errors#flattenvalidationerrors-and-flattenbindargsvalidationerrors-utility-functions).
+This is customizable by using the `handleValidationErrorsShape`/`handleBindArgsValidationErrorsShape` optional functions in `schema`/`bindArgsSchemas` methods. Check out [this page](/docs/define-actions/validation-errors#customize-validation-errors-format) for more information. For example, if you need to work with flattened errors for a specific action, next-safe-action conveniently provides two functions to do that: [`flattenValidationErrors` and `flattenBindArgsValidationErrors`](/docs/define-actions/validation-errors#formatvalidationerrors-utility-function).
 
 ### [Allow calling `action` method without `schema`](https://github.com/TheEdoRan/next-safe-action/issues/107)
 

website/docs/migrations/v7-to-v8.md

@@ -41,7 +41,7 @@ The behavior when using functions from `next/navigation` was very unclear and co
 
 This behavior has been changed in v8. Now, when you're using functions imported from `next/navigation` in an action:
 - the hooks `status` value will be `"hasNavigated"` instead of `"hasSucceeded"`;
-- a new `onNavigation` callback will be triggered, both for actions and hooks, instead of `onSuccess`. This callback receives a `navigationKind` value, that indicates the type of navigation that occurred;
+- a new `onNavigation()` callback will be triggered, both for actions and hooks, instead of `onSuccess()`. This callback receives a `navigationKind` value, that indicates the type of navigation that occurred;
 - the `success` property of the middleware result will now be `false`, instead of `true`, if a navigation function was called in a middleware function or in the action's server code function.
 
 ```typescript
@@ -90,7 +90,7 @@ const result = await boundAction(input);
 
 ### ⚠️✨ Removal of deprecated `executeOnMount` hook option
 
-The deprecated `executeOnMount` hook functionality has been removed in v8. Server Actions should be used only for mutations, so it doesn't make sense to execute them on mount. Or at least, it shouldn't be a common case and, above all, a library job. If you still need to do it, just use `useEffect` to trigger the execution, however you want.
+The deprecated `executeOnMount` hook functionality has been removed in v8. Server Actions should be used only for mutations, so it doesn't make sense to execute them on mount. Or at least, it shouldn't be a common case and, above all, a library job. If you still need to do it, just use `useEffect()` to trigger the execution, however you want.
 
 ### ✨ Type-checked metadata
 
@@ -102,7 +102,7 @@ This is a big improvement in type safety over v7. Metadata is now statically typ
 
 ### ✨ Custom thrown validation error messages
 
-The `throwValidationErrors` option now accepts both a boolean (just like in v7) and an object with a `overrideErrorMessage` function, that allows you to customize the thrown `Error` message on the client side.
+The `throwValidationErrors` option now accepts both a boolean (just like in v7) and an object with a `overrideErrorMessage()` function, that allows you to customize the thrown `Error` message on the client side.
 
 ```typescript
 import { throwValidationErrors, overrideErrorMessage } from "next-safe-action";
@@ -149,9 +149,9 @@ const { data } = await action(input);
 
 ### 🔄 `schema` method renamed to `inputSchema`
 
-The library, since version 7.8.0, supports both input and output validation, respectively using the `schema` and `outputSchema` methods. In v8, the `schema` method has been renamed to `inputSchema` to better reflect its purpose, and avoid potential confusion.
+The library, since version 7.8.0, supports both input and output validation, respectively using the `schema()` and `outputSchema()` methods. In v8, the `schema()` method has been renamed to `inputSchema()` to better reflect its purpose, and avoid potential confusion.
 
-The `schema` method is deprecated and will be removed in a future version, but it's still available for backward compatibility. It's now just an alias for `inputSchema`:
+The `schema()` method is deprecated and will be removed in a future version, but it's still available for backward compatibility. It's now just an alias for `inputSchema()`:
 
 ```typescript title="v7"
 actionClient.schema(/* ... */)
@@ -162,16 +162,15 @@ actionClient.inputSchema(/* ... */)
 ```
 
 :::info UPDATE EXISTING ACTIONS
-To update your actions, you can just use the search and replace feature of your editor to replace all occurrences of `.schema` with `.inputSchema`.
+To update your actions, you can just use the search and replace feature of your editor to replace all occurrences of `.schema()` with `.inputSchema()`.
 :::
 
 
 ### 🔄 Deprecation of `useStateAction` hook
 
-The `useStateAction` hook has been deprecated. It's always been kind of a hack to begin with, and it doesn't support progressive enhancement, since it tries to do what the `useAction` and `useOptimisticAction` hooks do.
+The `useStateAction()` hook has been deprecated. It's always been kind of a hack to begin with, and it doesn't support progressive enhancement, since it tries to do what the `useAction()` and `useOptimisticAction()` hooks do.
 
-So, from now one, the recommended way to use stateful actions is to do it with the React's built in `useActionState` hook, as explained in [this section](#) of the documentation.
-#### TODO: add link
+So, from now one, the recommended way to use stateful actions is to do it with the React's built in `useActionState()` hook, as explained in [this section](/docs/recipes/form-actions#stateful-form-actions) of the documentation.
 
 ## Requirements
 

website/docs/recipes/form-actions.md

@@ -84,6 +84,8 @@ Note that if you want or need to use _stateful_ actions:
 
 Here's an example of a stateful action, using the `useActionState()` hook:
 
+1. Define a new stateful action called `statefulFormAction()`, that takes a name as input and returns the name you just passed, as well as the previous one (if any).
+
 ```typescript title="stateful-form-action.ts"
 "use server";
 
@@ -95,13 +97,15 @@ const inputSchema = zfd.formData({
   name: zfd.text(z.string().min(1).max(20)),
 });
 
-// Note that we need to explicitly give a type to `stateAction` here, for its return object.
-// This is because TypeScript can't infer the return type of the function and then "pass it" to
-// the second argument of the server code function (`prevResult`). If you don't need to access `prevResult`,
-// though, you can omit the type here, since it will be inferred just like with `action` method.
 export const statefulFormAction = action
   .inputSchema(inputSchema)
   // highlight-start
+  // Note that we need to explicitly give a type to `stateAction` here,
+  // for its return object. This is because TypeScript can't infer the
+  // return type of the function and then "pass it" to the second argument
+  // of the server code function (`prevResult`). If you don't need to
+  // access `prevResult`, though, you can omit the type here, since it
+  // will be inferred just like with `action` method.
   .stateAction<{
     prevName?: string;
     newName: string;
@@ -114,13 +118,18 @@ export const statefulFormAction = action
   // highlight-end
 ```
 
+2. Then, in your Client Component, you can define a form like this one, and pass the action we just defined to the form `action` prop:
+
 ```tsx title="stateful-form.tsx"
 "use client";
 
 import { useActionState } from "react";
 import { statefulFormAction } from "./stateful-form-action";
 
 export default function StatefulForm() {
+  // Optionally pass initial state as the second argument.
+  // An empty object is required, even if you don't pass any initial state,
+  // since it has to match the type of the action's return object.
   // highlight-start
   const [state, action, isPending] = useActionState(
     statefulFormAction,