@seed-design/figma 0.1.6 → 0.1.8

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

@@ -45,7 +45,9 @@ export const createProgressCircleHandler = (_ctx: ComponentHandlerDeps) =>
         minValue,
         maxValue,
         size: props.Size.value,
-        tone: camelCase(props.Tone.value),
+        ...(props.Tone.value !== "Custom" && {
+          tone: camelCase(props.Tone.value),
+        }),
       };
 
       return createLocalSnippetElement("ProgressCircle", commonProps);

package/src/codegen/targets/react/component/handlers/segmented-control.ts

@@ -36,7 +36,7 @@ export const createSegmentedControlHandler = (ctx: ComponentHandlerDeps) => {
 
   return defineComponentHandler<SegmentedControlProperties>(
     metadata.segmentedControl.key,
-    (node) => {
+    (node, traverse) => {
       const segments = findAllInstances<SegmentedControlItemProperties>({
         node,
         key: segmentedControlItemHandler.key,
@@ -46,7 +46,9 @@ export const createSegmentedControlHandler = (ctx: ComponentHandlerDeps) => {
         segment.componentProperties.State.value.split("-").includes("Selected"),
       );
 
-      const segmentedControlChildren = segments.map(segmentedControlItemHandler.transform);
+      const segmentedControlChildren = segments.map((segment) =>
+        segmentedControlItemHandler.transform(segment, traverse),
+      );
 
       const commonProps = {
         ...(selectedSegment && {

package/src/codegen/targets/react/component/handlers/select-box.ts

@@ -42,7 +42,7 @@ export const createSelectBoxGroupHandler = (ctx: ComponentHandlerDeps) => {
 
   return defineComponentHandler<SelectBoxGroupProperties>(
     metadata.templateSelectBoxGroup.key,
-    (node) => {
+    (node, traverse) => {
       const props = node.componentProperties;
 
       const tag = match(props.Control.value)
@@ -59,10 +59,13 @@ export const createSelectBoxGroupHandler = (ctx: ComponentHandlerDeps) => {
         selectBox.componentProperties.State.value.split("-").includes("Selected"),
       );
 
+      // traverse the container like it's a frame
+      const vStackProps = traverse({ ...node, type: "FRAME" })?.props;
+
       const stack = createSeedReactElement(
-        "Stack",
-        { gap: "spacingY.componentDefault" },
-        selectBoxes.map(selectBoxHandler.transform),
+        "VStack",
+        vStackProps,
+        selectBoxes.map((box) => selectBoxHandler.transform(box, traverse)),
       );
 
       const commonProps = {

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

@@ -14,8 +14,8 @@ export const createSnackbarHandler = (_ctx: ComponentHandlerDeps) =>
       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,
+        ...(props["Show Action#1528:0"].value && {
+          actionLabel: props["Action Label#1528:8"].value,
         }),
       };
 

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

@@ -1,131 +1,14 @@
-import type {
-  TabsFillItemProperties,
-  TabsHugItemProperties,
-  TabsProperties,
-} from "@/codegen/component-properties";
-import { defineComponentHandler } from "@/codegen/core";
-import * as metadata from "@/entities/data/__generated__/component-sets";
-import type { NormalizedInstanceNode } from "@/normalizer";
-import { camelCase } from "change-case";
 import { createLocalSnippetHelper } from "../../element-factories";
-import type { ComponentHandlerDeps } from "../deps.interface";
-import { handleSizeProp } from "../size";
 
-const { createLocalSnippetElement } = createLocalSnippetHelper("tabs");
+const { createLocalSnippetElement: createTabsLocalSnippetElement } =
+  createLocalSnippetHelper("tabs");
 
-const TABS_HUG_ITEM_KEY = "c242492543b327ceb84fa9933841512fc62a898c";
-const createTabsHugItemHandler = (_ctx: ComponentHandlerDeps) =>
-  defineComponentHandler<TabsHugItemProperties>(
-    TABS_HUG_ITEM_KEY,
-    ({ componentProperties: props }) => {
-      const states = props.State.value.split("-");
+const TABS_UNDERLINE_HUG_ITEM_KEY = "946cc52671ac3f46e20a8ff12fcc1c7f618da675";
+const TABS_UNDERLINE_FILL_ITEM_KEY = "78039b6b86852b685a6e93e9b6743b9e577cd7db";
 
-      const commonProps = {
-        value: props["Label#4478:2"].value,
-        ...(props.Notification.value === "True" && {
-          alert: true,
-        }),
-        ...(states.includes("Disabled") && {
-          disabled: true,
-        }),
-      };
+const { createLocalSnippetElement: createChipTabsLocalSnippetElement } =
+  createLocalSnippetHelper("chip-tabs");
 
-      return createLocalSnippetElement("TabsTrigger", commonProps, props["Label#4478:2"].value);
-    },
-  );
+const TABS_CHIP_ITEM_KEY = "95bf31a329f9e8bba0d9aa2299d1552f1d388148";
 
-const TABS_FILL_ITEM_KEY = "7275293344efb40ee9a3f5248ba2659b94a0b305";
-const createTabsFillItemHandler = (_ctx: ComponentHandlerDeps) =>
-  defineComponentHandler<TabsFillItemProperties>(
-    TABS_FILL_ITEM_KEY,
-    ({ 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 createLocalSnippetElement("TabsTrigger", commonProps, props["Label#4478:2"].value);
-    },
-  );
-
-export const createTabsHandler = (ctx: ComponentHandlerDeps) => {
-  const tabsHugItemHandler = createTabsHugItemHandler(ctx);
-  const tabsFillItemHandler = createTabsFillItemHandler(ctx);
-
-  return defineComponentHandler<TabsProperties>(metadata.tablist.key, (node) => {
-    const { componentProperties: props, children } = node;
-
-    const mappedItems = children.map(
-      (
-        child,
-      ): {
-        triggerLayout: "hug" | "fill";
-        node: NormalizedInstanceNode & {
-          componentProperties: TabsHugItemProperties | TabsFillItemProperties;
-        };
-      } | null => {
-        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;
-      },
-    );
-
-    const tabsItems = mappedItems.filter(
-      (item): item is NonNullable<(typeof mappedItems)[number]> => item !== null,
-    );
-
-    const selectedTabsItem = tabsItems.find(({ node: { componentProperties } }) =>
-      componentProperties.State.value.split("-").includes("Selected"),
-    )?.node;
-
-    const tabTriggerList = createLocalSnippetElement(
-      "TabsList",
-      undefined,
-      tabsItems.map(({ triggerLayout, node }) => {
-        switch (triggerLayout) {
-          case "hug":
-            return tabsHugItemHandler.transform(node);
-          case "fill":
-            return tabsFillItemHandler.transform(node);
-        }
-      }),
-    );
-
-    const tabContents = tabsItems.map(({ node }) => {
-      const value = node.componentProperties["Label#4478:2"].value;
-
-      return createLocalSnippetElement("TabsContent", { value }, "{/* TODO: 컨텐츠 추가 */}");
-    });
-
-    const commonProps = {
-      triggerLayout: camelCase(props.Layout.value),
-      size: handleSizeProp(props.Size.value),
-      ...(selectedTabsItem && {
-        defaultValue: selectedTabsItem.componentProperties["Label#4478:2"].value,
-      }),
-    };
-
-    return createLocalSnippetElement("TabsRoot", commonProps, [tabTriggerList, ...tabContents]);
-  });
-};
+// TODO: Implement the tabs handler

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

@@ -1,25 +1,30 @@
 import type { ComponentHandler } from "@/codegen/core";
 import type { NormalizedInstanceNode } from "@/normalizer";
 import type { ComponentHandlerDeps } from "./deps.interface";
-import { createActionButtonHandler } from "./handlers/action-button";
-import { createActionChipHandler } from "./handlers/action-chip";
-import { createActionSheetHandler } from "./handlers/action-sheet";
+
+import {
+  createActionButtonHandler,
+  createActionButtonGhostHandler,
+} from "./handlers/action-button";
+import { createAlertDialogHandler } from "./handlers/alert-dialog";
 import { createAppBarHandler } from "./handlers/app-bar";
 import { createAvatarHandler } from "./handlers/avatar";
 import { createAvatarStackHandler } from "./handlers/avatar-stack";
 import { createBadgeHandler } from "./handlers/badge";
+import { createBottomSheetHandler } from "./handlers/bottom-sheet";
 import { createCalloutHandler } from "./handlers/callout";
 import { createCheckboxHandler } from "./handlers/checkbox";
-import { createChipTabsHandler } from "./handlers/chip-tabs";
-import { createControlChipHandler } from "./handlers/control-chip";
+import { createChipHandler } from "./handlers/chip";
+import { createContextualFloatingButtonHandler } from "./handlers/contextual-floating-button";
+import { createDividerHandler } from "./handlers/divider";
 import { createErrorStateHandler } from "./handlers/error-state";
-import { createExtendedActionSheetHandler } from "./handlers/extended-action-sheet";
-import { createExtendedFabHandler } from "./handlers/extended-fab";
-import { createFabHandler } from "./handlers/fab";
+import { createFloatingActionButtonHandler } from "./handlers/floating-action-button";
 import { createHelpBubbleHandler } from "./handlers/help-bubble";
 import { createIdentityPlaceholderHandler } from "./handlers/identity-placeholder";
 import { createInlineBannerHandler } from "./handlers/inline-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 { createProgressCircleHandler } from "./handlers/progress-circle";
 import { createReactionButtonHandler } from "./handlers/reaction-button";
@@ -28,8 +33,6 @@ import { createSelectBoxGroupHandler, createSelectBoxHandler } from "./handlers/
 import { createSkeletonHandler } from "./handlers/skeleton";
 import { createSnackbarHandler } from "./handlers/snackbar";
 import { createSwitchHandler } from "./handlers/switch";
-import { createTabsHandler } from "./handlers/tabs";
-import { createTextButtonHandler } from "./handlers/text-button";
 import { createTextFieldHandler } from "./handlers/text-field";
 import { createToggleButtonHandler } from "./handlers/toggle-button";
 
@@ -46,25 +49,27 @@ export function bindComponentHandler<T extends NormalizedInstanceNode["component
 }
 
 export const unboundSeedComponentHandlers: Array<UnboundComponentHandler<any>> = [
+  createActionButtonGhostHandler,
   createActionButtonHandler,
-  createActionChipHandler,
-  createActionSheetHandler,
+  createAlertDialogHandler,
   createAppBarHandler,
   createAvatarHandler,
   createAvatarStackHandler,
   createBadgeHandler,
+  createBottomSheetHandler,
   createCalloutHandler,
   createCheckboxHandler,
-  createChipTabsHandler,
-  createControlChipHandler,
+  createChipHandler,
+  createContextualFloatingButtonHandler,
+  createDividerHandler,
   createErrorStateHandler,
-  createExtendedActionSheetHandler,
-  createExtendedFabHandler,
-  createFabHandler,
+  createFloatingActionButtonHandler,
   createHelpBubbleHandler,
   createIdentityPlaceholderHandler,
   createInlineBannerHandler,
   createMannerTempBadgeHandler,
+  createMannerTempHandler,
+  createMenuSheetHandler,
   createMultilineTextFieldHandler,
   createProgressCircleHandler,
   createReactionButtonHandler,
@@ -74,8 +79,6 @@ export const unboundSeedComponentHandlers: Array<UnboundComponentHandler<any>> =
   createSkeletonHandler,
   createSnackbarHandler,
   createSwitchHandler,
-  createTabsHandler,
-  createTextButtonHandler,
   createTextFieldHandler,
   createToggleButtonHandler,
 ];

package/src/codegen/targets/react/instance.ts

@@ -37,7 +37,7 @@ export function createInstanceTransformer({
       : componentHandlers[componentKey];
 
     if (componentHandler) {
-      return componentHandler.transform(node);
+      return componentHandler.transform(node, traverse);
     }
 
     return frameTransformer(node, traverse);

package/src/codegen/targets/react/pipeline.ts

@@ -28,7 +28,8 @@ import {
 import { createTextTransformer } from "./text";
 import {
   defaultRawValueFormatters,
-  defaultStyleNameFormatter,
+  defaultTextStyleNameFormatter,
+  defaultFillStyleResolver,
   defaultVariableNameFormatter,
 } from "./value-resolver";
 
@@ -51,7 +52,8 @@ export function createPipeline(options: CreatePipelineConfig = {}) {
     variableService,
     variableNameFormatter: defaultVariableNameFormatter,
     styleService,
-    styleNameFormatter: defaultStyleNameFormatter,
+    textStyleNameFormatter: defaultTextStyleNameFormatter,
+    fillStyleResolver: defaultFillStyleResolver,
     rawValueFormatters: defaultRawValueFormatters,
     shouldInferVariableName,
   });

package/src/codegen/targets/react/props.ts

@@ -291,16 +291,23 @@ export function createTypeStylePropsConverter({
   });
 }
 
-export interface FrameFillProps {
-  bg?: string;
-}
+export type FrameFillProps =
+  | { bg?: string | undefined; bgGradient?: never; bgGradientDirection?: never }
+  | { bg?: never; bgGradient: string; bgGradientDirection?: string };
 
 export function createFrameFillPropsConverter(valueResolver: ReactValueResolver) {
   return definePropsConverter<FillTrait, FrameFillProps>((node) => {
     const bg = valueResolver.getFormattedValue.frameFill(node);
 
+    if (bg === undefined || typeof bg === "string") {
+      return {
+        bg,
+      };
+    }
+
     return {
-      bg,
+      bgGradient: bg.value,
+      ...(bg.direction && { bgGradientDirection: bg.direction }),
     };
   });
 }

package/src/codegen/targets/react/value-resolver.ts

@@ -3,7 +3,13 @@ import { camelCasePreserveUnderscoreBetweenNumbers } from "@/utils/common";
 import { toCssPixel, toCssRgba } from "@/utils/css";
 import { camelCase } from "change-case";
 
-export type ReactValueResolver = ValueResolver<string, string, string, number>;
+export type ReactValueResolver = ValueResolver<
+  string,
+  { value: string; direction?: string },
+  string,
+  string,
+  number
+>;
 
 export const defaultVariableNameFormatter = ({ slug }: { slug: string[] }) =>
   slug
@@ -21,8 +27,37 @@ export const defaultVariableNameFormatter = ({ slug }: { slug: string[] }) =>
     .map(camelCasePreserveUnderscoreBetweenNumbers)
     .join(".");
 
-export const defaultStyleNameFormatter = ({ slug }: { slug: string[] }) =>
-  camelCase(slug[slug.length - 1]!, { mergeAmbiguousCharacters: true });
+export const defaultTextStyleNameFormatter = ({ slug }: { slug: string[] }) => {
+  return camelCase(slug[slug.length - 1]!, { mergeAmbiguousCharacters: true });
+};
+
+export const defaultFillStyleResolver = ({ slug }: { slug: string[] }) => {
+  const [, ...rest] = slug;
+
+  if (rest[0] === "fade") {
+    // ["fade", "layer-default", "↓(to-bottom)"]
+
+    const last = rest[rest.length - 1];
+
+    const direction = (() => {
+      if (last.startsWith("↓")) return "to bottom";
+      if (last.startsWith("↑")) return "to top";
+      if (last.startsWith("→")) return "to right";
+      if (last.startsWith("←")) return "to left";
+
+      return "unknown";
+    })();
+
+    return {
+      value: camelCase(rest.slice(0, -1).join("-"), { mergeAmbiguousCharacters: true }),
+      direction,
+    };
+  }
+
+  return {
+    value: camelCase(rest.join("-"), { mergeAmbiguousCharacters: true }),
+  };
+};
 
 export const defaultRawValueFormatters = {
   color: (value: RGBA) => toCssRgba(value),

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

@@ -2,21 +2,21 @@ export declare const metadata: {
   "name": "🟢 Action Button",
   "key": "450ede9d0bf42fc6ef14345c77e6e407d6d5ee89",
   "componentPropertyDefinitions": {
+    "Label#5987:61": {
+      "type": "TEXT"
+    },
     "Suffix Icon#5987:244": {
       "type": "INSTANCE_SWAP",
       "preferredValues": []
     },
-    "Icon#7574:0": {
+    "Prefix Icon#5987:305": {
       "type": "INSTANCE_SWAP",
       "preferredValues": []
     },
-    "Prefix Icon#5987:305": {
+    "Icon#7574:0": {
       "type": "INSTANCE_SWAP",
       "preferredValues": []
     },
-    "Label#5987:61": {
-      "type": "TEXT"
-    },
     "Size": {
       "type": "VARIANT",
       "variantOptions": [

package/src/entities/data/__generated__/component-sets/action-button.mjs

@@ -2,21 +2,21 @@ export const metadata = {
   "name": "🟢 Action Button",
   "key": "450ede9d0bf42fc6ef14345c77e6e407d6d5ee89",
   "componentPropertyDefinitions": {
+    "Label#5987:61": {
+      "type": "TEXT"
+    },
     "Suffix Icon#5987:244": {
       "type": "INSTANCE_SWAP",
       "preferredValues": []
     },
-    "Icon#7574:0": {
+    "Prefix Icon#5987:305": {
       "type": "INSTANCE_SWAP",
       "preferredValues": []
     },
-    "Prefix Icon#5987:305": {
+    "Icon#7574:0": {
       "type": "INSTANCE_SWAP",
       "preferredValues": []
     },
-    "Label#5987:61": {
-      "type": "TEXT"
-    },
     "Size": {
       "type": "VARIANT",
       "variantOptions": [

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

@@ -0,0 +1,26 @@
+export declare const metadata: {
+  "name": "🟢 Alert Dialog",
+  "key": "e0c89524a554ca1bf95c016b7255f29e257624aa",
+  "componentPropertyDefinitions": {
+    "Title Text#20361:0": {
+      "type": "TEXT"
+    },
+    "Description Text#20361:7": {
+      "type": "TEXT"
+    },
+    "Show Title#20361:14": {
+      "type": "BOOLEAN"
+    },
+    "Layout": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "Single",
+        "Neutral",
+        "Neutral (Overflow)",
+        "Critical",
+        "Critical (Overflow)",
+        "Nonpreferred"
+      ]
+    }
+  }
+};

package/src/entities/data/__generated__/component-sets/alert-dialog.mjs

@@ -0,0 +1,26 @@
+export const metadata = {
+  "name": "🟢 Alert Dialog",
+  "key": "e0c89524a554ca1bf95c016b7255f29e257624aa",
+  "componentPropertyDefinitions": {
+    "Title Text#20361:0": {
+      "type": "TEXT"
+    },
+    "Description Text#20361:7": {
+      "type": "TEXT"
+    },
+    "Show Title#20361:14": {
+      "type": "BOOLEAN"
+    },
+    "Layout": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "Single",
+        "Neutral",
+        "Neutral (Overflow)",
+        "Critical",
+        "Critical (Overflow)",
+        "Nonpreferred"
+      ]
+    }
+  }
+};

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

@@ -1,6 +1,6 @@
 export declare const metadata: {
   "name": "🟢 Avatar Stack",
-  "key": "019467fdad2192abb48699dcfb79e344df04b799",
+  "key": "e8e91e01000d878742c55cd6e44b6786460440f7",
   "componentPropertyDefinitions": {
     "Size": {
       "type": "VARIANT",
@@ -8,24 +8,11 @@ export declare const metadata: {
         "20",
         "24",
         "36",
+        "42",
         "48",
-        "64"
-      ]
-    },
-    "Item Count": {
-      "type": "VARIANT",
-      "variantOptions": [
-        "2",
-        "3",
-        "4",
-        "5"
-      ]
-    },
-    "Top Item": {
-      "type": "VARIANT",
-      "variantOptions": [
-        "Last Item",
-        "First Item"
+        "64",
+        "80",
+        "96"
       ]
     }
   }

package/src/entities/data/__generated__/component-sets/avatar-stack.mjs

@@ -1,6 +1,6 @@
 export const metadata = {
   "name": "🟢 Avatar Stack",
-  "key": "019467fdad2192abb48699dcfb79e344df04b799",
+  "key": "e8e91e01000d878742c55cd6e44b6786460440f7",
   "componentPropertyDefinitions": {
     "Size": {
       "type": "VARIANT",
@@ -8,24 +8,11 @@ export const metadata = {
         "20",
         "24",
         "36",
+        "42",
         "48",
-        "64"
-      ]
-    },
-    "Item Count": {
-      "type": "VARIANT",
-      "variantOptions": [
-        "2",
-        "3",
-        "4",
-        "5"
-      ]
-    },
-    "Top Item": {
-      "type": "VARIANT",
-      "variantOptions": [
-        "Last Item",
-        "First Item"
+        "64",
+        "80",
+        "96"
       ]
     }
   }

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

@@ -1,11 +1,8 @@
 export declare const metadata: {
   "name": "🟢 Avatar",
-  "key": "d71644aeba2e29deda366798fdfe35977166d120",
+  "key": "4a8853c3068c08b69b13e71dd42ce186e968697e",
   "componentPropertyDefinitions": {
-    "Show Image#71850:57": {
-      "type": "BOOLEAN"
-    },
-    "Show Badge#1398:26": {
+    "Has Image Contents#33407:0": {
       "type": "BOOLEAN"
     },
     "Size": {
@@ -20,6 +17,15 @@ export declare const metadata: {
         "80",
         "96"
       ]
+    },
+    "Badge": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "None",
+        "Circle",
+        "Shield",
+        "Flower"
+      ]
     }
   }
 };

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

@@ -1,11 +1,8 @@
 export const metadata = {
   "name": "🟢 Avatar",
-  "key": "d71644aeba2e29deda366798fdfe35977166d120",
+  "key": "4a8853c3068c08b69b13e71dd42ce186e968697e",
   "componentPropertyDefinitions": {
-    "Show Image#71850:57": {
-      "type": "BOOLEAN"
-    },
-    "Show Badge#1398:26": {
+    "Has Image Contents#33407:0": {
       "type": "BOOLEAN"
     },
     "Size": {
@@ -20,6 +17,15 @@ export const metadata = {
         "80",
         "96"
       ]
+    },
+    "Badge": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "None",
+        "Circle",
+        "Shield",
+        "Flower"
+      ]
     }
   }
 };