@seed-design/figma 0.0.2 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/figma",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "@create-figma-plugin/utilities": "^3.0.2",
-    "@seed-design/css": "0.0.10",
+    "@seed-design/css": "0.0.12",
     "change-case": "^5.2.0",
     "ts-pattern": "^5.2.0"
   },

package/src/component/handlers/action-button.ts

@@ -0,0 +1,66 @@
+import { camelCase } from "change-case";
+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 { ActionButtonProperties } from "../type";
+import type { ComponentHandler } from "../type-helper";
+
+export const actionButtonHandler: ComponentHandler<ActionButtonProperties> = {
+  key: metadata.actionButton.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#7574:0"].componentKey)),
+          }),
+        ],
+      }))
+      .with("Icon First", async () => ({
+        layout: "withText",
+        children: [
+          createElement("PrefixIcon", {
+            svg: createElement(
+              createIconTagNameFromKey(props["Prefix Icon#5987:305"].componentKey),
+            ),
+          }),
+          props["Label#5987:61"].value,
+        ],
+      }))
+      .with("Icon Last", async () => ({
+        layout: "withText",
+        children: [
+          props["Label#5987:61"].value,
+          createElement("SuffixIcon", {
+            svg: createElement(
+              createIconTagNameFromKey(props["Suffix Icon#5987:244"].componentKey),
+            ),
+          }),
+        ],
+      }))
+      .with("Text Only", () => ({
+        layout: "withText",
+        children: props["Label#5987:61"].value,
+      }))
+      .exhaustive();
+
+    const commonProps = {
+      ...(states.includes("Disabled") && {
+        disabled: true,
+      }),
+      ...(states.includes("Loading") && {
+        loading: true,
+      }),
+      size: handleSize(props.Size.value),
+      variant: camelCase(props.Variant.value),
+      layout,
+    };
+
+    return createElement("ActionButton", commonProps, children);
+  },
+};

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

@@ -0,0 +1,71 @@
+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 { ActionChipProperties } from "../type";
+import type { ComponentHandler } from "../type-helper";
+
+export const actionChipHandler: ComponentHandler<ActionChipProperties> = {
+  key: metadata.actionChip.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#8714:0"].componentKey)),
+          }),
+        ],
+      }))
+      .with("Icon First", async () => ({
+        layout: "withText",
+        children: [
+          createElement("PrefixIcon", {
+            svg: createElement(createIconTagNameFromKey(props["Prefix Icon#8711: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#8711:3"].componentKey)),
+          }),
+        ],
+      }))
+      .with("Icon Both", async () => ({
+        layout: "withText",
+        children: [
+          createElement("PrefixIcon", {
+            svg: createElement(createIconTagNameFromKey(props["Prefix Icon#8711:0"].componentKey)),
+          }),
+          props["Label#7185:0"].value,
+          createElement("SuffixIcon", {
+            svg: createElement(createIconTagNameFromKey(props["Suffix Icon#8711:3"].componentKey)),
+          }),
+        ],
+      }))
+      .with("Text Only", () => ({
+        layout: "withText",
+        children: props["Label#7185:0"].value,
+      }))
+      .exhaustive();
+
+    const commonProps = {
+      size: handleSize(props.Size.value),
+      layout,
+      ...(states.includes("Disabled") && {
+        disabled: true,
+      }),
+      ...(props["Show Count#7185:42"].value && {
+        count: Number(props["Count#7185:21"].value),
+      }),
+    };
+    return createElement("ActionChip", commonProps, children);
+  },
+};

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

@@ -0,0 +1,74 @@
+import { camelCase } from "change-case";
+import { match } from "ts-pattern";
+import * as metadata from "../../data/__generated__/component-sets";
+import { createElement } from "../../jsx";
+import { findAllInstances } from "../../utils/figma-node";
+import type { ActionSheetItemProperties, ActionSheetProperties } from "../type";
+import type { ComponentHandler } from "../type-helper";
+
+export const actionSheetHandler: ComponentHandler<ActionSheetProperties> = {
+  key: metadata.actionSheet.key,
+  codegen: async (node) => {
+    const { componentProperties: props } = node;
+
+    const contentProps = match(props.Header.value)
+      .with("None", () => ({
+        title: undefined,
+        description: undefined,
+      }))
+      .with("Title Only", () => ({
+        title: props["Title#15641:37"].value,
+        description: undefined,
+      }))
+      .with("Description Only", () => ({
+        title: undefined,
+        description: props["Description#15641:70"].value,
+      }))
+      .with("Title With Description", () => ({
+        title: props["Title#15641:37"].value,
+        description: props["Description#15641:70"].value,
+      }))
+      .exhaustive();
+
+    const items = await findAllInstances<ActionSheetItemProperties>({
+      node,
+      key: actionSheetItemHandler.key,
+    });
+
+    const contentChildren = await Promise.all(items.map(actionSheetItemHandler.codegen));
+
+    const content = createElement(
+      "ActionSheetContent",
+      contentProps,
+      contentChildren,
+      contentProps.title
+        ? ""
+        : "title을 제공하지 않는 경우 aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.",
+    );
+
+    const trigger = createElement(
+      "ActionSheetTrigger",
+      { asChild: true },
+      createElement("ActionButton", undefined, "열기", "ActionSheet을 여는 요소를 제공해주세요."),
+    );
+
+    return createElement("ActionSheet", undefined, [trigger, content]);
+  },
+};
+
+const actionSheetItemHandler: ComponentHandler<ActionSheetItemProperties> = {
+  key: "c3cafd3a3fdcd45fecb6971019d88eaf39a2e381",
+  codegen: async ({ componentProperties: props }) => {
+    const states = props.State.value.split("-");
+
+    const commonProps = {
+      label: props["Label#15420:4"].value,
+      tone: camelCase(props.Tone.value),
+      ...(states.includes("Disabled") && {
+        disabled: true,
+      }),
+    };
+
+    return createElement("ActionSheetItem", commonProps);
+  },
+};

package/src/component/handlers/app-bar.ts

@@ -0,0 +1,183 @@
+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 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) => {
+    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 () => {
+      switch (props.Action.value) {
+        case "Back":
+          return createElement("AppBarBackButton", undefined);
+        case "Close":
+          return createElement("AppBarCloseButton", undefined);
+        case "Other": {
+          const iconNode = findOne(
+            node,
+            (child) => child.type === "INSTANCE" && child.name === "Icon",
+          ) as NormalizedInstanceNode | null;
+
+          const iconComponentKey = iconNode?.componentKey ?? undefined;
+
+          return createElement(
+            "AppBarIconButton",
+            undefined,
+            iconComponentKey
+              ? createElement(createIconTagNameFromKey(iconComponentKey))
+              : undefined,
+            iconComponentKey === undefined
+              ? "아이콘과, aria-label 또는 aria-labelledby를 제공해주세요."
+              : "aria-label 또는 aria-labelledby를 제공해주세요.",
+          );
+        }
+      }
+    })();
+
+    return createElement("AppBarLeft", undefined, children);
+  },
+};
+
+const appBarRightHandler: ComponentHandler<AppBarRightProperties> = {
+  key: "9e157fc2d1f89ffee938a5bc62f4a58064fec44e",
+  codegen: async (node) => {
+    const props = node.componentProperties;
+
+    const children = await (async () => {
+      switch (props.Type.value) {
+        case "1 Text": {
+          const textNode = findOne(
+            node,
+            (child) => child.type === "TEXT",
+          ) as NormalizedTextNode | null;
+
+          return textNode?.characters;
+        }
+        default: {
+          const iconNodes = findAll(
+            node,
+            (child) => child.type === "INSTANCE" && child.name === "Icon",
+          ) as NormalizedInstanceNode[];
+
+          const iconComponentKeys = iconNodes.map((iconNode) => iconNode.componentKey);
+
+          return iconComponentKeys.map((iconComponentKey) =>
+            createElement(
+              "AppBarIconButton",
+              undefined,
+              iconComponentKey
+                ? createElement(createIconTagNameFromKey(iconComponentKey))
+                : undefined,
+              iconComponentKey === undefined
+                ? "아이콘과, aria-label 또는 aria-labelledby를 제공해주세요."
+                : "aria-label 또는 aria-labelledby를 제공해주세요.",
+            ),
+          );
+        }
+      }
+    })();
+
+    return createElement("AppBarRight", undefined, children);
+  },
+};

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

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

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

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

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

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

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