From e41eb484fd1907bc1460a39d01f3a59ef6ceedc2 Mon Sep 17 00:00:00 2001 From: sudhananda biswas Date: Fri, 23 Jan 2026 01:23:36 +0600 Subject: [PATCH 1/3] data convert --- apps/web/src/App.tsx | 2 + apps/web/src/components/Layout.tsx | 3 +- apps/web/src/pages/DataConverterPage.tsx | 322 ++++++++++++++++++++ package-lock.json | 55 +++- package.json | 7 + packages/core/dist/data-converter.d.ts | 41 +++ packages/core/dist/data-converter.js | 190 ++++++++++++ packages/core/dist/data-converter.test.d.ts | 1 + packages/core/dist/data-converter.test.js | 75 +++++ packages/core/dist/index.d.ts | 1 + packages/core/dist/index.js | 1 + packages/core/src/data-converter.test.ts | 96 ++++++ packages/core/src/data-converter.ts | 211 +++++++++++++ packages/core/src/index.ts | 1 + 14 files changed, 1004 insertions(+), 2 deletions(-) create mode 100644 apps/web/src/pages/DataConverterPage.tsx create mode 100644 packages/core/dist/data-converter.d.ts create mode 100644 packages/core/dist/data-converter.js create mode 100644 packages/core/dist/data-converter.test.d.ts create mode 100644 packages/core/dist/data-converter.test.js create mode 100644 packages/core/src/data-converter.test.ts create mode 100644 packages/core/src/data-converter.ts diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx index 045199c..03f5685 100644 --- a/apps/web/src/App.tsx +++ b/apps/web/src/App.tsx @@ -5,6 +5,7 @@ import DiffPage from './pages/DiffPage'; import JSONParserPage from './pages/JSONParserPage'; import UnitConversionPage from './pages/UnitConversionPage'; import ImageConverterPage from './pages/ImageConverterPage'; +import DataConverterPage from './pages/DataConverterPage'; function App() { return ( @@ -17,6 +18,7 @@ function App() { } /> } /> } /> + } /> diff --git a/apps/web/src/components/Layout.tsx b/apps/web/src/components/Layout.tsx index 7ef9b34..172db17 100644 --- a/apps/web/src/components/Layout.tsx +++ b/apps/web/src/components/Layout.tsx @@ -1,5 +1,5 @@ import { Link, Outlet, useLocation } from 'react-router-dom'; -import { FileJson, ArrowLeftRight, Code2, Braces, Ruler, Image } from 'lucide-react'; +import { FileJson, ArrowLeftRight, Code2, Braces, Ruler, Image, Database } from 'lucide-react'; export default function Layout() { const location = useLocation(); @@ -10,6 +10,7 @@ export default function Layout() { { path: '/diff', label: 'Diff Viewer', icon: ArrowLeftRight }, { path: '/unit-conversion', label: 'Unit Converter', icon: Ruler }, { path: '/image-converter', label: 'Image Converter', icon: Image }, + { path: '/data-converter', label: 'Data Converter', icon: Database }, ]; return ( diff --git a/apps/web/src/pages/DataConverterPage.tsx b/apps/web/src/pages/DataConverterPage.tsx new file mode 100644 index 0000000..f2596c7 --- /dev/null +++ b/apps/web/src/pages/DataConverterPage.tsx @@ -0,0 +1,322 @@ +import { useState, useEffect } from 'react'; +import { RefreshCw, Copy, Trash2, ArrowLeftRight, Download, FileJson, FileCode, Table } from 'lucide-react'; +import { + jsonToXml, + xmlToJson, + jsonToCsv, + csvToJson, + xmlToCsv, + csvToXml, + ConversionResult +} from '@dev-assistant/core'; + +type DataFormat = 'json' | 'xml' | 'csv'; + +const SAMPLE_DATA = { + json: `{ + "users": [ + { + "id": 1, + "name": "John Doe", + "email": "john@example.com", + "active": true + }, + { + "id": 2, + "name": "Jane Smith", + "email": "jane@example.com", + "active": false + } + ] +}`, + xml: ` + + + + 1 + John Doe + john@example.com + true + + + 2 + Jane Smith + jane@example.com + false + + +`, + csv: `id,name,email,active +1,John Doe,john@example.com,true +2,Jane Smith,jane@example.com,false` +}; + +export default function DataConverterPage() { + const [sourceFormat, setSourceFormat] = useState('json'); + const [targetFormat, setTargetFormat] = useState('xml'); + const [inputValue, setInputValue] = useState(''); + const [outputValue, setOutputValue] = useState(''); + const [error, setError] = useState(''); + const [isConverting, setIsConverting] = useState(false); + + const formatIcons = { + json: FileJson, + xml: FileCode, + csv: Table + }; + + const formatLabels = { + json: 'JSON', + xml: 'XML', + csv: 'CSV' + }; + + useEffect(() => { + // Auto-convert when input changes + if (inputValue.trim()) { + handleConvert(); + } else { + setOutputValue(''); + setError(''); + } + }, [inputValue, sourceFormat, targetFormat]); + + const handleConvert = () => { + if (!inputValue.trim()) { + setOutputValue(''); + setError(''); + return; + } + + setIsConverting(true); + setError(''); + + try { + let result: ConversionResult; + + // Perform conversion based on source and target formats + if (sourceFormat === 'json' && targetFormat === 'xml') { + result = jsonToXml(inputValue); + } else if (sourceFormat === 'json' && targetFormat === 'csv') { + result = jsonToCsv(inputValue); + } else if (sourceFormat === 'xml' && targetFormat === 'json') { + result = xmlToJson(inputValue); + } else if (sourceFormat === 'xml' && targetFormat === 'csv') { + result = xmlToCsv(inputValue); + } else if (sourceFormat === 'csv' && targetFormat === 'json') { + result = csvToJson(inputValue); + } else if (sourceFormat === 'csv' && targetFormat === 'xml') { + result = csvToXml(inputValue); + } else { + // Same format - just copy + result = { success: true, data: inputValue }; + } + + if (result.success && result.data) { + setOutputValue(result.data); + setError(''); + } else { + setOutputValue(''); + setError(result.error || 'Conversion failed'); + } + } catch (err) { + setOutputValue(''); + setError(err instanceof Error ? err.message : 'An unexpected error occurred'); + } finally { + setIsConverting(false); + } + }; + + const copyToClipboard = (text: string) => { + navigator.clipboard.writeText(text); + }; + + const clear = () => { + setInputValue(''); + setOutputValue(''); + setError(''); + }; + + const swapFormats = () => { + setSourceFormat(targetFormat); + setTargetFormat(sourceFormat); + setInputValue(outputValue); + }; + + const loadSample = () => { + setInputValue(SAMPLE_DATA[sourceFormat]); + }; + + const downloadOutput = () => { + if (!outputValue) return; + + const blob = new Blob([outputValue], { type: 'text/plain' }); + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = `converted.${targetFormat}`; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + URL.revokeObjectURL(url); + }; + + const FormatIcon = formatIcons[sourceFormat]; + const TargetIcon = formatIcons[targetFormat]; + + return ( +
+
+

Data Format Converter

+

+ Convert between JSON, XML, and CSV formats seamlessly. +

+
+ + {/* Format Selection */} +
+
+
+ + +
+ + + +
+ + +
+
+
+ + {/* Conversion Area */} +
+ {/* Input Section */} +
+
+

+ + Input ({formatLabels[sourceFormat]}) +

+
+ + +
+
+