Add JSON to Zod Schema converter (#331)

Author: csandman

package.json

@@ -66,6 +66,7 @@
     "is-svg": "^4.3.1",
     "json-schema-to-typescript": "^10.1.4",
     "json-to-go": "gist:0d0b8324131c80eeb7e1df20001be32f",
+    "json-to-zod": "^1.1.2",
     "json-ts": "^1.6.4",
     "json_typegen_wasm": "^0.7.0",
     "jsonld": "^5.2.0",

pages/json-to-zod.tsx

@@ -0,0 +1,62 @@
+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 JsonToZod() {
+  const name = "JSON to Zod Schema";
+
+  const [settings, setSettings] = useSettings(name, {
+    rootName: "schema"
+  });
+
+  const transformer = useCallback(
+    async ({ value }) => {
+      const { jsonToZod } = await import("json-to-zod");
+      return jsonToZod(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"
+      editorLanguage="json"
+      resultTitle="Zod Schema"
+      resultLanguage={"typescript"}
+      editorSettingsElement={getSettingsElement}
+      settings={settings}
+    />
+  );
+}

utils/routes.tsx

@@ -141,6 +141,12 @@ export const categorizedRoutes = [
         path: "/json-to-toml",
         packageUrl: "https://www.npmjs.com/package/@iarna/toml",
         packageName: "@iarna/toml"
+      },
+      {
+        label: "to Zod Schema",
+        path: "/json-to-zod",
+        packageUrl: "https://github.com/rsinohara/json-to-zod",
+        packageName: "json-to-zod"
       }
     ]
   },

yarn.lock

@@ -5997,6 +5997,13 @@ json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1:
   version "1.0.0"
   resolved "https://gist.github.com/0d0b8324131c80eeb7e1df20001be32f.git#3c19dec6061daff466b13783fea94c49e4f62e86"
 
+json-to-zod@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/json-to-zod/-/json-to-zod-1.1.2.tgz#626d4432f329c51089120858c9404234567dda1b"
+  integrity sha512-6YDvnY8oOS5v1H1CWUvfNJkCI3SGbmCwWMytndPHzwyrr1K9ayNXL4rvOSf7WCy3c3Pxu2brvt4idZCkKh9gfQ==
+  dependencies:
+    prettier "^2.3.2"
+
 json-ts@^1.6.4:
   version "1.6.4"
   resolved "https://registry.yarnpkg.com/json-ts/-/json-ts-1.6.4.tgz#e4423b8ccdb3069306f4727d6a579790675abbd0"
@@ -7853,6 +7860,11 @@ prettier@^2.1.1, prettier@^2.2.0:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.2.tgz#ef280a05ec253712e486233db5c6f23441e7342d"
   integrity sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==
 
+prettier@^2.3.2:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.1.tgz#e235806850d057f97bb08368a4f7d899f7760c64"
+  integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==
+
 pretty-hrtime@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"