Join String Node (#88)

* [TASK] add join string

* fix: join

* add test

---------

Co-authored-by: SorsOps <[email protected]>

.changeset/tricky-moose-call.md

@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-engine": minor
+---
+
+Adds a string join node

packages/documentation/pages/nodes/string-nodes/_meta.json

@@ -1,4 +1,5 @@
 {
+    "join": "Join",
     "uppercase": "Uppercase",
     "lowercase": "Lowercase",
     "regex": "Regex"

packages/graph-editor/src/components/flow/DropPanel/PanelItems.tsx

@@ -404,6 +404,11 @@ export const items = {
     },
   ],
   string: [
+    {
+      type: NodeTypes.JOIN_STRING,
+      icon: 'a+a',
+      text: 'Join String',
+    },
     {
       type: NodeTypes.UPPERCASE,
       icon: 'uU',

packages/graph-editor/src/components/flow/nodes/index.ts

@@ -22,6 +22,7 @@ import InvertNode from './sets/invertNode.tsx';
 import objectify from './input/objectify.tsx';
 import dotProp from './array/dotProp.tsx';
 import JoinNode from './array/join.tsx';
+import JoinString from './string/join.tsx';
 import LerpNode from './math/lerpNode.tsx';
 import LowerCaseNode from './string/lowerCaseNode.tsx';
 import MultiplyNode from './math/multiplyNode.tsx';
@@ -97,6 +98,7 @@ export const { nodeTypes, stateInitializer } = processTypes([
   SubtractNode,
   sliderNode,
   JoinNode,
+  JoinString,
   TokenSetNode,
   roundNode,
   UpperNode,

packages/graph-editor/src/components/flow/nodes/string/join.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Handle, HandleContainer } from '../../handles.tsx';
+import { Stack, Text, TextInput } from '@tokens-studio/ui';
+import { WrapNode, useNode } from '../../wrapper/nodeV2.tsx';
+import { node } from '@tokens-studio/graph-engine/nodes/string/join.js';
+import { PreviewArray } from '../../preview/array.tsx';
+import { PreviewAny } from '../../preview/any.tsx';
+
+const JoinStringNode = () => {
+    const { input, output } = useNode();
+
+    return (
+        <Stack direction="row" gap={4}>
+            <HandleContainer type="target">
+                <Handle id="array">
+                    <Text>Array</Text>
+                    <PreviewArray value={input.array} />
+                </Handle>
+
+                <Handle id="separator">
+                    <Text>Separator</Text>
+                    {input.separator !== undefined ? (
+                        <PreviewAny value={input.separator} />
+                    ) : (
+                        <TextInput placeholder="Enter separator" />
+                    )}
+                </Handle>
+            </HandleContainer>
+
+            <HandleContainer type="source">
+                <Handle id="output">
+                    <Text>Output</Text>
+                    <PreviewAny value={output?.output} />
+                </Handle>
+            </HandleContainer>
+        </Stack>
+    );
+};
+
+export default WrapNode(JoinStringNode, {
+    ...node,
+    title: 'Join String',
+});

packages/graph-engine/src/nodes/string/index.ts

@@ -1,5 +1,6 @@
 import { node as lowercase } from "./lowercase.js";
+import { node as joinString } from "./join.js";
 import { node as regex } from "./regex.js";
 import { node as uppercase } from "./uppercase.js";
 
-export const nodes = [lowercase, regex, uppercase];
+export const nodes = [lowercase, joinString, regex, uppercase];

packages/graph-engine/src/nodes/string/join.ts

@@ -0,0 +1,24 @@
+import { NodeDefinition, NodeTypes } from "../../types.js";
+
+const type = NodeTypes.JOIN_STRING;
+
+export type NamedInput = {
+  array: string[];
+  separator: string;
+};
+
+export const defaults = {
+  array: [],
+  separator: "",
+};
+
+export const process = (input: NamedInput, state: NamedInput) => {
+  const { array, separator } = { ...state, ...input };
+  return array.join(separator);
+};
+
+export const node: NodeDefinition<NamedInput, NamedInput> = {
+  defaults,
+  type,
+  process,
+};

packages/graph-engine/src/types.ts

@@ -141,6 +141,7 @@ export enum NodeTypes {
 
   //String
   UPPERCASE = "studio.tokens.string.uppercase",
+  JOIN_STRING = "studio.tokens.string.join",
   LOWER = "studio.tokens.string.lowercase",
   REGEX = "studio.tokens.string.regex",
   PASS_UNIT = "studio.tokens.typing.passUnit",

packages/graph-engine/tests/suites/nodes/string/join.test.ts

@@ -0,0 +1,21 @@
+import { executeNode } from "#/core.js";
+import { node } from "#/nodes/string/join.js";
+
+describe("string/join", () => {
+  it("should join the string array correctly", async () => {
+    const output = await executeNode({
+      input: {
+        array: ["a", "b", "c"],
+      },
+      node,
+      state: {
+        seperator: ",",
+      },
+      nodeId: "testId",
+    });
+
+    expect(output).toStrictEqual({
+      output: "a,b,c",
+    });
+  });
+});