Adds YAML to Zod Schema, YAML category

pages/yaml-to-zod.tsx

@@ -0,0 +1,64 @@
+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 yaml from "yaml";
+
+interface Settings {
+  rootName: string;
+}
+
+const formFields = [
+  {
+    type: InputType.TEXT_INPUT,
+    key: "rootName",
+    label: "Root Schema Name"
+  }
+];
+
+export default function YamlToZod() {
+  const name = "YAML to Zod Schema";
+
+  const [settings, setSettings] = useSettings(name, {
+    rootName: "schema"
+  });
+
+  const transformer = useCallback(
+    async ({ value }) => {
+      const yamlToJSON = JSON.stringify(yaml.parse(value));
+      const { jsonToZod } = await import("json-to-zod");
+      return jsonToZod(JSON.parse(yamlToJSON), 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="YAML"
+      editorLanguage="yaml"
+      resultTitle="Zod Schema"
+      resultLanguage={"typescript"}
+      editorSettingsElement={getSettingsElement}
+      settings={settings}
+    />
+  );
+}

utils/routes.tsx

@@ -355,25 +355,35 @@ export const categorizedRoutes = [
     ]
   },
   {
-    category: "Others",
+    category: "YAML",
     iconName: "",
     content: [
       {
-        label: "XML to JSON",
-        path: "/xml-to-json",
-        packageName: "xml-js",
-        packageUrl: "https://github.com/nashwaan/xml-js"
-      },
-      {
-        label: "YAML to JSON",
+        label: "to JSON",
         path: "/yaml-to-json",
         packageName: "yaml",
         packageUrl: "https://github.com/tj/js-yaml"
       },
       {
-        label: "YAML to TOML",
+        label: "to TOML",
         path: "/yaml-to-toml"
       },
+      {
+        label: "to Zod Schema",
+        path: "/yaml-to-zod"
+      }
+    ]
+  },
+  {
+    category: "Others",
+    iconName: "",
+    content: [
+      {
+        label: "XML to JSON",
+        path: "/xml-to-json",
+        packageName: "xml-js",
+        packageUrl: "https://github.com/nashwaan/xml-js"
+      },
       {
         label: "Markdown to HTML",
         path: "/markdown-to-html",
@@ -386,10 +396,6 @@ export const categorizedRoutes = [
         packageUrl: "https://www.npmjs.com/package/@iarna/toml",
         packageName: "@iarna/toml"
       },
-      {
-        label: "TOML to YAML",
-        path: "/toml-to-yaml"
-      },
       {
         label: "Cadence to Go",
         path: "/cadence-to-go"