feat: change-csv-separator

src/pages/tools/csv/change-csv-separator/change-csv-separator.service.test.ts

@@ -0,0 +1,125 @@
+import { expect, describe, it } from 'vitest';
+import { changeCsvSeparator } from './service';
+import { InitialValuesType } from './types';
+
+describe('changeCsvSeparator', () => {
+  it('should change the separator from comma to semicolon', () => {
+    const inputCsv = 'name,age,city\nJohn,30,New York';
+    const options: InitialValuesType = {
+      inputSeparator: ',',
+      inputQuoteCharacter: '"',
+      commentCharacter: '#',
+      emptyLines: false,
+      outputSeparator: ';',
+      outputQuoteAll: false,
+      OutputQuoteCharacter: '"'
+    };
+    const result = changeCsvSeparator(inputCsv, options);
+    expect(result).toBe('name;age;city\nJohn;30;New York');
+  });
+
+  it('should handle empty input gracefully', () => {
+    const inputCsv = '';
+    const options: InitialValuesType = {
+      inputSeparator: ',',
+      inputQuoteCharacter: '"',
+      commentCharacter: '#',
+      emptyLines: false,
+      outputSeparator: ';',
+      outputQuoteAll: false,
+      OutputQuoteCharacter: '"'
+    };
+    const result = changeCsvSeparator(inputCsv, options);
+    expect(result).toBe('');
+  });
+
+  it('should not modify the CSV if the separator is already correct', () => {
+    const inputCsv = 'name;age;city\nJohn;30;New York';
+    const options: InitialValuesType = {
+      inputSeparator: ';',
+      inputQuoteCharacter: '"',
+      commentCharacter: '#',
+      emptyLines: false,
+      outputSeparator: ';',
+      outputQuoteAll: false,
+      OutputQuoteCharacter: '"'
+    };
+    const result = changeCsvSeparator(inputCsv, options);
+    expect(result).toBe(inputCsv);
+  });
+
+  it('should handle custom separators', () => {
+    const inputCsv = 'name|age|city\nJohn|30|New York';
+    const options: InitialValuesType = {
+      inputSeparator: '|',
+      inputQuoteCharacter: '"',
+      commentCharacter: '#',
+      emptyLines: false,
+      outputSeparator: ';',
+      outputQuoteAll: false,
+      OutputQuoteCharacter: '"'
+    };
+    const result = changeCsvSeparator(inputCsv, options);
+    expect(result).toBe('name;age;city\nJohn;30;New York');
+  });
+
+  it('should quote all output values', () => {
+    const inputCsv = 'name|age|city\nJohn|30|New York';
+    const options: InitialValuesType = {
+      inputSeparator: '|',
+      inputQuoteCharacter: '"',
+      commentCharacter: '#',
+      emptyLines: false,
+      outputSeparator: ';',
+      outputQuoteAll: true,
+      OutputQuoteCharacter: '"'
+    };
+    const result = changeCsvSeparator(inputCsv, options);
+    expect(result).toBe('"name";"age";"city"\n"John";"30";"New York"');
+  });
+
+  it('should remove quotes from input values', () => {
+    const inputCsv = '"name"|"age"|"city"\n"John"|"30"|"New York"';
+    const options: InitialValuesType = {
+      inputSeparator: '|',
+      inputQuoteCharacter: '"',
+      commentCharacter: '#',
+      emptyLines: false,
+      outputSeparator: ';',
+      outputQuoteAll: false,
+      OutputQuoteCharacter: '"'
+    };
+    const result = changeCsvSeparator(inputCsv, options);
+    expect(result).toBe('name;age;city\nJohn;30;New York');
+  });
+
+  it('should handle emptylines', () => {
+    const inputCsv = '"name"|"age"|"city"\n\n"John"|"30"|"New York"';
+    const options: InitialValuesType = {
+      inputSeparator: '|',
+      inputQuoteCharacter: '"',
+      commentCharacter: '#',
+      emptyLines: true,
+      outputSeparator: ';',
+      outputQuoteAll: false,
+      OutputQuoteCharacter: '"'
+    };
+    const result = changeCsvSeparator(inputCsv, options);
+    expect(result).toBe('name;age;city\nJohn;30;New York');
+  });
+
+  it('should handle emptylines', () => {
+    const inputCsv = '"name"|"age"|"city"\n\n"John"|"30"|"New York"';
+    const options: InitialValuesType = {
+      inputSeparator: '|',
+      inputQuoteCharacter: '"',
+      commentCharacter: '#',
+      emptyLines: true,
+      outputSeparator: ';',
+      outputQuoteAll: false,
+      OutputQuoteCharacter: '"'
+    };
+    const result = changeCsvSeparator(inputCsv, options);
+    expect(result).toBe('name;age;city\nJohn;30;New York');
+  });
+});

src/pages/tools/csv/change-csv-separator/index.tsx

@@ -0,0 +1,213 @@
+import { Box } from '@mui/material';
+import React, { useState } from 'react';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
+import ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import { GetGroupsType } from '@components/options/ToolOptions';
+import { CardExampleType } from '@components/examples/ToolExamples';
+import { changeCsvSeparator } from './service';
+import { InitialValuesType } from './types';
+import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
+import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
+
+const initialValues: InitialValuesType = {
+  inputSeparator: ',',
+  inputQuoteCharacter: '"',
+  commentCharacter: '#',
+  emptyLines: false,
+  outputSeparator: ';',
+  outputQuoteAll: false,
+  OutputQuoteCharacter: '"'
+};
+
+const exampleCards: CardExampleType<InitialValuesType>[] = [
+  {
+    title: 'Change the CSV Delimiter to a Semicolon',
+    description:
+      'In this example, we change the column separator to the semicolon separator in a CSV file containing data about countries, their populations, and population densities. As you can see, the input CSV file uses the standard commas as separators. After specifying this delimiter in the source CSV options, we set a new CSV delimiter for the output file to a semicolon, resulting in a new CSV file that now uses semicolons ";" in the output. Such CSV files with semicolons are called SSV files (semicolon-separated values files)',
+    sampleText: `country,population,density
+China,1412,152
+India,1408,428
+United States,331,37
+Indonesia,273,145
+Pakistan,231,232
+Brazil,214,26`,
+    sampleResult: `country;population;density
+China;1412;152
+India;1408;428
+United States;331;37
+Indonesia;273;145
+Pakistan;231;232
+Brazil;214;26`,
+    sampleOptions: {
+      inputSeparator: ',',
+      inputQuoteCharacter: '"',
+      commentCharacter: '#',
+      emptyLines: false,
+      outputSeparator: ';',
+      outputQuoteAll: false,
+      OutputQuoteCharacter: '"'
+    }
+  },
+  {
+    title: 'Restore a CSV File to the Standard Format',
+    description:
+      'In this example, a data scientist working with flowers was given an unusual CSV file that uses the vertical bar symbol as the field separator (such files are called PSV files – pipe-separated values files). To transform the file back to the standard comma-separated values (CSV) file, in the options, she set the input delimiter to "|" and the new delimiter to ",". She also wrapped the output fields in single quotes, enabled the option to remove empty lines from the input, and discarded comment lines starting with the "#" symbol.',
+    sampleText: `species|height|days|temperature
+
+Sunflower|50cm|30|25°C
+Rose|40cm|25|22°C
+Tulip|35cm|20|18°C
+Daffodil|30cm|15|20°C
+
+Lily|45cm|28|23°C
+#pumpkin
+Brazil,214,26`,
+    sampleResult: `'species','height','days','temperature'
+'Sunflower','50cm','30','25°C'
+'Rose','40cm','25','22°C'
+'Tulip','35cm','20','18°C'
+'Daffodil','30cm','15','20°C'
+'Lily','45cm','28','23°C'`,
+    sampleOptions: {
+      inputSeparator: '|',
+      inputQuoteCharacter: '"',
+      commentCharacter: '#',
+      emptyLines: true,
+      outputSeparator: ',',
+      outputQuoteAll: true,
+      OutputQuoteCharacter: "'"
+    }
+  },
+  {
+    title: 'Plants vs. Zombies CSV',
+    description:
+      'In this example, we import CSV data with zombie characters from the game Plants vs. Zombies. The data includes zombies names, the level at which they first appear in the game, their health, damage, and speed. The data follows the standard CSV format, with commas serving as field separators. To change the readability of the file, we replace the usual comma delimiter with a slash symbol, creating a slash-separated values file.',
+    sampleText: `zombie_name,first_seen,health,damage,speed
+Normal Zombie,Level 1-1,181,100,4.7
+Conehead Zombie,Level 1-3,551,100,4.7
+Buckethead Zombi,Level 1-8,1281,100,4.7
+Newspaper Zombie,Level 2-1,331,100,4.7
+Football Zombie,Level 2-6,1581,100,2.5
+Dancing Zombie,Level 2-8,335,100,1.5
+Zomboni,Level 3-6,1151,Instant-kill,varies
+Catapult Zombie,Level 5-6,651,75,2.5
+Gargantuar,Level 5-8,3000,Instant-kill,4.7`,
+    sampleResult: `zombie_name/first_seen/health/damage/speed
+Normal Zombie/Level 1-1/181/100/4.7
+Conehead Zombie/Level 1-3/551/100/4.7
+Buckethead Zombi/Level 1-8/1281/100/4.7
+Newspaper Zombie/Level 2-1/331/100/4.7
+Football Zombie/Level 2-6/1581/100/2.5
+Dancing Zombie/Level 2-8/335/100/1.5
+Zomboni/Level 3-6/1151/Instant-kill/varies
+Catapult Zombie/Level 5-6/651/75/2.5
+Gargantuar/Level 5-8/3000/Instant-kill/4.7`,
+    sampleOptions: {
+      inputSeparator: ',',
+      inputQuoteCharacter: '"',
+      commentCharacter: '#',
+      emptyLines: true,
+      outputSeparator: '/',
+      outputQuoteAll: false,
+      OutputQuoteCharacter: "'"
+    }
+  }
+];
+export default function ChangeCsvDelimiter({
+  title,
+  longDescription
+}: ToolComponentProps) {
+  const [input, setInput] = useState<string>('');
+  const [result, setResult] = useState<string>('');
+
+  const compute = (values: InitialValuesType, input: string) => {
+    setResult(changeCsvSeparator(input, values));
+  };
+
+  const getGroups: GetGroupsType<InitialValuesType> | null = ({
+    values,
+    updateField
+  }) => [
+    {
+      title: 'Adjust CSV input options',
+      component: (
+        <Box>
+          <TextFieldWithDesc
+            value={values.inputSeparator}
+            onOwnChange={(val) => updateField('inputSeparator', val)}
+            description={
+              'Enter the character used to delimit columns in the CSV input file.'
+            }
+          />
+          <TextFieldWithDesc
+            value={values.inputQuoteCharacter}
+            onOwnChange={(val) => updateField('inputQuoteCharacter', val)}
+            description={
+              'Enter the quote character used to quote the CSV input fields.'
+            }
+          />
+          <TextFieldWithDesc
+            value={values.commentCharacter}
+            onOwnChange={(val) => updateField('commentCharacter', val)}
+            description={
+              'Enter the character indicating the start of a comment line. Lines starting with this symbol will be skipped.'
+            }
+          />
+          <CheckboxWithDesc
+            checked={values.emptyLines}
+            onChange={(value) => updateField('emptyLines', value)}
+            title="Delete Lines with No Data"
+            description="Remove empty lines from CSV input file."
+          />
+        </Box>
+      )
+    },
+    {
+      title: 'Output options',
+      component: (
+        <Box>
+          <TextFieldWithDesc
+            value={values.outputSeparator}
+            onOwnChange={(val) => updateField('outputSeparator', val)}
+            description={
+              'Enter the character used to delimit columns in the CSV output file.'
+            }
+          />
+          <CheckboxWithDesc
+            checked={values.outputQuoteAll}
+            onChange={(value) => updateField('outputQuoteAll', value)}
+            title="Quote All Output Fields"
+            description="Wrap all fields of the output CSV file in quotes"
+          />
+          {values.outputQuoteAll && (
+            <TextFieldWithDesc
+              value={values.OutputQuoteCharacter}
+              onOwnChange={(val) => updateField('OutputQuoteCharacter', val)}
+              description={
+                'Enter the quote character used to quote the CSV output fields.'
+              }
+            />
+          )}
+        </Box>
+      )
+    }
+  ];
+  return (
+    <ToolContent
+      title={title}
+      input={input}
+      inputComponent={
+        <ToolTextInput title={'Input CSV'} value={input} onChange={setInput} />
+      }
+      resultComponent={<ToolTextResult title={'Output CSV'} value={result} />}
+      initialValues={initialValues}
+      exampleCards={exampleCards}
+      getGroups={getGroups}
+      setInput={setInput}
+      compute={compute}
+      toolInfo={{ title: `What is a ${title}?`, description: longDescription }}
+    />
+  );
+}

src/pages/tools/csv/change-csv-separator/meta.ts

@@ -0,0 +1,15 @@
+import { defineTool } from '@tools/defineTool';
+import { lazy } from 'react';
+
+export const tool = defineTool('csv', {
+  name: 'Change csv separator',
+  path: 'change-csv-separator',
+  icon: 'material-symbols:split-scene-rounded',
+  description:
+    'Just upload your CSV file in the form below and it will automatically get a new column delimiter character. In the tool options, you can specify which delimiter and quote characters are used in the source CSV file and customize the desired delimiter and quote characters for the output CSV. You can also filter the input CSV before the conversion process and skip blank lines and comment lines.',
+  shortDescription: 'Quickly change the CSV column delimiter to a new symbol.',
+  keywords: ['change', 'csv', 'sepa rator'],
+  longDescription:
+    'This tool changes the field separator in CSV (Comma Separated Values) files. This is useful because different programs may use different default separators. While a comma is the most common separator in CSV files, some programs require files to be tab-separated (TSV), semicolon-separated (SSV), pipe-separated (PSV), or have another separation symbol. The default comma may not be so convenient as a delimiter in CSV files because commas are frequently present within fields. In such cases, it can be difficult and confusing to distinguish between commas as delimiters and commas as punctuation symbols. By replacing the comma with another delimiter, you can convert the file into a more easily readable and parsable format. In the options section of this tool, you can configure both the input and output CSV file formats. For the input CSV, you can specify its current delimiter (by default, it is a comma) and also indicate the quotation mark character used to wrap fields. For the output CSV, you can set a new delimiter, choose a new quotation mark character, and optionally enclose all the fields in quotes. Additionally, you have the option to remove empty lines from the input CSV and eliminate comment lines that start with a specified character (usually a hash "#" or double slashes "//"). Csv-abulous!',
+  component: lazy(() => import('./index'))
+});

src/pages/tools/csv/change-csv-separator/service.ts

@@ -0,0 +1,31 @@
+import { InitialValuesType } from './types';
+import { splitCsv } from '@utils/csv';
+
+export function changeCsvSeparator(
+  input: string,
+  options: InitialValuesType
+): string {
+  if (!input) return '';
+
+  const rows = splitCsv(
+    input,
+    true,
+    options.commentCharacter,
+    options.emptyLines,
+    options.inputSeparator,
+    options.inputQuoteCharacter
+  );
+
+  return rows
+    .map((row) => {
+      return row
+        .map((cell) => {
+          if (options.outputQuoteAll) {
+            return `${options.OutputQuoteCharacter}${cell}${options.OutputQuoteCharacter}`;
+          }
+          return cell;
+        })
+        .join(options.outputSeparator);
+    })
+    .join('\n');
+}

src/pages/tools/csv/change-csv-separator/types.ts

@@ -0,0 +1,9 @@
+export type InitialValuesType = {
+  inputSeparator: string;
+  inputQuoteCharacter: string;
+  commentCharacter: string;
+  emptyLines: boolean;
+  outputSeparator: string;
+  outputQuoteAll: boolean;
+  OutputQuoteCharacter: string;
+};