feat(json parser) export, formatter

app/jsonparser/ExportModal.tsx

@@ -0,0 +1,127 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import {
+    Button,
+    Checkbox,
+    CheckboxGroup,
+    Modal,
+    ModalBody,
+    ModalContent,
+    ModalFooter,
+    ModalHeader,
+    Textarea
+} from '@nextui-org/react';
+import { toast } from 'react-toastify';
+import { HiOutlineDownload, HiOutlineDuplicate } from 'react-icons/hi';
+
+const workflows = new Map<string, (json: string) => string>([
+    [ 'minify', (json) => {
+        try {
+            const value = JSON.parse(json);
+            return JSON.stringify(value);
+        } catch (e) {
+            toast.error(`Operation Failed: ${ e }`, { autoClose: 5000 });
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
+            return e.toString();
+        }
+    } ]
+]);
+
+type Props = { isOpen: boolean, onOpenChange: () => void, value: string };
+
+const ExportModal = ({ isOpen, onOpenChange, value }: Props) => {
+    const [ workflow, setWorkflow ] = useState<string[]>([]);
+    const [ editorValue, setEditorValue ] = useState(value);
+    useEffect(() => {
+        setEditorValue(value);
+    }, [ value ]);
+
+    const [ exportValue, setExportValue ] = useState(editorValue);
+    useEffect(() => {
+        let value = editorValue;
+        for (const fn of workflow) {
+            const func = workflows.get(fn);
+            value = func ? func(value) : value;
+        }
+        setExportValue(value);
+    }, [ workflow, editorValue ]);
+
+    return (
+        <Modal
+            isOpen={ isOpen }
+            onOpenChange={ onOpenChange }
+            size={ '4xl' }
+            hideCloseButton
+        >
+            <ModalContent>
+                { (onClose) => (
+                    <>
+                        <ModalHeader className="gap-1">Export</ModalHeader>
+                        <ModalBody>
+                            <CheckboxGroup
+                                label={ 'Config' }
+                                color={ 'primary' }
+                                value={ workflow }
+                                onChange={ setWorkflow }
+                            >
+                                <Checkbox value={ 'minify' }>Minify</Checkbox>
+                            </CheckboxGroup>
+
+                            <Textarea
+                                label={ 'Value' }
+                                variant={ 'flat' }
+                                value={ exportValue }
+                                readOnly
+                            />
+
+                            <div
+                                className={ 'mt-3 flex flex-col md:flex-row gap-1 justify-center' }
+                            >
+                                <Button
+                                    color={ 'primary' }
+                                    aria-label={ 'Download' }
+                                    startContent={ <HiOutlineDownload size={ 20 } /> }
+                                    onClick={ () => {
+                                        const blob = new Blob([ exportValue ], { type: 'application/json' });
+                                        const url = URL.createObjectURL(blob);
+                                        const a = document.createElement('a');
+                                        a.href = url;
+                                        a.download = 'value.json';
+                                        document.body.appendChild(a);
+                                        a.click();
+                                        document.body.removeChild(a);
+                                        URL.revokeObjectURL(url);
+                                        toast.success('File Downloaded');
+                                    } }
+                                >
+                                    Download
+                                </Button>
+                                <Button
+                                    color={ 'success' }
+                                    aria-label={ 'Copy' }
+                                    startContent={ <HiOutlineDuplicate size={ 20 } /> }
+                                    onClick={ () => {
+                                        navigator.clipboard.writeText(exportValue);
+                                        toast.success('Copied to Clipboard');
+                                    } }
+                                >
+                                    Copy
+                                </Button>
+                            </div>
+                        </ModalBody>
+                        <ModalFooter>
+                            <Button color="danger" variant="light" onPress={ onClose }>
+                                Close
+                            </Button>
+                        </ModalFooter>
+                    </>
+                ) }
+            </ModalContent>
+        </Modal>
+    );
+};
+
+export default ExportModal;
+

app/jsonparser/JsonEditor.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import React, { useState } from 'react';
+import MonacoEditor from '@/app/public/MonacoEditor';
+import { Button, useDisclosure } from '@nextui-org/react';
+import ExportModal from '@/app/jsonparser/ExportModal';
+import { HiOutlineExternalLink } from 'react-icons/hi';
+
+const DEFAULT_EDITOR_VALUE = '{}';
+
+const JsonEditor = () => {
+    const [ editorValue, setEditorValue ] = useState<string>(DEFAULT_EDITOR_VALUE);
+    const { isOpen, onOpen, onOpenChange } = useDisclosure();
+
+    return (
+        <>
+            <div className={ 'rounded-2xl shadow-2xl overflow-hidden relative' }>
+                <MonacoEditor language={ 'json' } defaultValue={ DEFAULT_EDITOR_VALUE } setValue={ setEditorValue } />
+
+                <div className={ 'absolute top-4 right-4 z-10' }>
+                    <Button
+                        aria-label={ 'export' }
+                        variant={ 'light' }
+                        isIconOnly
+                        onPress={ onOpen }
+                        startContent={ <HiOutlineExternalLink size={ 20 } /> } />
+                    <ExportModal isOpen={ isOpen } onOpenChange={ onOpenChange } value={ editorValue } />
+
+                </div>
+            </div>
+        </>
+    );
+};
+export default JsonEditor;

app/jsonparser/page.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import MonacoEditor from '@/app/public/MonacoEditor';
+import JsonEditor from '@/app/jsonparser/JsonEditor';
 
 const Page = () => {
     return (
@@ -7,7 +7,7 @@ const Page = () => {
             <div
                 className={ 'p-2 lg:p-20 h-full w-full' }
             >
-                <MonacoEditor defaultValue={ '{}' } language={ 'json' } />
+                <JsonEditor />
             </div>
         </>
     );