feat(new-tool): yaml and json converters

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>