feat: add tools

src/containers/ConverterLayout/PageLinks.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import Link from "next/link";
+import { Anchor, Button, Flex, List, SimpleGrid, Stack } from "@mantine/core";
+import { FaArrowRightLong } from "react-icons/fa6";
+import { formats } from "src/enums/file.enum";
+
+const languages = formats.map(format => format.label);
+
+function groupCombinations(array: string[]): Record<string, string[]> {
+  // Create an object to hold the grouped combinations
+  const grouped = {};
+
+  // Iterate over each item in the array
+  array.forEach(from => {
+    // Filter out the same item for the "to" array
+    const targets = array.filter(to => to !== from);
+
+    // Add the "from" item as the key and the "to" items as the value array
+    grouped[from] = targets;
+  });
+
+  return grouped;
+}
+
+const groupedLanguages = groupCombinations(languages);
+
+export const PageLinks = () => {
+  return (
+    <Flex justify="space-between" align="center">
+      <Stack gap="sm" py="md" justify="center">
+        <Button
+          component={Link}
+          prefetch={false}
+          href="/editor"
+          radius="md"
+          size="sm"
+          color="dark.5"
+          autoContrast
+          w="fit-content"
+          rightSection={<FaArrowRightLong />}
+          style={{
+            boxShadow: "rgba(0, 0, 0, 0.12) 0px -3px 0px 0px inset",
+            border: "none",
+          }}
+        >
+          Open JSON Crack
+        </Button>
+      </Stack>
+      <SimpleGrid cols={4} w="fit-content">
+        {Object.entries(groupedLanguages).map(([from, tos]) => (
+          <List key={from} listStyleType="none">
+            {tos.map(to => (
+              <List.Item key={to} c="black">
+                <Anchor
+                  component={Link}
+                  prefetch={false}
+                  c="black"
+                  href={`/converter/${from.toLowerCase()}-to-${to.toLowerCase()}`}
+                >
+                  {from} to {to}
+                </Anchor>
+              </List.Item>
+            ))}
+          </List>
+        ))}
+      </SimpleGrid>
+    </Flex>
+  );
+};

src/containers/ConverterLayout/ToolPage.tsx

@@ -0,0 +1,112 @@
+import React, { useEffect, useRef } from "react";
+import { Box, Container, Flex, Paper, Text, Title } from "@mantine/core";
+import { Editor } from "@monaco-editor/react";
+import { NextSeo } from "next-seo";
+import { LuCheck, LuXCircle } from "react-icons/lu";
+import { SEO } from "src/constants/seo";
+import { PageLinks } from "src/containers/ConverterLayout/PageLinks";
+import { editorOptions } from "src/containers/ConverterLayout/options";
+import { type FileFormat, formats } from "src/enums/file.enum";
+import Layout from "src/layout/Layout";
+import { contentToJson, jsonToContent } from "src/lib/utils/jsonAdapter";
+
+interface ToolPageProps {
+  from: FileFormat;
+  to: FileFormat;
+}
+
+export const ToolPage = ({ from, to }: ToolPageProps) => {
+  const editorRef = useRef<any>(null);
+  const [contentHasError, setContentHasError] = React.useState(false);
+  const [originalContent, setOriginalContent] = React.useState("");
+  const [convertedContent, setConvertedContent] = React.useState("");
+  const [scrollPosition, setScrollPosition] = React.useState(0);
+  const [editorHeight, setEditorHeight] = React.useState(0);
+
+  useEffect(() => {
+    if (!originalContent.length) return;
+
+    (async () => {
+      try {
+        const json = await contentToJson(originalContent, from);
+        const content = await jsonToContent(JSON.stringify(json), to);
+        setConvertedContent(content);
+        setContentHasError(false);
+      } catch (_e) {
+        setContentHasError(true);
+        setConvertedContent("");
+      }
+    })();
+  }, [from, originalContent, to]);
+
+  useEffect(() => {
+    const scrollPositionRatio =
+      (scrollPosition / editorHeight) * (editorRef.current?.getContentHeight() || 0);
+
+    editorRef.current?.setScrollTop(scrollPositionRatio);
+  }, [editorHeight, scrollPosition]);
+
+  return (
+    <Layout>
+      <NextSeo
+        {...SEO}
+        title={`${formats.find(({ value }) => value === from)?.label} to ${formats.find(({ value }) => value === to)?.label} | ToDiagram`}
+        canonical={`https://todiagram.com/converter/${from}-to-${to}`}
+      />
+      <Container mt="xl" size="lg">
+        <Title c="black">
+          {formats.find(({ value }) => value === from)?.label} to{" "}
+          {formats.find(({ value }) => value === to)?.label} Converter
+        </Title>
+        <PageLinks />
+        <Flex pt="lg" gap="40">
+          <Paper mah="600px" withBorder flex="1" style={{ overflow: "hidden" }}>
+            <Box p="xs" bg="gray">
+              <Flex justify="space-between" align="center">
+                <Text c="gray.3">{formats.find(({ value }) => value === from)?.label}</Text>
+                {contentHasError && !!originalContent ? (
+                  <LuXCircle color="red" />
+                ) : (
+                  <LuCheck color="lightgreen" />
+                )}
+              </Flex>
+            </Box>
+            <Editor
+              value={originalContent}
+              onChange={value => setOriginalContent(value || "")}
+              language={from}
+              height={500}
+              options={editorOptions}
+              onMount={editor => {
+                editor.onDidContentSizeChange(() => {
+                  setEditorHeight(editor.getContentHeight());
+                });
+
+                editor.onDidScrollChange(e => {
+                  setScrollPosition(e.scrollTop);
+                });
+              }}
+            />
+          </Paper>
+          <Paper mah="600px" withBorder flex="1" style={{ overflow: "hidden" }}>
+            <Box p="xs" bg="gray">
+              <Text c="gray.3">{formats.find(({ value }) => value === to)?.label}</Text>
+            </Box>
+            <Editor
+              value={convertedContent}
+              language={to}
+              height={500}
+              options={{
+                ...editorOptions,
+                readOnly: true,
+              }}
+              onMount={editor => {
+                editorRef.current = editor;
+              }}
+            />
+          </Paper>
+        </Flex>
+      </Container>
+    </Layout>
+  );
+};

src/containers/ConverterLayout/options.ts

@@ -0,0 +1,9 @@
+import type { EditorProps } from "@monaco-editor/react";
+
+export const editorOptions: EditorProps["options"] = {
+  formatOnPaste: true,
+  stopRenderingLineAfter: -1,
+  minimap: { enabled: false },
+  stickyScroll: { enabled: false },
+  scrollBeyondLastLine: false,
+};

src/containers/Toolbar/index.tsx

@@ -6,7 +6,7 @@ import { AiOutlineFullscreen } from "react-icons/ai";
 import { FiDownload } from "react-icons/fi";
 import { LuCrown } from "react-icons/lu";
 import { SearchInput } from "src/containers/Toolbar/SearchInput";
-import { FileFormat } from "src/enums/file.enum";
+import { type FileFormat, formats } from "src/enums/file.enum";
 import { JSONCrackLogo } from "src/layout/JsonCrackLogo";
 import useFile from "src/store/useFile";
 import useModal from "src/store/useModal";
@@ -75,13 +75,7 @@ export const Toolbar = ({ isWidget = false }: ToolbarProps) => {
             onChange={e => setFormat(e as FileFormat)}
             miw={80}
             w={120}
-            data={[
-              { value: FileFormat.JSON, label: "JSON" },
-              { value: FileFormat.YAML, label: "YAML" },
-              { value: FileFormat.XML, label: "XML" },
-              { value: FileFormat.TOML, label: "TOML" },
-              { value: FileFormat.CSV, label: "CSV" },
-            ]}
+            data={formats}
             allowDeselect={false}
           />
 

src/containers/TypeLayout/PageLinks.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import Link from "next/link";
+import { Anchor, Button, Flex, List, SimpleGrid, Stack } from "@mantine/core";
+import { FaArrowRightLong } from "react-icons/fa6";
+import { formats, TypeLanguage, typeOptions } from "src/enums/file.enum";
+
+type MappedCombinations = {
+  [language: string]: string[]; // Maps each language to an array of programming languages
+};
+
+function mapLanguagesToProgramming(
+  languages: string[],
+  programmingLanguages: string[]
+): MappedCombinations {
+  const mappedCombinations: MappedCombinations = {};
+
+  // Iterate over each language
+  languages.forEach(language => {
+    // Assign the array of programming languages to each language key
+    mappedCombinations[language] = programmingLanguages;
+  });
+
+  return mappedCombinations;
+}
+
+const filterProgrammingLanguages = [TypeLanguage.TypeScript_Combined, TypeLanguage.JSON_SCHEMA];
+
+const languages = formats.map(format => format.label);
+
+const programmingLanguages = typeOptions
+  .filter(option => !filterProgrammingLanguages.includes(option.value))
+  .map(option => option.label);
+
+const groupedLanguages = mapLanguagesToProgramming(languages, programmingLanguages);
+
+export const PageLinks = () => {
+  return (
+    <Flex justify="space-between" align="center">
+      <Stack gap="sm" py="md" justify="center">
+        <Button
+          component={Link}
+          prefetch={false}
+          href="/editor"
+          radius="md"
+          size="sm"
+          color="dark.5"
+          autoContrast
+          w="fit-content"
+          rightSection={<FaArrowRightLong />}
+          style={{
+            boxShadow: "rgba(0, 0, 0, 0.12) 0px -3px 0px 0px inset",
+            border: "none",
+          }}
+        >
+          Open JSON Crack
+        </Button>
+      </Stack>
+      <SimpleGrid cols={4} w="fit-content">
+        {Object.entries(groupedLanguages).map(([from, tos]) => (
+          <List key={from} listStyleType="none">
+            {tos.map(to => (
+              <List.Item key={to} c="black">
+                <Anchor
+                  component={Link}
+                  prefetch={false}
+                  c="black"
+                  href={`/type/${from.toLowerCase()}-to-${to.toLowerCase()}`}
+                >
+                  {from} to {to}
+                </Anchor>
+              </List.Item>
+            ))}
+          </List>
+        ))}
+      </SimpleGrid>
+    </Flex>
+  );
+};

src/containers/TypeLayout/TypegenWrapper.tsx

@@ -0,0 +1,93 @@
+import React, { useEffect, useRef } from "react";
+import { Box, Container, Flex, Paper, Title, Text } from "@mantine/core";
+import { Editor } from "@monaco-editor/react";
+import { NextSeo } from "next-seo";
+import { LuCheck, LuXCircle } from "react-icons/lu";
+import { SEO } from "src/constants/seo";
+import { editorOptions } from "src/containers/ConverterLayout/options";
+import { type FileFormat, formats, type TypeLanguage, typeOptions } from "src/enums/file.enum";
+import Layout from "src/layout/Layout";
+import { generateType } from "src/lib/utils/generateType";
+import { PageLinks } from "./PageLinks";
+
+interface ConverterPagesProps {
+  from: FileFormat;
+  to: TypeLanguage;
+}
+
+export const TypegenWrapper = ({ from, to }: ConverterPagesProps) => {
+  const editorRef = useRef<any>(null);
+  const [contentHasError, setContentHasError] = React.useState(false);
+  const [originalContent, setOriginalContent] = React.useState("");
+  const [convertedContent, setConvertedContent] = React.useState("");
+
+  useEffect(() => {
+    if (!originalContent.length) return;
+
+    (async () => {
+      try {
+        const type = await generateType(originalContent, from, to);
+        setConvertedContent(type);
+        setContentHasError(false);
+      } catch (_e) {
+        setContentHasError(true);
+        setConvertedContent("");
+      }
+    })();
+  }, [from, originalContent, to]);
+
+  return (
+    <Layout>
+      <NextSeo
+        {...SEO}
+        title={`${formats.find(({ value }) => value === from)?.label} to ${typeOptions.find(({ value }) => value === to)?.label} | ToDiagram`}
+        canonical={`https://todiagram.com/converter/${from}-to-${to}`}
+      />
+      <Container mt="xl" size="lg">
+        <Title c="black">
+          {formats.find(({ value }) => value === from)?.label} to{" "}
+          {typeOptions.find(({ value }) => value === to)?.label} Converter
+        </Title>
+        <PageLinks />
+        <Flex pt="lg" gap="40">
+          <Paper mah="600px" withBorder flex="1" style={{ overflow: "hidden" }}>
+            <Box p="xs" bg="gray">
+              <Flex justify="space-between" align="center">
+                <Text c="gray.3">{formats.find(({ value }) => value === from)?.label}</Text>
+                {contentHasError && !!originalContent ? (
+                  <LuXCircle color="red" />
+                ) : (
+                  <LuCheck color="lightgreen" />
+                )}
+              </Flex>
+            </Box>
+            <Editor
+              value={originalContent}
+              onChange={value => setOriginalContent(value || "")}
+              language={from}
+              height={500}
+              options={editorOptions}
+            />
+          </Paper>
+          <Paper mah="600px" withBorder flex="1" style={{ overflow: "hidden" }}>
+            <Box p="xs" bg="gray">
+              <Text c="gray.3">{typeOptions.find(({ value }) => value === to)?.label}</Text>
+            </Box>
+            <Editor
+              value={convertedContent}
+              language={to}
+              height={500}
+              options={{
+                ...editorOptions,
+                readOnly: true,
+              }}
+              onMount={editor => {
+                editorRef.current = editor;
+              }}
+            />
+          </Paper>
+        </Flex>
+      </Container>
+    </Layout>
+  );
+};

src/enums/file.enum.ts

@@ -5,3 +5,52 @@ export enum FileFormat {
   "TOML" = "toml",
   "CSV" = "csv",
 }
+
+export const formats = [
+  { value: FileFormat.JSON, label: "JSON" },
+  { value: FileFormat.YAML, label: "YAML" },
+  { value: FileFormat.XML, label: "XML" },
+  { value: FileFormat.CSV, label: "CSV" },
+];
+
+export enum TypeLanguage {
+  TypeScript = "typescript",
+  TypeScript_Combined = "typescript/typealias",
+  Go = "go",
+  JSON_SCHEMA = "json_schema",
+  Kotlin = "kotlin",
+  Rust = "rust",
+}
+
+export const typeOptions = [
+  {
+    label: "TypeScript",
+    value: TypeLanguage.TypeScript,
+    lang: "typescript",
+  },
+  {
+    label: "TypeScript (merged)",
+    value: TypeLanguage.TypeScript_Combined,
+    lang: "typescript",
+  },
+  {
+    label: "Go",
+    value: TypeLanguage.Go,
+    lang: "go",
+  },
+  {
+    label: "JSON Schema",
+    value: TypeLanguage.JSON_SCHEMA,
+    lang: "json",
+  },
+  {
+    label: "Kotlin",
+    value: TypeLanguage.Kotlin,
+    lang: "kotlin",
+  },
+  {
+    label: "Rust",
+    value: TypeLanguage.Rust,
+    lang: "rust",
+  },
+];

src/layout/Navbar.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import Link from "next/link";
-import { Button } from "@mantine/core";
+import { Button, Menu, type MenuItemProps, Text, Stack } from "@mantine/core";
 import styled from "styled-components";
+import { LuChevronDown } from "react-icons/lu";
 import { JSONCrackLogo } from "./JsonCrackLogo";
 
 const StyledNavbarWrapper = styled.div`
@@ -9,6 +10,14 @@ const StyledNavbarWrapper = styled.div`
   transition: background 0.2s ease-in-out;
 `;
 
+const StyledMenuItem = styled(Menu.Item)<MenuItemProps & any>`
+  color: black;
+
+  &[data-hovered] {
+    background-color: #f7f7f7;
+  }
+`;
+
 const StyledNavbar = styled.nav`
   display: flex;
   justify-content: space-between;
@@ -82,17 +91,55 @@ export const Navbar = () => {
           >
             Open Source
           </Button>
-          <Button
-            variant="subtle"
-            color="black"
-            component={Link}
-            href="/docs"
-            visibleFrom="sm"
-            size="md"
-            radius="md"
-          >
-            Docs
-          </Button>
+          <Menu withArrow shadow="sm">
+            <Menu.Target>
+              <Button
+                variant="subtle"
+                color="black"
+                visibleFrom="sm"
+                size="md"
+                radius="md"
+                rightSection={<LuChevronDown />}
+              >
+                Tools
+              </Button>
+            </Menu.Target>
+            <Menu.Dropdown maw={300} bg="white">
+              <StyledMenuItem component={Link} prefetch={false} href="/converter/json-to-yaml">
+                <Stack gap="2">
+                  <Text c="black" size="sm" fw={600}>
+                    Converter
+                  </Text>
+                  <Text size="xs" c="gray.6" lineClamp={2}>
+                    Convert JSON to YAML, CSV to JSON, YAML to XML, and more.
+                  </Text>
+                </Stack>
+              </StyledMenuItem>
+              <StyledMenuItem component={Link} prefetch={false} href="/type/json-to-rust-serde">
+                <Stack gap="2">
+                  <Text c="black" size="sm" fw={600}>
+                    Generate Types
+                  </Text>
+                  <Text size="xs" c="gray.6" lineClamp={2}>
+                    Generate TypeScript types, Golang structs, Rust serde, and more.
+                  </Text>
+                </Stack>
+              </StyledMenuItem>
+              <StyledMenuItem component={Link} prefetch={false} href="/tools/json-schema">
+                <Stack gap="2">
+                  <Text c="black" size="sm" fw={600}>
+                    JSON Schema
+                  </Text>
+                  <Text size="xs" c="gray.6" lineClamp={2}>
+                    Generate JSON schema from JSON data.
+                  </Text>
+                  <Text size="xs" c="gray.6" lineClamp={2}>
+                    Generate JSON data from JSON schema.
+                  </Text>
+                </Stack>
+              </StyledMenuItem>
+            </Menu.Dropdown>
+          </Menu>
         </Center>
         <Right>
           <Button

src/lib/utils/generateType.ts

@@ -0,0 +1,23 @@
+import { type FileFormat, TypeLanguage } from "src/enums/file.enum";
+import { contentToJson } from "./jsonAdapter";
+
+export const generateType = async (input: string, format: FileFormat, output: TypeLanguage) => {
+  try {
+    const inputToJson = await contentToJson(input, format);
+    const jsonString = JSON.stringify(inputToJson);
+
+    if (output === TypeLanguage.Go) {
+      const json2go = await import("src/lib/utils/json2go.js");
+      const gofmt = await import("gofmt.js");
+      const types = json2go.default(jsonString);
+
+      return gofmt.default(types.go);
+    } else {
+      const { run } = await import("json_typegen_wasm");
+      return run("Root", jsonString, JSON.stringify({ output_mode: output }));
+    }
+  } catch (error) {
+    console.error(error);
+    return "";
+  }
+};

src/pages/_app.tsx

@@ -62,7 +62,7 @@ function JsonCrack({ Component, pageProps }: AppProps) {
         priceCurrency="USD"
         type="SoftwareApplication"
         operatingSystem="Browser"
-        keywords="json, json editor, json viewer, json formatter, json beautifier, json validator, json minifier, json compressor, json decompressor, json parser, json converter, json to yaml, json to xml, json to csv, json to tsv, json to html, json to markdown, json to base64, json to url, json to query string, json to form data, json to javascript object, json to php array, json to python dictionary, json to ruby hash, json to java object, json to c# object, json to go object, json to rust object, json to swift object, json to kotlin object, json to typescript object, json to graphql, json to sql, json to mongodb, json to yaml, yaml to json, xml to json, csv to json, tsv to json, html to json, markdown to json, base64 to json, url to json, query string to json, form data to json, javascript object to json, php array to json, python dictionary to json, ruby hash to json, java object to json, c# object to json, go object to json, rust object to json, swift object to json, kotlin object to json, typescript object to json, graphql to json, sql to json, mongodb to json, yaml to json, json to yaml, xml to json, csv to json, tsv to json, html to json, markdown to json, base64 to json, url to json, query string to json, form data to json, javascript object to json, php array to json, python dictionary to json, ruby hash to json, java object to json, c# object to json, go object to json, rust object to json, swift object to json, kotlin object to json, typescript object to json, graphql to json, sql to json, mongodb to json"
+        keywords="json, json viewer, json visualizer, json formatter, json editor, json parser, json to tree view, json to diagram, json graph, json beautifier, json validator, json to csv, json to yaml, json minifier, json schema, json data transformer, json api, online json viewer, online json formatter, online json editor, json tool"
         applicationCategory="DeveloperApplication"
         aggregateRating={{ ratingValue: "4.9", ratingCount: "19" }}
       />

src/pages/converter/csv-to-json.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { ToolPage } from "src/containers/ConverterLayout/ToolPage";
+import { FileFormat } from "src/enums/file.enum";
+
+const Page = () => {
+  return <ToolPage from={FileFormat.CSV} to={FileFormat.JSON} />;
+};
+
+export default Page;

src/pages/converter/csv-to-xml.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { ToolPage } from "src/containers/ConverterLayout/ToolPage";
+import { FileFormat } from "src/enums/file.enum";
+
+const Page = () => {
+  return <ToolPage from={FileFormat.CSV} to={FileFormat.XML} />;
+};
+
+export default Page;

src/pages/converter/csv-to-yaml.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { ToolPage } from "src/containers/ConverterLayout/ToolPage";
+import { FileFormat } from "src/enums/file.enum";
+
+const Page = () => {
+  return <ToolPage from={FileFormat.CSV} to={FileFormat.YAML} />;
+};
+
+export default Page;

src/pages/converter/json-to-csv.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { ToolPage } from "src/containers/ConverterLayout/ToolPage";
+import { FileFormat } from "src/enums/file.enum";
+
+const Page = () => {
+  return <ToolPage from={FileFormat.JSON} to={FileFormat.CSV} />;
+};
+
+export default Page;

src/pages/converter/json-to-xml.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { ToolPage } from "src/containers/ConverterLayout/ToolPage";
+import { FileFormat } from "src/enums/file.enum";
+
+const Page = () => {
+  return <ToolPage from={FileFormat.JSON} to={FileFormat.XML} />;
+};
+
+export default Page;

src/pages/converter/json-to-yaml.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { ToolPage } from "src/containers/ConverterLayout/ToolPage";
+import { FileFormat } from "src/enums/file.enum";
+
+const Page = () => {
+  return <ToolPage from={FileFormat.JSON} to={FileFormat.YAML} />;
+};
+
+export default Page;

src/pages/converter/xml-to-csv.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { ToolPage } from "src/containers/ConverterLayout/ToolPage";
+import { FileFormat } from "src/enums/file.enum";
+
+const Page = () => {
+  return <ToolPage from={FileFormat.XML} to={FileFormat.CSV} />;
+};
+
+export default Page;

src/pages/converter/xml-to-json.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { ToolPage } from "src/containers/ConverterLayout/ToolPage";
+import { FileFormat } from "src/enums/file.enum";
+
+const Page = () => {
+  return <ToolPage from={FileFormat.XML} to={FileFormat.JSON} />;
+};
+
+export default Page;

src/pages/converter/xml-to-yaml.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { ToolPage } from "src/containers/ConverterLayout/ToolPage";
+import { FileFormat } from "src/enums/file.enum";
+
+const Page = () => {
+  return <ToolPage from={FileFormat.XML} to={FileFormat.YAML} />;
+};
+
+export default Page;

src/pages/converter/yaml-to-csv.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { ToolPage } from "src/containers/ConverterLayout/ToolPage";
+import { FileFormat } from "src/enums/file.enum";
+
+const Page = () => {
+  return <ToolPage from={FileFormat.YAML} to={FileFormat.CSV} />;
+};
+
+export default Page;

src/pages/converter/yaml-to-json.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { ToolPage } from "src/containers/ConverterLayout/ToolPage";
+import { FileFormat } from "src/enums/file.enum";
+
+const Page = () => {
+  return <ToolPage from={FileFormat.YAML} to={FileFormat.JSON} />;
+};
+
+export default Page;

src/pages/converter/yaml-to-xml.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { ToolPage } from "src/containers/ConverterLayout/ToolPage";
+import { FileFormat } from "src/enums/file.enum";
+
+const Page = () => {
+  return <ToolPage from={FileFormat.YAML} to={FileFormat.XML} />;
+};
+
+export default Page;

src/pages/tools/json-schema.tsx

@@ -0,0 +1,109 @@
+import React from "react";
+import { Box, Button, Container, Flex, Paper, Title, Text } from "@mantine/core";
+import { Editor } from "@monaco-editor/react";
+import { JSONSchemaFaker } from "json-schema-faker";
+import { LuCheck, LuXCircle } from "react-icons/lu";
+import { editorOptions } from "src/containers/ConverterLayout/options";
+import { FileFormat, TypeLanguage } from "src/enums/file.enum";
+import Layout from "src/layout/Layout";
+import { generateType } from "src/lib/utils/generateType";
+import { jsonToContent } from "src/lib/utils/jsonAdapter";
+
+const JSONSchemaTool = () => {
+  const monacoRef = React.useRef<any>(null);
+  const [jsonError, setJsonError] = React.useState(false);
+  const [jsonSchemaError, setJsonSchemaError] = React.useState(false);
+  const [json, setJson] = React.useState("");
+  const [jsonSchema, setJsonSchema] = React.useState("");
+
+  React.useEffect(() => {
+    monacoRef.current?.languages.json.jsonDefaults.setDiagnosticsOptions({
+      validate: true,
+      allowComments: true,
+      enableSchemaRequest: true,
+      ...(jsonSchema && {
+        schemas: [
+          {
+            uri: "",
+            fileMatch: ["*"],
+            schema: jsonSchema,
+          },
+        ],
+      }),
+    });
+  }, [jsonSchema]);
+
+  const generateJsonSchema = async () => {
+    const jsonSchema = await generateType(json, FileFormat.JSON, TypeLanguage.JSON_SCHEMA);
+    setJsonSchema(jsonSchema);
+  };
+
+  const generateJson = async () => {
+    const randomJson = await JSONSchemaFaker.resolve(JSON.parse(jsonSchema));
+    const contents = await jsonToContent(JSON.stringify(randomJson, null, 2), FileFormat.JSON);
+    setJson(contents);
+  };
+
+  return (
+    <Layout>
+      <Container mt="xl" size="xl">
+        <Title c="black">JSON Schema Validator & Generator</Title>
+        <Flex pt="lg" gap="lg">
+          <Button
+            onClick={generateJsonSchema}
+            variant="default"
+            size="md"
+            disabled={!json.length || jsonError}
+          >
+            Generate JSON Schema
+          </Button>
+          <Button
+            onClick={generateJson}
+            variant="default"
+            size="md"
+            disabled={!jsonSchema.length || jsonSchemaError}
+          >
+            Generate JSON
+          </Button>
+        </Flex>
+        <Flex pt="lg" gap="40">
+          <Paper mah="600px" withBorder flex="1" style={{ overflow: "hidden" }}>
+            <Box p="xs" bg="gray">
+              <Flex justify="space-between" align="center">
+                <Text c="gray.3">JSON</Text>
+                {jsonError ? <LuXCircle color="red" /> : <LuCheck color="lightgreen" />}
+              </Flex>
+            </Box>
+            <Editor
+              value={json}
+              onChange={value => setJson(value || "")}
+              onValidate={errors => setJsonError(!!errors.length)}
+              language="json"
+              height={500}
+              options={editorOptions}
+              onMount={(_editor, monaco) => (monacoRef.current = monaco)}
+            />
+          </Paper>
+          <Paper mah="600px" withBorder flex="1" style={{ overflow: "hidden" }}>
+            <Box p="xs" bg="gray">
+              <Flex justify="space-between" align="center">
+                <Text c="gray.3">JSON Schema</Text>
+                {jsonSchemaError ? <LuXCircle color="red" /> : <LuCheck color="lightgreen" />}
+              </Flex>
+            </Box>
+            <Editor
+              value={jsonSchema}
+              onChange={value => setJsonSchema(value || "")}
+              onValidate={errors => setJsonSchemaError(!!errors.length)}
+              language="json"
+              height={500}
+              options={editorOptions}
+            />
+          </Paper>
+        </Flex>
+      </Container>
+    </Layout>
+  );
+};
+
+export default JSONSchemaTool;

src/pages/type/csv-to-go.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { TypegenWrapper } from "src/containers/TypeLayout/TypegenWrapper";
+import { FileFormat, TypeLanguage } from "src/enums/file.enum";
+
+const TypePage = () => {
+  return <TypegenWrapper from={FileFormat.CSV} to={TypeLanguage.Go} />;
+};
+
+export default TypePage;

src/pages/type/csv-to-kotlin.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { TypegenWrapper } from "src/containers/TypeLayout/TypegenWrapper";
+import { FileFormat, TypeLanguage } from "src/enums/file.enum";
+
+const TypePage = () => {
+  return <TypegenWrapper from={FileFormat.CSV} to={TypeLanguage.Kotlin} />;
+};
+
+export default TypePage;

src/pages/type/csv-to-rust-serde.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { TypegenWrapper } from "src/containers/TypeLayout/TypegenWrapper";
+import { FileFormat, TypeLanguage } from "src/enums/file.enum";
+
+const TypePage = () => {
+  return <TypegenWrapper from={FileFormat.CSV} to={TypeLanguage.Rust} />;
+};
+
+export default TypePage;

src/pages/type/csv-to-typescript.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { TypegenWrapper } from "src/containers/TypeLayout/TypegenWrapper";
+import { FileFormat, TypeLanguage } from "src/enums/file.enum";
+
+const TypePage = () => {
+  return <TypegenWrapper from={FileFormat.CSV} to={TypeLanguage.TypeScript} />;
+};
+
+export default TypePage;

src/pages/type/json-to-go.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { TypegenWrapper } from "src/containers/TypeLayout/TypegenWrapper";
+import { FileFormat, TypeLanguage } from "src/enums/file.enum";
+
+const TypePage = () => {
+  return <TypegenWrapper from={FileFormat.JSON} to={TypeLanguage.Go} />;
+};
+
+export default TypePage;

src/pages/type/json-to-kotlin.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { TypegenWrapper } from "src/containers/TypeLayout/TypegenWrapper";
+import { FileFormat, TypeLanguage } from "src/enums/file.enum";
+
+const TypePage = () => {
+  return <TypegenWrapper from={FileFormat.JSON} to={TypeLanguage.Kotlin} />;
+};
+
+export default TypePage;

src/pages/type/json-to-rust-serde.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { TypegenWrapper } from "src/containers/TypeLayout/TypegenWrapper";
+import { FileFormat, TypeLanguage } from "src/enums/file.enum";
+
+const TypePage = () => {
+  return <TypegenWrapper from={FileFormat.JSON} to={TypeLanguage.Rust} />;
+};
+
+export default TypePage;

src/pages/type/json-to-typescript.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { TypegenWrapper } from "src/containers/TypeLayout/TypegenWrapper";
+import { FileFormat, TypeLanguage } from "src/enums/file.enum";
+
+const TypePage = () => {
+  return <TypegenWrapper from={FileFormat.JSON} to={TypeLanguage.TypeScript} />;
+};
+
+export default TypePage;

src/pages/type/xml-to-go.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { TypegenWrapper } from "src/containers/TypeLayout/TypegenWrapper";
+import { FileFormat, TypeLanguage } from "src/enums/file.enum";
+
+const TypePage = () => {
+  return <TypegenWrapper from={FileFormat.XML} to={TypeLanguage.Go} />;
+};
+
+export default TypePage;

src/pages/type/xml-to-kotlin.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { TypegenWrapper } from "src/containers/TypeLayout/TypegenWrapper";
+import { FileFormat, TypeLanguage } from "src/enums/file.enum";
+
+const TypePage = () => {
+  return <TypegenWrapper from={FileFormat.XML} to={TypeLanguage.Kotlin} />;
+};
+
+export default TypePage;

src/pages/type/xml-to-rust-serde.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { TypegenWrapper } from "src/containers/TypeLayout/TypegenWrapper";
+import { FileFormat, TypeLanguage } from "src/enums/file.enum";
+
+const TypePage = () => {
+  return <TypegenWrapper from={FileFormat.XML} to={TypeLanguage.Rust} />;
+};
+
+export default TypePage;

src/pages/type/xml-to-typescript.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { TypegenWrapper } from "src/containers/TypeLayout/TypegenWrapper";
+import { FileFormat, TypeLanguage } from "src/enums/file.enum";
+
+const TypePage = () => {
+  return <TypegenWrapper from={FileFormat.XML} to={TypeLanguage.TypeScript} />;
+};
+
+export default TypePage;

src/pages/type/yaml-to-go.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { TypegenWrapper } from "src/containers/TypeLayout/TypegenWrapper";
+import { FileFormat, TypeLanguage } from "src/enums/file.enum";
+
+const TypePage = () => {
+  return <TypegenWrapper from={FileFormat.YAML} to={TypeLanguage.Go} />;
+};
+
+export default TypePage;

src/pages/type/yaml-to-kotlin.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { TypegenWrapper } from "src/containers/TypeLayout/TypegenWrapper";
+import { FileFormat, TypeLanguage } from "src/enums/file.enum";
+
+const TypePage = () => {
+  return <TypegenWrapper from={FileFormat.YAML} to={TypeLanguage.Kotlin} />;
+};
+
+export default TypePage;

src/pages/type/yaml-to-rust-serde.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { TypegenWrapper } from "src/containers/TypeLayout/TypegenWrapper";
+import { FileFormat, TypeLanguage } from "src/enums/file.enum";
+
+const TypePage = () => {
+  return <TypegenWrapper from={FileFormat.YAML} to={TypeLanguage.Rust} />;
+};
+
+export default TypePage;

src/pages/type/yaml-to-typescript.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { TypegenWrapper } from "src/containers/TypeLayout/TypegenWrapper";
+import { FileFormat, TypeLanguage } from "src/enums/file.enum";
+
+const TypePage = () => {
+  return <TypegenWrapper from={FileFormat.YAML} to={TypeLanguage.TypeScript} />;
+};
+
+export default TypePage;