@seed-design/figma 1.2.0 → 1.3.2

package/src/codegen/targets/react/component/handlers/tag-group.ts

@@ -12,57 +12,61 @@ const { createLocalSnippetElement } = createLocalSnippetHelper("tag-group");
 export const createTagGroupHandler = (ctx: ComponentHandlerDeps) => {
   const itemHandler = createTagGroupItemHandler(ctx);
 
-  return defineComponentHandler<TagGroupProperties>(metadata.tagGroup.key, (node, traverse) => {
-    const itemNodes = findAllInstances<TagGroupItemProperties>({ node, key: TAG_GROUP_ITEM_KEY });
+  return defineComponentHandler<TagGroupProperties>(
+    metadata.componentTagGroup.key,
+    (node, traverse) => {
+      const itemNodes = findAllInstances<TagGroupItemProperties>({
+        node,
+        key: itemHandler.key,
+      });
 
-    const items = itemNodes.map((itemNode) =>
-      itemHandler.transform(itemNode, traverse),
-    ) as (ElementNode & {
-      props: { size?: string; weight?: string; tone?: string };
-    })[];
+      const items = itemNodes.map((itemNode) =>
+        itemHandler.transform(itemNode, traverse),
+      ) as (ElementNode & {
+        props: { size?: string; weight?: string; tone?: string };
+      })[];
 
-    if (items.length === 0) {
-      return createLocalSnippetElement("TagGroupRoot");
-    }
+      if (items.length === 0) {
+        return createLocalSnippetElement("TagGroupRoot");
+      }
 
-    // if size/weight/tone are all the same among item[n].props, lift them up to TagGroupRoot
+      // if size/weight/tone are all the same among item[n].props, lift them up to TagGroupRoot
 
-    const consistent = {
-      size: items.map((item) => item.props.size).every((size) => size === items[0].props.size),
-      weight: items
-        .map((item) => item.props.weight)
-        .every((weight) => weight === items[0].props.weight),
-      tone: items.map((item) => item.props.tone).every((tone) => tone === items[0].props.tone),
-    };
+      const consistent = {
+        size: items.map((item) => item.props.size).every((size) => size === items[0].props.size),
+        weight: items
+          .map((item) => item.props.weight)
+          .every((weight) => weight === items[0].props.weight),
+        tone: items.map((item) => item.props.tone).every((tone) => tone === items[0].props.tone),
+      };
 
-    return createLocalSnippetElement(
-      "TagGroupRoot",
-      {
-        // lift up consistent props
-        ...(consistent.size && { size: items[0].props.size }),
-        ...(consistent.weight && { weight: items[0].props.weight }),
-        ...(consistent.tone && { tone: items[0].props.tone }),
-      },
-      items.map((item) => ({
-        ...item,
-        props: {
-          // remove lifted props
-          ...item.props,
-          size: consistent.size ? undefined : item.props.size,
-          weight: consistent.weight ? undefined : item.props.weight,
-          tone: consistent.tone ? undefined : item.props.tone,
+      return createLocalSnippetElement(
+        "TagGroupRoot",
+        {
+          // lift up consistent props
+          ...(consistent.size && { size: items[0].props.size }),
+          ...(consistent.weight && { weight: items[0].props.weight }),
+          ...(consistent.tone && { tone: items[0].props.tone }),
         },
-      })),
-      { comment: "`truncate` prop을 통해 한 줄로 표시되도록 할 수 있습니다." },
-    );
-  });
+        items.map((item) => ({
+          ...item,
+          props: {
+            // remove lifted props
+            ...item.props,
+            size: consistent.size ? undefined : item.props.size,
+            weight: consistent.weight ? undefined : item.props.weight,
+            tone: consistent.tone ? undefined : item.props.tone,
+          },
+        })),
+        { comment: "`truncate` prop을 통해 한 줄로 표시되도록 할 수 있습니다." },
+      );
+    },
+  );
 };
 
-const TAG_GROUP_ITEM_KEY = "a7bbc318919053f96be00e509469f6294d6bb6bb";
-
-export const createTagGroupItemHandler = (ctx: ComponentHandlerDeps) =>
+const createTagGroupItemHandler = (ctx: ComponentHandlerDeps) =>
   defineComponentHandler<TagGroupItemProperties>(
-    TAG_GROUP_ITEM_KEY,
+    metadata.privateComponentItemTag.key,
     ({ componentProperties: props }) => {
       const size = match(props.Size.value)
         .with("t2(12pt)", () => "t2")

package/src/codegen/targets/react/component/handlers/text-field.ts

@@ -5,7 +5,6 @@ import type { ComponentHandlerDeps } from "../deps.interface";
 import {
   createFieldFooterHandler,
   createFieldHeaderHandler,
-  FIELD_KEYS,
   type FieldFooterProps,
   type FieldHeaderProps,
 } from "@/codegen/targets/react/component/handlers/field";
@@ -27,16 +26,6 @@ import type { NormalizedTextNode } from "@/normalizer";
 
 const { createLocalSnippetElement } = createLocalSnippetHelper("text-field");
 
-const TEXT_INPUT_OUTLINE_KEY = "22eebd645d310c086d9f5f69d8f179ff5c7cf7ca";
-const TEXT_INPUT_OUTLINE_PREFIX_KEY = "1ab174dd51bc42a5efe530f52f1dd02255c50b18";
-const TEXT_INPUT_OUTLINE_SUFFIX_KEY = "555fee288d9053760e301791665bbac31d19c43f";
-
-const TEXT_INPUT_UNDERLINE_KEY = "16e9e343fc319190149369bd61076d6415e09a8a";
-const TEXT_INPUT_UNDERLINE_PREFIX_KEY = "a7ceae43b6daf4490e8ab408d2c29fb63b2eb891";
-const TEXT_INPUT_UNDERLINE_SUFFIX_KEY = "1b88368820be61f358e24a8aaa601e7f2a2ea101";
-
-const TEXTAREA_KEY = "22bb206483f00cd635188eea6ae8a6aac058b5d5";
-
 export const createTextInputFieldHandler = (ctx: ComponentHandlerDeps) => {
   const fieldHeaderHandler = createFieldHeaderHandler(ctx);
   const fieldFooterHandler = createFieldFooterHandler(ctx);
@@ -48,20 +37,20 @@ export const createTextInputFieldHandler = (ctx: ComponentHandlerDeps) => {
 
       const [textInputOutline] = findAllInstances<TextInputOutlineProperties>({
         node,
-        key: TEXT_INPUT_OUTLINE_KEY,
+        key: metadata.componentTextInput.key,
       });
       const [textInputUnderline] = findAllInstances<TextInputUnderlineProperties>({
         node,
-        key: TEXT_INPUT_UNDERLINE_KEY,
+        key: metadata.componentUnderlineTextInput.key,
       });
 
       const [fieldHeader] = findAllInstances<FieldHeaderProperties>({
         node,
-        key: FIELD_KEYS.HEADER,
+        key: fieldHeaderHandler.key,
       });
       const [fieldFooter] = findAllInstances<FieldFooterProperties>({
         node,
-        key: FIELD_KEYS.FOOTER,
+        key: fieldFooterHandler.key,
       });
 
       const fieldProps = {
@@ -77,12 +66,12 @@ export const createTextInputFieldHandler = (ctx: ComponentHandlerDeps) => {
         if (textInputOutline) {
           const [prefix] = findAllInstances<TextInputOutlinePrefixProperties>({
             node: textInputOutline,
-            key: TEXT_INPUT_OUTLINE_PREFIX_KEY,
+            key: metadata.privateComponentTextInputPrefix.key,
           });
 
           const [suffix] = findAllInstances<TextInputOutlineSuffixProperties>({
             node: textInputOutline,
-            key: TEXT_INPUT_OUTLINE_SUFFIX_KEY,
+            key: metadata.privateComponentTextInputSuffix.key,
           });
 
           return {
@@ -120,12 +109,12 @@ export const createTextInputFieldHandler = (ctx: ComponentHandlerDeps) => {
         if (textInputUnderline) {
           const [prefix] = findAllInstances<TextInputUnderlinePrefixProperties>({
             node: textInputUnderline,
-            key: TEXT_INPUT_UNDERLINE_PREFIX_KEY,
+            key: metadata.privateComponentUnderlineTextInputPrefix.key,
           });
 
           const [suffix] = findAllInstances<TextInputUnderlineSuffixProperties>({
             node: textInputUnderline,
-            key: TEXT_INPUT_UNDERLINE_SUFFIX_KEY,
+            key: metadata.privateComponentUnderlineTextInputSuffix.key,
           });
 
           return {
@@ -204,15 +193,15 @@ export const createTextareaFieldHandler = (ctx: ComponentHandlerDeps) => {
     (node, traverse) => {
       const [textarea] = findAllInstances<TextareaProperties>({
         node,
-        key: TEXTAREA_KEY,
+        key: metadata.componentTextarea.key,
       });
       const [fieldHeader] = findAllInstances<FieldHeaderProperties>({
         node,
-        key: FIELD_KEYS.HEADER,
+        key: fieldHeaderHandler.key,
       });
       const [fieldFooter] = findAllInstances<FieldFooterProperties>({
         node,
-        key: FIELD_KEYS.FOOTER,
+        key: fieldFooterHandler.key,
       });
 
       const fieldProps = {

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

@@ -10,7 +10,7 @@ const { createLocalSnippetElement } = createLocalSnippetHelper("toggle-button");
 
 export const createToggleButtonHandler = (ctx: ComponentHandlerDeps) =>
   defineComponentHandler<ToggleButtonProperties>(
-    metadata.toggleButton.key,
+    metadata.componentToggleButton.key,
     ({ componentProperties: props }) => {
       const commonProps = {
         variant: camelCase(props.Variant.value),

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

@@ -2,67 +2,8 @@ import type { ComponentHandler } from "@/codegen/core";
 import type { NormalizedInstanceNode } from "@/normalizer";
 import type { ComponentHandlerDeps } from "./deps.interface";
 
-import {
-  createActionButtonHandler,
-  createActionButtonGhostHandler,
-} from "./handlers/action-button";
-import { createAlertDialogHandler } from "./handlers/alert-dialog";
-import { createAppBarHandler } from "./handlers/app-bar";
-import { createAvatarHandler } from "./handlers/avatar";
-import { createAvatarStackHandler } from "./handlers/avatar-stack";
-import { createBadgeHandler } from "./handlers/badge";
-import { createBottomSheetHandler } from "./handlers/bottom-sheet";
-import { createCalloutHandler } from "./handlers/callout";
-import { createCheckboxHandler } from "./handlers/checkbox";
-import { createCheckmarkHandler } from "@/codegen/targets/react/component/handlers/checkmark";
-import { createChipHandler } from "./handlers/chip";
-import { createContextualFloatingButtonHandler } from "./handlers/contextual-floating-button";
-import { createDividerHandler } from "./handlers/divider";
-import {
-  createFieldButtonHandler,
-  createAddressFieldHandler,
-  createDatePickerFieldHandler,
-  createSelectFieldHandler,
-  createTimePickerFieldHandler,
-} from "@/codegen/targets/react/component/handlers/field-button";
-import { createFloatingActionButtonHandler } from "./handlers/floating-action-button";
-import { createHelpBubbleHandler } from "./handlers/help-bubble";
-import { createIdentityPlaceholderHandler } from "./handlers/identity-placeholder";
-import { createListHeaderHandler } from "@/codegen/targets/react/component/handlers/list-header";
-import { createListItemHandler } from "@/codegen/targets/react/component/handlers/list-item";
-import { createMannerTempBadgeHandler } from "./handlers/manner-temp-badge";
-import { createMannerTempHandler } from "./handlers/manner-temp";
-import { createMenuSheetHandler } from "./handlers/menu-sheet";
-import { createPageBannerHandler } from "./handlers/page-banner";
-import { createProgressCircleHandler } from "./handlers/progress-circle";
-import { createRadioGroupItemHandler } from "@/codegen/targets/react/component/handlers/radio-group";
-import { createRadiomarkHandler } from "@/codegen/targets/react/component/handlers/radiomark";
-import { createReactionButtonHandler } from "./handlers/reaction-button";
-import { createResultSectionHandler } from "./handlers/result-section";
-import { createSegmentedControlHandler } from "./handlers/segmented-control";
-import { createSkeletonHandler } from "./handlers/skeleton";
-import {
-  createSliderHandler,
-  createSliderFieldHandler,
-} from "@/codegen/targets/react/component/handlers/slider";
-import { createSnackbarHandler } from "./handlers/snackbar";
-import { createSwitchmarkHandler } from "@/codegen/targets/react/component/handlers/switchmark";
-import { createSwitchHandler } from "./handlers/switch";
-import { createTabsHandler } from "@/codegen/targets/react/component/handlers/tabs";
-import { createTextInputFieldHandler, createTextareaFieldHandler } from "./handlers/text-field";
-import { createToggleButtonHandler } from "./handlers/toggle-button";
-import {
-  createTagGroupHandler,
-  createTagGroupItemHandler,
-} from "@/codegen/targets/react/component/handlers/tag-group";
-import {
-  createLegacyTextFieldHandler,
-  createLegacyMultilineTextFieldHandler,
-} from "./handlers/legacy-text-field";
-import {
-  createLegacySelectBoxHandler,
-  createLegacySelectBoxGroupHandler,
-} from "./handlers/legacy-select-box";
+import * as archivedHandlers from "./handlers/archive";
+import * as currentHandlers from "./handlers";
 
 export type { ComponentHandlerDeps };
 export type UnboundComponentHandler<T extends NormalizedInstanceNode["componentProperties"]> = (
@@ -76,59 +17,8 @@ export function bindComponentHandler<T extends NormalizedInstanceNode["component
   return unbound(deps);
 }
 
+// biome-ignore lint/suspicious/noExplicitAny: handlers have different component property types
 export const unboundSeedComponentHandlers: Array<UnboundComponentHandler<any>> = [
-  createActionButtonGhostHandler,
-  createActionButtonHandler,
-  createTextInputFieldHandler,
-  createTextareaFieldHandler,
-
-  createLegacyTextFieldHandler,
-  createLegacyMultilineTextFieldHandler,
-
-  createBadgeHandler,
-  createChipHandler,
-  createCalloutHandler,
-  createPageBannerHandler,
-  createCheckboxHandler,
-  createCheckmarkHandler,
-  createRadioGroupItemHandler,
-  createRadiomarkHandler,
-  createSwitchHandler,
-  createSwitchmarkHandler,
-  createAlertDialogHandler,
-  createDividerHandler,
-  createAvatarHandler,
-  createAvatarStackHandler,
-  createSegmentedControlHandler,
-
-  createLegacySelectBoxHandler,
-  createLegacySelectBoxGroupHandler,
-
-  createSliderHandler,
-  createSliderFieldHandler,
-  createTabsHandler,
-  createTagGroupHandler,
-  createTagGroupItemHandler,
-  createToggleButtonHandler,
-  createAppBarHandler,
-  createBottomSheetHandler,
-  createFieldButtonHandler,
-  createAddressFieldHandler,
-  createDatePickerFieldHandler,
-  createSelectFieldHandler,
-  createTimePickerFieldHandler,
-  createResultSectionHandler,
-  createContextualFloatingButtonHandler,
-  createFloatingActionButtonHandler,
-  createHelpBubbleHandler,
-  createIdentityPlaceholderHandler,
-  createListHeaderHandler,
-  createListItemHandler,
-  createMannerTempBadgeHandler,
-  createMannerTempHandler,
-  createMenuSheetHandler,
-  createProgressCircleHandler,
-  createReactionButtonHandler,
-  createSkeletonHandler,
-  createSnackbarHandler,
+  ...Object.values(archivedHandlers),
+  ...Object.values(currentHandlers),
 ];