code cleanup

src/containers/LiveEditor/CustomNode.tsx

@@ -1,124 +0,0 @@
-import React from "react";
-import { Label, Node, Port, NodeProps } from "reaflow";
-import styled from "styled-components";
-
-const StyledTextWrapper = styled.div`
-  position: absolute;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 12px;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  cursor: pointer;
-`;
-
-const StyledText = styled.pre<{ width: number; height: number }>`
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  width: ${({ width }) => width};
-  height: ${({ height }) => height};
-  color: ${({ theme }) => theme.SILVER};
-`;
-
-const StyledForeignObject = styled.foreignObject<{
-  width: number;
-  height: number;
-}>`
-  position: "relative" !important;
-  pointer-events: "none" !important;
-  width: ${({ width }) => width + "px"};
-  height: ${({ height }) => height + "px"};
-`;
-
-const StyledKey = styled.span<{
-  bond?: boolean;
-  arrayValue?: boolean;
-}>`
-  color: ${({ theme, bond, arrayValue }) =>
-    bond ? theme.SEAGREEN : arrayValue ? theme.ORANGE : theme.BLURPLE};
-`;
-
-const baseLabelStyle = {
-  fill: "transparent",
-  stroke: "transparent",
-  strokeWidth: 0,
-};
-
-const basePortStyle = {
-  fill: "black",
-};
-
-export const CustomNode = (nodeProps: NodeProps) => {
-  const { properties: data } = nodeProps;
-
-  return (
-    <Node
-      {...nodeProps}
-      label={<Label style={baseLabelStyle} />}
-      port={<Port style={basePortStyle} rx={10} ry={10} />}
-    >
-      {(nodeProps: NodeProps) => {
-        const { width, height } = nodeProps;
-
-        if (data.text instanceof Object) {
-          const entries = Object.entries(data.text);
-
-          if (Object.keys(data.text).every((val) => !isNaN(+val))) {
-            const text = Object.values(data.text).join("");
-
-            return (
-              <StyledForeignObject width={width} height={height} x={0} y={0}>
-                <StyledTextWrapper>
-                  <StyledText width={width} height={height}>
-                    <StyledKey arrayValue>{text}</StyledKey>
-                  </StyledText>
-                </StyledTextWrapper>
-              </StyledForeignObject>
-            );
-          }
-
-          return (
-            <StyledForeignObject width={width} height={height} x={0} y={0}>
-              <StyledTextWrapper>
-                <StyledText width={width} height={height}>
-                  {entries.map(
-                    (val, idx) =>
-                      val[1] !== null && (
-                        <div
-                          key={idx}
-                          style={{
-                            height: "fit-content",
-                            overflow: "hidden",
-                            textOverflow: "ellipsis",
-                            whiteSpace: "nowrap",
-                            padding: "0 auto",
-                            width: width - 20,
-                          }}
-                        >
-                          <StyledKey>{val[0]}: </StyledKey>
-                          {val[1]}
-                        </div>
-                      )
-                  )}
-                </StyledText>
-              </StyledTextWrapper>
-            </StyledForeignObject>
-          );
-        }
-
-        return (
-          <StyledForeignObject width={width} height={height} x={0} y={0}>
-            <StyledTextWrapper>
-              <StyledText width={width} height={height}>
-                <StyledKey bond>{data.text}</StyledKey>
-              </StyledText>
-            </StyledTextWrapper>
-          </StyledForeignObject>
-        );
-      }}
-    </Node>
-  );
-};

src/containers/LiveEditor/CustomNode/ArrayNode.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { CustomNodeProps } from ".";
+import * as Styled from "./styles";
+
+const ArrayNode: React.FC<CustomNodeProps<string>> = ({ width, height, value }) => {
+  return (
+    <Styled.StyledForeignObject width={width} height={height} x={0} y={0}>
+      <Styled.StyledTextWrapper>
+        <Styled.StyledText width={width} height={height}>
+          <Styled.StyledKey arrayValue>{value}</Styled.StyledKey>
+        </Styled.StyledText>
+      </Styled.StyledTextWrapper>
+    </Styled.StyledForeignObject>
+  );
+};
+
+export default ArrayNode;

src/containers/LiveEditor/CustomNode/BondNode.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { CustomNodeProps } from ".";
+import * as Styled from "./styles";
+
+const BondNode: React.FC<CustomNodeProps<string>> = ({ width, height, value }) => {
+  return (
+    <Styled.StyledForeignObject width={width} height={height} x={0} y={0}>
+      <Styled.StyledTextWrapper>
+        <Styled.StyledText width={width} height={height}>
+          <Styled.StyledKey bond>{value}</Styled.StyledKey>
+        </Styled.StyledText>
+      </Styled.StyledTextWrapper>
+    </Styled.StyledForeignObject>
+  );
+};
+
+export default BondNode;

src/containers/LiveEditor/CustomNode/ObjectNode.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { CustomNodeProps } from ".";
+import * as Styled from "./styles";
+
+const ObjectNode: React.FC<CustomNodeProps<[string, unknown][]>> = ({
+  width,
+  height,
+  value,
+}) => {
+  return (
+    <Styled.StyledForeignObject width={width} height={height} x={0} y={0}>
+      <Styled.StyledTextWrapper>
+        <Styled.StyledText width={width} height={height}>
+          {value.map(
+            (val, idx) =>
+              val[1] && (
+                <Styled.StyledRow key={idx} width={width}>
+                  <Styled.StyledKey>{val[0]}: </Styled.StyledKey>
+                  {val[1]}
+                </Styled.StyledRow>
+              )
+          )}
+        </Styled.StyledText>
+      </Styled.StyledTextWrapper>
+    </Styled.StyledForeignObject>
+  );
+};
+
+export default ObjectNode;

src/containers/LiveEditor/CustomNode/index.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { Label, Node, Port, NodeProps } from "reaflow";
+import ArrayNode from "./ArrayNode";
+import BondNode from "./BondNode";
+import ObjectNode from "./ObjectNode";
+
+export interface CustomNodeProps<T> {
+  width: number;
+  height: number;
+  value: T;
+}
+
+const baseLabelStyle = {
+  fill: "transparent",
+  stroke: "transparent",
+  strokeWidth: 0,
+};
+
+const basePortStyle = {
+  fill: "black",
+};
+
+export const CustomNode = (nodeProps: NodeProps) => {
+  const { properties: data } = nodeProps;
+
+  return (
+    <Node
+      {...nodeProps}
+      label={<Label style={baseLabelStyle} />}
+      port={<Port style={basePortStyle} rx={10} ry={10} />}
+    >
+      {(nodeProps: NodeProps) => {
+        const { width, height } = nodeProps;
+
+        if (data.text instanceof Object) {
+          if (Object.keys(data.text).every((val) => !isNaN(+val))) {
+            const text = Object.values(data.text).join("");
+            return <ArrayNode width={width} height={height} value={text} />;
+          }
+
+          const entries = Object.entries(data.text);
+          return <ObjectNode width={width} height={height} value={entries} />;
+        }
+
+        return <BondNode width={width} height={height} value={data.text} />;
+      }}
+    </Node>
+  );
+};

src/containers/LiveEditor/CustomNode/styles.tsx

@@ -0,0 +1,49 @@
+import styled from "styled-components";
+
+export const StyledTextWrapper = styled.div`
+position: absolute;
+display: flex;
+justify-content: center;
+align-items: center;
+font-size: 12px;
+width: 100%;
+height: 100%;
+overflow: hidden;
+cursor: pointer;
+`;
+
+export const StyledText = styled.pre<{ width: number; height: number }>`
+display: flex;
+justify-content: center;
+flex-direction: column;
+width: ${({ width }) => width};
+height: ${({ height }) => height};
+color: ${({ theme }) => theme.SILVER};
+`;
+
+export const StyledForeignObject = styled.foreignObject<{
+width: number;
+height: number;
+}>`
+position: "relative" !important;
+pointer-events: "none" !important;
+width: ${({ width }) => width + "px"};
+height: ${({ height }) => height + "px"};
+`;
+
+export const StyledKey = styled.span<{
+bond?: boolean;
+arrayValue?: boolean;
+}>`
+color: ${({ theme, bond, arrayValue }) =>
+  bond ? theme.SEAGREEN : arrayValue ? theme.ORANGE : theme.BLURPLE};
+`;
+
+export const StyledRow = styled.div<{ width: number }>`
+height: fit-content;
+overflow: hidden;
+text-overflow: ellipsis;
+white-space: nowrap;
+padding: 0 auto;
+width: ${({ width }) => `${width - 20}px`};
+`;