From cb784953ffdde72edf1de9eab339e2970adc5337 Mon Sep 17 00:00:00 2001
From: James Kerrane <hi@jameskerrane.com>
Date: Sat, 2 Sep 2023 02:46:07 -0600
Subject: [PATCH] Adds YAML to Zod Schema, YAML category

- Adds a YAML to Zod Schema transformer by first converting the YAML to JSON using the same method as the YAML to JSON transformer, then converting the JSON to Zod Schema using the same method as the JSON to Zod Schema transformer.
- Creates a new YAML category in the sidebar
---
 pages/yaml-to-zod.tsx | 64 +++++++++++++++++++++++++++++++++++++++++++
 utils/routes.tsx      | 32 +++++++++++++---------
 2 files changed, 83 insertions(+), 13 deletions(-)
 create mode 100644 pages/yaml-to-zod.tsx

diff --git a/pages/yaml-to-zod.tsx b/pages/yaml-to-zod.tsx
new file mode 100644
index 00000000..78e373b3
--- /dev/null
+++ b/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}
+    />
+  );
+}
diff --git a/utils/routes.tsx b/utils/routes.tsx
index 2d1bb2d0..b998bc96 100644
--- a/utils/routes.tsx
+++ b/utils/routes.tsx
@@ -350,25 +350,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",
@@ -381,10 +391,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"