🟢 Refactoring Issue: Integrate Zod Schema Generation into JSON to Types Converter

[shamilahmdt]

🟢 Refactoring Issue: Integrate Zod Schema Generation into JSON to Types Converter

Time: ~30-45 minutes
Difficulty: Intermediate
Skill Level: React & TypeScript Enthusiasts

Help enhance the existing JSON to Types Converter (src/pages/DevUtilities/devutilities/JsonTypesConverter.jsx) by integrating a client-side Zod Schema Generator directly into it. This keeps our JSON conversion utilities unified under a single tool rather than creating redundant panels.

---

📌 Description

Currently, the JSON Types Converter converts raw JSON payloads into TypeScript Interfaces/Types or Go Structs. We want to extend it so that users can select Zod Schema as a target language.

When Zod is selected, the tool will recursively parse the input JSON and generate a copy-ready Zod validation schema (e.g. const RootObject = z.object({ ... })), with options to generate inferred TypeScript types and import statements.

---

🎯 Requirements

1. Metadata & Description Updates

Update the tool names and descriptions across the app:

• Sidebar (src/config/sidebarSections.js):
  • Update the label and description:

    {
      label: "JSON to Types & Zod Converter",
      description: "Convert JSON structures into TypeScript interfaces, Go structs, or Zod schemas offline.",
      path: "/devutilities/json-types-converter",
    }

• Dashboard Overview (src/pages/DevUtilities/DevUtilities.jsx):
  • Update the card:

    {
      title: "JSON to Types & Zod Converter",
      description: "Convert raw JSON into TypeScript interfaces/types, Go structs, or Zod schemas with customizable configurations.",
      path: "/devutilities/json-types-converter",
      // ... keep existing icon ...
    }

---

2. UI Modifications (JsonTypesConverter.jsx)

• Language Selection:
  • Add a Zod button/option to the target language selector (alongside TypeScript and Go).
• Contextual Options Panel:
  • When Zod is selected, hide the TypeScript specific configurations (e.g. Interface vs Type) and Go configurations (e.g. Export Fields).
  • Show Zod-specific checkboxes:
    • Prepend Zod Import: Boolean checkbox (Default: true) to prepend import { z } from "zod"; at the top of the output.
    • Generate Type Inference: Boolean checkbox (Default: true) to append export type RootObject = z.infer<typeof rootObjectSchema>; at the bottom of the output.
    • Make All Fields Optional: Boolean checkbox (Default: false) to append .optional() to each property.

---

3. Zod Generation Logic (JsonTypesConverter.jsx)

Create a recursive generator function generateZodSchema(obj, name, options) inside the component:

• Parse the input JSON into an object.
• Recursively map JSON values to their Zod schema equivalents:
  • String values $\rightarrow$ z.string()
  • Boolean values $\rightarrow$ z.boolean()
  • Number values $\rightarrow$ Check if it's an integer (Number.isInteger()) to return z.number().int(), otherwise return z.number()
  • Null values $\rightarrow$ z.any().nullable()
  • Array values $\rightarrow$ Output z.array(...). Infer the inner type using the first array element. If the array is empty, default to z.array(z.any()).
  • Object values $\rightarrow$ Recursively build the schema inside z.object({ ... }).
• If Make All Fields Optional is checked, append .optional() to all schema field values (e.g. id: z.number().optional()).
• If Prepend Zod Import is enabled: prepend the ES import statement.
• If Generate Type Inference is enabled: append the z.infer type export mapping the root object type.

---

✅ Expected Result

Users should be able to:

• Paste JSON into the editor, toggle the language to Zod, and instantly view the generated schema code.
• Use Zod options to append/remove type definitions and imports dynamically.
• Download the output as a .ts file or copy it with a single click.