feat(new-tool): csv to json converter

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>

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

@@ -0,0 +1,13 @@
+import { ArrowsShuffle } from '@vicons/tabler';
+import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
+
+export const tool = defineTool({
+  name: translate('tools.csv-to-json.title'),
+  path: '/csv-to-json',
+  description: translate('tools.csv-to-json.description'),
+  keywords: ['csv', 'to', 'json', 'convert'],
+  component: () => import('./csv-to-json.vue'),
+  icon: ArrowsShuffle,
+  createdAt: new Date('2024-04-12'),
+});

src/tools/index.ts

@@ -21,6 +21,7 @@ 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';
+import { tool as csvToJson } from './csv-to-json';
 import { tool as cameraRecorder } from './camera-recorder';
 import { tool as listConverter } from './list-converter';
 import { tool as phoneParserAndFormatter } from './phone-parser-and-formatter';
@@ -143,6 +144,7 @@ export const toolsByCategory: ToolCategory[] = [
       jsonViewer,
       jsonMinify,
       jsonToCsv,
+      csvToJson,
       sqlPrettify,
       chmodCalculator,
       dockerRunToDockerComposeConverter,