add proper line support - fixes the border side handling of the line node

Author: softmarshmallow

externals/reflect-core

@@ -314,11 +314,9 @@ function handle_by_types(
       break;
 
     case nodes.ReflectSceneNodeType.line:
-      // FIXME: this is a temporary fallback. line should be handled with unique handler. (using rect's handler instead.)
-      tokenizedTarget = tokenizeContainer.fromRectangle(node as any);
+      tokenizedTarget = tokenizeContainer.fromLine(node as any);
+      // tokenizedTarget = tokenizeDivider.fromLine(_line);
       break;
-    // const _line = node as nodes.ReflectLineNode;
-    // tokenizedTarget = tokenizeDivider.fromLine(_line);
 
     default:
       console.error(`${node["type"]} is not yet handled by "@designto/token"`);

packages/designto-token/main.ts

@@ -1,9 +1,30 @@
 import { retrievePrimaryColor } from "@design-sdk/core/utils";
-import { ReflectSceneNode } from "@design-sdk/figma-node";
+import type { ReflectSceneNode, ReflectLineNode } from "@design-sdk/figma-node";
 import { Figma } from "@design-sdk/figma-types"; /** remove figma dependency */
 import { Border } from "@reflect-ui/core";
 import { roundNumber } from "@reflect-ui/uiutils";
 
+function fromLineNode(node: ReflectLineNode) {
+  const strokes = node.strokes;
+  if (!strokes || strokes.length === 0) {
+    return undefined;
+  }
+  // guard invisible borders
+  if (strokes.filter(visible).length > 0) {
+    // generate the border, when it should exist
+    // if width is 0, then we don't want to generate a border
+    return node.strokeWeight
+      ? new Border({
+          // it's a line so we only add border to a single side.
+          top: {
+            color: retrievePrimaryColor(strokes),
+            width: node.strokeWeight, // do not round number
+          },
+        })
+      : undefined;
+  }
+}
+
 function fromNode(node: ReflectSceneNode) {
   if ("strokes" in node) {
     if (!node.strokes || node.strokes.length === 0) {
@@ -29,7 +50,7 @@ function fromStrokes(
   }
 ) {
   // guard invisible borders
-  if (strokes.filter((s) => s.visible).length > 0) {
+  if (strokes.filter(visible).length > 0) {
     // generate the border, when it should exist
     // if width is 0, then we don't want to generate a border
     return width
@@ -41,7 +62,10 @@ function fromStrokes(
   }
 }
 
+const visible = (s) => s.visible;
+
 export const tokenizeBorder = {
   fromStrokes: fromStrokes,
   fromNode: fromNode,
+  fromLineNode: fromLineNode,
 };

packages/designto-token/token-border/index.ts

@@ -23,6 +23,20 @@ function fromRectangle(rect: nodes.ReflectRectangleNode): core.Container {
   return container;
 }
 
+function fromLine(line: nodes.ReflectLineNode): core.Container {
+  const container = new core.Container({
+    key: keyFromNode(line),
+    width: line.width,
+    height: 0,
+    boxShadow: line.shadows as BoxShadowManifest[],
+    border: tokenizeBorder.fromLineNode(line),
+  });
+
+  container.x = line.x;
+  container.y = line.y;
+  return container;
+}
+
 function fromEllipse(ellipse: nodes.ReflectEllipseNode): core.Container {
   const container = new core.Container({
     key: keyFromNode(ellipse),
@@ -45,4 +59,5 @@ function fromEllipse(ellipse: nodes.ReflectEllipseNode): core.Container {
 export const tokenizeContainer = {
   fromRectangle: fromRectangle,
   fromEllipse: fromEllipse,
+  fromLine: fromLine,
 };