Merge pull request #280 from AykutSarac/mona-sans

Cloud updates

Author: AykutSarac

.env.development

@@ -1 +1,3 @@
-NEXT_PUBLIC_BASE_URL=http://localhost:3000
+NEXT_PUBLIC_BASE_URL=http://localhost:3000
+NEXT_PUBLIC_ALTOGIC_ENV_URL=https://jsoncrack.c5-na.altogic.com
+NEXT_PUBLIC_ALTOGIC_CLIENT_KEY=f1e92022789f4ccf91273a345ab2bdf8

.env.production

@@ -1 +1,3 @@
-NEXT_PUBLIC_BASE_URL=https://jsoncrack.com
+NEXT_PUBLIC_BASE_URL=https://jsoncrack.com
+NEXT_PUBLIC_ALTOGIC_ENV_URL=https://jsoncrack.c5-na.altogic.com
+NEXT_PUBLIC_ALTOGIC_CLIENT_KEY=f1e92022789f4ccf91273a345ab2bdf8

.prettierrc

@@ -2,7 +2,7 @@
   "trailingComma": "es5",
   "singleQuote": false,
   "semi": true,
-  "printWidth": 85,
+  "printWidth": 100,
   "arrowParens": "avoid",
   "importOrder": [
     "^(react/(.*)$)|^(react$)",

next.config.js

@@ -9,7 +9,7 @@ const withPWA = require("next-pwa")({
  * @type {import('next').NextConfig}
  */
 const nextConfig = {
-  reactStrictMode: true,
+  reactStrictMode: false,
 };
 
 module.exports = withPWA(nextConfig);

package.json

@@ -1,7 +1,7 @@
 {
   "name": "json-crack",
   "private": true,
-  "version": "v2.2.0",
+  "version": "v2.5.0",
   "author": "https://github.com/AykutSarac",
   "homepage": "https://jsoncrack.com",
   "scripts": {
@@ -14,11 +14,17 @@
   },
   "dependencies": {
     "@monaco-editor/react": "^4.4.6",
+    "@react-oauth/google": "^0.4.0",
     "@sentry/nextjs": "^7.16.0",
+    "@tanstack/react-query": "^4.19.1",
     "allotment": "^1.17.0",
-    "compress-json": "^2.1.2",
+    "altogic": "^2.3.8",
+    "axios": "^1.1.3",
+    "dayjs": "^1.11.6",
     "html-to-image": "^1.10.8",
     "jsonc-parser": "^3.2.0",
+    "lodash.debounce": "^4.0.8",
+    "lz-string": "^1.4.4",
     "next": "^12.3.1",
     "next-transpile-modules": "^9.1.0",
     "react": "^18.2.0",
@@ -28,6 +34,7 @@
     "react-icons": "^4.6.0",
     "react-in-viewport": "^1.0.0-alpha.28",
     "react-linkify-it": "^1.0.7",
+    "react-syntax-highlighter": "^15.5.0",
     "react-zoom-pan-pinch": "^2.1.3",
     "reaflow": "^5.0.7",
     "styled-components": "^5.3.6",
@@ -36,9 +43,12 @@
   "devDependencies": {
     "@testing-library/react": "^13.3.0",
     "@trivago/prettier-plugin-sort-imports": "^3.3.0",
+    "@types/lodash.debounce": "^4.0.7",
+    "@types/lz-string": "^1.3.34",
     "@types/node": "^18.7.21",
     "@types/react": "18.0.21",
     "@types/react-color": "^3.0.6",
+    "@types/react-syntax-highlighter": "^15.5.5",
     "@types/styled-components": "^5.1.26",
     "eslint": "8.24.0",
     "eslint-config-next": "12.3.1",

public/assets/404.svg

@@ -0,0 +1,13 @@
+import { APIError, createClient } from "altogic";
+
+let envUrl = process.env.NEXT_PUBLIC_ALTOGIC_ENV_URL as string;
+let clientKey = process.env.NEXT_PUBLIC_ALTOGIC_CLIENT_KEY as string;
+
+const altogic = createClient(envUrl, clientKey);
+
+export interface AltogicResponse<T> {
+  data: T;
+  errors: APIError | null;
+}
+
+export { altogic };

public/assets/Mona-Sans.woff2

@@ -4,6 +4,7 @@ import styled, { DefaultTheme } from "styled-components";
 enum ButtonType {
   PRIMARY = "PRIMARY",
   SECONDARY = "BLURPLE",
+  TERTIARY = "PURPLE",
   DANGER = "DANGER",
   SUCCESS = "SEAGREEN",
   WARNING = "ORANGE",
@@ -16,7 +17,7 @@ interface ButtonProps {
 
 type ConditionalProps =
   | ({
-      link?: boolean;
+      link: boolean;
     } & React.ComponentPropsWithoutRef<"a">)
   | ({
       link?: never;
@@ -29,19 +30,20 @@ function getButtonStatus(status: keyof typeof ButtonType, theme: DefaultTheme) {
 const StyledButton = styled.button<{
   status: keyof typeof ButtonType;
   block: boolean;
+  link: boolean;
 }>`
-  display: flex;
+  display: inline-flex;
   align-items: center;
   background: ${({ status, theme }) => getButtonStatus(status, theme)};
   color: #ffffff;
-  padding: 8px 16px;
-  min-width: 60px;
+  padding: ${({ link }) => (link ? "2px 16px" : "8px 16px")};
+  min-width: 70px;
   min-height: 32px;
   border-radius: 3px;
+  font-family: "Mona Sans";
   font-size: 14px;
   font-weight: 500;
-  font-family: "Catamaran", sans-serif;
-  width: ${({ block }) => (block ? "100%" : "fit-content")};
+  width: ${({ block }) => (block ? "-webkit-fill-available" : "fit-content")};
   height: 40px;
   background-image: none;
 
@@ -73,6 +75,7 @@ const StyledButtonContent = styled.div`
   gap: 8px;
   white-space: nowrap;
   text-overflow: ellipsis;
+  font-weight: 600;
 `;
 
 export const Button: React.FC<ButtonProps & ConditionalProps> = ({
@@ -84,10 +87,11 @@ export const Button: React.FC<ButtonProps & ConditionalProps> = ({
 }) => {
   return (
     <StyledButton
-      as={link ? "a" : "button"}
       type="button"
+      as={link ? "a" : "button"}
       status={status ?? "PRIMARY"}
       block={block}
+      link={link}
       {...props}
     >
       <StyledButtonContent>{children}</StyledButtonContent>

public/assets/icon.png

@@ -1,36 +1,24 @@
 import React from "react";
 // import { useInViewport } from "react-in-viewport";
 import { CustomNodeProps } from "src/components/CustomNode";
-import useConfig from "src/store/useConfig";
+import useGraph from "src/store/useGraph";
 import * as Styled from "./styles";
 
 const inViewport = true;
 
 const ObjectNode: React.FC<CustomNodeProps> = ({ node, x, y }) => {
   const { text, width, height, data } = node;
   const ref = React.useRef(null);
-  const performanceMode = useConfig(state => state.performanceMode);
+  const performanceMode = useGraph(state => state.performanceMode);
   // const { inViewport } = useInViewport(ref);
 
   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/api/altogic.ts

@@ -2,7 +2,6 @@ import React from "react";
 import { MdLink, MdLinkOff } from "react-icons/md";
 // import { useInViewport } from "react-in-viewport";
 import { CustomNodeProps } from "src/components/CustomNode";
-import useConfig from "src/store/useConfig";
 import useGraph from "src/store/useGraph";
 import useStored from "src/store/useStored";
 import styled from "styled-components";
@@ -28,27 +27,34 @@ 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 StyledImageWrapper = styled.div`
+  padding: 5px;
+`;
+
+const StyledImage = styled.img`
+  border-radius: 2px;
+  object-fit: contain;
+  background: ${({ theme }) => theme.BACKGROUND_MODIFIER_ACCENT};
+`;
+
+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);
-  const hideChildrenCount = useStored(state => state.hideChildrenCount);
+  const childrenCount = useStored(state => state.childrenCount);
+  const imagePreview = useStored(state => state.imagePreview);
   const expandNodes = useGraph(state => state.expandNodes);
   const collapseNodes = useGraph(state => state.collapseNodes);
   const isExpanded = useGraph(state => state.collapsedParents.includes(id));
-  const performanceMode = useConfig(state => state.performanceMode);
+  const performanceMode = useGraph(state => state.performanceMode);
+  const isImage =
+    !Array.isArray(text) && /(https?:\/\/.*\.(?:png|jpg|gif))/i.test(text) && imagePreview;
   // const { inViewport } = useInViewport(ref);
 
   const handleExpand = (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -64,36 +70,38 @@ const TextNode: React.FC<CustomNodeProps> = ({
       height={height}
       x={0}
       y={0}
-      hideCollapse={hideCollapse}
       hasCollapse={data.parent && hasCollapse}
       ref={ref}
     >
-      <StyledTextNodeWrapper hasCollapse={data.parent && !hideCollapse}>
-        {(!performanceMode || inViewport) && (
-          <Styled.StyledKey
-            data-x={x}
-            data-y={y}
-            data-key={JSON.stringify(text)}
-            parent={data.parent}
-          >
-            <Styled.StyledLinkItUrl>
-              {JSON.stringify(text).replaceAll('"', "")}
-            </Styled.StyledLinkItUrl>
-          </Styled.StyledKey>
-        )}
-
-        {data.parent && data.childrenCount > 0 && !hideChildrenCount && (
-          <Styled.StyledChildrenCount>
-            ({data.childrenCount})
-          </Styled.StyledChildrenCount>
-        )}
+      {isImage ? (
+        <StyledImageWrapper>
+          <StyledImage src={text} width="70" height="70" />
+        </StyledImageWrapper>
+      ) : (
+        <StyledTextNodeWrapper hasCollapse={data.parent && hideCollapse}>
+          {(!performanceMode || inViewport) && (
+            <Styled.StyledKey
+              data-x={x}
+              data-y={y}
+              data-key={JSON.stringify(text)}
+              parent={data.parent}
+            >
+              <Styled.StyledLinkItUrl>
+                {JSON.stringify(text).replaceAll('"', "")}
+              </Styled.StyledLinkItUrl>
+            </Styled.StyledKey>
+          )}
+          {data.parent && data.childrenCount > 0 && childrenCount && (
+            <Styled.StyledChildrenCount>({data.childrenCount})</Styled.StyledChildrenCount>
+          )}
 
-        {inViewport && data.parent && hasCollapse && !hideCollapse && (
-          <StyledExpand onClick={handleExpand}>
-            {isExpanded ? <MdLinkOff size={18} /> : <MdLink size={18} />}
-          </StyledExpand>
-        )}
-      </StyledTextNodeWrapper>
+          {inViewport && data.parent && hasCollapse && hideCollapse && (
+            <StyledExpand onClick={handleExpand}>
+              {isExpanded ? <MdLinkOff size={18} /> : <MdLink size={18} />}
+            </StyledExpand>
+          )}
+        </StyledTextNodeWrapper>
+      )}
     </Styled.StyledForeignObject>
   );
 };

src/components/Button/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/ObjectNode.tsx

@@ -16,7 +16,6 @@ export const StyledLinkItUrl = styled(LinkItUrl)`
 
 export const StyledForeignObject = styled.foreignObject<{
   hasCollapse?: boolean;
-  hideCollapse?: boolean;
   isObject?: boolean;
 }>`
   text-align: ${({ isObject }) => !isObject && "center"};
@@ -53,11 +52,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 +69,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/CustomNode/TextNode.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { MdReportGmailerrorred, MdOutlineCheckCircleOutline } from "react-icons/md";
+import useJson from "src/store/useJson";
 import styled from "styled-components";
 
 const StyledErrorWrapper = styled.div`
@@ -40,7 +41,9 @@ const StyledError = styled.pre`
   white-space: pre-line;
 `;
 
-export const ErrorContainer = ({ hasError }: { hasError: boolean }) => {
+export const ErrorContainer = () => {
+  const hasError = useJson(state => state.hasError);
+
   return (
     <StyledErrorWrapper>
       <StyledErrorExpand error={hasError}>