Fix subtraction (#169)

.changeset/calm-rice-invent.md

@@ -0,0 +1,6 @@
+---
+"@tokens-studio/graph-editor": patch
+"@tokens-studio/graph-engine-ui": patch
+---
+
+Add support for stringify node, fix an issue with subtract on initial load

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

@@ -497,6 +497,11 @@ export const defaultPanelItems: PanelGroup[] = [
         icon: '^$',
         text: 'Regex',
       },
+      {
+        type: NodeTypes.STRINGIFY,
+        icon: '"a"',
+        text: 'Stringify',
+      },
     ],
   },
   {

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

@@ -48,6 +48,7 @@ import UpperNode from './string/upperCaseNode.tsx';
 import advancedBlend from './color/advancedBlend.tsx';
 import arrayIndex from './array/arrayIndex.tsx';
 import blendNode from './color/blendNode.tsx';
+import stringifyNode from './string/stringify.tsx';
 import cssMapNode from './output/cssMapNode.tsx';
 import extract from './color/extract.tsx';
 import geometricNode from './series/geometricNode.tsx';
@@ -200,4 +201,5 @@ export const {
   ContrastingFromSetNode,
   colorNameNode,
   NearestTokensNode,
+  stringifyNode,
 ]);

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

@@ -0,0 +1,31 @@
+import { WrapNode, useNode } from '../../wrapper/nodeV2.tsx';
+import { node } from '@tokens-studio/graph-engine/nodes/string/stringify.js';
+import { Stack, Text } from '@tokens-studio/ui';
+import React from 'react';
+import { Handle, HandleContainer } from '../../handles.tsx';
+import { PreviewAny } from '../../preview/any.tsx';
+
+export const BasicNode = () => {
+  const { input, output } = useNode();
+  return (
+    <Stack direction="row" gap={4}>
+      <HandleContainer type="target">
+        <Handle id="input">
+          <Text>Input</Text>
+          <PreviewAny value={input?.input} />
+        </Handle>
+      </HandleContainer>
+      <HandleContainer type="source">
+        <Handle id="output">
+          <Text>Output</Text>
+          <PreviewAny value={output?.output} />
+        </Handle>
+      </HandleContainer>
+    </Stack>
+  );
+};
+
+export default WrapNode(BasicNode, {
+  ...node,
+  title: 'Stringify',
+});

packages/graph-editor/src/components/flow/wrapper/node.tsx

@@ -247,7 +247,7 @@ export const Node = (props: NodeProps) => {
         value={{ collapsed, hide: !showContent }}
       >
         <FocusTrap>
-          <Stack direction="column" gap={0} {...rest}>
+          <Stack css={{ maxWidth: 500 }} direction="column" gap={0} {...rest}>
             {title && (
               <>
                 <Stack

packages/graph-engine/src/nodes/math/subtract.ts

@@ -27,6 +27,13 @@ export const validateInputs = (inputs) => {
  * @returns
  */
 export const process = (input: MappedInput) => {
+  if (input.inputs.length == 0) {
+    return 0;
+  }
+  if (input.inputs.length == 1) {
+    return input.inputs[0].value;
+  }
+
   const vals = input.inputs.slice(1);
   return vals.reduce((acc, x) => acc - x.value, input.inputs[0].value);
 };

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

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

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

@@ -0,0 +1,20 @@
+import { NodeDefinition, NodeTypes } from "../../types.js";
+
+export const type = NodeTypes.STRINGIFY;
+
+export const process = (input) => {
+  switch (typeof input.input) {
+    case "string":
+      return input.input;
+    case "object":
+      return JSON.stringify(input.input);
+    case "undefined":
+      return "";
+    default:
+      return String(input.input);
+  }
+};
+export const node: NodeDefinition = {
+  type,
+  process,
+};

packages/graph-engine/src/types.ts

@@ -162,6 +162,7 @@ export enum NodeTypes {
   REGEX = "studio.tokens.string.regex",
   PASS_UNIT = "studio.tokens.typing.passUnit",
   PARSE_UNIT = "studio.tokens.typing.parseUnit",
+  STRINGIFY = "studio.tokens.string.stringify",
 
   //Accessibility
   CONTRAST = "studio.tokens.accessibility.contrast",