prettier lint

src/components/CustomNode/ObjectNode.tsx

@@ -15,22 +15,10 @@ const ObjectNode: React.FC<CustomNodeProps> = ({ node, x, y }) => {
   if (data.isEmpty) return null;
 
   return (
-    <Styled.StyledForeignObject
-      width={width}
-      height={height}
-      x={0}
-      y={0}
-      ref={ref}
-      isObject
-    >
+    <Styled.StyledForeignObject width={width} height={height} x={0} y={0} ref={ref} isObject>
       {(!performanceMode || inViewport) &&
         text.map((val, idx) => (
-          <Styled.StyledRow
-            data-key={JSON.stringify(val[1])}
-            data-x={x}
-            data-y={y}
-            key={idx}
-          >
+          <Styled.StyledRow data-key={JSON.stringify(val[1])} data-x={x} data-y={y} key={idx}>
             <Styled.StyledKey objectKey>
               {JSON.stringify(val[0]).replaceAll('"', "")}:{" "}
             </Styled.StyledKey>
@@ -42,10 +30,7 @@ const ObjectNode: React.FC<CustomNodeProps> = ({ node, x, y }) => {
 };
 
 function propsAreEqual(prev: CustomNodeProps, next: CustomNodeProps) {
-  return (
-    String(prev.node.text) === String(next.node.text) &&
-    prev.node.width === next.node.width
-  );
+  return String(prev.node.text) === String(next.node.text) && prev.node.width === next.node.width;
 }
 
 export default React.memo(ObjectNode, propsAreEqual);

src/components/CustomNode/TextNode.tsx

@@ -27,19 +27,13 @@ const StyledExpand = styled.button`
 
 const StyledTextNodeWrapper = styled.div<{ hasCollapse: boolean }>`
   display: flex;
-  justify-content: ${({ hasCollapse }) =>
-    hasCollapse ? "space-between" : "center"};
+  justify-content: ${({ hasCollapse }) => (hasCollapse ? "space-between" : "center")};
   align-items: center;
   height: 100%;
   width: 100%;
 `;
 
-const TextNode: React.FC<CustomNodeProps> = ({
-  node,
-  x,
-  y,
-  hasCollapse = false,
-}) => {
+const TextNode: React.FC<CustomNodeProps> = ({ node, x, y, hasCollapse = false }) => {
   const { id, text, width, height, data } = node;
   const ref = React.useRef(null);
   const hideCollapse = useStored(state => state.hideCollapse);
@@ -82,9 +76,7 @@ const TextNode: React.FC<CustomNodeProps> = ({
         )}
 
         {data.parent && data.childrenCount > 0 && !hideChildrenCount && (
-          <Styled.StyledChildrenCount>
-            ({data.childrenCount})
-          </Styled.StyledChildrenCount>
+          <Styled.StyledChildrenCount>({data.childrenCount})</Styled.StyledChildrenCount>
         )}
 
         {inViewport && data.parent && hasCollapse && !hideCollapse && (

src/components/CustomNode/index.tsx

@@ -28,12 +28,7 @@ export const CustomNode = (nodeProps: NodeProps) => {
         }
 
         return (
-          <TextNode
-            node={node as NodeData}
-            hasCollapse={data.childrenCount > 0}
-            x={x}
-            y={y}
-          />
+          <TextNode node={node as NodeData} hasCollapse={data.childrenCount > 0} x={x} y={y} />
         );
       }}
     </Node>

src/components/CustomNode/styles.tsx

@@ -53,11 +53,7 @@ export const StyledForeignObject = styled.foreignObject<{
   }
 `;
 
-function getKeyColor(
-  theme: DefaultTheme,
-  parent: "array" | "object" | false,
-  objectKey: boolean
-) {
+function getKeyColor(theme: DefaultTheme, parent: "array" | "object" | false, objectKey: boolean) {
   if (parent) {
     if (parent === "array") return theme.NODE_COLORS.PARENT_ARR;
     return theme.NODE_COLORS.PARENT_OBJ;
@@ -74,8 +70,7 @@ export const StyledKey = styled.span<{
   display: inline;
   flex: 1;
   font-weight: 500;
-  color: ${({ theme, objectKey = false, parent = false }) =>
-    getKeyColor(theme, parent, objectKey)};
+  color: ${({ theme, objectKey = false, parent = false }) => getKeyColor(theme, parent, objectKey)};
   font-size: ${({ parent }) => parent && "14px"};
   overflow: hidden;
   text-overflow: ellipsis;

src/components/Graph/ErrorView.tsx

@@ -26,17 +26,12 @@ const StyledInfo = styled.p`
 
 export const ErrorView = () => (
   <StyledErrorView>
-    <img
-      src="/assets/undraw_qa_engineers_dg-5-p.svg"
-      width="200"
-      height="200"
-      alt="oops"
-    />
+    <img src="/assets/undraw_qa_engineers_dg-5-p.svg" width="200" height="200" alt="oops" />
     <StyledTitle>JSON Crack is unable to handle this file!</StyledTitle>
     <StyledInfo>
-      We apologize for the problem you encountered. We are doing our best as an Open
-      Source community to improve our service. Unfortunately, JSON Crack is currently
-      unable to handle such a large file.
+      We apologize for the problem you encountered. We are doing our best as an Open Source
+      community to improve our service. Unfortunately, JSON Crack is currently unable to handle such
+      a large file.
     </StyledInfo>
   </StyledErrorView>
 );

src/components/Graph/index.tsx

@@ -1,9 +1,5 @@
 import React from "react";
-import {
-  ReactZoomPanPinchRef,
-  TransformComponent,
-  TransformWrapper,
-} from "react-zoom-pan-pinch";
+import { ReactZoomPanPinchRef, TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
 import { Canvas, Edge, ElkRoot } from "reaflow";
 import { CustomNode } from "src/components/CustomNode";
 import useGraph from "src/store/useGraph";
@@ -40,11 +36,7 @@ const StyledEditorWrapper = styled.div<{ isWidget: boolean }>`
   }
 `;
 
-const GraphComponent = ({
-  isWidget = false,
-  openModal,
-  setSelectedNode,
-}: GraphProps) => {
+const GraphComponent = ({ isWidget = false, openModal, setSelectedNode }: GraphProps) => {
   const setLoading = useGraph(state => state.setLoading);
   const setZoomPanPinch = useGraph(state => state.setZoomPanPinch);
   const centerView = useGraph(state => state.centerView);
@@ -78,9 +70,7 @@ const GraphComponent = ({
     (layout: ElkRoot) => {
       if (layout.width && layout.height) {
         const areaSize = layout.width * layout.height;
-        const changeRatio = Math.abs(
-          (areaSize * 100) / (size.width * size.height) - 100
-        );
+        const changeRatio = Math.abs((areaSize * 100) / (size.width * size.height) - 100);
 
         setSize({
           width: (layout.width as number) + 400,
@@ -119,9 +109,7 @@ const GraphComponent = ({
         doubleClick={{ disabled: true }}
         onInit={onInit}
         onPanning={ref => ref.instance.wrapperComponent?.classList.add("dragging")}
-        onPanningStop={ref =>
-          ref.instance.wrapperComponent?.classList.remove("dragging")
-        }
+        onPanningStop={ref => ref.instance.wrapperComponent?.classList.remove("dragging")}
       >
         <TransformComponent
           wrapperStyle={{
@@ -148,9 +136,7 @@ const GraphComponent = ({
             fit={true}
             key={direction}
             node={props => <CustomNode {...props} onClick={handleNodeClick} />}
-            edge={props => (
-              <Edge {...props} containerClassName={`edge-${props.id}`} />
-            )}
+            edge={props => <Edge {...props} containerClassName={`edge-${props.id}`} />}
           />
         </TransformComponent>
       </TransformWrapper>

src/components/Loading/index.tsx

@@ -57,9 +57,7 @@ export const Loading: React.FC<LoadingProps> = ({ loading = true, message }) =>
       <StyledLogo>
         <StyledText>JSON</StyledText> Crack
       </StyledLogo>
-      <StyledMessage>
-        {message ?? "Preparing the environment for you..."}
-      </StyledMessage>
+      <StyledMessage>{message ?? "Preparing the environment for you..."}</StyledMessage>
     </StyledLoading>
   );
 };

src/components/Modal/index.tsx

@@ -17,9 +17,7 @@ type ModalTypes = {
 
 export interface ModalProps {
   visible: boolean;
-  setVisible:
-    | React.Dispatch<React.SetStateAction<boolean>>
-    | ((visible: boolean) => void);
+  setVisible: React.Dispatch<React.SetStateAction<boolean>> | ((visible: boolean) => void);
   size?: "sm" | "md" | "lg";
 }
 

src/components/Modal/styles.tsx

@@ -24,8 +24,7 @@ export const ModalWrapper = styled.div`
 
 export const ModalInnerWrapper = styled.div<{ size: "sm" | "md" | "lg" }>`
   min-width: 440px;
-  max-width: ${({ size }) =>
-    size === "sm" ? "490px" : size === "md" ? "50%" : "90%"};
+  max-width: ${({ size }) => (size === "sm" ? "490px" : size === "md" ? "50%" : "90%")};
   width: fit-content;
   animation: ${appearAnimation} 220ms ease-in-out;
   line-height: 20px;

src/components/SearchInput/index.tsx

@@ -76,11 +76,7 @@ export const SearchInput: React.FC = () => {
           placeholder="Search Node"
         />
         <StyledSearchButton type="reset" aria-label="search" onClick={handleClear}>
-          {content.value ? (
-            <IoCloseSharp size={18} />
-          ) : (
-            <AiOutlineSearch size={18} />
-          )}
+          {content.value ? <IoCloseSharp size={18} /> : <AiOutlineSearch size={18} />}
         </StyledSearchButton>
       </StyledForm>
     </StyledInputWrapper>

src/components/Sidebar/index.tsx

@@ -1,12 +1,7 @@
 import React from "react";
 import Link from "next/link";
 import toast from "react-hot-toast";
-import {
-  AiOutlineDelete,
-  AiOutlineSave,
-  AiOutlineFileAdd,
-  AiOutlineEdit,
-} from "react-icons/ai";
+import { AiOutlineDelete, AiOutlineSave, AiOutlineFileAdd, AiOutlineEdit } from "react-icons/ai";
 import { CgArrowsMergeAltH, CgArrowsShrinkH } from "react-icons/cg";
 import { FiDownload } from "react-icons/fi";
 import { MdCenterFocusWeak } from "react-icons/md";
@@ -76,8 +71,7 @@ const StyledElement = styled.button`
 `;
 
 const StyledText = styled.span<{ secondary?: boolean }>`
-  color: ${({ theme, secondary }) =>
-    secondary ? theme.INTERACTIVE_HOVER : theme.ORANGE};
+  color: ${({ theme, secondary }) => (secondary ? theme.INTERACTIVE_HOVER : theme.ORANGE)};
 `;
 
 const StyledFlowIcon = styled(TiFlowMerge)<{ rotate: number }>`
@@ -154,6 +148,8 @@ export const Sidebar: React.FC = () => {
   const fullscreen = useGraph(state => state.fullscreen);
   const graphCollapsed = useGraph(state => state.graphCollapsed);
 
+  console.log(graphCollapsed, foldNodes);
+
   const handleSave = () => {
     const a = document.createElement("a");
     const file = new Blob([getJson()], { type: "text/plain" });
@@ -214,19 +210,13 @@ export const Sidebar: React.FC = () => {
           </StyledElement>
         </Tooltip>
 
-        <Tooltip
-          className="desktop"
-          title={foldNodes ? "Unfold Nodes" : "Fold Nodes"}
-        >
+        <Tooltip className="desktop" title={foldNodes ? "Unfold Nodes" : "Fold Nodes"}>
           <StyledElement onClick={toggleFoldNodes}>
             {foldNodes ? <CgArrowsShrinkH /> : <CgArrowsMergeAltH />}
           </StyledElement>
         </Tooltip>
 
-        <Tooltip
-          className="desktop"
-          title={graphCollapsed ? "Expand Graph" : "Collapse Graph"}
-        >
+        <Tooltip className="desktop" title={graphCollapsed ? "Expand Graph" : "Collapse Graph"}>
           <StyledElement onClick={toggleExpandCollapseGraph}>
             {graphCollapsed ? <VscExpandAll /> : <VscCollapseAll />}
           </StyledElement>

src/components/Sponsors/index.tsx

@@ -60,8 +60,7 @@ const StyledSponsor = styled.li<{ handle: string }>`
       transform: translateY(-110%);
       border-width: 5px;
       border-style: solid;
-      border-color: ${({ theme }) => theme.BACKGROUND_PRIMARY} transparent
-        transparent transparent;
+      border-color: ${({ theme }) => theme.BACKGROUND_PRIMARY} transparent transparent transparent;
     }
   }
 
@@ -86,13 +85,7 @@ export const Sponsors = () => {
       {sponsors.users.map(user => (
         <StyledSponsor handle={user.handle} key={user.handle}>
           <a href={user.profile} target="_blank" rel="noreferrer">
-            <img
-              src={user.avatar}
-              alt={user.handle}
-              width="40"
-              height="40"
-              loading="lazy"
-            />
+            <img src={user.avatar} alt={user.handle} width="40" height="40" loading="lazy" />
           </a>
         </StyledSponsor>
       ))}

src/components/SupportButton/index.tsx

@@ -26,8 +26,8 @@ const StyledSupportButton = styled.a`
   transition: all 0.5s;
   overflow: hidden;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.07),
-    0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07),
-    0 16px 32px rgba(0, 0, 0, 0.07), 0 32px 64px rgba(0, 0, 0, 0.07);
+    0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07), 0 16px 32px rgba(0, 0, 0, 0.07),
+    0 32px 64px rgba(0, 0, 0, 0.07);
   opacity: 0.7;
   box-sizing: content-box !important;
 
@@ -45,11 +45,7 @@ const StyledSupportButton = styled.a`
 
 export const SupportButton = () => {
   return (
-    <StyledSupportButton
-      href="https://github.com/sponsors/AykutSarac"
-      target="_blank"
-      rel="me"
-    >
+    <StyledSupportButton href="https://github.com/sponsors/AykutSarac" target="_blank" rel="me">
       <StyledText>Support JSON Crack</StyledText>
       <HiHeart size={25} />
     </StyledSupportButton>

src/components/Tooltip/index.tsx

@@ -28,8 +28,8 @@ const StyledTooltip = styled.div<{ visible: boolean }>`
   user-select: none;
   font-weight: 500;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.07),
-    0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07),
-    0 16px 32px rgba(0, 0, 0, 0.07), 0 32px 64px rgba(0, 0, 0, 0.07);
+    0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07), 0 16px 32px rgba(0, 0, 0, 0.07),
+    0 32px 64px rgba(0, 0, 0, 0.07);
 
   &::after {
     content: "";
@@ -39,8 +39,7 @@ const StyledTooltip = styled.div<{ visible: boolean }>`
     transform: translate(-90%, 50%);
     border-width: 8px;
     border-style: solid;
-    border-color: transparent ${({ theme }) => theme.BACKGROUND_PRIMARY} transparent
-      transparent;
+    border-color: transparent ${({ theme }) => theme.BACKGROUND_PRIMARY} transparent transparent;
   }
 
   @media only screen and (max-width: 768px) {
@@ -61,10 +60,7 @@ export const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
     <StyledTooltipWrapper {...props}>
       {title && <StyledTooltip visible={visible}>{title}</StyledTooltip>}
 
-      <StyledChildren
-        onMouseEnter={() => setVisible(true)}
-        onMouseLeave={() => setVisible(false)}
-      >
+      <StyledChildren onMouseEnter={() => setVisible(true)} onMouseLeave={() => setVisible(false)}>
         {children}
       </StyledChildren>
     </StyledTooltipWrapper>

src/containers/Editor/LiveEditor/GraphCanvas.tsx

@@ -32,11 +32,7 @@ export const GraphCanvas = ({ isWidget = false }: { isWidget?: boolean }) => {
 
   return (
     <>
-      <Graph
-        openModal={openModal}
-        setSelectedNode={setSelectedNode}
-        isWidget={isWidget}
-      />
+      <Graph openModal={openModal} setSelectedNode={setSelectedNode} isWidget={isWidget} />
       {!isWidget && (
         <NodeModal
           selectedNode={selectedNode}

src/containers/Editor/Tools.tsx

@@ -63,10 +63,7 @@ export const Tools: React.FC = () => {
           <AiOutlineFullscreen />
         </StyledToolElement>
         <SearchInput />
-        <StyledToolElement
-          aria-label="save"
-          onClick={() => setVisible("download")(true)}
-        >
+        <StyledToolElement aria-label="save" onClick={() => setVisible("download")(true)}>
           <FiDownload />
         </StyledToolElement>
         <StyledToolElement aria-label="center canvas" onClick={centerView}>

src/containers/Home/index.tsx

@@ -49,8 +49,7 @@ const HeroSection = () => {
       </Styles.StyledTitle>
       <Styles.StyledSubTitle>
         Seamlessly visualize your JSON data{" "}
-        <Styles.StyledHighlightedText>instantly</Styles.StyledHighlightedText> into
-        graphs.
+        <Styles.StyledHighlightedText>instantly</Styles.StyledHighlightedText> into graphs.
       </Styles.StyledSubTitle>
 
       <Styles.StyledButton rel="prefetch" href="/editor" link>
@@ -98,10 +97,9 @@ const FeaturesSection = () => (
       </Styles.StyledCardIcon>
       <Styles.StyledCardTitle>EASY-TO-USE</Styles.StyledCardTitle>
       <Styles.StyledCardDescription>
-        We believe that powerful software doesn&apos;t have to be difficult to use.
-        That&apos;s why we&apos;ve designed our app to be as intuitive and
-        easy-to-use as possible. You can quickly and easily load your JSON data and
-        start exploring and analyzing it right away!
+        We believe that powerful software doesn&apos;t have to be difficult to use. That&apos;s why
+        we&apos;ve designed our app to be as intuitive and easy-to-use as possible. You can quickly
+        and easily load your JSON data and start exploring and analyzing it right away!
       </Styles.StyledCardDescription>
     </Styles.StyledSectionCard>
 
@@ -111,9 +109,9 @@ const FeaturesSection = () => (
       </Styles.StyledCardIcon>
       <Styles.StyledCardTitle>SEARCH</Styles.StyledCardTitle>
       <Styles.StyledCardDescription>
-        Have a huge file of values, keys or arrays? Worry no more, type in the
-        keyword you are looking for into search input and it will take you to each
-        node with matching result highlighting the line to understand better!
+        Have a huge file of values, keys or arrays? Worry no more, type in the keyword you are
+        looking for into search input and it will take you to each node with matching result
+        highlighting the line to understand better!
       </Styles.StyledCardDescription>
     </Styles.StyledSectionCard>
 
@@ -123,9 +121,9 @@ const FeaturesSection = () => (
       </Styles.StyledCardIcon>
       <Styles.StyledCardTitle>DOWNLOAD</Styles.StyledCardTitle>
       <Styles.StyledCardDescription>
-        Download the graph to your local machine and use it wherever you want, to
-        your blogs, website or make it a poster and paste to the wall. Who
-        wouldn&apos;t want to see a JSON Crack graph onto their wall, eh?
+        Download the graph to your local machine and use it wherever you want, to your blogs,
+        website or make it a poster and paste to the wall. Who wouldn&apos;t want to see a JSON
+        Crack graph onto their wall, eh?
       </Styles.StyledCardDescription>
     </Styles.StyledSectionCard>
 
@@ -135,9 +133,9 @@ const FeaturesSection = () => (
       </Styles.StyledCardIcon>
       <Styles.StyledCardTitle>LIVE</Styles.StyledCardTitle>
       <Styles.StyledCardDescription>
-        With Microsoft&apos;s Monaco Editor which is also used by VS Code, easily
-        edit your JSON and directly view through the graphs. Also there&apos;s a JSON
-        validator above of it to make sure there is no type error.
+        With Microsoft&apos;s Monaco Editor which is also used by VS Code, easily edit your JSON and
+        directly view through the graphs. Also there&apos;s a JSON validator above of it to make
+        sure there is no type error.
       </Styles.StyledCardDescription>
     </Styles.StyledSectionCard>
   </Styles.StyledFeaturesSection>
@@ -146,51 +144,36 @@ const FeaturesSection = () => (
 const GitHubSection = () => (
   <Styles.StyledSection id="github" reverse>
     <Styles.StyledTwitterQuote>
-      <blockquote
-        className="twitter-tweet"
-        data-lang="en"
-        data-dnt="true"
-        data-theme="light"
-      >
+      <blockquote className="twitter-tweet" data-lang="en" data-dnt="true" data-theme="light">
         <p lang="en" dir="ltr">
-          Looking to understand or explore some JSON? Just paste or upload to
-          visualize it as a graph with{" "}
-          <a href="https://t.co/HlKSrhKryJ">https://t.co/HlKSrhKryJ</a> 😍 <br />
+          Looking to understand or explore some JSON? Just paste or upload to visualize it as a
+          graph with <a href="https://t.co/HlKSrhKryJ">https://t.co/HlKSrhKryJ</a> 😍 <br />
           <br />
-          Thanks to{" "}
-          <a href="https://twitter.com/aykutsarach?ref_src=twsrc%5Etfw">
-            @aykutsarach
-          </a>
-          ! <a href="https://t.co/0LyPUL8Ezz">pic.twitter.com/0LyPUL8Ezz</a>
+          Thanks to <a href="https://twitter.com/aykutsarach?ref_src=twsrc%5Etfw">@aykutsarach</a>!{" "}
+          <a href="https://t.co/0LyPUL8Ezz">pic.twitter.com/0LyPUL8Ezz</a>
         </p>
         &mdash; GitHub (@github){" "}
         <a href="https://twitter.com/github/status/1519363257794015233?ref_src=twsrc%5Etfw">
           April 27, 2022
         </a>
       </blockquote>{" "}
-      <Script
-        async
-        src="https://platform.twitter.com/widgets.js"
-        charSet="utf-8"
-      ></Script>
+      <Script async src="https://platform.twitter.com/widgets.js" charSet="utf-8"></Script>
     </Styles.StyledTwitterQuote>
     <Styles.StyledSectionArea>
       <Styles.StyledSubTitle>Open Source Community</Styles.StyledSubTitle>
       <Styles.StyledMinorTitle>
-        At JSON Crack, we believe in the power of open source software and the
-        communities that support it. That&apos;s why we&apos;re proud to be part of
-        the open source community and to contribute to the development and growth of
-        open source tools and technologies.
+        At JSON Crack, we believe in the power of open source software and the communities that
+        support it. That&apos;s why we&apos;re proud to be part of the open source community and to
+        contribute to the development and growth of open source tools and technologies.
         <br />
-        <br /> As part of our commitment to the open source community, we&apos;ve
-        made our app freely available to anyone who wants to use it, and we welcome
-        contributions from anyone who&apos;s interested in helping to improve it.
-        Whether you&apos;re a developer, a data scientist, or just someone who&apos;s
-        passionate about open source, we&apos;d love to have you join our community
-        and help us make JSON Crack the best it can be.
+        <br /> As part of our commitment to the open source community, we&apos;ve made our app
+        freely available to anyone who wants to use it, and we welcome contributions from anyone
+        who&apos;s interested in helping to improve it. Whether you&apos;re a developer, a data
+        scientist, or just someone who&apos;s passionate about open source, we&apos;d love to have
+        you join our community and help us make JSON Crack the best it can be.
         <br />
-        <br /> So why not join us and become part of the JSON Crack open source
-        community today? We can&apos;t wait to see what we can accomplish together!
+        <br /> So why not join us and become part of the JSON Crack open source community today? We
+        can&apos;t wait to see what we can accomplish together!
       </Styles.StyledMinorTitle>
       <Styles.StyledButton
         href="https://github.com/AykutSarac/jsoncrack.com"
@@ -208,23 +191,17 @@ const EmbedSection = () => (
     <Styles.StyledSectionArea>
       <Styles.StyledSubTitle>Embed Into Your Website</Styles.StyledSubTitle>
       <Styles.StyledMinorTitle>
-        JSON Crack provides users with the necessary code to embed the app into a
-        website easily using an iframe. This code can be easily copied and pasted
-        into the desired location on the website, allowing users to quickly and
-        easily integrate JSON Crack into existing workflows.
+        JSON Crack provides users with the necessary code to embed the app into a website easily
+        using an iframe. This code can be easily copied and pasted into the desired location on the
+        website, allowing users to quickly and easily integrate JSON Crack into existing workflows.
         <br />
-        <br /> Once the app is embedded, users can use it to view and analyze JSON
-        data directly on the website. This can be useful for a variety of purposes,
-        such as quickly checking the structure of a JSON file or verifying the data
-        contained within it. JSON Crack&apos;s intuitive interface makes it easy to
-        navigate and understand even complex JSON data, making it a valuable tool for
-        anyone working with JSON.
+        <br /> Once the app is embedded, users can use it to view and analyze JSON data directly on
+        the website. This can be useful for a variety of purposes, such as quickly checking the
+        structure of a JSON file or verifying the data contained within it. JSON Crack&apos;s
+        intuitive interface makes it easy to navigate and understand even complex JSON data, making
+        it a valuable tool for anyone working with JSON.
       </Styles.StyledMinorTitle>
-      <Styles.StyledButton
-        href="https://jsoncrack.com/embed"
-        status="SECONDARY"
-        link
-      >
+      <Styles.StyledButton href="https://jsoncrack.com/embed" status="SECONDARY" link>
         LEARN TO EMBED
       </Styles.StyledButton>
     </Styles.StyledSectionArea>

src/containers/Home/styles.tsx

@@ -74,13 +74,7 @@ export const StyledHome = styled.div`
 
 export const StyledGradientText = styled.span`
   background: #ffb76b;
-  background: linear-gradient(
-    to right,
-    #ffb76b 0%,
-    #ffa73d 30%,
-    #ff7c00 60%,
-    #ff7f04 100%
-  );
+  background: linear-gradient(to right, #ffb76b 0%, #ffa73d 30%, #ff7c00 60%, #ff7f04 100%);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;

src/containers/Modals/AccountModal/index.tsx

@@ -70,12 +70,7 @@ const AccountView: React.FC<Pick<ModalProps, "setVisible">> = ({ setVisible }) =
       <Modal.Content>
         <StyledTitle>Hello, {user?.name}!</StyledTitle>
         <StyledAccountWrapper>
-          <StyledAvatar
-            width="80"
-            height="80"
-            src={user?.profilePicture}
-            alt={user?.name}
-          />
+          <StyledAvatar width="80" height="80" src={user?.profilePicture} alt={user?.name} />
           <StyledContainer>
             USERNAME
             <div>{user?.name}</div>

src/containers/Modals/CloudModal/index.tsx

@@ -4,12 +4,7 @@ import { useQuery } from "@tanstack/react-query";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import toast from "react-hot-toast";
-import {
-  AiOutlineEdit,
-  AiOutlineLock,
-  AiOutlinePlus,
-  AiOutlineUnlock,
-} from "react-icons/ai";
+import { AiOutlineEdit, AiOutlineLock, AiOutlinePlus, AiOutlineUnlock } from "react-icons/ai";
 import { Modal, ModalProps } from "src/components/Modal";
 import { Spinner } from "src/components/Spinner";
 import { getAllJson, updateJson } from "src/services/db/json";
@@ -27,8 +22,7 @@ const StyledModalContent = styled.div`
 const StyledJsonCard = styled.a<{ active?: boolean }>`
   display: block;
   background: ${({ theme }) => theme.BLACK_SECONDARY};
-  border: 2px solid
-    ${({ theme, active }) => (active ? theme.SEAGREEN : theme.BLACK_SECONDARY)};
+  border: 2px solid ${({ theme, active }) => (active ? theme.SEAGREEN : theme.BLACK_SECONDARY)};
   border-radius: 5px;
   overflow: hidden;
   flex: 1;
@@ -160,13 +154,9 @@ const CreateCard: React.FC = () => (
 export const CloudModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
   const { isReady, query } = useRouter();
 
-  const { data, isFetching, refetch } = useQuery(
-    ["allJson", query],
-    () => getAllJson(),
-    {
-      enabled: isReady,
-    }
-  );
+  const { data, isFetching, refetch } = useQuery(["allJson", query], () => getAllJson(), {
+    enabled: isReady,
+  });
 
   return (
     <StyledModal visible={visible} setVisible={setVisible}>

src/containers/Modals/GoalsModal/index.tsx

@@ -43,24 +43,21 @@ export const GoalsModal = ({ visible, setVisible }) => {
         Dear user,
         <br />
         <br />
-        We are the team behind JSON Crack, an open-source JSON visualization app that
-        helps users better understand and work with complex JSON data. We are
-        passionate about making JSON data more accessible and user-friendly, and we
-        believe our app has the potential to make a real difference for developers
-        and data analysts alike.
+        We are the team behind JSON Crack, an open-source JSON visualization app that helps users
+        better understand and work with complex JSON data. We are passionate about making JSON data
+        more accessible and user-friendly, and we believe our app has the potential to make a real
+        difference for developers and data analysts alike.
         <br />
         <br />
-        However, developing and maintaining JSON Crack takes time and resources, and
-        we would love your support in helping us continue to improve the app and make
-        it even more useful for our users. As a sponsor, your support would help us
-        to continue to develop and maintain JSON Crack, and would allow us to add new
-        features and capabilities to the app.
+        However, developing and maintaining JSON Crack takes time and resources, and we would love
+        your support in helping us continue to improve the app and make it even more useful for our
+        users. As a sponsor, your support would help us to continue to develop and maintain JSON
+        Crack, and would allow us to add new features and capabilities to the app.
         <br />
         <br />
-        We believe that JSON Crack has the potential to make a real difference for
-        developers and data analysts, and we would be grateful for your support in
-        helping us continue to improve the app. Thank you for considering sponsoring
-        JSON Crack.
+        We believe that JSON Crack has the potential to make a real difference for developers and
+        data analysts, and we would be grateful for your support in helping us continue to improve
+        the app. Thank you for considering sponsoring JSON Crack.
         <br />
         <br />
         Sincerely,

src/containers/Modals/ImportModal/index.tsx

@@ -100,11 +100,7 @@ export const ImportModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
         </StyledUploadWrapper>
       </StyledModalContent>
       <Modal.Controls setVisible={setVisible}>
-        <Button
-          status="SECONDARY"
-          onClick={handleImportFile}
-          disabled={!(jsonFile || url)}
-        >
+        <Button status="SECONDARY" onClick={handleImportFile} disabled={!(jsonFile || url)}>
           Import
         </Button>
       </Modal.Controls>

src/containers/Modals/NodeModal/index.tsx

@@ -26,9 +26,7 @@ const StyledTextarea = styled.textarea`
 `;
 
 export const NodeModal = ({ selectedNode, visible, closeModal }: NodeModalProps) => {
-  const nodeData = Array.isArray(selectedNode)
-    ? Object.fromEntries(selectedNode)
-    : selectedNode;
+  const nodeData = Array.isArray(selectedNode) ? Object.fromEntries(selectedNode) : selectedNode;
 
   const handleClipboard = () => {
     toast.success("Content copied to clipboard!");

src/containers/Modals/SettingsModal/index.tsx

@@ -36,16 +36,10 @@ export const SettingsModal: React.FC<ModalProps> = ({ visible, setVisible }) =>
           <StyledToggle onChange={toggleHideCollapse} checked={hideCollapse}>
             Hide Collapse/Expand Button
           </StyledToggle>
-          <StyledToggle
-            onChange={toggleHideChildrenCount}
-            checked={hideChildrenCount}
-          >
+          <StyledToggle onChange={toggleHideChildrenCount} checked={hideChildrenCount}>
             Hide Children Count
           </StyledToggle>
-          <StyledToggle
-            onChange={() => setLightTheme(!lightmode)}
-            checked={lightmode}
-          >
+          <StyledToggle onChange={() => setLightTheme(!lightmode)} checked={lightmode}>
             Enable Light Theme
           </StyledToggle>
         </StyledModalWrapper>

src/hooks/useFocusNode.tsx

@@ -1,10 +1,6 @@
 import React from "react";
 import useGraph from "src/store/useGraph";
-import {
-  searchQuery,
-  cleanupHighlight,
-  highlightMatchedNodes,
-} from "src/utils/search";
+import { searchQuery, cleanupHighlight, highlightMatchedNodes } from "src/utils/search";
 
 export const useFocusNode = () => {
   const togglePerfMode = useGraph(state => state.togglePerfMode);

src/pages/_document.tsx

@@ -15,11 +15,7 @@ class MyDocument extends Document {
           <link rel="manifest" href="/manifest.json" />
           <link rel="icon" href="/favicon.ico" />
           <link rel="preconnect" href="https://fonts.googleapis.com" />
-          <link
-            rel="preconnect"
-            href="https://fonts.gstatic.com"
-            crossOrigin="anonymous"
-          />
+          <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
           <link
             href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&family=Roboto:wght@400;500;700&display=swap"
             rel="stylesheet"

src/pages/editor.tsx

@@ -49,10 +49,7 @@ const EditorPage: React.FC = () => {
     <StyledEditorWrapper>
       <Head>
         <title>Editor | JSON Crack</title>
-        <meta
-          name="description"
-          content="View your JSON data in graphs instantly."
-        />
+        <meta name="description" content="View your JSON data in graphs instantly." />
       </Head>
       <StyledPageWrapper>
         <Sidebar />

src/pages/embed.tsx

@@ -13,10 +13,7 @@ const Embed = () => {
     <>
       <Head>
         <title>Creating JSON Crack Embed | JSON Crack</title>
-        <meta
-          name="description"
-          content="Embedding JSON Crack tutorial into your websites."
-        />
+        <meta name="description" content="Embedding JSON Crack tutorial into your websites." />
       </Head>
       <StyledPageWrapper
         scrolling="no"
@@ -24,8 +21,8 @@ const Embed = () => {
         src="https://codepen.io/AykutSarac/embed/PoawZYo?default-tab=html%2Cresult"
         loading="lazy"
       >
-        See the Pen <a href="https://codepen.io/AykutSarac/pen/PoawZYo">Untitled</a>{" "}
-        by Aykut Saraç (<a href="https://codepen.io/AykutSarac">@AykutSarac</a>) on{" "}
+        See the Pen <a href="https://codepen.io/AykutSarac/pen/PoawZYo">Untitled</a> by Aykut Saraç
+        (<a href="https://codepen.io/AykutSarac">@AykutSarac</a>) on{" "}
         <a href="https://codepen.io">CodePen</a>.
       </StyledPageWrapper>
     </>

src/pages/widget.tsx

@@ -107,8 +107,7 @@ const WidgetPage = () => {
         };
 
         setDirection(options.direction);
-        if (options.theme === "light" || options.theme === "dark")
-          setTheme(options.theme);
+        if (options.theme === "light" || options.theme === "dark") setTheme(options.theme);
 
         setNodeEdges(nodes, edges);
       } catch (error) {

src/services/db/json.tsx

@@ -24,8 +24,7 @@ const saveJson = async ({ id, data }): Promise<{ data: { _id: string } }> => {
   });
 };
 
-const getAllJson = async (): Promise<{ data: JSON[] }> =>
-  await altogic.endpoint.get(`json`);
+const getAllJson = async (): Promise<{ data: JSON[] }> => await altogic.endpoint.get(`json`);
 
 const updateJson = async (id: string, data: object) =>
   await altogic.endpoint.put(`json/${id}`, {

src/utils/getChildrenEdges.ts

@@ -1,11 +1,7 @@
-export const getChildrenEdges = (
-  nodes: NodeData[],
-  edges: EdgeData[]
-): EdgeData[] => {
+export const getChildrenEdges = (nodes: NodeData[], edges: EdgeData[]): EdgeData[] => {
   const nodeIds = nodes.map(node => node.id);
 
   return edges.filter(
-    edge =>
-      nodeIds.includes(edge.from as string) || nodeIds.includes(edge.to as string)
+    edge => nodeIds.includes(edge.from as string) || nodeIds.includes(edge.to as string)
   );
 };

src/utils/getOutgoers.ts

@@ -15,8 +15,7 @@ export const getOutgoers = (
   const runner = (nodeId: string) => {
     const outgoerIds = edges.filter(e => e.from === nodeId).map(e => e.to);
     const nodeList = nodes.filter(n => {
-      if (parent.includes(n.id) && !matchingNodes.includes(n.id))
-        matchingNodes.push(n.id);
+      if (parent.includes(n.id) && !matchingNodes.includes(n.id)) matchingNodes.push(n.id);
       return outgoerIds.includes(n.id) && !parent.includes(n.id);
     });
 

src/utils/jsonParser.ts

@@ -1,10 +1,6 @@
 import { Node, parseTree } from "jsonc-parser";
 
-const calculateSize = (
-  text: string | [string, string][],
-  isParent = false,
-  isFolded: boolean
-) => {
+const calculateSize = (text: string | [string, string][], isParent = false, isFolded: boolean) => {
   let value = "";
 
   if (typeof text === "string") value = text;
@@ -98,11 +94,7 @@ export const parser = (jsonStr: string, isFolded = false) => {
 
       if (!children) {
         if (value !== undefined) {
-          if (
-            parentType === "property" &&
-            nextType !== "object" &&
-            nextType !== "array"
-          ) {
+          if (parentType === "property" && nextType !== "object" && nextType !== "array") {
             brothersParentId = myParentId;
             if (nextType === undefined) {
               // add key and value to brothers node
@@ -134,16 +126,14 @@ export const parser = (jsonStr: string, isFolded = false) => {
             let findBrothersNode = brothersNodeProps.find(
               e =>
                 e.parentId === brothersParentId &&
-                e.objectsFromArrayId ===
-                  objectsFromArray[objectsFromArray.length - 1]
+                e.objectsFromArrayId === objectsFromArray[objectsFromArray.length - 1]
             );
             if (findBrothersNode) {
               let ModifyNodes = [...nodes];
               let findNode = nodes.findIndex(e => e.id === findBrothersNode?.id);
 
               if (ModifyNodes[findNode]) {
-                ModifyNodes[findNode].text =
-                  ModifyNodes[findNode].text.concat(brothersNode);
+                ModifyNodes[findNode].text = ModifyNodes[findNode].text.concat(brothersNode);
                 const { width, height } = calculateSize(
                   ModifyNodes[findNode].text,
                   false,
@@ -232,16 +222,14 @@ export const parser = (jsonStr: string, isFolded = false) => {
             let findBrothersNode = brothersNodeProps.find(
               e =>
                 e.parentId === brothersParentId &&
-                e.objectsFromArrayId ===
-                  objectsFromArray[objectsFromArray.length - 1]
+                e.objectsFromArrayId === objectsFromArray[objectsFromArray.length - 1]
             );
             if (findBrothersNode) {
               let ModifyNodes = [...nodes];
               let findNode = nodes.findIndex(e => e.id === findBrothersNode?.id);
 
               if (ModifyNodes[findNode]) {
-                ModifyNodes[findNode].text =
-                  ModifyNodes[findNode].text.concat(brothersNode);
+                ModifyNodes[findNode].text = ModifyNodes[findNode].text.concat(brothersNode);
                 const { width, height } = calculateSize(
                   ModifyNodes[findNode].text,
                   false,

src/utils/search.ts

@@ -11,10 +11,7 @@ export const cleanupHighlight = () => {
   });
 };
 
-export const highlightMatchedNodes = (
-  nodes: NodeListOf<Element>,
-  selectedNode: number
-) => {
+export const highlightMatchedNodes = (nodes: NodeListOf<Element>, selectedNode: number) => {
   nodes?.forEach(node => {
     node.parentElement?.closest("foreignObject")?.classList.add("searched");
   });