@seed-design/figma 1.3.2 → 1.3.4

package/lib/codegen/index.js

@@ -429,11 +429,20 @@ function applyInferredLayout(parentNode, result) {
     };
 }
 
-function createCodeGenerator({ frameTransformer, textTransformer, rectangleTransformer, instanceTransformer, vectorTransformer, booleanOperationTransformer, shouldInferAutoLayout }) {
+function createCodeGenerator({ frameTransformer, textTransformer, rectangleTransformer, instanceTransformer, vectorTransformer, booleanOperationTransformer, shouldInferAutoLayout, skipComponentKeys }) {
+    function isSkippedInstance(node) {
+        if (!skipComponentKeys || skipComponentKeys.size === 0) return false;
+        if (node.type !== "INSTANCE") return false;
+        const { componentKey, componentSetKey } = node;
+        return skipComponentKeys.has(componentKey) || !!componentSetKey && skipComponentKeys.has(componentSetKey);
+    }
     function traverse(node) {
         if ("visible" in node && !node.visible) {
             return;
         }
+        if (isSkippedInstance(node)) {
+            return;
+        }
         const result = match(node).with({
             type: "FRAME"
         }, (node)=>shouldInferAutoLayout ? frameTransformer(applyInferredLayout(node, inferLayout(node)), traverse) : frameTransformer(node, traverse)).with({
@@ -461,6 +470,12 @@ function createCodeGenerator({ frameTransformer, textTransformer, rectangleTrans
         return traverse(node);
     }
     function generateCode(node, options) {
+        if (isSkippedInstance(node)) {
+            return {
+                imports: "",
+                jsx: "// This component is intentionally excluded from codegen"
+            };
+        }
         const jsxTree = generateJsxTree(node);
         if (!jsxTree) {
             return undefined;
@@ -18632,8 +18647,8 @@ const FIGMA_VARIABLES = {
     }
 };
 
-const privateTemplateAttechmentField = {
-    "name": "privateTemplateAttechmentField",
+const privateTemplateAttachmentField = {
+    "name": "privateTemplateAttachmentField",
     "key": "5ba20e248e9cd0292fc285488b2ed3b3145d37b0",
     "componentPropertyDefinitions": {
         "Show Header#40606:8": {
@@ -20638,11 +20653,11 @@ const componentBottomSheet = {
         "Header Layout": {
             "type": "VARIANT",
             "variantOptions": [
+                "Top Left",
+                "Top Center",
                 "Bottom Left",
-                "None",
                 "Bottom Center",
-                "Top Center",
-                "Top Left"
+                "None"
             ]
         }
     }
@@ -21190,7 +21205,7 @@ const componentImageFrame = {
                 "80",
                 "96",
                 "120",
-                "\bFree"
+                "Free"
             ]
         },
         "Rounded": {
@@ -22049,8 +22064,7 @@ const componentSwitch = {
             "type": "VARIANT",
             "variantOptions": [
                 "Label Last",
-                "Label First",
-                "🚫[Switch Mark 사용] Switch Only"
+                "Label First"
             ]
         }
     }
@@ -22863,7 +22877,7 @@ var FIGMA_COMPONENTS = {
   privateComponentUnderlineTextInputInputReadOnly: privateComponentUnderlineTextInputInputReadOnly,
   privateComponentUnderlineTextInputPrefix: privateComponentUnderlineTextInputPrefix,
   privateComponentUnderlineTextInputSuffix: privateComponentUnderlineTextInputSuffix,
-  privateTemplateAttechmentField: privateTemplateAttechmentField,
+  privateTemplateAttachmentField: privateTemplateAttachmentField,
   privateTemplateChipGroup: privateTemplateChipGroup,
   privateTemplateChipGroupField: privateTemplateChipGroupField,
   privateTemplatePhoneNumberField: privateTemplatePhoneNumberField,
@@ -23040,6 +23054,12 @@ const variableService = createVariableService({
     }
 });
 
+const SKIP_COMPONENT_KEYS = new Set([
+    componentOsBottomIndicatorFigmaOnly.key,
+    componentOsKeyboardFigmaOnly.key,
+    componentOsStatusBarFigmaOnly.key
+]);
+
 function createFrameTransformer({ propsConverters }) {
     return defineElementTransformer((node, traverse)=>{
         const children = node.children;
@@ -23362,7 +23382,8 @@ function createPipeline(options = {}) {
         instanceTransformer,
         vectorTransformer,
         booleanOperationTransformer,
-        shouldInferAutoLayout
+        shouldInferAutoLayout,
+        skipComponentKeys: SKIP_COMPONENT_KEYS
     });
     return codegenTransformer;
 }

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

@@ -436,11 +436,20 @@ function applyInferredLayout(parentNode, result) {
     };
 }
 
-function createCodeGenerator({ frameTransformer, textTransformer, rectangleTransformer, instanceTransformer, vectorTransformer, booleanOperationTransformer, shouldInferAutoLayout }) {
+function createCodeGenerator({ frameTransformer, textTransformer, rectangleTransformer, instanceTransformer, vectorTransformer, booleanOperationTransformer, shouldInferAutoLayout, skipComponentKeys }) {
+    function isSkippedInstance(node) {
+        if (!skipComponentKeys || skipComponentKeys.size === 0) return false;
+        if (node.type !== "INSTANCE") return false;
+        const { componentKey, componentSetKey } = node;
+        return skipComponentKeys.has(componentKey) || !!componentSetKey && skipComponentKeys.has(componentSetKey);
+    }
     function traverse(node) {
         if ("visible" in node && !node.visible) {
             return;
         }
+        if (isSkippedInstance(node)) {
+            return;
+        }
         const result = tsPattern.match(node).with({
             type: "FRAME"
         }, (node)=>shouldInferAutoLayout ? frameTransformer(applyInferredLayout(node, inferLayout(node)), traverse) : frameTransformer(node, traverse)).with({
@@ -468,6 +477,12 @@ function createCodeGenerator({ frameTransformer, textTransformer, rectangleTrans
         return traverse(node);
     }
     function generateCode(node, options) {
+        if (isSkippedInstance(node)) {
+            return {
+                imports: "",
+                jsx: "// This component is intentionally excluded from codegen"
+            };
+        }
         const jsxTree = generateJsxTree(node);
         if (!jsxTree) {
             return undefined;
@@ -5296,8 +5311,8 @@ var archivedHandlers = {
   createToggleButtonHandler: createToggleButtonHandler$1
 };
 
-const privateTemplateAttechmentField = {
-    "name": "privateTemplateAttechmentField",
+const privateTemplateAttachmentField = {
+    "name": "privateTemplateAttachmentField",
     "key": "5ba20e248e9cd0292fc285488b2ed3b3145d37b0",
     "componentPropertyDefinitions": {
         "Show Header#40606:8": {
@@ -7302,11 +7317,11 @@ const componentBottomSheet = {
         "Header Layout": {
             "type": "VARIANT",
             "variantOptions": [
+                "Top Left",
+                "Top Center",
                 "Bottom Left",
-                "None",
                 "Bottom Center",
-                "Top Center",
-                "Top Left"
+                "None"
             ]
         }
     }
@@ -7854,7 +7869,7 @@ const componentImageFrame = {
                 "80",
                 "96",
                 "120",
-                "\bFree"
+                "Free"
             ]
         },
         "Rounded": {
@@ -8713,8 +8728,7 @@ const componentSwitch = {
             "type": "VARIANT",
             "variantOptions": [
                 "Label Last",
-                "Label First",
-                "🚫[Switch Mark 사용] Switch Only"
+                "Label First"
             ]
         }
     }
@@ -9527,7 +9541,7 @@ var FIGMA_COMPONENTS = {
   privateComponentUnderlineTextInputInputReadOnly: privateComponentUnderlineTextInputInputReadOnly,
   privateComponentUnderlineTextInputPrefix: privateComponentUnderlineTextInputPrefix,
   privateComponentUnderlineTextInputSuffix: privateComponentUnderlineTextInputSuffix,
-  privateTemplateAttechmentField: privateTemplateAttechmentField,
+  privateTemplateAttachmentField: privateTemplateAttachmentField,
   privateTemplateChipGroup: privateTemplateChipGroup,
   privateTemplateChipGroupField: privateTemplateChipGroupField,
   privateTemplatePhoneNumberField: privateTemplatePhoneNumberField,
@@ -9551,7 +9565,7 @@ var FIGMA_COMPONENTS = {
 };
 
 const { createLocalSnippetElement: createLocalSnippetElement$A } = createLocalSnippetHelper("action-button");
-const createActionButtonHandler = (ctx)=>defineComponentHandler(componentActionButton.key, ({ componentProperties: props })=>{
+const createActionButtonHandler = (ctx)=>defineComponentHandler(componentActionButton.key, ({ componentProperties: props, layoutGrow })=>{
         const states = props.State.value.split("-");
         const { layout, children } = tsPattern.match(props.Layout.value).with("Icon Only", ()=>({
                 layout: "iconOnly",
@@ -9589,7 +9603,10 @@ const createActionButtonHandler = (ctx)=>defineComponentHandler(componentActionB
             },
             size: handleSizeProp(props.Size.value),
             variant: changeCase.camelCase(props.Variant.value),
-            layout
+            layout,
+            ...layoutGrow === 1 && {
+                flexGrow: true
+            }
         };
         return createLocalSnippetElement$A("ActionButton", commonProps, children);
     });
@@ -9646,6 +9663,9 @@ const createActionButtonGhostHandler = (ctx)=>defineComponentHandler(componentAc
             ...props.Bleed.value === "true" && {
                 bleedX: "asPadding",
                 bleedY: "asPadding"
+            },
+            ...node.layoutGrow === 1 && {
+                flexGrow: true
             }
         };
         return createLocalSnippetElement$A("ActionButton", commonProps, children);
@@ -9734,6 +9754,13 @@ const privateComponentTopNavigationLeftIconButton = {
     "key": "c3e708bab11d8ea90a909b4539b6ba6b2a4e7b9c"};
 const componentChipSuffixIcon = {
     "key": "2f79e3c5a78315c854d7bd4499d142cfcc94548f"};
+const componentImageFrameBadge = {
+    "key": "6a1feb47139040d6f7522528f7c91bf4fe7bcc84"
+};
+const componentImageFrameIcon = {
+    "key": "4f495448eeda5d10f41e6195e16b4eff49aaec17"};
+const componentImageFrameOverlayIndicator = {
+    "key": "e3e3596f8c535facae4d23c21bc1d62dd721fe23"};
 const componentListItemPrefixAvatar = {
     "key": "27e33754113178be97e07195528c4ea020b3d3b7"
 };
@@ -9870,6 +9897,19 @@ const createAppBarHandler = (ctx)=>{
         });
     });
 };
+const createAppBarPresetHandler = (ctx)=>{
+    const appBarHandler = createAppBarHandler(ctx);
+    return defineComponentHandler(templateTopNavigationPreset.key, (node, traverse)=>{
+        const [appBarNode] = findAllInstances({
+            node,
+            key: componentTopNavigation.key
+        });
+        if (!appBarNode) {
+            return createLocalSnippetElement$y("AppBar");
+        }
+        return appBarHandler.transform(appBarNode, traverse);
+    });
+};
 
 // hardcoded since this lives in a different figma file
 const IDENTITY_PLACEHOLDER_KEY = "b3563b6f16ba4cfe4240c9b33eef7edad4c304eb";
@@ -10478,6 +10518,99 @@ const createHelpBubbleHandler = (_ctx)=>defineComponentHandler(componentHelpBubb
         });
     });
 
+const CORNER_CONFIGS = [
+    {
+        showKey: "ㄴ Left Top#58686:165",
+        placement: "top-start"
+    },
+    {
+        showKey: "ㄴ Right Top#58686:198",
+        placement: "top-end"
+    },
+    {
+        showKey: "ㄴ Left Bottom#58686:231",
+        placement: "bottom-start"
+    },
+    {
+        showKey: "ㄴ Right Bottom#58686:264",
+        placement: "bottom-end"
+    }
+];
+function formatRatio(ratioStr) {
+    const [w, h] = ratioStr.split(":");
+    return `${w} / ${h}`;
+}
+const createImageFrameBadgeHandler = (ctx)=>{
+    const badgeHandler = createBadgeHandler();
+    return defineComponentHandler(componentImageFrameBadge.key, (node, traverse)=>{
+        const [badge] = findAllInstances({
+            node,
+            key: badgeHandler.key
+        });
+        if (!badge) throw new Error("Badge component not found within ImageFrameBadge");
+        return {
+            ...badgeHandler.transform(badge, traverse),
+            tag: "ImageFrameBadge"
+        };
+    });
+};
+const createImageFrameReactionButtonHandler = (_ctx)=>{
+    return defineComponentHandler(componentImageFrameReactionButton.key, ({ componentProperties: props })=>{
+        return createSeedReactElement("ImageFrameReactionButton", {
+            ...props.Selected.value === "True" && {
+                defaultPressed: true
+            }
+        });
+    });
+};
+const createImageFrameOverlayIndicatorHandler = (_ctx)=>{
+    return defineComponentHandler(componentImageFrameOverlayIndicator.key, ({ componentProperties: props })=>{
+        return createSeedReactElement("ImageFrameIndicator", undefined, props["Text#58708:0"].value);
+    });
+};
+const createImageFrameIconHandler = (ctx)=>{
+    return defineComponentHandler(componentImageFrameIcon.key, ({ componentProperties: props })=>{
+        return createSeedReactElement("ImageFrameIcon", {
+            svg: ctx.iconHandler.transform(props["Icon#58686:297"])
+        });
+    });
+};
+const createImageFrameHandler = (ctx)=>{
+    return defineComponentHandler(componentImageFrame.key, (node, traverse)=>{
+        const props = node.componentProperties;
+        const floaters = [];
+        for (const { showKey, placement } of CORNER_CONFIGS){
+            if (!props[showKey].value) continue;
+            const slotName = showKey.split("#")[0];
+            const slotNode = findOne(node, (n)=>"name" in n && n.name === slotName);
+            if (!slotNode) continue;
+            const child = traverse(slotNode);
+            if (!child) continue;
+            floaters.push(createSeedReactElement("ImageFrameFloater", {
+                placement
+            }, child));
+        }
+        const commonProps = {
+            src: `https://placehold.co/${node.absoluteBoundingBox?.width ?? 100}x${node.absoluteBoundingBox?.height ?? 100}`,
+            alt: "",
+            ratio: formatRatio(props.Ratio.value),
+            ...props.Rounded.value === "True" && {
+                borderRadius: ctx.valueResolver.getFormattedValue.topLeftRadius(node)
+            },
+            ...node.layoutGrow === 1 ? {
+                flexGrow: true
+            } : node.layoutAlign === "STRETCH" ? {
+                alignSelf: "stretch"
+            } : {
+                width: ctx.valueResolver.getFormattedValue.width(node)
+            }
+        };
+        return createSeedReactElement("ImageFrame", commonProps, props["Show Overlay#58686:33"].value && floaters.length > 0 ? floaters : undefined, {
+            comment: "alt 텍스트를 제공해야 합니다."
+        });
+    });
+};
+
 const { createLocalSnippetElement: createLocalSnippetElement$l } = createLocalSnippetHelper("select-box");
 const createLegacySelectBoxHandler = (_ctx)=>defineComponentHandler(componentDeprecatedSelectBox.key, ({ componentProperties: props })=>{
         const tag = tsPattern.match(props.Control.value).with("Checkbox", ()=>"CheckSelectBox").with("Radio", ()=>"RadioSelectBoxItem").exhaustive();
@@ -11459,9 +11592,6 @@ const createSwitchHandler = (_ctx)=>defineComponentHandler(componentSwitch.key,
             tone,
             size: props.Size.value
         };
-        if (props["Layout(Figma Only)"].value === "🚫[Switch Mark 사용] Switch Only") {
-            return createLocalSnippetElement$4("Switchmark", commonProps);
-        }
         return createLocalSnippetElement$4("Switch", {
             ...commonProps,
             label: props["Label#36578:0"].value,
@@ -11939,6 +12069,7 @@ var currentHandlers = {
   createAddressFieldHandler: createAddressFieldHandler,
   createAlertDialogHandler: createAlertDialogHandler,
   createAppBarHandler: createAppBarHandler,
+  createAppBarPresetHandler: createAppBarPresetHandler,
   createAvatarHandler: createAvatarHandler,
   createAvatarStackHandler: createAvatarStackHandler,
   createBadgeHandler: createBadgeHandler,
@@ -11955,6 +12086,11 @@ var currentHandlers = {
   createFloatingActionButtonHandler: createFloatingActionButtonHandler,
   createHelpBubbleHandler: createHelpBubbleHandler,
   createIdentityPlaceholderHandler: createIdentityPlaceholderHandler,
+  createImageFrameBadgeHandler: createImageFrameBadgeHandler,
+  createImageFrameHandler: createImageFrameHandler,
+  createImageFrameIconHandler: createImageFrameIconHandler,
+  createImageFrameOverlayIndicatorHandler: createImageFrameOverlayIndicatorHandler,
+  createImageFrameReactionButtonHandler: createImageFrameReactionButtonHandler,
   createLegacyMultilineTextFieldHandler: createLegacyMultilineTextFieldHandler,
   createLegacySelectBoxGroupHandler: createLegacySelectBoxGroupHandler,
   createLegacyTextFieldHandler: createLegacyTextFieldHandler,
@@ -31501,6 +31637,12 @@ const iconService = createIconService({
     iconRepository
 });
 
+const SKIP_COMPONENT_KEYS = new Set([
+    componentOsBottomIndicatorFigmaOnly.key,
+    componentOsKeyboardFigmaOnly.key,
+    componentOsStatusBarFigmaOnly.key
+]);
+
 const defaultIconNameFormatter = ({ name, weight })=>changeCase.pascalCase(`${name}${weight ? weight : ""}`);
 function createIconHandler({ iconService, iconNameFormatter = defaultIconNameFormatter }) {
     function isIconInstance(node) {
@@ -31667,7 +31809,8 @@ function createPipeline(options = {}) {
         instanceTransformer,
         vectorTransformer,
         booleanOperationTransformer,
-        shouldInferAutoLayout
+        shouldInferAutoLayout,
+        skipComponentKeys: SKIP_COMPONENT_KEYS
     });
     return codeGenerator;
 }