|
| 1 | +import { CopyButton } from "@/Components/CopyButton"; |
| 2 | +import { Alert, Box, Group, Stack, Tabs, Text } from "@mantine/core"; |
| 3 | +import { useRef, useState } from "react"; |
| 4 | +import { |
| 5 | + ImperativePanelHandle, |
| 6 | + Panel, |
| 7 | + PanelGroup, |
| 8 | + PanelResizeHandle, |
| 9 | +} from "react-resizable-panels"; |
| 10 | +import { JsonInput } from "./components/Editors/JsonInput"; |
| 11 | +import styles from "./components/styles.module.css"; |
| 12 | +import { Toolbar } from "./components/Toolbar"; |
| 13 | +import { JsonText } from "./components/Viewers/JsonText"; |
| 14 | +import { JsonTree } from "./components/Viewers/JsonTree"; |
| 15 | +import { useJsonFormatter } from "./hooks/useJsonFormatter"; |
| 16 | + |
| 17 | +const SAMPLE_JSON = `{ |
| 18 | + "name": "DevBox", |
| 19 | + "version": "1.0.0", |
| 20 | + "features": [ |
| 21 | + { "id": 1, "name": "JSON Formatter", "enabled": true }, |
| 22 | + { "id": 2, "name": "Regex Tester", "enabled": true } |
| 23 | + ], |
| 24 | + "meta": { "createdAt": "2024-01-01T00:00:00Z" } |
| 25 | +}`; |
| 26 | + |
| 27 | +export default function JsonFormatter() { |
| 28 | + const { |
| 29 | + state: { rawInput, parsed, error, autoFormat }, |
| 30 | + setRawInput, |
| 31 | + setAutoFormat, |
| 32 | + outputText, |
| 33 | + handleFormat, |
| 34 | + handleMinify, |
| 35 | + } = useJsonFormatter(SAMPLE_JSON); |
| 36 | + const [collapsedDepth, setCollapsedDepth] = useState<number | boolean>(2); |
| 37 | + const [activeTab, setActiveTab] = useState<string>("tree"); |
| 38 | + const leftPanelRef = useRef<ImperativePanelHandle>(null); |
| 39 | + |
| 40 | + const onExpandAll = () => setCollapsedDepth(false); |
| 41 | + const onCollapseAll = () => setCollapsedDepth(1); |
| 42 | + |
| 43 | + return ( |
| 44 | + <Stack className={`overflow-padding ${styles.containerStack}`} gap="sm"> |
| 45 | + <Toolbar |
| 46 | + autoFormat={autoFormat} |
| 47 | + setAutoFormat={setAutoFormat} |
| 48 | + onFormat={() => { |
| 49 | + if (handleFormat()) setActiveTab("tree"); |
| 50 | + }} |
| 51 | + onMinify={() => { |
| 52 | + if (handleMinify()) setActiveTab("text"); |
| 53 | + }} |
| 54 | + onExpandAll={onExpandAll} |
| 55 | + onCollapseAll={onCollapseAll} |
| 56 | + collapsedDepth={collapsedDepth} |
| 57 | + setCollapsedDepth={v => setCollapsedDepth(v)} |
| 58 | + /> |
| 59 | + |
| 60 | + {error && ( |
| 61 | + <Alert color="red" title="Invalid JSON" variant="light"> |
| 62 | + <Text fz="xs"> |
| 63 | + {error.line && error.column |
| 64 | + ? `Error at line ${error.line}, column ${error.column}: ${error.message}` |
| 65 | + : error.message} |
| 66 | + </Text> |
| 67 | + </Alert> |
| 68 | + )} |
| 69 | + |
| 70 | + <Group className={styles.groupMain} grow gap={12} align="stretch"> |
| 71 | + <PanelGroup direction="horizontal"> |
| 72 | + <Panel ref={leftPanelRef}> |
| 73 | + <Box className={styles.panelBox}> |
| 74 | + <Stack gap={6} h="100%" style={{ flex: 1, minHeight: 0 }}> |
| 75 | + <JsonInput value={rawInput} onChange={setRawInput} /> |
| 76 | + </Stack> |
| 77 | + </Box> |
| 78 | + </Panel> |
| 79 | + <PanelResizeHandle |
| 80 | + className={styles.resizeHandle} |
| 81 | + onDoubleClick={() => { |
| 82 | + leftPanelRef.current?.resize(50); |
| 83 | + }} |
| 84 | + > |
| 85 | + <Box className={styles.resizeHandler} /> |
| 86 | + </PanelResizeHandle> |
| 87 | + <Panel> |
| 88 | + <Box className={styles.panelBox}> |
| 89 | + <Tabs |
| 90 | + value={activeTab} |
| 91 | + onChange={value => setActiveTab(value || "tree")} |
| 92 | + className={styles.tabsRoot} |
| 93 | + bg="#191919" |
| 94 | + > |
| 95 | + <Tabs.List> |
| 96 | + <Tabs.Tab value="tree">Tree</Tabs.Tab> |
| 97 | + <Tabs.Tab value="text">Text</Tabs.Tab> |
| 98 | + <CopyButton |
| 99 | + value={outputText} |
| 100 | + variant="subtle" |
| 101 | + size="xs" |
| 102 | + fullWidth={false} |
| 103 | + label="Copy" |
| 104 | + m={6} |
| 105 | + ml="auto" |
| 106 | + /> |
| 107 | + </Tabs.List> |
| 108 | + <Tabs.Panel value="tree" className={styles.panelTree}> |
| 109 | + <JsonTree |
| 110 | + value={parsed} |
| 111 | + collapsedDepth={collapsedDepth} |
| 112 | + onChange={next => { |
| 113 | + try { |
| 114 | + setRawInput(JSON.stringify(next, null, 2)); |
| 115 | + } catch (e) { |
| 116 | + // ignore stringify failure |
| 117 | + } |
| 118 | + }} |
| 119 | + /> |
| 120 | + </Tabs.Panel> |
| 121 | + <Tabs.Panel value="text" className={styles.panelText}> |
| 122 | + <JsonText value={outputText} /> |
| 123 | + </Tabs.Panel> |
| 124 | + </Tabs> |
| 125 | + </Box> |
| 126 | + </Panel> |
| 127 | + </PanelGroup> |
| 128 | + </Group> |
| 129 | + </Stack> |
| 130 | + ); |
| 131 | +} |
0 commit comments