@seed-design/figma 1.3.13 → 1.3.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/figma",
-  "version": "1.3.13",
+  "version": "1.3.14",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -39,14 +39,14 @@
     "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.11",
+    "@seed-design/css": "1.2.12",
     "change-case": "^5.4.4",
     "ts-pattern": "^5.7.0"
   },
   "devDependencies": {
     "@figma/plugin-typings": "^1.123.0",
     "@figma/rest-api-spec": "^0.36.0",
-    "@karrotmarket/icon-data": "^1.28.0",
+    "@karrotmarket/icon-data": "^1.34.0",
     "@seed-design/figma-extractor": "^1.1.1",
     "typescript": "^6.0.0"
   },

package/src/codegen/component-properties.ts

@@ -43,15 +43,15 @@ export type CheckboxProperties = InferComponentDefinition<
 >;
 
 export type CheckboxGroupFieldProperties = InferComponentDefinition<
-  typeof sets.templateCheckboxField.componentPropertyDefinitions
+  typeof sets.componentCheckboxField.componentPropertyDefinitions
 >;
 
 export type CheckmarkProperties = InferComponentDefinition<
   typeof sets.componentCheckmark.componentPropertyDefinitions
 >;
 
-export type ChipProperties = InferComponentDefinition<
-  typeof sets.componentChip.componentPropertyDefinitions
+export type LegacyChipProperties = InferComponentDefinition<
+  typeof sets.componentDeprecatedChip.componentPropertyDefinitions
 >;
 
 export type ChipIconSuffixProperties = InferComponentDefinition<
@@ -175,7 +175,7 @@ export type RadioProperties = InferComponentDefinition<
 >;
 
 export type RadioGroupFieldProperties = InferComponentDefinition<
-  typeof sets.templateRadioField.componentPropertyDefinitions
+  typeof sets.componentRadioField.componentPropertyDefinitions
 >;
 
 export type RadiomarkProperties = InferComponentDefinition<
@@ -199,7 +199,7 @@ export type SegmentedControlItemProperties = InferComponentDefinition<
 >;
 
 export type SelectBoxGroupFieldProperties = InferComponentDefinition<
-  typeof sets.templateSelectBoxField.componentPropertyDefinitions
+  typeof sets.componentSelectBoxField.componentPropertyDefinitions
 >;
 
 export type SelectBoxGroupProperties = InferComponentDefinition<
@@ -231,7 +231,7 @@ export type SliderTicksProperties = InferComponentDefinition<
 >;
 
 export type SliderFieldProperties = InferComponentDefinition<
-  typeof sets.templateSliderField.componentPropertyDefinitions
+  typeof sets.componentSliderField.componentPropertyDefinitions
 >;
 
 export type SnackbarProperties = InferComponentDefinition<
@@ -299,7 +299,7 @@ export type TagGroupItemProperties = InferComponentDefinition<
 >;
 
 export type TextInputFieldProperties = InferComponentDefinition<
-  typeof sets.templateTextField.componentPropertyDefinitions
+  typeof sets.componentTextField.componentPropertyDefinitions
 >;
 
 export type TextInputOutlineProperties = InferComponentDefinition<
@@ -327,7 +327,7 @@ export type TextInputUnderlineProperties = InferComponentDefinition<
 >;
 
 export type TextareaFieldProperties = InferComponentDefinition<
-  typeof sets.templateTextareaField.componentPropertyDefinitions
+  typeof sets.componentMultilineTextField.componentPropertyDefinitions
 >;
 
 export type TextareaProperties = InferComponentDefinition<
@@ -335,7 +335,7 @@ export type TextareaProperties = InferComponentDefinition<
 >;
 
 export type FieldButtonProperties = InferComponentDefinition<
-  typeof sets.templateFieldButton.componentPropertyDefinitions
+  typeof sets.componentFieldButton.componentPropertyDefinitions
 >;
 
 export type InputButtonProperties = InferComponentDefinition<

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

@@ -154,7 +154,7 @@ export const createAppBarHandler = (ctx: ComponentHandlerDeps) => {
 export const createAppBarPresetHandler = (ctx: ComponentHandlerDeps) => {
   const appBarHandler = createAppBarHandler(ctx);
 
-  return defineComponentHandler(metadata.templateTopNavigationPreset.key, (node, traverse) => {
+  return defineComponentHandler(metadata.componentTopNavigationPreset.key, (node, traverse) => {
     const [appBarNode] = findAllInstances<AppBarProperties>({
       node,
       key: metadata.componentTopNavigation.key,

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

@@ -60,7 +60,7 @@ export const createCheckboxGroupFieldHandler = (ctx: ComponentHandlerDeps) => {
   const fieldFooterHandler = createFieldFooterHandler(ctx);
 
   return defineComponentHandler<CheckboxGroupFieldProperties>(
-    metadata.templateCheckboxField.key,
+    metadata.componentCheckboxField.key,
     (node, traverse) => {
       const { componentProperties: props } = node;
 

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

@@ -29,7 +29,7 @@ export const createFieldButtonHandler = (ctx: ComponentHandlerDeps) => {
   const fieldFooterHandler = createFieldFooterHandler(ctx);
 
   return defineComponentHandler<FieldButtonProperties>(
-    sets.templateFieldButton.key,
+    sets.componentFieldButton.key,
     (node, traverse) => {
       const props = node.componentProperties;
 
@@ -131,7 +131,7 @@ export const createSelectFieldHandler = (ctx: ComponentHandlerDeps) => {
   const fieldButtonHandler = createFieldButtonHandler(ctx);
 
   return defineComponentHandler<GenericFieldButtonProps>(
-    components.privateTemplateSelectField.key,
+    components.privateComponentSelectField.key,
     (node, traverse) => {
       const [fieldButton] = findAllInstances<FieldButtonProperties>({
         node,
@@ -147,7 +147,7 @@ export const createDatePickerFieldHandler = (ctx: ComponentHandlerDeps) => {
   const fieldButtonHandler = createFieldButtonHandler(ctx);
 
   return defineComponentHandler<GenericFieldButtonProps>(
-    components.privateTemplateDatePickerField.key,
+    components.privateComponentDatePickerField.key,
     (node, traverse) => {
       const [fieldButton] = findAllInstances<FieldButtonProperties>({
         node,
@@ -163,7 +163,7 @@ export const createTimePickerFieldHandler = (ctx: ComponentHandlerDeps) => {
   const fieldButtonHandler = createFieldButtonHandler(ctx);
 
   return defineComponentHandler<GenericFieldButtonProps>(
-    components.privateTemplateTimePickerField.key,
+    components.privateComponentTimePickerField.key,
     (node, traverse) => {
       const [fieldButton] = findAllInstances<FieldButtonProperties>({
         node,
@@ -179,7 +179,7 @@ export const createAddressFieldHandler = (ctx: ComponentHandlerDeps) => {
   const fieldButtonHandler = createFieldButtonHandler(ctx);
 
   return defineComponentHandler<GenericFieldButtonProps>(
-    components.privateTemplateAddressPickerField.key,
+    components.privateComponentAddressPickerField.key,
     (node, traverse) => {
       const [fieldButton] = findAllInstances<FieldButtonProperties>({
         node,

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

@@ -8,7 +8,7 @@ export * from "./bottom-sheet";
 export * from "./callout";
 export * from "./checkbox";
 export * from "./checkmark";
-export * from "./chip";
+export * from "./legacy-chip";
 export * from "./content-placeholder";
 export * from "./contextual-floating-button";
 export * from "./divider";

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

@@ -0,0 +1,96 @@
+import type {
+  AvatarProperties,
+  ChipIconSuffixProperties,
+  LegacyChipProperties,
+} 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 { match } from "ts-pattern";
+import { createLocalSnippetHelper, createSeedReactElement } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import { handleSizeProp } from "../size";
+import { camelCase } from "change-case";
+import { findAllInstances } from "@/utils/figma-node";
+import { createAvatarHandler } from "@/codegen/targets/react/component/handlers/avatar";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("chip");
+
+const createChipIconSuffixHandler = (ctx: ComponentHandlerDeps) => {
+  return defineComponentHandler<ChipIconSuffixProperties>(
+    components.componentChipSuffixIcon.key,
+    ({ componentProperties }) => {
+      return createLocalSnippetElement(
+        "Chip.SuffixIcon",
+        undefined,
+        createSeedReactElement("Icon", {
+          svg: ctx.iconHandler.transform(componentProperties["Icon#33203:0"]),
+        }),
+      );
+    },
+  );
+};
+
+export const createLegacyChipHandler = (ctx: ComponentHandlerDeps) => {
+  const avatarHandler = createAvatarHandler(ctx);
+  const iconSuffixHandler = createChipIconSuffixHandler(ctx);
+
+  return defineComponentHandler<LegacyChipProperties>(
+    metadata.componentDeprecatedChip.key,
+    (node, traverse) => {
+      const props = node.componentProperties;
+
+      const prefix = match(props["Prefix Type"].value)
+        .with("None", "Image", () => undefined)
+        .with("Icon", () =>
+          createLocalSnippetElement(
+            "Chip.PrefixIcon",
+            undefined,
+            createSeedReactElement("Icon", {
+              svg: ctx.iconHandler.transform(props["Prefix Icon#8722:0"]),
+            }),
+          ),
+        )
+        .with("Avatar", () => {
+          const [avatar] = findAllInstances<AvatarProperties>({
+            node,
+            key: avatarHandler.key,
+          });
+          if (!avatar) return undefined;
+
+          return createLocalSnippetElement(
+            "Chip.PrefixAvatar",
+            undefined,
+            avatarHandler.transform(avatar, traverse),
+          );
+        })
+        .exhaustive();
+
+      const label = createLocalSnippetElement("Chip.Label", undefined, props["Label#7185:0"].value);
+
+      const [suffixIcon] = findAllInstances<ChipIconSuffixProperties>({
+        node,
+        key: components.componentChipSuffixIcon.key,
+      });
+
+      const commonProps = {
+        variant: camelCase(props.Variant.value),
+        size: handleSizeProp(props.Size.value),
+        layout: props["Label#7185:0"].value ? "withText" : "iconOnly",
+        ...(props.Selected.value === "True" && {
+          defaultChecked: true,
+        }),
+        ...(props.State.value === "Disabled" && {
+          disabled: true,
+        }),
+      };
+
+      return createLocalSnippetElement(
+        "Chip.Toggle",
+        commonProps,
+        [prefix, label, suffixIcon ? iconSuffixHandler.transform(suffixIcon, traverse) : undefined],
+        { comment: "목적에 따라 Chip.Button, Chip.RadioItem 등으로 바꿔 사용하세요." },
+      );
+    },
+  );
+};

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

@@ -49,7 +49,7 @@ export const createRadioGroupFieldHandler = (ctx: ComponentHandlerDeps) => {
   const fieldFooterHandler = createFieldFooterHandler(ctx);
 
   return defineComponentHandler<RadioGroupFieldProperties>(
-    metadata.templateRadioField.key,
+    metadata.componentRadioField.key,
     (node, traverse) => {
       const { componentProperties: props } = node;
 

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

@@ -266,7 +266,7 @@ export const createSelectBoxGroupFieldHandler = (ctx: ComponentHandlerDeps) => {
   const selectBoxGroupHandler = createSelectBoxGroupHandler(ctx);
 
   return defineComponentHandler<SelectBoxGroupFieldProperties>(
-    metadata.templateSelectBoxField.key,
+    metadata.componentSelectBoxField.key,
     (node, traverse) => {
       const { componentProperties: props } = node;
 

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

@@ -36,7 +36,7 @@ export const createSliderFieldHandler = (ctx: ComponentHandlerDeps) => {
   const fieldFooterHandler = createFieldFooterHandler(ctx);
 
   return defineComponentHandler<SliderFieldProperties>(
-    metadata.templateSliderField.key,
+    metadata.componentSliderField.key,
     (node, traverse) => {
       const props = node.componentProperties;
 

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

@@ -1,7 +1,7 @@
 import { createLocalSnippetHelper } from "../../element-factories";
 import type {
-  ChipProperties,
   ChipTabsTriggerProperties,
+  LegacyChipProperties,
   TabsChipWrapperProperties,
   TabsLineTriggerFillProperties,
   TabsLineTriggerHugProperties,
@@ -217,7 +217,10 @@ const createChipTabsHandler = (_ctx: ComponentHandlerDeps) => {
 
       const triggers = nodes.map((node) => {
         // this is redundant; can this be better?
-        const [chip] = findAllInstances<ChipProperties>({ node, key: metadata.componentChip.key });
+        const [chip] = findAllInstances<LegacyChipProperties>({
+          node,
+          key: metadata.componentDeprecatedChip.key,
+        });
         if (!chip) throw new Error("Chip not found in ChipTabsTrigger");
 
         return {
@@ -230,9 +233,9 @@ const createChipTabsHandler = (_ctx: ComponentHandlerDeps) => {
         (node) => node.componentProperties.State.value === "Selected",
       );
       const [selectedChip] = selectedTrigger
-        ? findAllInstances<ChipProperties>({
+        ? findAllInstances<LegacyChipProperties>({
             node: selectedTrigger,
-            key: metadata.componentChip.key,
+            key: metadata.componentDeprecatedChip.key,
           })
         : [undefined];
       if (!selectedChip) throw new Error("Chip not found in ChipTabsTrigger");
@@ -273,7 +276,10 @@ const createChipTabsTriggerHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<ChipTabsTriggerProperties>(
     metadata.privateComponentTabItemChip.key,
     (node) => {
-      const [chip] = findAllInstances<ChipProperties>({ node, key: metadata.componentChip.key });
+      const [chip] = findAllInstances<LegacyChipProperties>({
+        node,
+        key: metadata.componentDeprecatedChip.key,
+      });
       if (!chip) throw new Error("Chip not found in ChipTabsTrigger");
 
       const props = node.componentProperties;

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

@@ -31,7 +31,7 @@ export const createTextInputFieldHandler = (ctx: ComponentHandlerDeps) => {
   const fieldFooterHandler = createFieldFooterHandler(ctx);
 
   return defineComponentHandler<TextInputFieldProperties>(
-    metadata.templateTextField.key,
+    metadata.componentTextField.key,
     (node, traverse) => {
       const props = node.componentProperties;
 
@@ -189,7 +189,7 @@ export const createTextareaFieldHandler = (ctx: ComponentHandlerDeps) => {
   const fieldFooterHandler = createFieldFooterHandler(ctx);
 
   return defineComponentHandler<TextareaFieldProperties>(
-    metadata.templateTextareaField.key,
+    metadata.componentMultilineTextField.key,
     (node, traverse) => {
       const [textarea] = findAllInstances<TextareaProperties>({
         node,