@seed-design/figma 1.3.7 → 1.3.9

package/lib/codegen/index.js

@@ -429,7 +429,7 @@ function applyInferredLayout(parentNode, result) {
     };
 }
 
-function createCodeGenerator({ frameTransformer, textTransformer, rectangleTransformer, instanceTransformer, vectorTransformer, booleanOperationTransformer, shouldInferAutoLayout, skipComponentKeys }) {
+function createCodeGenerator({ frameTransformer, slotTransformer, textTransformer, rectangleTransformer, instanceTransformer, vectorTransformer, booleanOperationTransformer, shouldInferAutoLayout, skipComponentKeys }) {
     function isSkippedInstance(node) {
         if (!skipComponentKeys || skipComponentKeys.size === 0) return false;
         if (node.type !== "INSTANCE") return false;
@@ -453,6 +453,8 @@ function createCodeGenerator({ frameTransformer, textTransformer, rectangleTrans
             type: "COMPONENT"
         }, (node)=>frameTransformer(node, traverse)) // NOTE: Treat component node as Frame for now
         .with({
+            type: "SLOT"
+        }, (node)=>slotTransformer(node, traverse)).with({
             type: "INSTANCE"
         }, (node)=>instanceTransformer(node, traverse)).with({
             type: "VECTOR"
@@ -530,8 +532,24 @@ function createPropsConverter({ handlers, shorthands, defaults }) {
     });
 }
 
+function traverseNode(node, callback) {
+    callback(node);
+    if (!("children" in node)) return;
+    for (const child of node.children){
+        traverseNode(child, callback);
+    }
+}
+function findOne(node, callback) {
+    let result;
+    traverseNode(node, (n)=>{
+        if (callback(n)) {
+            result = n;
+        }
+    });
+    return result;
+}
 function getFirstSolidFill(node) {
-    const fills = node.fills.filter((fill)=>fill.type === "SOLID" && (!("visible" in fill) || fill.visible === true));
+    const fills = node.fills.filter((fill)=>fill.type === "SOLID");
     if (fills.length === 0) {
         return undefined;
     }
@@ -542,7 +560,7 @@ function getFirstFillVariable(node) {
     return fill?.boundVariables?.color;
 }
 function getFirstStroke(node) {
-    const strokes = node.strokes?.filter((stroke)=>stroke.type === "SOLID" && (!("visible" in stroke) || stroke.visible === true)) ?? [];
+    const strokes = node.strokes?.filter((stroke)=>stroke.type === "SOLID") ?? [];
     if (strokes.length === 0) {
         return undefined;
     }
@@ -20576,6 +20594,7 @@ const componentAvatar = {
                 "36",
                 "42",
                 "48",
+                "56",
                 "64",
                 "80",
                 "96",
@@ -20629,6 +20648,7 @@ const componentAvatarStack = {
                 "36",
                 "42",
                 "48",
+                "56",
                 "64",
                 "80",
                 "96",
@@ -20721,6 +20741,9 @@ const componentBottomSheet = {
     "name": "componentBottomSheet",
     "key": "ffe99a21452831c28bd9375aac0aaf37d7ee6a0d",
     "componentPropertyDefinitions": {
+        "Contents Slot#6752:0": {
+            "type": "SLOT"
+        },
         "Title#19787:3": {
             "type": "TEXT"
         },
@@ -20736,9 +20759,6 @@ const componentBottomSheet = {
         "Show Description#25192:0": {
             "type": "BOOLEAN"
         },
-        "Contents#25320:0": {
-            "type": "INSTANCE_SWAP"
-        },
         "Show Safe Area#25488:8": {
             "type": "BOOLEAN"
         },
@@ -21065,6 +21085,9 @@ const componentChlid = {
     "name": "componentChlid",
     "key": "ef79a21a39ceb4ce24b2fb93c9b430c1980a3e71",
     "componentPropertyDefinitions": {
+        "Slot#6081:0": {
+            "type": "SLOT"
+        },
         "Type": {
             "type": "VARIANT",
             "variantOptions": [
@@ -22752,6 +22775,9 @@ const componentSelectBoxItemHorizontal = {
     "name": "componentSelectBoxItemHorizontal",
     "key": "8174af8ef3654dad996723883f5b84f44f791513",
     "componentPropertyDefinitions": {
+        "Content Slot#6752:6": {
+            "type": "SLOT"
+        },
         "Title#28452:21": {
             "type": "TEXT"
         },
@@ -22799,6 +22825,9 @@ const componentSelectBoxItemVertical = {
     "name": "componentSelectBoxItemVertical",
     "key": "ccc88f0aae500c64e7d43be63c4f1a70baf76bfe",
     "componentPropertyDefinitions": {
+        "Content Slot#6765:0": {
+            "type": "SLOT"
+        },
         "Title#58766:114": {
             "type": "TEXT"
         },
@@ -23182,13 +23211,14 @@ function createInstanceTransformer({ frameTransformer, componentRepository }) {
     const transform = defineElementTransformer((node, traverse)=>{
         const component = componentRepository?.getOne(node.componentSetKey ?? node.componentKey);
         if (component) {
+            const slotChildren = Object.entries(node.componentProperties).filter(([_, prop])=>prop.type === "SLOT").map(([key])=>findOne(node, (child)=>child.type === "SLOT" && child.componentPropertyReferences?.slotContentId === key)).filter((slot)=>slot != null).map((slot)=>traverse(slot)).filter((el)=>el != null);
             return createElement("Instance", {
                 componentName: component.name,
                 ...Object.fromEntries(Object.entries(node.componentProperties).filter(([_, props])=>props.type === "VARIANT" || props.type === "TEXT").map(([key, props])=>[
                         camelCase(key.split("#")[0]),
                         camelCase(props.value)
                     ]))
-            });
+            }, slotChildren);
         }
         return frameTransformer(node, traverse);
     });
@@ -23478,8 +23508,22 @@ function createPipeline(options = {}) {
     const booleanOperationTransformer = createBooleanOperationTransformer({
         propsConverters
     });
+    const slotTransformer = defineElementTransformer((node, traverse)=>{
+        const slotName = node.componentPropertyReferences?.slotContentId?.split("#")[0];
+        const frameResult = frameTransformer({
+            ...node,
+            type: "FRAME"
+        }, traverse);
+        if (!frameResult) return undefined;
+        return createElement("Slot", {
+            ...slotName && {
+                name: slotName
+            }
+        }, frameResult);
+    });
     const codegenTransformer = createCodeGenerator({
         frameTransformer,
+        slotTransformer,
         textTransformer,
         rectangleTransformer,
         instanceTransformer,

package/lib/codegen/targets/react/index.cjs

@@ -436,7 +436,7 @@ function applyInferredLayout(parentNode, result) {
     };
 }
 
-function createCodeGenerator({ frameTransformer, textTransformer, rectangleTransformer, instanceTransformer, vectorTransformer, booleanOperationTransformer, shouldInferAutoLayout, skipComponentKeys }) {
+function createCodeGenerator({ frameTransformer, slotTransformer, textTransformer, rectangleTransformer, instanceTransformer, vectorTransformer, booleanOperationTransformer, shouldInferAutoLayout, skipComponentKeys }) {
     function isSkippedInstance(node) {
         if (!skipComponentKeys || skipComponentKeys.size === 0) return false;
         if (node.type !== "INSTANCE") return false;
@@ -460,6 +460,8 @@ function createCodeGenerator({ frameTransformer, textTransformer, rectangleTrans
             type: "COMPONENT"
         }, (node)=>frameTransformer(node, traverse)) // NOTE: Treat component node as Frame for now
         .with({
+            type: "SLOT"
+        }, (node)=>slotTransformer(node, traverse)).with({
             type: "INSTANCE"
         }, (node)=>instanceTransformer(node, traverse)).with({
             type: "VECTOR"
@@ -565,8 +567,11 @@ function findAll(node, callback) {
 function findAllInstances({ node, key }) {
     return findAll(node, (n)=>n.type === "INSTANCE" && (n.componentKey === key || n.componentSetKey === key));
 }
+function findSlotNode(node, slotPropertyKey) {
+    return findOne(node, (child)=>child.type === "SLOT" && child.componentPropertyReferences?.slotContentId === slotPropertyKey);
+}
 function getFirstSolidFill(node) {
-    const fills = node.fills.filter((fill)=>fill.type === "SOLID" && (!("visible" in fill) || fill.visible === true));
+    const fills = node.fills.filter((fill)=>fill.type === "SOLID");
     if (fills.length === 0) {
         return undefined;
     }
@@ -577,7 +582,7 @@ function getFirstFillVariable(node) {
     return fill?.boundVariables?.color;
 }
 function getFirstStroke(node) {
-    const strokes = node.strokes?.filter((stroke)=>stroke.type === "SOLID" && (!("visible" in stroke) || stroke.visible === true)) ?? [];
+    const strokes = node.strokes?.filter((stroke)=>stroke.type === "SOLID") ?? [];
     if (strokes.length === 0) {
         return undefined;
     }
@@ -7215,6 +7220,7 @@ const componentAvatar = {
                 "36",
                 "42",
                 "48",
+                "56",
                 "64",
                 "80",
                 "96",
@@ -7268,6 +7274,7 @@ const componentAvatarStack = {
                 "36",
                 "42",
                 "48",
+                "56",
                 "64",
                 "80",
                 "96",
@@ -7360,6 +7367,9 @@ const componentBottomSheet = {
     "name": "componentBottomSheet",
     "key": "ffe99a21452831c28bd9375aac0aaf37d7ee6a0d",
     "componentPropertyDefinitions": {
+        "Contents Slot#6752:0": {
+            "type": "SLOT"
+        },
         "Title#19787:3": {
             "type": "TEXT"
         },
@@ -7375,9 +7385,6 @@ const componentBottomSheet = {
         "Show Description#25192:0": {
             "type": "BOOLEAN"
         },
-        "Contents#25320:0": {
-            "type": "INSTANCE_SWAP"
-        },
         "Show Safe Area#25488:8": {
             "type": "BOOLEAN"
         },
@@ -7704,6 +7711,9 @@ const componentChlid = {
     "name": "componentChlid",
     "key": "ef79a21a39ceb4ce24b2fb93c9b430c1980a3e71",
     "componentPropertyDefinitions": {
+        "Slot#6081:0": {
+            "type": "SLOT"
+        },
         "Type": {
             "type": "VARIANT",
             "variantOptions": [
@@ -9391,6 +9401,9 @@ const componentSelectBoxItemHorizontal = {
     "name": "componentSelectBoxItemHorizontal",
     "key": "8174af8ef3654dad996723883f5b84f44f791513",
     "componentPropertyDefinitions": {
+        "Content Slot#6752:6": {
+            "type": "SLOT"
+        },
         "Title#28452:21": {
             "type": "TEXT"
         },
@@ -9438,6 +9451,9 @@ const componentSelectBoxItemVertical = {
     "name": "componentSelectBoxItemVertical",
     "key": "ccc88f0aae500c64e7d43be63c4f1a70baf76bfe",
     "componentPropertyDefinitions": {
+        "Content Slot#6765:0": {
+            "type": "SLOT"
+        },
         "Title#58766:114": {
             "type": "TEXT"
         },
@@ -10068,11 +10084,8 @@ const createBottomSheetHandler = (_ctx)=>defineComponentHandler(componentBottomS
             showHandle: props["Show Handle#49774:6"].value,
             showCloseButton: props["Show Close Button#19787:11"].value
         };
-        const bodyNodes = findAllInstances({
-            node,
-            key: props["Contents#25320:0"].componentKey
-        });
-        const bottomSheetBody = bodyNodes.length === 1 ? createLocalSnippetElement$v("BottomSheetBody", {}, bodyNodes[0].children.map(traverse)) : createLocalSnippetElement$v("BottomSheetBody", {}, createElement("div", undefined, "No content available"));
+        const slotNode = findSlotNode(node, "Contents Slot#6752:0");
+        const bottomSheetBody = slotNode ? createLocalSnippetElement$v("BottomSheetBody", {}, traverse(slotNode)) : createLocalSnippetElement$v("BottomSheetBody", {}, createElement("div", undefined, "No content available"));
         const footerNodes = findAllInstances({
             node,
             // TODO: Bottom Action Bar (WIP) handler의 키. 해당 컴포넌트(템플릿) 핸들러 작성 시 handler.transform()으로 대체
@@ -11343,7 +11356,7 @@ const PREFIX_KEYS = [
     componentSelectBoxItemPrefixCustom.key
 ];
 const { createLocalSnippetElement: createLocalSnippetElement$7 } = createLocalSnippetHelper("select-box");
-const createSelectBoxHorizontalHandler = (ctx)=>defineComponentHandler(componentSelectBoxItemHorizontal.key, (node)=>{
+const createSelectBoxHorizontalHandler = (ctx)=>defineComponentHandler(componentSelectBoxItemHorizontal.key, (node, traverse)=>{
         const { componentProperties: props } = node;
         const { tag, suffix } = tsPattern.match(props.Control.value).with("Checkmark", ()=>({
                 tag: "CheckSelectBox",
@@ -11375,6 +11388,8 @@ const createSelectBoxHorizontalHandler = (ctx)=>defineComponentHandler(component
             // return undefined if not icon
             return undefined;
         })();
+        const contentSlotNode = props["Show Custom Content#56903:0"].value ? findSlotNode(node, "Content Slot#6752:6") : undefined;
+        const footer = contentSlotNode ? traverse(contentSlotNode) : undefined;
         const commonProps = {
             // layout: "horizontal",
             ...prefixIcon && {
@@ -11387,8 +11402,8 @@ const createSelectBoxHorizontalHandler = (ctx)=>defineComponentHandler(component
             ...suffix && {
                 suffix
             },
-            ...props["Show Custom Content#56903:0"].value && {
-                footer: createSeedReactElement("Box", undefined, "Footer Placeholder")
+            ...footer && {
+                footer
             },
             ...tag === "RadioSelectBoxItem" && {
                 value: props["Title#28452:21"].value
@@ -11402,7 +11417,7 @@ const createSelectBoxHorizontalHandler = (ctx)=>defineComponentHandler(component
         };
         return createLocalSnippetElement$7(tag, commonProps, undefined);
     });
-const createSelectBoxVerticalHandler = (ctx)=>defineComponentHandler(componentSelectBoxItemVertical.key, (node)=>{
+const createSelectBoxVerticalHandler = (ctx)=>defineComponentHandler(componentSelectBoxItemVertical.key, (node, traverse)=>{
         const { componentProperties: props } = node;
         const { tag, suffix } = tsPattern.match(props.Control.value).with("Checkmark", ()=>({
                 tag: "CheckSelectBox",
@@ -11434,6 +11449,8 @@ const createSelectBoxVerticalHandler = (ctx)=>defineComponentHandler(componentSe
             // return undefined if not icon
             return undefined;
         })();
+        const contentSlotNode = props["Show Custom Content#58766:119"].value ? findSlotNode(node, "Content Slot#6765:0") : undefined;
+        const footer = contentSlotNode ? traverse(contentSlotNode) : undefined;
         const commonProps = {
             // layout: "vertical",
             ...prefixIcon && {
@@ -11446,8 +11463,8 @@ const createSelectBoxVerticalHandler = (ctx)=>defineComponentHandler(componentSe
             ...suffix && {
                 suffix
             },
-            ...props["Show Custom Content#58766:119"].value && {
-                footer: createSeedReactElement("Box", undefined, "Footer Placeholder")
+            ...footer && {
+                footer
             },
             ...tag === "RadioSelectBoxItem" && {
                 value: props["Title#58766:114"].value
@@ -31945,8 +31962,13 @@ function createPipeline(options = {}) {
     });
     const vectorTransformer = createVectorTransformer();
     const booleanOperationTransformer = createBooleanOperationTransformer();
+    const slotTransformer = defineElementTransformer((node, traverse)=>frameTransformer({
+            ...node,
+            type: "FRAME"
+        }, traverse));
     const codeGenerator = createCodeGenerator({
         frameTransformer,
+        slotTransformer,
         textTransformer,
         rectangleTransformer,
         instanceTransformer,

package/lib/codegen/targets/react/index.d.ts

@@ -69,6 +69,12 @@ interface NormalizedInstanceNode extends NormalizedFrameTrait {
     overrides?: FigmaRestSpec.InstanceNode["overrides"];
     children: NormalizedSceneNode[];
 }
+interface NormalizedSlotNode extends NormalizedFrameTrait {
+    type: FigmaRestSpec.SlotNode["type"];
+    componentPropertyReferences?: FigmaRestSpec.IsLayerTrait["componentPropertyReferences"] & {
+        slotContentId?: string;
+    };
+}
 interface NormalizedVectorNode extends NormalizedDefaultShapeTrait, NormalizedCornerTrait {
     type: FigmaRestSpec.VectorNode["type"];
 }
@@ -80,7 +86,7 @@ interface NormalizedUnhandledNode {
     id: string;
     original: FigmaRestSpec.Node | SceneNode;
 }
-type NormalizedSceneNode = NormalizedFrameNode | NormalizedRectangleNode | NormalizedTextNode | NormalizedComponentNode | NormalizedInstanceNode | NormalizedVectorNode | NormalizedBooleanOperationNode | NormalizedUnhandledNode;
+type NormalizedSceneNode = NormalizedFrameNode | NormalizedRectangleNode | NormalizedTextNode | NormalizedComponentNode | NormalizedInstanceNode | NormalizedSlotNode | NormalizedVectorNode | NormalizedBooleanOperationNode | NormalizedUnhandledNode;
 
 interface ElementNode {
     __IS_JSX_ELEMENT_NODE: true;