From e9769a5192a28d5219eea141e3f8a51a809c31d5 Mon Sep 17 00:00:00 2001
From: AykutSarac <aykutsarac0@gmail.com>
Date: Sat, 13 May 2023 13:39:21 +0300
Subject: [PATCH] feat: display colors in colorswatch

---
 src/components/CustomNode/ObjectNode.tsx   |  3 +-
 src/components/CustomNode/TextNode.tsx     |  5 ++-
 src/components/CustomNode/TextRenderer.tsx | 41 ++++++++++++++++++++++
 src/store/useFile.ts                       |  5 ++-
 src/utils/core/calculateNodeSize.ts        |  4 +--
 5 files changed, 49 insertions(+), 9 deletions(-)
 create mode 100644 src/components/CustomNode/TextRenderer.tsx

diff --git a/src/components/CustomNode/ObjectNode.tsx b/src/components/CustomNode/ObjectNode.tsx
index 9155792..1d5f444 100644
--- a/src/components/CustomNode/ObjectNode.tsx
+++ b/src/components/CustomNode/ObjectNode.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { CustomNodeProps } from "src/components/CustomNode";
+import { TextRenderer } from "./TextRenderer";
 import * as Styled from "./styles";
 
 const Node: React.FC<CustomNodeProps> = ({ node, x, y }) => {
@@ -20,7 +21,7 @@ const Node: React.FC<CustomNodeProps> = ({ node, x, y }) => {
             <Styled.StyledKey objectKey>
               {JSON.stringify(val[0]).replaceAll('"', "")}:{" "}
             </Styled.StyledKey>
-            <Styled.StyledLinkItUrl>{JSON.stringify(val[1])}</Styled.StyledLinkItUrl>
+            <TextRenderer>{JSON.stringify(val[1])}</TextRenderer>
           </Styled.StyledRow>
         );
       })}
diff --git a/src/components/CustomNode/TextNode.tsx b/src/components/CustomNode/TextNode.tsx
index 4b60524..2ae4a5c 100644
--- a/src/components/CustomNode/TextNode.tsx
+++ b/src/components/CustomNode/TextNode.tsx
@@ -5,6 +5,7 @@ import { CustomNodeProps } from "src/components/CustomNode";
 import useGraph from "src/store/useGraph";
 import useStored from "src/store/useStored";
 import { isContentImage } from "src/utils/core/calculateNodeSize";
+import { TextRenderer } from "./TextRenderer";
 import * as Styled from "./styles";
 
 const StyledExpand = styled.button`
@@ -84,9 +85,7 @@ const Node: React.FC<CustomNodeProps> = ({ node, x, y, hasCollapse = false }) =>
           data-key={JSON.stringify(text)}
         >
           <Styled.StyledKey parent={isParent} type={type}>
-            <Styled.StyledLinkItUrl>
-              {JSON.stringify(text).replaceAll('"', "")}
-            </Styled.StyledLinkItUrl>
+            <TextRenderer>{JSON.stringify(text).replaceAll('"', "")}</TextRenderer>
           </Styled.StyledKey>
           {isParent && childrenCount > 0 && showChildrenCount && (
             <Styled.StyledChildrenCount>({childrenCount})</Styled.StyledChildrenCount>
diff --git a/src/components/CustomNode/TextRenderer.tsx b/src/components/CustomNode/TextRenderer.tsx
new file mode 100644
index 0000000..340804d
--- /dev/null
+++ b/src/components/CustomNode/TextRenderer.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+import styled from "styled-components";
+import { ColorSwatch } from "@mantine/core";
+import * as Styled from "./styles";
+
+const StyledRow = styled.span`
+  display: inline-flex;
+  align-items: center;
+  overflow: hidden;
+  gap: 4px;
+  vertical-align: middle;
+`;
+
+function isColorFormat(colorString: string) {
+  const hexCodeRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+  const rgbRegex = /^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/;
+  const rgbaRegex = /^rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(0|1|0\.\d+)\s*\)$/;
+
+  return (
+    hexCodeRegex.test(colorString) || rgbRegex.test(colorString) || rgbaRegex.test(colorString)
+  );
+}
+
+const isURL =
+  /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/gi;
+
+export const TextRenderer: React.FC<{ children: string }> = ({ children }) => {
+  if (isURL.test(children.replaceAll('"', ""))) {
+    return <Styled.StyledLinkItUrl>{children}</Styled.StyledLinkItUrl>;
+  }
+
+  if (isColorFormat(children.replaceAll('"', ""))) {
+    return (
+      <StyledRow>
+        <ColorSwatch radius={4} h={12} w={12} color={children.replaceAll('"', "")} />
+        {children.replaceAll('"', "")}
+      </StyledRow>
+    );
+  }
+  return <>{children}</>;
+};
diff --git a/src/store/useFile.ts b/src/store/useFile.ts
index c611172..ebb2a3e 100644
--- a/src/store/useFile.ts
+++ b/src/store/useFile.ts
@@ -46,9 +46,8 @@ const initialStates = {
 
 export type FileStates = typeof initialStates;
 
-const isURL = new RegExp(
-  /^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/
-);
+const isURL =
+  /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/gi;
 
 const debouncedUpdateJson = debounce(
   (value: unknown) => useJson.getState().setJson(JSON.stringify(value, null, 2)),
diff --git a/src/utils/core/calculateNodeSize.ts b/src/utils/core/calculateNodeSize.ts
index c7f55fc..e67004c 100644
--- a/src/utils/core/calculateNodeSize.ts
+++ b/src/utils/core/calculateNodeSize.ts
@@ -10,9 +10,9 @@ const firaMono = Fira_Mono({
 export const isContentImage = (value: string | [string, string][]) => {
   if (typeof value !== "string") return false;
 
-  const isURL = /(https?:\/\/.*\.(?:png|jpg|gif))/i.test(value);
+  const isImageURL = /(https?:\/\/.*\.(?:png|jpg|gif))/i.test(value);
   const isBase64 = value.startsWith("data:image/") && value.includes("base64");
-  return isURL || isBase64;
+  return isImageURL || isBase64;
 };
 
 const sizeCache = new Map<string | [string, string][], { width: number; height: number }>();