feat(form): setup tanstack form

.oxlintrc.json

@@ -27,6 +27,9 @@
     "import"
   ],
   "rules": {
+    // Correctness
+    "react/no-children-prop": ["off"],
+
     // Perf
     "no-await-in-loop": "error",
     "no-useless-call": "error",

messages/en.json

@@ -1,5 +1,9 @@
 {
   "$schema": "https://inlang.com/schema/inlang-message-format",
   "app_name": "Devsantara Kit",
-  "app_description": "The blueprint for your next big idea"
+  "app_description": "The blueprint for your next big idea",
+
+  "common_error_something_went_wrong": "Something went wrong",
+  "common_error_form_validation_title": "There is something wrong with the form",
+  "common_error_form_validation_description": "Please review the form and correct them to continue."
 }

messages/id.json

@@ -1,5 +1,9 @@
 {
   "$schema": "https://inlang.com/schema/inlang-message-format",
   "app_name": "Devsantara Kit",
-  "app_description": "Rancangan dasar untuk ide besar kamu berikutnya"
+  "app_description": "Rancangan dasar untuk ide besar kamu berikutnya",
+
+  "common_error_something_went_wrong": "Terjadi kesalahan",
+  "common_error_form_validation_title": "Ada kesalahan pada formulir",
+  "common_error_form_validation_description": "Silakan periksa kembali formulir dan perbaiki untuk melanjutkan."
 }

messages/zh-CN.json

@@ -1,5 +1,9 @@
 {
   "$schema": "https://inlang.com/schema/inlang-message-format",
   "app_name": "Devsantara 工具包",
-  "app_description": "您下一个伟大构想的基石计划"
+  "app_description": "您下一个伟大构想的基石计划",
+
+  "common_error_something_went_wrong": "出现了一些问题",
+  "common_error_form_validation_title": "表单存在问题",
+  "common_error_form_validation_description": "请检查表单并更正后继续。"
 }

package.json

@@ -46,6 +46,9 @@
     "@posthog/react": "^1.5.2",
     "@t3-oss/env-core": "^0.13.10",
     "@tailwindcss/vite": "^4.1.18",
+    "@tanstack/react-form": "^1.27.7",
+    "@tanstack/react-form-devtools": "^0.2.12",
+    "@tanstack/react-form-start": "^1.27.7",
     "@tanstack/react-router": "^1.144.0",
     "@tanstack/react-start": "^1.145.5",
     "class-variance-authority": "^0.7.1",

src/devtools/form-devtools.tsx

@@ -0,0 +1,13 @@
+import type { TanStackDevtoolsReactPlugin } from '@tanstack/react-devtools';
+import { FormDevtoolsPanel } from '@tanstack/react-form-devtools';
+
+/**
+ * Currently this cause error during dependency optimization when using Cloudflare.
+ * @see {@link https://github.com/TanStack/devtools/issues/91}
+ * @see {@link https://github.com/TanStack/devtools/issues/187}
+ * @see {@link https://github.com/TanStack/devtools/issues/289}
+ */
+export const tanstackFormDevtools: TanStackDevtoolsReactPlugin = {
+  name: 'TanStack Form',
+  render: <FormDevtoolsPanel />,
+};

src/devtools/router-devtools.tsx

@@ -4,4 +4,5 @@ import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';
 export const tanstackRouterDevtools: TanStackDevtoolsReactPlugin = {
   name: 'TanStack Router',
   render: <TanStackRouterDevtoolsPanel />,
+  defaultOpen: true,
 };