Merge branch 'master' into six7/add-support-for-loading-examples

tokens-studio · Oct 9, 2023 · 858520e · 858520e
2 parents e5850e5 + 0f96a26
commit 858520e
Show file tree

Hide file tree

Showing 13 changed files with 1,152 additions and 107 deletions.
diff --git a/.changeset/dirty-houses-eat.md b/.changeset/dirty-houses-eat.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-editor": patch
+---
+
+Adjusts error styling for nodes
diff --git a/.changeset/swift-lobsters-change.md b/.changeset/swift-lobsters-change.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-editor": patch
+---
+
+Changes markerEnd to not include arrow head
diff --git a/.changeset/tall-actors-love.md b/.changeset/tall-actors-love.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-engine-ui": patch
+---
+
+Fixes Preview code changes not being saved
diff --git a/packages/graph-editor/src/components/flow/wrapper/node.tsx b/packages/graph-editor/src/components/flow/wrapper/node.tsx
@@ -129,6 +129,22 @@ export const Collapser = ({ icon, children, collapsed, showContent }) => {
   );
 };
 
+const NodeWrapper = styled('div', {
+  minWidth: '300px',
+  position: 'relative',
+  borderRadius: '$medium',
+  background: '$bgDefault',
+  variants: {
+    error: {
+      true: {
+        '--nodeBorderColor': 'var(--colors-dangerFg)',
+        '--nodeBgColor': 'var(--colors-dangerBg)',
+        '--nodeTextColor': 'var(--colors-dangerFg)',
+      },
+    },
+  },
+});
+
 export const Node = (props: NodeProps) => {
   const { id, icon, title, error, isAsync, children, controls, ...rest } =
     props;
@@ -182,14 +198,7 @@ export const Node = (props: NodeProps) => {
   const onDetach = () => detachNodes([id]);
 
   return (
-    <Box
-      css={{
-        minWidth: '300px',
-        position: 'relative',
-        borderRadius: '$medium',
-        background: error ? '$dangerBg' : '$bgDefault',
-      }}
-    >
+    <NodeWrapper error={Boolean(error)} className={error ? 'error' : ''}>
       <NodeToolbar className="nodrag">
         <Stack
           direction="row"
@@ -314,7 +323,7 @@ export const Node = (props: NodeProps) => {
           </Stack>
         </FocusTrap>
       </HandleContainerContext.Provider>
-    </Box>
+    </NodeWrapper>
   );
 };
 

diff --git a/packages/graph-editor/src/editor/index.tsx b/packages/graph-editor/src/editor/index.tsx
@@ -88,9 +88,6 @@ const defaultEdgeOptions = {
   style: {
     strokeWidth: 2,
   },
-  markerEnd: {
-    type: MarkerType.ArrowClosed,
-  },
 };
 
 export const EditorApp = React.forwardRef<ImperativeEditorRef, EditorProps>(

diff --git a/packages/graph-engine/tests/data/raw/basic.json b/packages/graph-engine/tests/data/raw/basic.json
@@ -26,7 +26,6 @@
   "edges": [
     {
       "style": { "strokeWidth": 2 },
-      "markerEnd": { "type": "arrowclosed" },
       "source": "c15d874f-f7e7-42a6-a6b3-8f238da52007",
       "sourceHandle": "xxx",
       "target": "33952fc4-eced-4c10-a56d-7bdb65182b34",

diff --git a/packages/graph-engine/tests/data/raw/inputDisconnected.json b/packages/graph-engine/tests/data/raw/inputDisconnected.json
@@ -46,7 +46,6 @@
   "edges": [
     {
       "style": { "strokeWidth": 2 },
-      "markerEnd": { "type": "arrowclosed" },
       "source": "4e629553-6fe2-444a-8a29-9b30abe26e1b",
       "sourceHandle": "output",
       "target": "5531dd87-f2a0-4e2a-89b9-9d382cd793d9",
@@ -57,7 +56,6 @@
     },
     {
       "style": { "strokeWidth": 2 },
-      "markerEnd": { "type": "arrowclosed" },
       "source": "734907ed-5f93-4b34-b24c-f262709470ac",
       "sourceHandle": "colors.tertiary",
       "target": "4e629553-6fe2-444a-8a29-9b30abe26e1b",
@@ -68,7 +66,6 @@
     },
     {
       "style": { "strokeWidth": 2 },
-      "markerEnd": { "type": "arrowclosed" },
       "source": "734907ed-5f93-4b34-b24c-f262709470ac",
       "sourceHandle": "colors.primary",
       "target": "4e629553-6fe2-444a-8a29-9b30abe26e1b",

diff --git a/packages/graph-engine/tests/data/raw/noInput.json b/packages/graph-engine/tests/data/raw/noInput.json
@@ -37,7 +37,6 @@
   "edges": [
     {
       "style": { "strokeWidth": 2 },
-      "markerEnd": { "type": "arrowclosed" },
       "source": "4e629553-6fe2-444a-8a29-9b30abe26e1b",
       "sourceHandle": "output",
       "target": "5531dd87-f2a0-4e2a-89b9-9d382cd793d9",
@@ -48,7 +47,6 @@
     },
     {
       "style": { "strokeWidth": 2 },
-      "markerEnd": { "type": "arrowclosed" },
       "source": "734907ed-5f93-4b34-b24c-f262709470ac",
       "sourceHandle": "colors.tertiary",
       "target": "4e629553-6fe2-444a-8a29-9b30abe26e1b",
@@ -59,7 +57,6 @@
     },
     {
       "style": { "strokeWidth": 2 },
-      "markerEnd": { "type": "arrowclosed" },
       "source": "734907ed-5f93-4b34-b24c-f262709470ac",
       "sourceHandle": "colors.primary",
       "target": "4e629553-6fe2-444a-8a29-9b30abe26e1b",

diff --git a/packages/graph-engine/tests/data/raw/outputObject.json b/packages/graph-engine/tests/data/raw/outputObject.json
@@ -37,7 +37,6 @@
   "edges": [
     {
       "style": { "strokeWidth": 2 },
-      "markerEnd": { "type": "arrowclosed" },
       "source": "4afda872-881c-4e2b-905c-b5995ad0ebda",
       "sourceHandle": "background",
       "target": "ef251584-99f2-4976-8f0e-e265a12223ce",
@@ -48,7 +47,6 @@
     },
     {
       "style": { "strokeWidth": 2 },
-      "markerEnd": { "type": "arrowclosed" },
       "source": "ef251584-99f2-4976-8f0e-e265a12223ce",
       "sourceHandle": "output",
       "target": "3a2f6a06-c2a5-4b82-9f93-f9afa00aaacf",

diff --git a/packages/graph-engine/tests/data/raw/tokenSetInput.json b/packages/graph-engine/tests/data/raw/tokenSetInput.json
@@ -47,7 +47,6 @@
   "edges": [
     {
       "style": { "strokeWidth": 2 },
-      "markerEnd": { "type": "arrowclosed" },
       "source": "80182fd6-c10d-4adb-810b-15d555b73c12",
       "sourceHandle": "background-color",
       "target": "413a4ad6-65ca-4d6d-9f68-f12a52ae8185",
@@ -57,7 +56,6 @@
     },
     {
       "style": { "strokeWidth": 2 },
-      "markerEnd": { "type": "arrowclosed" },
       "source": "413a4ad6-65ca-4d6d-9f68-f12a52ae8185",
       "sourceHandle": "output",
       "target": "db665864-d7fe-4345-a084-9f020ef5ee9c",
@@ -67,7 +65,6 @@
     },
     {
       "style": { "strokeWidth": 2 },
-      "markerEnd": { "type": "arrowclosed" },
       "source": "95b28e18-149f-42df-a61c-891748baeff6",
       "sourceHandle": "colorSet",
       "target": "80182fd6-c10d-4adb-810b-15d555b73c12",