@seed-design/figma 1.2.0 → 1.2.1

package/src/codegen/targets/react/component/handlers/archive/tabs.ts

@@ -0,0 +1,297 @@
+import { createLocalSnippetHelper } from "../../../element-factories";
+import type {
+  ChipProperties,
+  ChipTabsTriggerProperties,
+  TabsChipWrapperProperties,
+  TabsLineTriggerFillProperties,
+  TabsLineTriggerHugProperties,
+  TabsLineWrapperProperties,
+  TabsProperties,
+} 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 type { ComponentHandlerDeps } from "../../deps.interface";
+import { handleSizeProp } from "../../size";
+import { match } from "ts-pattern";
+import { findAllInstances } from "@/utils/figma-node";
+
+const { createLocalSnippetElement: createTabsLocalSnippetElement } =
+  createLocalSnippetHelper("tabs");
+
+const { createLocalSnippetElement: createChipTabsLocalSnippetElement } =
+  createLocalSnippetHelper("chip-tabs");
+
+const LINE_TABS_WRAPPER_KEY = "e114161387f800d3668d0585bed1d109e4edcbe4";
+const CHIP_TABS_WRAPPER_KEY = "d7cf2983c79c8394aaab0185af83a9d1b9d10ece";
+
+export const createTabsHandler = (_ctx: ComponentHandlerDeps) => {
+  const lineHandler = createLineTabsHandler(_ctx);
+  const chipHandler = createChipTabsHandler(_ctx);
+
+  return defineComponentHandler<TabsProperties>(metadata.tabs.key, (node, traverse) => {
+    const props = node.componentProperties;
+
+    const elementNode = match(props.Variant.value)
+      .with("Line", () => {
+        const [wrapper] = findAllInstances<TabsLineWrapperProperties>({
+          node,
+          key: LINE_TABS_WRAPPER_KEY,
+        });
+
+        if (!wrapper) throw new Error("Line Tab wrapper not found");
+
+        return lineHandler.transform(wrapper, traverse);
+      })
+      .with("Chip", () => {
+        const [wrapper] = findAllInstances<TabsChipWrapperProperties>({
+          node,
+          key: CHIP_TABS_WRAPPER_KEY,
+        });
+
+        if (!wrapper) throw new Error("Chip Tab wrapper not found");
+
+        return chipHandler.transform(wrapper, traverse);
+      })
+      .exhaustive();
+
+    return elementNode;
+  });
+};
+
+/*
+<TabsRoot defaultValue="2" triggerLayout="fill">
+  <TabsList>
+    <TabsTrigger value="1">라벨1</TabsTrigger>
+    <TabsTrigger value="2">라벨2</TabsTrigger>
+    <TabsTrigger value="3">라벨3</TabsTrigger>
+  </TabsList>
+  <TabsCarousel>
+    <TabsContent value="1">
+      <Content>Content 1</Content>
+    </TabsContent>
+    <TabsContent value="2">
+      <Content>Content 2</Content>
+    </TabsContent>
+    <TabsContent value="3">
+      <Content>Content 3</Content>
+    </TabsContent>
+  </TabsCarousel>
+</TabsRoot>
+*/
+
+const LINE_TABS_HUG_ITEM_KEY = "946cc52671ac3f46e20a8ff12fcc1c7f618da675";
+const LINE_TABS_FILL_ITEM_KEY = "78039b6b86852b685a6e93e9b6743b9e577cd7db";
+
+const createLineTabsHandler = (_ctx: ComponentHandlerDeps) => {
+  const hugHandler = createLineTriggerHugHandler(_ctx);
+  const fillHandler = createLineTriggerFillHandler(_ctx);
+
+  return defineComponentHandler<TabsLineWrapperProperties>(
+    LINE_TABS_WRAPPER_KEY,
+    (node, traverse) => {
+      const props = node.componentProperties;
+
+      const { triggers, defaultValue } = match(props.Layout.value)
+        .with("Hug", () => {
+          const nodes = findAllInstances<TabsLineTriggerHugProperties>({
+            node,
+            key: LINE_TABS_HUG_ITEM_KEY,
+          });
+
+          return {
+            triggers: nodes.map((node) => ({
+              elementNode: hugHandler.transform(node, traverse),
+              value: node.componentProperties["Label#4478:2"].value,
+            })),
+            defaultValue: nodes.find((node) => node.componentProperties.State.value === "Selected")
+              ?.componentProperties["Label#4478:2"].value,
+          };
+        })
+        .with("Fill", () => {
+          const nodes = findAllInstances<TabsLineTriggerFillProperties>({
+            node,
+            key: LINE_TABS_FILL_ITEM_KEY,
+          });
+
+          return {
+            triggers: nodes.map((node) => ({
+              elementNode: fillHandler.transform(node, traverse),
+              value: node.componentProperties["Label#4478:2"].value,
+            })),
+            defaultValue: nodes.find((node) => node.componentProperties.State.value === "Selected")
+              ?.componentProperties["Label#4478:2"].value,
+          };
+        })
+        .exhaustive();
+
+      const rootProps = {
+        triggerLayout: camelCase(props.Layout.value),
+        size: handleSizeProp(props.Size.value),
+        defaultValue,
+      };
+
+      const tabsCarousel = createTabsLocalSnippetElement(
+        "TabsCarousel",
+        undefined,
+        triggers.map(({ value }) => createTabsLocalSnippetElement("TabsContent", { value }, value)),
+      );
+
+      const tabsList = createTabsLocalSnippetElement(
+        "TabsList",
+        undefined,
+        triggers.map(({ elementNode }) => elementNode),
+      );
+
+      return createTabsLocalSnippetElement("TabsRoot", rootProps, [tabsList, tabsCarousel]);
+    },
+  );
+};
+
+const LINE_TRIGGER_HUG_KEY = "946cc52671ac3f46e20a8ff12fcc1c7f618da675";
+
+const createLineTriggerHugHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<TabsLineTriggerHugProperties>(
+    LINE_TRIGGER_HUG_KEY,
+    ({ componentProperties: props }) => {
+      const commonProps = {
+        value: props["Label#4478:2"].value,
+        ...(props.State.value === "Disabled" && {
+          disabled: true,
+        }),
+        ...(props["Has Notification#32892:0"].value && {
+          notification: true,
+        }),
+      };
+
+      return createTabsLocalSnippetElement("TabsTrigger", commonProps);
+    },
+  );
+
+const LINE_TRIGGER_FILL_KEY = "78039b6b86852b685a6e93e9b6743b9e577cd7db";
+
+const createLineTriggerFillHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<TabsLineTriggerFillProperties>(
+    LINE_TRIGGER_FILL_KEY,
+    ({ componentProperties: props }) => {
+      const commonProps = {
+        value: props["Label#4478:2"].value,
+        ...(props.State.value === "Disabled" && {
+          disabled: true,
+        }),
+        ...(props["Has Notification#32904:13"].value && {
+          notification: true,
+        }),
+      };
+
+      return createTabsLocalSnippetElement("TabsTrigger", commonProps);
+    },
+  );
+
+/*
+<ChipTabsRoot
+  variant="neutralOutline"
+  defaultValue="1"
+>
+  <ChipTabsList>
+    <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
+    <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
+    <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
+  </ChipTabsList>
+  <ChipTabsCarousel>
+    <ChipTabsContent value="1">
+      <Content>Content 1</Content>
+    </ChipTabsContent>
+    <ChipTabsContent value="2">
+      <Content>Content 2</Content>
+    </ChipTabsContent>
+    <ChipTabsContent value="3">
+      <Content>Content 3</Content>
+    </ChipTabsContent>
+  </ChipTabsCarousel>
+</ChipTabsRoot>
+*/
+
+const createChipTabsHandler = (_ctx: ComponentHandlerDeps) => {
+  const triggerHandler = createChipTabsTriggerHandler(_ctx);
+
+  return defineComponentHandler<TabsChipWrapperProperties>(
+    CHIP_TABS_WRAPPER_KEY,
+    (node, traverse) => {
+      const props = node.componentProperties;
+
+      const nodes = findAllInstances<ChipTabsTriggerProperties>({ node, key: CHIP_TRIGGER_KEY });
+
+      const triggers = nodes.map((node) => {
+        // this is redundant; can this be better?
+        const [chip] = findAllInstances<ChipProperties>({ node, key: metadata.chip.key });
+        if (!chip) throw new Error("Chip not found in ChipTabsTrigger");
+
+        return {
+          elementNode: triggerHandler.transform(node, traverse),
+          value: chip.componentProperties["Label#7185:0"].value,
+        };
+      });
+
+      const selectedTrigger = nodes.find(
+        (node) => node.componentProperties.State.value === "Selected",
+      );
+      const [selectedChip] = selectedTrigger
+        ? findAllInstances<ChipProperties>({ node: selectedTrigger, key: metadata.chip.key })
+        : [undefined];
+      if (!selectedChip) throw new Error("Chip not found in ChipTabsTrigger");
+
+      const defaultValue = selectedChip.componentProperties["Label#7185:0"].value;
+
+      const variant = match(props.Variant.value)
+        .with("Outline", () => "neutralOutline")
+        .with("Solid", () => "neutralSolid")
+        .exhaustive();
+
+      const rootProps = {
+        size: handleSizeProp(props.Size.value),
+        variant,
+        defaultValue,
+      };
+
+      const tabsCarousel = createChipTabsLocalSnippetElement(
+        "ChipTabsCarousel",
+        { swipeable: false },
+        triggers.map(({ value }) =>
+          createChipTabsLocalSnippetElement("ChipTabsContent", { value }, value),
+        ),
+      );
+
+      const tabsList = createChipTabsLocalSnippetElement(
+        "ChipTabsList",
+        undefined,
+        triggers.map(({ elementNode }) => elementNode),
+      );
+
+      return createChipTabsLocalSnippetElement("ChipTabsRoot", rootProps, [tabsList, tabsCarousel]);
+    },
+  );
+};
+
+const CHIP_TRIGGER_KEY = "95bf31a329f9e8bba0d9aa2299d1552f1d388148";
+
+const createChipTabsTriggerHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ChipTabsTriggerProperties>(CHIP_TRIGGER_KEY, (node) => {
+    const [chip] = findAllInstances<ChipProperties>({ node, key: metadata.chip.key });
+    if (!chip) throw new Error("Chip not found in ChipTabsTrigger");
+
+    const props = node.componentProperties;
+    const chipProps = chip.componentProperties;
+
+    const commonProps = {
+      value: chipProps["Label#7185:0"].value,
+      ...(chipProps.State.value === "Disabled" && {
+        disabled: true,
+      }),
+      ...(props["Has Notification"].value === "True" && {
+        notification: true,
+      }),
+    };
+
+    return createChipTabsLocalSnippetElement("ChipTabsTrigger", commonProps);
+  });

package/src/codegen/targets/react/component/handlers/archive/tag-group.ts

@@ -0,0 +1,86 @@
+import type { TagGroupItemProperties, TagGroupProperties } from "@/codegen/component-properties.archive";
+import { defineComponentHandler, type ElementNode } 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";
+import { match } from "ts-pattern";
+import { findAllInstances } from "@/utils/figma-node";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("tag-group");
+
+export const createTagGroupHandler = (ctx: ComponentHandlerDeps) => {
+  const itemHandler = createTagGroupItemHandler(ctx);
+
+  return defineComponentHandler<TagGroupProperties>(metadata.tagGroup.key, (node, traverse) => {
+    const itemNodes = findAllInstances<TagGroupItemProperties>({ node, key: TAG_GROUP_ITEM_KEY });
+
+    const items = itemNodes.map((itemNode) =>
+      itemHandler.transform(itemNode, traverse),
+    ) as (ElementNode & {
+      props: { size?: string; weight?: string; tone?: string };
+    })[];
+
+    if (items.length === 0) {
+      return createLocalSnippetElement("TagGroupRoot");
+    }
+
+    // if size/weight/tone are all the same among item[n].props, lift them up to TagGroupRoot
+
+    const consistent = {
+      size: items.map((item) => item.props.size).every((size) => size === items[0].props.size),
+      weight: items
+        .map((item) => item.props.weight)
+        .every((weight) => weight === items[0].props.weight),
+      tone: items.map((item) => item.props.tone).every((tone) => tone === items[0].props.tone),
+    };
+
+    return createLocalSnippetElement(
+      "TagGroupRoot",
+      {
+        // lift up consistent props
+        ...(consistent.size && { size: items[0].props.size }),
+        ...(consistent.weight && { weight: items[0].props.weight }),
+        ...(consistent.tone && { tone: items[0].props.tone }),
+      },
+      items.map((item) => ({
+        ...item,
+        props: {
+          // remove lifted props
+          ...item.props,
+          size: consistent.size ? undefined : item.props.size,
+          weight: consistent.weight ? undefined : item.props.weight,
+          tone: consistent.tone ? undefined : item.props.tone,
+        },
+      })),
+      { comment: "`truncate` prop을 통해 한 줄로 표시되도록 할 수 있습니다." },
+    );
+  });
+};
+
+const TAG_GROUP_ITEM_KEY = "a7bbc318919053f96be00e509469f6294d6bb6bb";
+
+export const createTagGroupItemHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<TagGroupItemProperties>(
+    TAG_GROUP_ITEM_KEY,
+    ({ componentProperties: props }) => {
+      const size = match(props.Size.value)
+        .with("t2(12pt)", () => "t2")
+        .with("t3(13pt)", () => "t3")
+        .with("t4(14pt)", () => "t4")
+        .exhaustive();
+
+      return createLocalSnippetElement("TagGroupItem", {
+        size,
+        weight: camelCase(props["Weight"].value),
+        tone: camelCase(props["Tone"].value),
+        label: props["Label#5409:0"].value,
+        ...(props.Layout.value === "Icon First" && {
+          prefixIcon: ctx.iconHandler.transform(props["Prefix Icon#47948:0"]),
+        }),
+        ...(props.Layout.value === "Icon Last" && {
+          suffixIcon: ctx.iconHandler.transform(props["Suffix Icon#47948:55"]),
+        }),
+      });
+    },
+  );

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

@@ -0,0 +1,264 @@
+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 {
+  createFieldFooterHandler,
+  createFieldHeaderHandler,
+  FIELD_KEYS,
+  type FieldFooterProps,
+  type FieldHeaderProps,
+} from "@/codegen/targets/react/component/handlers/archive/field";
+import type {
+  FieldHeaderProperties,
+  FieldFooterProperties,
+  TextareaProperties,
+  TextInputFieldProperties,
+  TextInputOutlineProperties,
+  TextInputUnderlineProperties,
+  TextInputOutlinePrefixProperties,
+  TextInputOutlineSuffixProperties,
+  TextInputUnderlinePrefixProperties,
+  TextInputUnderlineSuffixProperties,
+  TextareaFieldProperties,
+} from "@/codegen/component-properties.archive";
+import { findAllInstances, findOne } from "@/utils/figma-node";
+import type { NormalizedTextNode } from "@/normalizer";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("text-field");
+
+const TEXT_INPUT_OUTLINE_KEY = "22eebd645d310c086d9f5f69d8f179ff5c7cf7ca";
+const TEXT_INPUT_OUTLINE_PREFIX_KEY = "1ab174dd51bc42a5efe530f52f1dd02255c50b18";
+const TEXT_INPUT_OUTLINE_SUFFIX_KEY = "555fee288d9053760e301791665bbac31d19c43f";
+
+const TEXT_INPUT_UNDERLINE_KEY = "16e9e343fc319190149369bd61076d6415e09a8a";
+const TEXT_INPUT_UNDERLINE_PREFIX_KEY = "a7ceae43b6daf4490e8ab408d2c29fb63b2eb891";
+const TEXT_INPUT_UNDERLINE_SUFFIX_KEY = "1b88368820be61f358e24a8aaa601e7f2a2ea101";
+
+const TEXTAREA_KEY = "22bb206483f00cd635188eea6ae8a6aac058b5d5";
+
+export const createTextInputFieldHandler = (ctx: ComponentHandlerDeps) => {
+  const fieldHeaderHandler = createFieldHeaderHandler(ctx);
+  const fieldFooterHandler = createFieldFooterHandler(ctx);
+
+  return defineComponentHandler<TextInputFieldProperties>(
+    metadata.templateTextField.key,
+    (node, traverse) => {
+      const props = node.componentProperties;
+
+      const [textInputOutline] = findAllInstances<TextInputOutlineProperties>({
+        node,
+        key: TEXT_INPUT_OUTLINE_KEY,
+      });
+      const [textInputUnderline] = findAllInstances<TextInputUnderlineProperties>({
+        node,
+        key: TEXT_INPUT_UNDERLINE_KEY,
+      });
+
+      const [fieldHeader] = findAllInstances<FieldHeaderProperties>({
+        node,
+        key: FIELD_KEYS.HEADER,
+      });
+      const [fieldFooter] = findAllInstances<FieldFooterProperties>({
+        node,
+        key: FIELD_KEYS.FOOTER,
+      });
+
+      const fieldProps = {
+        ...(props["Show Header#40606:8"].value && fieldHeader
+          ? (fieldHeaderHandler.transform(fieldHeader, traverse).props as FieldHeaderProps)
+          : {}),
+        ...(props["Show Footer#40606:9"].value && fieldFooter
+          ? (fieldFooterHandler.transform(fieldFooter, traverse).props as FieldFooterProps)
+          : {}),
+      };
+
+      const commonProps = (() => {
+        if (textInputOutline) {
+          const [prefix] = findAllInstances<TextInputOutlinePrefixProperties>({
+            node: textInputOutline,
+            key: TEXT_INPUT_OUTLINE_PREFIX_KEY,
+          });
+
+          const [suffix] = findAllInstances<TextInputOutlineSuffixProperties>({
+            node: textInputOutline,
+            key: TEXT_INPUT_OUTLINE_SUFFIX_KEY,
+          });
+
+          return {
+            variant: "outline",
+            ...(textInputOutline.componentProperties.State.value === "Disabled" && {
+              disabled: true,
+            }),
+            ...(textInputOutline.componentProperties.State.value === "Read Only" && {
+              readOnly: true,
+            }),
+            ...(textInputOutline.componentProperties.State.value === "Error" && {
+              invalid: true,
+            }),
+            ...(textInputOutline.componentProperties.State.value === "Error Focused" && {
+              invalid: true,
+            }),
+            ...(textInputOutline.componentProperties["Has Prefix#32514:10"].value === true &&
+              prefix &&
+              prefix.componentProperties.Type.value === "Icon" && {
+                prefixIcon: ctx.iconHandler.transform(prefix.componentProperties["Icon#34021:2"]),
+              }),
+            ...(textInputOutline.componentProperties["Has Suffix#32865:68"].value === true &&
+              suffix &&
+              suffix.componentProperties["Type (Figma Only)"].value === "Icon" && {
+                suffixIcon: ctx.iconHandler.transform(suffix.componentProperties["Icon#45391:0"]),
+              }),
+            ...(textInputOutline.componentProperties["Has Suffix#32865:68"].value === true &&
+              suffix &&
+              suffix.componentProperties["Type (Figma Only)"].value === "Text" && {
+                suffix: suffix.componentProperties["Suffix Text#34021:4"].value,
+              }),
+          };
+        }
+
+        if (textInputUnderline) {
+          const [prefix] = findAllInstances<TextInputUnderlinePrefixProperties>({
+            node: textInputUnderline,
+            key: TEXT_INPUT_UNDERLINE_PREFIX_KEY,
+          });
+
+          const [suffix] = findAllInstances<TextInputUnderlineSuffixProperties>({
+            node: textInputUnderline,
+            key: TEXT_INPUT_UNDERLINE_SUFFIX_KEY,
+          });
+
+          return {
+            variant: "underline",
+            ...(textInputUnderline.componentProperties.State.value === "Disabled" && {
+              disabled: true,
+            }),
+            ...(textInputUnderline.componentProperties.State.value === "Read Only" && {
+              readOnly: true,
+            }),
+            ...(textInputUnderline.componentProperties.State.value === "Error" && {
+              invalid: true,
+            }),
+            ...(textInputUnderline.componentProperties.State.value === "Error Focused" && {
+              invalid: true,
+            }),
+            ...(textInputUnderline.componentProperties["Has Prefix#34125:0"].value === true &&
+              prefix &&
+              prefix.componentProperties.Type.value === "Icon" && {
+                prefixIcon: ctx.iconHandler.transform(prefix.componentProperties["Icon#34021:2"]),
+              }),
+            ...(textInputUnderline.componentProperties["Has Suffix#34125:8"].value === true &&
+              suffix &&
+              suffix.componentProperties["Type (Figma Only)"].value === "Icon" && {
+                suffixIcon: ctx.iconHandler.transform(suffix.componentProperties["Icon#45391:5"]),
+              }),
+            ...(textInputUnderline.componentProperties["Has Suffix#34125:8"].value === true &&
+              suffix &&
+              suffix.componentProperties["Type (Figma Only)"].value === "Text" && {
+                suffix: suffix.componentProperties["Suffix Text#34021:4"].value,
+              }),
+          };
+        }
+
+        return {};
+      })();
+
+      // these can be fragile but better than having 9 different handlers
+      const placeholder = findOne(
+        node,
+        (node) => node.type === "TEXT" && node.name.toLowerCase().includes("placeholder"),
+      ) as NormalizedTextNode;
+
+      const value = findOne(
+        node,
+        (node) => node.type === "TEXT" && node.name.toLowerCase().includes("value"),
+      ) as NormalizedTextNode;
+
+      const inputProps = {
+        ...(placeholder && {
+          placeholder: placeholder.characters,
+        }),
+      };
+
+      return createLocalSnippetElement(
+        "TextField",
+        {
+          ...fieldProps,
+          ...commonProps,
+          ...(value && {
+            defaultValue: value.characters,
+          }),
+        },
+        createLocalSnippetElement("TextFieldInput", inputProps),
+      );
+    },
+  );
+};
+
+export const createTextareaFieldHandler = (ctx: ComponentHandlerDeps) => {
+  const fieldHeaderHandler = createFieldHeaderHandler(ctx);
+  const fieldFooterHandler = createFieldFooterHandler(ctx);
+
+  return defineComponentHandler<TextareaFieldProperties>(
+    metadata.templateTextareaField.key,
+    (node, traverse) => {
+      const [textarea] = findAllInstances<TextareaProperties>({
+        node,
+        key: TEXTAREA_KEY,
+      });
+      const [fieldHeader] = findAllInstances<FieldHeaderProperties>({
+        node,
+        key: FIELD_KEYS.HEADER,
+      });
+      const [fieldFooter] = findAllInstances<FieldFooterProperties>({
+        node,
+        key: FIELD_KEYS.FOOTER,
+      });
+
+      const fieldProps = {
+        ...(fieldHeader
+          ? (fieldHeaderHandler.transform(fieldHeader, traverse).props as FieldHeaderProps)
+          : {}),
+        ...(fieldFooter
+          ? (fieldFooterHandler.transform(fieldFooter, traverse).props as FieldFooterProps)
+          : {}),
+      };
+
+      // these can be fragile but better than having 9 different handlers
+      const placeholder = findOne(
+        node,
+        (node) => node.type === "TEXT" && node.name.toLowerCase().includes("placeholder"),
+      ) as NormalizedTextNode;
+
+      const value = findOne(
+        node,
+        (node) => node.type === "TEXT" && node.name.toLowerCase().includes("value"),
+      ) as NormalizedTextNode;
+
+      const inputProps = {
+        autoresize: textarea.componentProperties["Auto Size (Figma Only)"].value === "true",
+        ...(placeholder && {
+          placeholder: placeholder.characters,
+        }),
+      };
+
+      const commonProps = {
+        ...(textarea.componentProperties.State.value === "Disabled" && {
+          disabled: true,
+        }),
+        ...(textarea.componentProperties.State.value === "Read Only" && {
+          readOnly: true,
+        }),
+        ...(value && {
+          defaultValue: value.characters,
+        }),
+      };
+
+      return createLocalSnippetElement(
+        "TextField",
+        { ...fieldProps, ...commonProps },
+        createLocalSnippetElement("TextFieldTextarea", inputProps),
+      );
+    },
+  );
+};

package/src/codegen/targets/react/component/handlers/archive/toggle-button.ts

@@ -0,0 +1,43 @@
+import type { ToggleButtonProperties } 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 { createLocalSnippetHelper, createSeedReactElement } from "../../../element-factories";
+import type { ComponentHandlerDeps } from "../../deps.interface";
+import { handleSizeProp } from "../../size";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("toggle-button");
+
+export const createToggleButtonHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ToggleButtonProperties>(
+    metadata.toggleButton.key,
+    ({ componentProperties: props }) => {
+      const commonProps = {
+        variant: camelCase(props.Variant.value),
+        size: handleSizeProp(props.Size.value),
+        ...(props.Selected.value === "True" && {
+          defaultPressed: true,
+        }),
+        ...(props.State.value === "Disabled" && {
+          disabled: true,
+        }),
+        ...(props.State.value === "Loading" && {
+          loading: true,
+        }),
+      };
+
+      return createLocalSnippetElement("ToggleButton", commonProps, [
+        props["Show Prefix Icon#6122:392"].value
+          ? createSeedReactElement("PrefixIcon", {
+              svg: ctx.iconHandler.transform(props["Prefix Icon#6122:98"]),
+            })
+          : undefined,
+        props["Label#6122:49"].value,
+        props["Show Suffix Icon#6122:147"].value
+          ? createSeedReactElement("SuffixIcon", {
+              svg: ctx.iconHandler.transform(props["Suffix Icon#6122:343"]),
+            })
+          : undefined,
+      ]);
+    },
+  );