Tanstack form basics

docs/README.md

@@ -0,0 +1,3 @@
+# Documentation
+
+This folder contains documentation on how to use the IGNE vite-react-template. You can also add project-specific docs.

docs/recipes/extending-base-ui.md

@@ -0,0 +1,38 @@
+# Extending base-ui
+
+[Base UI](https://base-ui.com) covers a bunch of generic components that we use to build our own on.
+
+Oftentimes you may want to implement base-ui as-is, but you need a generic way to apply generic styling or functionality to its compound components.  
+This doc describes a good way to do that.
+
+## Import and re-export
+
+For example a menu's Trigger should always contain an arrow:
+
+```tsx
+import { Menu as BaseMenu } from '@base-ui/react/menu';
+import ChevronRight from "assets/icons/chevron-right.svg?react";
+
+const MenuTrigger = ({children, ...rest}: BaseMenu.Trigger.Props) =>
+  <BaseMenu.Trigger {...rest}>{children}<ChevronRight /></BaseMenu.Trigger>
+
+export default {
+  ...BaseMenu,
+  Trigger: MenuTrigger,
+}
+```
+
+This way you only have to redefine the compound components that you change.  
+The suffix format (in this case `Menu`Trigger), prevents issues with reserved component names (eg. Error from Field.Error).
+
+## If you add props, always export a type
+
+```tsx
+//...
+
+export type MenuTriggerProps = BaseMenu.Trigger.Props & { icon: "chevron" | "arrow" }
+const MenuTrigger = ({children, icon, ...rest}: MenuTriggerProps) =>
+  <BaseMenu.Trigger {...rest}>{children}{icon ? <ChevronRight /> : <Arrow />}</BaseMenu.Trigger>
+
+//...
+```

docs/working-with-forms.md

@@ -0,0 +1,34 @@
+# Working with forms
+
+We use [Tanstack Form](https://tanstack.com/form/latest/docs/framework/react/guides/basic-concepts) (TSF).
+
+In `lib/forms/` you can define reusable form/field components. See the docs on [form composition](https://tanstack.com/form/latest/docs/framework/react/guides/form-composition) for more info.
+
+Form components are in `components/form/`. Tanstack Form connectors should be prefixed with `tsf-`.  
+If you need for example an Input component that is not connected to TSF, create a separate component. Be specific, a search component is `<Search />` etc.
+
+If you need something VERY specific (used only once), you may not need to make a component at all. Just use BaseUI primitives and reuse the styling classnames.
+
+## How to adopt
+
+### Error handling
+
+The first thing to do is to verify the **error object(s)** with Backend.  
+Make sure that the validation/error utils can translate the backend errors into something tanstack form understands.  
+See TODO's in `lib/forms/validation-helpers` & `lib/api/error-helpers.ts`.
+
+### Validation options
+
+- Use a validation schema (preferably generated from api spec) to do FE validation of the form. Connect to `onDynamic`.
+- If applicable, use the provided util to handle backend validation errors with `onSubmitAsync` & `mutateAndValidate`.  
+  Note: this is a temp solution.
+
+### Submission
+
+Prefer submitting with Tanstack Query (`useMutation`). An option object should be generated by heyapi.
+
+
+See the form-example route to see how it all comes together.  
+Note: Normally you would not put everything in the route file, but this is easy to remove when you start a new project.
+
+💡 Remove any example files/code you don't need in your project!

messages/en-US.json

@@ -1,6 +1,8 @@
 {
 	"$schema": "https://inlang.com/schema/inlang-message-format",
 
+	"forms_optional": "Optional",
+
 	"roles_user": "User",
 	"roles_admin": "Administrator",
 

messages/nl-NL.json

@@ -1,6 +1,8 @@
 {
 	"$schema": "https://inlang.com/schema/inlang-message-format",
 
+	"forms_optional": "Optioneel",
+
 	"roles_user": "Gebruiker",
 	"roles_admin": "Administrator",