mirror of
https://github.com/iib0011/omni-tools.git
synced 2025-09-19 22:19:36 +02:00
feat: add CSV to XML conversion tool with customizable options
This commit is contained in:
134
src/pages/tools/csv/csv-to-xml/index.tsx
Normal file
134
src/pages/tools/csv/csv-to-xml/index.tsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
12
src/pages/tools/csv/csv-to-xml/meta.ts
Normal file
12
src/pages/tools/csv/csv-to-xml/meta.ts
Normal 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'))
|
||||||
|
});
|
76
src/pages/tools/csv/csv-to-xml/service.ts
Normal file
76
src/pages/tools/csv/csv-to-xml/service.ts
Normal 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;
|
||||||
|
};
|
@@ -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];
|
||||||
|
Reference in New Issue
Block a user