Merge pull request #58 from lfsjesus/feature/json2xml

Feature: JSON to XML

src/pages/tools/json/index.ts

@@ -2,10 +2,12 @@ import { tool as jsonPrettify } from './prettify/meta';
 import { tool as jsonMinify } from './minify/meta';
 import { tool as jsonStringify } from './stringify/meta';
 import { tool as validateJson } from './validateJson/meta';
+import { tool as jsonToXml } from './json-to-xml/meta';
 
 export const jsonTools = [
   validateJson,
   jsonPrettify,
   jsonMinify,
-  jsonStringify
+  jsonStringify,
+  jsonToXml
 ];

src/pages/tools/json/json-to-xml/index.tsx

@@ -0,0 +1,136 @@
+import { useState } from 'react';
+import ToolContent from '@components/ToolContent';
+import ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import { convertJsonToXml } 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 SimpleRadio from '@components/options/SimpleRadio';
+
+type InitialValuesType = {
+  indentationType: 'space' | 'tab' | 'none';
+  addMetaTag: boolean;
+};
+
+const initialValues: InitialValuesType = {
+  indentationType: 'space',
+  addMetaTag: false
+};
+
+const exampleCards: CardExampleType<InitialValuesType>[] = [
+  {
+    title: 'Basic JSON to XML',
+    description: 'Convert a simple JSON object into an XML format.',
+    sampleText: `
+{
+  "users": [
+    {
+      "name": "John",
+      "age": 30,
+      "city": "New York"
+    },
+    {
+      "name": "Alice",
+      "age": 25,
+      "city": "London"
+    }
+  ]
+}`,
+    sampleResult: `<root>
+\t<users>
+\t\t<name>John</name>
+\t\t<age>30</age>
+\t\t<city>New York</city>
+\t</users>
+\t<users>
+\t\t<name>Alice</name>
+\t\t<age>25</age>
+\t\t<city>London</city>
+\t</users>
+</root>`,
+    sampleOptions: {
+      ...initialValues
+    }
+  }
+];
+
+export default function JsonToXml({ title }: ToolComponentProps) {
+  const [input, setInput] = useState<string>('');
+  const [result, setResult] = useState<string>('');
+
+  const compute = (values: InitialValuesType, input: string) => {
+    if (input) {
+      try {
+        const xmlResult = convertJsonToXml(input, values);
+        setResult(xmlResult);
+      } catch (error) {
+        setResult(
+          `Error: ${
+            error instanceof Error ? error.message : 'Invalid Json format'
+          }`
+        );
+      }
+    }
+  };
+
+  return (
+    <ToolContent
+      title={title}
+      input={input}
+      setInput={setInput}
+      initialValues={initialValues}
+      compute={compute}
+      exampleCards={exampleCards}
+      inputComponent={
+        <ToolTextInput title="Input Json" value={input} onChange={setInput} />
+      }
+      resultComponent={<ToolTextResult title="Output XML" value={result} />}
+      getGroups={({ values, updateField }) => [
+        {
+          title: 'Output XML Indentation',
+          component: (
+            <Box>
+              <SimpleRadio
+                checked={values.indentationType === 'space'}
+                title={'Use Spaces for indentation'}
+                description={
+                  'Use spaces to visualize the hierarchical structure of XML.'
+                }
+                onClick={() => updateField('indentationType', 'space')}
+              />
+              <SimpleRadio
+                checked={values.indentationType === 'tab'}
+                title={'Use Tabs for indentation'}
+                description={
+                  'Use tabs to visualize the hierarchical structure of XML.'
+                }
+                onClick={() => updateField('indentationType', 'tab')}
+              />
+              <SimpleRadio
+                checked={values.indentationType === 'none'}
+                title={'No indentation'}
+                description={'Output XML without any indentation.'}
+                onClick={() => updateField('indentationType', 'none')}
+              />
+            </Box>
+          )
+        },
+        {
+          title: 'XML Meta Information',
+          component: (
+            <Box>
+              <CheckboxWithDesc
+                checked={values.addMetaTag}
+                onChange={(value) => updateField('addMetaTag', value)}
+                title="Add an XML Meta Tag"
+                description="Add a meta tag at the beginning of the XML output."
+              />
+            </Box>
+          )
+        }
+      ]}
+    />
+  );
+}

src/pages/tools/json/json-to-xml/meta.ts

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

src/pages/tools/json/json-to-xml/service.ts

@@ -0,0 +1,99 @@
+type JsonToXmlOptions = {
+  indentationType: 'space' | 'tab' | 'none';
+  addMetaTag: boolean;
+};
+
+export const convertJsonToXml = (
+  json: string,
+  options: JsonToXmlOptions
+): string => {
+  const obj = JSON.parse(json);
+  return convertObjectToXml(obj, options);
+};
+
+const getIndentation = (options: JsonToXmlOptions, depth: number): string => {
+  switch (options.indentationType) {
+    case 'space':
+      return '  '.repeat(depth + 1);
+    case 'tab':
+      return '\t'.repeat(depth + 1);
+    case 'none':
+    default:
+      return '';
+  }
+};
+
+const convertObjectToXml = (
+  obj: any,
+  options: JsonToXmlOptions,
+  depth: number = 0
+): string => {
+  let xml = '';
+
+  const newline = options.indentationType === 'none' ? '' : '\n';
+
+  if (depth === 0) {
+    if (options.addMetaTag) {
+      xml += '<?xml version="1.0" encoding="UTF-8"?>' + newline;
+    }
+    xml += '<root>' + newline;
+  }
+
+  for (const key in obj) {
+    const value = obj[key];
+    const keyString = isNaN(Number(key)) ? key : `row-${key}`;
+
+    // Handle null values
+    if (value === null) {
+      xml += `${getIndentation(
+        options,
+        depth
+      )}<${keyString}></${keyString}>${newline}`;
+      continue;
+    }
+
+    // Handle arrays
+    if (Array.isArray(value)) {
+      value.forEach((item) => {
+        xml += `${getIndentation(options, depth)}<${keyString}>`;
+        if (item === null) {
+          xml += `</${keyString}>${newline}`;
+        } else if (typeof item === 'object') {
+          xml += `${newline}${convertObjectToXml(
+            item,
+            options,
+            depth + 1
+          )}${getIndentation(options, depth)}`;
+          xml += `</${keyString}>${newline}`;
+        } else {
+          xml += `${escapeXml(String(item))}</${keyString}>${newline}`;
+        }
+      });
+      continue;
+    }
+
+    // Handle objects
+    if (typeof value === 'object') {
+      xml += `${getIndentation(options, depth)}<${keyString}>${newline}`;
+      xml += convertObjectToXml(value, options, depth + 1);
+      xml += `${getIndentation(options, depth)}</${keyString}>${newline}`;
+      continue;
+    }
+
+    // Handle primitive values (string, number, boolean, etc.)
+    xml += `${getIndentation(options, depth)}<${keyString}>${escapeXml(
+      String(value)
+    )}</${keyString}>${newline}`;
+  }
+
+  return depth === 0 ? `${xml}</root>` : xml;
+};
+
+const escapeXml = (str: string): string => {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&apos;');
+};