Function generateConformForm

src/forms/conform.ts:3–46

()

import { getConfig } from "../config";

export const generateConformForm = () => {
  const runtimeDependency = getConfig().get("runtimeDependency") || "@remix-run/node";
  return [
    'import { useForm } from "@conform-to/react";',
    'import { parse } from "@conform-to/zod";',
    'import { Form, useActionData } from "@remix-run/react";',
    `import { json } from "${runtimeDependency}";`,
    `import type { ActionFunctionArgs } from "${runtimeDependency}";`,
    'import { z } from "zod";',
    "",
    "const schema = z.object({",
    "  // Add your schema here",
    "});",
    "",
    "export async function action({ request }: ActionFunctionArgs) {",
    "  const formData = await request.formData();",
    "  const submission = parse(formData, { schema });",
    "",
    "  if (!submission.value || submission.intent !== 'submit') {",
    "    return json(submission, { status: 400 });",
    "  }",
    "",
    "  // Do something with the data",
    "  return json(submission);",
    "}",
    "",
    "export default function FormRoute() {",
    "  const lastSubmission = useActionData<typeof action>();",
    "  const [form, fields] = useForm({",
    "    lastSubmission,",
    "    onValidate({ formData }) {",
    "      return parse(formData, { schema });",
    "    },",
    "  });",
    "",
    "  return (",
    '    <Form method="post" {...form.props}>',
    "      {/** Your form elements here */}",
    "      <button>Submit</button>",
    "    </Form>",
    "  );",
    "}",
  ].join("\n");
};