feat: add jq

package.json

@@ -30,6 +30,7 @@
     "axios": "^1.5.0",
     "dayjs": "^1.11.10",
     "html-to-image": "^1.11.11",
+    "jq-in-the-browser": "^0.7.2",
     "json-2-csv": "^4.1.0",
     "jsonc-parser": "^3.2.0",
     "jsonwebtoken": "^9.0.2",
@@ -53,11 +54,11 @@
     "zustand": "^4.4.0"
   },
   "devDependencies": {
-    "@types/jxon": "^2.0.2",
     "@next/bundle-analyzer": "^13.4.12",
     "@testing-library/react": "^14.0.0",
     "@trivago/prettier-plugin-sort-imports": "^4.2.0",
     "@types/jsonwebtoken": "^9.0.3",
+    "@types/jxon": "^2.0.2",
     "@types/lodash.debounce": "^4.0.7",
     "@types/lodash.get": "^4.4.7",
     "@types/lodash.set": "^4.3.7",

src/containers/Editor/LiveEditor/Tools.tsx

@@ -18,6 +18,7 @@ import {
   VscLayoutSidebarLeftOff,
   VscSettingsGear,
   VscTarget,
+  VscSearchFuzzy,
 } from "react-icons/vsc";
 import { SearchInput } from "src/components/SearchInput";
 import useToggleHide from "src/hooks/useToggleHide";
@@ -317,6 +318,9 @@ export const Tools: React.FC<{ isWidget?: boolean }> = ({ isWidget = false }) =>
                 </StyledToolElement>
               </Menu.Target>
               <Menu.Dropdown>
+                <Menu.Item fz={12} icon={<VscSearchFuzzy />} onClick={() => setVisible("jq")(true)}>
+                  JSON Query (jq)
+                </Menu.Item>
                 <Menu.Item fz={12} icon={<VscJson />} onClick={() => setVisible("schema")(true)}>
                   JSON Schema
                 </Menu.Item>

src/containers/Modals/JQModal/index.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { Stack, Modal, Button, ModalProps, Text, Anchor, Group } from "@mantine/core";
+import Editor from "@monaco-editor/react";
+import jq from "jq-in-the-browser";
+import { toast } from "react-hot-toast";
+import useFile from "src/store/useFile";
+import useJson from "src/store/useJson";
+import useStored from "src/store/useStored";
+
+export const JQModal: React.FC<ModalProps> = ({ opened, onClose }) => {
+  const [query, setQuery] = React.useState("");
+  const lightmode = useStored(state => (state.lightmode ? "light" : "vs-dark"));
+  const getJson = useJson(state => state.getJson);
+  const setContents = useFile(state => state.setContents);
+
+  const onApply = () => {
+    try {
+      const res = jq(query)(JSON.parse(getJson())) as object;
+      setContents({ contents: JSON.stringify(res, null, 2) });
+      onClose();
+    } catch (error) {
+      toast.error("Invalid JQ");
+    }
+  };
+
+  return (
+    <Modal title="JSON Query" size="lg" opened={opened} onClose={onClose} centered>
+      <Stack py="sm">
+        <Text fz="sm">
+          <Anchor target="_blank" href="https://jqlang.github.io/jq/manual/">
+            What is JSON Query?
+          </Anchor>
+        </Text>
+        <Editor
+          value={query ?? ""}
+          theme={lightmode}
+          onChange={e => setQuery(e!)}
+          height={300}
+          language="markdown"
+          options={{
+            formatOnPaste: true,
+            formatOnType: true,
+            minimap: {
+              enabled: false,
+            },
+          }}
+        />
+        <Group position="right">
+          <Button onClick={onApply}>Display on Graph</Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+};

src/containers/Modals/index.ts

@@ -12,6 +12,7 @@ export { JWTModal } from "./JWTModal";
 export { SchemaModal } from "./SchemaModal";
 export { CancelPremiumModal } from "./CancelPremiumModal";
 export { ReviewModal } from "./ReviewModal";
+export { JQModal } from "./JQModal";
 
 type Modal =
   | "clear"
@@ -27,6 +28,7 @@ type Modal =
   | "jwt"
   | "schema"
   | "cancelPremium"
-  | "review";
+  | "review"
+  | "jq";
 
 export type { Modal };

src/layout/ModalController/index.tsx

@@ -22,6 +22,7 @@ const modalComponents: ModalComponent[] = [
   { key: "schema", component: Modals.SchemaModal },
   { key: "cancelPremium", component: Modals.CancelPremiumModal },
   { key: "review", component: Modals.ReviewModal },
+  { key: "jq", component: Modals.JQModal },
 ];
 
 const ModalController = () => {

src/store/useModal.ts

@@ -26,6 +26,7 @@ const initialStates: ModalState = {
   schema: false,
   cancelPremium: false,
   review: false,
+  jq: false,
 };
 
 const authModals: Modal[] = ["cloud", "account"];