@seed-design/figma 0.0.2 → 0.0.5

package/src/codegen/domain/seed-component/transformers/extended-fab.ts

@@ -0,0 +1,25 @@
+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 { ExtendedFabProperties } from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+
+export const createExtendedFabTransformer = (ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<ExtendedFabProperties>(
+    metadata.extendedFloatingActionButton.key,
+    ({ componentProperties: props }) => {
+      const commonProps = {
+        size: handleSizeProp(props.Size.value),
+        variant: camelCase(props.Variant.value),
+      };
+
+      return createElement("ExtendedFab", commonProps, [
+        createElement("PrefixIcon", {
+          svg: createElement(ctx.iconService.createIconTagName(props["Icon#28796:0"].componentKey)),
+        }),
+        props["Label#28936:0"].value,
+      ]);
+    },
+  );

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

@@ -0,0 +1,18 @@
+import { defineComponentTransformer } from "@/codegen/core";
+import * as metadata from "../../../data/__generated__/component-sets";
+import { createElement } from "../../../core/jsx";
+import type { FabProperties } from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+
+export const createFabTransformer = (ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<FabProperties>(
+    metadata.floatingActionButton.key,
+    ({ componentProperties: props }) => {
+      return createElement(
+        "Fab",
+        undefined,
+        createElement(ctx.iconService.createIconTagName(props["Icon#28796:0"].componentKey)),
+        "aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.",
+      );
+    },
+  );

package/src/codegen/domain/seed-component/transformers/help-bubble.ts

@@ -0,0 +1,68 @@
+import { defineComponentTransformer } from "@/codegen/core";
+import * as metadata from "../../../data/__generated__/component-sets";
+import { createElement } from "../../../core/jsx";
+import type { HelpBubbleProperties } from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+
+export const createHelpBubbleTransformer = (_ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<HelpBubbleProperties>(
+    metadata.helpBubble.key,
+    ({ componentProperties: props }) => {
+      const placement:
+        | "top"
+        | "right"
+        | "bottom"
+        | "left"
+        | "top-end"
+        | "top-start"
+        | "right-end"
+        | "right-start"
+        | "bottom-end"
+        | "bottom-start"
+        | "left-end"
+        | "left-start" = (() => {
+        switch (props.Placement.value) {
+          case "Bottom-Left":
+            return "top-start";
+          case "Bottom-Center":
+            return "top";
+          case "Bottom-Right":
+            return "top-end";
+          case "Left-Top":
+            return "right-start";
+          case "Left-Center":
+            return "right";
+          case "Left-Bottom":
+            return "right-end";
+          case "Top-Left":
+            return "bottom-start";
+          case "Top-Center":
+            return "bottom";
+          case "Top-Right":
+            return "bottom-end";
+          case "Right-Top":
+            return "left-start";
+          case "Right-Center":
+            return "left";
+          case "Right-Bottom":
+            return "left-end";
+        }
+      })();
+
+      const commonProps = {
+        title: props["Title#62535:0"].value,
+        ...(props["Show Description#62499:0"].value && {
+          description: props["Description#62535:98"].value,
+        }),
+        showCloseButton: props["Show Close Button"].value === "True",
+        defaultOpen: true,
+        placement,
+      };
+
+      return createElement(
+        "HelpBubbleTrigger",
+        commonProps,
+        createElement("ActionButton", undefined, "열기", "HelpBubble을 여는 요소를 제공해주세요."),
+      );
+    },
+  );

package/src/codegen/domain/seed-component/transformers/identity-placeholder.ts

@@ -0,0 +1,18 @@
+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 { IdentityPlaceholderProperties } from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+
+export const createIdentityPlaceholderTransformer = (_ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<IdentityPlaceholderProperties>(
+    metadata.identityPlaceholder.key,
+    ({ componentProperties: props }) => {
+      const commonProps = {
+        identity: camelCase(props.Identity.value),
+      };
+
+      return createElement("IdentityPlaceholder", commonProps);
+    },
+  );

package/src/codegen/domain/seed-component/transformers/inline-banner.ts

@@ -0,0 +1,81 @@
+import { defineComponentTransformer } from "@/codegen/core";
+import { camelCase } from "change-case";
+import * as metadata from "../../../data/__generated__/component-sets";
+import { createElement } from "../../../core/jsx";
+import { findOne } from "../../../../utils/figma-node";
+import type { NormalizedInstanceNode, NormalizedTextNode } from "../../../../normalizer";
+import type { InlineBannerProperties } from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+
+export const createInlineBannerTransformer = (ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<InlineBannerProperties>(metadata.inlineBanner.key, (node) => {
+    const { componentProperties: props } = node;
+
+    const tag = (() => {
+      switch (props.Interaction.value) {
+        case "Default":
+          return "InlineBanner";
+        case "Actionable":
+          return "ActionableInlineBanner";
+        case "Dismissible":
+          return "DismissibleInlineBanner";
+        case "Link":
+          return "InlineBanner";
+        default:
+          return "InlineBanner";
+      }
+    })();
+
+    const textNode = findOne(
+      node,
+      (child) => child.type === "TEXT" && child.name === "Label",
+    ) as NormalizedTextNode | null;
+
+    if (!textNode) {
+      return createElement(tag, undefined, undefined, "내용을 제공해주세요.");
+    }
+
+    const slices = textNode.segments;
+
+    let title: string | undefined;
+    let description: string | undefined;
+
+    switch (slices.length) {
+      case 1: {
+        description = slices[0]?.characters.trim();
+
+        break;
+      }
+      case 2: {
+        title = slices[0]?.characters.trim();
+        description = slices[1]?.characters.trim();
+
+        break;
+      }
+    }
+
+    const iconNode = findOne(
+      node,
+      (child) => child.type === "INSTANCE" && child.name === "icon",
+    ) as NormalizedInstanceNode | null;
+
+    const iconComponentKey =
+      props["Show Icon#11840:27"] && iconNode ? iconNode.componentKey : undefined;
+    const prefixIcon = iconComponentKey
+      ? createElement(ctx.iconService.createIconTagName(iconComponentKey))
+      : undefined;
+
+    const commonProps = {
+      variant: camelCase(props.Variant.value),
+      title,
+      description,
+      ...(props.Interaction.value === "Link" && {
+        linkProps: {
+          children: props["Link Label#1547:81"].value,
+        },
+      }),
+      prefixIcon,
+    };
+
+    return createElement(tag, commonProps);
+  });

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

@@ -0,0 +1,19 @@
+import { defineComponentTransformer } from "@/codegen/core";
+import * as metadata from "../../../data/__generated__/component-sets";
+import { createElement } from "../../../core/jsx";
+import type { MannerTempBadgeProperties } from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+
+export const createMannerTempBadgeTransformer = (_ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<MannerTempBadgeProperties>(
+    metadata.mannerTempBadge.key,
+    ({ children }) => {
+      const textNode = children.find((child) => child.type === "TEXT");
+
+      const commonProps = {
+        temperature: Number(textNode?.characters.replace(/[^\d.-]/g, "") ?? "-1"),
+      };
+
+      return createElement("MannerTempBadge", commonProps);
+    },
+  );

package/src/codegen/domain/seed-component/transformers/multiline-text-field.ts

@@ -0,0 +1,82 @@
+import { defineComponentTransformer } from "@/codegen/core";
+import * as metadata from "../../../data/__generated__/component-sets";
+import { createElement } from "../../../core/jsx";
+import { handleSizeProp } from "../size";
+import type { MultilineTextFieldProperties } from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+
+export const createMultilineTextFieldTransformer = (_ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<MultilineTextFieldProperties>(
+    metadata.multilineTextField.key,
+    ({ componentProperties: props }) => {
+      const {
+        Size: { value: size },
+        State: { value: state },
+        Filled: { value: filled },
+        "Show Header#870:0": { value: showHeader },
+        "Label#15327:323": { value: label },
+        "Show Indicator#1259:0": { value: showIndicator },
+        "Indicator#15327:286": { value: indicator },
+        "Placeholder#958:0": { value: placeholder },
+        "Filled Text#1304:0": { value: defaultValue },
+        "Show Footer#958:25": { value: showFooter },
+        "Show Description#958:50": { value: showDescription },
+        "Description#15327:212": { value: description },
+        "Show Character count#958:75": { value: showCharacterCount },
+        "Character Count#15327:360": { value: _characterCount },
+        "Max Character Count#15327:175": { value: maxCharacterCount },
+      } = props;
+
+      const states = state.split("-");
+
+      const commonProps = {
+        size: handleSizeProp(size),
+        // header
+        ...(showHeader && {
+          label,
+        }),
+        ...(showHeader &&
+          showIndicator && {
+            indicator,
+          }),
+        // input
+        ...(filled === "True" && {
+          defaultValue,
+        }),
+        ...(states.includes("Invalid") && {
+          invalid: true,
+        }),
+        ...(states.includes("Disabled") && {
+          disabled: true,
+        }),
+        ...(states.includes("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,
+      };
+
+      const TextFieldChildren = createElement("TextFieldTextarea", inputProps);
+
+      return createElement("TextField", commonProps, TextFieldChildren);
+    },
+  );

package/src/codegen/domain/seed-component/transformers/progress-circle.ts

@@ -0,0 +1,51 @@
+import { defineComponentTransformer } from "@/codegen/core";
+import { camelCase } from "change-case";
+import { match } from "ts-pattern";
+import * as metadata from "../../../data/__generated__/component-sets";
+import { createElement } from "../../../core/jsx";
+import type { ProgressCircleProperties } from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+
+export const createProgressCircleTransformer = (_ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<ProgressCircleProperties>(
+    metadata.progressCircle.key,
+    ({ componentProperties: props }) => {
+      const { value, minValue, maxValue } = match(props.Value.value)
+        .with("Indeterminate", () => ({
+          value: undefined,
+          minValue: undefined,
+          maxValue: undefined,
+        }))
+        .with("0%", () => ({
+          value: 0,
+          minValue: 0,
+          maxValue: 100,
+        }))
+        .with("25%", () => ({
+          value: 25,
+          minValue: 0,
+          maxValue: 100,
+        }))
+        .with("75%", () => ({
+          value: 75,
+          minValue: 0,
+          maxValue: 100,
+        }))
+        .with("100%", () => ({
+          value: 100,
+          minValue: 0,
+          maxValue: 100,
+        }))
+        .exhaustive();
+
+      const commonProps = {
+        value,
+        minValue,
+        maxValue,
+        size: props.Size.value,
+        tone: camelCase(props.Tone.value),
+      };
+
+      return createElement("ProgressCircle", commonProps);
+    },
+  );

package/src/codegen/domain/seed-component/transformers/reaction-button.ts

@@ -0,0 +1,37 @@
+import { defineComponentTransformer } from "@/codegen/core";
+import * as metadata from "../../../data/__generated__/component-sets";
+import { createElement } from "../../../core/jsx";
+import { handleSizeProp } from "../size";
+import type { ReactionButtonProperties } from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+
+export const createReactionButtonTransformer = (ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<ReactionButtonProperties>(
+    metadata.reactionButton.key,
+    ({ componentProperties: props }) => {
+      const states = props.State.value.split("-");
+
+      const commonProps = {
+        size: handleSizeProp(props.Size.value),
+        ...(states.includes("Loading") && {
+          loading: true,
+        }),
+        ...(states.includes("Disabled") && {
+          disabled: true,
+        }),
+        ...(states.includes("Selected") && {
+          defaultPressed: true,
+        }),
+      };
+
+      return createElement("ReactionButton", commonProps, [
+        createElement("PrefixIcon", {
+          svg: createElement(ctx.iconService.createIconTagName(props["Icon#12379:0"].componentKey)),
+        }),
+        props["Label#6397:0"].value,
+        props["Show Count#6397:33"].value
+          ? createElement("Count", {}, props["Count#15816:0"].value)
+          : undefined,
+      ]);
+    },
+  );

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

@@ -0,0 +1,59 @@
+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 {
+  SegmentedControlItemProperties,
+  SegmentedControlProperties,
+} from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+
+const SEGMENTED_CONTROL_ITEM_KEY = "9a7ba0d4c041ddbce84ee48881788434fd6bccc8";
+const createSegmentedControlItemTransformer = (_ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<SegmentedControlItemProperties>(
+    SEGMENTED_CONTROL_ITEM_KEY,
+    ({ componentProperties: props }) => {
+      const states = props.State.value.split("-");
+      const commonProps = {
+        value: props["Label#11366:15"].value,
+        ...(states.includes("Disabled") && {
+          disabled: true,
+        }),
+      };
+
+      return createElement("SegmentedControlItem", commonProps, props["Label#11366:15"].value);
+    },
+  );
+
+export const createSegmentedControlTransformer = (ctx: SeedComponentTransformerDeps) => {
+  const segmentedControlItemTransformer = createSegmentedControlItemTransformer(ctx);
+
+  return defineComponentTransformer<SegmentedControlProperties>(
+    metadata.segmentedControl.key,
+    (node) => {
+      const segments = findAllInstances<SegmentedControlItemProperties>({
+        node,
+        key: segmentedControlItemTransformer.key,
+      });
+
+      const selectedSegment = segments.find((segment) =>
+        segment.componentProperties.State.value.split("-").includes("Selected"),
+      );
+
+      const segmentedControlChildren = segments.map(segmentedControlItemTransformer.transform);
+
+      const commonProps = {
+        ...(selectedSegment && {
+          defaultValue: selectedSegment.componentProperties["Label#11366:15"].value,
+        }),
+      };
+
+      return createElement(
+        "SegmentedControl",
+        commonProps,
+        segmentedControlChildren,
+        "aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.",
+      );
+    },
+  );
+};

package/src/codegen/domain/seed-component/transformers/select-box.ts

@@ -0,0 +1,82 @@
+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 { SelectBoxGroupProperties, SelectBoxProperties } from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+
+export const createSelectBoxTransformer = (_ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<SelectBoxProperties>(
+    metadata.selectBox.key,
+    ({ componentProperties: props }) => {
+      const tag = (() => {
+        switch (props.Control.value) {
+          case "Checkbox":
+            return "CheckSelectBox";
+          case "Radio":
+            return "RadioSelectBox";
+        }
+      })();
+
+      const states = props.State.value.split("-");
+
+      const commonProps = {
+        label: props["Label#3635:0"].value,
+        ...(props["Show Description#3033:0"].value && {
+          description: props["Description #3033:5"].value,
+        }),
+        ...(tag === "RadioSelectBox" && {
+          value: props["Label#3635:0"].value,
+        }),
+        ...(tag === "CheckSelectBox" &&
+          states.includes("Selected") && {
+            defaultChecked: true,
+          }),
+      };
+
+      return createElement(tag, commonProps);
+    },
+  );
+
+export const createSelectBoxGroupTransformer = (ctx: SeedComponentTransformerDeps) => {
+  const selectBoxTransformer = createSelectBoxTransformer(ctx);
+
+  return defineComponentTransformer<SelectBoxGroupProperties>(
+    metadata.templateSelectBoxGroup.key,
+    (node) => {
+      const props = node.componentProperties;
+
+      const tag = (() => {
+        switch (props.Control.value) {
+          case "Checkbox":
+            return "CheckSelectBoxGroup";
+          case "Radio":
+            return "RadioSelectBoxGroup";
+        }
+      })();
+
+      const selectBoxes = findAllInstances<SelectBoxProperties>({
+        node,
+        key: selectBoxTransformer.key,
+      });
+
+      const selectedSelectBox = selectBoxes.find((selectBox) =>
+        selectBox.componentProperties.State.value.split("-").includes("Selected"),
+      );
+
+      const stack = createElement(
+        "Stack",
+        { gap: "spacingY.componentDefault" },
+        selectBoxes.map(selectBoxTransformer.transform),
+      );
+
+      const commonProps = {
+        ...(tag === "RadioSelectBoxGroup" && {
+          defaultValue: selectedSelectBox?.componentProperties["Label#3635:0"].value,
+        }),
+      };
+
+      return createElement(tag, commonProps, stack);
+    },
+  );
+};

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

@@ -0,0 +1,52 @@
+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 { SkeletonProperties } from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+
+export const createSkeletonTransformer = (ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<SkeletonProperties>(
+    metadata.skeleton.key,
+    ({
+      componentProperties: props,
+      absoluteBoundingBox,
+      layoutSizingHorizontal,
+      layoutSizingVertical,
+      boundVariables,
+    }) => {
+      const commonProps = {
+        radius: camelCase(props.Radius.value),
+        width: (() => {
+          switch (layoutSizingHorizontal) {
+            case "FIXED": {
+              const variableId = boundVariables?.size?.x?.id;
+              if (variableId) return ctx.variableService.getVariableName(variableId);
+
+              return `${absoluteBoundingBox?.width}px`;
+            }
+            case "FILL":
+              return "full";
+            default:
+              return "full";
+          }
+        })(),
+        height: (() => {
+          switch (layoutSizingVertical) {
+            case "FIXED": {
+              const variableId = boundVariables?.size?.y?.id;
+              if (variableId) return ctx.variableService.getVariableName(variableId);
+
+              return `${absoluteBoundingBox?.height}px`;
+            }
+            case "FILL":
+              return "full";
+            default:
+              return "full";
+          }
+        })(),
+      };
+
+      return createElement("Skeleton", commonProps);
+    },
+  );

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

@@ -0,0 +1,23 @@
+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 { SnackbarProperties } from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+
+export const createSnackbarTransformer = (_ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<SnackbarProperties>(
+    metadata.snackbar.key,
+    ({ componentProperties: props }) => {
+      const commonProps = {
+        message: props["Message#1528:4"].value,
+        variant: camelCase(props.Variant.value),
+        ...(props["Show Action Button#1528:0"].value && {
+          actionLabel: props["Action Button Label#1528:8"].value,
+        }),
+      };
+
+      // TODO: adapter.create({ render })
+      return createElement("Snackbar", commonProps);
+    },
+  );

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

@@ -0,0 +1,31 @@
+import { defineComponentTransformer } from "@/codegen/core";
+import * as metadata from "../../../data/__generated__/component-sets";
+import { createElement } from "../../../core/jsx";
+import { handleSizeProp } from "../size";
+import type { SwitchProperties } from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+
+export const createSwitchTransformer = (_ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<SwitchProperties>(
+    metadata.switch.key,
+    ({ componentProperties: props }) => {
+      const states = props.State.value.split("-");
+
+      const size = handleSizeProp(props.Size.value);
+
+      const commonProps = {
+        size,
+        ...(size === "small" && {
+          label: props["Label#15191:2"].value,
+        }),
+        ...(states.includes("Selected") && {
+          defaultChecked: true,
+        }),
+        ...(states.includes("Disabled") && {
+          disabled: true,
+        }),
+      };
+
+      return createElement("Switch", commonProps);
+    },
+  );