@seed-design/figma 1.3.2 → 1.3.4

package/lib/index.cjs

@@ -22351,8 +22351,8 @@ const FIGMA_VARIABLES = {
     }
 };
 
-const privateTemplateAttechmentField = {
-    "name": "privateTemplateAttechmentField",
+const privateTemplateAttachmentField = {
+    "name": "privateTemplateAttachmentField",
     "key": "5ba20e248e9cd0292fc285488b2ed3b3145d37b0",
     "componentPropertyDefinitions": {
         "Show Header#40606:8": {
@@ -24357,11 +24357,11 @@ const componentBottomSheet = {
         "Header Layout": {
             "type": "VARIANT",
             "variantOptions": [
+                "Top Left",
+                "Top Center",
                 "Bottom Left",
-                "None",
                 "Bottom Center",
-                "Top Center",
-                "Top Left"
+                "None"
             ]
         }
     }
@@ -24909,7 +24909,7 @@ const componentImageFrame = {
                 "80",
                 "96",
                 "120",
-                "\bFree"
+                "Free"
             ]
         },
         "Rounded": {
@@ -25768,8 +25768,7 @@ const componentSwitch = {
             "type": "VARIANT",
             "variantOptions": [
                 "Label Last",
-                "Label First",
-                "🚫[Switch Mark 사용] Switch Only"
+                "Label First"
             ]
         }
     }
@@ -26582,7 +26581,7 @@ var FIGMA_COMPONENTS = {
   privateComponentUnderlineTextInputInputReadOnly: privateComponentUnderlineTextInputInputReadOnly,
   privateComponentUnderlineTextInputPrefix: privateComponentUnderlineTextInputPrefix,
   privateComponentUnderlineTextInputSuffix: privateComponentUnderlineTextInputSuffix,
-  privateTemplateAttechmentField: privateTemplateAttechmentField,
+  privateTemplateAttachmentField: privateTemplateAttachmentField,
   privateTemplateChipGroup: privateTemplateChipGroup,
   privateTemplateChipGroupField: privateTemplateChipGroupField,
   privateTemplatePhoneNumberField: privateTemplatePhoneNumberField,

package/lib/index.js

@@ -22351,8 +22351,8 @@ const FIGMA_VARIABLES = {
     }
 };
 
-const privateTemplateAttechmentField = {
-    "name": "privateTemplateAttechmentField",
+const privateTemplateAttachmentField = {
+    "name": "privateTemplateAttachmentField",
     "key": "5ba20e248e9cd0292fc285488b2ed3b3145d37b0",
     "componentPropertyDefinitions": {
         "Show Header#40606:8": {
@@ -24357,11 +24357,11 @@ const componentBottomSheet = {
         "Header Layout": {
             "type": "VARIANT",
             "variantOptions": [
+                "Top Left",
+                "Top Center",
                 "Bottom Left",
-                "None",
                 "Bottom Center",
-                "Top Center",
-                "Top Left"
+                "None"
             ]
         }
     }
@@ -24909,7 +24909,7 @@ const componentImageFrame = {
                 "80",
                 "96",
                 "120",
-                "\bFree"
+                "Free"
             ]
         },
         "Rounded": {
@@ -25768,8 +25768,7 @@ const componentSwitch = {
             "type": "VARIANT",
             "variantOptions": [
                 "Label Last",
-                "Label First",
-                "🚫[Switch Mark 사용] Switch Only"
+                "Label First"
             ]
         }
     }
@@ -26582,7 +26581,7 @@ var FIGMA_COMPONENTS = {
   privateComponentUnderlineTextInputInputReadOnly: privateComponentUnderlineTextInputInputReadOnly,
   privateComponentUnderlineTextInputPrefix: privateComponentUnderlineTextInputPrefix,
   privateComponentUnderlineTextInputSuffix: privateComponentUnderlineTextInputSuffix,
-  privateTemplateAttechmentField: privateTemplateAttechmentField,
+  privateTemplateAttachmentField: privateTemplateAttachmentField,
   privateTemplateChipGroup: privateTemplateChipGroup,
   privateTemplateChipGroupField: privateTemplateChipGroupField,
   privateTemplatePhoneNumberField: privateTemplatePhoneNumberField,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/figma",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -39,13 +39,13 @@
     "sync-entities": "find src/entities/data/__generated__ -mindepth 1 -maxdepth 1 ! -name 'archive' -exec rm -rf {} + 2>/dev/null; bun figma-extractor src/entities/data/__generated__"
   },
   "dependencies": {
-    "@seed-design/css": "1.2.1",
+    "@seed-design/css": "1.2.3",
     "change-case": "^5.4.4",
     "ts-pattern": "^5.7.0"
   },
   "devDependencies": {
     "@figma/plugin-typings": "^1.110.0",
-    "@figma/rest-api-spec": "^0.35.0",
+    "@figma/rest-api-spec": "^0.36.0",
     "@karrotmarket/icon-data": "^1.17.0",
     "@seed-design/figma-extractor": "^1.1.0",
     "typescript": "^5.9.2"

package/src/codegen/component-properties.ts

@@ -110,6 +110,22 @@ export type HelpBubbleProperties = InferComponentDefinition<
   typeof sets.componentHelpBubble.componentPropertyDefinitions
 >;
 
+export type ImageFrameProperties = InferComponentDefinition<
+  typeof sets.componentImageFrame.componentPropertyDefinitions
+>;
+
+export type ImageFrameIconProperties = InferComponentDefinition<
+  typeof components.componentImageFrameIcon.componentPropertyDefinitions
+>;
+
+export type ImageFrameOverlayIndicatorProperties = InferComponentDefinition<
+  typeof components.componentImageFrameOverlayIndicator.componentPropertyDefinitions
+>;
+
+export type ImageFrameReactionButtonProperties = InferComponentDefinition<
+  typeof sets.componentImageFrameReactionButton.componentPropertyDefinitions
+>;
+
 export type PageBannerProperties = InferComponentDefinition<
   typeof sets.componentPageBanner.componentPropertyDefinitions
 >;

package/src/codegen/core/codegen.ts

@@ -23,6 +23,7 @@ export interface CodeGeneratorDeps {
   vectorTransformer: ElementTransformer<NormalizedVectorNode>;
   booleanOperationTransformer: ElementTransformer<NormalizedBooleanOperationNode>;
   shouldInferAutoLayout: boolean;
+  skipComponentKeys?: Set<string>;
 }
 
 export interface CodeGenerator {
@@ -41,12 +42,29 @@ export function createCodeGenerator({
   vectorTransformer,
   booleanOperationTransformer,
   shouldInferAutoLayout,
+  skipComponentKeys,
 }: CodeGeneratorDeps): CodeGenerator {
+  function isSkippedInstance(node: NormalizedSceneNode): boolean {
+    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: NormalizedSceneNode): ElementNode | undefined {
     if ("visible" in node && !node.visible) {
       return;
     }
 
+    if (isSkippedInstance(node)) {
+      return;
+    }
+
     const result = match(node)
       .with({ type: "FRAME" }, (node) =>
         shouldInferAutoLayout
@@ -74,6 +92,10 @@ export function createCodeGenerator({
   }
 
   function generateCode(node: NormalizedSceneNode, options: { shouldPrintSource: boolean }) {
+    if (isSkippedInstance(node)) {
+      return { imports: "", jsx: "// This component is intentionally excluded from codegen" };
+     }
+
     const jsxTree = generateJsxTree(node);
 
     if (!jsxTree) {

package/src/codegen/skip-components.ts

@@ -0,0 +1,7 @@
+import * as metadata from "../entities/data/__generated__/component-sets";
+
+export const SKIP_COMPONENT_KEYS: Set<string> = new Set([
+  metadata.componentOsBottomIndicatorFigmaOnly.key,
+  metadata.componentOsKeyboardFigmaOnly.key,
+  metadata.componentOsStatusBarFigmaOnly.key,
+]);

package/src/codegen/targets/figma/pipeline.ts

@@ -1,6 +1,7 @@
 import { createCodeGenerator, createValueResolver } from "@/codegen/core";
 import type { CodeGenerator } from "@/codegen/core/codegen";
 import { styleService, variableService } from "@/codegen/default-services";
+import { SKIP_COMPONENT_KEYS } from "@/codegen/skip-components";
 import { componentRepository } from "@/entities";
 import { createFrameTransformer } from "./frame";
 import { createInstanceTransformer } from "./instance";
@@ -98,6 +99,7 @@ export function createPipeline(options: CreatePipelineConfig = {}): CodeGenerato
     vectorTransformer,
     booleanOperationTransformer,
     shouldInferAutoLayout,
+    skipComponentKeys: SKIP_COMPONENT_KEYS,
   });
 
   return codegenTransformer;

package/src/codegen/targets/react/component/handlers/action-button.ts

@@ -17,7 +17,7 @@ const { createLocalSnippetElement } = createLocalSnippetHelper("action-button");
 export const createActionButtonHandler = (ctx: ComponentHandlerDeps) =>
   defineComponentHandler<ActionButtonProperties>(
     metadata.componentActionButton.key,
-    ({ componentProperties: props }) => {
+    ({ componentProperties: props, layoutGrow }) => {
       const states = props.State.value.split("-");
 
       const { layout, children } = match(props.Layout.value)
@@ -63,6 +63,7 @@ export const createActionButtonHandler = (ctx: ComponentHandlerDeps) =>
         size: handleSizeProp(props.Size.value),
         variant: camelCase(props.Variant.value),
         layout,
+        ...(layoutGrow === 1 && { flexGrow: true }),
       };
 
       return createLocalSnippetElement("ActionButton", commonProps, children);
@@ -140,6 +141,7 @@ export const createActionButtonGhostHandler = (ctx: ComponentHandlerDeps) =>
           bleedX: "asPadding",
           bleedY: "asPadding",
         }),
+        ...(node.layoutGrow === 1 && { flexGrow: true }),
       };
 
       return createLocalSnippetElement("ActionButton", commonProps, children);

package/src/codegen/targets/react/component/handlers/app-bar.ts

@@ -150,3 +150,20 @@ export const createAppBarHandler = (ctx: ComponentHandlerDeps) => {
     },
   );
 };
+
+export const createAppBarPresetHandler = (ctx: ComponentHandlerDeps) => {
+  const appBarHandler = createAppBarHandler(ctx);
+
+  return defineComponentHandler(metadata.templateTopNavigationPreset.key, (node, traverse) => {
+    const [appBarNode] = findAllInstances<AppBarProperties>({
+      node,
+      key: metadata.componentTopNavigation.key,
+    });
+
+    if (!appBarNode) {
+      return createLocalSnippetElement("AppBar");
+    }
+
+    return appBarHandler.transform(appBarNode, traverse);
+  });
+};

package/src/codegen/targets/react/component/handlers/image-frame.ts

@@ -0,0 +1,134 @@
+import type {
+  BadgeProperties,
+  ImageFrameIconProperties,
+  ImageFrameOverlayIndicatorProperties,
+  ImageFrameProperties,
+  ImageFrameReactionButtonProperties,
+} from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import * as components from "@/entities/data/__generated__/components";
+import { findAllInstances, findOne } from "@/utils/figma-node";
+import { createSeedReactElement } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import { createBadgeHandler } from "@/codegen/targets/react/component/handlers/badge";
+
+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",
+  },
+] as const satisfies ReadonlyArray<{
+  showKey: keyof ImageFrameProperties;
+  placement: string;
+}>;
+
+function formatRatio(ratioStr: `${number}:${number}`): string {
+  const [w, h] = ratioStr.split(":");
+
+  return `${w} / ${h}`;
+}
+
+export const createImageFrameBadgeHandler = (ctx: ComponentHandlerDeps) => {
+  const badgeHandler = createBadgeHandler(ctx);
+
+  return defineComponentHandler<{}>(components.componentImageFrameBadge.key, (node, traverse) => {
+    const [badge] = findAllInstances<BadgeProperties>({
+      node,
+      key: badgeHandler.key,
+    });
+
+    if (!badge) throw new Error("Badge component not found within ImageFrameBadge");
+
+    return { ...badgeHandler.transform(badge, traverse), tag: "ImageFrameBadge" };
+  });
+};
+
+export const createImageFrameReactionButtonHandler = (_ctx: ComponentHandlerDeps) => {
+  return defineComponentHandler<ImageFrameReactionButtonProperties>(
+    metadata.componentImageFrameReactionButton.key,
+    ({ componentProperties: props }) => {
+      return createSeedReactElement("ImageFrameReactionButton", {
+        ...(props.Selected.value === "True" && { defaultPressed: true }),
+      });
+    },
+  );
+};
+
+export const createImageFrameOverlayIndicatorHandler = (_ctx: ComponentHandlerDeps) => {
+  return defineComponentHandler<ImageFrameOverlayIndicatorProperties>(
+    components.componentImageFrameOverlayIndicator.key,
+    ({ componentProperties: props }) => {
+      return createSeedReactElement("ImageFrameIndicator", undefined, props["Text#58708:0"].value);
+    },
+  );
+};
+
+export const createImageFrameIconHandler = (ctx: ComponentHandlerDeps) => {
+  return defineComponentHandler<ImageFrameIconProperties>(
+    components.componentImageFrameIcon.key,
+    ({ componentProperties: props }) => {
+      return createSeedReactElement("ImageFrameIcon", {
+        svg: ctx.iconHandler.transform(props["Icon#58686:297"]),
+      });
+    },
+  );
+};
+
+export const createImageFrameHandler = (ctx: ComponentHandlerDeps) => {
+  return defineComponentHandler<ImageFrameProperties>(
+    metadata.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 텍스트를 제공해야 합니다." },
+      );
+    },
+  );
+};

package/src/codegen/targets/react/component/handlers/index.ts

@@ -15,6 +15,7 @@ export * from "./field-button";
 export * from "./floating-action-button";
 export * from "./help-bubble";
 export * from "./identity-placeholder";
+export * from "./image-frame";
 export * from "./legacy-select-box";
 export * from "./legacy-text-field";
 export * from "./list-header";

package/src/codegen/targets/react/component/handlers/switch.ts

@@ -21,10 +21,6 @@ export const createSwitchHandler = (_ctx: ComponentHandlerDeps) =>
         size: props.Size.value,
       };
 
-      if (props["Layout(Figma Only)"].value === "🚫[Switch Mark 사용] Switch Only") {
-        return createLocalSnippetElement("Switchmark", commonProps);
-      }
-
       return createLocalSnippetElement("Switch", {
         ...commonProps,
         label: props["Label#36578:0"].value,

package/src/codegen/targets/react/pipeline.ts

@@ -1,5 +1,6 @@
 import { createCodeGenerator, createValueResolver } from "@/codegen/core";
 import { iconService, styleService, variableService } from "@/codegen/default-services";
+import { SKIP_COMPONENT_KEYS } from "@/codegen/skip-components";
 import {
   type UnboundComponentHandler,
   bindComponentHandler,
@@ -125,6 +126,7 @@ export function createPipeline(options: CreatePipelineConfig = {}) {
     vectorTransformer,
     booleanOperationTransformer,
     shouldInferAutoLayout,
+    skipComponentKeys: SKIP_COMPONENT_KEYS,
   });
 
   return codeGenerator;

package/src/entities/data/__generated__/component-sets/index.d.ts

@@ -1,5 +1,5 @@
-export declare const privateTemplateAttechmentField: {
-  "name": "privateTemplateAttechmentField",
+export declare const privateTemplateAttachmentField: {
+  "name": "privateTemplateAttachmentField",
   "key": "5ba20e248e9cd0292fc285488b2ed3b3145d37b0",
   "componentPropertyDefinitions": {
     "Show Header#40606:8": {
@@ -2079,11 +2079,11 @@ export declare const componentBottomSheet: {
     "Header Layout": {
       "type": "VARIANT",
       "variantOptions": [
+        "Top Left",
+        "Top Center",
         "Bottom Left",
-        "None",
         "Bottom Center",
-        "Top Center",
-        "Top Left"
+        "None"
       ]
     }
   }
@@ -2648,7 +2648,7 @@ export declare const componentImageFrame: {
         "80",
         "96",
         "120",
-        "\bFree"
+        "Free"
       ]
     },
     "Rounded": {
@@ -3541,8 +3541,7 @@ export declare const componentSwitch: {
       "type": "VARIANT",
       "variantOptions": [
         "Label Last",
-        "Label First",
-        "🚫[Switch Mark 사용] Switch Only"
+        "Label First"
       ]
     }
   }
@@ -4245,4 +4244,4 @@ export declare const componentSelectBoxItemVertical: {
       ]
     }
   }
-};
+};

package/src/entities/data/__generated__/component-sets/index.mjs

@@ -1,5 +1,5 @@
-export const privateTemplateAttechmentField = {
-  "name": "privateTemplateAttechmentField",
+export const privateTemplateAttachmentField = {
+  "name": "privateTemplateAttachmentField",
   "key": "5ba20e248e9cd0292fc285488b2ed3b3145d37b0",
   "componentPropertyDefinitions": {
     "Show Header#40606:8": {
@@ -2079,11 +2079,11 @@ export const componentBottomSheet = {
     "Header Layout": {
       "type": "VARIANT",
       "variantOptions": [
+        "Top Left",
+        "Top Center",
         "Bottom Left",
-        "None",
         "Bottom Center",
-        "Top Center",
-        "Top Left"
+        "None"
       ]
     }
   }
@@ -2648,7 +2648,7 @@ export const componentImageFrame = {
         "80",
         "96",
         "120",
-        "\bFree"
+        "Free"
       ]
     },
     "Rounded": {
@@ -3541,8 +3541,7 @@ export const componentSwitch = {
       "type": "VARIANT",
       "variantOptions": [
         "Label Last",
-        "Label First",
-        "🚫[Switch Mark 사용] Switch Only"
+        "Label First"
       ]
     }
   }

package/src/entities/data/__generated__/components/index.d.ts

@@ -84,11 +84,6 @@ export declare const templateInformationList: {
   "key": "ea1ff4070a5ef4ada5974dc7030e8f9a1b759cdb"
 };
 
-export declare const componentFigmaOnly: {
-  "name": "componentFigmaOnly",
-  "key": "a790da2ff1fb6f761abf202034920c1504b8f8f1"
-};
-
 export declare const componentBottomSheetContentsAgreement: {
   "name": "componentBottomSheetContentsAgreement",
   "key": "9d530235407646750ce8298b2815093dffcbbd83"
@@ -375,4 +370,9 @@ export declare const componentSelectBoxItemSuffixCheck: {
 export declare const componentSelectBoxItemSuffixRadiomark: {
   "name": "componentSelectBoxItemSuffixRadiomark",
   "key": "cfb712b12fe2805b5594f8c143147c8aa3de490e"
+};
+
+export declare const componentFigmaOnly: {
+  "name": "componentFigmaOnly",
+  "key": "a790da2ff1fb6f761abf202034920c1504b8f8f1"
 };

package/src/entities/data/__generated__/components/index.mjs

@@ -84,11 +84,6 @@ export const templateInformationList = {
   "key": "ea1ff4070a5ef4ada5974dc7030e8f9a1b759cdb"
 };
 
-export const componentFigmaOnly = {
-  "name": "componentFigmaOnly",
-  "key": "a790da2ff1fb6f761abf202034920c1504b8f8f1"
-};
-
 export const componentBottomSheetContentsAgreement = {
   "name": "componentBottomSheetContentsAgreement",
   "key": "9d530235407646750ce8298b2815093dffcbbd83"
@@ -375,4 +370,9 @@ export const componentSelectBoxItemSuffixCheck = {
 export const componentSelectBoxItemSuffixRadiomark = {
   "name": "componentSelectBoxItemSuffixRadiomark",
   "key": "cfb712b12fe2805b5594f8c143147c8aa3de490e"
+};
+
+export const componentFigmaOnly = {
+  "name": "componentFigmaOnly",
+  "key": "a790da2ff1fb6f761abf202034920c1504b8f8f1"
 };