@seed-design/figma 1.1.13 → 1.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/figma",
-  "version": "1.1.13",
+  "version": "1.1.14",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",

package/src/codegen/component-properties.ts

@@ -309,8 +309,8 @@ export type RadioProperties = InferComponentDefinition<
   typeof sets.radio.componentPropertyDefinitions
 >;
 
-export type RadioMarkProperties = InferComponentDefinition<
-  typeof sets.radioMark.componentPropertyDefinitions
+export type RadiomarkProperties = InferComponentDefinition<
+  typeof sets.radiomark.componentPropertyDefinitions
 >;
 
 export type ReactionButtonProperties = InferComponentDefinition<
@@ -318,7 +318,7 @@ export type ReactionButtonProperties = InferComponentDefinition<
 >;
 
 export type ResultSectionProperties = InferComponentDefinition<
-  typeof sets.templateResultSection.componentPropertyDefinitions
+  typeof sets.resultSection.componentPropertyDefinitions
 >;
 
 export type SegmentedControlProperties = InferComponentDefinition<
@@ -370,8 +370,8 @@ export type SwitchProperties = InferComponentDefinition<
   typeof sets._switch.componentPropertyDefinitions
 >;
 
-export type SwitchMarkProperties = InferComponentDefinition<
-  typeof sets.switchMark.componentPropertyDefinitions
+export type SwitchmarkProperties = InferComponentDefinition<
+  typeof sets.switchmark.componentPropertyDefinitions
 >;
 
 export type ToggleButtonProperties = InferComponentDefinition<

package/src/codegen/core/value-resolver.ts

@@ -1,6 +1,7 @@
 import type { StyleService, VariableValueResolved } from "@/entities";
 import type {
   NormalizedCornerTrait,
+  NormalizedHasEffectsTrait,
   NormalizedHasFramePropertiesTrait,
   NormalizedHasGeometryTrait,
   NormalizedHasLayoutTrait,
@@ -63,6 +64,9 @@ export interface ValueResolver<TColor, TGradient, TDimension, TFontDimension, TF
     itemSpacing: (
       node: NormalizedHasFramePropertiesTrait & NormalizedIsLayerTrait,
     ) => string | TDimension | undefined;
+    counterAxisSpacing: (
+      node: NormalizedHasFramePropertiesTrait & NormalizedIsLayerTrait,
+    ) => string | TDimension | undefined;
     topLeftRadius: (
       node: NormalizedCornerTrait & NormalizedIsLayerTrait,
     ) => string | TDimension | undefined;
@@ -84,10 +88,14 @@ export interface ValueResolver<TColor, TGradient, TDimension, TFontDimension, TF
     lineHeight: (
       node: NormalizedTypePropertiesTrait & NormalizedIsLayerTrait,
     ) => string | TFontDimension | undefined;
+    boxShadow: (node: NormalizedHasEffectsTrait & NormalizedIsLayerTrait) => string | undefined;
   };
   getTextStyleValue: (
     node: NormalizedTypePropertiesTrait & NormalizedIsLayerTrait,
   ) => string | undefined; // TODO: we might turn this into a generic; not sure yet
+  getEffectStyleValue: (
+    node: NormalizedHasEffectsTrait & NormalizedIsLayerTrait,
+  ) => string | undefined;
 }
 
 export interface ValueResolverDeps<TColor, TGradient, TDimension, TFontDimension, TFontWeight> {
@@ -95,12 +103,20 @@ export interface ValueResolverDeps<TColor, TGradient, TDimension, TFontDimension
   variableNameFormatter: (props: { slug: string[] }) => string;
   styleService: StyleService;
   textStyleNameFormatter: (props: { slug: string[] }) => string;
+  effectStyleNameFormatter: (props: { slug: string[] }) => string;
   fillStyleResolver: (props: { slug: string[] }) => TGradient | undefined;
   rawValueFormatters: {
     color: (value: RGBA) => string | TColor;
     dimension: (value: number) => string | TDimension;
     fontDimension: (value: number) => string | TFontDimension;
     fontWeight: (value: number) => string | TFontWeight;
+    boxShadow: (value: {
+      type: "DROP_SHADOW" | "INNER_SHADOW";
+      color: RGBA;
+      offset: { x: number; y: number };
+      radius: number;
+      spread?: number;
+    }) => string;
   };
   shouldInferVariableName: boolean;
 }
@@ -110,6 +126,7 @@ export function createValueResolver<TColor, TGradient, TDimension, TFontDimensio
   variableNameFormatter,
   styleService,
   textStyleNameFormatter,
+  effectStyleNameFormatter,
   fillStyleResolver,
   rawValueFormatters,
   shouldInferVariableName,
@@ -149,12 +166,12 @@ export function createValueResolver<TColor, TGradient, TDimension, TFontDimensio
   }
 
   function processColor(
-    key: string | undefined,
+    id: string | undefined,
     value: RGBA | undefined,
     scope: "FRAME_FILL" | "SHAPE_FILL" | "STROKE_COLOR" | "TEXT_FILL",
   ) {
-    if (key) {
-      return getVariableName(key);
+    if (id) {
+      return getVariableName(id);
     }
 
     if (value !== undefined) {
@@ -175,12 +192,12 @@ export function createValueResolver<TColor, TGradient, TDimension, TFontDimensio
   }
 
   function processDimension(
-    key: string | undefined,
+    id: string | undefined,
     value: number | undefined,
     scope: "WIDTH_HEIGHT" | "GAP" | "CORNER_RADIUS",
   ) {
-    if (key) {
-      return getVariableName(key);
+    if (id) {
+      return getVariableName(id);
     }
 
     if (value !== undefined) {
@@ -191,12 +208,12 @@ export function createValueResolver<TColor, TGradient, TDimension, TFontDimensio
   }
 
   function processFontDimension(
-    key: string | undefined,
+    id: string | undefined,
     value: number | undefined,
     scope: "FONT_SIZE" | "LINE_HEIGHT",
   ) {
-    if (key) {
-      return getVariableName(key);
+    if (id) {
+      return getVariableName(id);
     }
 
     if (value !== undefined) {
@@ -206,9 +223,9 @@ export function createValueResolver<TColor, TGradient, TDimension, TFontDimensio
     return undefined;
   }
 
-  function processFontWeight(key: string | undefined, value: number | undefined) {
-    if (key) {
-      return getVariableName(key);
+  function processFontWeight(id: string | undefined, value: number | undefined) {
+    if (id) {
+      return getVariableName(id);
     }
 
     if (value !== undefined) {
@@ -271,6 +288,8 @@ export function createValueResolver<TColor, TGradient, TDimension, TFontDimensio
       processDimension(node.boundVariables?.paddingBottom?.id, node.paddingBottom, "GAP"),
     itemSpacing: (node) =>
       processDimension(node.boundVariables?.itemSpacing?.id, node.itemSpacing, "GAP"),
+    counterAxisSpacing: (node) =>
+      processDimension(node.boundVariables?.counterAxisSpacing?.id, node.counterAxisSpacing, "GAP"),
     frameFill: (node) =>
       node.fillStyleKey
         ? processFillStyle(node.fillStyleKey)
@@ -323,6 +342,11 @@ export function createValueResolver<TColor, TGradient, TDimension, TFontDimensio
         node.style.lineHeightPx,
         "LINE_HEIGHT",
       ),
+    boxShadow: (node) => {
+      if (node.effects.length === 0) return undefined;
+
+      return node.effects.map(rawValueFormatters.boxShadow).join(", ");
+    },
   };
 
   function getTextStyleValue(node: NormalizedTypePropertiesTrait & NormalizedIsLayerTrait) {
@@ -337,8 +361,21 @@ export function createValueResolver<TColor, TGradient, TDimension, TFontDimensio
     return textStyleNameFormatter({ slug });
   }
 
+  function getEffectStyleValue(node: NormalizedHasEffectsTrait & NormalizedIsLayerTrait) {
+    if (!node.effectStyleKey) return undefined;
+
+    const slug = styleService.getSlug(node.effectStyleKey);
+
+    if (!slug) {
+      return undefined;
+    }
+
+    return effectStyleNameFormatter({ slug });
+  }
+
   return {
     getFormattedValue,
     getTextStyleValue,
+    getEffectStyleValue,
   };
 }

package/src/codegen/targets/figma/frame.ts

@@ -25,6 +25,7 @@ export function createFrameTransformer({
         ...propsConverters.selfLayout(node),
         ...propsConverters.frameFill(node),
         ...propsConverters.stroke(node),
+        ...propsConverters.shadow(node),
       };
 
       return createElement(

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

@@ -9,6 +9,7 @@ import {
   createFrameFillPropsConverter,
   createRadiusPropsConverter,
   createSelfLayoutPropsConverter,
+  createShadowPropsConverter,
   createShapeFillPropsConverter,
   createStrokePropsConverter,
   createTextFillPropsConverter,
@@ -21,6 +22,7 @@ import {
 } from "./shape";
 import { createTextTransformer } from "./text";
 import {
+  defaultEffectStyleNameFormatter,
   defaultFillStyleResolver,
   defaultRawValueFormatters,
   defaultTextStyleNameFormatter,
@@ -40,6 +42,7 @@ export function createPipeline(options: CreatePipelineConfig = {}): CodeGenerato
     variableNameFormatter: defaultVariableNameFormatter,
     styleService,
     textStyleNameFormatter: defaultTextStyleNameFormatter,
+    effectStyleNameFormatter: defaultEffectStyleNameFormatter,
     fillStyleResolver: defaultFillStyleResolver,
     rawValueFormatters: defaultRawValueFormatters,
     shouldInferVariableName,
@@ -52,6 +55,7 @@ export function createPipeline(options: CreatePipelineConfig = {}): CodeGenerato
   const textFillPropsConverter = createTextFillPropsConverter(valueResolver);
   const radiusPropsConverter = createRadiusPropsConverter(valueResolver);
   const strokePropsConverter = createStrokePropsConverter(valueResolver);
+  const shadowPropsConverter = createShadowPropsConverter(valueResolver);
   const typeStylePropsConverter = createTypeStylePropsConverter(valueResolver);
 
   const propsConverters = {
@@ -62,6 +66,7 @@ export function createPipeline(options: CreatePipelineConfig = {}): CodeGenerato
     textFill: textFillPropsConverter,
     radius: radiusPropsConverter,
     stroke: strokePropsConverter,
+    shadow: shadowPropsConverter,
     typeStyle: typeStylePropsConverter,
   };
 

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

@@ -2,6 +2,7 @@ import { createPropsConverter, definePropsConverter, type PropsConverter } from
 import type {
   NormalizedCornerTrait,
   NormalizedHasChildrenTrait,
+  NormalizedHasEffectsTrait,
   NormalizedHasFramePropertiesTrait,
   NormalizedHasGeometryTrait,
   NormalizedHasLayoutTrait,
@@ -18,6 +19,7 @@ export interface PropsConverters {
   shapeFill: PropsConverter<FillTrait, FillProps>;
   textFill: PropsConverter<FillTrait, FillProps>;
   stroke: PropsConverter<StrokeTrait, StrokeProps>;
+  shadow: PropsConverter<ShadowTrait, ShadowProps>;
   typeStyle: PropsConverter<TypeStyleTrait, TypeStyleProps>;
 }
 
@@ -34,6 +36,8 @@ export type FillTrait = NormalizedIsLayerTrait & NormalizedHasGeometryTrait;
 
 export type StrokeTrait = NormalizedIsLayerTrait & NormalizedHasGeometryTrait;
 
+export type ShadowTrait = NormalizedIsLayerTrait & NormalizedHasEffectsTrait;
+
 export type TypeStyleTrait = NormalizedTypePropertiesTrait & NormalizedIsLayerTrait;
 
 export interface ContainerLayoutProps {
@@ -42,6 +46,7 @@ export interface ContainerLayoutProps {
   counterAxisAlignItems?: "MIN" | "CENTER" | "MAX" | "BASELINE";
   layoutWrap?: "WRAP" | "NO_WRAP";
   itemSpacing?: number | string; // string when variable
+  counterAxisSpacing?: number | string; // string when variable
   paddingTop?: number | string; // string when variable
   paddingBottom?: number | string; // string when variable
   paddingLeft?: number | string; // string when variable
@@ -64,6 +69,7 @@ export function createContainerLayoutPropsConverter(
       counterAxisAlignItems: ({ counterAxisAlignItems }) => counterAxisAlignItems,
       layoutWrap: ({ layoutWrap }) => layoutWrap,
       itemSpacing: (node) => valueResolver.getFormattedValue.itemSpacing(node),
+      counterAxisSpacing: (node) => valueResolver.getFormattedValue.counterAxisSpacing(node),
       paddingTop: (node) => valueResolver.getFormattedValue.paddingTop(node),
       paddingBottom: (node) => valueResolver.getFormattedValue.paddingBottom(node),
       paddingLeft: (node) => valueResolver.getFormattedValue.paddingLeft(node),
@@ -148,7 +154,7 @@ export function createRadiusPropsConverter(valueResolver: FigmaValueResolver) {
 }
 
 export interface FillProps {
-  fill?: string;
+  fill?: string | { value: string; direction?: string };
 }
 
 export function createFrameFillPropsConverter(valueResolver: FigmaValueResolver) {
@@ -231,3 +237,26 @@ export function createTypeStylePropsConverter(
     };
   });
 }
+
+export interface ShadowProps {
+  boxShadowStyle?: string;
+  boxShadow?: string;
+}
+
+export function createShadowPropsConverter(
+  valueResolver: FigmaValueResolver,
+): PropsConverter<ShadowTrait, ShadowProps> {
+  return definePropsConverter((node: ShadowTrait) => {
+    const effectStyleName = valueResolver.getEffectStyleValue(node);
+    if (effectStyleName) {
+      return {
+        boxShadowStyle: effectStyleName,
+      };
+    }
+
+    const boxShadow = valueResolver.getFormattedValue.boxShadow(node);
+    return {
+      boxShadow,
+    };
+  });
+}

package/src/codegen/targets/figma/shape.ts

@@ -33,6 +33,7 @@ export function createVectorTransformer({
         ...propsConverters.radius(node),
         ...propsConverters.stroke(node),
         ...propsConverters.shapeFill(node),
+        ...propsConverters.shadow(node),
       },
       [],
       {

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

@@ -1,5 +1,6 @@
 import type { ValueResolver } from "@/codegen/core";
 import { toCssRgba } from "@/utils/css";
+import type { RGBA } from "@figma/rest-api-spec";
 import { camelCase } from "change-case";
 
 export type FigmaValueResolver = ValueResolver<
@@ -19,6 +20,9 @@ export const defaultVariableNameFormatter = ({ slug }: { slug: string[] }) =>
 export const defaultTextStyleNameFormatter = ({ slug }: { slug: string[] }) =>
   slug[slug.length - 1]!;
 
+export const defaultEffectStyleNameFormatter = ({ slug }: { slug: string[] }) =>
+  slug[slug.length - 1]!;
+
 export const defaultFillStyleResolver = ({ slug }: { slug: string[] }) => {
   const [, ...rest] = slug;
 
@@ -47,9 +51,25 @@ export const defaultFillStyleResolver = ({ slug }: { slug: string[] }) => {
   };
 };
 
+function formatBoxShadow(value: {
+  type: "DROP_SHADOW" | "INNER_SHADOW";
+  color: RGBA;
+  offset: { x: number; y: number };
+  radius: number;
+  spread?: number;
+}): string {
+  const { type, color, offset, radius, spread } = value;
+  const inset = type === "INNER_SHADOW" ? "inset " : "";
+  const colorStr = toCssRgba(color);
+  const spreadStr = spread !== undefined ? ` ${spread}px` : "";
+
+  return `${inset}${offset.x}px ${offset.y}px ${radius}px${spreadStr} ${colorStr}`;
+}
+
 export const defaultRawValueFormatters = {
   color: (value: RGBA) => toCssRgba(value),
   dimension: (value: number) => value,
   fontDimension: (value: number) => value,
   fontWeight: (value: number) => value,
+  boxShadow: formatBoxShadow,
 };

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

@@ -80,7 +80,7 @@ export const createMenuSheetHandler = (ctx: ComponentHandlerDeps) => {
     // const description = props["Description Text#21827:0"].value;
 
     const { labelAlign } = match(props.Layout.value)
-      .with("Text with Icon", "Text with Subtext", () => ({ labelAlign: "left" }))
+      .with("Text with Icon", () => ({ labelAlign: "left" }))
       .with("Text Only", () => ({ labelAlign: "center" }))
       .exhaustive();
 

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

@@ -34,7 +34,7 @@ export const createPageBannerHandler = (ctx: ComponentHandlerDeps) => {
       .with("Actionable", () => ({ tag: "ActionablePageBanner", suffix: undefined }))
       .with("Dismissible", () => ({ tag: "DismissiblePageBanner", suffix: undefined }))
       .with("Display", () => ({ tag: "PageBanner", suffix: undefined }))
-      .with("With Action", () => {
+      .with("Display (With Action)", () => {
         const [buttonNode] = findAllInstances<PageBannerButtonProperties>({
           node,
           key: SUFFIX_BUTTON_KEY,
@@ -43,7 +43,7 @@ export const createPageBannerHandler = (ctx: ComponentHandlerDeps) => {
 
         return { tag: "PageBanner", suffix };
       })
-      .with("Custom", () => ({
+      .with("Actionable (Custom)", () => ({
         tag: "PageBanner",
         suffix: createElement("div", undefined, "Custom Content"),
       }))

package/src/codegen/targets/react/component/handlers/{radio-mark.ts → radiomark.ts}

@@ -1,4 +1,4 @@
-import type { RadioMarkProperties } from "@/codegen/component-properties";
+import type { RadiomarkProperties } from "@/codegen/component-properties";
 import { defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import { createLocalSnippetHelper } from "../../element-factories";
@@ -8,9 +8,9 @@ import { match } from "ts-pattern";
 
 const { createLocalSnippetElement } = createLocalSnippetHelper("radio-group");
 
-export const createRadioMarkHandler = (_ctx: ComponentHandlerDeps) =>
-  defineComponentHandler<RadioMarkProperties>(
-    metadata.radioMark.key,
+export const createRadiomarkHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<RadiomarkProperties>(
+    metadata.radiomark.key,
     ({ componentProperties: props }) => {
       const tone = match(props.Tone.value)
         .with("Neutral", () => "neutral")

package/src/codegen/targets/react/component/handlers/result-section.ts

@@ -18,7 +18,7 @@ export const createResultSectionHandler = (ctx: ComponentHandlerDeps) => {
   const ghostButtonHandler = createActionButtonGhostHandler(ctx);
 
   return defineComponentHandler<ResultSectionProperties>(
-    metadata.templateResultSection.key,
+    metadata.resultSection.key,
     (node, traverse) => {
       const props = node.componentProperties;
 

package/src/codegen/targets/react/component/handlers/{switch-mark.ts → switchmark.ts}

@@ -1,4 +1,4 @@
-import type { SwitchMarkProperties } from "@/codegen/component-properties";
+import type { SwitchmarkProperties } from "@/codegen/component-properties";
 import { defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import { createLocalSnippetHelper } from "../../element-factories";
@@ -7,9 +7,9 @@ import { match } from "ts-pattern";
 
 const { createLocalSnippetElement } = createLocalSnippetHelper("switch");
 
-export const createSwitchMarkHandler = (_ctx: ComponentHandlerDeps) =>
-  defineComponentHandler<SwitchMarkProperties>(
-    metadata.switchMark.key,
+export const createSwitchmarkHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<SwitchmarkProperties>(
+    metadata.switchmark.key,
     ({ componentProperties: props }) => {
       const tone = match(props.Tone.value)
         .with("Neutral", () => "neutral")

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

@@ -36,7 +36,7 @@ import { createMenuSheetHandler } from "./handlers/menu-sheet";
 import { createPageBannerHandler } from "./handlers/page-banner";
 import { createProgressCircleHandler } from "./handlers/progress-circle";
 import { createRadioGroupItemHandler } from "@/codegen/targets/react/component/handlers/radio-group";
-import { createRadioMarkHandler } from "@/codegen/targets/react/component/handlers/radio-mark";
+import { createRadiomarkHandler } from "@/codegen/targets/react/component/handlers/radiomark";
 import { createReactionButtonHandler } from "./handlers/reaction-button";
 import { createResultSectionHandler } from "./handlers/result-section";
 import { createSegmentedControlHandler } from "./handlers/segmented-control";
@@ -47,7 +47,7 @@ import {
   createSliderFieldHandler,
 } from "@/codegen/targets/react/component/handlers/slider";
 import { createSnackbarHandler } from "./handlers/snackbar";
-import { createSwitchMarkHandler } from "@/codegen/targets/react/component/handlers/switch-mark";
+import { createSwitchmarkHandler } from "@/codegen/targets/react/component/handlers/switchmark";
 import { createSwitchHandler } from "./handlers/switch";
 import { createTabsHandler } from "@/codegen/targets/react/component/handlers/tabs";
 import { createTextInputFieldHandler, createTextareaFieldHandler } from "./handlers/text-field";
@@ -89,9 +89,9 @@ export const unboundSeedComponentHandlers: Array<UnboundComponentHandler<any>> =
   createCheckboxHandler,
   createCheckmarkHandler,
   createRadioGroupItemHandler,
-  createRadioMarkHandler,
+  createRadiomarkHandler,
   createSwitchHandler,
-  createSwitchMarkHandler,
+  createSwitchmarkHandler,
   createAlertDialogHandler,
   createDividerHandler,
   createAvatarHandler,

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

@@ -45,12 +45,18 @@ export function createFrameTransformer({
         ...propsConverters.selfLayout(node),
         ...propsConverters.frameFill(node),
         ...propsConverters.stroke(node),
+        ...propsConverters.shadow(node),
       };
 
       const isStretch = props.align === undefined || props.align === "stretch";
 
       const layoutComponent = inferLayoutComponent(props, isFlex);
 
+      const hasSpacingMismatch =
+        node.layoutWrap === "WRAP" &&
+        node.counterAxisSpacing !== undefined &&
+        node.itemSpacing !== node.counterAxisSpacing;
+
       const hasImageFill = node.fills.some(({ type }) => type === "IMAGE");
       const imgElement = hasImageFill
         ? createElement("img", {
@@ -67,15 +73,23 @@ export function createFrameTransformer({
           : transformedChildren),
       ];
 
+      const comment = [
+        hasSpacingMismatch &&
+          // currently counterAxisSpacing is only supported when direction=row
+          `row-gap과 column-gap이 다릅니다. (row-gap: ${node.counterAxisSpacing}, column-gap: ${node.itemSpacing})`,
+      ]
+        .filter((cmt) => cmt)
+        .join(" ");
+
       switch (layoutComponent) {
         case "VStack":
         case "HStack": {
           const { direction: _direction, ...rest } = props;
 
-          return createSeedReactElement(layoutComponent, rest, processedChildren);
+          return createSeedReactElement(layoutComponent, rest, processedChildren, { comment });
         }
         case "Box":
-          return createSeedReactElement("Box", props, processedChildren);
+          return createSeedReactElement("Box", props, processedChildren, { comment });
       }
     },
   );

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

@@ -14,6 +14,7 @@ import {
   createIconSelfLayoutPropsConverter,
   createRadiusPropsConverter,
   createSelfLayoutPropsConverter,
+  createShadowPropsConverter,
   createShapeFillPropsConverter,
   createStrokePropsConverter,
   createTextFillPropsConverter,
@@ -27,9 +28,10 @@ import {
 } from "./shape";
 import { createTextTransformer } from "./text";
 import {
+  defaultEffectStyleNameFormatter,
+  defaultFillStyleResolver,
   defaultRawValueFormatters,
   defaultTextStyleNameFormatter,
-  defaultFillStyleResolver,
   defaultVariableNameFormatter,
 } from "./value-resolver";
 
@@ -53,6 +55,7 @@ export function createPipeline(options: CreatePipelineConfig = {}) {
     variableNameFormatter: defaultVariableNameFormatter,
     styleService,
     textStyleNameFormatter: defaultTextStyleNameFormatter,
+    effectStyleNameFormatter: defaultEffectStyleNameFormatter,
     fillStyleResolver: defaultFillStyleResolver,
     rawValueFormatters: defaultRawValueFormatters,
     shouldInferVariableName,
@@ -67,6 +70,7 @@ export function createPipeline(options: CreatePipelineConfig = {}) {
   const vectorChildrenFillPropsConverter = createVectorChildrenFillPropsConverter(valueResolver);
   const radiusPropsConverter = createRadiusPropsConverter(valueResolver);
   const strokePropsConverter = createStrokePropsConverter(valueResolver);
+  const shadowPropsConverter = createShadowPropsConverter(valueResolver);
   const typeStylePropsConverter = createTypeStylePropsConverter({
     valueResolver,
   });
@@ -80,6 +84,7 @@ export function createPipeline(options: CreatePipelineConfig = {}) {
     vectorChildrenFill: vectorChildrenFillPropsConverter,
     radius: radiusPropsConverter,
     stroke: strokePropsConverter,
+    shadow: shadowPropsConverter,
     typeStyle: typeStylePropsConverter,
   };
 

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

@@ -2,6 +2,7 @@ import { createPropsConverter, definePropsConverter, type PropsConverter } from
 import type {
   NormalizedCornerTrait,
   NormalizedHasChildrenTrait,
+  NormalizedHasEffectsTrait,
   NormalizedHasFramePropertiesTrait,
   NormalizedHasGeometryTrait,
   NormalizedHasLayoutTrait,
@@ -21,6 +22,7 @@ export interface PropsConverters {
   textFill: PropsConverter<FillTrait, TextFillProps>;
   vectorChildrenFill: PropsConverter<ContainerLayoutTrait, VectorChildrenFillProps>;
   stroke: PropsConverter<StrokeTrait, StrokeProps>;
+  shadow: PropsConverter<ShadowTrait, ShadowProps>;
   typeStyle: PropsConverter<TypeStyleTrait, TypeStyleProps>;
 }
 
@@ -37,6 +39,8 @@ export type FillTrait = NormalizedIsLayerTrait & NormalizedHasGeometryTrait;
 
 export type StrokeTrait = NormalizedIsLayerTrait & NormalizedHasGeometryTrait;
 
+export type ShadowTrait = NormalizedIsLayerTrait & NormalizedHasEffectsTrait;
+
 export type TypeStyleTrait = NormalizedTypePropertiesTrait & NormalizedIsLayerTrait;
 
 export interface ContainerLayoutProps {
@@ -389,3 +393,25 @@ export function createStrokePropsConverter(
     };
   });
 }
+
+export interface ShadowProps {
+  boxShadow?: string;
+}
+
+export function createShadowPropsConverter(
+  valueResolver: ReactValueResolver,
+): PropsConverter<ShadowTrait, ShadowProps> {
+  return definePropsConverter((node: ShadowTrait) => {
+    const effectStyleName = valueResolver.getEffectStyleValue(node);
+    if (effectStyleName) {
+      return {
+        boxShadow: effectStyleName,
+      };
+    }
+
+    const boxShadow = valueResolver.getFormattedValue.boxShadow(node);
+    return {
+      boxShadow,
+    };
+  });
+}

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

@@ -17,7 +17,11 @@ export function createRectangleTransformer({
   return defineElementTransformer((node: NormalizedRectangleNode) => {
     return createSeedReactElement(
       "Box",
-      { ...propsConverters.selfLayout(node), background: "palette.gray200" },
+      {
+        ...propsConverters.selfLayout(node),
+        ...propsConverters.shadow(node),
+        background: "palette.gray200",
+      },
       undefined,
       {
         comment: "Rectangle Node Placeholder",