Feature/Json2Converter

package.json

@@ -51,7 +51,9 @@
   "dependencies": {
     "@highlightjs/vue-plugin": "^2.1.0",
     "@types/dompurify": "^3.0.2",
+    "@types/js-yaml": "^4.0.8",
     "@types/marked": "^5.0.1",
+    "@types/papaparse": "^5.3.10",
     "balm-ui": "^10.22.3",
     "crypto-js": "^4.1.1",
     "curlconverter": "^4.8.0",
@@ -60,11 +62,13 @@
     "electron-is-dev": "^2.0.0",
     "highlight.js": "^11.8.0",
     "jose": "^4.14.4",
+    "js-yaml": "^4.1.0",
     "marked": "^7.0.2",
     "marked-highlight": "^2.0.4",
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.43",
     "npm-run-all": "^4.1.5",
+    "papaparse": "^5.4.1",
     "pinia": "^2.1.4",
     "qr-scanner": "^1.4.2",
     "qrcode": "^1.5.3",

src/modules/JsonConverter/JsonConverter.vue

@@ -0,0 +1,177 @@
+<script setup lang="ts">
+
+import Input from "@/components/InputComponent.vue";
+import InputOptions from "@/components/InputOptionsComponent.vue";
+import useThrottle from "@/hooks/useThrottle";
+import { ref, type Ref , watch} from "vue";
+import {jsonToYaml, yamlToJson, jsonToCsv, csvToJson} from ".";
+
+type objectOrString = Object | string; 
+
+const inputType = ref('');
+const inputText: Ref<string> = ref('');
+const outputType = ref('');
+const outputText: Ref<objectOrString> = ref('');
+
+function clear() {
+    inputText.value = " ";
+}
+
+function handlePasteText(newVal: string) {
+    inputText.value = newVal
+}
+
+function handleInputChange(newVal: string){
+    inputText.value = newVal;
+}
+
+const options = [
+  {
+    label: 'JSON',
+    value: 'json'
+  },
+  {
+    label: 'YAML',
+    value: 'yaml'
+  },
+  {
+    label: 'CSV',
+    value: 'csv'
+  },
+]
+
+
+function handleConversion(newVal: string){
+  inputText.value = newVal;
+
+  if (inputType.value == 'json' && outputType.value == 'yaml') {
+
+    outputText.value = jsonToYaml(inputText.value);
+
+  } else if (inputType.value === 'yaml' && outputType.value === 'json') {
+
+    outputText.value = yamlToJson(inputText.value);
+
+  } else if (inputType.value === 'json' && outputType.value === 'csv') {
+
+    outputText.value = jsonToCsv(inputText.value);
+
+  }  else if (inputType.value === 'csv' && outputType.value === 'json') {
+
+    outputText.value = csvToJson(inputText.value);
+
+  } else if (inputType.value === 'yaml' && outputType.value === 'csv') {
+
+    outputText.value = 'Cannot convert Yaml to CSV'
+
+  }  else if (inputType.value === 'csv' && outputType.value === 'yaml') {
+
+    outputText.value = 'Cannot convert CSV to Yaml'
+
+  }   else if (inputType.value === 'json' && outputType.value === 'json') {
+
+    outputText.value = 'Input object is already in JSON'
+
+  }   else if (inputType.value === 'csv' && outputType.value === 'csv') {
+
+    outputText.value = 'Input object is already in CSV'
+
+  }   else if (inputType.value === 'yaml' && outputType.value === 'yaml') {
+
+    outputText.value = 'Input object is already in Yaml'
+
+  }
+}
+
+</script>
+
+
+<template>
+    <div class="container">
+    <div class="expression">
+      <section>
+        <ui-select
+          id="inputType"
+          v-model="inputType"
+          :options="options"
+        >
+          Input Type
+        </ui-select>
+      </section>
+
+      <InputOptions label="Input Text:" @paste="handlePasteText" @reset="clear" :hideReset="false" :hideCopy="true" />
+            <Input input-type="textarea" placeholder="Enter Content..." :value="inputText" class="inputElem" @update:value="useThrottle($event, handleConversion)"/>
+    </div>
+
+
+
+      <div class="output">
+      <section>
+        <ui-select
+          id="outputType"
+          v-model="outputType"
+          :options="options"
+        >
+          Output Type
+        </ui-select>
+      </section>
+      <InputOptions label="Output Text:" :hideClipboard="true" :hideReset="true" :copyContent="outputText" />
+            <Input input-type="textarea" disabled placeholder="Results will appear here" class="no-resize inputText grow" :value="outputText"></Input>
+    </div>
+
+
+    </div>
+</template>
+
+
+<style scoped>
+.container {
+    width: 100%;
+    padding: 10px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1em;
+}
+
+.container .output,
+.container .expression {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+}
+
+.container .inputElem {
+    flex-grow: 1;
+    font-size: 25px;
+    color: var(--color-text);
+}
+
+.match {
+    color: green;
+}
+
+.container .tSel::selection,
+.container .tSel::-moz-selection {
+    color: transparent !important;
+    background-color: blue;
+}
+
+.container .grow {
+    flex-grow: 1;
+}
+
+@media screen and (max-width: 800px) {
+    .container {
+        display: block;
+    }
+
+
+    .container .inputElem {
+        height: 300px;
+    }
+
+    .container .inputElem .styledInput {
+        width: 100%;
+    }
+}
+</style>

src/modules/JsonConverter/config.json

@@ -0,0 +1 @@
+{ "slug": "json_converter", "name": "Json Converter", "icon": "sync_alt" }

src/modules/JsonConverter/index.ts

@@ -0,0 +1,61 @@
+import * as yaml from "js-yaml"; 
+import * as papa from "papaparse";
+
+const yamlSettings = {
+    flowlevel: 3,
+    styles: {
+        '!!int' : 'hexadecimal', 
+        '!!null': 'camelcase'
+    }
+}
+
+export function jsonToYaml(jsonString: string): string {
+    try { 
+        const jsonObject = JSON.parse(jsonString);
+        const yamlString = yaml.dump(jsonObject, yamlSettings)
+        return yamlString;
+    } catch (e) {
+        console.log("Error converting JSON to YAML", e);
+        return "There was an error"; 
+    }
+}
+
+export function yamlToJson(yamlObject: any): string {
+    try { 
+        const jsonObject = yaml.load(yamlObject);
+        const jsonString = `${JSON.stringify(jsonObject, null, 2)}`
+        return jsonString;
+    } catch (e) {
+        console.log("Error converting YAML to JSON", e);
+        return "There was an error"; 
+    }
+}
+
+export function jsonToCsv(jsonString: string): string {
+    try {
+        const jsonObject = JSON.parse(jsonString);
+        const csvObject = papa.unparse(jsonObject);
+        return csvObject; 
+    } catch (e) {
+        console.log("Error converting JSON to CSV", e); 
+        return "There was an error";
+    }
+}
+
+export function csvToJson(csvData: any): string {
+    try {
+
+        const jsonObject = papa.parse(csvData, {
+            header: false,
+            skipEmptyLines: true,
+        });
+
+        const cleanJsonObject = jsonObject.data;
+        var jsonString = `${JSON.stringify(cleanJsonObject, null, 2)}`;
+        return jsonString; 
+    } catch (e) {
+        console.log("Error converting CSV to JSON", e); 
+        return "There was an error";
+    }
+}
+

src/routes.ts

@@ -40,6 +40,11 @@ const routes: Routes = {
         "name": "HTML Preview",
         "icon": "code"
     },
+    "json_converter": {
+        "dir": "JsonConverter",
+        "name": "Json Converter",
+        "icon": "sync_alt"
+    },
     "json_formatter": {
         "dir": "JsonFormatter",
         "name": "JSON Formatter",