@ez-gform/codegen 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 webadeva
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,49 @@
+# @ez-gform/codegen
+
+Turn a form's schema into code you can paste: TypeScript types, a React
+component, or a plain HTML form. Runs in Node and the browser.
+
+Just want the output? `npx @ez-gform/cli <google-form-url> --format react`
+does this for you, no install needed.
+
+## Install
+
+```sh
+pnpm add @ez-gform/codegen
+```
+
+## Usage
+
+`schema` is a `FormSchema` from `@ez-gform/core`'s `parseFormHtml`.
+
+```ts
+import {
+  generateHtmlForm,
+  generateReactComponent,
+  generateSchemaJson,
+  generateTypes,
+} from "@ez-gform/codegen";
+
+generateSchemaJson(schema); // the schema as JSON text
+generateTypes(schema, { name: "MyForm" }); // MyFormSchema const + MyFormValues type
+generateReactComponent(schema, { name: "MyForm" }); // a .tsx component using useGoogleForm
+generateHtmlForm(schema); // a plain <form> that posts to Google, no JS
+```
+
+Each function returns a string.
+
+| Function                 | Options                                                             |
+| ------------------------ | ------------------------------------------------------------------- |
+| `generateSchemaJson`     | `pretty` (default `true`)                                           |
+| `generateTypes`          | `name` (default: from the form title)                               |
+| `generateReactComponent` | `name`, `typescript` (default `true`; `false` emits plain JS + JSX) |
+| `generateHtmlForm`       | none                                                                |
+
+Also exported: `toPascalCase`, `toIdentifier` (the naming helpers used above).
+
+## Good to know
+
+- File upload questions can't be submitted without a Google sign-in, so they
+  are left out of the types and shown as a disabled note in React/HTML output.
+- Output is self-contained: the schema is embedded, so you can paste a single
+  file.

package/dist/index.cjs

@@ -0,0 +1,614 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  generateHtmlForm: () => generateHtmlForm,
+  generateReactComponent: () => generateReactComponent,
+  generateSchemaJson: () => generateSchemaJson,
+  generateTypes: () => generateTypes,
+  toIdentifier: () => toIdentifier,
+  toPascalCase: () => toPascalCase
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/generate-html.ts
+var import_core = require("@ez-gform/core");
+var escapeHtml = (value) => {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+};
+var attr = (name, value) => {
+  return `${name}="${escapeHtml(value)}"`;
+};
+var renderChoiceInputs = (question, inputType) => {
+  const options = question.options ?? [];
+  const rows = options.map((option) => {
+    if (option.isOther) {
+      return [
+        `<label><input type="${inputType}" ${attr("name", question.entryId)} value="__other_option__"> Other:</label>`,
+        `<input type="text" ${attr("name", `${question.entryId}.other_option_response`)}>`
+      ].join("\n    ");
+    }
+    return `<label><input type="${inputType}" ${attr("name", question.entryId)} ${attr("value", option.value)}> ${escapeHtml(option.value)}</label>`;
+  });
+  return rows.join("\n    ");
+};
+var renderGrid = (question) => {
+  const inputType = question.type === "checkbox_grid" ? "checkbox" : "radio";
+  const columns = question.options ?? [];
+  const rows = (question.rows ?? []).map((row) => {
+    const cells = columns.map((col) => {
+      return `<td><input type="${inputType}" ${attr("name", row.entryId)} ${attr("value", col.value)}></td>`;
+    }).join("");
+    return `  <tr><th>${escapeHtml(row.label)}</th>${cells}</tr>`;
+  }).join("\n");
+  return `<table>
+${rows}
+</table>`;
+};
+var renderQuestion = (question) => {
+  const label = `<label>${escapeHtml(question.title)}${question.required ? " *" : ""}</label>`;
+  const requiredAttr = question.required ? " required" : "";
+  switch (question.type) {
+    case "short_answer":
+      return `${label}
+<input type="text" ${attr("name", question.entryId)}${requiredAttr}>`;
+    case "paragraph":
+      return `${label}
+<textarea ${attr("name", question.entryId)}${requiredAttr}></textarea>`;
+    case "multiple_choice":
+      return `${label}
+${renderChoiceInputs(question, "radio")}`;
+    case "checkboxes":
+      return `${label}
+${renderChoiceInputs(question, "checkbox")}`;
+    case "dropdown": {
+      const options = (question.options ?? []).map((option) => {
+        return `  <option ${attr("value", option.value)}>${escapeHtml(option.value)}</option>`;
+      }).join("\n");
+      return `${label}
+<select ${attr("name", question.entryId)}${requiredAttr}>
+${options}
+</select>`;
+    }
+    case "linear_scale": {
+      const min = question.scale?.min ?? 1;
+      const max = question.scale?.max ?? 5;
+      const inputs = [];
+      for (let value = min; value <= max; value++) {
+        inputs.push(
+          `<label><input type="radio" ${attr("name", question.entryId)} ${attr("value", String(value))}> ${value}</label>`
+        );
+      }
+      return `${label}
+${inputs.join("\n")}`;
+    }
+    case "grid":
+    case "checkbox_grid":
+      return `${label}
+${renderGrid(question)}`;
+    case "date": {
+      const inputs = [];
+      if (question.date?.includeYear !== false) {
+        inputs.push(
+          `<input type="number" ${attr("name", `${question.entryId}_year`)} placeholder="Year">`
+        );
+      }
+      inputs.push(
+        `<input type="number" ${attr("name", `${question.entryId}_month`)} placeholder="Month">`
+      );
+      inputs.push(
+        `<input type="number" ${attr("name", `${question.entryId}_day`)} placeholder="Day">`
+      );
+      if (question.date?.includeTime) {
+        inputs.push(
+          `<input type="number" ${attr("name", `${question.entryId}_hour`)} placeholder="Hour">`
+        );
+        inputs.push(
+          `<input type="number" ${attr("name", `${question.entryId}_minute`)} placeholder="Minute">`
+        );
+      }
+      return `${label}
+${inputs.join("\n")}`;
+    }
+    case "time":
+      return `${label}
+<input type="number" ${attr("name", `${question.entryId}_hour`)} placeholder="Hour">
+<input type="number" ${attr("name", `${question.entryId}_minute`)} placeholder="Minute">`;
+    case "file_upload":
+      return `${label}
+<!-- file_upload is not supported by the Forms API without sign-in; no input rendered -->`;
+    default:
+      return label;
+  }
+};
+var generateHtmlForm = (schema) => {
+  const { formResponse } = (0, import_core.formUrls)(schema.formId || "REPLACE_WITH_FORM_ID");
+  const body = schema.questions.map(renderQuestion).join("\n\n");
+  const hiddenFields = [];
+  if (schema.multiPage) {
+    hiddenFields.push(
+      `<input type="hidden" ${attr("name", "fbzx")} ${attr("value", schema.fbzx ?? "")}>`
+    );
+  }
+  return `<!-- ${escapeHtml(schema.title)} -->
+<form action="${escapeHtml(formResponse)}" method="POST">
+${hiddenFields.join("\n")}
+${body}
+
+<button type="submit">Submit</button>
+</form>
+`;
+};
+
+// src/names.ts
+var splitWords = (input) => {
+  return input.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2").replace(/[^a-zA-Z0-9]+/g, " ").trim().split(/\s+/).filter((word) => {
+    return word.length > 0;
+  });
+};
+var toPascalCase = (input) => {
+  const words = splitWords(input);
+  const pascal = words.map((word) => {
+    const lower = word.toLowerCase();
+    return lower.charAt(0).toUpperCase() + lower.slice(1);
+  }).join("");
+  return pascal.length > 0 ? pascal : "Form";
+};
+var RESERVED_WORDS = /* @__PURE__ */ new Set([
+  "break",
+  "case",
+  "catch",
+  "class",
+  "const",
+  "continue",
+  "debugger",
+  "default",
+  "delete",
+  "do",
+  "else",
+  "export",
+  "extends",
+  "finally",
+  "for",
+  "function",
+  "if",
+  "import",
+  "in",
+  "instanceof",
+  "new",
+  "return",
+  "super",
+  "switch",
+  "this",
+  "throw",
+  "try",
+  "typeof",
+  "var",
+  "void",
+  "while",
+  "with",
+  "enum",
+  "implements",
+  "interface",
+  "let",
+  "package",
+  "private",
+  "protected",
+  "public",
+  "static",
+  "yield",
+  "await",
+  "null",
+  "true",
+  "false"
+]);
+var toIdentifier = (input) => {
+  const words = splitWords(input);
+  if (words.length === 0) return "Form";
+  const [first, ...rest] = words;
+  const camel = first.toLowerCase() + rest.map((word) => {
+    const lower = word.toLowerCase();
+    return lower.charAt(0).toUpperCase() + lower.slice(1);
+  }).join("");
+  const prefixed = /^[0-9]/.test(camel) ? `_${camel}` : camel;
+  return RESERVED_WORDS.has(prefixed) ? `${prefixed}_` : prefixed;
+};
+
+// src/generate-react.ts
+var JSX_TEXT_ESCAPES = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;",
+  "{": "&#123;",
+  "}": "&#125;"
+};
+var jsxEscape = (value) => {
+  return value.replace(/[&<>{}]/g, (ch) => {
+    return JSX_TEXT_ESCAPES[ch];
+  });
+};
+var q = (value) => {
+  return JSON.stringify(value);
+};
+var hasOtherOption = (question) => {
+  return question.options?.some((option) => {
+    return option.isOther;
+  }) ?? false;
+};
+var renderShortText = (question, multiline) => {
+  const tag = multiline ? "textarea" : "input";
+  const typeAttr = multiline ? "" : ' type="text"';
+  return `<${tag}${typeAttr} {...form.register(${q(question.entryId)})}${question.required ? " required" : ""} />`;
+};
+var renderRadioGroup = (question) => {
+  const entryId = q(question.entryId);
+  const options = (question.options ?? []).map((option) => {
+    if (option.isOther) {
+      return `        <label>
+          <input
+            type="radio"
+            name={form.register(${entryId}).name}
+            checked={typeof form.values[${entryId}] === "object"}
+            onChange={() => form.setValue(${entryId}, { other: "" })}
+          />
+          Other:
+          <input
+            type="text"
+            onChange={(e) => form.setValue(${entryId}, { other: e.target.value })}
+          />
+        </label>`;
+    }
+    const value = q(option.value);
+    return `        <label>
+          <input
+            type="radio"
+            name={form.register(${entryId}).name}
+            value={${value}}
+            checked={form.register(${entryId}).value === ${value}}
+            onChange={() => form.setValue(${entryId}, ${value})}
+          />
+          ${jsxEscape(option.value)}
+        </label>`;
+  }).join("\n");
+  return `<div role="radiogroup">
+${options}
+      </div>`;
+};
+var renderSelect = (question) => {
+  const options = (question.options ?? []).map((option) => {
+    return `          <option value={${q(option.value)}}>${jsxEscape(option.value)}</option>`;
+  }).join("\n");
+  return `<select {...form.register(${q(question.entryId)})}${question.required ? " required" : ""}>
+          <option value="">Select\u2026</option>
+${options}
+        </select>`;
+};
+var renderCheckboxGroup = (question) => {
+  const entryId = q(question.entryId);
+  const options = (question.options ?? []).map((option) => {
+    if (option.isOther) {
+      return `        <label>
+          <input
+            type="checkbox"
+            onChange={(e) => form.setValue(${entryId}, e.target.checked ? { other: "" } : undefined)}
+          />
+          Other:
+          <input
+            type="text"
+            onChange={(e) => form.setValue(${entryId}, { other: e.target.value })}
+          />
+        </label>`;
+    }
+    const value = q(option.value);
+    return `        <label>
+          <input type="checkbox" {...form.registerCheckbox(${entryId}, ${value})} />
+          ${jsxEscape(option.value)}
+        </label>`;
+  }).join("\n");
+  return `<div>
+${options}
+      </div>`;
+};
+var renderLinearScale = (question) => {
+  const entryId = q(question.entryId);
+  const min = question.scale?.min ?? 1;
+  const max = question.scale?.max ?? 5;
+  const items = [];
+  for (let value = min; value <= max; value++) {
+    items.push(`        <label>
+          <input
+            type="radio"
+            name={form.register(${entryId}).name}
+            checked={form.register(${entryId}).value === ${q(String(value))}}
+            onChange={() => form.setValue(${entryId}, ${value})}
+          />
+          ${value}
+        </label>`);
+  }
+  const lowLabel = question.scale?.lowLabel;
+  const highLabel = question.scale?.highLabel;
+  return `<div role="radiogroup">
+        ${lowLabel ? `<span>${jsxEscape(lowLabel)}</span>` : ""}
+${items.join("\n")}
+        ${highLabel ? `<span>${jsxEscape(highLabel)}</span>` : ""}
+      </div>`;
+};
+var renderGrid2 = (question) => {
+  const isCheckbox = question.type === "checkbox_grid";
+  const columns = question.options ?? [];
+  const headerCells = columns.map((col) => {
+    return `<th key={${q(col.value)}}>${jsxEscape(col.value)}</th>`;
+  }).join("\n              ");
+  const rows = (question.rows ?? []).map((row) => {
+    const entryId = q(row.entryId);
+    const cells = columns.map((col) => {
+      const value = q(col.value);
+      if (isCheckbox) {
+        return `<td key={${value}}><input type="checkbox" {...form.registerCheckbox(${entryId}, ${value})} /></td>`;
+      }
+      return `<td key={${value}}>
+                <input
+                  type="radio"
+                  name={form.register(${entryId}).name}
+                  checked={form.register(${entryId}).value === ${value}}
+                  onChange={() => form.setValue(${entryId}, ${value})}
+                />
+              </td>`;
+    }).join("\n              ");
+    return `          <tr>
+            <th>${jsxEscape(row.label)}</th>
+              ${cells}
+          </tr>`;
+  }).join("\n");
+  return `<table>
+        <thead>
+          <tr>
+            <th />
+              ${headerCells}
+          </tr>
+        </thead>
+        <tbody>
+${rows}
+        </tbody>
+      </table>`;
+};
+var renderDate = (question) => {
+  const entryId = q(question.entryId);
+  return `<input
+        type="date"
+        required={${question.required ? "true" : "false"}}
+        onChange={(e) => {
+          const parts = e.target.value.split("-").map(Number);
+          const [year, month, day] = parts;
+          if (month === undefined || day === undefined) return;
+          form.setValue(${entryId}, { year, month, day });
+        }}
+      />`;
+};
+var renderTime = (question) => {
+  const entryId = q(question.entryId);
+  return `<input
+        type="time"
+        required={${question.required ? "true" : "false"}}
+        onChange={(e) => {
+          const parts = e.target.value.split(":").map(Number);
+          const [hour, minute] = parts;
+          if (hour === undefined || minute === undefined) return;
+          form.setValue(${entryId}, { hour, minute });
+        }}
+      />`;
+};
+var renderQuestion2 = (question) => {
+  const label = `<label>${jsxEscape(question.title)}${question.required ? " *" : ""}</label>`;
+  const description = question.description ? `
+      <p>${jsxEscape(question.description)}</p>` : "";
+  let field;
+  switch (question.type) {
+    case "short_answer":
+      field = renderShortText(question, false);
+      break;
+    case "paragraph":
+      field = renderShortText(question, true);
+      break;
+    case "multiple_choice":
+      field = renderRadioGroup(question);
+      break;
+    case "dropdown":
+      field = renderSelect(question);
+      break;
+    case "checkboxes":
+      field = renderCheckboxGroup(question);
+      break;
+    case "linear_scale":
+      field = renderLinearScale(question);
+      break;
+    case "grid":
+    case "checkbox_grid":
+      field = renderGrid2(question);
+      break;
+    case "date":
+      field = renderDate(question);
+      break;
+    case "time":
+      field = renderTime(question);
+      break;
+    case "file_upload":
+      field = `<p>"${jsxEscape(question.title)}" is a file upload question and is not supported by Google Forms submission without sign-in.</p>`;
+      break;
+    default:
+      field = `<input {...form.register(${q(question.entryId)})} />`;
+  }
+  return `    <div key={${q(question.id)}}>
+      ${label}${description}
+      ${field}
+    </div>`;
+};
+var renderSection = (section, questionsById) => {
+  const heading = section.title ? `    <h2>${jsxEscape(section.title)}</h2>
+` : "";
+  const description = section.description ? `    <p>${jsxEscape(section.description)}</p>
+` : "";
+  const body = section.questionIds.map((id) => {
+    return questionsById.get(id);
+  }).filter((question) => {
+    return question !== void 0;
+  }).map(renderQuestion2).join("\n");
+  return `${heading}${description}${body}`;
+};
+var usesOther = (question) => {
+  return hasOtherOption(question) && (question.type === "multiple_choice" || question.type === "checkboxes");
+};
+var generateReactComponent = (schema, options = {}) => {
+  const typescript = options.typescript ?? true;
+  const name = options.name ?? `${toPascalCase(schema.title)}Form`;
+  const schemaJson = JSON.stringify(schema, null, 2);
+  void usesOther;
+  const questionsById = new Map(
+    schema.questions.map((qn) => {
+      return [qn.id, qn];
+    })
+  );
+  const body = schema.sections.length > 1 || schema.sections[0]?.title && schema.sections[0].title.length > 0 ? schema.sections.map((section) => {
+    return renderSection(section, questionsById);
+  }).join("\n") : schema.questions.map(renderQuestion2).join("\n");
+  const schemaDeclaration = typescript ? `${schemaJson} as const satisfies FormSchema` : schemaJson;
+  const typeImport = typescript ? `import type { FormSchema } from "@ez-gform/core";
+` : "";
+  return `${typeImport}import { useGoogleForm } from "@ez-gform/react";
+
+const schema = ${schemaDeclaration};
+
+export function ${name}() {
+  const form = useGoogleForm({ formId: schema.formId, schema });
+
+  return (
+    <form
+      onSubmit={form.submit}
+    >
+      <h1>${jsxEscape(schema.title)}</h1>
+      ${schema.description ? `<p>${jsxEscape(schema.description)}</p>` : ""}
+${body}
+
+      <div>Status: {form.status}</div>
+      {form.errors && form.errors.length > 0 && (
+        <ul>
+          {form.errors.map((error, index) => (
+            <li key={index}>{error.message}</li>
+          ))}
+        </ul>
+      )}
+
+      <button type="submit" disabled={form.status === "submitting"}>
+        Submit
+      </button>
+    </form>
+  );
+}
+`;
+};
+
+// src/generate-types.ts
+var quote = (value) => {
+  return JSON.stringify(value);
+};
+var hasOtherOption2 = (question) => {
+  return question.options?.some((option) => {
+    return option.isOther;
+  }) ?? false;
+};
+var fieldType = (question) => {
+  switch (question.type) {
+    case "short_answer":
+    case "paragraph":
+      return "string";
+    case "multiple_choice":
+    case "dropdown":
+      return hasOtherOption2(question) ? "string | { other: string }" : "string";
+    case "checkboxes":
+      return hasOtherOption2(question) ? "(string | { other: string })[]" : "string[]";
+    case "linear_scale":
+      return "number";
+    case "date":
+      return "DateValue";
+    case "time":
+      return "TimeValue";
+    case "grid":
+    case "checkbox_grid": {
+      const rowIds = (question.rows ?? []).map((row) => {
+        return quote(row.entryId);
+      });
+      const keyType = rowIds.length > 0 ? rowIds.join(" | ") : "string";
+      return `Record<${keyType}, string | string[]>`;
+    }
+    case "file_upload":
+      return void 0;
+    default:
+      return "string";
+  }
+};
+var generateTypes = (schema, options = {}) => {
+  const name = options.name ?? toPascalCase(schema.title);
+  const schemaJson = JSON.stringify(schema, null, 2);
+  const usesDate = schema.questions.some((q2) => {
+    return q2.type === "date";
+  });
+  const usesTime = schema.questions.some((q2) => {
+    return q2.type === "time";
+  });
+  const extraTypeImports = [
+    usesDate ? "DateValue" : void 0,
+    usesTime ? "TimeValue" : void 0
+  ].filter((t) => {
+    return t !== void 0;
+  });
+  const fields = [];
+  for (const question of schema.questions) {
+    const type = fieldType(question);
+    if (type === void 0) continue;
+    const optional = question.required ? "" : "?";
+    fields.push(`  ${quote(question.entryId)}${optional}: ${type};`);
+  }
+  const importLine = ["FormSchema", ...extraTypeImports].sort().join(", ");
+  return `import type { ${importLine} } from "@ez-gform/core";
+
+export const ${name}Schema = ${schemaJson} as const satisfies FormSchema;
+
+export type ${name}Values = {
+${fields.join("\n")}
+};
+`;
+};
+
+// src/schema-json.ts
+var generateSchemaJson = (schema, options = {}) => {
+  const pretty = options.pretty ?? true;
+  return pretty ? JSON.stringify(schema, null, 2) : JSON.stringify(schema);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  generateHtmlForm,
+  generateReactComponent,
+  generateSchemaJson,
+  generateTypes,
+  toIdentifier,
+  toPascalCase
+});
+//# sourceMappingURL=index.cjs.map