Merge pull request #318 from AykutSarac/feat/mantine-ui

Feat/mantine UI

package.json

@@ -1,7 +1,7 @@
 {
   "name": "json-crack",
   "private": true,
-  "version": "v2.6.0",
+  "version": "v2.8.0",
   "author": "https://github.com/AykutSarac",
   "homepage": "https://jsoncrack.com",
   "scripts": {
@@ -13,44 +13,49 @@
     "deploy": "gh-pages -d out -t true"
   },
   "dependencies": {
+    "@emotion/react": "^11.10.6",
+    "@emotion/server": "^11.10.0",
+    "@mantine/core": "^6.0.1",
+    "@mantine/hooks": "^6.0.1",
+    "@mantine/next": "^6.0.1",
+    "@mantine/prism": "^6.0.1",
     "@monaco-editor/react": "^4.4.6",
-    "@next/font": "^13.1.6",
-    "@sentry/nextjs": "^7.36.0",
-    "@tanstack/react-query": "^4.24.4",
-    "allotment": "^1.18.0",
+    "@sentry/nextjs": "^7.42.0",
+    "@tanstack/react-query": "^4.26.1",
+    "allotment": "^1.18.1",
     "altogic": "^2.3.9",
-    "axios": "^1.3.2",
+    "axios": "^1.3.4",
     "dayjs": "^1.11.7",
     "html-to-image": "^1.11.11",
     "jsonc-parser": "^3.2.0",
     "lodash.debounce": "^4.0.8",
-    "lz-string": "^1.4.4",
-    "next": "^13.1.6",
+    "lz-string": "^1.5.0",
+    "next": "^13.2.3",
     "react": "^18.2.0",
     "react-color": "^2.19.3",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.0",
-    "react-icons": "^4.7.1",
+    "react-icons": "^4.8.0",
     "react-linkify-it": "^1.0.7",
     "react-syntax-highlighter": "^15.5.0",
-    "react-zoom-pan-pinch": "^2.5.0",
+    "react-zoom-pan-pinch": "^3.0.2",
     "reaflow": "^5.1.2",
-    "styled-components": "^5.3.6",
-    "zustand": "^4.3.2"
+    "styled-components": "^5.3.8",
+    "zustand": "^4.3.6"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "^13.1.6",
-    "@testing-library/react": "^13.3.0",
-    "@trivago/prettier-plugin-sort-imports": "^4.0.0",
+    "@next/bundle-analyzer": "^13.2.3",
+    "@testing-library/react": "^14.0.0",
+    "@trivago/prettier-plugin-sort-imports": "^4.1.1",
     "@types/lodash.debounce": "^4.0.7",
     "@types/lz-string": "^1.3.34",
-    "@types/node": "^18.13.0",
-    "@types/react": "18.0.27",
+    "@types/node": "^18.15.0",
+    "@types/react": "18.0.28",
     "@types/react-color": "^3.0.6",
     "@types/react-syntax-highlighter": "^15.5.6",
     "@types/styled-components": "^5.1.26",
-    "eslint": "8.33.0",
-    "eslint-config-next": "13.1.6",
+    "eslint": "8.35.0",
+    "eslint-config-next": "13.2.3",
     "eslint-plugin-unused-imports": "^2.0.0",
     "prettier": "^2.8.4",
     "ts-node": "^10.9.1",

src/components/CustomNode/ObjectNode.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { CustomNodeProps } from "src/components/CustomNode";
 import * as Styled from "./styles";
 
-const ObjectNode: React.FC<CustomNodeProps> = ({ node, x, y }) => {
+const Node: React.FC<CustomNodeProps> = ({ node, x, y }) => {
   const { text, width, height, data } = node;
   const ref = React.useRef(null);
 
@@ -34,4 +34,4 @@ function propsAreEqual(prev: CustomNodeProps, next: CustomNodeProps) {
   return String(prev.node.text) === String(next.node.text) && prev.node.width === next.node.width;
 }
 
-export default React.memo(ObjectNode, propsAreEqual);
+export const ObjectNode = React.memo(Node, propsAreEqual);

src/components/CustomNode/TextNode.tsx

@@ -40,7 +40,7 @@ const StyledImage = styled.img`
   background: ${({ theme }) => theme.BACKGROUND_MODIFIER_ACCENT};
 `;
 
-const TextNode: React.FC<CustomNodeProps> = ({ node, x, y, hasCollapse = false }) => {
+const Node: React.FC<CustomNodeProps> = ({ node, x, y, hasCollapse = false }) => {
   const {
     id,
     text,
@@ -110,4 +110,4 @@ function propsAreEqual(prev: CustomNodeProps, next: CustomNodeProps) {
   return prev.node.text === next.node.text && prev.node.width === next.node.width;
 }
 
-export default React.memo(TextNode, propsAreEqual);
+export const TextNode = React.memo(Node, propsAreEqual);

src/components/CustomNode/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Node, NodeProps } from "reaflow";
-import ObjectNode from "./ObjectNode";
-import TextNode from "./TextNode";
+import { ObjectNode } from "./ObjectNode";
+import { TextNode } from "./TextNode";
 
 export interface CustomNodeProps {
   node: NodeData;

src/components/CustomNode/styles.tsx

@@ -1,4 +1,4 @@
-import { Roboto_Mono } from "@next/font/google";
+import { Roboto_Mono } from "next/font/google";
 import { LinkItUrl } from "react-linkify-it";
 import styled, { DefaultTheme } from "styled-components";
 

src/components/Graph/PremiumView.tsx

@@ -1,6 +1,6 @@
 import React from "react";
+import { Button } from "@mantine/core";
 import styled from "styled-components";
-import { Button } from "../Button";
 
 const StyledPremiumView = styled.div`
   display: flex;
@@ -38,7 +38,15 @@ export const PremiumView = () => (
     <StyledInfo>
       Upgrade JSON Crack to premium and explore & unlock full potantial of your data!
     </StyledInfo>
-    <Button status="TERTIARY" href="https://www.patreon.com/jsoncrack" link target="_blank">
+    <Button
+      size="lg"
+      component="a"
+      variant="gradient"
+      gradient={{ from: "purple", to: "pink" }}
+      href="https://www.patreon.com/jsoncrack"
+      target="_blank"
+      style={{ border: "2px solid black" }}
+    >
       DO IT!
     </Button>
     <img src="/assets/undraw_to_the_stars_re_wq2x.svg" width="300" height="300" alt="oops" />