@seed-design/figma 1.1.0 → 1.1.2

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

@@ -1,111 +1,264 @@
-import type { TextFieldProperties } from "@/codegen/component-properties";
 import { defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import { createLocalSnippetHelper } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
-import { handleSizeProp } from "../size";
+import {
+  createFieldFooterHandler,
+  createFieldHeaderHandler,
+  FIELD_KEYS,
+  type FieldFooterProps,
+  type FieldHeaderProps,
+} from "@/codegen/targets/react/component/handlers/field";
+import type {
+  FieldHeaderProperties,
+  FieldFooterProperties,
+  TextareaProperties,
+  TextInputFieldProperties,
+  TextInputOutlineProperties,
+  TextInputUnderlineProperties,
+  TextInputOutlinePrefixProperties,
+  TextInputOutlineSuffixProperties,
+  TextInputUnderlinePrefixProperties,
+  TextInputUnderlineSuffixProperties,
+  TextareaFieldProperties,
+} from "@/codegen/component-properties";
+import { findAllInstances, findOne } from "@/utils/figma-node";
+import type { NormalizedTextNode } from "@/normalizer";
 
 const { createLocalSnippetElement } = createLocalSnippetHelper("text-field");
 
-export const createTextFieldHandler = (ctx: ComponentHandlerDeps) =>
-  defineComponentHandler<TextFieldProperties>(
-    metadata.textField.key,
-    ({ componentProperties: props }) => {
-      const {
-        Size: { value: size },
-        State: { value: state },
-        Filled: { value: filled },
-        "Show Header#870:0": { value: showHeader },
-        "Label#14964:0": { value: label },
-        "Show Indicator#1259:0": { value: showIndicator },
-        "Indicator#15327:249": { value: indicator },
-        "Show Prefix#958:125": { value: showPrefix },
-        "Show Prefix Icon#1267:50": { value: showPrefixIcon },
-        "Prefix Icon#1267:25": prefixIcon,
-        "Show Prefix Text#1267:0": { value: showPrefixText },
-        "Prefix Text#15327:101": { value: prefix },
-        "Placeholder#958:0": { value: placeholder },
-        "Filled Text#1304:0": { value: defaultValue },
-        "Show Suffix#958:100": { value: showSuffix },
-        "Show Suffix Icon#1267:75": { value: showSuffixIcon },
-        "Suffix Icon #1267:100": suffixIcon,
-        "Show Suffix Text#1267:125": { value: showSuffixText },
-        "Suffix Text#15327:138": { value: suffix },
-        "Show Footer#958:25": { value: showFooter },
-        "Show Description#958:50": { value: showDescription },
-        "Description#12626:5": { value: description },
-        "Show Character Count#958:75": { value: showCharacterCount },
-        "Character Count#15327:64": { value: _characterCount },
-        "Max Character Count#15327:27": { value: maxCharacterCount },
-      } = props;
-
-      const states = state.split("-");
+const TEXT_INPUT_OUTLINE_KEY = "22eebd645d310c086d9f5f69d8f179ff5c7cf7ca";
+const TEXT_INPUT_OUTLINE_PREFIX_KEY = "1ab174dd51bc42a5efe530f52f1dd02255c50b18";
+const TEXT_INPUT_OUTLINE_SUFFIX_KEY = "555fee288d9053760e301791665bbac31d19c43f";
 
-      const commonProps = {
-        size: handleSizeProp(size),
-        // header
-        ...(showHeader && {
-          label,
+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);
+
+  return defineComponentHandler<TextInputFieldProperties>(
+    metadata.templateTextField.key,
+    (node, traverse) => {
+      const props = node.componentProperties;
+
+      const [textInputOutline] = findAllInstances<TextInputOutlineProperties>({
+        node,
+        key: TEXT_INPUT_OUTLINE_KEY,
+      });
+      const [textInputUnderline] = findAllInstances<TextInputUnderlineProperties>({
+        node,
+        key: TEXT_INPUT_UNDERLINE_KEY,
+      });
+
+      const [fieldHeader] = findAllInstances<FieldHeaderProperties>({
+        node,
+        key: FIELD_KEYS.HEADER,
+      });
+      const [fieldFooter] = findAllInstances<FieldFooterProperties>({
+        node,
+        key: FIELD_KEYS.FOOTER,
+      });
+
+      const fieldProps = {
+        ...(props["Show Header#40606:8"].value && fieldHeader
+          ? (fieldHeaderHandler.transform(fieldHeader, traverse).props as FieldHeaderProps)
+          : {}),
+        ...(props["Show Footer#40606:9"].value && fieldFooter
+          ? (fieldFooterHandler.transform(fieldFooter, traverse).props as FieldFooterProps)
+          : {}),
+      };
+
+      const commonProps = (() => {
+        if (textInputOutline) {
+          const [prefix] = findAllInstances<TextInputOutlinePrefixProperties>({
+            node: textInputOutline,
+            key: TEXT_INPUT_OUTLINE_PREFIX_KEY,
+          });
+
+          const [suffix] = findAllInstances<TextInputOutlineSuffixProperties>({
+            node: textInputOutline,
+            key: TEXT_INPUT_OUTLINE_SUFFIX_KEY,
+          });
+
+          return {
+            variant: "outline",
+            ...(textInputOutline.componentProperties.State.value === "Disabled" && {
+              disabled: true,
+            }),
+            ...(textInputOutline.componentProperties.State.value === "Read Only" && {
+              readOnly: true,
+            }),
+            ...(textInputOutline.componentProperties.State.value === "Error" && {
+              invalid: true,
+            }),
+            ...(textInputOutline.componentProperties.State.value === "Error Focused" && {
+              invalid: true,
+            }),
+            ...(textInputOutline.componentProperties["Has Prefix#32514:10"].value === true &&
+              prefix &&
+              prefix.componentProperties.Type.value === "Icon" && {
+                prefixIcon: ctx.iconHandler.transform(prefix.componentProperties["Icon#34021:2"]),
+              }),
+            ...(textInputOutline.componentProperties["Has Suffix#32865:68"].value === true &&
+              suffix &&
+              suffix.componentProperties["Type (Figma Only)"].value === "Icon" && {
+                suffixIcon: ctx.iconHandler.transform(suffix.componentProperties["Icon#45391:0"]),
+              }),
+            ...(textInputOutline.componentProperties["Has Suffix#32865:68"].value === true &&
+              suffix &&
+              suffix.componentProperties["Type (Figma Only)"].value === "Text" && {
+                suffix: suffix.componentProperties["Suffix Text#34021:4"].value,
+              }),
+          };
+        }
+
+        if (textInputUnderline) {
+          const [prefix] = findAllInstances<TextInputUnderlinePrefixProperties>({
+            node: textInputUnderline,
+            key: TEXT_INPUT_UNDERLINE_PREFIX_KEY,
+          });
+
+          const [suffix] = findAllInstances<TextInputUnderlineSuffixProperties>({
+            node: textInputUnderline,
+            key: TEXT_INPUT_UNDERLINE_SUFFIX_KEY,
+          });
+
+          return {
+            variant: "underline",
+            ...(textInputUnderline.componentProperties.State.value === "Disabled" && {
+              disabled: true,
+            }),
+            ...(textInputUnderline.componentProperties.State.value === "Read Only" && {
+              readOnly: true,
+            }),
+            ...(textInputUnderline.componentProperties.State.value === "Error" && {
+              invalid: true,
+            }),
+            ...(textInputUnderline.componentProperties.State.value === "Error Focused" && {
+              invalid: true,
+            }),
+            ...(textInputUnderline.componentProperties["Has Prefix#34125:0"].value === true &&
+              prefix &&
+              prefix.componentProperties.Type.value === "Icon" && {
+                prefixIcon: ctx.iconHandler.transform(prefix.componentProperties["Icon#34021:2"]),
+              }),
+            ...(textInputUnderline.componentProperties["Has Suffix#34125:8"].value === true &&
+              suffix &&
+              suffix.componentProperties["Type (Figma Only)"].value === "Icon" && {
+                suffixIcon: ctx.iconHandler.transform(suffix.componentProperties["Icon#45391:5"]),
+              }),
+            ...(textInputUnderline.componentProperties["Has Suffix#34125:8"].value === true &&
+              suffix &&
+              suffix.componentProperties["Type (Figma Only)"].value === "Text" && {
+                suffix: suffix.componentProperties["Suffix Text#34021:4"].value,
+              }),
+          };
+        }
+
+        return {};
+      })();
+
+      // these can be fragile but better than having 9 different handlers
+      const placeholder = findOne(
+        node,
+        (node) => node.type === "TEXT" && node.name.toLowerCase().includes("placeholder"),
+      ) as NormalizedTextNode;
+
+      const value = findOne(
+        node,
+        (node) => node.type === "TEXT" && node.name.toLowerCase().includes("value"),
+      ) as NormalizedTextNode;
+
+      const inputProps = {
+        ...(placeholder && {
+          placeholder: placeholder.characters,
         }),
-        ...(showHeader &&
-          showIndicator && {
-            indicator,
-          }),
-        // input affixes
-        ...(showPrefix &&
-          showPrefixIcon && {
-            prefixIcon: ctx.iconHandler.transform(prefixIcon),
-          }),
-        ...(showPrefix &&
-          showPrefixText && {
-            prefix,
-          }),
-        ...(showSuffix &&
-          showSuffixIcon && {
-            suffixIcon: ctx.iconHandler.transform(suffixIcon),
-          }),
-        ...(showSuffix &&
-          showSuffixText && {
-            suffix,
+      };
+
+      return createLocalSnippetElement(
+        "TextField",
+        {
+          ...fieldProps,
+          ...commonProps,
+          ...(value && {
+            defaultValue: value.characters,
           }),
-        // input
-        ...(filled === "True" && {
-          defaultValue,
-        }),
-        ...(states.includes("Invalid") && {
-          invalid: true,
+        },
+        createLocalSnippetElement("TextFieldInput", inputProps),
+      );
+    },
+  );
+};
+
+export const createTextareaFieldHandler = (ctx: ComponentHandlerDeps) => {
+  const fieldHeaderHandler = createFieldHeaderHandler(ctx);
+  const fieldFooterHandler = createFieldFooterHandler(ctx);
+
+  return defineComponentHandler<TextareaFieldProperties>(
+    metadata.templateTextareaField.key,
+    (node, traverse) => {
+      const [textarea] = findAllInstances<TextareaProperties>({
+        node,
+        key: TEXTAREA_KEY,
+      });
+      const [fieldHeader] = findAllInstances<FieldHeaderProperties>({
+        node,
+        key: FIELD_KEYS.HEADER,
+      });
+      const [fieldFooter] = findAllInstances<FieldFooterProperties>({
+        node,
+        key: FIELD_KEYS.FOOTER,
+      });
+
+      const fieldProps = {
+        ...(fieldHeader
+          ? (fieldHeaderHandler.transform(fieldHeader, traverse).props as FieldHeaderProps)
+          : {}),
+        ...(fieldFooter
+          ? (fieldFooterHandler.transform(fieldFooter, traverse).props as FieldFooterProps)
+          : {}),
+      };
+
+      // these can be fragile but better than having 9 different handlers
+      const placeholder = findOne(
+        node,
+        (node) => node.type === "TEXT" && node.name.toLowerCase().includes("placeholder"),
+      ) as NormalizedTextNode;
+
+      const value = findOne(
+        node,
+        (node) => node.type === "TEXT" && node.name.toLowerCase().includes("value"),
+      ) as NormalizedTextNode;
+
+      const inputProps = {
+        autoresize: textarea.componentProperties["Auto Size (Figma Only)"].value === "true",
+        ...(placeholder && {
+          placeholder: placeholder.characters,
         }),
-        ...(states.includes("Disabled") && {
+      };
+
+      const commonProps = {
+        ...(textarea.componentProperties.State.value === "Disabled" && {
           disabled: true,
         }),
-        ...(states.includes("Read Only") && {
+        ...(textarea.componentProperties.State.value === "Read Only" && {
           readOnly: true,
         }),
-        // footer
-        ...(showFooter &&
-          showDescription &&
-          states.includes("Invalid") && {
-            // invalid인 경우 description을 error로 사용
-            errorMessage: description,
-          }),
-        ...(showFooter &&
-          showDescription &&
-          !states.includes("Invalid") && {
-            // invalid가 아닌 경우 description을 description으로 사용
-            description,
-          }),
-        ...(showFooter &&
-          showCharacterCount && {
-            maxGraphemeCount: Number(maxCharacterCount),
-          }),
-      };
-
-      const inputProps = {
-        placeholder,
+        ...(value && {
+          defaultValue: value.characters,
+        }),
       };
 
-      const TextFieldChildren = createLocalSnippetElement("TextFieldInput", inputProps);
-
-      return createLocalSnippetElement("TextField", commonProps, TextFieldChildren);
+      return createLocalSnippetElement(
+        "TextField",
+        { ...fieldProps, ...commonProps },
+        createLocalSnippetElement("TextFieldTextarea", inputProps),
+      );
     },
   );
+};

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

@@ -19,6 +19,13 @@ import { createChipHandler } from "./handlers/chip";
 import { createContextualFloatingButtonHandler } from "./handlers/contextual-floating-button";
 import { createDividerHandler } from "./handlers/divider";
 import { createErrorStateHandler } from "./handlers/error-state";
+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";
@@ -27,7 +34,6 @@ import { createListItemHandler } from "@/codegen/targets/react/component/handler
 import { createMannerTempBadgeHandler } from "./handlers/manner-temp-badge";
 import { createMannerTempHandler } from "./handlers/manner-temp";
 import { createMenuSheetHandler } from "./handlers/menu-sheet";
-import { createMultilineTextFieldHandler } from "./handlers/multiline-text-field";
 import { createPageBannerHandler } from "./handlers/page-banner";
 import { createProgressCircleHandler } from "./handlers/progress-circle";
 import { createRadioGroupItemHandler } from "@/codegen/targets/react/component/handlers/radio-group";
@@ -36,11 +42,15 @@ import { createReactionButtonHandler } from "./handlers/reaction-button";
 import { createSegmentedControlHandler } from "./handlers/segmented-control";
 import { createSelectBoxGroupHandler, createSelectBoxHandler } from "./handlers/select-box";
 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/switch-mark";
 import { createSwitchHandler } from "./handlers/switch";
 import { createTabsHandler } from "@/codegen/targets/react/component/handlers/tabs";
-import { createTextFieldHandler } from "./handlers/text-field";
+import { createTextInputFieldHandler, createTextareaFieldHandler } from "./handlers/text-field";
 import { createToggleButtonHandler } from "./handlers/toggle-button";
 import {
   createTagGroupHandler,
@@ -62,19 +72,40 @@ export function bindComponentHandler<T extends NormalizedInstanceNode["component
 export const unboundSeedComponentHandlers: Array<UnboundComponentHandler<any>> = [
   createActionButtonGhostHandler,
   createActionButtonHandler,
-  createAlertDialogHandler,
-  createAppBarHandler,
-  createAvatarHandler,
-  createAvatarStackHandler,
+  createTextInputFieldHandler,
+  createTextareaFieldHandler,
   createBadgeHandler,
-  createBottomSheetHandler,
+  createChipHandler,
   createCalloutHandler,
+  createPageBannerHandler,
   createCheckboxHandler,
   createCheckmarkHandler,
-  createChipHandler,
-  createContextualFloatingButtonHandler,
+  createRadioGroupItemHandler,
+  createRadioMarkHandler,
+  createSwitchHandler,
+  createSwitchMarkHandler,
+  createAlertDialogHandler,
   createDividerHandler,
+  createAvatarHandler,
+  createAvatarStackHandler,
+  createSegmentedControlHandler,
+  createSelectBoxGroupHandler,
+  createSelectBoxHandler,
+  createSliderHandler,
+  createSliderFieldHandler,
+  createTabsHandler,
+  createTagGroupHandler,
+  createTagGroupItemHandler,
+  createToggleButtonHandler,
+  createAppBarHandler,
+  createBottomSheetHandler,
+  createFieldButtonHandler,
+  createAddressFieldHandler,
+  createDatePickerFieldHandler,
+  createSelectFieldHandler,
+  createTimePickerFieldHandler,
   createErrorStateHandler,
+  createContextualFloatingButtonHandler,
   createFloatingActionButtonHandler,
   createHelpBubbleHandler,
   createIdentityPlaceholderHandler,
@@ -83,22 +114,8 @@ export const unboundSeedComponentHandlers: Array<UnboundComponentHandler<any>> =
   createMannerTempBadgeHandler,
   createMannerTempHandler,
   createMenuSheetHandler,
-  createMultilineTextFieldHandler,
-  createPageBannerHandler,
   createProgressCircleHandler,
-  createRadioGroupItemHandler,
-  createRadioMarkHandler,
   createReactionButtonHandler,
-  createSegmentedControlHandler,
-  createSelectBoxGroupHandler,
-  createSelectBoxHandler,
   createSkeletonHandler,
   createSnackbarHandler,
-  createSwitchHandler,
-  createSwitchMarkHandler,
-  createTabsHandler,
-  createTagGroupHandler,
-  createTagGroupItemHandler,
-  createTextFieldHandler,
-  createToggleButtonHandler,
 ];

package/src/codegen/targets/react/element-factories.ts

@@ -1,7 +1,7 @@
 import { createElement, type ElementNode } from "@/codegen/core";
 
 const SEED_REACT_IMPORT_PATH = "@seed-design/react";
-const LOCAL_SNIPPET_BASE_PATH = "@/seed-design/ui";
+const LOCAL_SNIPPET_BASE_PATH = "seed-design/ui";
 const MONOCHROME_ICON_IMPORT_PATH = "@karrotmarket/react-monochrome-icon";
 const MULTICOLOR_ICON_IMPORT_PATH = "@karrotmarket/react-multicolor-icon";
 

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

@@ -8,6 +8,19 @@ import { createSeedReactElement } from "./element-factories";
 import type { IconHandler } from "./icon";
 import type { PropsConverters } from "./props";
 
+const OVERRIDE_ACCEPTABLE_PROPERTIES: Set<NodeChangeProperty> = new Set([
+  "characters",
+  "parent",
+  "locked",
+  "visible",
+  "name",
+  "x",
+  "y",
+  "componentProperties",
+  "componentPropertyDefinitions",
+  "componentPropertyReferences",
+] satisfies NodeChangeProperty[]);
+
 export interface InstanceTransformerDeps {
   iconHandler?: IconHandler;
   propsConverters: PropsConverters;
@@ -40,13 +53,21 @@ export function createInstanceTransformer({
       const handled = componentHandler.transform(node, traverse);
 
       if (node.overrides && node.overrides.length > 0) {
-        const overriddenFields = node.overrides.flatMap(({ overriddenFields }) => overriddenFields);
+        const overriddenFields = node.overrides
+          .flatMap(({ overriddenFields }) => overriddenFields)
+          .filter(
+            (field) => OVERRIDE_ACCEPTABLE_PROPERTIES.has(field as NodeChangeProperty) === false,
+          );
+
+        if (overriddenFields.length === 0) {
+          return handled;
+        }
 
         return {
           ...handled,
           meta: {
             ...handled.meta,
-            comment: `${handled.meta.comment ? `${handled.meta.comment} ` : ""}오버라이드된 필드: ${overriddenFields.join(", ")}`,
+            comment: `${handled.meta.comment ? `${handled.meta.comment} ` : ""}오버라이드된 필드: ${Array.from(new Set(overriddenFields)).join(", ")}`,
           },
         };
       }