From 0a42334f771ef1ab742a452856f8ba40c3d91633 Mon Sep 17 00:00:00 2001
From: Jake Howell <jacob@coder.com>
Date: Mon, 3 Aug 2026 19:08:30 +1000
Subject: [PATCH] refactor(site): demui `Form.stories.tsx` stories (#27762)

Replace MUI `TextField` in the Form Storybook stories with `FormField`,
wired through Formik and `getFormHelpers` so the examples match how real
forms use the layout components.
---
 site/src/components/Form/Form.stories.tsx     | 42 ++++++++++++-----
 .../FullPageForm/FullPageForm.stories.tsx     | 47 +++++++++++--------
 2 files changed, 59 insertions(+), 30 deletions(-)

diff --git a/site/src/components/Form/Form.stories.tsx b/site/src/components/Form/Form.stories.tsx
index 7ba89fa440..527cfefc65 100644
--- a/site/src/components/Form/Form.stories.tsx
+++ b/site/src/components/Form/Form.stories.tsx
@@ -1,27 +1,47 @@
-import TextField from "@mui/material/TextField";
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useFormik } from "formik";
+import type { FC } from "react";
+import { FormField } from "#/components/FormField/FormField";
+import { getFormHelpers } from "#/utils/formUtils";
 import { Form, FormFields, FormSection } from "./Form";
 
-const meta: Meta<typeof Form> = {
-	title: "components/Form",
-	component: Form,
-	args: {
-		children: (
+const ExampleForm: FC<{ direction?: "horizontal" | "vertical" }> = ({
+	direction,
+}) => {
+	const form = useFormik({
+		initialValues: {
+			workspaceName: "",
+			owner: "",
+		},
+		onSubmit: () => {},
+	});
+	const getFieldHelpers = getFormHelpers(form);
+
+	return (
+		<Form direction={direction} onSubmit={form.handleSubmit}>
 			<FormSection
 				title="General"
 				description="The name of the workspace and its owner. Only admins can create workspaces for other users."
 			>
 				<FormFields>
-					<TextField label="Workspace Name" />
-					<TextField label="Owner" />
+					<FormField
+						label="Workspace Name"
+						field={getFieldHelpers("workspaceName")}
+					/>
+					<FormField label="Owner" field={getFieldHelpers("owner")} />
 				</FormFields>
 			</FormSection>
-		),
-	},
+		</Form>
+	);
+};
+
+const meta: Meta<typeof ExampleForm> = {
+	title: "components/Form",
+	component: ExampleForm,
 };
 
 export default meta;
-type Story = StoryObj<typeof Form>;
+type Story = StoryObj<typeof ExampleForm>;
 
 export const Vertical: Story = {
 	args: {
diff --git a/site/src/components/FullPageForm/FullPageForm.stories.tsx b/site/src/components/FullPageForm/FullPageForm.stories.tsx
index ac270a45ba..6815ab4880 100644
--- a/site/src/components/FullPageForm/FullPageForm.stories.tsx
+++ b/site/src/components/FullPageForm/FullPageForm.stories.tsx
@@ -1,28 +1,37 @@
-import TextField from "@mui/material/TextField";
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useFormik } from "formik";
 import type { FC } from "react";
 import { Button } from "#/components/Button/Button";
 import { FormFooter } from "#/components/Form/Form";
+import { FormField } from "#/components/FormField/FormField";
+import { getFormHelpers } from "#/utils/formUtils";
 import { FullPageForm, type FullPageFormProps } from "./FullPageForm";
 
-const Template: FC<FullPageFormProps> = (props) => (
-	<FullPageForm {...props}>
-		<form
-			onSubmit={(e) => {
-				e.preventDefault();
-			}}
-		>
-			<div className="flex flex-col gap-4">
-				<TextField fullWidth label="Field 1" name="field1" />
-				<TextField fullWidth label="Field 2" name="field2" />
-				<FormFooter>
-					<Button variant="outline">Cancel</Button>
-					<Button type="submit">Save</Button>
-				</FormFooter>
-			</div>
-		</form>
-	</FullPageForm>
-);
+const Template: FC<FullPageFormProps> = (props) => {
+	const form = useFormik({
+		initialValues: {
+			field1: "",
+			field2: "",
+		},
+		onSubmit: () => {},
+	});
+	const getFieldHelpers = getFormHelpers(form);
+
+	return (
+		<FullPageForm {...props}>
+			<form onSubmit={form.handleSubmit}>
+				<div className="flex flex-col gap-4">
+					<FormField label="Field 1" field={getFieldHelpers("field1")} />
+					<FormField label="Field 2" field={getFieldHelpers("field2")} />
+					<FormFooter>
+						<Button variant="outline">Cancel</Button>
+						<Button type="submit">Save</Button>
+					</FormFooter>
+				</div>
+			</form>
+		</FullPageForm>
+	);
+};
 
 const meta: Meta<typeof FullPageForm> = {
 	title: "components/FullPageForm",