feat(new-tool): csv to json converter

Author: javierpr0

components.d.ts

@@ -58,6 +58,7 @@ declare module '@vue/runtime-core' {
     CrontabGenerator: typeof import('./src/tools/crontab-generator/crontab-generator.vue')['default']
     CSelect: typeof import('./src/ui/c-select/c-select.vue')['default']
     'CSelect.demo': typeof import('./src/ui/c-select/c-select.demo.vue')['default']
+    CsvToJson: typeof import('./src/tools/csv-to-json/csv-to-json.vue')['default']
     CTable: typeof import('./src/ui/c-table/c-table.vue')['default']
     'CTable.demo': typeof import('./src/ui/c-table/c-table.demo.vue')['default']
     CTextCopyable: typeof import('./src/ui/c-text-copyable/c-text-copyable.vue')['default']
@@ -159,6 +160,7 @@ declare module '@vue/runtime-core' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     RsaKeyPairGenerator: typeof import('./src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue')['default']
+    SafelinkDecoder: typeof import('./src/tools/safelink-decoder/safelink-decoder.vue')['default']
     SlugifyString: typeof import('./src/tools/slugify-string/slugify-string.vue')['default']
     SpanCopyable: typeof import('./src/components/SpanCopyable.vue')['default']
     SqlPrettify: typeof import('./src/tools/sql-prettify/sql-prettify.vue')['default']

locales/en.yml

@@ -104,6 +104,10 @@ tools:
     title: JSON to CSV
     description: Convert JSON to CSV with automatic header detection.
 
+  csv-to-json:
+    title: CSV to JSON
+    description: Convert CSV to JSON with automatic header detection.
+
   camera-recorder:
     title: Camera recorder
     description: Take a picture or record a video from your webcam or camera.

locales/es.yml

@@ -4,8 +4,8 @@ home:
     favoriteTools: 'Tus herramientas favoritas'
     allTools: 'Todas las herramientas'
   subtitle: 'Herramientas practicas para desarrolladores'
-  toggleMenu: 'Toggle menu'
-  home: Home
+  toggleMenu: 'Alternar menú'
+  home: Inicio
   uiLib: 'UI Lib'
   support: 'Apoyar el desarrollo de IT-Tools'
   buyMeACoffee: 'Buy me a coffee'
@@ -48,7 +48,7 @@ about:
   notFound: '404 Not Found'
   sorry: 'Lo sentimos, esta página no parece existir'
   maybe: 'Tal vez el caché esté haciendo cosas raras, ¿probamos a refrescar forzosamente?'
-  backHome: 'Back home'
+  backHome: 'Volver al inicio'
 favoriteButton:
   remove: 'Quitar de favoritos'
   add: 'Añadir a favoritos'
@@ -60,12 +60,16 @@ tools:
   categories:
     favorite-tools: 'Tus herramientas favoritas'
     crypto: Crypto
-    converter: Converter
+    converter: Conversor
     web: Web
-    images and videos: 'Images & Videos'
+    images and videos: 'Imágenes y vídeos'
     development: Development
     network: Network
     math: Math
     measurement: Measurement
     text: Text
-    data: Data
+    data: Data
+
+  csv-to-json:
+    title: CSV a JSON
+    description: Convierte CSV a JSON con detección automática de cabeceras.

locales/fr.yml

@@ -79,3 +79,7 @@ tools:
     copied: Le token a été copié
     length: Longueur
     tokenPlaceholder: Le token...
+
+  csv-to-json:
+    title: CSV vers JSON
+    description: Convertit les fichiers CSV en JSON avec détection automatique des en-têtes.

locales/pt.yml

@@ -69,3 +69,7 @@ tools:
     measurement: 'Medidas'
     text: 'Texto'
     data: 'Dados'
+
+  csv-to-json:
+    title: CSV para JSON
+    description: Converte CSV para JSON com detecção automática de cabeçalhos.

locales/uk.yml

@@ -69,3 +69,7 @@ tools:
     measurement: Вимірювання
     text: Текст
     data: Дані
+
+  csv-to-json:
+    title: 'CSV в JSON'
+    description: 'Конвертуйте CSV в JSON з автоматичним визначенням заголовків.'

src/tools/csv-to-json/csv-to-json.e2e.spec.ts

@@ -0,0 +1,29 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Tool - CSV to JSON', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/csv-to-json');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('CSV to JSON - IT Tools');
+  });
+
+  test('Provided csv is converted to json', async ({ page }) => {
+    await page.getByTestId('input').fill(`
+Age,Salary,Gender,Country,Purchased
+18,20000,Male,Germany,N
+19,22000,Female,France,N
+    `);
+
+    const generatedJson = await page.getByTestId('area-content').innerText();
+
+    expect(generatedJson.trim()).toEqual(`
+[
+  {"Age": "18", "Salary": "20000", "Gender": "Male", "Country": "Germany", "Purchased": "N"},
+  {"Age": "19", "Salary": "22000", "Gender": "Female", "Country": "France", "Purchased": "N"}
+]
+   `.trim(),
+    );
+  });
+});

src/tools/csv-to-json/csv-to-json.service.test.ts

@@ -0,0 +1,67 @@
+import { describe, expect, it } from 'vitest';
+import { convertCsvToArray, getHeaders } from './csv-to-json.service';
+
+describe('csv-to-json service', () => {
+  describe('getHeaders', () => {
+    it('extracts all the keys from the first line of the CSV', () => {
+      expect(getHeaders('a,b,c\n1,2,3\n4,5,6')).toEqual(['a', 'b', 'c']);
+    });
+
+    it('returns an empty array if the CSV is empty', () => {
+      expect(getHeaders('')).toEqual([]);
+    });
+  });
+
+  describe('convertCsvToArray', () => {
+    it('converts a CSV string to an array of objects', () => {
+      const csv = 'a,b\n1,2\n3,4';
+
+      expect(convertCsvToArray(csv)).toEqual([
+        { a: '1', b: '2' },
+        { a: '3', b: '4' },
+      ]);
+    });
+
+    it('converts a CSV string with different keys to an array of objects', () => {
+      const csv = 'a,b,c\n1,2,\n3,,4';
+
+      expect(convertCsvToArray(csv)).toEqual([
+        { a: '1', b: '2', c: undefined },
+        { a: '3', b: undefined, c: '4' },
+      ]);
+    });
+
+    it('when a value is "null", it is converted to null', () => {
+      const csv = 'a,b\nnull,2';
+
+      expect(convertCsvToArray(csv)).toEqual([
+        { a: null, b: '2' },
+      ]);
+    });
+
+    it('when a value is empty, it is converted to undefined', () => {
+      const csv = 'a,b\n,2\n,3';
+
+      expect(convertCsvToArray(csv)).toEqual([
+        { a: undefined, b: '2' },
+        { a: undefined, b: '3' },
+      ]);
+    });
+
+    it('when a value is wrapped in double quotes, the quotes are removed', () => {
+      const csv = 'a,b\n"hello, world",2';
+
+      expect(convertCsvToArray(csv)).toEqual([
+        { a: 'hello, world', b: '2' },
+      ]);
+    });
+
+    it('when a value contains an escaped double quote, the escape character is removed', () => {
+      const csv = 'a,b\nhello \\"world\\",2';
+
+      expect(convertCsvToArray(csv)).toEqual([
+        { a: 'hello "world"', b: '2' },
+      ]);
+    });
+  });
+});

src/tools/csv-to-json/csv-to-json.service.ts

@@ -0,0 +1,41 @@
+export { getHeaders, convertCsvToArray };
+
+function getHeaders(csv: string): string[] {
+  if (csv.trim() === '') {
+    return [];
+  }
+
+  const firstLine = csv.split('\n')[0];
+  return firstLine.split(/[,;]/).map(header => header.trim());
+}
+function deserializeValue(value: string): unknown {
+  if (value === 'null') {
+    return null;
+  }
+
+  if (value === '') {
+    return undefined;
+  }
+
+  const valueAsString = value.replace(/\\n/g, '\n').replace(/\\r/g, '\r').replace(/\\"/g, '"');
+
+  if (valueAsString.startsWith('"') && valueAsString.endsWith('"')) {
+    return valueAsString.slice(1, -1);
+  }
+
+  return valueAsString;
+}
+
+function convertCsvToArray(csv: string): Record<string, unknown>[] {
+  const lines = csv.split('\n');
+  const headers = getHeaders(csv);
+
+  return lines.slice(1).map(line => {
+    // Split on comma or semicolon not within quotes
+    const data = line.split(/[,;](?=(?:(?:[^"]*"){2})*[^"]*$)/).map(value => value.trim());
+    return headers.reduce((obj, header, index) => {
+      obj[header] = deserializeValue(data[index]);
+      return obj;
+    }, {} as Record<string, unknown>);
+  });
+}

src/tools/csv-to-json/csv-to-json.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { convertCsvToArray } from './csv-to-json.service';
+import FormatTransformer from '@/components/FormatTransformer.vue';
+import type { UseValidationRule } from '@/composable/validation';
+import { withDefaultOnError } from '@/utils/defaults';
+
+function transformer(value: string) {
+  return withDefaultOnError(() => {
+    if (value === '') {
+      return '';
+    }
+    return JSON.stringify(convertCsvToArray(value), null, 2);
+  }, '');
+}
+
+const rules: UseValidationRule<string>[] = [
+  {
+    validator: (v: string) => v === '' || ((v.includes(',') || v.includes(';')) && v.includes('\n')),
+    message: 'Provided CSV is not valid.',
+  },
+];
+</script>
+
+<template>
+  <FormatTransformer
+    input-label="Your raw CSV"
+    input-placeholder="Paste your raw CSV here..."
+    output-label="JSON version of your CSV"
+    :input-validation-rules="rules"
+    :transformer="transformer"
+  />
+</template>