prettier lint

2025-01-12 19:02:53 +08:00 · 2022-12-18 14:14:07 +03:00 · 2022-12-18 14:14:07 +03:00 · 7da91633a5
commit 7da91633a5
parent 6456e41671
34 changed files with 117 additions and 305 deletions
--- a/src/components/CustomNode/ObjectNode.tsx
+++ b/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);
--- a/src/components/CustomNode/TextNode.tsx
+++ b/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 && (
--- a/src/components/CustomNode/index.tsx
+++ b/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>
--- a/src/components/CustomNode/styles.tsx
+++ b/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;
--- a/src/components/Graph/ErrorView.tsx
+++ b/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>
 );
--- a/src/components/Graph/index.tsx
+++ b/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>
--- a/src/components/Loading/index.tsx
+++ b/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>
  );
 };
--- a/src/components/Modal/index.tsx
+++ b/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";
 }

--- a/src/components/Modal/styles.tsx
+++ b/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;
--- a/src/components/SearchInput/index.tsx
+++ b/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>
--- a/src/components/Sidebar/index.tsx
+++ b/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>
--- a/src/components/Sponsors/index.tsx
+++ b/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>
      ))}
--- a/src/components/SupportButton/index.tsx
+++ b/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>
--- a/src/components/Tooltip/index.tsx
+++ b/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>
--- a/src/containers/Editor/LiveEditor/GraphCanvas.tsx
+++ b/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}
--- a/src/containers/Editor/Tools.tsx
+++ b/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}>
--- a/src/containers/Home/index.tsx
+++ b/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>
--- a/src/containers/Home/styles.tsx
+++ b/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;
--- a/src/containers/Modals/AccountModal/index.tsx
+++ b/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>
--- a/src/containers/Modals/CloudModal/index.tsx
+++ b/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}>
--- a/src/containers/Modals/GoalsModal/index.tsx
+++ b/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,
--- a/src/containers/Modals/ImportModal/index.tsx
+++ b/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>
--- a/src/containers/Modals/NodeModal/index.tsx
+++ b/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!");
--- a/src/containers/Modals/SettingsModal/index.tsx
+++ b/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>
--- a/src/hooks/useFocusNode.tsx
+++ b/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);
--- a/src/pages/_document.tsx
+++ b/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"
--- a/src/pages/editor.tsx
+++ b/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 />
--- a/src/pages/embed.tsx
+++ b/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>
    </>
--- a/src/pages/widget.tsx
+++ b/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) {
--- a/src/services/db/json.tsx
+++ b/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}`, {
--- a/src/utils/getChildrenEdges.ts
+++ b/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)
  );
 };
--- a/src/utils/getOutgoers.ts
+++ b/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);
    });

--- a/src/utils/jsonParser.ts
+++ b/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,
--- a/src/utils/search.ts
+++ b/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");
  });