@seed-design/figma 0.0.4 → 0.0.6

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

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

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

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

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

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

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

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

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

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

@@ -1,107 +0,0 @@
-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-field.ts

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

@@ -1,44 +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 { 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,
-    ]);
-  },
-};