feat: add CSV to XML conversion tool with customizable options

This commit is contained in:
ARRY7686
2025-03-19 00:02:25 +05:30
parent 64e1dd5b83
commit f4f09f4852
4 changed files with 224 additions and 1 deletions

View File

@@ -0,0 +1,134 @@
import React, { useState } from 'react';
import ToolContent from '@components/ToolContent';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
import { convertCsvToXml } from './service';
import { CardExampleType } from '@components/examples/ToolExamples';
import { ToolComponentProps } from '@tools/defineTool';
import { Box } from '@mui/material';
import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
type InitialValuesType = {
delimiter: string;
quote: string;
comment: string;
useHeaders: boolean;
skipEmptyLines: boolean;
};
const initialValues: InitialValuesType = {
delimiter: ',',
quote: '"',
comment: '#',
useHeaders: true,
skipEmptyLines: true
};
const exampleCards: CardExampleType<InitialValuesType>[] = [
{
title: 'Basic CSV to XML',
description: 'Convert a simple CSV file into an XML format.',
sampleText: 'name,age,city\nJohn,30,New York\nAlice,25,London',
sampleResult: `<root>
<row>
<name>John</name>
<age>30</age>
<city>New York</city>
</row>
<row>
<name>Alice</name>
<age>25</age>
<city>London</city>
</row>
</root>`,
sampleOptions: {
...initialValues,
useHeaders: true
}
}
];
export default function CsvToXml({ title }: ToolComponentProps) {
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
const compute = (values: InitialValuesType, input: string) => {
if (input) {
try {
const xmlResult = convertCsvToXml(input, {
delimiter: values.delimiter,
quote: values.quote,
comment: values.comment,
useHeaders: values.useHeaders,
skipEmptyLines: values.skipEmptyLines
});
setResult(xmlResult);
} catch (error) {
setResult(
`Error: ${
error instanceof Error ? error.message : 'Invalid CSV format'
}`
);
}
}
};
return (
<ToolContent
title={title}
input={input}
setInput={setInput}
initialValues={initialValues}
compute={compute}
exampleCards={exampleCards}
inputComponent={
<ToolTextInput title="Input CSV" value={input} onChange={setInput} />
}
resultComponent={<ToolTextResult title="Output XML" value={result} />}
getGroups={({ values, updateField }) => [
{
title: 'Input CSV Format',
component: (
<Box>
<TextFieldWithDesc
description="Column Separator"
value={values.delimiter}
onOwnChange={(val) => updateField('delimiter', val)}
/>
<TextFieldWithDesc
description="Field Quote"
onOwnChange={(val) => updateField('quote', val)}
value={values.quote}
/>
<TextFieldWithDesc
description="Comment Symbol"
value={values.comment}
onOwnChange={(val) => updateField('comment', val)}
/>
</Box>
)
},
{
title: 'Conversion Options',
component: (
<Box>
<CheckboxWithDesc
checked={values.useHeaders}
onChange={(value) => updateField('useHeaders', value)}
title="Use Headers"
description="First row is treated as column headers"
/>
<CheckboxWithDesc
checked={values.skipEmptyLines}
onChange={(value) => updateField('skipEmptyLines', value)}
title="Skip Empty Lines"
description="Don't process empty lines in the CSV"
/>
</Box>
)
}
]}
/>
);
}

View File

@@ -0,0 +1,12 @@
import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
export const tool = defineTool('csv', {
name: 'Convert CSV to XML',
path: 'csv-to-xml',
icon: 'lets-icons:xml-light',
description: 'Convert CSV files to XML format with customizable options.',
shortDescription: 'Convert CSV data to XML format',
keywords: ['csv', 'xml', 'convert', 'transform', 'parse'],
component: lazy(() => import('./index'))
});

View File

@@ -0,0 +1,76 @@
type CsvToXmlOptions = {
delimiter: string;
quote: string;
comment: string;
useHeaders: boolean;
skipEmptyLines: boolean;
};
const defaultOptions: CsvToXmlOptions = {
delimiter: ',',
quote: '"',
comment: '#',
useHeaders: true,
skipEmptyLines: true
};
export const convertCsvToXml = (
csv: string,
options: Partial<CsvToXmlOptions> = {}
): string => {
const opts = { ...defaultOptions, ...options };
const lines = csv.split('\n').map((line) => line.trim());
let xmlResult = `<?xml version="1.0" encoding="UTF-8" ?>\n<root>\n`;
let headers: string[] = [];
const validLines = lines.filter(
(line) =>
line &&
!line.startsWith(opts.comment) &&
(!opts.skipEmptyLines || line.trim() !== '')
);
if (validLines.length === 0) {
return `<?xml version="1.0" encoding="UTF-8" ?>\n<root></root>`;
}
if (opts.useHeaders) {
headers = parseCsvLine(validLines[0], opts);
validLines.shift();
}
validLines.forEach((line, index) => {
const values = parseCsvLine(line, opts);
xmlResult += ` <row id="${index}">\n`;
headers.forEach((header, i) => {
xmlResult += ` <${header}>${values[i] || ''}</${header}>\n`;
});
xmlResult += ` </row>\n`;
});
xmlResult += `</root>`;
return xmlResult;
};
const parseCsvLine = (line: string, options: CsvToXmlOptions): string[] => {
const values: string[] = [];
let currentValue = '';
let inQuotes = false;
for (let i = 0; i < line.length; i++) {
const char = line[i];
if (char === options.quote) {
inQuotes = !inQuotes;
} else if (char === options.delimiter && !inQuotes) {
values.push(currentValue.trim());
currentValue = '';
} else {
currentValue += char;
}
}
values.push(currentValue.trim());
return values;
};

View File

@@ -1,3 +1,4 @@
import { tool as csvToJson } from './csv-to-json/meta'; import { tool as csvToJson } from './csv-to-json/meta';
import { tool as csvToXml } from './csv-to-xml/meta';
export const csvTools = [csvToJson]; export const csvTools = [csvToJson, csvToXml];