Merge pull request #223 from SureshPradhana/json-to-yaml

Json to yaml
Bashamega · Jul 26, 2024 · 971010b · 971010b
2 parents 3bd8d1f + 52128cf
commit 971010b
Show file tree

Hide file tree

Showing 9 changed files with 180 additions and 111 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "framer-motion": "^11.2.10",
     "fuse.js": "^7.0.0",
     "html-to-jsx-transform": "^1.1.0",
+    "json-to-pretty-yaml": "^1.2.2",
     "jszip": "^3.10.1",
     "next": "^14.2.3",
     "next-navigation": "^1.0.6",

diff --git a/src/app/components/hamburger-menu.jsx b/src/app/components/hamburger-menu.jsx
@@ -34,7 +34,10 @@ export default function HamburgerMenu({ open, togglePanel, isDarkMode }) {
     } else {
       // Check each dropdown individually
       Object.keys(dropdownRefs).forEach((key) => {
-        if (dropdownRefs[key].current && !dropdownRefs[key].current.contains(event.target)) {
+        if (
+          dropdownRefs[key].current &&
+          !dropdownRefs[key].current.contains(event.target)
+        ) {
           if (openDropdown === key) {
             setOpenDropdown(null); // Close the dropdown if clicked outside of it
           }
@@ -132,7 +135,9 @@ export default function HamburgerMenu({ open, togglePanel, isDarkMode }) {
                         Editor Tools
                         <svg
                           className={`${
-                            openDropdown === "editor" ? "transform rotate-180" : ""
+                            openDropdown === "editor"
+                              ? "transform rotate-180"
+                              : ""
                           } inline-block ml-1 w-4 h-4`}
                           fill="none"
                           stroke="currentColor"
@@ -161,7 +166,9 @@ export default function HamburgerMenu({ open, togglePanel, isDarkMode }) {
                         Other Tools
                         <svg
                           className={`${
-                            openDropdown === "other" ? "transform rotate-180" : ""
+                            openDropdown === "other"
+                              ? "transform rotate-180"
+                              : ""
                           } inline-block ml-1 w-4 h-4`}
                           fill="none"
                           stroke="currentColor"

diff --git a/src/app/components/nav.jsx b/src/app/components/nav.jsx
@@ -25,7 +25,9 @@ export default function Nav({ isDarkMode, toggleTheme }) {
   };
 
   const toggleDropdown = (category) => {
-    setIsDropdownOpen((prevState) => (prevState === category ? null : category));
+    setIsDropdownOpen((prevState) =>
+      prevState === category ? null : category,
+    );
   };
 
   const handleClickOutside = (event) => {

diff --git a/src/app/components/navbar.jsx b/src/app/components/navbar.jsx
@@ -32,7 +32,11 @@ export function NavBar({ title, isDarkMode, toggleTheme }) {
             Web Dev Tools
           </h1>
         </Link>
-        <p className={`text-sm pb-1 ${isDarkMode ? "text-gray-300" : "text-gray-800"}`}>/ {title}</p>
+        <p
+          className={`text-sm pb-1 ${isDarkMode ? "text-gray-300" : "text-gray-800"}`}
+        >
+          / {title}
+        </p>
       </span>
       <div className="flex items-center">
         <button

diff --git a/src/app/convert/components/editor.jsx b/src/app/convert/components/editor.jsx
@@ -0,0 +1,15 @@
+import { Editor } from "@monaco-editor/react";
+
+export default function CodeEditor({ language, theme, value, onChange }) {
+  return (
+    <Editor
+      height="100vh"
+      width="50vw"
+      language={language}
+      theme={theme}
+      value={value}
+      onChange={onChange}
+      className=" sticky"
+    />
+  );
+}
diff --git a/src/app/convert/json-yaml/page.jsx b/src/app/convert/json-yaml/page.jsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { useState } from "react";
+import { NavBar } from "@/app/components/navbar";
+import CodeEditor from "../components/editor";
+const YAML = require('json-to-pretty-yaml');
+
+export default function HTML_JSX() {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+  const [value, setValue] = useState(`{"name": "Alice", "age": 25, "email": "[email protected]", "isStudent": false, "courses": ["Math", "Science", "History"]}`);
+  const handleChange = (val) => {
+    setValue(val);
+  };
+
+  const toggleTheme = () => {
+    const newTheme = !isDarkMode;
+    setIsDarkMode(newTheme);
+    localStorage.setItem("theme", JSON.stringify(newTheme));
+  };
+
+  const generateYAML = () => {
+    let  yaml=''
+    try{
+     yaml = YAML.stringify(JSON.parse(value));
+    }catch(error){
+     yaml =error
+    }
+    if(value=== ''){
+      yaml =''
+    }
+    return `${yaml}`;
+  };
+
+  return (
+    <main
+      className={`h-screen overflow-auto ${isDarkMode ? "bg-gray-900 text-white" : "bg-white text-black"}`}
+    >
+      <NavBar
+        title={"JSON to YAML"}
+        toggleTheme={toggleTheme}
+        isDarkMode={isDarkMode}
+      />
+      <div className="flex h-full">
+        <div>
+          <h1 className="text-center p-2">JSON</h1>
+          <CodeEditor
+            theme={isDarkMode ? "vs-dark" : "vs-light"}
+            value={value}
+            language={"json"}
+            onChange={handleChange}
+          />
+        </div>
+        <div>
+          <h1 className="text-center p-2">YAML</h1>
+          <CodeEditor
+            theme={isDarkMode ? "vs-dark" : "vs-light"}
+            language={"yaml"}
+            value={generateYAML()}
+            onChange={() => {}}
+          />
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/src/app/sitemap.xml b/src/app/sitemap.xml
@@ -95,4 +95,9 @@
     <lastmod>2024-07-23T08:03:08.323Z</lastmod>
     <priority>0.80</priority>
   </url>
+  <url>
+    <loc>https://wdt.adambashaahmednaji.com/convert/json-yaml</loc>
+    <lastmod>2024-07-26T09:23:26.676Z</lastmod>
+    <priority>0.80</priority>
+  </url>
 </urlset>