@seed-design/figma 1.1.19 → 1.2.1

package/src/codegen/targets/react/component/handlers/archive/legacy-text-field.ts

@@ -0,0 +1,198 @@
+import type {
+  LegacyMultilineTextFieldProperties,
+  LegacyTextFieldProperties,
+} from "@/codegen/component-properties.archive";
+import { defineComponentHandler } from "@/codegen/core";
+import { createLocalSnippetHelper } from "../../../element-factories";
+import type { ComponentHandlerDeps } from "../../deps.interface";
+import { handleSizeProp } from "../../size";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("text-field");
+
+const LEGACY_TEXT_FIELD_KEY = "c49873c37a639f0dffdea4efd0eb43760d66c141";
+const LEGACY_MULTILINE_TEXT_FIELD_KEY = "88b2399c930c85f9ce2972163a078bc684b84bbe";
+
+export const createLegacyTextFieldHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<LegacyTextFieldProperties>(
+    LEGACY_TEXT_FIELD_KEY,
+    ({ 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": 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": 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: handleSizeProp(size),
+        // header
+        ...(showHeader && {
+          label,
+        }),
+        ...(showHeader &&
+          showIndicator && {
+            indicator,
+          }),
+        // input affixes
+        ...(showPrefix &&
+          showPrefixIcon && {
+            prefixIcon: ctx.iconHandler.transform(prefixIcon),
+          }),
+        ...(showPrefix &&
+          showPrefixText && {
+            prefix,
+          }),
+        ...(showSuffix &&
+          showSuffixIcon && {
+            suffixIcon: ctx.iconHandler.transform(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 = createLocalSnippetElement("TextFieldInput", inputProps);
+
+      return createLocalSnippetElement("TextField", commonProps, TextFieldChildren, {
+        comment:
+          "이 Figma 컴포넌트는 @seed-design/react@1.1보다 낮은 버전의 TextField입니다. 신규 컴포넌트로 교체할 수 있습니다.",
+      });
+    },
+  );
+
+export const createLegacyMultilineTextFieldHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<LegacyMultilineTextFieldProperties>(
+    LEGACY_MULTILINE_TEXT_FIELD_KEY,
+    ({ 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: handleSizeProp(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 = createLocalSnippetElement("TextFieldTextarea", inputProps);
+
+      return createLocalSnippetElement("TextField", commonProps, TextFieldChildren, {
+        comment:
+          "이 Figma 컴포넌트는 @seed-design/react@1.1보다 낮은 버전의 TextField입니다. 신규 컴포넌트로 교체할 수 있습니다.",
+      });
+    },
+  );

package/src/codegen/targets/react/component/handlers/archive/list-header.ts

@@ -0,0 +1,20 @@
+import type { ListHeaderProperties } from "@/codegen/component-properties.archive";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/archive/component-sets";
+import { createLocalSnippetHelper } from "../../../element-factories";
+import type { ComponentHandlerDeps } from "../../deps.interface";
+import { camelCase } from "change-case";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("list-header");
+
+export const createListHeaderHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ListHeaderProperties>(
+    metadata.listHeader.key,
+    ({ componentProperties: props }) => {
+      const commonProps = {
+        variant: camelCase(props["Variant"].value),
+      };
+
+      return createLocalSnippetElement("ListHeader", commonProps, props["Title#28588:0"].value);
+    },
+  );

package/src/codegen/targets/react/component/handlers/archive/list-item.ts

@@ -0,0 +1,162 @@
+import type {
+  ListItemSuffixIconProperties,
+  ListItemPrefixIconProperties,
+  ListItemProperties,
+} from "@/codegen/component-properties.archive";
+import { createElement, defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/archive/component-sets";
+import type { NormalizedTextNode } from "@/normalizer";
+import { findAllInstances, findOne } from "@/utils/figma-node";
+import { createLocalSnippetHelper, createSeedReactElement } from "../../../element-factories";
+import type { ComponentHandlerDeps } from "../../deps.interface";
+import { match } from "ts-pattern";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("list");
+
+const PREFIX_KEYS = {
+  checkmark: "f24c9ef42ef08df79483fbae0fa7d9037e566748",
+  radiomark: "5a77ad37a2291989dfe77c44ddee9aa39e447f90",
+  icon: "0e4c05f097d3fa2dc0cbfdbf8db2662bcf8439ca",
+  avatar: "ef0e8bd6c2f92e620acf204bb9a8079ef25a1e5c",
+  image: "82239325aa1cb65af7c649fc71a8f2b48fb9b9f3",
+  custom: "81f201fc876e38f016ab7427a6b3da000ee919a2",
+} as const;
+
+const SUFFIX_KEYS = {
+  checkmark: "abf9810103ae6e6afe8fa253ec5f05d6a7304b38",
+  radiomark: "0a9464ad270bfd7f56438f62bb0155a25ca146a9",
+  chevron: "8c52207687ffed15cd5931d71ed9d196b3358a68",
+  switch: "1e933f75dd6bb4b21c3289b5c3b4402d2c623125",
+  custom: "3a70bf5bb9856c13893931b7a0df652bcf0be895",
+  icon: "4cc7e9b84a8388a36cb3898c6c02e6110a3281b9",
+  chevronWithText: "fe0e25f4fecda59d0a3730ead7c5bc0a66a41e7e",
+  iconButton: "5636566f6de6f58200dce388f7b1ac9f517b30e1",
+  actionButton: "3d788f28c785d1c60b937b253c39ce582dbe1ed3",
+} as const;
+
+export const createListItemHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ListItemProperties>(metadata.listItem.key, (node, traverse) => {
+    const { componentProperties: props } = node;
+
+    const { alignItems, title } = match(props.Variants.value)
+      .with("Single Line", () => ({ alignItems: undefined, title: props["Title#28452:21"].value }))
+      .with("Multi Line", () => ({
+        alignItems: "flex-start",
+        title: props["Title #28487:0"].value,
+      }))
+      .exhaustive();
+
+    const detailNode = findOne(
+      node,
+      (node) => node.type === "TEXT" && node.name === "Sub Text",
+    ) as NormalizedTextNode | null;
+
+    const prefixNode = (() => {
+      if (props["Has Prefix#28452:85"].value === false) return null;
+
+      for (const key of Object.values(PREFIX_KEYS)) {
+        const [found] = findAllInstances<ListItemPrefixIconProperties | {}>({ node, key });
+
+        if (found) return found;
+      }
+
+      return null;
+    })();
+
+    const prefix = (() => {
+      if (!prefixNode) return undefined;
+
+      if ("Icon#28452:111" in prefixNode.componentProperties) {
+        return createSeedReactElement("Icon", {
+          svg: ctx.iconHandler.transform(prefixNode.componentProperties["Icon#28452:111"]),
+        });
+      }
+
+      return traverse(prefixNode.children[0]);
+    })();
+
+    const suffixNode = (() => {
+      if (props["Has Suffix#28452:64"].value === false) return null;
+
+      for (const key of Object.values(SUFFIX_KEYS)) {
+        const [found] = findAllInstances<ListItemSuffixIconProperties | {}>({ node, key });
+
+        if (found) return found;
+      }
+
+      return null;
+    })();
+
+    const suffix = (() => {
+      if (!suffixNode) return undefined;
+
+      if ("Icon#28347:9" in suffixNode.componentProperties) {
+        return createSeedReactElement("Icon", {
+          svg: ctx.iconHandler.transform(suffixNode.componentProperties["Icon#28347:9"]),
+        });
+      }
+
+      return traverse(suffixNode.children[0]);
+    })();
+
+    const disabled = props.State.value === "Disabled";
+
+    const tag = (() => {
+      if (suffix?.tag === "Switchmark") {
+        return "ListSwitchItem";
+      }
+
+      if (prefix?.tag === "Checkmark" || suffix?.tag === "Checkmark") {
+        return "ListCheckItem";
+      }
+
+      if (prefix?.tag === "Radiomark" || suffix?.tag === "Radiomark") {
+        return "ListRadioItem";
+      }
+
+      // checkmark/radiomark 없는데 disabled인 경우 Button으로 추측
+      if (disabled) {
+        return "ListButtonItem";
+      }
+
+      return "ListItem";
+    })();
+
+    const commonProps = {
+      ...(tag === "ListRadioItem" && {
+        value: title,
+      }),
+      alignItems,
+      title,
+      ...(props["Has Detail#28469:1"].value &&
+        detailNode && {
+          detail: detailNode.characters,
+        }),
+      ...(prefix && { prefix }),
+      ...(suffix && { suffix }),
+      ...(disabled &&
+        (tag === "ListButtonItem" ||
+          tag === "ListCheckItem" ||
+          tag === "ListRadioItem" ||
+          tag === "ListSwitchItem") && {
+          disabled: true,
+        }),
+      ...(props.Highlighted.value === "True" && {
+        highlighted: true,
+      }),
+    };
+
+    const comment = match(tag)
+      .with("ListItem", () => "목적에 따라 ListButtonItem이나 ListLinkItem으로 바꿔 사용하세요.")
+      .with("ListCheckItem", () => `<List as="fieldset">과 함께 사용하세요.`)
+      .with("ListRadioItem", () => "<RadioGroup.Root>와 함께 사용하세요.")
+      .otherwise(() => undefined);
+
+    const list = createLocalSnippetElement(tag, commonProps, undefined, { comment });
+
+    if (props["Divider#28441:0"].value) {
+      return createElement("", {}, [list, createLocalSnippetElement("ListDivider")]);
+    }
+
+    return list;
+  });

package/src/codegen/targets/react/component/handlers/archive/manner-temp-badge.ts

@@ -0,0 +1,21 @@
+import type { MannerTempBadgeProperties } from "@/codegen/component-properties.archive";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/archive/component-sets";
+import { createLocalSnippetHelper } from "../../../element-factories";
+import type { ComponentHandlerDeps } from "../../deps.interface";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("manner-temp-badge");
+
+export const createMannerTempBadgeHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<MannerTempBadgeProperties>(
+    metadata.mannerTempBadge.key,
+    ({ children }) => {
+      const textNode = children.find((child) => child.type === "TEXT");
+
+      const commonProps = {
+        temperature: Number(textNode?.characters.replace(/[^\d.-]/g, "") ?? "-1"),
+      };
+
+      return createLocalSnippetElement("MannerTempBadge", commonProps);
+    },
+  );

package/src/codegen/targets/react/component/handlers/archive/manner-temp.ts

@@ -0,0 +1,18 @@
+import type { MannerTempProperties } from "@/codegen/component-properties.archive";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/archive/component-sets";
+import { createLocalSnippetHelper } from "../../../element-factories";
+import type { ComponentHandlerDeps } from "../../deps.interface";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("manner-temp");
+
+export const createMannerTempHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<MannerTempProperties>(metadata.mannerTemp.key, ({ children }) => {
+    const textNode = children.find((child) => child.type === "TEXT");
+
+    const commonProps = {
+      temperature: Number(textNode?.characters.replace(/[^\d.-]/g, "") ?? "-1"),
+    };
+
+    return createLocalSnippetElement("MannerTemp", commonProps);
+  });

package/src/codegen/targets/react/component/handlers/archive/menu-sheet.ts

@@ -0,0 +1,108 @@
+import type {
+  MenuSheetGroupProperties,
+  MenuSheetItemProperties,
+  MenuSheetProperties,
+} from "@/codegen/component-properties.archive";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/archive/component-sets";
+import { findAllInstances } from "@/utils/figma-node";
+import { camelCase } from "change-case";
+import { createLocalSnippetHelper } from "../../../element-factories";
+import type { ComponentHandlerDeps } from "../../deps.interface";
+import { match } from "ts-pattern";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("menu-sheet");
+const { createLocalSnippetElement: createLocalSnippetElementTrigger } =
+  createLocalSnippetHelper("action-button");
+
+const MENU_SHEET_ITEM_KEY = "057083e95466da59051119eec0b41d4ad5a07f8f";
+const createMenuSheetItemHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<MenuSheetItemProperties>(
+    MENU_SHEET_ITEM_KEY,
+    ({ componentProperties: props }) => {
+      const states = props.State.value.split("-");
+
+      const commonProps = {
+        tone: camelCase(props.Tone.value),
+        ...(states.includes("Disabled") && {
+          disabled: true,
+        }),
+        ...(props["Show Prefix Icon#17043:5"].value && {
+          prefixIcon: ctx.iconHandler.transform(props["Prefix Icon#55948:0"]),
+        }),
+        label: props["Label#55905:8"].value,
+        ...(props["Show Item Description#51411:19"].value && {
+          description: props["Sub Text#51411:0"].value,
+        }),
+      };
+
+      return createLocalSnippetElement("MenuSheetItem", commonProps);
+    },
+  );
+
+const MENU_SHEET_GROUP_KEY = "2a504a1c6b7810d5e652862dcba2cb7048f9eb16";
+const createMenuSheetGroupHandler = (ctx: ComponentHandlerDeps) => {
+  const menuSheetItemHandler = createMenuSheetItemHandler(ctx);
+
+  return defineComponentHandler<MenuSheetGroupProperties>(
+    MENU_SHEET_GROUP_KEY,
+    (node, traverse) => {
+      const items = findAllInstances<MenuSheetItemProperties>({
+        node,
+        key: menuSheetItemHandler.key,
+      });
+
+      const contentChildren = items.map((item) => menuSheetItemHandler.transform(item, traverse));
+
+      return createLocalSnippetElement("MenuSheetGroup", undefined, contentChildren);
+    },
+  );
+};
+
+export const createMenuSheetHandler = (ctx: ComponentHandlerDeps) => {
+  const menuSheetGroupHandler = createMenuSheetGroupHandler(ctx);
+
+  return defineComponentHandler<MenuSheetProperties>(metadata.menuSheet.key, (node, traverse) => {
+    const { componentProperties: props } = node;
+
+    const groups = findAllInstances<MenuSheetGroupProperties>({
+      node,
+      key: menuSheetGroupHandler.key,
+    });
+
+    const contentChildren = groups.map((group) => menuSheetGroupHandler.transform(group, traverse));
+
+    const title = props["Show Header#17043:12"].value
+      ? props["Title Text#14599:0"].value
+      : undefined;
+
+    const description =
+      props["Show Header#17043:12"].value && props["Show Header Description#32984:0"].value
+        ? props["Description Text#21827:0"].value
+        : undefined;
+
+    const { labelAlign } = match(props.Layout.value)
+      .with("Text with Icon", () => ({ labelAlign: "left" }))
+      .with("Text Only", () => ({ labelAlign: "center" }))
+      .exhaustive();
+
+    const content = createLocalSnippetElement(
+      "MenuSheetContent",
+      { title, description, labelAlign },
+      contentChildren,
+      {
+        comment: title
+          ? undefined
+          : "title을 제공하지 않는 경우 aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.",
+      },
+    );
+
+    const trigger = createLocalSnippetElement(
+      "MenuSheetTrigger",
+      { asChild: true },
+      createLocalSnippetElementTrigger("ActionButton", {}, "MenuSheet 열기"),
+    );
+
+    return createLocalSnippetElement("MenuSheet", undefined, [trigger, content]);
+  });
+};

package/src/codegen/targets/react/component/handlers/archive/page-banner.ts

@@ -0,0 +1,101 @@
+import type {
+  PageBannerButtonProperties,
+  PageBannerProperties,
+} from "@/codegen/component-properties.archive";
+import { createElement, defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/archive/component-sets";
+import type { NormalizedInstanceNode, NormalizedTextNode } from "@/normalizer";
+import { findAllInstances, findOne } from "@/utils/figma-node";
+import { camelCase } from "change-case";
+import { createLocalSnippetHelper } from "../../../element-factories";
+import type { ComponentHandlerDeps } from "../../deps.interface";
+import { match } from "ts-pattern";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("page-banner");
+
+const SUFFIX_BUTTON_KEY = "7dce4e1242761ccd8e5da42278fc2d870918039c";
+
+const createPageBannerButtonHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<PageBannerButtonProperties>(SUFFIX_BUTTON_KEY, (node) => {
+    return createElement(
+      "PageBannerButton",
+      undefined,
+      node.componentProperties["Label#39890:0"].value,
+    );
+  });
+
+export const createPageBannerHandler = (ctx: ComponentHandlerDeps) => {
+  const buttonHandler = createPageBannerButtonHandler(ctx);
+
+  return defineComponentHandler<PageBannerProperties>(metadata.pageBanner.key, (node, traverse) => {
+    const { componentProperties: props } = node;
+
+    const { tag, suffix } = match(props.Interaction.value)
+      .with("Actionable", () => ({ tag: "ActionablePageBanner", suffix: undefined }))
+      .with("Dismissible", () => ({ tag: "DismissiblePageBanner", suffix: undefined }))
+      .with("Display", () => ({ tag: "PageBanner", suffix: undefined }))
+      .with("Display (With Action)", () => {
+        const [buttonNode] = findAllInstances<PageBannerButtonProperties>({
+          node,
+          key: SUFFIX_BUTTON_KEY,
+        });
+        const suffix = buttonNode ? buttonHandler.transform(buttonNode, traverse) : undefined;
+
+        return { tag: "PageBanner", suffix };
+      })
+      .with("Actionable (Custom)", () => ({
+        tag: "PageBanner",
+        suffix: createElement("div", undefined, "Custom Content"),
+      }))
+      .exhaustive();
+
+    const textNode = findOne(
+      node,
+      (child) => child.type === "TEXT" && child.name === "Text",
+    ) as NormalizedTextNode | null;
+
+    if (!textNode) {
+      return createLocalSnippetElement(tag, undefined, undefined, {
+        comment: "내용을 제공해주세요.",
+      });
+    }
+
+    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 showPrefixIcon = props["Show Prefix Icon#11840:27"].value && iconNode;
+    const prefixIcon = showPrefixIcon ? ctx.iconHandler.transform(iconNode) : undefined;
+
+    const commonProps = {
+      title,
+      description,
+      prefixIcon,
+      tone: camelCase(props.Tone.value),
+      variant: camelCase(props.Variant.value),
+      ...(suffix && { suffix }),
+    };
+
+    return createLocalSnippetElement(tag, commonProps);
+  });
+};

package/src/codegen/targets/react/component/handlers/archive/progress-circle.ts

@@ -0,0 +1,55 @@
+import type { ProgressCircleProperties } from "@/codegen/component-properties.archive";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/archive/component-sets";
+import { camelCase } from "change-case";
+import { match } from "ts-pattern";
+import { createLocalSnippetHelper } from "../../../element-factories";
+import type { ComponentHandlerDeps } from "../../deps.interface";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("progress-circle");
+
+export const createProgressCircleHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ProgressCircleProperties>(
+    metadata.progressCircle.key,
+    ({ 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,
+        ...(props.Tone.value !== "Custom(inherit)" && {
+          tone: camelCase(props.Tone.value),
+        }),
+      };
+
+      return createLocalSnippetElement("ProgressCircle", commonProps);
+    },
+  );