@seed-design/figma 0.1.7 → 0.1.8

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

@@ -16,11 +16,11 @@ import {
 import type { RGBA } from "@figma/rest-api-spec";
 import type { VariableService } from "../../entities/variable.service";
 
-export interface ValueResolver<TColor, TDimension, TFontDimension, TFontWeight> {
+export interface ValueResolver<TColor, TGradient, TDimension, TFontDimension, TFontWeight> {
   getFormattedValue: {
     frameFill: (
       node: NormalizedHasGeometryTrait & NormalizedIsLayerTrait,
-    ) => string | TColor | undefined;
+    ) => string | TColor | TGradient | undefined;
     shapeFill: (
       node: NormalizedHasGeometryTrait & NormalizedIsLayerTrait,
     ) => string | TColor | undefined;
@@ -90,11 +90,12 @@ export interface ValueResolver<TColor, TDimension, TFontDimension, TFontWeight>
   ) => string | undefined; // TODO: we might turn this into a generic; not sure yet
 }
 
-export interface ValueResolverDeps<TColor, TDimension, TFontDimension, TFontWeight> {
+export interface ValueResolverDeps<TColor, TGradient, TDimension, TFontDimension, TFontWeight> {
   variableService: VariableService;
   variableNameFormatter: (props: { slug: string[] }) => string;
   styleService: StyleService;
-  styleNameFormatter: (props: { slug: string[] }) => string;
+  textStyleNameFormatter: (props: { slug: string[] }) => string;
+  fillStyleResolver: (props: { slug: string[] }) => TGradient | undefined;
   rawValueFormatters: {
     color: (value: RGBA) => string | TColor;
     dimension: (value: number) => string | TDimension;
@@ -104,15 +105,17 @@ export interface ValueResolverDeps<TColor, TDimension, TFontDimension, TFontWeig
   shouldInferVariableName: boolean;
 }
 
-export function createValueResolver<TColor, TDimension, TFontDimension, TFontWeight>({
+export function createValueResolver<TColor, TGradient, TDimension, TFontDimension, TFontWeight>({
   variableService,
   variableNameFormatter,
   styleService,
-  styleNameFormatter,
+  textStyleNameFormatter,
+  fillStyleResolver,
   rawValueFormatters,
   shouldInferVariableName,
-}: ValueResolverDeps<TColor, TDimension, TFontDimension, TFontWeight>): ValueResolver<
+}: ValueResolverDeps<TColor, TGradient, TDimension, TFontDimension, TFontWeight>): ValueResolver<
   TColor,
+  TGradient,
   TDimension,
   TFontDimension,
   TFontWeight
@@ -141,16 +144,6 @@ export function createValueResolver<TColor, TDimension, TFontDimension, TFontWei
     return getVariableName(inferred.key);
   }
 
-  function getStyleName(key: string) {
-    const slug = styleService.getSlug(key);
-
-    if (!slug) {
-      return undefined;
-    }
-
-    return styleNameFormatter({ slug });
-  }
-
   function processColor(
     key: string | undefined,
     value: RGBA | undefined,
@@ -167,6 +160,16 @@ export function createValueResolver<TColor, TDimension, TFontDimension, TFontWei
     return undefined;
   }
 
+  function processFillStyle(key: string) {
+    const slug = styleService.getSlug(key);
+
+    if (!slug) {
+      return undefined;
+    }
+
+    return fillStyleResolver({ slug });
+  }
+
   function processDimension(
     key: string | undefined,
     value: number | undefined,
@@ -229,6 +232,7 @@ export function createValueResolver<TColor, TDimension, TFontDimension, TFontWei
 
   const getFormattedValue: ValueResolver<
     TColor,
+    TGradient,
     TDimension,
     TFontDimension,
     TFontWeight
@@ -264,7 +268,13 @@ export function createValueResolver<TColor, TDimension, TFontDimension, TFontWei
     itemSpacing: (node) =>
       processDimension(node.boundVariables?.itemSpacing?.id, node.itemSpacing, "GAP"),
     frameFill: (node) =>
-      processColor(getFirstFillVariable(node)?.id, getFirstSolidFill(node)?.color, "FRAME_FILL"),
+      node.fillStyleKey
+        ? processFillStyle(node.fillStyleKey)
+        : processColor(
+            getFirstFillVariable(node)?.id,
+            getFirstSolidFill(node)?.color,
+            "FRAME_FILL",
+          ),
     shapeFill: (node) =>
       processColor(getFirstFillVariable(node)?.id, getFirstSolidFill(node)?.color, "SHAPE_FILL"),
     textFill: (node) =>
@@ -312,11 +322,15 @@ export function createValueResolver<TColor, TDimension, TFontDimension, TFontWei
   };
 
   function getTextStyleValue(node: NormalizedTypePropertiesTrait & NormalizedIsLayerTrait) {
-    if (node.textStyleKey) {
-      return getStyleName(node.textStyleKey);
+    if (!node.textStyleKey) return undefined;
+
+    const slug = styleService.getSlug(node.textStyleKey);
+
+    if (!slug) {
+      return undefined;
     }
 
-    return undefined;
+    return textStyleNameFormatter({ slug });
   }
 
   return {

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

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

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

@@ -1,7 +1,14 @@
 import type { ValueResolver } from "@/codegen/core";
 import { toCssRgba } from "@/utils/css";
+import { camelCase } from "change-case";
 
-export type FigmaValueResolver = ValueResolver<string, number, number, number>;
+export type FigmaValueResolver = ValueResolver<
+  string,
+  { value: string; direction?: string },
+  number,
+  number,
+  number
+>;
 
 export const defaultVariableNameFormatter = ({ slug }: { slug: string[] }) =>
   slug
@@ -9,7 +16,36 @@ export const defaultVariableNameFormatter = ({ slug }: { slug: string[] }) =>
     .map((s) => s.replaceAll(",", "_"))
     .join("/");
 
-export const defaultStyleNameFormatter = ({ slug }: { slug: string[] }) => slug[slug.length - 1]!;
+export const defaultTextStyleNameFormatter = ({ slug }: { slug: string[] }) =>
+  slug[slug.length - 1]!;
+
+export const defaultFillStyleResolver = ({ slug }: { slug: string[] }) => {
+  const [, ...rest] = slug;
+
+  if (rest.includes("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/codegen/targets/react/component/handlers/action-button.ts

@@ -3,9 +3,12 @@ import * as metadata from "@/entities/data/__generated__/component-sets";
 import { camelCase } from "change-case";
 import { match } from "ts-pattern";
 import type { ComponentHandlerDeps } from "../deps.interface";
-import type { ActionButtonProperties } from "@/codegen/component-properties";
+import type {
+  ActionButtonGhostProperties,
+  ActionButtonProperties,
+} from "@/codegen/component-properties";
 import { handleSizeProp } from "../size";
-import { createLocalSnippetHelper } from "../../element-factories";
+import { createLocalSnippetHelper, createSeedReactElement } from "../../element-factories";
 
 const { createLocalSnippetElement } = createLocalSnippetHelper("action-button");
 
@@ -19,7 +22,7 @@ export const createActionButtonHandler = (ctx: ComponentHandlerDeps) =>
         .with("Icon Only", () => ({
           layout: "iconOnly",
           children: [
-            createLocalSnippetElement("Icon", {
+            createSeedReactElement("Icon", {
               svg: ctx.iconHandler.transform(props["Icon#7574:0"]),
             }),
           ],
@@ -27,7 +30,7 @@ export const createActionButtonHandler = (ctx: ComponentHandlerDeps) =>
         .with("Icon First", () => ({
           layout: "withText",
           children: [
-            createLocalSnippetElement("PrefixIcon", {
+            createSeedReactElement("PrefixIcon", {
               svg: ctx.iconHandler.transform(props["Prefix Icon#5987:305"]),
             }),
             props["Label#5987:61"].value,
@@ -37,7 +40,7 @@ export const createActionButtonHandler = (ctx: ComponentHandlerDeps) =>
           layout: "withText",
           children: [
             props["Label#5987:61"].value,
-            createLocalSnippetElement("SuffixIcon", {
+            createSeedReactElement("SuffixIcon", {
               svg: ctx.iconHandler.transform(props["Suffix Icon#5987:244"]),
             }),
           ],
@@ -63,3 +66,64 @@ export const createActionButtonHandler = (ctx: ComponentHandlerDeps) =>
       return createLocalSnippetElement("ActionButton", commonProps, children);
     },
   );
+
+const ACTION_BUTTON_GHOST_BUTTON_KEY = "ea69291fb4d76217419f3d9613ae16aadafb56a5";
+
+export const createActionButtonGhostHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ActionButtonGhostProperties>(
+    ACTION_BUTTON_GHOST_BUTTON_KEY,
+    ({ componentProperties: props }) => {
+      const states = props.State.value.split("-");
+
+      const { layout, children } = match(props.Layout.value)
+        .with("Icon Only", () => ({
+          layout: "iconOnly",
+          children: [
+            createSeedReactElement("Icon", {
+              svg: ctx.iconHandler.transform(props["Icon#30525:15"]),
+            }),
+          ],
+        }))
+        .with("Icon First", () => ({
+          layout: "withText",
+          children: [
+            createSeedReactElement("PrefixIcon", {
+              svg: ctx.iconHandler.transform(props["Prefix Icon#30511:3"]),
+            }),
+            props["Label#30511:2"].value,
+          ],
+        }))
+        .with("Icon Last", () => ({
+          layout: "withText",
+          children: [
+            props["Label#30511:2"].value,
+            createSeedReactElement("SuffixIcon", {
+              svg: ctx.iconHandler.transform(props["Suffix Icon#30525:0"]),
+            }),
+          ],
+        }))
+        .with("Text Only", () => ({
+          layout: "withText",
+          children: props["Label#30511:2"].value,
+        }))
+        .exhaustive();
+
+      const commonProps = {
+        ...(states.includes("Disabled") && {
+          disabled: true,
+        }),
+        ...(states.includes("Loading") && {
+          loading: true,
+        }),
+        size: handleSizeProp(props.Size.value),
+        variant: "ghost",
+        layout,
+        ...(props.Bleed.value === "true" && {
+          bleedX: "asPadding",
+          bleedY: "asPadding",
+        }),
+      };
+
+      return createLocalSnippetElement("ActionButton", commonProps, children);
+    },
+  );

package/src/codegen/targets/react/component/handlers/alert-dialog.ts

@@ -0,0 +1,81 @@
+import { defineComponentHandler } from "@/codegen/core";
+import type {
+  AlertDialogFooterProperties,
+  AlertDialogProperties,
+} from "@/codegen/component-properties";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { createLocalSnippetHelper, createSeedReactElement } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import { findAllInstances } from "@/utils/figma-node";
+import { match } from "ts-pattern";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("alert-dialog");
+const { createLocalSnippetElement: createLocalSnippetElementTrigger } =
+  createLocalSnippetHelper("action-button");
+
+const ALERT_DIALOG_FOOTER_KEY = "00b1b131d67edf2875a7a1df8dfa88098d7c04be";
+
+export const createAlertDialogHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<AlertDialogProperties>(metadata.alertDialog.key, (node, traverse) => {
+    const props = node.componentProperties;
+    const alertDialogHeader = createLocalSnippetElement("AlertDialogHeader", undefined, [
+      ...(props["Show Title#20361:14"].value
+        ? [
+            createLocalSnippetElement(
+              "AlertDialogTitle",
+              undefined,
+              props["Title Text#20361:0"].value,
+            ),
+          ]
+        : []),
+      createLocalSnippetElement(
+        "AlertDialogDescription",
+        undefined,
+        props["Description Text#20361:7"].value,
+      ),
+    ]);
+
+    const footerNodes = findAllInstances<AlertDialogFooterProperties>({
+      node,
+      key: ALERT_DIALOG_FOOTER_KEY,
+    });
+
+    if (footerNodes.length === 0 || footerNodes.length > 1) {
+      return createLocalSnippetElement("AlertDialog", undefined, alertDialogHeader, {
+        comment: "Footer 영역을 확인해주세요.",
+      });
+    }
+
+    const footerNode = footerNodes[0];
+    const footerNodeProps = traverse(footerNode)?.props;
+
+    const buttons = footerNode.children.map(traverse);
+
+    const alertDialogFooterChildren = match(footerNode.componentProperties.Type.value)
+      .with("Single", () => buttons)
+      .with("Neutral", "Critical", () =>
+        createSeedReactElement("ResponsivePair", footerNodeProps, buttons),
+      )
+      .with("Neutral (Overflow)", "Critical (Overflow)", "Nonpreferred", () =>
+        createSeedReactElement("VStack", footerNodeProps, buttons),
+      )
+      .exhaustive();
+
+    const alertDialogFooter = createLocalSnippetElement(
+      "AlertDialogFooter",
+      undefined,
+      alertDialogFooterChildren,
+    );
+
+    return createLocalSnippetElement("AlertDialogRoot", { open: true }, [
+      createLocalSnippetElement(
+        "AlertDialogTrigger",
+        { asChild: true },
+        createLocalSnippetElementTrigger("ActionButton", {}, "AlertDialog 열기"),
+      ),
+      createLocalSnippetElement("AlertDialogContent", undefined, [
+        alertDialogHeader,
+        alertDialogFooter,
+      ]),
+    ]);
+  });

package/src/codegen/targets/react/component/handlers/app-bar.ts

@@ -1,173 +1,138 @@
 import type {
-  AppBarLeftProperties,
-  AppBarMainProperties,
   AppBarProperties,
-  AppBarRightProperties,
+  AppBarMainProperties,
+  AppBarRightIconButtonProperties,
+  AppBarLeftIconButtonProperties,
 } from "@/codegen/component-properties";
 import { defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
-import type { NormalizedInstanceNode, NormalizedTextNode } from "@/normalizer";
-import { findAll, findAllInstances, findOne } from "@/utils/figma-node";
+import { findAllInstances } from "@/utils/figma-node";
 import { match } from "ts-pattern";
 import { createLocalSnippetHelper } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
 
 const { createLocalSnippetElement } = createLocalSnippetHelper("app-bar");
 
-const APP_BAR_MAIN_KEY = "336b49b26c3933485d87cc460b06c390976ea58e";
-const createAppBarMainHandler = (_ctx: ComponentHandlerDeps) =>
-  defineComponentHandler<AppBarMainProperties>(
-    APP_BAR_MAIN_KEY,
+const APP_BAR_TITLE_KEY = "d2cc4f615b2b44098be89448ad1c573f94af0355";
+const APP_BAR_LEFT_ICON_BUTTON_KEY = "5a953f7bafc0df744777517458396e9f6c915825";
+const APP_BAR_RIGHT_ICON_BUTTON_KEY = "c08db793288077e53bd45ef11aa419a835e88fce";
+
+const createAppBarMainHandler = (_ctx: ComponentHandlerDeps) => {
+  return defineComponentHandler<AppBarMainProperties>(
+    APP_BAR_TITLE_KEY,
     ({ componentProperties: props }) => {
-      const { title, subtitle, layout } = match(props.Type.value)
+      const { title, subtitle } = match(props.Type.value)
         .with("Title", () => ({
           title: props["Title#16944:0"].value,
           subtitle: undefined,
-          layout: undefined,
         }))
         .with("Title-Subtitle", () => ({
           title: props["Title#16944:0"].value,
           subtitle: props["Subtitle#16958:9"].value,
-          layout: "withSubtitle",
         }))
-        .otherwise(() => ({
+        .with("Logo (Figma Only)", () => ({
           title: undefined,
           subtitle: undefined,
-          layout: undefined,
-        }));
+        }))
+        .exhaustive();
 
-      const commonProps = {
-        title,
-        subtitle,
-        layout,
-      };
+      if (title) {
+        return createLocalSnippetElement("AppBarMain", { title, subtitle });
+      }
 
-      return createLocalSnippetElement("AppBarMain", commonProps, undefined, {
-        comment: title === undefined ? "Title을 제공해주세요." : undefined,
+      return createLocalSnippetElement("AppBarMain", undefined, undefined, {
+        comment: "AppBarMain 내부를 직접 작성해주세요.",
       });
     },
   );
+};
 
-const APP_BAR_LEFT_KEY = "e5d2e47052a22395db79f195a0991a570dc1b6c9";
-const createAppBarLeftHandler = (ctx: ComponentHandlerDeps) =>
-  defineComponentHandler<AppBarLeftProperties>(APP_BAR_LEFT_KEY, (node) => {
+export const createAppBarHandler = (ctx: ComponentHandlerDeps) => {
+  const appBarMainHandler = createAppBarMainHandler(ctx);
+
+  return defineComponentHandler<AppBarProperties>(metadata.topNavigation.key, (node, traverse) => {
     const props = node.componentProperties;
 
-    const children = (() => {
-      switch (props.Action.value) {
-        case "Back":
-          return createLocalSnippetElement("AppBarBackButton");
-        case "Close":
-          return createLocalSnippetElement("AppBarCloseButton");
-        case "Other": {
-          const iconNode = findOne(
-            node,
-            (child) => child.type === "INSTANCE" && child.name === "Icon",
-          ) as NormalizedInstanceNode | null;
-
-          if (!iconNode) {
-            return undefined;
-          }
-
-          return createLocalSnippetElement(
-            "AppBarIconButton",
-            undefined,
-            ctx.iconHandler.transform(iconNode),
-            {
-              comment: "aria-label 또는 aria-labelledby를 제공해주세요.",
-            },
-          );
-        }
+    const { theme, tone } = {
+      theme: match(props["OS (Figma Only)"].value)
+        .with("Android", () => "android")
+        .with("iOS", () => "cupertino")
+        .exhaustive(),
+
+      tone: match(props.Variant.value)
+        .with("Layer Default", () => "layer")
+        .with("Transparent", () => "transparent")
+        .exhaustive(),
+    };
+
+    const main = (() => {
+      if (!props["Show Title#33588:82"].value) {
+        return undefined;
       }
-    })();
 
-    return createLocalSnippetElement("AppBarLeft", undefined, children);
-  });
+      const [mainNode] = findAllInstances<AppBarMainProperties>({ node, key: APP_BAR_TITLE_KEY });
 
-const APP_BAR_RIGHT_KEY = "9e157fc2d1f89ffee938a5bc62f4a58064fec44e";
-const createAppBarRightHandler = (ctx: ComponentHandlerDeps) =>
-  defineComponentHandler<AppBarRightProperties>(APP_BAR_RIGHT_KEY, (node) => {
-    const props = node.componentProperties;
-
-    const children = (() => {
-      switch (props.Type.value) {
-        case "1 Text": {
-          const textNode = findOne(
-            node,
-            (child) => child.type === "TEXT",
-          ) as NormalizedTextNode | null;
+      if (!mainNode) {
+        return undefined;
+      }
 
-          return textNode?.characters;
-        }
-        default: {
-          const iconNodes = findAll(
-            node,
-            (child) => child.type === "INSTANCE" && child.name === "Icon",
-          ) as NormalizedInstanceNode[];
+      return appBarMainHandler.transform(mainNode, traverse);
+    })();
 
-          return iconNodes.map((iconNode) =>
+    const leftChildren = match(props.Left.value)
+      .with("None", () => undefined)
+      .with("Back", () => [createLocalSnippetElement("AppBarBackButton")])
+      .with("Close", () => [createLocalSnippetElement("AppBarCloseButton")])
+      .with("Custom", () => {
+        const buttons = findAllInstances<AppBarLeftIconButtonProperties>({
+          node,
+          key: APP_BAR_LEFT_ICON_BUTTON_KEY,
+        });
+
+        if (buttons.length > 0) {
+          return buttons.map((button) =>
             createLocalSnippetElement(
               "AppBarIconButton",
               undefined,
-              ctx.iconHandler.transform(iconNode),
-              {
-                comment: "aria-label 또는 aria-labelledby를 제공해주세요.",
-              },
+              ctx.iconHandler.transform(button.componentProperties["Icon#33580:0"]),
+              { comment: "AppBarIconButton에 aria-label 속성을 추가해주세요." },
             ),
           );
         }
-      }
-    })();
-
-    return createLocalSnippetElement("AppBarRight", undefined, children);
-  });
-
-export const createAppBarHandler = (ctx: ComponentHandlerDeps) => {
-  const appBarMainHandler = createAppBarMainHandler(ctx);
-  const appBarLeftHandler = createAppBarLeftHandler(ctx);
-  const appBarRightHandler = createAppBarRightHandler(ctx);
-
-  return defineComponentHandler<AppBarProperties>(metadata.standardNavigation.key, (node) => {
-    const props = node.componentProperties;
 
-    const theme = (() => {
-      switch (props.OS.value) {
-        case "Android":
-          return "android";
-        case "iOS":
-          return "cupertino";
-      }
-    })();
-
-    const tone = (() => {
-      switch (props.Variant.value) {
-        case "Layer Default":
-          return "layer";
-        case "Transparent":
-          return "transparent";
-      }
-    })();
-
-    const mainNode = findAllInstances<AppBarMainProperties>({
-      key: appBarMainHandler.key,
-      node,
-    });
-    const onlyMainNode = mainNode.length === 1 ? mainNode[0] : undefined;
-    const main = onlyMainNode ? appBarMainHandler.transform(onlyMainNode) : undefined;
-
-    const leftNode = findAllInstances<AppBarLeftProperties>({
-      key: appBarLeftHandler.key,
-      node,
-    });
-    const onlyLeftNode = leftNode.length === 1 ? leftNode[0] : undefined;
-    const left = onlyLeftNode ? appBarLeftHandler.transform(onlyLeftNode) : undefined;
-
-    const rightNode = findAllInstances<AppBarRightProperties>({
-      key: appBarRightHandler.key,
-      node,
-    });
-    const onlyRightNode = rightNode.length === 1 ? rightNode[0] : undefined;
-    const right = onlyRightNode ? appBarRightHandler.transform(onlyRightNode) : undefined;
+        return undefined;
+      })
+      .exhaustive();
+
+    const left =
+      leftChildren && leftChildren.length > 0
+        ? createLocalSnippetElement("AppBarLeft", {}, leftChildren)
+        : undefined;
+
+    const rightChildren = match(props.Right.value)
+      .with("None", () => undefined)
+      .with("1 Icon Button", "2 Icon Button", "3 Icon Button", () => {
+        const buttons = findAllInstances<AppBarRightIconButtonProperties>({
+          node,
+          key: APP_BAR_RIGHT_ICON_BUTTON_KEY,
+        });
+
+        return buttons.map((button) =>
+          createLocalSnippetElement(
+            "AppBarIconButton",
+            undefined,
+            ctx.iconHandler.transform(button.componentProperties["Icon#6406:3"]),
+            { comment: "AppBarIconButton에 aria-label 속성을 추가해주세요." },
+          ),
+        );
+      })
+      .with("Text Button", () => undefined)
+      .exhaustive();
+
+    const right =
+      rightChildren && rightChildren.length > 0
+        ? createLocalSnippetElement("AppBarRight", {}, rightChildren)
+        : undefined;
 
     return createLocalSnippetElement(
       "AppBar",