Merge pull request #30 from sreeram-venkitesh/add-demo-and-copy-json-functionality

Added demo json and functionality to copy output json string

Author: sreeram-venkitesh

components/Button.jsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { motion } from "framer-motion";
 import classnames from "classnames";
 
@@ -11,6 +12,8 @@ const Button = ({
   href = "",
   to = "",
   type = "button",
+  icon = null,
+  iconSize = 16,
   ...otherProps
 }) => {
   let Parent, elementSpecificProps;
@@ -31,6 +34,8 @@ const Button = ({
     if (!disabled) onClick();
   };
 
+  const Icon = icon || React.Fragment;
+
   return (
     <Parent
       onClick={handleClick}
@@ -48,6 +53,7 @@ const Button = ({
       {...elementSpecificProps}
     >
       {label && <span>{label}</span>}
+      {icon && <Icon size={iconSize} className="cs-ui-btn__icon" />}
     </Parent>
   );
 };

components/constants.js

@@ -3,4 +3,27 @@ export const FOOTER_MESSAGES = [
   "Penguins Propose and Stick Together for Life",
   "Baby Sloths Are Addicted to Cuddling",
   "A Group of Bunnies Is Called a Fluffle",
-];
+];
+
+export const DEMO_JSON_STRING = {
+  glossary: {
+    title: "example glossary",
+    GlossDiv: {
+      title: "S",
+      GlossList: {
+        GlossEntry: {
+          ID: "SGML",
+          SortAs: "SGML",
+          GlossTerm: "Standard Generalized Markup Language",
+          Acronym: "SGML",
+          Abbrev: "ISO 8879:1986",
+          GlossDef: {
+            para: "A meta-markup language, used to create markup languages such as DocBook.",
+            GlossSeeAlso: ["GML", "XML"],
+          },
+          GlossSee: "markup",
+        },
+      },
+    },
+  },
+};

icons/Copy.js

@@ -0,0 +1,42 @@
+/** Icons generated by create-react-icons. Don't edit this file directly. **/
+import React from "react";
+import PropTypes from "prop-types";
+
+export function Copy(props) {
+  const { size, color, ...other } = props;
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      height={size}
+      width={size}
+      title="copy-ico"
+      {...other}
+    >
+      <path
+        d="M5.167 16C3.97 16 3 15.03 3 13.833V5.167C3 3.97 3.97 3 5.167 3H13.834C15.03 3 16 3.97 16 5.167"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M18.833 21H10.166C8.97 21 8 20.03 8 18.833V10.166C8 8.97 8.97 8 10.167 8H18.834C20.03 8 21 8.97 21 10.167V18.834C21 20.03 20.03 21 18.833 21V21Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+Copy.defaultProps = {
+  color: "currentColor",
+  size: 24,
+};
+
+Copy.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};

pages/index.js

@@ -3,21 +3,26 @@ import CodeMirror from "@uiw/react-codemirror";
 import { javascript } from "@codemirror/lang-javascript";
 import { createTheme } from "@uiw/codemirror-themes";
 import { EditorView } from "@codemirror/view";
-
 import Head from "next/head";
 import Toastr from "../components/Toastr";
 import { ToastContainer } from "react-toastify";
 import Button from "../components/Button";
 
 import { CODE_EDITOR_THEME } from "../constants/theme";
+import { DEMO_JSON_STRING } from "../components/constants";
+import { Copy } from "../icons/Copy";
 
 export default function Home() {
-  const [inputString, setInputString] = useState("");
+  const [inputString, setInputString] = useState(
+    JSON.stringify(DEMO_JSON_STRING)
+  );
   const [outputString, setOutputString] = useState("");
 
+  let editorExtensions = [javascript({ jsx: true }), EditorView.lineWrapping];
+
   const handleFormat = () => {
     try {
-      setOutputString(JSON.stringify(JSON.parse(inputString), null, 4));
+      setOutputString(JSON.stringify(JSON.parse(inputString), null, 2));
     } catch (error) {
       Toastr.error("Enter Valid JSON");
     }
@@ -31,14 +36,28 @@ export default function Home() {
   const handleDownload = () => {
     const element = document.createElement("a");
     const file = new Blob([outputString], {
-      type: "text/plain;charset=utf-8",
+      type: "text/json",
     });
     element.href = URL.createObjectURL(file);
-    element.download = "json.txt";
+    element.download = "json.json";
     document.body.appendChild(element);
     element.click();
   };
 
+  const handleCopy = () => {
+    try {
+      navigator.clipboard.writeText(outputString);
+      Toastr.success("Copied to clipboard");
+    } catch (error) {
+      Toastr.error("Could not Copy. Try again");
+    }
+  };
+
+  const handleDemoJson = () => {
+    setInputString(JSON.stringify(DEMO_JSON_STRING));
+    setOutputString("");
+  };
+
   useEffect(() => {
     inputString === "" && setOutputString("");
   }, [inputString]);
@@ -56,28 +75,50 @@ export default function Home() {
         <p className="text-2xl text-center">JSON STYLE</p>
         <div className="space-y-3 flex-col">
           <div className="flex space-x-3 h-90">
-            <CodeMirror
-              autoFocus
-              height="548px"
-              theme="dark"
-              value={inputString}
-              extensions={[javascript({ jsx: true })]}
-              onChange={(e) => setInputString(e)}
-              className="w-1/2 mt-7 h-full"
-            />
-            <CodeMirror
-              height="548px"
-              theme={createTheme(CODE_EDITOR_THEME)}
-              editable={false}
-              value={outputString}
-              extensions={[javascript({ jsx: true }), EditorView.lineWrapping]}
-              className="w-1/2 mt-7 overflow-auto h-full"
-            />
+            <div className="w-full bg-[#282c34]">
+              <Button
+                size="small"
+                style="text"
+                label="Demo JSON"
+                onClick={handleDemoJson}
+              />
+              <CodeMirror
+                autoFocus
+                height="548px"
+                theme="dark"
+                value={inputString}
+                extensions={editorExtensions}
+                onChange={(e) => setInputString(e)}
+                className="h-full mt-1"
+              />
+            </div>
+            <div className="w-full bg-[#282c34]">
+              <Button
+                size="small"
+                style="text"
+                onClick={handleCopy}
+                icon={Copy}
+                className="float-right"
+                disabled={outputString === ""}
+              />
+              <CodeMirror
+                height="548px"
+                theme={createTheme(CODE_EDITOR_THEME)}
+                editable={false}
+                value={outputString}
+                extensions={editorExtensions}
+                className="overflow-auto h-full mt-7"
+              />
+            </div>
           </div>
           <div className="flex bg-zinc-800 space-x-3 px-3 py-3 rounded spacy-x-2">
             <Button label="Format" onClick={handleFormat} />
             <Button label="Clear" onClick={handleClear} />
-            <Button label="Download" onClick={handleDownload} />
+            <Button
+              label="Download"
+              onClick={handleDownload}
+              disabled={outputString === ""}
+            />
           </div>
         </div>
         {/* <Footer /> */}

styles/abstracts/_variable.scss

@@ -9,6 +9,7 @@ $font-sm: 14px;
 $font-semibold: 600;
 
 // Font Size
+$text-sm: 12px;
 $text-base: 16px;
 
 // Border Radius

styles/components/_button.scss

@@ -34,14 +34,14 @@
   }
 
   &-text {
-    color: $gray-900;
+    color: $white;
   }
 }
 
 //size
 .button--size {
   &-small {
-    font-size: $text-base;
+    font-size: $text-sm;
     padding: 4px 8px;
   }