@seed-design/figma 0.0.2 → 0.0.4

package/src/component/handlers/control-chip.ts

@@ -0,0 +1,75 @@
+import { match } from "ts-pattern";
+import * as metadata from "../../data/__generated__/component-sets";
+import { createIconTagNameFromKey } from "../../icon";
+import { createElement } from "../../jsx";
+import { handleSize } from "../properties";
+import type { ControlChipProperties } from "../type";
+import type { ComponentHandler } from "../type-helper";
+
+export const controlChipHandler: ComponentHandler<ControlChipProperties> = {
+  key: metadata.controlChip.key,
+  codegen: async ({ componentProperties: props }) => {
+    const states = props.State.value.split("-");
+
+    const { layout, children } = await match(props.Layout.value)
+      .with("Icon Only", async () => ({
+        layout: "iconOnly",
+        children: [
+          createElement("Icon", {
+            svg: createElement(createIconTagNameFromKey(props["Icon#8722:41"].componentKey)),
+          }),
+        ],
+      }))
+      .with("Icon First", async () => ({
+        layout: "withText",
+        children: [
+          createElement("PrefixIcon", {
+            svg: createElement(createIconTagNameFromKey(props["Prefix Icon#8722:0"].componentKey)),
+          }),
+          props["Label#7185:0"].value,
+        ],
+      }))
+      .with("Icon Last", async () => ({
+        layout: "withText",
+        children: [
+          props["Label#7185:0"].value,
+          createElement("SuffixIcon", {
+            svg: createElement(createIconTagNameFromKey(props["Suffix Icon#8722:82"].componentKey)),
+          }),
+        ],
+      }))
+      .with("Icon Both", async () => ({
+        layout: "withText",
+        children: [
+          createElement("PrefixIcon", {
+            svg: createElement(createIconTagNameFromKey(props["Prefix Icon#8722:0"].componentKey)),
+          }),
+          props["Label#7185:0"].value,
+          createElement("SuffixIcon", {
+            svg: createElement(createIconTagNameFromKey(props["Suffix Icon#8722:82"].componentKey)),
+          }),
+        ],
+      }))
+      .with("Text Only", () => ({
+        layout: "withText",
+        children: props["Label#7185:0"].value,
+      }))
+      .exhaustive();
+
+    const commonProps = {
+      size: handleSize(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/component/handlers/error-state.ts

@@ -0,0 +1,37 @@
+import { camelCase } from "change-case";
+import * as metadata from "../../data/__generated__/component-sets";
+import { createElement } from "../../jsx";
+import { findAllInstances } from "../../utils/figma-node";
+import type { ActionButtonProperties, ErrorStateProperties } from "../type";
+import type { ComponentHandler } from "../type-helper";
+import { actionButtonHandler } from "./action-button";
+
+export const errorStateHandler: ComponentHandler<ErrorStateProperties> = {
+  key: metadata.errorState.key,
+  codegen: async (node) => {
+    const props = node.componentProperties;
+
+    const [actionButtonNode] = await findAllInstances<ActionButtonProperties>({
+      node,
+      key: actionButtonHandler.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: (await actionButtonHandler.codegen(actionButtonNode)).children[0],
+        },
+        secondaryActionProps: {
+          children: props["Secondary Action Label#17042:0"].value,
+        },
+      }),
+    };
+
+    return createElement("ErrorState", commonProps);
+  },
+};

package/src/component/handlers/extended-action-sheet.ts

@@ -0,0 +1,86 @@
+import { camelCase } from "change-case";
+import * as metadata from "../../data/__generated__/component-sets";
+import { createIconTagNameFromKey } from "../../icon";
+import { createElement } from "../../jsx";
+import { findAllInstances } from "../../utils/figma-node";
+import type {
+  ExtendedActionSheetGroupProperties,
+  ExtendedActionSheetItemProperties,
+  ExtendedActionSheetProperties,
+} from "../type";
+import type { ComponentHandler } from "../type-helper";
+
+export const extendedActionSheetHandler: ComponentHandler<ExtendedActionSheetProperties> = {
+  key: metadata.extendedActionSheet.key,
+  codegen: async (node) => {
+    const { componentProperties: props } = node;
+
+    const groups = findAllInstances<ExtendedActionSheetGroupProperties>({
+      node,
+      key: extendedActionSheetGroupHandler.key,
+    });
+
+    const contentChildren = await Promise.all(groups.map(extendedActionSheetGroupHandler.codegen));
+
+    const title = props["Show Title#17043:12"].value ? props["Title#14599:0"].value : undefined;
+
+    const content = createElement(
+      "ExtendedActionSheetContent",
+      { title },
+      contentChildren,
+      title
+        ? undefined
+        : "title을 제공하지 않는 경우 aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.",
+    );
+
+    const trigger = createElement(
+      "ExtendedActionSheetTrigger",
+      { asChild: true },
+      createElement(
+        "ActionButton",
+        undefined,
+        "열기",
+        "ExtendedActionSheet을 여는 요소를 제공해주세요.",
+      ),
+    );
+
+    return createElement("ExtendedActionSheet", undefined, [trigger, content]);
+  },
+};
+
+const extendedActionSheetGroupHandler: ComponentHandler<ExtendedActionSheetGroupProperties> = {
+  key: "2a504a1c6b7810d5e652862dcba2cb7048f9eb16",
+  codegen: async (node) => {
+    const items = findAllInstances<ExtendedActionSheetItemProperties>({
+      node,
+      key: extendedActionSheetItemHandler.key,
+    });
+
+    const contentChildren = await Promise.all(items.map(extendedActionSheetItemHandler.codegen));
+
+    return createElement("ExtendedActionSheetGroup", undefined, contentChildren);
+  },
+};
+
+const extendedActionSheetItemHandler: ComponentHandler<ExtendedActionSheetItemProperties> = {
+  key: "057083e95466da59051119eec0b41d4ad5a07f8f",
+  codegen: async ({ componentProperties: props }) => {
+    const states = props.State.value.split("-");
+
+    const commonProps = {
+      tone: camelCase(props.Tone.value),
+      ...(states.includes("Disabled") && {
+        disabled: true,
+      }),
+    };
+
+    return createElement("ExtendedActionSheetItem", commonProps, [
+      props["Show Prefix Icon#17043:5"].value
+        ? createElement("PrefixIcon", {
+            svg: createElement(createIconTagNameFromKey(props["Prefix Icon#55948:0"].componentKey)),
+          })
+        : undefined,
+      props["Label#55905:8"].value,
+    ]);
+  },
+};

package/src/component/handlers/extended-fab.ts

@@ -0,0 +1,24 @@
+import { camelCase } from "change-case";
+import * as metadata from "../../data/__generated__/component-sets";
+import { createIconTagNameFromKey } from "../../icon";
+import { createElement } from "../../jsx";
+import { handleSize } from "../properties";
+import type { ExtendedFabProperties } from "../type";
+import type { ComponentHandler } from "../type-helper";
+
+export const extendedFabHandler: ComponentHandler<ExtendedFabProperties> = {
+  key: metadata.extendedFloatingActionButton.key,
+  codegen: async ({ componentProperties: props }) => {
+    const commonProps = {
+      size: handleSize(props.Size.value),
+      variant: camelCase(props.Variant.value),
+    };
+
+    return createElement("ExtendedFab", commonProps, [
+      createElement("PrefixIcon", {
+        svg: createElement(createIconTagNameFromKey(props["Icon#28796:0"].componentKey)),
+      }),
+      props["Label#28936:0"].value,
+    ]);
+  },
+};

package/src/component/handlers/fab.ts

@@ -0,0 +1,17 @@
+import * as metadata from "../../data/__generated__/component-sets";
+import { createIconTagNameFromKey } from "../../icon";
+import { createElement } from "../../jsx";
+import type { ComponentHandler } from "../type-helper";
+import type { FabProperties } from "../type";
+
+export const fabHandler: ComponentHandler<FabProperties> = {
+  key: metadata.floatingActionButton.key,
+  codegen: async ({ componentProperties: props }) => {
+    return createElement(
+      "Fab",
+      undefined,
+      createElement(createIconTagNameFromKey(props["Icon#28796:0"].componentKey)),
+      "aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.",
+    );
+  },
+};

package/src/component/handlers/help-bubble.ts

@@ -0,0 +1,66 @@
+import * as metadata from "../../data/__generated__/component-sets";
+import { createElement } from "../../jsx";
+import type { ComponentHandler } from "../type-helper";
+import type { HelpBubbleProperties } from "../type";
+
+export const helpBubbleHandler: ComponentHandler<HelpBubbleProperties> = {
+  key: metadata.helpBubble.key,
+  codegen: async ({ 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/component/handlers/identity-placeholder.ts

@@ -0,0 +1,16 @@
+import { camelCase } from "change-case";
+import * as metadata from "../../data/__generated__/component-sets";
+import { createElement } from "../../jsx";
+import type { ComponentHandler } from "../type-helper";
+import type { IdentityPlaceholderProperties } from "../type";
+
+export const identityPlaceholderHandler: ComponentHandler<IdentityPlaceholderProperties> = {
+  key: metadata.identityPlaceholder.key,
+  codegen: async ({ componentProperties: props }) => {
+    const commonProps = {
+      identity: camelCase(props.Identity.value),
+    };
+
+    return createElement("IdentityPlaceholder", commonProps);
+  },
+};

package/src/component/handlers/inline-banner.ts

@@ -0,0 +1,83 @@
+import { camelCase } from "change-case";
+import * as metadata from "../../data/__generated__/component-sets";
+import { createIconTagNameFromKey } from "../../icon";
+import { createElement } from "../../jsx";
+import { findOne } from "../../utils/figma-node";
+import type { NormalizedInstanceNode, NormalizedTextNode } from "../../normalizer";
+import type { InlineBannerProperties } from "../type";
+import type { ComponentHandler } from "../type-helper";
+
+export const inlineBannerHandler: ComponentHandler<InlineBannerProperties> = {
+  key: metadata.inlineBanner.key,
+  codegen: async (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(createIconTagNameFromKey(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/component/handlers/manner-temp-badge.ts

@@ -0,0 +1,17 @@
+import * as metadata from "../../data/__generated__/component-sets";
+import { createElement } from "../../jsx";
+import type { MannerTempBadgeProperties } from "../type";
+import type { ComponentHandler } from "../type-helper";
+
+export const mannerTempBadgeHandler: ComponentHandler<MannerTempBadgeProperties> = {
+  key: metadata.mannerTempBadge.key,
+  codegen: async ({ 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/component/handlers/multiline-text-field.ts

@@ -0,0 +1,80 @@
+import * as metadata from "../../data/__generated__/component-sets";
+import { createElement } from "../../jsx";
+import { handleSize } from "../properties";
+import type { MultilineTextFieldProperties } from "../type";
+import type { ComponentHandler } from "../type-helper";
+
+export const multilineTextFieldHandler: ComponentHandler<MultilineTextFieldProperties> = {
+  key: metadata.multilineTextField.key,
+  codegen: async ({ 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: handleSize(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/component/handlers/progress-circle.ts

@@ -0,0 +1,49 @@
+import { camelCase } from "change-case";
+import { match } from "ts-pattern";
+import * as metadata from "../../data/__generated__/component-sets";
+import { createElement } from "../../jsx";
+import type { ProgressCircleProperties } from "../type";
+import type { ComponentHandler } from "../type-helper";
+
+export const progressCircleHandler: ComponentHandler<ProgressCircleProperties> = {
+  key: metadata.progressCircle.key,
+  codegen: async ({ 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/component/handlers/reaction-button.ts

@@ -0,0 +1,36 @@
+import * as metadata from "../../data/__generated__/component-sets";
+import { createIconTagNameFromKey } from "../../icon";
+import { createElement } from "../../jsx";
+import { handleSize } from "../properties";
+import type { ReactionButtonProperties } from "../type";
+import type { ComponentHandler } from "../type-helper";
+
+export const reactionButtonHandler: ComponentHandler<ReactionButtonProperties> = {
+  key: metadata.reactionButton.key,
+  codegen: async ({ componentProperties: props }) => {
+    const states = props.State.value.split("-");
+
+    const commonProps = {
+      size: handleSize(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(createIconTagNameFromKey(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/component/handlers/segmented-control.ts

@@ -0,0 +1,51 @@
+import * as metadata from "../../data/__generated__/component-sets";
+import { createElement } from "../../jsx";
+import { findAllInstances } from "../../utils/figma-node";
+import type { ComponentHandler } from "../type-helper";
+import type { SegmentedControlItemProperties, SegmentedControlProperties } from "../type";
+
+export const segmentedControlHandler: ComponentHandler<SegmentedControlProperties> = {
+  key: metadata.segmentedControl.key,
+  codegen: async (node) => {
+    const segments = await findAllInstances<SegmentedControlItemProperties>({
+      node,
+      key: segmentedControlItemHandler.key,
+    });
+
+    const selectedSegment = segments.find((segment) =>
+      segment.componentProperties.State.value.split("-").includes("Selected"),
+    );
+
+    const segmentedControlChildren = await Promise.all(
+      segments.map(segmentedControlItemHandler.codegen),
+    );
+
+    const commonProps = {
+      ...(selectedSegment && {
+        defaultValue: selectedSegment.componentProperties["Label#11366:15"].value,
+      }),
+    };
+
+    return createElement(
+      "SegmentedControl",
+      commonProps,
+      segmentedControlChildren,
+      "aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.",
+    );
+  },
+};
+
+const segmentedControlItemHandler: ComponentHandler<SegmentedControlItemProperties> = {
+  key: "9a7ba0d4c041ddbce84ee48881788434fd6bccc8",
+  codegen: async ({ 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);
+  },
+};