@seed-design/figma 0.1.13 → 0.1.14

package/lib/index.js

@@ -10638,7 +10638,8 @@ const metadata$D = {
                 "48",
                 "64",
                 "80",
-                "96"
+                "96",
+                "108"
             ]
         },
         "Badge": {
@@ -10667,7 +10668,8 @@ const metadata$C = {
                 "48",
                 "64",
                 "80",
-                "96"
+                "96",
+                "108"
             ]
         }
     }
@@ -10694,15 +10696,16 @@ const metadata$B = {
                 "Brand",
                 "Informative",
                 "Positive",
-                "Critical"
+                "Critical",
+                "Warning"
             ]
         },
         "Variant": {
             "type": "VARIANT",
             "variantOptions": [
-                "Solid",
                 "Weak",
-                "Outline"
+                "Outline",
+                "Solid"
             ]
         }
     }
@@ -11093,12 +11096,22 @@ const metadata$r = {
     "name": "🟢 Divider",
     "key": "848e953725f757ea1a79e1fecc0b608a035032d3",
     "componentPropertyDefinitions": {
+        "Inset (Figma-Only)#36435:0": {
+            "type": "BOOLEAN"
+        },
         "Tone": {
             "type": "VARIANT",
             "variantOptions": [
                 "Neutral",
                 "Neutral Muted"
             ]
+        },
+        "Orientation": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Vertical",
+                "Horizontal"
+            ]
         }
     }
 };
@@ -11151,47 +11164,6 @@ const metadata$p = {
 };
 
 const metadata$o = {
-    "name": "🟢 Inline Banner",
-    "key": "ce587d0f21754af05240cb32a4880227cb0ea1e1",
-    "componentPropertyDefinitions": {
-        "Link Label#1547:81": {
-            "type": "TEXT"
-        },
-        "Show Icon#11840:27": {
-            "type": "BOOLEAN"
-        },
-        "Interaction": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Default",
-                "Link",
-                "Actionable",
-                "Dismissible"
-            ]
-        },
-        "Variant": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "Neutral Weak",
-                "Informative Weak",
-                "Positive Weak",
-                "Warning Solid",
-                "Warning Weak",
-                "Critical Solid",
-                "Critical Weak"
-            ]
-        },
-        "Show Title": {
-            "type": "VARIANT",
-            "variantOptions": [
-                "True",
-                "False"
-            ]
-        }
-    }
-};
-
-const metadata$n = {
     "name": "🟢 Main Tab Navigation / Global",
     "key": "a694a1da14a5c1d7d5c66bc78218c0c61fb388ab",
     "componentPropertyDefinitions": {
@@ -11218,7 +11190,7 @@ const metadata$n = {
     }
 };
 
-const metadata$m = {
+const metadata$n = {
     "name": "🟢 Main Tab Navigation / KR",
     "key": "41d3601e6b4c632a56cdc8fad485a76c026fdd8e",
     "componentPropertyDefinitions": {
@@ -11242,7 +11214,7 @@ const metadata$m = {
     }
 };
 
-const metadata$l = {
+const metadata$m = {
     "name": "🟢 Manner Temp",
     "key": "37c0a35f73a730fdfba7929cea91a7590fc93733",
     "componentPropertyDefinitions": {
@@ -11260,7 +11232,7 @@ const metadata$l = {
     }
 };
 
-const metadata$k = {
+const metadata$l = {
     "name": "🟢 Manner Temp Badge",
     "key": "3ef9a84d4d80046ff9a581136bd56269554a6e00",
     "componentPropertyDefinitions": {
@@ -11278,7 +11250,7 @@ const metadata$k = {
     }
 };
 
-const metadata$j = {
+const metadata$k = {
     "name": "🟢 Menu Sheet",
     "key": "cd4cf8a850bf3de87b79080b36b421a649bf3fcb",
     "componentPropertyDefinitions": {
@@ -11315,7 +11287,7 @@ const metadata$j = {
     }
 };
 
-const metadata$i = {
+const metadata$j = {
     "name": "🟢 Multiline Text Field",
     "key": "88b2399c930c85f9ce2972163a078bc684b84bbe",
     "componentPropertyDefinitions": {
@@ -11384,6 +11356,57 @@ const metadata$i = {
     }
 };
 
+const metadata$i = {
+    "name": "🟢 Page Banner",
+    "key": "ce587d0f21754af05240cb32a4880227cb0ea1e1",
+    "componentPropertyDefinitions": {
+        "Show Prefix Icon#11840:27": {
+            "type": "BOOLEAN"
+        },
+        "Prefix Icon#35433:45": {
+            "type": "INSTANCE_SWAP",
+            "preferredValues": []
+        },
+        "Pressed#36736:0": {
+            "type": "BOOLEAN"
+        },
+        "Interaction": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Display",
+                "Actionable",
+                "Dismissible",
+                "With Action",
+                "Custom"
+            ]
+        },
+        "Tone": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Neutral",
+                "Informative",
+                "Positive",
+                "Warning",
+                "Critical"
+            ]
+        },
+        "Variant": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Weak",
+                "Solid"
+            ]
+        },
+        "Show Title": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "False",
+                "True"
+            ]
+        }
+    }
+};
+
 const metadata$h = {
     "name": "🟢 Progress Circle",
     "key": "6e6779a372cab2485a0e25529bc4dbc9932a7346",
@@ -12020,13 +12043,13 @@ var FIGMA_COMPONENTS = {
   divider: metadata$r,
   floatingActionButton: metadata$q,
   helpBubble: metadata$p,
-  inlineBanner: metadata$o,
-  mainTabNavigationGlobal: metadata$n,
-  mainTabNavigationKr: metadata$m,
-  mannerTemp: metadata$l,
-  mannerTempBadge: metadata$k,
-  menuSheet: metadata$j,
-  multilineTextField: metadata$i,
+  mainTabNavigationGlobal: metadata$o,
+  mainTabNavigationKr: metadata$n,
+  mannerTemp: metadata$m,
+  mannerTempBadge: metadata$l,
+  menuSheet: metadata$k,
+  multilineTextField: metadata$j,
+  pageBanner: metadata$i,
   progressCircle: metadata$h,
   radio: metadata$g,
   radioMark: metadata$f,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/figma",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -38,7 +38,7 @@
     "lint:publish": "bun publint"
   },
   "dependencies": {
-    "@seed-design/css": "0.1.13",
+    "@seed-design/css": "0.1.14",
     "change-case": "^5.4.4",
     "ts-pattern": "^5.7.0"
   },

package/src/codegen/component-properties.ts

@@ -239,10 +239,17 @@ export type IdentityPlaceholderProperties = InferComponentDefinition<{
   };
 }>;
 
-export type InlineBannerProperties = InferComponentDefinition<
-  typeof metadata.inlineBanner.componentPropertyDefinitions
+export type PageBannerProperties = InferComponentDefinition<
+  typeof metadata.pageBanner.componentPropertyDefinitions
 >;
 
+export type PageBannerButtonProperties = InferComponentDefinition<{
+  "Label#39890:0": {
+    type: "TEXT";
+    defaultValue: "라벨";
+  };
+}>;
+
 export type MannerTempProperties = InferComponentDefinition<
   typeof metadata.mannerTemp.componentPropertyDefinitions
 >;

package/src/codegen/targets/react/component/handlers/page-banner.ts

@@ -0,0 +1,101 @@
+import type {
+  PageBannerButtonProperties,
+  PageBannerProperties,
+} from "@/codegen/component-properties";
+import { createElement, defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import type { NormalizedInstanceNode, NormalizedTextNode } from "@/normalizer";
+import { findAllInstances, findOne } from "@/utils/figma-node";
+import { camelCase } from "change-case";
+import { createLocalSnippetHelper } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import { match } from "ts-pattern";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("page-banner");
+
+const SUFFIX_BUTTON_KEY = "7dce4e1242761ccd8e5da42278fc2d870918039c";
+
+const createPageBannerButtonHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<PageBannerButtonProperties>(SUFFIX_BUTTON_KEY, (node) => {
+    return createElement(
+      "PageBannerButton",
+      undefined,
+      node.componentProperties["Label#39890:0"].value,
+    );
+  });
+
+export const createPageBannerHandler = (ctx: ComponentHandlerDeps) => {
+  const buttonHandler = createPageBannerButtonHandler(ctx);
+
+  return defineComponentHandler<PageBannerProperties>(metadata.pageBanner.key, (node, traverse) => {
+    const { componentProperties: props } = node;
+
+    const { tag, suffix } = match(props.Interaction.value)
+      .with("Actionable", () => ({ tag: "ActionablePageBanner", suffix: undefined }))
+      .with("Dismissible", () => ({ tag: "DismissiblePageBanner", suffix: undefined }))
+      .with("Display", () => ({ tag: "PageBanner", suffix: undefined }))
+      .with("With Action", () => {
+        const [buttonNode] = findAllInstances<PageBannerButtonProperties>({
+          node,
+          key: SUFFIX_BUTTON_KEY,
+        });
+        const suffix = buttonNode ? buttonHandler.transform(buttonNode, traverse) : undefined;
+
+        return { tag: "PageBanner", suffix };
+      })
+      .with("Custom", () => ({
+        tag: "PageBanner",
+        suffix: createElement("div", undefined, "Custom Content"),
+      }))
+      .exhaustive();
+
+    const textNode = findOne(
+      node,
+      (child) => child.type === "TEXT" && child.name === "Text",
+    ) as NormalizedTextNode | null;
+
+    if (!textNode) {
+      return createLocalSnippetElement(tag, undefined, undefined, {
+        comment: "내용을 제공해주세요.",
+      });
+    }
+
+    const slices = textNode.segments;
+
+    let title: string | undefined;
+    let description: string | undefined;
+
+    switch (slices.length) {
+      case 1: {
+        description = slices[0]?.characters.trim();
+
+        break;
+      }
+      case 2: {
+        title = slices[0]?.characters.trim();
+        description = slices[1]?.characters.trim();
+
+        break;
+      }
+    }
+
+    const iconNode = findOne(
+      node,
+      (child) => child.type === "INSTANCE" && child.name === "icon",
+    ) as NormalizedInstanceNode | null;
+
+    const showPrefixIcon = props["Show Prefix Icon#11840:27"].value && iconNode;
+    const prefixIcon = showPrefixIcon ? ctx.iconHandler.transform(iconNode) : undefined;
+
+    const commonProps = {
+      title,
+      description,
+      prefixIcon,
+      tone: camelCase(props.Tone.value),
+      variant: camelCase(props.Variant.value),
+      ...(suffix && { suffix }),
+    };
+
+    return createLocalSnippetElement(tag, commonProps);
+  });
+};

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

@@ -21,7 +21,7 @@ import { createErrorStateHandler } from "./handlers/error-state";
 import { createFloatingActionButtonHandler } from "./handlers/floating-action-button";
 import { createHelpBubbleHandler } from "./handlers/help-bubble";
 import { createIdentityPlaceholderHandler } from "./handlers/identity-placeholder";
-import { createInlineBannerHandler } from "./handlers/inline-banner";
+import { createPageBannerHandler } from "./handlers/page-banner";
 import { createMannerTempBadgeHandler } from "./handlers/manner-temp-badge";
 import { createMannerTempHandler } from "./handlers/manner-temp";
 import { createMenuSheetHandler } from "./handlers/menu-sheet";
@@ -66,7 +66,7 @@ export const unboundSeedComponentHandlers: Array<UnboundComponentHandler<any>> =
   createFloatingActionButtonHandler,
   createHelpBubbleHandler,
   createIdentityPlaceholderHandler,
-  createInlineBannerHandler,
+  createPageBannerHandler,
   createMannerTempBadgeHandler,
   createMannerTempHandler,
   createMenuSheetHandler,

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

@@ -12,7 +12,8 @@ export declare const metadata: {
         "48",
         "64",
         "80",
-        "96"
+        "96",
+        "108"
       ]
     }
   }

package/src/entities/data/__generated__/component-sets/avatar-stack.mjs

@@ -12,7 +12,8 @@ export const metadata = {
         "48",
         "64",
         "80",
-        "96"
+        "96",
+        "108"
       ]
     }
   }

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

@@ -15,7 +15,8 @@ export declare const metadata: {
         "48",
         "64",
         "80",
-        "96"
+        "96",
+        "108"
       ]
     },
     "Badge": {

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

@@ -15,7 +15,8 @@ export const metadata = {
         "48",
         "64",
         "80",
-        "96"
+        "96",
+        "108"
       ]
     },
     "Badge": {

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

@@ -19,15 +19,16 @@ export declare const metadata: {
         "Brand",
         "Informative",
         "Positive",
-        "Critical"
+        "Critical",
+        "Warning"
       ]
     },
     "Variant": {
       "type": "VARIANT",
       "variantOptions": [
-        "Solid",
         "Weak",
-        "Outline"
+        "Outline",
+        "Solid"
       ]
     }
   }

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

@@ -19,15 +19,16 @@ export const metadata = {
         "Brand",
         "Informative",
         "Positive",
-        "Critical"
+        "Critical",
+        "Warning"
       ]
     },
     "Variant": {
       "type": "VARIANT",
       "variantOptions": [
-        "Solid",
         "Weak",
-        "Outline"
+        "Outline",
+        "Solid"
       ]
     }
   }

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

@@ -2,12 +2,22 @@ export declare const metadata: {
   "name": "🟢 Divider",
   "key": "848e953725f757ea1a79e1fecc0b608a035032d3",
   "componentPropertyDefinitions": {
+    "Inset (Figma-Only)#36435:0": {
+      "type": "BOOLEAN"
+    },
     "Tone": {
       "type": "VARIANT",
       "variantOptions": [
         "Neutral",
         "Neutral Muted"
       ]
+    },
+    "Orientation": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "Vertical",
+        "Horizontal"
+      ]
     }
   }
 };

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

@@ -2,12 +2,22 @@ export const metadata = {
   "name": "🟢 Divider",
   "key": "848e953725f757ea1a79e1fecc0b608a035032d3",
   "componentPropertyDefinitions": {
+    "Inset (Figma-Only)#36435:0": {
+      "type": "BOOLEAN"
+    },
     "Tone": {
       "type": "VARIANT",
       "variantOptions": [
         "Neutral",
         "Neutral Muted"
       ]
+    },
+    "Orientation": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "Vertical",
+        "Horizontal"
+      ]
     }
   }
 };

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

@@ -21,13 +21,13 @@ export { metadata as contextualFloatingButton } from "./contextual-floating-butt
 export { metadata as divider } from "./divider";
 export { metadata as floatingActionButton } from "./floating-action-button";
 export { metadata as helpBubble } from "./help-bubble";
-export { metadata as inlineBanner } from "./inline-banner";
 export { metadata as mainTabNavigationGlobal } from "./main-tab-navigation-global";
 export { metadata as mainTabNavigationKr } from "./main-tab-navigation-kr";
 export { metadata as mannerTemp } from "./manner-temp";
 export { metadata as mannerTempBadge } from "./manner-temp-badge";
 export { metadata as menuSheet } from "./menu-sheet";
 export { metadata as multilineTextField } from "./multiline-text-field";
+export { metadata as pageBanner } from "./page-banner";
 export { metadata as progressCircle } from "./progress-circle";
 export { metadata as radio } from "./radio";
 export { metadata as radioMark } from "./radio-mark";

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

@@ -21,13 +21,13 @@ export { metadata as contextualFloatingButton } from "./contextual-floating-butt
 export { metadata as divider } from "./divider.mjs";
 export { metadata as floatingActionButton } from "./floating-action-button.mjs";
 export { metadata as helpBubble } from "./help-bubble.mjs";
-export { metadata as inlineBanner } from "./inline-banner.mjs";
 export { metadata as mainTabNavigationGlobal } from "./main-tab-navigation-global.mjs";
 export { metadata as mainTabNavigationKr } from "./main-tab-navigation-kr.mjs";
 export { metadata as mannerTemp } from "./manner-temp.mjs";
 export { metadata as mannerTempBadge } from "./manner-temp-badge.mjs";
 export { metadata as menuSheet } from "./menu-sheet.mjs";
 export { metadata as multilineTextField } from "./multiline-text-field.mjs";
+export { metadata as pageBanner } from "./page-banner.mjs";
 export { metadata as progressCircle } from "./progress-circle.mjs";
 export { metadata as radio } from "./radio.mjs";
 export { metadata as radioMark } from "./radio-mark.mjs";

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

@@ -0,0 +1,50 @@
+export declare const metadata: {
+  "name": "🟢 Page Banner",
+  "key": "ce587d0f21754af05240cb32a4880227cb0ea1e1",
+  "componentPropertyDefinitions": {
+    "Show Prefix Icon#11840:27": {
+      "type": "BOOLEAN"
+    },
+    "Prefix Icon#35433:45": {
+      "type": "INSTANCE_SWAP",
+      "preferredValues": []
+    },
+    "Pressed#36736:0": {
+      "type": "BOOLEAN"
+    },
+    "Interaction": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "Display",
+        "Actionable",
+        "Dismissible",
+        "With Action",
+        "Custom"
+      ]
+    },
+    "Tone": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "Neutral",
+        "Informative",
+        "Positive",
+        "Warning",
+        "Critical"
+      ]
+    },
+    "Variant": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "Weak",
+        "Solid"
+      ]
+    },
+    "Show Title": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "False",
+        "True"
+      ]
+    }
+  }
+};

package/src/entities/data/__generated__/component-sets/page-banner.mjs

@@ -0,0 +1,50 @@
+export const metadata = {
+  "name": "🟢 Page Banner",
+  "key": "ce587d0f21754af05240cb32a4880227cb0ea1e1",
+  "componentPropertyDefinitions": {
+    "Show Prefix Icon#11840:27": {
+      "type": "BOOLEAN"
+    },
+    "Prefix Icon#35433:45": {
+      "type": "INSTANCE_SWAP",
+      "preferredValues": []
+    },
+    "Pressed#36736:0": {
+      "type": "BOOLEAN"
+    },
+    "Interaction": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "Display",
+        "Actionable",
+        "Dismissible",
+        "With Action",
+        "Custom"
+      ]
+    },
+    "Tone": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "Neutral",
+        "Informative",
+        "Positive",
+        "Warning",
+        "Critical"
+      ]
+    },
+    "Variant": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "Weak",
+        "Solid"
+      ]
+    },
+    "Show Title": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "False",
+        "True"
+      ]
+    }
+  }
+};