Add JSON Schema and TypeScript to Zod Schema converters

package.json

@@ -65,6 +65,7 @@
     "is-capitalized": "^1.0.0",
     "is-svg": "^4.3.1",
     "json-schema-to-typescript": "^10.1.4",
+    "json-schema-to-zod": "^0.1.2",
     "json-to-go": "gist:0d0b8324131c80eeb7e1df20001be32f",
     "json-to-zod": "^1.1.2",
     "json-ts": "^1.6.4",
@@ -94,6 +95,7 @@
     "text-encoding-utf-8": "^1.0.2",
     "transform-json-types": "^0.7.0",
     "ts-json-schema-generator": "^0.93.0",
+    "ts-to-zod": "^1.11.0",
     "typescript": "4.3.4",
     "xml-js": "^1.6.11",
     "yaml": "^1.10.2"

pages/api/typescript-to-zod.ts

@@ -0,0 +1,36 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import { generate } from "ts-to-zod";
+import os from "os";
+import crypto from "crypto";
+import path from "path";
+
+const tmpDir = os.tmpdir?.();
+
+export default (req: NextApiRequest, res: NextApiResponse) => {
+  const { query, body } = req;
+  const { skipParseJSDoc, keepComments } = query;
+
+  const filePath =
+    path.join(tmpDir, crypto.randomBytes(16).toString("hex")) + ".ts";
+
+  try {
+    const schemaGenerator = generate({
+      sourceText: body,
+      keepComments: keepComments === "true",
+      skipParseJSDoc: skipParseJSDoc === "true"
+    });
+
+    const schema = schemaGenerator.getZodSchemasFile(filePath);
+
+    const formattedSchema = schema
+      .split(/\r?\n/)
+      .slice(1)
+      .join("\n");
+
+    res
+      .status(200)
+      .json({ schema: formattedSchema, error: schemaGenerator.errors[0] });
+  } catch (e) {
+    res.status(200).json({ error: e.message });
+  }
+};

pages/json-schema-to-zod.tsx

@@ -0,0 +1,63 @@
+import ConversionPanel from "@components/ConversionPanel";
+import { EditorPanelProps } from "@components/EditorPanel";
+import Form, { InputType } from "@components/Form";
+import { useSettings } from "@hooks/useSettings";
+import * as React from "react";
+import { useCallback } from "react";
+
+interface Settings {
+  rootName: string;
+}
+
+const formFields = [
+  {
+    type: InputType.TEXT_INPUT,
+    key: "rootName",
+    label: "Root Schema Name"
+  }
+];
+
+export default function JsonSchemaToZod() {
+  const name = "JSON Schema to Zod Schema";
+
+  const [settings, setSettings] = useSettings(name, {
+    rootName: "schema"
+  });
+
+  const transformer = useCallback(
+    async ({ value }) => {
+      const { jsonSchemaToZod } = await import("json-schema-to-zod");
+      return jsonSchemaToZod(JSON.parse(value), settings.rootName, true);
+    },
+    [settings]
+  );
+
+  const getSettingsElement = useCallback<EditorPanelProps["settingElement"]>(
+    ({ open, toggle }) => {
+      return (
+        <Form<Settings>
+          title={name}
+          onSubmit={setSettings}
+          open={open}
+          toggle={toggle}
+          formsFields={formFields}
+          initialValues={settings}
+        />
+      );
+    },
+    []
+  );
+
+  return (
+    <ConversionPanel
+      transformer={transformer}
+      editorTitle="JSON Schema"
+      editorLanguage="json"
+      editorDefaultValue="jsonSchema"
+      resultTitle="Zod Schema"
+      resultLanguage={"typescript"}
+      editorSettingsElement={getSettingsElement}
+      settings={settings}
+    />
+  );
+}

pages/typescript-to-zod.tsx

@@ -0,0 +1,86 @@
+import ConversionPanel from "@components/ConversionPanel";
+import { EditorPanelProps } from "@components/EditorPanel";
+import Form, { InputType } from "@components/Form";
+import { useSettings } from "@hooks/useSettings";
+import * as React from "react";
+import { useCallback } from "react";
+import request from "@utils/request";
+
+interface Settings {
+  keepComments: boolean;
+  skipParseJSDoc: boolean;
+}
+
+const formFields = [
+  {
+    type: InputType.SWITCH,
+    key: "keepComments",
+    label: "Keep TSDoc Comments"
+  },
+  {
+    type: InputType.SWITCH,
+    key: "skipParseJSDoc",
+    label: "Skip the creation of zod validators from JSDoc annotations"
+  }
+];
+
+export default function TypescriptToZod() {
+  const name = "JSON to Zod Schema";
+
+  const [settings, setSettings] = useSettings(name, {
+    keepComments: false,
+    skipParseJSDoc: false
+  });
+
+  const transformer = useCallback(
+    async ({ value }) => {
+      const { keepComments, skipParseJSDoc } = settings;
+      const params = new URLSearchParams({
+        keepComments,
+        skipParseJSDoc
+      }).toString();
+
+      const { schema, error } = await request(
+        `/api/typescript-to-zod?${params}`,
+        value,
+        "text/plain"
+      );
+
+      if (error) {
+        throw new Error(error);
+      }
+
+      return schema;
+    },
+    [settings]
+  );
+
+  const getSettingsElement = useCallback<EditorPanelProps["settingElement"]>(
+    ({ open, toggle }) => {
+      return (
+        <Form<Settings>
+          title={name}
+          onSubmit={setSettings}
+          open={open}
+          toggle={toggle}
+          formsFields={formFields}
+          initialValues={settings}
+        />
+      );
+    },
+    []
+  );
+
+  return (
+    <ConversionPanel
+      transformer={transformer}
+      editorTitle="TypeScript"
+      editorLanguage="typescript"
+      editorDefaultValue="typeScriptInterface"
+      resultTitle="Zod Schema"
+      resultLanguage={"typescript"}
+      editorSettingsElement={getSettingsElement}
+      settings={settings}
+    />
+  );
+}

utils/routes.tsx

@@ -145,7 +145,7 @@ export const categorizedRoutes = [
       {
         label: "to Zod Schema",
         path: "/json-to-zod",
-        packageUrl: "https://github.com/rsinohara/json-to-zod",
+        packageUrl: "https://www.npmjs.com/package/json-to-zod",
         packageName: "json-to-zod"
       }
     ]
@@ -171,6 +171,12 @@ export const categorizedRoutes = [
         path: "json-schema-to-protobuf",
         packageName: "jsonschema-protobuf",
         packageUrl: "https://github.com/okdistribute/jsonschema-protobuf"
+      },
+      {
+        label: "to Zod Schema",
+        path: "json-schema-to-zod",
+        packageName: "json-schema-to-zod",
+        packageUrl: "https://www.npmjs.com/package/json-schema-to-zod"
       }
     ]
   },
@@ -310,6 +316,12 @@ export const categorizedRoutes = [
       {
         label: "to plain JavaScript",
         path: "/typescript-to-javascript"
+      },
+      {
+        label: "to Zod Schema",
+        path: "/typescript-to-zod",
+        packageName: "ts-to-zod",
+        packageUrl: "https://www.npmjs.com/package/ts-to-zod"
       }
     ]
   },