@seed-design/figma 0.0.4 → 0.0.6

package/src/{component/handlers → codegen/domain/seed-component/transformers}/app-bar.ts

@@ -1,113 +1,60 @@
+import { defineComponentTransformer } from "@/codegen/core";
 import { match } from "ts-pattern";
-import * as metadata from "../../data/__generated__/component-sets";
-import { createIconTagNameFromKey } from "../../icon";
-import { createElement } from "../../jsx";
-import { findAll, findAllInstances, findOne } from "../../utils/figma-node";
-import type { NormalizedInstanceNode, NormalizedTextNode } from "../../normalizer";
+import * as metadata from "../../../data/__generated__/component-sets";
+import { createElement } from "../../../core/jsx";
+import { findAll, findAllInstances, findOne } from "../../../../utils/figma-node";
+import type { NormalizedInstanceNode, NormalizedTextNode } from "../../../../normalizer";
 import type {
   AppBarLeftProperties,
   AppBarMainProperties,
   AppBarProperties,
   AppBarRightProperties,
-} from "../type";
-import type { ComponentHandler } from "../type-helper";
-
-export const appBarHandler: ComponentHandler<AppBarProperties> = {
-  key: metadata.standardNavigation.key,
-  codegen: async (node) => {
+} from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+
+const APP_BAR_MAIN_KEY = "336b49b26c3933485d87cc460b06c390976ea58e";
+const createAppBarMainTransformer = (_ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<AppBarMainProperties>(
+    APP_BAR_MAIN_KEY,
+    ({ componentProperties: props }) => {
+      const { title, subtitle, layout } = match(props.Type.value)
+        .with("Title", () => ({
+          title: props["Title#16944:0"].value,
+          subtitle: undefined,
+          layout: undefined,
+        }))
+        .with("Title-Subtitle", () => ({
+          title: props["Title#16944:0"].value,
+          subtitle: props["Subtitle#16958:9"].value,
+          layout: "withSubtitle",
+        }))
+        .otherwise(() => ({
+          title: undefined,
+          subtitle: undefined,
+          layout: undefined,
+        }));
+
+      const commonProps = {
+        title,
+        subtitle,
+        layout,
+      };
+
+      return createElement(
+        "AppBarMain",
+        commonProps,
+        undefined,
+        title === undefined ? "Title을 제공해주세요." : undefined,
+      );
+    },
+  );
+
+const APP_BAR_LEFT_KEY = "e5d2e47052a22395db79f195a0991a570dc1b6c9";
+const createAppBarLeftTransformer = (ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<AppBarLeftProperties>(APP_BAR_LEFT_KEY, (node) => {
     const props = node.componentProperties;
 
-    const theme = (() => {
-      switch (props.OS.value) {
-        case "Android":
-          return "android";
-        case "iOS":
-          return "cupertino";
-      }
-    })();
-
-    const tone = (() => {
-      switch (props.Variant.value) {
-        case "Layer Default":
-          return "layer";
-        case "Transparent":
-          return "transparent";
-      }
-    })();
-
-    const mainNode = await findAllInstances<AppBarMainProperties>({
-      key: appBarMainHandler.key,
-      node,
-    });
-    const onlyMainNode = mainNode.length === 1 ? mainNode[0] : undefined;
-    const main = onlyMainNode ? await appBarMainHandler.codegen(onlyMainNode) : undefined;
-
-    const leftNode = await findAllInstances<AppBarLeftProperties>({
-      key: appBarLeftHandler.key,
-      node,
-    });
-    const onlyLeftNode = leftNode.length === 1 ? leftNode[0] : undefined;
-    const left = onlyLeftNode ? await appBarLeftHandler.codegen(onlyLeftNode) : undefined;
-
-    const rightNode = await findAllInstances<AppBarRightProperties>({
-      key: appBarRightHandler.key,
-      node,
-    });
-    const onlyRightNode = rightNode.length === 1 ? rightNode[0] : undefined;
-    const right = onlyRightNode ? await appBarRightHandler.codegen(onlyRightNode) : undefined;
-
-    return createElement(
-      "AppBar",
-      { theme, tone },
-      [left, main, right].filter(Boolean),
-      tone === "transparent"
-        ? `<AppScreen layerOffsetTop="none">으로 상단 패딩을 제거할 수 있습니다.`
-        : undefined,
-    );
-  },
-};
-
-const appBarMainHandler: ComponentHandler<AppBarMainProperties> = {
-  key: "336b49b26c3933485d87cc460b06c390976ea58e",
-  codegen: async ({ componentProperties: props }) => {
-    const { title, subtitle, layout } = match(props.Type.value)
-      .with("Title", () => ({
-        title: props["Title#16944:0"].value,
-        subtitle: undefined,
-        layout: undefined,
-      }))
-      .with("Title-Subtitle", () => ({
-        title: props["Title#16944:0"].value,
-        subtitle: props["Subtitle#16958:9"].value,
-        layout: "withSubtitle",
-      }))
-      .otherwise(() => ({
-        title: undefined,
-        subtitle: undefined,
-        layout: undefined,
-      }));
-
-    const commonProps = {
-      title,
-      subtitle,
-      layout,
-    };
-
-    return createElement(
-      "AppBarMain",
-      commonProps,
-      undefined,
-      title === undefined ? "Title을 제공해주세요." : undefined,
-    );
-  },
-};
-
-const appBarLeftHandler: ComponentHandler<AppBarLeftProperties> = {
-  key: "e5d2e47052a22395db79f195a0991a570dc1b6c9",
-  codegen: async (node) => {
-    const props = node.componentProperties;
-
-    const children = await (async () => {
+    const children = (() => {
       switch (props.Action.value) {
         case "Back":
           return createElement("AppBarBackButton", undefined);
@@ -125,7 +72,7 @@ const appBarLeftHandler: ComponentHandler<AppBarLeftProperties> = {
             "AppBarIconButton",
             undefined,
             iconComponentKey
-              ? createElement(createIconTagNameFromKey(iconComponentKey))
+              ? createElement(ctx.iconService.createIconTagName(iconComponentKey))
               : undefined,
             iconComponentKey === undefined
               ? "아이콘과, aria-label 또는 aria-labelledby를 제공해주세요."
@@ -136,15 +83,14 @@ const appBarLeftHandler: ComponentHandler<AppBarLeftProperties> = {
     })();
 
     return createElement("AppBarLeft", undefined, children);
-  },
-};
+  });
 
-const appBarRightHandler: ComponentHandler<AppBarRightProperties> = {
-  key: "9e157fc2d1f89ffee938a5bc62f4a58064fec44e",
-  codegen: async (node) => {
+const APP_BAR_RIGHT_KEY = "9e157fc2d1f89ffee938a5bc62f4a58064fec44e";
+const createAppBarRightTransformer = (ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<AppBarRightProperties>(APP_BAR_RIGHT_KEY, (node) => {
     const props = node.componentProperties;
 
-    const children = await (async () => {
+    const children = (() => {
       switch (props.Type.value) {
         case "1 Text": {
           const textNode = findOne(
@@ -167,7 +113,7 @@ const appBarRightHandler: ComponentHandler<AppBarRightProperties> = {
               "AppBarIconButton",
               undefined,
               iconComponentKey
-                ? createElement(createIconTagNameFromKey(iconComponentKey))
+                ? createElement(ctx.iconService.createIconTagName(iconComponentKey))
                 : undefined,
               iconComponentKey === undefined
                 ? "아이콘과, aria-label 또는 aria-labelledby를 제공해주세요."
@@ -179,5 +125,62 @@ const appBarRightHandler: ComponentHandler<AppBarRightProperties> = {
     })();
 
     return createElement("AppBarRight", undefined, children);
-  },
+  });
+
+export const createAppBarTransformer = (ctx: SeedComponentTransformerDeps) => {
+  const appBarMainTransformer = createAppBarMainTransformer(ctx);
+  const appBarLeftTransformer = createAppBarLeftTransformer(ctx);
+  const appBarRightTransformer = createAppBarRightTransformer(ctx);
+
+  return defineComponentTransformer<AppBarProperties>(metadata.standardNavigation.key, (node) => {
+    const props = node.componentProperties;
+
+    const theme = (() => {
+      switch (props.OS.value) {
+        case "Android":
+          return "android";
+        case "iOS":
+          return "cupertino";
+      }
+    })();
+
+    const tone = (() => {
+      switch (props.Variant.value) {
+        case "Layer Default":
+          return "layer";
+        case "Transparent":
+          return "transparent";
+      }
+    })();
+
+    const mainNode = findAllInstances<AppBarMainProperties>({
+      key: appBarMainTransformer.key,
+      node,
+    });
+    const onlyMainNode = mainNode.length === 1 ? mainNode[0] : undefined;
+    const main = onlyMainNode ? appBarMainTransformer.transform(onlyMainNode) : undefined;
+
+    const leftNode = findAllInstances<AppBarLeftProperties>({
+      key: appBarLeftTransformer.key,
+      node,
+    });
+    const onlyLeftNode = leftNode.length === 1 ? leftNode[0] : undefined;
+    const left = onlyLeftNode ? appBarLeftTransformer.transform(onlyLeftNode) : undefined;
+
+    const rightNode = findAllInstances<AppBarRightProperties>({
+      key: appBarRightTransformer.key,
+      node,
+    });
+    const onlyRightNode = rightNode.length === 1 ? rightNode[0] : undefined;
+    const right = onlyRightNode ? appBarRightTransformer.transform(onlyRightNode) : undefined;
+
+    return createElement(
+      "AppBar",
+      { theme, tone },
+      [left, main, right].filter(Boolean),
+      tone === "transparent"
+        ? `<AppScreen layerOffsetTop="none">으로 상단 패딩을 제거할 수 있습니다.`
+        : undefined,
+    );
+  });
 };

package/src/codegen/domain/seed-component/transformers/avatar-stack.ts

@@ -0,0 +1,30 @@
+import { defineComponentTransformer } from "@/codegen/core";
+import * as metadata from "../../../data/__generated__/component-sets";
+import { createElement } from "../../../core/jsx";
+import { findAllInstances } from "../../../../utils/figma-node";
+import type { AvatarProperties, AvatarStackProperties } from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+import { createAvatarTransformer } from "./avatar";
+
+export const createAvatarStackTransformer = (ctx: SeedComponentTransformerDeps) => {
+  const avatarTransformer = createAvatarTransformer(ctx);
+
+  return defineComponentTransformer<AvatarStackProperties>(metadata.avatarStack.key, (node) => {
+    const avatarNodes = findAllInstances<AvatarProperties>({
+      node,
+      key: avatarTransformer.key,
+    });
+
+    const { componentProperties: props } = node;
+
+    const commonProps = {
+      size: props.Size.value,
+      // TODO: 구현될 예정
+      // topItem: camelCase(props["Top Item"].value),
+    };
+
+    const avatarStackChildren = avatarNodes.map(avatarTransformer.transform);
+
+    return createElement("AvatarStack", commonProps, avatarStackChildren);
+  });
+};

package/src/codegen/domain/seed-component/transformers/avatar.ts

@@ -0,0 +1,39 @@
+import { defineComponentTransformer } from "@/codegen/core";
+import * as metadata from "../../../data/__generated__/component-sets";
+import { createElement } from "../../../core/jsx";
+import { findAllInstances } from "../../../../utils/figma-node";
+import type { AvatarProperties, IdentityPlaceholderProperties } from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+import { createIdentityPlaceholderTransformer } from "./identity-placeholder";
+
+export const createAvatarTransformer = (ctx: SeedComponentTransformerDeps) => {
+  const identityPlaceholderTransformer = createIdentityPlaceholderTransformer(ctx);
+
+  return defineComponentTransformer<AvatarProperties>(metadata.avatar.key, (node) => {
+    const [placeholder] = findAllInstances<IdentityPlaceholderProperties>({
+      node,
+      key: identityPlaceholderTransformer.key,
+    });
+    const { componentProperties: props } = node;
+
+    const avatarHasSrc = props["Show Image#71850:57"].value;
+
+    const commonProps = {
+      ...(avatarHasSrc && {
+        // Placeholder
+        src: `https://placehold.co/${props.Size.value}x${props.Size.value}`,
+      }),
+      ...(placeholder && {
+        fallback: identityPlaceholderTransformer.transform(placeholder),
+      }),
+      size: props.Size.value,
+    };
+
+    return createElement(
+      "Avatar",
+      commonProps,
+      props["Show Badge#1398:26"].value ? createElement("AvatarBadge", {}) : undefined,
+      avatarHasSrc ? "alt 텍스트를 제공해야 합니다." : undefined,
+    );
+  });
+};

package/src/codegen/domain/seed-component/transformers/badge.ts

@@ -0,0 +1,22 @@
+import { defineComponentTransformer } from "@/codegen/core";
+import { camelCase } from "change-case";
+import * as metadata from "../../../data/__generated__/component-sets";
+import { createElement } from "../../../core/jsx";
+import { handleSizeProp } from "../size";
+import type { BadgeProperties } from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+
+export const createBadgeTransformer = (_ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<BadgeProperties>(
+    metadata.badge.key,
+    ({ componentProperties: props }) => {
+      const commonProps = {
+        size: handleSizeProp(props.Size.value),
+        tone: camelCase(props.Tone.value),
+        variant: camelCase(props.Variant.value),
+        shape: camelCase(props.Shape.value),
+      };
+
+      return createElement("Badge", commonProps, props["Label#1584:0"].value);
+    },
+  );

package/src/codegen/domain/seed-component/transformers/callout.ts

@@ -0,0 +1,90 @@
+import { defineComponentTransformer } from "@/codegen/core";
+import { camelCase } from "change-case";
+import * as metadata from "../../../data/__generated__/component-sets";
+import { createElement } from "../../../core/jsx";
+import type { NormalizedTextNode } from "../../../../normalizer";
+import type { CalloutProperties } from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+
+export const createCalloutTransformer = (ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<CalloutProperties>(
+    metadata.callout.key,
+    ({ componentProperties: props, children }) => {
+      const tag = (() => {
+        switch (props.Interaction.value) {
+          case "Default":
+            return "Callout";
+          case "Actionable":
+            return "ActionableCallout";
+          case "Dismissible":
+            return "DismissibleCallout";
+          default:
+            return "Callout";
+        }
+      })();
+
+      const textNode = children.find((child) => child.type === "TEXT") as NormalizedTextNode | null;
+
+      if (!textNode) {
+        return createElement(tag, undefined, undefined, "내용을 제공해주세요.");
+      }
+
+      const slices = textNode.segments;
+
+      let title: string | undefined;
+      let description: string | undefined;
+      let linkLabel: string | undefined;
+
+      switch (slices.length) {
+        case 1: {
+          description = slices[0]?.characters.trim();
+
+          break;
+        }
+        case 2: {
+          const firstSlice = slices[0];
+          const secondSlice = slices[1];
+
+          if (firstSlice?.style.fontWeight === 700) {
+            title = firstSlice?.characters.trim();
+            description = secondSlice?.characters.trim();
+            break;
+          }
+
+          description = firstSlice?.characters.trim();
+
+          if (tag !== "ActionableCallout") {
+            linkLabel = secondSlice?.characters.trim();
+          }
+
+          break;
+        }
+        case 3: {
+          title = slices[0]?.characters.trim();
+          description = slices[1]?.characters.trim();
+
+          if (tag !== "ActionableCallout") {
+            linkLabel = slices[2]?.characters.trim();
+          }
+
+          break;
+        }
+      }
+
+      const commonProps = {
+        tone: camelCase(props.Tone.value),
+        title,
+        description,
+        linkProps: {
+          children: linkLabel,
+        },
+        ...(props["Icon#12598:210"].value && {
+          prefixIcon: createElement(
+            ctx.iconService.createIconTagName(props["Icon#12598:210"].componentKey),
+          ),
+        }),
+      };
+
+      return createElement(tag, commonProps);
+    },
+  );

package/src/codegen/domain/seed-component/transformers/checkbox.ts

@@ -0,0 +1,34 @@
+import { defineComponentTransformer } from "@/codegen/core";
+import { camelCase } from "change-case";
+import * as metadata from "../../../data/__generated__/component-sets";
+import { createElement } from "../../../core/jsx";
+import { handleSizeProp } from "../size";
+import type { CheckboxProperties } from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+
+export const createCheckboxTransformer = (_ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<CheckboxProperties>(
+    metadata.checkbox.key,
+    ({ componentProperties: props }) => {
+      const states = props.State.value.split("-");
+
+      const commonProps = {
+        label: props["Label#49990:0"].value,
+        weight: camelCase(props.Weight.value),
+        variant: camelCase(props.Shape.value),
+        size: handleSizeProp(props.Size.value),
+        ...(states.includes("Selected") && {
+          defaultChecked: true,
+        }),
+        ...(states.includes("Indeterminate") && {
+          defaultChecked: true,
+          indeterminate: true,
+        }),
+        ...(states.includes("Disabled") && {
+          disabled: true,
+        }),
+      };
+
+      return createElement("Checkbox", commonProps);
+    },
+  );

package/src/codegen/domain/seed-component/transformers/chip-tabs.ts

@@ -0,0 +1,55 @@
+import { defineComponentTransformer } from "@/codegen/core";
+import { camelCase } from "change-case";
+import * as metadata from "../../../data/__generated__/component-sets";
+import { createElement } from "../../../core/jsx";
+import { findAllInstances } from "../../../../utils/figma-node";
+import type { ChipTabsItemProperties, ChipTabsProperties } from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+
+const CHIP_TABS_ITEM_KEY = "fa80168b02051fbb0ba032238bd76d840dbe2e15";
+const createChipTabsItemTransformer = (_ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<ChipTabsItemProperties>(
+    CHIP_TABS_ITEM_KEY,
+    ({ componentProperties: props }) => {
+      const states = props.State.value.split("-");
+
+      const commonProps = {
+        value: props["Label#8876:0"].value,
+        ...(states.includes("Disabled") && {
+          disabled: true,
+        }),
+      };
+
+      return createElement("ChipTabsTrigger", commonProps, props["Label#8876:0"].value);
+    },
+  );
+
+export const createChipTabsTransformer = (ctx: SeedComponentTransformerDeps) => {
+  const chipTabsItemTransformer = createChipTabsItemTransformer(ctx);
+
+  return defineComponentTransformer<ChipTabsProperties>(metadata.chipTablist.key, (node) => {
+    const chipTabsItems = findAllInstances<ChipTabsItemProperties>({
+      node,
+      key: chipTabsItemTransformer.key,
+    });
+
+    const selectedChipTabsItem = chipTabsItems.find((chipTabsItem) =>
+      chipTabsItem.componentProperties.State.value.split("-").includes("Selected"),
+    );
+
+    const chipTabsList = createElement(
+      "ChipTabsList",
+      undefined,
+      chipTabsItems.map(chipTabsItemTransformer.transform),
+    );
+
+    const commonProps = {
+      variant: camelCase(node.componentProperties.Variant.value),
+      ...(selectedChipTabsItem && {
+        defaultValue: selectedChipTabsItem.componentProperties["Label#8876:0"].value,
+      }),
+    };
+
+    return createElement("ChipTabs", commonProps, chipTabsList);
+  });
+};

package/src/codegen/domain/seed-component/transformers/control-chip.ts

@@ -0,0 +1,86 @@
+import { defineComponentTransformer } from "@/codegen/core";
+import { match } from "ts-pattern";
+import * as metadata from "../../../data/__generated__/component-sets";
+import { createElement } from "../../../core/jsx";
+import { handleSizeProp } from "../size";
+import type { ControlChipProperties } from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+
+export const createControlChipTransformer = (ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<ControlChipProperties>(
+    metadata.controlChip.key,
+    ({ componentProperties: props }) => {
+      const states = props.State.value.split("-");
+
+      const { layout, children } = match(props.Layout.value)
+        .with("Icon Only", () => ({
+          layout: "iconOnly",
+          children: [
+            createElement("Icon", {
+              svg: createElement(
+                ctx.iconService.createIconTagName(props["Icon#8722:41"].componentKey),
+              ),
+            }),
+          ],
+        }))
+        .with("Icon First", () => ({
+          layout: "withText",
+          children: [
+            createElement("PrefixIcon", {
+              svg: createElement(
+                ctx.iconService.createIconTagName(props["Prefix Icon#8722:0"].componentKey),
+              ),
+            }),
+            props["Label#7185:0"].value,
+          ],
+        }))
+        .with("Icon Last", () => ({
+          layout: "withText",
+          children: [
+            props["Label#7185:0"].value,
+            createElement("SuffixIcon", {
+              svg: createElement(
+                ctx.iconService.createIconTagName(props["Suffix Icon#8722:82"].componentKey),
+              ),
+            }),
+          ],
+        }))
+        .with("Icon Both", () => ({
+          layout: "withText",
+          children: [
+            createElement("PrefixIcon", {
+              svg: createElement(
+                ctx.iconService.createIconTagName(props["Prefix Icon#8722:0"].componentKey),
+              ),
+            }),
+            props["Label#7185:0"].value,
+            createElement("SuffixIcon", {
+              svg: createElement(
+                ctx.iconService.createIconTagName(props["Suffix Icon#8722:82"].componentKey),
+              ),
+            }),
+          ],
+        }))
+        .with("Text Only", () => ({
+          layout: "withText",
+          children: props["Label#7185:0"].value,
+        }))
+        .exhaustive();
+
+      const commonProps = {
+        size: handleSizeProp(props.Size.value),
+        layout,
+        ...(states.includes("Selected") && {
+          defaultChecked: true,
+        }),
+        ...(states.includes("Disabled") && {
+          disabled: true,
+        }),
+        ...(props["Show Count#7185:42"].value && {
+          count: Number(props["Count#7185:21"].value),
+        }),
+      };
+
+      return createElement("ControlChip.Toggle", commonProps, children);
+    },
+  );

package/src/codegen/domain/seed-component/transformers/error-state.ts

@@ -0,0 +1,39 @@
+import { defineComponentTransformer } from "@/codegen/core";
+import { camelCase } from "change-case";
+import * as metadata from "../../../data/__generated__/component-sets";
+import { createElement } from "../../../core/jsx";
+import { findAllInstances } from "../../../../utils/figma-node";
+import type { ActionButtonProperties, ErrorStateProperties } from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+import { createActionButtonTransformer } from "./action-button";
+
+export const createErrorStateTransformer = (ctx: SeedComponentTransformerDeps) => {
+  const actionButtonTransformer = createActionButtonTransformer(ctx);
+
+  return defineComponentTransformer<ErrorStateProperties>(metadata.errorState.key, (node) => {
+    const props = node.componentProperties;
+
+    const [actionButtonNode] = findAllInstances<ActionButtonProperties>({
+      node,
+      key: actionButtonTransformer.key,
+    });
+
+    const commonProps = {
+      variant: camelCase(props.Variant.value),
+      ...(props.Layout.value === "With Title" && {
+        title: props["Title#16237:0"].value,
+      }),
+      description: props["Description#16237:5"].value,
+      ...(actionButtonNode && {
+        primaryActionProps: {
+          children: actionButtonTransformer.transform(actionButtonNode).children[0],
+        },
+        secondaryActionProps: {
+          children: props["Secondary Action Label#17042:0"].value,
+        },
+      }),
+    };
+
+    return createElement("ErrorState", commonProps);
+  });
+};