Initial setup of pages. Tool definition

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,128 @@
+import React, { 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 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 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: 'Input Json 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>
+          )
+        }
+      ]}
+    />
+  );
+}

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'))
+});