feat: update diagram layout

.env

@@ -1,2 +1,2 @@
-NEXT_PUBLIC_NODE_LIMIT=600
+NEXT_PUBLIC_NODE_LIMIT=800
 NEXT_TELEMETRY_DISABLED=1

.env.development

@@ -1 +1 @@
-NEXT_PUBLIC_NODE_LIMIT=1000
+NEXT_PUBLIC_DISABLE_EXTERNAL_MODE=false

README.md

@@ -127,6 +127,10 @@ docker compose up
 # Go to http://localhost:8888
 ```
 
+## Configuration
+
+The supported node limit can be changed by editing the `NEXT_PUBLIC_NODE_LIMIT` value in the `.env` file at the project root.
+
 <!-- LICENSE -->
 
 ## License

src/data/example.json

@@ -0,0 +1,43 @@
+{
+  "fruits": [
+    {
+      "name": "Apple",
+      "color": "#FF0000",
+      "details": {
+        "type": "Pome",
+        "season": "Fall"
+      },
+      "nutrients": {
+        "calories": 52,
+        "fiber": "2.4g",
+        "vitaminC": "4.6mg"
+      }
+    },
+    {
+      "name": "Banana",
+      "color": "#FFFF00",
+      "details": {
+        "type": "Berry",
+        "season": "Year-round"
+      },
+      "nutrients": {
+        "calories": 89,
+        "fiber": "2.6g",
+        "potassium": "358mg"
+      }
+    },
+    {
+      "name": "Orange",
+      "color": "#FFA500",
+      "details": {
+        "type": "Citrus",
+        "season": "Winter"
+      },
+      "nutrients": {
+        "calories": 47,
+        "fiber": "2.4g",
+        "vitaminC": "53.2mg"
+      }
+    }
+  ]
+}

src/features/editor/BottomBar.tsx

@@ -1,17 +1,13 @@
 import React from "react";
-import Link from "next/link";
-import { Flex, Popover, Text } from "@mantine/core";
+import { Flex, Menu, Popover, Text } from "@mantine/core";
 import styled from "styled-components";
 import { event as gaEvent } from "nextjs-google-analytics";
 import { BiSolidDockLeft } from "react-icons/bi";
-import {
-  VscCheck,
-  VscError,
-  VscFeedback,
-  VscRunAll,
-  VscSync,
-  VscSyncIgnored,
-} from "react-icons/vsc";
+import { FaCrown } from "react-icons/fa6";
+import { IoMdCheckmark } from "react-icons/io";
+import { MdArrowUpward } from "react-icons/md";
+import { VscCheck, VscError, VscRunAll, VscSync, VscSyncIgnored } from "react-icons/vsc";
+import { formats } from "../../enums/file.enum";
 import useConfig from "../../store/useConfig";
 import useFile from "../../store/useFile";
 import useGraph from "./views/GraphView/stores/useGraph";
@@ -85,9 +81,10 @@ export const BottomBar = () => {
   const liveTransformEnabled = useConfig(state => state.liveTransformEnabled);
   const error = useFile(state => state.error);
   const setContents = useFile(state => state.setContents);
-  const nodeCount = useGraph(state => state.nodes.length);
   const toggleFullscreen = useGraph(state => state.toggleFullscreen);
   const fullscreen = useGraph(state => state.fullscreen);
+  const setFormat = useFile(state => state.setFormat);
+  const currentFormat = useFile(state => state.format);
 
   const toggleEditor = () => {
     toggleFullscreen(!fullscreen);
@@ -144,17 +141,40 @@ export const BottomBar = () => {
       </StyledLeft>
 
       <StyledRight>
-        <StyledBottomBarItem>Nodes: {nodeCount}</StyledBottomBarItem>
-        <Link
-          href="https://github.com/AykutSarac/jsoncrack.com/discussions"
-          target="_blank"
-          rel="noopener"
-        >
-          <StyledBottomBarItem>
-            <VscFeedback />
-            Feedback
-          </StyledBottomBarItem>
-        </Link>
+        <Menu offset={8}>
+          <Menu.Target>
+            <StyledBottomBarItem>
+              <Flex align="center" gap={2}>
+                <MdArrowUpward />
+                <Text size="xs">{currentFormat?.toUpperCase()}</Text>
+              </Flex>
+            </StyledBottomBarItem>
+          </Menu.Target>
+          <Menu.Dropdown>
+            {formats.map(format => (
+              <Menu.Item
+                key={format.value}
+                fz={12}
+                onClick={() => setFormat(format.value)}
+                rightSection={currentFormat === format.value && <IoMdCheckmark />}
+              >
+                {format.label}
+              </Menu.Item>
+            ))}
+            <Menu.Item
+              fz={12}
+              onClick={() =>
+                window.open(
+                  "https://todiagram.com/blog/how-to-create-custom-diagrams-in-todiagram?utm_source=jsoncrack&utm_medium=bottom-bar&utm_campaign=custom-diagram",
+                  "_blank"
+                )
+              }
+              rightSection={<FaCrown color="gray" />}
+            >
+              Custom
+            </Menu.Item>
+          </Menu.Dropdown>
+        </Menu>
       </StyledRight>
     </StyledBottomBar>
   );

src/features/editor/ExternalMode.tsx

@@ -1,97 +1,154 @@
 import React from "react";
-import { Anchor, Button, Group, Modal, Text } from "@mantine/core";
-import styled from "styled-components";
-import { VscCode } from "react-icons/vsc";
-import { VscArrowRight } from "react-icons/vsc";
-
-const StyledAlert = styled.div`
-  position: fixed;
-  bottom: 36px;
-  right: 10px;
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 16px;
-  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(5px);
-  -webkit-backdrop-filter: blur(5px);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  font-weight: 500;
-  overflow: hidden;
-`;
-
-const StyledTitle = styled.div`
-  display: flex;
-  align-items: center;
-  color: ${({ theme }) => theme.TEXT_POSITIVE};
-  flex: 1;
-  font-weight: 700;
-
-  &::after {
-    background: ${({ theme }) => theme.TEXT_POSITIVE};
-    height: 1px;
-
-    content: "";
-    -webkit-box-flex: 1;
-    -ms-flex: 1 1 auto;
-    flex: 1 1 auto;
-    margin-left: 4px;
-    opacity: 0.6;
-  }
-`;
+import { Accordion, Anchor, Code, Flex, FocusTrap, Group, Modal, Text } from "@mantine/core";
 
 const ExternalMode = () => {
   const [isExternal, setExternal] = React.useState(false);
-  const [isOpen, setOpen] = React.useState(false);
 
   React.useEffect(() => {
-    if (typeof window !== "undefined") {
-      if (window.location.pathname.includes("widget")) return setExternal(false);
-      if (window.location.host !== "jsoncrack.com") return setExternal(true);
-      return setExternal(false);
+    if (process.env.NEXT_PUBLIC_DISABLE_EXTERNAL_MODE === "false") {
+      if (typeof window !== "undefined") {
+        if (window.location.pathname.includes("widget")) return setExternal(false);
+        if (window.location.host !== "jsoncrack.com") return setExternal(true);
+        return setExternal(false);
+      }
     }
   }, []);
 
-  const closeModal = () => setOpen(false);
-
   if (!isExternal) return null;
 
   return (
-    <StyledAlert>
-      <Button
-        onClick={() => setOpen(true)}
-        color="red"
-        variant="subtle"
-        leftSection={<VscCode size="1.2rem" />}
-      >
-        External Host
-      </Button>
-      <Modal title="External Host of JSON Crack" opened={isOpen} onClose={closeModal} centered>
-        <Group>
-          <StyledTitle>Dear valued user,</StyledTitle>
-          <Text>
-            We would like to inform you that you are presently utilizing the external release of the{" "}
-            <Anchor href="https://jsoncrack.com">JSON Crack</Anchor>. Your continued support is
-            crucial in sustaining and improving our services.
-            <br />
-            <br />
-            We kindly encourage you to consider upgrading to the premium version, which not only
-            enhances your experience but also contributes to the ongoing development of JSON Crack.
-          </Text>
-        </Group>
-        <Group pt="lg" justify="right">
-          <Button
-            onClick={closeModal}
-            component="a"
-            href="https://jsoncrack.com"
-            target="_blank"
-            variant="outline"
-            color="red"
-            rightSection={<VscArrowRight />}
-          >
-            JSON Crack
-          </Button>
-        </Group>
-      </Modal>
-    </StyledAlert>
+    <Modal
+      title="Thanks for using JSON Crack"
+      opened={isExternal}
+      onClose={() => setExternal(false)}
+      centered
+      size="lg"
+    >
+      <FocusTrap.InitialFocus />
+      <Group>
+        <Accordion variant="separated" w="100%">
+          <Accordion.Item value="1">
+            <Accordion.Control>How can I change the file size limit?</Accordion.Control>
+            <Accordion.Panel>
+              The main reason for the file size limit is to prevent performance issues, not to push
+              you to upgrade. You can increase the limit by setting{" "}
+              <Code>NEXT_PUBLIC_NODE_LIMIT</Code> in your <Code>.env</Code> file.
+              <br />
+              <br />
+              If you&apos;d like to work with even larger files and unlock additional features, you
+              can upgrade to the{" "}
+              <Anchor
+                href="https://todiagram.com?utm_source=jsoncrack&utm_medium=external-mode"
+                rel="noopener"
+                target="_blank"
+              >
+                Pro
+              </Anchor>{" "}
+              version.
+            </Accordion.Panel>
+          </Accordion.Item>
+          <Accordion.Item value="2">
+            <Accordion.Control>How can I stop this dialog from appearing?</Accordion.Control>
+            <Accordion.Panel>
+              You can disable this dialog by setting <Code>NEXT_PUBLIC_DISABLE_EXTERNAL_MODE</Code>{" "}
+              to <Code>true</Code> in your <Code>.env.development</Code> file.
+              <br />
+              <br />
+              If you want to re-enable it, simply remove or set the value to <Code>false</Code>.
+            </Accordion.Panel>
+          </Accordion.Item>
+          <Accordion.Item value="3">
+            <Accordion.Control>What are the license terms?</Accordion.Control>
+            <Accordion.Panel>
+              Read the full license terms on{" "}
+              <Anchor
+                href="https://github.com/AykutSarac/jsoncrack.com/blob/main/LICENSE.md"
+                rel="noopener"
+                target="_blank"
+              >
+                GitHub
+              </Anchor>
+              .
+            </Accordion.Panel>
+          </Accordion.Item>
+          <Accordion.Item value="4">
+            <Accordion.Control>How do I report a bug or request a feature?</Accordion.Control>
+            <Accordion.Panel>
+              You can report bugs or request features by opening an issue on our{" "}
+              <Anchor
+                href="https://github.com/AykutSarac/jsoncrack.com/issues"
+                rel="noopener"
+                target="_blank"
+              >
+                GitHub Issues page
+              </Anchor>
+              .
+              <br />
+              <br />
+              Please provide as much detail as possible to help us address your feedback quickly.
+            </Accordion.Panel>
+          </Accordion.Item>
+          <Accordion.Item value="5">
+            <Accordion.Control>How do I contribute to the project?</Accordion.Control>
+            <Accordion.Panel>
+              We welcome contributions! Visit our{" "}
+              <Anchor
+                href="https://github.com/AykutSarac/jsoncrack.com"
+                rel="noopener"
+                target="_blank"
+              >
+                GitHub repository
+              </Anchor>{" "}
+              and read the{" "}
+              <Anchor
+                href="https://github.com/AykutSarac/jsoncrack.com/blob/main/CONTRIBUTING.md"
+                rel="noopener"
+                target="_blank"
+              >
+                contributing guide
+              </Anchor>{" "}
+              to get started.
+            </Accordion.Panel>
+          </Accordion.Item>
+          <Accordion.Item value="6">
+            <Accordion.Control>
+              What is the difference between JSON Crack and ToDiagram?
+            </Accordion.Control>
+            <Accordion.Panel>
+              JSON Crack is a free and open-source tool for visualizing JSON data. ToDiagram is the
+              professional version that offers advanced features, higher limits, and the ability to
+              edit data directly from diagrams. You can learn more or upgrade at{" "}
+              <Anchor
+                href="https://todiagram.com?utm_source=jsoncrack&utm_medium=external-mode"
+                rel="noopener"
+                target="_blank"
+              >
+                todiagram.com
+              </Anchor>
+              .
+            </Accordion.Panel>
+          </Accordion.Item>
+        </Accordion>
+      </Group>
+      <Flex justify="center" align="center" gap="sm" mt="md">
+        <Anchor
+          href="https://github.com/AykutSarac/jsoncrack.com"
+          rel="noopener"
+          target="_blank"
+          fz="sm"
+        >
+          GitHub
+        </Anchor>
+        <Text c="dimmed">•</Text>
+        <Anchor href="https://todiagram.com" rel="noopener" target="_blank" fz="sm">
+          ToDiagram
+        </Anchor>
+        <Text c="dimmed">•</Text>
+        <Anchor href="https://x.com/aykutsarach" rel="noopener" target="_blank" fz="sm">
+          Aykut Saraç (@aykutsarach)
+        </Anchor>
+      </Flex>
+    </Modal>
   );
 };