Fix enum array. (#306)

Fix unnecessary docker releases

Author: SorsOps

.changeset/thick-moose-wave.md

@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-editor": patch
+---
+
+Fixed an issue on input that was throwing an error if you create both an array and enumerated value

.github/workflows/docker-release.yml

@@ -1,8 +1,7 @@
 name: Publish to Dockerhub
 
 on:
-  push:
-    branches: [ master ]
+  workflow_dispatch:
 
 jobs:
   build:
@@ -39,7 +38,7 @@ jobs:
       with:
         tags: |
           type=sha,format=long
-          type=raw,value=latest,enable=${{ github.ref == format('refs/heads/{0}', 'major/strong-typing') }}
+          type=raw,value=latest,enable=${{ github.ref == format('refs/heads/{0}', 'master') }}
         images: |
           tokensstudio/graph-engine-${{matrix.type}}
 

.github/workflows/gimlet.yml

@@ -42,7 +42,7 @@ jobs:
       with:
         tags: |
           type=sha,format=long,prefix=${{matrix.type}}-
-          type=raw,value=latest,enable=${{ github.ref == format('refs/heads/{0}', 'major/strong-typing') }}
+          type=raw,value=latest,enable=${{ github.ref == format('refs/heads/{0}', 'master') }}
         images: |
           ghcr.io/tokens-studio/graph-engine
 

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

@@ -74,7 +74,7 @@ const NodeWrap = observer(({ node }: INodeWrap) => {
       subtitle={node.annotations[title] ? node.factory.title : ""}
       error={node.error || null}
       controls={''}
-      style={{minWidth:'350px'}}
+      style={{ minWidth: '350px' }}
     >
       <Stack direction="column" gap={2}>
         <Stack direction="row" gap={3} css={{ padding: '$3' }}>
@@ -159,7 +159,7 @@ const getColorPreview = (color: string, showValue = false) => {
 
   return (
     <Stack direction="row" gap={2}>
-      {colorSwatch}    
+      {colorSwatch}
       {showValue ? <Text css={{ fontSize: '$small', color: '$gray12' }}>{color.toUpperCase()}</Text> : null}
     </Stack>
   );
@@ -174,8 +174,9 @@ const getValuePreview = (value, type) => {
   let valuePreview = '';
   switch (type.type) {
     case 'array':
-      const allColors = value.every(isHexColor);
-      if (allColors) {
+
+      if (type.items?.$id === COLOR) {
+
         return (<Stack direction="row" gap={1}>
           {value.length > 5 ? (
             <>
@@ -184,7 +185,9 @@ const getValuePreview = (value, type) => {
             </>
           ) : value.map((val) => getColorPreview(val))}
         </Stack>)
+
       }
+
       valuePreview = JSON.stringify(value);
       break;
     case 'object':
@@ -198,7 +201,7 @@ const getValuePreview = (value, type) => {
       break
     default:
       if (isHexColor(value)) {
-        return getColorPreview(value,true);
+        return getColorPreview(value, true);
       }
       valuePreview = JSON.stringify(value);
   }

packages/graph-editor/src/components/panels/inputs/dynamicInputs.tsx

@@ -33,17 +33,21 @@ export const DynamicInputs = observer(({ node }: { node: Node }) => {
         let type = {
             ...schema,
         };
+        let innerType = type;
 
         if (asArray) {
             type = {
                 type: "array",
-                items: type
+                items: type,
+                default: [],
             }
         }
 
         if (enumerated) {
-            type.enum = enumeratedValues.split(',').map((x) => x.trim());
-            type.default = type.enum[0];
+            innerType.enum = enumeratedValues.split(',').map((x) => x.trim());
+            if (!asArray) {
+                innerType.default = type.enum[0];
+            }
         }
 
         const input = node.addInput(inputName, {

packages/migrations/src/migrations/types.ts

@@ -1,3 +1,3 @@
-import { FlowGraph } from "@tokens-studio/graph-engine";
+import { Graph } from "@tokens-studio/graph-engine";
 
-export type UpgradeFunction = (graph: FlowGraph) => Promise<FlowGraph>;
+export type UpgradeFunction = (graph: Graph) => Promise<Graph>;

packages/migrations/src/utils.ts

@@ -1,24 +1,24 @@
-import { Edge, FlowGraph, Node } from "@tokens-studio/graph-engine";
+import { Edge, Graph, Node } from "@tokens-studio/graph-engine";
 
 /**
  * Finds all nodes of a specified type in the graph
  * @param graph
  * @param type
  * @returns
  */
-export const findNodesOfType = (graph: FlowGraph, type: string) =>
-  graph.nodes.filter((node) => node.type === type);
+export const findNodesOfType = (graph: Graph, type: string) =>
+  Object.values(graph.nodes).filter((node) => node.factory.type === type);
 
-export const findOutEdges = (graph: FlowGraph, id: string) =>
-  graph.edges.filter((edge) => edge.source === id);
+export const findOutEdges = (graph: Graph, id: string) =>
+  Object.values(graph.edges).filter((edge) => edge.source === id);
 
 /**
  * Converts the array of nodes in the graph to a lookup for O(1) performance
  * @param graph
  * @returns
  */
-export const toNodeLookup = (graph: FlowGraph): Record<string, Node> =>
-  graph.nodes.reduce((acc, node) => {
+export const toNodeLookup = (graph: Graph): Record<string, Node> =>
+  Object.values(graph.nodes).reduce((acc, node) => {
     acc[node.id] = node;
     return acc;
   }, {});
@@ -28,8 +28,8 @@ export const toNodeLookup = (graph: FlowGraph): Record<string, Node> =>
  * @param graph
  * @returns
  */
-export const toEdgeLookup = (graph: FlowGraph): Record<string, Edge> =>
-  graph.edges.reduce((acc, edge) => {
+export const toEdgeLookup = (graph: Graph): Record<string, Edge> =>
+  Object.values(graph.edges).reduce((acc, edge) => {
     acc[edge.id] = edge;
     return acc;
   }, {});
@@ -48,19 +48,19 @@ export type SourceToTarget = {
  * @returns
  */
 export const findSourceToTargetOfType = (
-  graph: FlowGraph,
+  graph: Graph,
   sourceType: string,
   targetType: string
 ): SourceToTarget[] => {
   const nodeLookup = toNodeLookup(graph);
 
-  return graph.nodes
-    .filter((node) => node.type === sourceType)
+  return Object.values(graph.nodes)
+    .filter((node) => node.factory.type === sourceType)
     .reduce((acc, node) => {
       const edges = findOutEdges(graph, node.id);
 
       const foundTargets = edges
-        .filter((edge) => nodeLookup[edge.target].type === targetType)
+        .filter((edge) => nodeLookup[edge.target].factory.type === targetType)
         .map((edge) => {
           return {
             source: node,