@seed-design/figma 0.0.4 → 0.0.5

package/src/component/handlers/avatar-stack.ts

@@ -1,35 +0,0 @@
-import * as metadata from "../../data/__generated__/component-sets";
-import { createElement } from "../../jsx";
-import { findAllInstances } from "../../utils/figma-node";
-import type { AvatarProperties, AvatarStackProperties } from "../type";
-import type { ComponentHandler } from "../type-helper";
-import { avatarHandler } from "./avatar";
-
-export const avatarStackHandler: ComponentHandler<AvatarStackProperties> = {
-  key: metadata.avatarStack.key,
-  codegen: async (node) => {
-    const avatarNodes = await findAllInstances<AvatarProperties>({
-      node,
-      key: avatarHandler.key,
-    });
-
-    const { componentProperties: props } = node;
-
-    const commonProps = {
-      size: props.Size.value,
-      // TODO: 구현될 예정
-      // topItem: camelCase(props["Top Item"].value),
-    };
-
-    const avatarStackChildren = (await Promise.all(avatarNodes.map(avatarHandler.codegen))).map(
-      (avatar) => {
-        return {
-          ...avatar,
-          props: { ...avatar.props, size: undefined },
-        };
-      },
-    );
-
-    return createElement("AvatarStack", commonProps, avatarStackChildren);
-  },
-};

package/src/component/handlers/avatar.ts

@@ -1,37 +0,0 @@
-import * as metadata from "../../data/__generated__/component-sets";
-import { createElement } from "../../jsx";
-import { findAllInstances } from "../../utils/figma-node";
-import type { AvatarProperties, IdentityPlaceholderProperties } from "../type";
-import type { ComponentHandler } from "../type-helper";
-import { identityPlaceholderHandler } from "./identity-placeholder";
-
-export const avatarHandler: ComponentHandler<AvatarProperties> = {
-  key: metadata.avatar.key,
-  codegen: async (node) => {
-    const [placeholder] = findAllInstances<IdentityPlaceholderProperties>({
-      node,
-      key: identityPlaceholderHandler.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: await identityPlaceholderHandler.codegen(placeholder),
-      }),
-      size: props.Size.value,
-    };
-
-    return createElement(
-      "Avatar",
-      commonProps,
-      props["Show Badge#1398:26"].value ? createElement("AvatarBadge", {}) : undefined,
-      avatarHasSrc ? "alt 텍스트를 제공해야 합니다." : undefined,
-    );
-  },
-};

package/src/component/handlers/badge.ts

@@ -1,20 +0,0 @@
-import { camelCase } from "change-case";
-import * as metadata from "../../data/__generated__/component-sets";
-import { createElement } from "../../jsx";
-import { handleSize } from "../properties";
-import type { BadgeProperties } from "../type";
-import type { ComponentHandler } from "../type-helper";
-
-export const badgeHandler: ComponentHandler<BadgeProperties> = {
-  key: metadata.badge.key,
-  codegen: async ({ componentProperties: props }) => {
-    const commonProps = {
-      size: handleSize(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/component/handlers/callout.ts

@@ -1,87 +0,0 @@
-import { camelCase } from "change-case";
-import * as metadata from "../../data/__generated__/component-sets";
-import { createIconTagNameFromKey } from "../../icon";
-import { createElement } from "../../jsx";
-import type { NormalizedTextNode } from "../../normalizer";
-import type { ComponentHandler } from "../type-helper";
-import type { CalloutProperties } from "../type";
-
-export const calloutHandler: ComponentHandler<CalloutProperties> = {
-  key: metadata.callout.key,
-  codegen: async ({ 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(createIconTagNameFromKey(props["Icon#12598:210"].componentKey)),
-      }),
-    };
-
-    return createElement(tag, commonProps);
-  },
-};

package/src/component/handlers/checkbox.ts

@@ -1,32 +0,0 @@
-import { camelCase } from "change-case";
-import * as metadata from "../../data/__generated__/component-sets";
-import { createElement } from "../../jsx";
-import { handleSize } from "../properties";
-import type { CheckboxProperties } from "../type";
-import type { ComponentHandler } from "../type-helper";
-
-export const checkboxHandler: ComponentHandler<CheckboxProperties> = {
-  key: metadata.checkbox.key,
-  codegen: async ({ 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: handleSize(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/component/handlers/chip-tabs.ts

@@ -1,51 +0,0 @@
-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 { ChipTabsItemProperties, ChipTabsProperties } from "../type";
-import type { ComponentHandler } from "../type-helper";
-
-export const chipTabsHandler: ComponentHandler<ChipTabsProperties> = {
-  key: metadata.chipTablist.key,
-  codegen: async (node) => {
-    const chipTabsItems = findAllInstances<ChipTabsItemProperties>({
-      node,
-      key: chipTabsItemHandler.key,
-    });
-
-    const selectedChipTabsItem = chipTabsItems.find((chipTabsItem) =>
-      chipTabsItem.componentProperties.State.value.split("-").includes("Selected"),
-    );
-
-    const chipTabsList = createElement(
-      "ChipTabsList",
-      undefined,
-      await Promise.all(chipTabsItems.map(chipTabsItemHandler.codegen)),
-    );
-
-    const commonProps = {
-      variant: camelCase(node.componentProperties.Variant.value),
-      ...(selectedChipTabsItem && {
-        defaultValue: selectedChipTabsItem.componentProperties["Label#8876:0"].value,
-      }),
-    };
-
-    return createElement("ChipTabs", commonProps, chipTabsList);
-  },
-};
-
-const chipTabsItemHandler: ComponentHandler<ChipTabsItemProperties> = {
-  key: "fa80168b02051fbb0ba032238bd76d840dbe2e15",
-  codegen: async ({ 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);
-  },
-};

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

@@ -1,75 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,86 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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/manner-temp-badge.ts

@@ -1,17 +0,0 @@
-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);
-  },
-};