add dashed stroke support (stroke gaps are not supported)

Author: softmarshmallow

externals/design-sdk

@@ -33,5 +33,7 @@ export function border(border: Border): CSSProperties {
 }
 
 export function borderSide(borderSide: BorderSide): CSSProperty.Border {
-  return `solid ${px(borderSide.width)} ${color(borderSide.color)}`;
+  return `${borderSide.style ?? "solid"} ${px(borderSide.width)} ${color(
+    borderSide.color
+  )}`;
 }

externals/reflect-core

@@ -1,7 +1,11 @@
 import { retrievePrimaryColor } from "@design-sdk/core/utils";
-import type { ReflectSceneNode, ReflectLineNode } from "@design-sdk/figma-node";
+import type {
+  ReflectSceneNode,
+  ReflectLineNode,
+  IReflectGeometryMixin,
+} from "@design-sdk/figma-node";
 import { Figma } from "@design-sdk/figma-types"; /** remove figma dependency */
-import { Border } from "@reflect-ui/core";
+import { Border, BorderStyle } from "@reflect-ui/core";
 import { roundNumber } from "@reflect-ui/uiutils";
 
 function fromLineNode(node: ReflectLineNode) {
@@ -11,14 +15,18 @@ function fromLineNode(node: ReflectLineNode) {
   }
   // guard invisible borders
   if (strokes.filter(visible).length > 0) {
+    const _p_stroke = strokes.find(visible);
+
     // 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),
+            color: retrievePrimaryColor([_p_stroke]),
             width: node.strokeWeight, // do not round number
+            // the dashed border support is incomplete. we cannot support dashed gap since the platform does not support it.
+            style: isDashed(node) ? BorderStyle.dashed : BorderStyle.solid,
           },
         })
       : undefined;
@@ -33,6 +41,8 @@ function fromNode(node: ReflectSceneNode) {
     if ("strokeWeight" in node) {
       return fromStrokes(node.strokes, {
         width: node.strokeWeight,
+        // the dashed border support is incomplete. we cannot support dashed gap since the platform does not support it.
+        dashed: isDashed(node),
       });
     }
   }
@@ -42,28 +52,45 @@ function fromStrokes(
   strokes: ReadonlyArray<Figma.Paint>,
   {
     width,
+    dashed,
   }: {
     /**
      * a stroke height
      */
     width: number;
+    dashed: boolean;
   }
 ) {
   // 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
+    // using the first stroke. since css3 standard does not support multiple borders (as well as flutter)
+    const _p_stroke = strokes.find(visible);
     return width
       ? Border.all({
-          color: retrievePrimaryColor(strokes),
+          color: retrievePrimaryColor([_p_stroke]),
           width: roundNumber(width),
+          style: dashed ? BorderStyle.dashed : BorderStyle.solid,
         })
       : undefined;
   }
 }
 
 const visible = (s) => s.visible;
 
+/**
+ *
+ * returns if the node's border is dashed or not
+ *
+ * - when solid, the dashPattern is empty - `[]`
+ * - when dashed, the dashPattern will be like - `[6, 6]`
+ * @param s
+ * @returns
+ */
+const isDashed = (s: IReflectGeometryMixin): boolean =>
+  s.dashPattern?.length > 0;
+
 export const tokenizeBorder = {
   fromStrokes: fromStrokes,
   fromNode: fromNode,