feat(new-tool): yaml and json converters

package.json

@@ -73,7 +73,8 @@
     "ua-parser-js": "^1.0.35",
     "uuid": "^8.3.2",
     "vue": "^3.2.47",
-    "vue-router": "^4.1.6"
+    "vue-router": "^4.1.6",
+    "yaml": "^2.2.1"
   },
   "devDependencies": {
     "@playwright/test": "^1.32.2",

pnpm-lock.yaml

@@ -124,6 +124,9 @@ dependencies:
   vue-router:
     specifier: ^4.1.6
     version: 4.1.6(vue@3.2.47)
+  yaml:
+    specifier: ^2.2.1
+    version: 2.2.1
 
 devDependencies:
   '@playwright/test':
@@ -9029,6 +9032,11 @@ packages:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
     dev: true
 
+  /yaml@2.2.1:
+    resolution: {integrity: sha512-e0WHiYql7+9wr4cWMx3TVQrNwejKaEe7/rHNmQmqRjazfOP5W8PB6Jpebb5o6fIapbz9o9+2ipcaTM2ZwDI6lw==}
+    engines: {node: '>= 14'}
+    dev: false
+
   /yamljs@0.3.0:
     resolution: {integrity: sha512-C/FsVVhht4iPQYXOInoxUM/1ELSf9EsgKH34FofQOp6hwCPrW4vG4w5++TED3xRUo8gD7l0P1J1dLlDYzODsTQ==}
     hasBin: true

src/tools/index.ts

@@ -1,6 +1,8 @@
 import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
+import { tool as yamlToJson } from './yaml-to-json-converter';
+import { tool as jsonToYaml } from './json-to-yaml-converter';
 import { tool as ipv6UlaGenerator } from './ipv6-ula-generator';
 import { tool as ipv4AddressConverter } from './ipv4-address-converter';
 import { tool as benchmarkBuilder } from './benchmark-builder';
@@ -66,6 +68,8 @@ export const toolsByCategory: ToolCategory[] = [
       colorConverter,
       caseConverter,
       textToNatoAlphabet,
+      yamlToJson,
+      jsonToYaml,
     ],
   },
   {

src/tools/json-to-yaml-converter/index.ts

@@ -0,0 +1,12 @@
+import { Braces } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'JSON to YAML converter',
+  path: '/json-to-yaml-converter',
+  description: 'Simply convert JSON to YAML with this live online converter.',
+  keywords: ['yaml', 'to', 'json'],
+  component: () => import('./json-to-yaml.vue'),
+  icon: Braces,
+  createdAt: new Date('2023-04-10'),
+});

src/tools/json-to-yaml-converter/json-to-yaml.e2e.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Tool - json to yaml', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/json-to-yaml-converter');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('JSON to YAML converter - IT Tools');
+  });
+
+  test('json is parsed and output clean yaml', async ({ page }) => {
+    await page.getByTestId('input').fill('{"foo":"bar","list":["item",{"key":"value"}]}');
+
+    const generatedJson = await page.getByTestId('area-content').innerText();
+
+    expect(generatedJson.trim()).toEqual(`foo: bar\nlist:\n  - item\n  - key: value`.trim());
+  });
+});

src/tools/json-to-yaml-converter/json-to-yaml.vue

@@ -0,0 +1,29 @@
+<template>
+  <format-transformer
+    input-label="Your JSON"
+    input-placeholder="Paste your JSON here..."
+    output-label="YAML from your JSON"
+    output-language="yaml"
+    :input-validation-rules="rules"
+    :transformer="transformer"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UseValidationRule } from '@/composable/validation';
+import { isNotThrowing } from '@/utils/boolean';
+import { withDefaultOnError } from '@/utils/defaults';
+import { stringify } from 'yaml';
+import JSON5 from 'json5';
+
+const transformer = (value: string) => withDefaultOnError(() => stringify(JSON5.parse(value)), '');
+
+const rules: UseValidationRule<string>[] = [
+  {
+    validator: (value: string) => value === '' || isNotThrowing(() => stringify(JSON5.parse(value))),
+    message: 'Provided JSON is not valid.',
+  },
+];
+</script>
+
+<style lang="less" scoped></style>

src/tools/yaml-to-json-converter/index.ts

@@ -0,0 +1,12 @@
+import { AlignJustified } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'YAML to JSON converter',
+  path: '/yaml-to-json-converter',
+  description: 'Simply convert YAML to JSON with this live online converter.',
+  keywords: ['yaml', 'to', 'json'],
+  component: () => import('./yaml-to-json.vue'),
+  icon: AlignJustified,
+  createdAt: new Date('2023-04-10'),
+});

src/tools/yaml-to-json-converter/yaml-to-json.e2e.spec.ts

@@ -0,0 +1,31 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Tool - Yaml to json', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/yaml-to-json-converter');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('YAML to JSON converter - IT Tools');
+  });
+
+  test('Yaml is parsed and output clean json', async ({ page }) => {
+    await page.getByTestId('input').fill('foo: bar\nlist:\n  - item\n  - key: value');
+
+    const generatedJson = await page.getByTestId('area-content').innerText();
+
+    expect(generatedJson.trim()).toEqual(
+      `
+{
+   "foo": "bar",
+   "list": [
+      "item",
+      {
+         "key": "value"
+      }
+   ]
+}
+   `.trim(),
+    );
+  });
+});

src/tools/yaml-to-json-converter/yaml-to-json.vue

@@ -0,0 +1,32 @@
+<template>
+  <format-transformer
+    input-label="Your YAML"
+    input-placeholder="Paste your yaml here..."
+    output-label="JSON from your YAML"
+    output-language="json"
+    :input-validation-rules="rules"
+    :transformer="transformer"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UseValidationRule } from '@/composable/validation';
+import { isNotThrowing } from '@/utils/boolean';
+import { withDefaultOnError } from '@/utils/defaults';
+import { parse as parseYaml } from 'yaml';
+
+const transformer = (value: string) =>
+  withDefaultOnError(() => {
+    const obj = parseYaml(value);
+    return obj ? JSON.stringify(obj, null, 3) : '';
+  }, '');
+
+const rules: UseValidationRule<string>[] = [
+  {
+    validator: (value: string) => isNotThrowing(() => parseYaml(value)),
+    message: 'Provided YAML is not valid.',
+  },
+];
+</script>
+
+<style lang="less" scoped></style>