@seed-design/figma 0.0.2 → 0.0.4

package/src/component/handlers/select-box.ts

@@ -0,0 +1,76 @@
+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 { SelectBoxGroupProperties, SelectBoxProperties } from "../type";
+
+export const selectBoxGroupHandler: ComponentHandler<SelectBoxGroupProperties> = {
+  key: metadata.templateSelectBoxGroup.key,
+  codegen: async (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: selectBoxHandler.key,
+    });
+
+    const selectedSelectBox = selectBoxes.find((selectBox) =>
+      selectBox.componentProperties.State.value.split("-").includes("Selected"),
+    );
+
+    const stack = createElement(
+      "Stack",
+      { gap: "spacingY.componentDefault" },
+      await Promise.all(selectBoxes.map(selectBoxHandler.codegen)),
+    );
+
+    const commonProps = {
+      ...(tag === "RadioSelectBoxGroup" && {
+        defaultValue: selectedSelectBox?.componentProperties["Label#3635:0"].value,
+      }),
+    };
+
+    return createElement(tag, commonProps, stack);
+  },
+};
+
+export const selectBoxHandler: ComponentHandler<SelectBoxProperties> = {
+  key: metadata.selectBox.key,
+  codegen: async ({ 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);
+  },
+};

package/src/component/handlers/skeleton.ts

@@ -0,0 +1,51 @@
+import { camelCase } from "change-case";
+import * as metadata from "../../data/__generated__/component-sets";
+import { createElement } from "../../jsx";
+import { getLayoutVariableName } from "../../props/variable";
+import type { SkeletonProperties } from "../type";
+import type { ComponentHandler } from "../type-helper";
+
+export const skeletonHandler: ComponentHandler<SkeletonProperties> = {
+  key: metadata.skeleton.key,
+  codegen: async ({
+    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 getLayoutVariableName(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 getLayoutVariableName(variableId);
+
+            return `${absoluteBoundingBox?.height}px`;
+          }
+          case "FILL":
+            return "full";
+          default:
+            return "full";
+        }
+      })(),
+    };
+
+    return createElement("Skeleton", commonProps);
+  },
+};

package/src/component/handlers/snackbar.ts

@@ -0,0 +1,21 @@
+import { camelCase } from "change-case";
+import * as metadata from "../../data/__generated__/component-sets";
+import { createElement } from "../../jsx";
+import type { SnackbarProperties } from "../type";
+import type { ComponentHandler } from "../type-helper";
+
+export const snackbarHandler: ComponentHandler<SnackbarProperties> = {
+  key: metadata.snackbar.key,
+  codegen: async ({ 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/component/handlers/switch.ts

@@ -0,0 +1,29 @@
+import * as metadata from "../../data/__generated__/component-sets";
+import { createElement } from "../../jsx";
+import { handleSize } from "../properties";
+import type { SwitchProperties } from "../type";
+import type { ComponentHandler } from "../type-helper";
+
+export const switchHandler: ComponentHandler<SwitchProperties> = {
+  key: metadata.switch.key,
+  codegen: async ({ componentProperties: props }) => {
+    const states = props.State.value.split("-");
+
+    const size = handleSize(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);
+  },
+};

package/src/component/handlers/tabs.ts

@@ -0,0 +1,107 @@
+import { camelCase } from "change-case";
+import * as metadata from "../../data/__generated__/component-sets";
+import { createElement } from "../../jsx";
+import type { NormalizedInstanceNode } from "../../normalizer";
+import { handleSize } from "../properties";
+import type { TabsFillItemProperties, TabsHugItemProperties, TabsProperties } from "../type";
+import type { ComponentHandler } from "../type-helper";
+
+export const tabsHandler: ComponentHandler<TabsProperties> = {
+  key: metadata.tablist.key,
+  codegen: async ({ componentProperties: props, children }) => {
+    const tabsItems = children
+      .map((child) => {
+        if (child.type !== "INSTANCE") return null;
+
+        const componentKey = child.componentSetKey ? child.componentSetKey : child.componentKey;
+
+        if (componentKey === tabsHugItemHandler.key)
+          return {
+            triggerLayout: "hug" as const,
+            node: child as NormalizedInstanceNode & { componentProperties: TabsHugItemProperties },
+          };
+
+        if (componentKey === tabsFillItemHandler.key)
+          return {
+            triggerLayout: "fill" as const,
+            node: child as NormalizedInstanceNode & { componentProperties: TabsFillItemProperties },
+          };
+
+        return null;
+      })
+      .filter((tabsItem) => tabsItem !== null);
+
+    const selectedTabsItem = tabsItems.find(({ node: { componentProperties } }) =>
+      componentProperties.State.value.split("-").includes("Selected"),
+    )?.node;
+
+    const tabTriggerList = createElement(
+      "TabsList",
+      undefined,
+      await Promise.all(
+        tabsItems.map(({ triggerLayout, node }) => {
+          switch (triggerLayout) {
+            case "hug":
+              return tabsHugItemHandler.codegen(node);
+            case "fill":
+              return tabsFillItemHandler.codegen(node);
+          }
+        }),
+      ),
+    );
+
+    const tabContents = tabsItems.map(({ node }) => {
+      const value = node.componentProperties["Label#4478:2"].value;
+
+      return createElement("TabsContent", { value }, "{/* TODO: 컨텐츠 추가 */}");
+    });
+
+    const commonProps = {
+      triggerLayout: camelCase(props.Layout.value),
+      size: handleSize(props.Size.value),
+      ...(selectedTabsItem && {
+        defaultValue: selectedTabsItem.componentProperties["Label#4478:2"].value,
+      }),
+    };
+
+    return createElement("TabsRoot", commonProps, [tabTriggerList, ...tabContents]);
+  },
+};
+
+const tabsHugItemHandler: ComponentHandler<TabsHugItemProperties> = {
+  key: "c242492543b327ceb84fa9933841512fc62a898c",
+  codegen: async ({ componentProperties: props }) => {
+    const states = props.State.value.split("-");
+
+    const commonProps = {
+      value: props["Label#4478:2"].value,
+      ...(props.Notification.value === "True" && {
+        alert: true,
+      }),
+      ...(states.includes("Disabled") && {
+        disabled: true,
+      }),
+    };
+
+    return createElement("TabsTrigger", commonProps, props["Label#4478:2"].value);
+  },
+};
+
+const tabsFillItemHandler: ComponentHandler<TabsFillItemProperties> = {
+  key: "7275293344efb40ee9a3f5248ba2659b94a0b305",
+  codegen: async ({ componentProperties: props }) => {
+    const states = props.State.value.split("-");
+
+    const commonProps = {
+      value: props["Label#4478:2"].value,
+      ...(props.Notification.value === "True" && {
+        alert: true,
+      }),
+      ...(states.includes("Disabled") && {
+        disabled: true,
+      }),
+    };
+
+    return createElement("TabsTrigger", commonProps, props["Label#4478:2"].value);
+  },
+};

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

@@ -0,0 +1,57 @@
+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 { findOne } from "../../utils/figma-node";
+import type { NormalizedInstanceNode } from "../../normalizer";
+import { handleSize } from "../properties";
+import type { TextButtonProperties } from "../type";
+import type { ComponentHandler } from "../type-helper";
+
+export const textButtonHandler: ComponentHandler<TextButtonProperties> = {
+  key: metadata.textButton.key,
+  codegen: async (node) => {
+    const { componentProperties: props } = node;
+
+    const states = props.State.value.split("-");
+
+    const { prefixIcon, suffixIcon, children } = await match(props.Layout.value)
+      .with("Icon First", async () => ({
+        prefixIcon: createElement(
+          createIconTagNameFromKey(props["Prefix Icon#7561:0"].componentKey),
+        ),
+        suffixIcon: undefined,
+        children: props["Label#6148:0"].value,
+      }))
+      .with("Icon Last", () => {
+        const suffixIconNode = findOne(
+          node,
+          (node) => node.type === "INSTANCE" && node.name === "Suffix Icon",
+        ) as NormalizedInstanceNode | null;
+
+        const suffixIconComponentKey = suffixIconNode?.componentKey;
+
+        return {
+          prefixIcon: undefined,
+          suffixIcon: suffixIconComponentKey
+            ? createElement(createIconTagNameFromKey(suffixIconComponentKey))
+            : undefined,
+          children: props["Label#6148:0"].value,
+        };
+      })
+      .exhaustive();
+
+    const commonProps = {
+      tone: camelCase(props.Tone.value),
+      size: handleSize(props.Size.value),
+      prefixIcon,
+      suffixIcon,
+      ...(states.includes("Disabled") && {
+        disabled: true,
+      }),
+    };
+
+    return createElement("TextButton", commonProps, children);
+  },
+};

package/src/component/handlers/text-field.ts

@@ -0,0 +1,108 @@
+import * as metadata from "../../data/__generated__/component-sets";
+import { createIconTagNameFromKey } from "../../icon";
+import { createElement } from "../../jsx";
+import { handleSize } from "../properties";
+import type { TextFieldProperties } from "../type";
+import type { ComponentHandler } from "../type-helper";
+
+export const textFieldHandler: ComponentHandler<TextFieldProperties> = {
+  key: metadata.textField.key,
+  codegen: async ({ componentProperties: props }) => {
+    const {
+      Size: { value: size },
+      State: { value: state },
+      Filled: { value: filled },
+      "Show Header#870:0": { value: showHeader },
+      "Label#14964:0": { value: label },
+      "Show Indicator#1259:0": { value: showIndicator },
+      "Indicator#15327:249": { value: indicator },
+      "Show Prefix#958:125": { value: showPrefix },
+      "Show Prefix Icon#1267:50": { value: showPrefixIcon },
+      "Prefix Icon#1267:25": { value: prefixIcon },
+      "Show Prefix Text#1267:0": { value: showPrefixText },
+      "Prefix Text#15327:101": { value: prefix },
+      "Placeholder#958:0": { value: placeholder },
+      "Filled Text#1304:0": { value: defaultValue },
+      "Show Suffix#958:100": { value: showSuffix },
+      "Show Suffix Icon#1267:75": { value: showSuffixIcon },
+      "Suffix Icon #1267:100": { value: suffixIcon },
+      "Show Suffix Text#1267:125": { value: showSuffixText },
+      "Suffix Text#15327:138": { value: suffix },
+      "Show Footer#958:25": { value: showFooter },
+      "Show Description#958:50": { value: showDescription },
+      "Description#12626:5": { value: description },
+      "Show Character Count#958:75": { value: showCharacterCount },
+      "Character Count#15327:64": { value: _characterCount },
+      "Max Character Count#15327:27": { value: maxCharacterCount },
+    } = props;
+
+    const states = state.split("-");
+
+    const commonProps = {
+      size: handleSize(size),
+      // header
+      ...(showHeader && {
+        label,
+      }),
+      ...(showHeader &&
+        showIndicator && {
+          indicator,
+        }),
+      // input affixes
+      ...(showPrefix &&
+        showPrefixIcon && {
+          prefixIcon: createElement(createIconTagNameFromKey(prefixIcon)),
+        }),
+      ...(showPrefix &&
+        showPrefixText && {
+          prefix,
+        }),
+      ...(showSuffix &&
+        showSuffixIcon && {
+          suffixIcon: createElement(createIconTagNameFromKey(suffixIcon)),
+        }),
+      ...(showSuffix &&
+        showSuffixText && {
+          suffix,
+        }),
+      // 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("TextFieldInput", inputProps);
+
+    return createElement("TextField", commonProps, TextFieldChildren);
+  },
+};

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

@@ -0,0 +1,44 @@
+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 { ToggleButtonProperties } from "../type";
+import type { ComponentHandler } from "../type-helper";
+
+export const toggleButtonHandler: ComponentHandler<ToggleButtonProperties> = {
+  key: metadata.toggleButton.key,
+  codegen: async ({ componentProperties: props }) => {
+    const states = props.State.value.split("-");
+
+    const commonProps = {
+      variant: camelCase(props.Variant.value),
+      size: handleSize(props.Size.value),
+      ...(states.includes("Selected") && {
+        defaultPressed: true,
+      }),
+      ...(states.includes("Disabled") && {
+        disabled: true,
+      }),
+      ...(states.includes("Loading") && {
+        loading: true,
+      }),
+    };
+
+    return createElement("ToggleButton", commonProps, [
+      props["Show Prefix Icon#6122:392"].value
+        ? createElement("PrefixIcon", {
+            svg: createElement(createIconTagNameFromKey(props["Prefix Icon#6122:98"].componentKey)),
+          })
+        : undefined,
+      props["Label#6122:49"].value,
+      props["Show Suffix Icon#6122:147"].value
+        ? createElement("SuffixIcon", {
+            svg: createElement(
+              createIconTagNameFromKey(props["Suffix Icon#6122:343"].componentKey),
+            ),
+          })
+        : undefined,
+    ]);
+  },
+};