Skip to content

Commit 08ff2ea

Browse files
Thanga-GanapathyThanga-Ganapathy
committed
demo: Add visualizer
1 parent fec90fd commit 08ff2ea

File tree

3 files changed

+322
-96
lines changed

3 files changed

+322
-96
lines changed

‎apps/demo/src/App.tsx

Lines changed: 121 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import Launch from "@mui/icons-material/Launch";
1010
import prettier from "prettier/standalone";
1111
import * as babelPlugin from "prettier/parser-babel";
1212
import * as estreeParser from "prettier/plugins/estree";
13+
import Visualizer from "./Visualizer";
1314

1415
async function format(code: string) {
1516
const formatted = await prettier.format(`const a = ${code}`, {
@@ -24,11 +25,33 @@ async function format(code: string) {
2425

2526
function App() {
2627
const [obj1Val, setObj1Val] = useState(`{
27-
a: 1, b: 2
28+
a: 1, b: null, g: 8
2829
}`);
2930
const [obj2Val, setObj2Val] = useState(`{
30-
a: 2, c: 5
31+
a: 2, g: 8, c: 'Hello World',
3132
}`);
33+
// const [obj1Val, setObj1Val] = useState(`{
34+
// foo: {
35+
// bar: {
36+
// a: ['a', 'b'],
37+
// b: 2,
38+
// c: ['x', 'y'],
39+
// e: 100
40+
// }
41+
// },
42+
// buzz: 'world'
43+
// }`);
44+
// const [obj2Val, setObj2Val] = useState(`{
45+
// foo: {
46+
// bar: {
47+
// a: ['a'],
48+
// b: 2,
49+
// c: ['x', 'y', 'z'],
50+
// d: 'Hello, world!'
51+
// }
52+
// },
53+
// buzz: 'fizz'
54+
// }`);
3255
const [raw, setRaw] = useState<Array<DiffResult>>([]);
3356

3457
useEffect(() => {
@@ -62,17 +85,18 @@ function App() {
6285
<Box sx={{}}>
6386
<Box
6487
sx={{
65-
borderBottom: "1px solid grey",
88+
borderBottom: "1px solid lightgrey",
6689
p: 1,
6790
px: 3,
6891
display: "flex",
6992
justifyContent: "space-between",
93+
height: "50px",
7094
}}
7195
>
7296
<Box sx={{ display: "flex" }}>
7397
<img src="/Logo.svg" alt="Logo" height="35" />
7498
<Typography level="h4" sx={{ ml: 2, letterSpacing: "2px" }}>
75-
obj-diff
99+
Obj-Diff
76100
</Typography>
77101
</Box>
78102
<Link
@@ -82,104 +106,108 @@ function App() {
82106
rel="noopener"
83107
fontSize="sm"
84108
>
85-
Github
109+
GitHub
86110
</Link>
87111
</Box>
88-
<Box sx={{ display: "flex", justifyContent: "center", mt: 2 }}>
89-
<Alert variant="soft" color="success">
90-
<Typography level="body-md">
91-
🚀 The Fast, Accurate, JavaScript Objects Diffing Library.
92-
</Typography>
93-
</Alert>
94-
</Box>
95-
<Box
96-
sx={{
97-
display: "grid",
98-
gridTemplateColumns: "1fr 10px 1fr 10px 1fr",
99-
p: "50px",
100-
height: "600px",
101-
boxSizing: "border-box",
102-
}}
103-
>
104-
<Box sx={{ height: "100%", overflow: "hidden" }}>
105-
<Sheet
106-
variant="outlined"
107-
sx={{
108-
height: "100%",
109-
overflow: "hidden",
110-
display: "flex",
111-
flexDirection: "column",
112-
boxSizing: "border-box",
113-
}}
114-
>
115-
<Typography level="body-sm" sx={{ textAlign: "center" }}>
116-
Object 1
112+
<Box sx={{ height: "calc(100vh - 100px)" }}>
113+
<Box sx={{ display: "flex", justifyContent: "center", mt: 2 }}>
114+
<Alert variant="soft" color="success">
115+
<Typography level="body-md">
116+
🚀 The Fast, Accurate, JavaScript Objects Diffing Library.
117117
</Typography>
118-
<Box sx={{ height: "calc(100% - 25px)", overflow: "auto" }}>
119-
<CodeMirror
120-
value={obj1Val}
121-
extensions={[javascript()]}
122-
onChange={onChange1}
123-
height="100%"
124-
/>
125-
</Box>
126-
</Sheet>
118+
</Alert>
127119
</Box>
128-
<Box />
129-
<Box sx={{ height: "100%", overflow: "hidden" }}>
130-
<Sheet
131-
variant="outlined"
132-
sx={{
133-
height: "100%",
134-
overflow: "hidden",
135-
display: "flex",
136-
flexDirection: "column",
137-
boxSizing: "border-box",
138-
}}
139-
>
140-
<Typography level="body-sm" sx={{ textAlign: "center" }}>
141-
Object 2
142-
</Typography>
143-
<Box sx={{ height: "calc(100% - 25px)", overflow: "auto" }}>
144-
<CodeMirror
145-
value={obj2Val}
146-
extensions={[javascript()]}
147-
onChange={onChange2}
148-
/>
149-
</Box>
150-
</Sheet>
151-
</Box>
152-
<Box />
153-
<Box sx={{ height: "100%", overflow: "hidden" }}>
154-
<Sheet
155-
variant="outlined"
156-
sx={{ height: "100%", boxSizing: "border-box" }}
157-
>
158-
<Tabs
159-
aria-label="Basic tabs"
160-
defaultValue={0}
161-
sx={{ height: "100%" }}
120+
<Box
121+
sx={{
122+
display: "grid",
123+
gridTemplateColumns: "1fr 10px 1fr 10px 1fr",
124+
p: "50px",
125+
height: "75vh",
126+
boxSizing: "border-box",
127+
}}
128+
>
129+
<Box sx={{ height: "100%", overflow: "hidden" }}>
130+
<Sheet
131+
variant="outlined"
132+
sx={{
133+
height: "100%",
134+
overflow: "hidden",
135+
display: "flex",
136+
flexDirection: "column",
137+
boxSizing: "border-box",
138+
}}
139+
>
140+
<Typography level="body-sm" sx={{ textAlign: "center" }}>
141+
Object 1
142+
</Typography>
143+
<Box sx={{ height: "calc(100% - 25px)", overflow: "auto" }}>
144+
<CodeMirror
145+
value={obj1Val}
146+
extensions={[javascript()]}
147+
onChange={onChange1}
148+
height="100%"
149+
/>
150+
</Box>
151+
</Sheet>
152+
</Box>
153+
<Box />
154+
<Box sx={{ height: "100%", overflow: "hidden" }}>
155+
<Sheet
156+
variant="outlined"
157+
sx={{
158+
height: "100%",
159+
overflow: "hidden",
160+
display: "flex",
161+
flexDirection: "column",
162+
boxSizing: "border-box",
163+
}}
164+
>
165+
<Typography level="body-sm" sx={{ textAlign: "center" }}>
166+
Object 2
167+
</Typography>
168+
<Box sx={{ height: "calc(100% - 25px)", overflow: "auto" }}>
169+
<CodeMirror
170+
value={obj2Val}
171+
extensions={[javascript()]}
172+
onChange={onChange2}
173+
/>
174+
</Box>
175+
</Sheet>
176+
</Box>
177+
<Box />
178+
<Box sx={{ height: "100%", overflow: "hidden" }}>
179+
<Sheet
180+
variant="outlined"
181+
sx={{ height: "100%", boxSizing: "border-box" }}
162182
>
163-
<TabList sx={{ display: "flex", justifyContent: "center" }}>
164-
<Tab>Visualize</Tab>
165-
<Tab>Raw</Tab>
166-
</TabList>
167-
<TabPanel
168-
value={0}
169-
sx={{ height: "calc(100% - 35px)", overflow: "auto" }}
170-
></TabPanel>
171-
<TabPanel
172-
value={1}
173-
sx={{ height: "calc(100% - 35px)", overflow: "auto" }}
183+
<Tabs
184+
aria-label="Basic tabs"
185+
defaultValue={0}
186+
sx={{ height: "100%" }}
174187
>
175-
<Box component="pre">{JSON.stringify(raw, null, 4)}</Box>
176-
</TabPanel>
177-
</Tabs>
178-
</Sheet>
188+
<TabList sx={{ display: "flex", justifyContent: "center" }}>
189+
<Tab>Visualize</Tab>
190+
<Tab>Raw</Tab>
191+
</TabList>
192+
<TabPanel
193+
value={0}
194+
sx={{ height: "calc(100% - 35px)", overflow: "auto", p: 0 }}
195+
>
196+
<Visualizer obj={obj1Val} diff={raw} />
197+
</TabPanel>
198+
<TabPanel
199+
value={1}
200+
sx={{ height: "calc(100% - 35px)", overflow: "auto" }}
201+
>
202+
<Box component="pre">{JSON.stringify(raw, null, 4)}</Box>
203+
</TabPanel>
204+
</Tabs>
205+
</Sheet>
206+
</Box>
179207
</Box>
180208
</Box>
181209

182-
<Box sx={{ display: "flex", justifyContent: "center", mt: 2 }}>
210+
<Box sx={{ display: "flex", justifyContent: "center" }}>
183211
<Box sx={{ mr: 1 }} component="span">
184212
{" "}
185213
© 2024

0 commit comments

Comments
 (0)