From ea50a3fc655f329d20895fee40042ab4aa8d2be6 Mon Sep 17 00:00:00 2001
From: Corentin Thomasset <corentin.thomasset74@gmail.com>
Date: Fri, 23 Jun 2023 21:40:30 +0200
Subject: [PATCH] feat(new-tool): json to toml

---
 src/components/TextareaCopyable.vue           |  2 +
 src/tools/index.ts                            |  2 +
 src/tools/json-to-toml/index.ts               | 12 ++++++
 .../json-to-toml/json-to-toml.e2e.spec.ts     | 39 +++++++++++++++++++
 src/tools/json-to-toml/json-to-toml.vue       | 28 +++++++++++++
 5 files changed, 83 insertions(+)
 create mode 100644 src/tools/json-to-toml/index.ts
 create mode 100644 src/tools/json-to-toml/json-to-toml.e2e.spec.ts
 create mode 100644 src/tools/json-to-toml/json-to-toml.vue

diff --git a/src/components/TextareaCopyable.vue b/src/components/TextareaCopyable.vue
index 16e11512..e0c4d8fb 100644
--- a/src/components/TextareaCopyable.vue
+++ b/src/components/TextareaCopyable.vue
@@ -6,6 +6,7 @@ import jsonHljs from 'highlight.js/lib/languages/json';
 import sqlHljs from 'highlight.js/lib/languages/sql';
 import xmlHljs from 'highlight.js/lib/languages/xml';
 import yamlHljs from 'highlight.js/lib/languages/yaml';
+import iniHljs from 'highlight.js/lib/languages/ini';
 
 const props = withDefaults(
   defineProps<{
@@ -27,6 +28,7 @@ hljs.registerLanguage('json', jsonHljs);
 hljs.registerLanguage('html', xmlHljs);
 hljs.registerLanguage('xml', xmlHljs);
 hljs.registerLanguage('yaml', yamlHljs);
+hljs.registerLanguage('toml', iniHljs);
 
 const { value, language, followHeightOf, copyPlacement, copyMessage } = toRefs(props);
 const { height } = followHeightOf.value ? useElementSize(followHeightOf) : { height: ref(null) };
diff --git a/src/tools/index.ts b/src/tools/index.ts
index 1bf41c27..dea527f1 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -1,6 +1,7 @@
 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 jsonToToml } from './json-to-toml';
 import { tool as tomlToYaml } from './toml-to-yaml';
 import { tool as tomlToJson } from './toml-to-json';
 import { tool as jsonToCsv } from './json-to-csv';
@@ -81,6 +82,7 @@ export const toolsByCategory: ToolCategory[] = [
       textToNatoAlphabet,
       yamlToJson,
       jsonToYaml,
+      jsonToToml,
       listConverter,
       tomlToJson,
       tomlToYaml,
diff --git a/src/tools/json-to-toml/index.ts b/src/tools/json-to-toml/index.ts
new file mode 100644
index 00000000..13e45eaf
--- /dev/null
+++ b/src/tools/json-to-toml/index.ts
@@ -0,0 +1,12 @@
+import { Braces } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'JSON to TOML',
+  path: '/json-to-toml',
+  description: 'Parse and convert JSON to TOML.',
+  keywords: ['json', 'parse', 'toml', 'convert', 'transform'],
+  component: () => import('./json-to-toml.vue'),
+  icon: Braces,
+  createdAt: new Date('2023-06-23'),
+});
diff --git a/src/tools/json-to-toml/json-to-toml.e2e.spec.ts b/src/tools/json-to-toml/json-to-toml.e2e.spec.ts
new file mode 100644
index 00000000..b2f75871
--- /dev/null
+++ b/src/tools/json-to-toml/json-to-toml.e2e.spec.ts
@@ -0,0 +1,39 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Tool - JSON to TOML', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/json-to-toml');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('JSON to TOML - IT Tools');
+  });
+
+  test('JSON is parsed and outputs clean TOML', async ({ page }) => {
+    await page.getByTestId('input').fill(`
+{
+   "foo": "bar",
+   "list": {
+      "name": "item",
+      "another": {
+         "key": "value"
+      }
+   }
+}
+    `.trim());
+
+    const generatedJson = await page.getByTestId('area-content').innerText();
+
+    expect(generatedJson.trim()).toEqual(
+      `
+foo = "bar"
+
+[list]
+name = "item"
+
+  [list.another]
+  key = "value"
+   `.trim(),
+    );
+  });
+});
diff --git a/src/tools/json-to-toml/json-to-toml.vue b/src/tools/json-to-toml/json-to-toml.vue
new file mode 100644
index 00000000..b1d37a38
--- /dev/null
+++ b/src/tools/json-to-toml/json-to-toml.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { stringify as stringifyToml } from 'iarna-toml-esm';
+import JSON5 from 'json5';
+import { withDefaultOnError } from '../../utils/defaults';
+import type { UseValidationRule } from '@/composable/validation';
+
+const convertJsonToToml = (value: string) => [stringifyToml(JSON5.parse(value))].flat().join('\n').trim();
+
+const transformer = (value: string) => value.trim() === '' ? '' : withDefaultOnError(() => convertJsonToToml(value), '');
+
+const rules: UseValidationRule<string>[] = [
+  {
+    validator: (v: string) => v === '' || JSON5.parse(v),
+    message: 'Provided JSON is not valid.',
+  },
+];
+</script>
+
+<template>
+  <format-transformer
+    input-label="Your JSON"
+    input-placeholder="Paste your JSON here..."
+    output-label="TOML from your JSON"
+    output-language="toml"
+    :input-validation-rules="rules"
+    :transformer="transformer"
+  />
+</template>