fix #25: Import JSON file

Author: ashphy

src/components/drop-zone.tsx

@@ -0,0 +1,57 @@
+import { Upload } from "lucide-react";
+import { ReactNode, useState } from "react";
+
+interface DropZoneProps {
+  onDrop?: (file: File) => void;
+  children: ReactNode;
+}
+
+export const DropZone = ({ onDrop, children }: DropZoneProps) => {
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleOnDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsDragging(false);
+    const file = e.dataTransfer.files[0];
+    if (file) {
+      onDrop?.(file);
+    }
+  };
+
+  return (
+    <div
+      onDrop={handleOnDrop}
+      onDragOver={(e) => {
+        setIsDragging(true);
+        e.preventDefault();
+      }}
+      onDragEnter={() => setIsDragging(true)}
+      onDragLeave={() => setIsDragging(false)}
+      data-drag={isDragging ? "true" : "false"}
+      className="relative"
+    >
+      {children}
+      <div
+        data-drag={isDragging ? "true" : "false"}
+        className="
+          invisible  data-[drag=true]:visible opacity-0 data-[drag=true]:opacity-80
+          absolute flex w-full h-full top-0 left-0 p-2 bg-white
+          transition-opacity duration-200
+        "
+      >
+        <div
+          className="
+            flex flex-col items-center justify-center gap-4
+            w-full h-full
+            border-2 border-dashed border-joe-green-600 rounded-lg text-lg
+          "
+        >
+          <div>Drop JSON file here</div>
+          <div>
+            <Upload />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

src/components/editor/json-editor.tsx

@@ -9,6 +9,7 @@ import {
   findSmallestNode,
   generateNormalizedPathNode,
 } from "@/lib/normalized-path";
+import { DropZone } from "../drop-zone";
 
 export const JSONEditor = () => {
   const { document, setDocument, jsonDocument } = useJSONPath();
@@ -63,25 +64,36 @@ export const JSONEditor = () => {
     setDocument(value || "");
   };
 
+  const handleOnDrop = (file: File) => {
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      const content = event.target?.result as string;
+      setDocument(content);
+    };
+    reader.readAsText(file);
+  };
+
   return (
-    <Editor
-      className={cn("border-2", jsonDocument.error && "border-red-400")}
-      height="600px"
-      path="json"
-      defaultLanguage="json"
-      value={document}
-      loading="Loading..."
-      onMount={handleEditorDidMount}
-      onChange={handleOnChange}
-      options={{
-        wordWrap: "on",
-        minimap: {
-          enabled: false,
-        },
-        scrollBeyondLastLine: false,
-        formatOnPaste: true,
-        formatOnType: true,
-      }}
-    />
+    <DropZone onDrop={handleOnDrop}>
+      <Editor
+        className={cn("border-2", jsonDocument.error && "border-red-400")}
+        height="600px"
+        path="json"
+        defaultLanguage="json"
+        value={document}
+        loading="Loading..."
+        onMount={handleEditorDidMount}
+        onChange={handleOnChange}
+        options={{
+          wordWrap: "on",
+          minimap: {
+            enabled: false,
+          },
+          scrollBeyondLastLine: false,
+          formatOnPaste: true,
+          formatOnType: true,
+        }}
+      />
+    </DropZone>
   );
 };

src/components/import-file.tsx

@@ -0,0 +1,68 @@
+import { useRef } from "react";
+import { Button } from "./ui/button";
+import { useJSONPath } from "@/hooks/use-jsonpath";
+
+export const ImportFile = () => {
+  const { setDocument } = useJSONPath();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleOnClick = () => {
+    inputRef.current?.click();
+  };
+
+  const handleOnInput = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        const content = event.target?.result as string;
+        setDocument(content);
+      };
+      reader.readAsText(file);
+    }
+  };
+
+  return (
+    <div>
+      <Button variant="outline" onClick={handleOnClick}>
+        Import File
+      </Button>
+      <input
+        ref={inputRef}
+        className="hidden"
+        type="file"
+        onInput={handleOnInput}
+        accept="
+          application/jsonjson,
+          .jsonl,
+          .ndjson,
+          .geojson,
+          .topojson,
+          .jwt,
+          .webmanifest,
+          .har,
+          .mcstructure,
+          .eslintrc,
+          .prettierrc,
+          .babelrc,
+          .code-snippets,
+          .ipynb,
+          .vg,
+          .vl,
+          .template,
+          application/json,
+          application/geo+json,
+          application/x-ndjson,
+          application/jsonlines,
+          application/schema+json,
+          application/jwt,
+          application/feed+json,
+          application/vnd.oai.openapi+json,
+          application/vnd.swagger+json,
+          application/manifest+json,
+          application/x-ipynb+json,
+        "
+      ></input>
+    </div>
+  );
+};

src/components/online-evaluator.tsx

@@ -4,6 +4,7 @@ import { Result } from "./editor/result";
 import { OutputPathSwitch } from "./output-path-switch";
 import { useJSONPath } from "@/hooks/use-jsonpath";
 import { DownloadButton } from "./download-button";
+import { ImportFile } from "./import-file";
 
 export const JSONPathOnlineEvaluator = () => {
   const { outputPaths, setOutputPaths } = useJSONPath();
@@ -16,6 +17,7 @@ export const JSONPathOnlineEvaluator = () => {
         <div>
           <div className="flex justify-between items-center mb-1">
             <h2 className="py-1 text-xl text-joe-green-950">Document</h2>
+            <ImportFile />
           </div>
           <JSONEditor />
         </div>