@seed-design/figma 0.2.1 → 0.2.4

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

@@ -1,14 +1,297 @@
 import { createLocalSnippetHelper } from "../../element-factories";
+import type {
+  ChipProperties,
+  ChipTabsTriggerProperties,
+  TabsChipWrapperProperties,
+  TabsLineTriggerFillProperties,
+  TabsLineTriggerHugProperties,
+  TabsLineWrapperProperties,
+  TabsProperties,
+} from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/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 TABS_UNDERLINE_HUG_ITEM_KEY = "946cc52671ac3f46e20a8ff12fcc1c7f618da675";
-const TABS_UNDERLINE_FILL_ITEM_KEY = "78039b6b86852b685a6e93e9b6743b9e577cd7db";
-
 const { createLocalSnippetElement: createChipTabsLocalSnippetElement } =
   createLocalSnippetHelper("chip-tabs");
 
-const TABS_CHIP_ITEM_KEY = "95bf31a329f9e8bba0d9aa2299d1552f1d388148";
+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,
+      }),
+    };
 
-// TODO: Implement the tabs handler
+    return createChipTabsLocalSnippetElement("ChipTabsTrigger", commonProps);
+  });

package/src/codegen/targets/react/component/index.ts

@@ -14,6 +14,7 @@ import { createBadgeHandler } from "./handlers/badge";
 import { createBottomSheetHandler } from "./handlers/bottom-sheet";
 import { createCalloutHandler } from "./handlers/callout";
 import { createCheckboxHandler } from "./handlers/checkbox";
+import { createCheckmarkHandler } from "@/codegen/targets/react/component/handlers/checkmark";
 import { createChipHandler } from "./handlers/chip";
 import { createContextualFloatingButtonHandler } from "./handlers/contextual-floating-button";
 import { createDividerHandler } from "./handlers/divider";
@@ -21,20 +22,24 @@ import { createErrorStateHandler } from "./handlers/error-state";
 import { createFloatingActionButtonHandler } from "./handlers/floating-action-button";
 import { createHelpBubbleHandler } from "./handlers/help-bubble";
 import { createIdentityPlaceholderHandler } from "./handlers/identity-placeholder";
-import { createPageBannerHandler } from "./handlers/page-banner";
 import { createMannerTempBadgeHandler } from "./handlers/manner-temp-badge";
 import { createMannerTempHandler } from "./handlers/manner-temp";
 import { createMenuSheetHandler } from "./handlers/menu-sheet";
 import { createMultilineTextFieldHandler } from "./handlers/multiline-text-field";
+import { createPageBannerHandler } from "./handlers/page-banner";
 import { createProgressCircleHandler } from "./handlers/progress-circle";
+import { createRadioMarkHandler } from "@/codegen/targets/react/component/handlers/radio-mark";
+import { createRadioGroupItemHandler } from "@/codegen/targets/react/component/handlers/radio-group";
 import { createReactionButtonHandler } from "./handlers/reaction-button";
 import { createSegmentedControlHandler } from "./handlers/segmented-control";
 import { createSelectBoxGroupHandler, createSelectBoxHandler } from "./handlers/select-box";
 import { createSkeletonHandler } from "./handlers/skeleton";
 import { createSnackbarHandler } from "./handlers/snackbar";
 import { createSwitchHandler } from "./handlers/switch";
+import { createTabsHandler } from "@/codegen/targets/react/component/handlers/tabs";
 import { createTextFieldHandler } from "./handlers/text-field";
 import { createToggleButtonHandler } from "./handlers/toggle-button";
+import { createListItemHandler } from "@/codegen/targets/react/component/handlers/list-item";
 
 export type { ComponentHandlerDeps };
 export type UnboundComponentHandler<T extends NormalizedInstanceNode["componentProperties"]> = (
@@ -59,6 +64,7 @@ export const unboundSeedComponentHandlers: Array<UnboundComponentHandler<any>> =
   createBottomSheetHandler,
   createCalloutHandler,
   createCheckboxHandler,
+  createCheckmarkHandler,
   createChipHandler,
   createContextualFloatingButtonHandler,
   createDividerHandler,
@@ -66,12 +72,15 @@ export const unboundSeedComponentHandlers: Array<UnboundComponentHandler<any>> =
   createFloatingActionButtonHandler,
   createHelpBubbleHandler,
   createIdentityPlaceholderHandler,
-  createPageBannerHandler,
+  createListItemHandler,
   createMannerTempBadgeHandler,
   createMannerTempHandler,
   createMenuSheetHandler,
   createMultilineTextFieldHandler,
+  createPageBannerHandler,
   createProgressCircleHandler,
+  createRadioGroupItemHandler,
+  createRadioMarkHandler,
   createReactionButtonHandler,
   createSegmentedControlHandler,
   createSelectBoxGroupHandler,
@@ -79,6 +88,7 @@ export const unboundSeedComponentHandlers: Array<UnboundComponentHandler<any>> =
   createSkeletonHandler,
   createSnackbarHandler,
   createSwitchHandler,
+  createTabsHandler,
   createTextFieldHandler,
   createToggleButtonHandler,
 ];

package/src/entities/data/__generated__/component-sets/checkbox.d.ts

@@ -12,6 +12,13 @@ export declare const metadata: {
         "Large"
       ]
     },
+    "Tone": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "🚫[Deprecated]Brand",
+        "Neutral"
+      ]
+    },
     "Shape": {
       "type": "VARIANT",
       "variantOptions": [
@@ -22,8 +29,8 @@ export declare const metadata: {
     "Weight": {
       "type": "VARIANT",
       "variantOptions": [
-        "Default",
-        "Stronger"
+        "Bold",
+        "Regular"
       ]
     },
     "Selected": {

package/src/entities/data/__generated__/component-sets/checkbox.mjs

@@ -12,6 +12,13 @@ export const metadata = {
         "Large"
       ]
     },
+    "Tone": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "🚫[Deprecated]Brand",
+        "Neutral"
+      ]
+    },
     "Shape": {
       "type": "VARIANT",
       "variantOptions": [
@@ -22,8 +29,8 @@ export const metadata = {
     "Weight": {
       "type": "VARIANT",
       "variantOptions": [
-        "Default",
-        "Stronger"
+        "Bold",
+        "Regular"
       ]
     },
     "Selected": {

package/src/entities/data/__generated__/component-sets/checkmark.d.ts

@@ -2,18 +2,25 @@ export declare const metadata: {
   "name": "🟢 Checkmark",
   "key": "fae60fb392f55bde60de1dbccb2f453320068805",
   "componentPropertyDefinitions": {
-    "Shape": {
+    "Size": {
       "type": "VARIANT",
       "variantOptions": [
-        "Square",
-        "Ghost"
+        "Medium",
+        "Large"
       ]
     },
-    "Size": {
+    "Tone": {
       "type": "VARIANT",
       "variantOptions": [
-        "Medium",
-        "Large"
+        "🚫[Deprecated]Brand",
+        "Neutral"
+      ]
+    },
+    "Shape": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "Square",
+        "Ghost"
       ]
     },
     "Selected": {

package/src/entities/data/__generated__/component-sets/checkmark.mjs

@@ -2,18 +2,25 @@ export const metadata = {
   "name": "🟢 Checkmark",
   "key": "fae60fb392f55bde60de1dbccb2f453320068805",
   "componentPropertyDefinitions": {
-    "Shape": {
+    "Size": {
       "type": "VARIANT",
       "variantOptions": [
-        "Square",
-        "Ghost"
+        "Medium",
+        "Large"
       ]
     },
-    "Size": {
+    "Tone": {
       "type": "VARIANT",
       "variantOptions": [
-        "Medium",
-        "Large"
+        "🚫[Deprecated]Brand",
+        "Neutral"
+      ]
+    },
+    "Shape": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "Square",
+        "Ghost"
       ]
     },
     "Selected": {

package/src/entities/data/__generated__/component-sets/divider.d.ts

@@ -8,8 +8,8 @@ export declare const metadata: {
     "Tone": {
       "type": "VARIANT",
       "variantOptions": [
-        "Neutral",
-        "Neutral Muted"
+        "Neutral Muted",
+        "Neutral Subtle"
       ]
     },
     "Orientation": {

package/src/entities/data/__generated__/component-sets/divider.mjs

@@ -8,8 +8,8 @@ export const metadata = {
     "Tone": {
       "type": "VARIANT",
       "variantOptions": [
-        "Neutral",
-        "Neutral Muted"
+        "Neutral Muted",
+        "Neutral Subtle"
       ]
     },
     "Orientation": {

package/src/entities/data/__generated__/component-sets/help-bubble.d.ts

@@ -2,6 +2,9 @@ export declare const metadata: {
   "name": "🟢 Help Bubble",
   "key": "804b327c091278a40d5891939eaed90bb2889659",
   "componentPropertyDefinitions": {
+    "Show Close Button#40538:0": {
+      "type": "BOOLEAN"
+    },
     "Show Description#62499:0": {
       "type": "BOOLEAN"
     },

package/src/entities/data/__generated__/component-sets/help-bubble.mjs

@@ -2,6 +2,9 @@ export const metadata = {
   "name": "🟢 Help Bubble",
   "key": "804b327c091278a40d5891939eaed90bb2889659",
   "componentPropertyDefinitions": {
+    "Show Close Button#40538:0": {
+      "type": "BOOLEAN"
+    },
     "Show Description#62499:0": {
       "type": "BOOLEAN"
     },

package/src/entities/data/__generated__/component-sets/index.d.ts

@@ -21,6 +21,8 @@ export { metadata as contextualFloatingButton } from "./contextual-floating-butt
 export { metadata as divider } from "./divider";
 export { metadata as floatingActionButton } from "./floating-action-button";
 export { metadata as helpBubble } from "./help-bubble";
+export { metadata as listHeader } from "./list-header";
+export { metadata as listItem } from "./list-item";
 export { metadata as mainTabNavigationGlobal } from "./main-tab-navigation-global";
 export { metadata as mainTabNavigationKr } from "./main-tab-navigation-kr";
 export { metadata as mannerTemp } from "./manner-temp";

package/src/entities/data/__generated__/component-sets/index.mjs

@@ -21,6 +21,8 @@ export { metadata as contextualFloatingButton } from "./contextual-floating-butt
 export { metadata as divider } from "./divider.mjs";
 export { metadata as floatingActionButton } from "./floating-action-button.mjs";
 export { metadata as helpBubble } from "./help-bubble.mjs";
+export { metadata as listHeader } from "./list-header.mjs";
+export { metadata as listItem } from "./list-item.mjs";
 export { metadata as mainTabNavigationGlobal } from "./main-tab-navigation-global.mjs";
 export { metadata as mainTabNavigationKr } from "./main-tab-navigation-kr.mjs";
 export { metadata as mannerTemp } from "./manner-temp.mjs";

package/src/entities/data/__generated__/component-sets/list-header.d.ts

@@ -0,0 +1,24 @@
+export declare const metadata: {
+  "name": "🟢 List Header",
+  "key": "609f93ed0608ef0a6d9a351e47595ad631bae0fa",
+  "componentPropertyDefinitions": {
+    "Title#28588:0": {
+      "type": "TEXT"
+    },
+    "Suffix": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "None",
+        "Button",
+        "Custom"
+      ]
+    },
+    "Title Weight": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "Medium",
+        "Bold"
+      ]
+    }
+  }
+};

package/src/entities/data/__generated__/component-sets/list-header.mjs

@@ -0,0 +1,24 @@
+export const metadata = {
+  "name": "🟢 List Header",
+  "key": "609f93ed0608ef0a6d9a351e47595ad631bae0fa",
+  "componentPropertyDefinitions": {
+    "Title#28588:0": {
+      "type": "TEXT"
+    },
+    "Suffix": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "None",
+        "Button",
+        "Custom"
+      ]
+    },
+    "Title Weight": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "Medium",
+        "Bold"
+      ]
+    }
+  }
+};