Merge pull request #264 from AykutSarac/style-object-array

seperate colors from array and object

src/components/CustomNode/TextNode.tsx

@@ -65,16 +65,16 @@ const TextNode: React.FC<CustomNodeProps> = ({
       x={0}
       y={0}
       hideCollapse={hideCollapse}
-      hasCollapse={data.isParent && hasCollapse}
+      hasCollapse={data.parent && hasCollapse}
       ref={ref}
     >
-      <StyledTextNodeWrapper hasCollapse={data.isParent && !hideCollapse}>
+      <StyledTextNodeWrapper hasCollapse={data.parent && !hideCollapse}>
         {(!performanceMode || inViewport) && (
           <Styled.StyledKey
             data-x={x}
             data-y={y}
             data-key={JSON.stringify(text)}
-            parent={data.isParent}
+            parent={data.parent}
           >
             <Styled.StyledLinkItUrl>
               {JSON.stringify(text).replaceAll('"', "")}
@@ -82,13 +82,13 @@ const TextNode: React.FC<CustomNodeProps> = ({
           </Styled.StyledKey>
         )}
 
-        {data.isParent && data.childrenCount > 0 && !hideChildrenCount && (
+        {data.parent && data.childrenCount > 0 && !hideChildrenCount && (
           <Styled.StyledChildrenCount>
             ({data.childrenCount})
           </Styled.StyledChildrenCount>
         )}
 
-        {inViewport && data.isParent && hasCollapse && !hideCollapse && (
+        {inViewport && data.parent && hasCollapse && !hideCollapse && (
           <StyledExpand onClick={handleExpand}>
             {isExpanded ? <MdLinkOff size={18} /> : <MdLink size={18} />}
           </StyledExpand>

src/components/CustomNode/styles.tsx

@@ -2,9 +2,11 @@ import { LinkItUrl } from "react-linkify-it";
 import styled, { DefaultTheme } from "styled-components";
 
 function getTypeColor(value: string, theme: DefaultTheme) {
-  if (!Number.isNaN(+value)) return "#FD0079";
-  if (value === "true") return theme.TEXT_POSITIVE;
-  if (value === "false") return theme.TEXT_DANGER;
+  if (!Number.isNaN(+value)) return theme.NODE_COLORS.INTEGER;
+  if (value === "true") return theme.NODE_COLORS.BOOL.TRUE;
+  if (value === "false") return theme.NODE_COLORS.BOOL.FALSE;
+  if (value === "null") return theme.NODE_COLORS.NULL;
+  return theme.NODE_COLORS.NODE_VALUE;
 }
 
 export const StyledLinkItUrl = styled(LinkItUrl)`
@@ -20,7 +22,7 @@ export const StyledForeignObject = styled.foreignObject<{
   text-align: ${({ isObject }) => !isObject && "center"};
   font-size: 12px;
   overflow: hidden;
-  color: ${({ theme }) => theme.TEXT_NORMAL};
+  color: ${({ theme }) => theme.NODE_COLORS.TEXT};
   pointer-events: none;
   padding: ${({ isObject }) => isObject && "10px"};
 
@@ -51,15 +53,22 @@ export const StyledForeignObject = styled.foreignObject<{
   }
 `;
 
-function getKeyColor(theme: DefaultTheme, parent: boolean, objectKey: boolean) {
-  if (parent) return theme.NODE_KEY;
-  if (objectKey) return theme.OBJECT_KEY;
-  return theme.TEXT_POSITIVE;
+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;
+  }
+  if (objectKey) return theme.NODE_COLORS.NODE_KEY;
+  return theme.NODE_COLORS.TEXT;
 }
 
 export const StyledKey = styled.span<{
   objectKey?: boolean;
-  parent?: boolean;
+  parent?: "array" | "object" | false;
   value?: string;
 }>`
   display: inline;
@@ -90,7 +99,7 @@ export const StyledRow = styled.span.attrs<{
 `;
 
 export const StyledChildrenCount = styled.span`
-  color: ${({ theme }) => theme.TEXT_POSITIVE};
+  color: ${({ theme }) => theme.NODE_COLORS.CHILD_COUNT};
   padding: 10px;
   margin-left: -15px;
 `;

src/constants/theme.ts

@@ -1,5 +1,3 @@
-import { DefaultTheme } from "styled-components";
-
 const fixedColors = {
   CRIMSON: "#DC143C",
   BLURPLE: "#5865F2",
@@ -18,8 +16,44 @@ const fixedColors = {
   TEXT_DANGER: "#db662e",
 };
 
-export const darkTheme: DefaultTheme = {
+const nodeColors = {
+  dark: {
+    NODE_COLORS: {
+      TEXT: "#35D073",
+      NODE_KEY: "#59b8ff",
+      NODE_VALUE: "#DCE5E7",
+      INTEGER: "#e8c479",
+      NULL: "#939598",
+      BOOL: {
+        FALSE: "#F85C50",
+        TRUE: "#00DC7D",
+      },
+      PARENT_ARR: "#FC9A40",
+      PARENT_OBJ: "#59b8ff",
+      CHILD_COUNT: "white",
+    },
+  },
+  light: {
+    NODE_COLORS: {
+      TEXT: "#748700",
+      NODE_KEY: "#761CEA",
+      NODE_VALUE: "#535353",
+      INTEGER: "#A771FE",
+      NULL: "#afafaf",
+      BOOL: {
+        FALSE: "#FF0000",
+        TRUE: "#748700",
+      },
+      PARENT_ARR: "#FF6B00",
+      PARENT_OBJ: "#761CEA",
+      CHILD_COUNT: "#535353",
+    },
+  },
+};
+
+export const darkTheme = {
   ...fixedColors,
+  ...nodeColors.dark,
   BLACK_SECONDARY: "#23272A",
   SILVER_DARK: "#4D4D4D",
   NODE_KEY: "#FAA81A",
@@ -37,10 +71,11 @@ export const darkTheme: DefaultTheme = {
   MODAL_BACKGROUND: "#36393E",
   TEXT_NORMAL: "#dcddde",
   TEXT_POSITIVE: "hsl(139,calc(var(--saturation-factor, 1)*51.6%),52.2%)",
-} as const;
+};
 
-export const lightTheme: DefaultTheme = {
+export const lightTheme = {
   ...fixedColors,
+  ...nodeColors.light,
   BLACK_SECONDARY: "#F2F2F2",
   SILVER_DARK: "#CCCCCC",
   NODE_KEY: "#DC3790",
@@ -58,4 +93,11 @@ export const lightTheme: DefaultTheme = {
   MODAL_BACKGROUND: "#FFFFFF",
   TEXT_NORMAL: "#2e3338",
   TEXT_POSITIVE: "#008736",
-} as const;
+};
+
+const themeDs = {
+  ...lightTheme,
+  ...darkTheme,
+};
+
+export default themeDs;

src/typings/styled.d.ts

@@ -1,38 +1,8 @@
+import theme from "src/constants/theme";
 import "styled-components";
 
-declare module "styled-components" {
-  export interface DefaultTheme {
-    BLURPLE: string;
-    FULL_WHITE: string;
-    BLACK: string;
-    BLACK_LIGHT: string;
-    BLACK_DARK: string;
-    BLACK_PRIMARY: string;
-    BLACK_SECONDARY: string;
-    CRIMSON: string;
-    DARK_SALMON: string;
-    DANGER: string;
-    LIGHTGREEN: string;
-    SEAGREEN: string;
-    ORANGE: string;
-    SILVER: string;
-    SILVER_DARK: string;
-    PRIMARY: string;
-    NODE_KEY: string;
-    OBJECT_KEY: string;
-    SIDEBAR_ICONS: string;
+type CustomTheme = typeof theme;
 
-    INTERACTIVE_NORMAL: string;
-    INTERACTIVE_HOVER: string;
-    INTERACTIVE_ACTIVE: string;
-    BACKGROUND_NODE: string;
-    BACKGROUND_TERTIARY: string;
-    BACKGROUND_SECONDARY: string;
-    BACKGROUND_PRIMARY: string;
-    BACKGROUND_MODIFIER_ACCENT: string;
-    MODAL_BACKGROUND: string;
-    TEXT_NORMAL: string;
-    TEXT_POSITIVE: string;
-    TEXT_DANGER: string;
-  }
+declare module "styled-components" {
+  export interface DefaultTheme extends CustomTheme {}
 }

src/utils/jsonParser.ts

@@ -42,7 +42,7 @@ export const parser = (jsonStr: string, isFolded = false) => {
       text: any,
       width: number,
       height: number,
-      parent: boolean,
+      parent: "string" | "number" | "boolean" | "object" | "array" | "null" | false,
       isEmpty?: boolean
     ) => {
       let actualId = String(nodes.length + 1);
@@ -54,7 +54,7 @@ export const parser = (jsonStr: string, isFolded = false) => {
           width: width,
           height: height,
           data: {
-            isParent: parent,
+            parent: parent === "array" || parent === "object" ? parent : false,
             childrenCount: parent ? 1 : 0,
             isEmpty: isEmpty,
           },
@@ -128,7 +128,7 @@ export const parser = (jsonStr: string, isFolded = false) => {
 
         if (type !== "property" && parentName !== "") {
           // add last brothers node and add parent node
-          
+
           if (brothersNode.length > 0) {
             // add or concat brothers node of same parent
             let findBrothersNode = brothersNodeProps.find(
@@ -178,7 +178,7 @@ export const parser = (jsonStr: string, isFolded = false) => {
 
           // add parent node
           const { width, height } = calculateSize(parentName, true, isFolded);
-          parentId = addNodes(parentName, width, height, true);
+          parentId = addNodes(parentName, width, height, type);
           bracketOpen = [...bracketOpen, { id: parentId, type: type }];
           parentName = "";
 
@@ -201,8 +201,8 @@ export const parser = (jsonStr: string, isFolded = false) => {
             notHaveParent = [...notHaveParent, parentId];
           }
         } else if (parentType === "array") {
-            objectsFromArray = [...objectsFromArray, objectsFromArrayId++];
-          }
+          objectsFromArray = [...objectsFromArray, objectsFromArrayId++];
+        }
         children.forEach((branch, index, array) => {
           if (array[index + 1]) {
             traverse(
@@ -302,7 +302,7 @@ export const parser = (jsonStr: string, isFolded = false) => {
         }
       }
     };
-    
+
     if (json) {
       traverse(json);
 
@@ -316,7 +316,7 @@ export const parser = (jsonStr: string, isFolded = false) => {
           });
         }
       }
-      
+
       if (nodes.length === 0) {
         if (json.type === "array") {
           const text = "[]";