@seed-design/figma 1.2.1 → 1.3.2

package/src/codegen/targets/react/component/handlers/bottom-sheet.ts

@@ -1,6 +1,7 @@
 import type { BottomSheetProperties } from "@/codegen/component-properties";
 import { createElement, defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
+import * as components from "@/entities/data/__generated__/components";
 import { match } from "ts-pattern";
 import { createLocalSnippetHelper } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
@@ -10,10 +11,6 @@ const { createLocalSnippetElement } = createLocalSnippetHelper("bottom-sheet");
 const { createLocalSnippetElement: createLocalSnippetElementTrigger } =
   createLocalSnippetHelper("action-button");
 
-// TODO: Bottom Action Bar (WIP) handler의 키. 해당 컴포넌트(템플릿) 핸들러 작성 시 handler.transform()으로 대체
-const BOTTOM_SHEET_FOOTER_KEY = "6475aac366b2b18edf8cbabff4f84a9f1619253a";
-const BOTTOM_SHEET_BODY_KEY = "e68b006d572300d3c987776192c8ab387fa45e05";
-
 export const createBottomSheetHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<BottomSheetProperties>(
     metadata.componentBottomSheet.key,
@@ -36,7 +33,7 @@ export const createBottomSheetHandler = (_ctx: ComponentHandlerDeps) =>
 
       const bodyNodes = findAllInstances({
         node,
-        key: BOTTOM_SHEET_BODY_KEY,
+        key: components.privateComponentBottomSheetContentsPlaceholder.key,
       });
 
       const bottomSheetBody =
@@ -50,7 +47,8 @@ export const createBottomSheetHandler = (_ctx: ComponentHandlerDeps) =>
 
       const footerNodes = findAllInstances({
         node,
-        key: BOTTOM_SHEET_FOOTER_KEY,
+        // TODO: Bottom Action Bar (WIP) handler의 키. 해당 컴포넌트(템플릿) 핸들러 작성 시 handler.transform()으로 대체
+        key: metadata.componentBottomActionBarFigmaOnly.key,
       });
 
       const bottomSheetFooter =

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

@@ -1,4 +1,9 @@
-import type { CheckboxProperties } from "@/codegen/component-properties";
+import type {
+  CheckboxGroupFieldProperties,
+  CheckboxProperties,
+  FieldFooterProperties,
+  FieldHeaderProperties,
+} from "@/codegen/component-properties";
 import { defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import { camelCase } from "change-case";
@@ -6,6 +11,13 @@ import { createLocalSnippetHelper } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
 import { handleSizeProp } from "../size";
 import { match } from "ts-pattern";
+import {
+  createFieldFooterHandler,
+  createFieldHeaderHandler,
+  type FieldFooterProps,
+  type FieldHeaderProps,
+} from "@/codegen/targets/react/component/handlers/field";
+import { findAllInstances } from "@/utils/figma-node";
 
 const { createLocalSnippetElement } = createLocalSnippetHelper("checkbox");
 
@@ -36,6 +48,82 @@ export const createCheckboxHandler = (_ctx: ComponentHandlerDeps) =>
         }),
       };
 
-      return createLocalSnippetElement("Checkbox", commonProps);
+      return createLocalSnippetElement("Checkbox", commonProps, undefined, {
+        comment: "CheckboxGroup으로 묶어서 사용하는 것을 권장합니다.",
+      });
     },
   );
+
+export const createCheckboxGroupFieldHandler = (ctx: ComponentHandlerDeps) => {
+  const checkboxHandler = createCheckboxHandler(ctx);
+  const fieldHeaderHandler = createFieldHeaderHandler(ctx);
+  const fieldFooterHandler = createFieldFooterHandler(ctx);
+
+  return defineComponentHandler<CheckboxGroupFieldProperties>(
+    metadata.templateCheckboxField.key,
+    (node, traverse) => {
+      const { componentProperties: props } = node;
+
+      const items = findAllInstances<CheckboxProperties>({
+        node,
+        key: checkboxHandler.key,
+      });
+      const [fieldHeader] = findAllInstances<FieldHeaderProperties>({
+        node,
+        key: fieldHeaderHandler.key,
+      });
+      const [fieldFooter] = findAllInstances<FieldFooterProperties>({
+        node,
+        key: fieldFooterHandler.key,
+      });
+
+      // maxGraphemeCount / required / invalid can't be props of CheckboxGroup
+      const { required: _required, ...headerProps } =
+        props["Show Header#40606:8"].value && fieldHeader
+          ? (fieldHeaderHandler.transform(fieldHeader, traverse).props as FieldHeaderProps)
+          : {};
+      const {
+        maxGraphemeCount: _maxGraphemeCount,
+        invalid: _invalid,
+        ...footerProps
+      } = props["Show Footer#40606:9"].value && fieldFooter
+        ? (fieldFooterHandler.transform(fieldFooter, traverse).props as FieldFooterProps)
+        : {};
+
+      const commonProps = {
+        ...headerProps,
+        ...footerProps,
+      };
+
+      return createLocalSnippetElement(
+        "CheckboxGroup",
+        commonProps,
+        items.map((item) => {
+          const result = checkboxHandler.transform(item, traverse);
+
+          return {
+            ...result,
+            meta: {
+              ...result.meta,
+
+              // remove comment from individual Checkbox items
+              comment: undefined,
+            },
+          };
+        }),
+        {
+          comment: [
+            headerProps.label
+              ? undefined
+              : "label을 제공하지 않는 경우 aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.",
+            footerProps.errorMessage
+              ? "errorMessage를 표시하는 경우, 접근성을 위해 개별 Checkbox 중 무효한 항목에 invalid를 설정해주세요."
+              : undefined,
+          ]
+            .filter(Boolean)
+            .join(" "),
+        },
+      );
+    },
+  );
+};

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

@@ -52,7 +52,7 @@ export const createChipHandler = (ctx: ComponentHandlerDeps) => {
       .with("Avatar", () => {
         const [avatar] = findAllInstances<AvatarProperties>({
           node,
-          key: metadata.componentAvatar.key,
+          key: avatarHandler.key,
         });
         if (!avatar) return undefined;
 

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

@@ -1,5 +1,6 @@
 import { defineComponentHandler } from "@/codegen/core";
 import * as sets from "@/entities/data/__generated__/component-sets";
+import * as components from "@/entities/data/__generated__/components";
 import { createLocalSnippetHelper } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
 import {
@@ -23,14 +24,6 @@ import type { NormalizedTextNode } from "@/normalizer";
 
 const { createLocalSnippetElement } = createLocalSnippetHelper("field-button");
 
-// published but taken down now
-const FIELD_BUTTON_KEYS = {
-  selectField: "a2138764f60a9b5a35e22ff40bc6cd701c660260",
-  datePickerField: "c161d1326a1087258e4f762aa3c378c098308d98",
-  timePickerField: "e38df17cf1e0f96e09774b015739dfde30d46115",
-  addressPickerField: "4af06df28eca43fe2be5fe5ba5e6019587de9fac",
-} as const;
-
 export const createFieldButtonHandler = (ctx: ComponentHandlerDeps) => {
   const fieldHeaderHandler = createFieldHeaderHandler(ctx);
   const fieldFooterHandler = createFieldFooterHandler(ctx);
@@ -42,7 +35,7 @@ export const createFieldButtonHandler = (ctx: ComponentHandlerDeps) => {
 
       const [inputButton] = findAllInstances<InputButtonProperties>({
         node,
-        key: sets.privateComponentInputButton.key,
+        key: sets.componentInputButton.key,
       });
 
       const [clearButton] = findAllInstances<ActionButtonGhostProperties>({
@@ -52,19 +45,19 @@ export const createFieldButtonHandler = (ctx: ComponentHandlerDeps) => {
 
       const [fieldHeader] = findAllInstances<FieldHeaderProperties>({
         node,
-        key: sets.privateComponentFieldHeader.key,
+        key: sets.componentFieldHeader.key,
       });
       const [fieldFooter] = findAllInstances<FieldFooterProperties>({
         node,
-        key: sets.privateComponentFieldFooter.key,
+        key: sets.componentFieldFooter.key,
       });
 
       // maxGraphemeCount and required can't be props of FieldButton
-      const { required: __required, ...headerProps } =
+      const { required: _required, ...headerProps } =
         props["Show Header#40606:8"].value && fieldHeader
           ? (fieldHeaderHandler.transform(fieldHeader, traverse).props as FieldHeaderProps)
           : {};
-      const { maxGraphemeCount: __maxGraphemeCount, ...footerProps } =
+      const { maxGraphemeCount: _maxGraphemeCount, ...footerProps } =
         props["Show Footer#40606:9"].value && fieldFooter
           ? (fieldFooterHandler.transform(fieldFooter, traverse).props as FieldFooterProps)
           : {};
@@ -138,7 +131,7 @@ export const createSelectFieldHandler = (ctx: ComponentHandlerDeps) => {
   const fieldButtonHandler = createFieldButtonHandler(ctx);
 
   return defineComponentHandler<GenericFieldButtonProps>(
-    FIELD_BUTTON_KEYS.selectField,
+    components.privateTemplateSelectField.key,
     (node, traverse) => {
       const [fieldButton] = findAllInstances<FieldButtonProperties>({
         node,
@@ -154,7 +147,7 @@ export const createDatePickerFieldHandler = (ctx: ComponentHandlerDeps) => {
   const fieldButtonHandler = createFieldButtonHandler(ctx);
 
   return defineComponentHandler<GenericFieldButtonProps>(
-    FIELD_BUTTON_KEYS.datePickerField,
+    components.privateTemplateDatePickerField.key,
     (node, traverse) => {
       const [fieldButton] = findAllInstances<FieldButtonProperties>({
         node,
@@ -170,7 +163,7 @@ export const createTimePickerFieldHandler = (ctx: ComponentHandlerDeps) => {
   const fieldButtonHandler = createFieldButtonHandler(ctx);
 
   return defineComponentHandler<GenericFieldButtonProps>(
-    FIELD_BUTTON_KEYS.timePickerField,
+    components.privateTemplateTimePickerField.key,
     (node, traverse) => {
       const [fieldButton] = findAllInstances<FieldButtonProperties>({
         node,
@@ -186,7 +179,7 @@ export const createAddressFieldHandler = (ctx: ComponentHandlerDeps) => {
   const fieldButtonHandler = createFieldButtonHandler(ctx);
 
   return defineComponentHandler<GenericFieldButtonProps>(
-    FIELD_BUTTON_KEYS.addressPickerField,
+    components.privateTemplateAddressPickerField.key,
     (node, traverse) => {
       const [fieldButton] = findAllInstances<FieldButtonProperties>({
         node,

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

@@ -24,13 +24,13 @@ export const createFieldHeaderHandler = (ctx: ComponentHandlerDeps) => {
   const indicatorHandler = createFieldIndicatorHandler(ctx);
 
   return defineComponentHandler<FieldHeaderProperties>(
-    metadata.privateComponentFieldHeader.key,
+    metadata.componentFieldHeader.key,
     (node, traverse) => {
       const { componentProperties: props } = node;
 
       const [indicator] = findAllInstances<FieldIndicatorProperties>({
         node,
-        key: metadata.privateComponentFieldHeaderIndicator.key,
+        key: indicatorHandler.key,
       });
 
       // only returns some nice common props for Slider, TextField and more
@@ -94,7 +94,7 @@ export const createFieldFooterHandler = (ctx: ComponentHandlerDeps) => {
   const characterCountHandler = createFieldCharacterCountHandler(ctx);
 
   return defineComponentHandler<FieldFooterProperties>(
-    metadata.privateComponentFieldFooter.key,
+    metadata.componentFieldFooter.key,
     (node, traverse) => {
       const { componentProperties: props } = node;
 
@@ -110,7 +110,7 @@ export const createFieldFooterHandler = (ctx: ComponentHandlerDeps) => {
         .with("Character Count", () => {
           const [characterCount] = findAllInstances<FieldCharacterCountProperties>({
             node,
-            key: metadata.privateComponentFieldFooterCharacterCount.key,
+            key: characterCountHandler.key,
           });
 
           return {

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

@@ -11,7 +11,6 @@ export * from "./checkmark";
 export * from "./chip";
 export * from "./contextual-floating-button";
 export * from "./divider";
-export * from "./field";
 export * from "./field-button";
 export * from "./floating-action-button";
 export * from "./help-bubble";
@@ -30,6 +29,7 @@ export * from "./radiomark";
 export * from "./reaction-button";
 export * from "./result-section";
 export * from "./segmented-control";
+export * from "./select-box";
 export * from "./skeleton";
 export * from "./slider";
 export * from "./snackbar";

package/src/codegen/targets/react/component/handlers/legacy-select-box.ts

@@ -11,7 +11,7 @@ import type { ComponentHandlerDeps } from "../deps.interface";
 
 const { createLocalSnippetElement } = createLocalSnippetHelper("select-box");
 
-export const createLegacySelectBoxHandler = (_ctx: ComponentHandlerDeps) =>
+const createLegacySelectBoxHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<LegacySelectBoxProperties>(
     metadata.componentDeprecatedSelectBox.key,
     ({ componentProperties: props }) => {

package/src/codegen/targets/react/component/handlers/list-item.ts

@@ -14,26 +14,26 @@ import { match } from "ts-pattern";
 
 const { createLocalSnippetElement } = createLocalSnippetHelper("list");
 
-const PREFIX_KEYS = {
-  checkmark: "563275de82ea1282cece0c35c0cd8d1625bc3a9d",
-  radiomark: "51f7c0917ebc559d81e63d0639cb632a792f40de",
-  icon: components.componentListItemPrefixIcon.key,
-  avatar: "27e33754113178be97e07195528c4ea020b3d3b7",
-  image: "d06216ff143a960844799c0b8f9212628f78c69d",
-  custom: "b8059f5e0f85e0745fc61ff70f04571177c2cdfc",
-};
-
-const SUFFIX_KEYS = {
-  checkmark: "385ba8d607029e15e0d38ab415f783016488b185",
-  radiomark: "09871d64c5c30407da586fb34425c2e83e147c81",
-  chevron: components.componentListItemSuffixChevron.key,
-  switch: "0c26bd64e117e168b06eea69be903e4be762a728",
-  custom: "26b86c9f8965d38aa5a1181a5cdc89fa487988d1",
-  icon: components.componentListItemSuffixIcon.key,
-  chevronWithText: components.componentListItemSuffixChevronWithText.key,
-  iconButton: metadata.componentListItemSuffixIconButton.key,
-  actionButton: metadata.componentListItemSuffixActionButton.key,
-};
+const PREFIX_KEYS = [
+  components.componentListItemPrefixCheckbox.key,
+  components.componentListItemPrefixRadiomark.key,
+  components.componentListItemPrefixIcon.key,
+  components.componentListItemPrefixAvatar.key,
+  components.componentListItemPrefixImage.key,
+  components.componentListItemPrefixCustom.key,
+];
+
+const SUFFIX_KEYS = [
+  components.componentListItemSuffixCheckbox.key,
+  components.componentListItemSuffixRadiomark.key,
+  components.componentListItemSuffixChevron.key,
+  components.componentListItemSuffixSwitch.key,
+  components.componentListItemSuffixCustom.key,
+  components.componentListItemSuffixIcon.key,
+  components.componentListItemSuffixChevronWithText.key,
+  metadata.componentListItemSuffixIconButton.key,
+  metadata.componentListItemSuffixActionButton.key,
+];
 
 export const createListItemHandler = (ctx: ComponentHandlerDeps) =>
   defineComponentHandler<ListItemProperties>(metadata.componentListItem.key, (node, traverse) => {
@@ -55,7 +55,7 @@ export const createListItemHandler = (ctx: ComponentHandlerDeps) =>
     const prefixNode = (() => {
       if (props["Has Prefix#28452:85"].value === false) return null;
 
-      for (const key of Object.values(PREFIX_KEYS)) {
+      for (const key of PREFIX_KEYS) {
         const [found] = findAllInstances<ListItemPrefixIconProperties | {}>({ node, key });
 
         if (found) return found;
@@ -79,7 +79,7 @@ export const createListItemHandler = (ctx: ComponentHandlerDeps) =>
     const suffixNode = (() => {
       if (props["Has Suffix#28452:64"].value === false) return null;
 
-      for (const key of Object.values(SUFFIX_KEYS)) {
+      for (const key of SUFFIX_KEYS) {
         const [found] = findAllInstances<ListItemSuffixIconProperties | {}>({ node, key });
 
         if (found) return found;

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

@@ -1,4 +1,4 @@
-import type { RadioProperties } from "@/codegen/component-properties";
+import type { RadioGroupFieldProperties, RadioProperties } from "@/codegen/component-properties";
 import { defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import { createLocalSnippetHelper } from "../../element-factories";
@@ -6,26 +6,104 @@ import type { ComponentHandlerDeps } from "../deps.interface";
 import { handleSizeProp } from "../size";
 import { camelCase } from "change-case";
 import { match } from "ts-pattern";
+import {
+  createFieldFooterHandler,
+  createFieldHeaderHandler,
+  type FieldFooterProps,
+  type FieldHeaderProps,
+} from "@/codegen/targets/react/component/handlers/field";
+import { findAllInstances } from "@/utils/figma-node";
+import type { FieldFooterProperties, FieldHeaderProperties } from "@/codegen/component-properties";
 
 const { createLocalSnippetElement } = createLocalSnippetHelper("radio-group");
 
 export const createRadioGroupItemHandler = (_ctx: ComponentHandlerDeps) =>
-  defineComponentHandler<RadioProperties>(metadata.componentRadio.key, ({ componentProperties: props }) => {
-    const tone = match(props.Tone.value)
-      .with("Neutral", () => "neutral")
-      .with("🚫[Deprecated]Brand", () => "brand")
-      .exhaustive();
-
-    const commonProps = {
-      ...(props.State.value === "Disabled" && {
-        disabled: true,
-      }),
-      label: props["Label#49990:171"].value,
-      value: props["Label#49990:171"].value,
-      size: handleSizeProp(props.Size.value),
-      tone,
-      weight: camelCase(props.Weight.value),
-    };
-
-    return createLocalSnippetElement("RadioGroupItem", commonProps);
-  });
+  defineComponentHandler<RadioProperties>(
+    metadata.componentRadio.key,
+    ({ componentProperties: props }) => {
+      const tone = match(props.Tone.value)
+        .with("Neutral", () => "neutral")
+        .with("🚫[Deprecated]Brand", () => "brand")
+        .exhaustive();
+
+      const commonProps = {
+        ...(props.State.value === "Disabled" && {
+          disabled: true,
+        }),
+        label: props["Label#49990:171"].value,
+        value: props["Label#49990:171"].value,
+        size: handleSizeProp(props.Size.value),
+        tone,
+        weight: camelCase(props.Weight.value),
+      };
+
+      return createLocalSnippetElement("RadioGroupItem", commonProps, undefined, {
+        comment: "RadioGroup으로 묶어서 사용하세요.",
+      });
+    },
+  );
+
+export const createRadioGroupFieldHandler = (ctx: ComponentHandlerDeps) => {
+  const radioItemHandler = createRadioGroupItemHandler(ctx);
+  const fieldHeaderHandler = createFieldHeaderHandler(ctx);
+  const fieldFooterHandler = createFieldFooterHandler(ctx);
+
+  return defineComponentHandler<RadioGroupFieldProperties>(
+    metadata.templateRadioField.key,
+    (node, traverse) => {
+      const { componentProperties: props } = node;
+
+      const items = findAllInstances<RadioProperties>({
+        node,
+        key: radioItemHandler.key,
+      });
+      const [fieldHeader] = findAllInstances<FieldHeaderProperties>({
+        node,
+        key: fieldHeaderHandler.key,
+      });
+      const [fieldFooter] = findAllInstances<FieldFooterProperties>({
+        node,
+        key: fieldFooterHandler.key,
+      });
+
+      // maxGraphemeCount and required can't be props of RadioGroup
+      const { required: _required, ...headerProps } =
+        props["Show Header#40606:8"].value && fieldHeader
+          ? (fieldHeaderHandler.transform(fieldHeader, traverse).props as FieldHeaderProps)
+          : {};
+      const { maxGraphemeCount: _maxGraphemeCount, ...footerProps } =
+        props["Show Footer#40606:9"].value && fieldFooter
+          ? (fieldFooterHandler.transform(fieldFooter, traverse).props as FieldFooterProps)
+          : {};
+
+      const selectedItem = items.find((item) => item.componentProperties.Selected.value === "True");
+
+      const commonProps = {
+        ...headerProps,
+        ...footerProps,
+
+        ...(selectedItem && {
+          defaultValue: selectedItem.componentProperties["Label#49990:171"].value,
+        }),
+      };
+
+      return createLocalSnippetElement(
+        "RadioGroup",
+        commonProps,
+        items.map((item) => {
+          const result = radioItemHandler.transform(item, traverse);
+
+          return {
+            ...result,
+            meta: {
+              ...result.meta,
+
+              // remove comment from individual RadioGroupItem items
+              comment: undefined,
+            },
+          };
+        }),
+      );
+    },
+  );
+};