@seed-design/figma 0.0.0-alpha-20260324091316

package/src/codegen/component-properties.ts

@@ -0,0 +1,369 @@
+import type { InferComponentDefinition } from "@/codegen/core";
+import type * as sets from "@/entities/data/__generated__/component-sets";
+import type * as components from "@/entities/data/__generated__/components";
+
+export type ActionButtonProperties = InferComponentDefinition<
+  typeof sets.componentActionButton.componentPropertyDefinitions
+>;
+
+export type ActionButtonGhostProperties = InferComponentDefinition<
+  typeof sets.componentActionButtonGhostButton.componentPropertyDefinitions
+>;
+
+export type AlertDialogProperties = InferComponentDefinition<
+  typeof sets.componentAlertDialog.componentPropertyDefinitions
+>;
+
+export type AlertDialogFooterProperties = InferComponentDefinition<
+  typeof sets.privateComponentAlertDialogActions.componentPropertyDefinitions
+>;
+
+export type AvatarProperties = InferComponentDefinition<
+  typeof sets.componentAvatar.componentPropertyDefinitions
+>;
+
+export type AvatarStackProperties = InferComponentDefinition<
+  typeof sets.componentAvatarStack.componentPropertyDefinitions
+>;
+
+export type BadgeProperties = InferComponentDefinition<
+  typeof sets.componentBadge.componentPropertyDefinitions
+>;
+
+export type BottomSheetProperties = InferComponentDefinition<
+  typeof sets.componentBottomSheet.componentPropertyDefinitions
+>;
+
+export type CalloutProperties = InferComponentDefinition<
+  typeof sets.componentCallout.componentPropertyDefinitions
+>;
+
+export type CheckboxProperties = InferComponentDefinition<
+  typeof sets.componentCheckbox.componentPropertyDefinitions
+>;
+
+export type CheckboxGroupFieldProperties = InferComponentDefinition<
+  typeof sets.templateCheckboxField.componentPropertyDefinitions
+>;
+
+export type CheckmarkProperties = InferComponentDefinition<
+  typeof sets.componentCheckmark.componentPropertyDefinitions
+>;
+
+export type ChipProperties = InferComponentDefinition<
+  typeof sets.componentChip.componentPropertyDefinitions
+>;
+
+export type ChipIconSuffixProperties = InferComponentDefinition<
+  typeof components.componentChipSuffixIcon.componentPropertyDefinitions
+>;
+
+export type ContentPlaceholderProperties = InferComponentDefinition<
+  typeof sets.privateComponentContentPlaceholder.componentPropertyDefinitions
+>;
+
+export type ContextualFloatingButtonProperties = InferComponentDefinition<
+  typeof sets.componentContextualFloatingButton.componentPropertyDefinitions
+>;
+
+export type DividerProperties = InferComponentDefinition<
+  typeof sets.componentDivider.componentPropertyDefinitions
+>;
+
+export type FieldHeaderProperties = InferComponentDefinition<
+  typeof sets.componentFieldHeader.componentPropertyDefinitions
+>;
+
+export type FieldIndicatorProperties = InferComponentDefinition<
+  typeof sets.privateComponentFieldHeaderIndicator.componentPropertyDefinitions
+>;
+
+export type FieldFooterProperties = InferComponentDefinition<
+  typeof sets.componentFieldFooter.componentPropertyDefinitions
+>;
+
+export type FieldCharacterCountProperties = InferComponentDefinition<
+  typeof sets.privateComponentFieldFooterCharacterCount.componentPropertyDefinitions
+>;
+
+export type MenuSheetProperties = InferComponentDefinition<
+  typeof sets.componentMenuSheet.componentPropertyDefinitions
+>;
+
+export type MenuSheetGroupProperties = InferComponentDefinition<
+  typeof sets.privateComponentMenuSheetMenuGroup.componentPropertyDefinitions
+>;
+
+export type MenuSheetItemProperties = InferComponentDefinition<
+  typeof sets.privateComponentMenuSheetMenuItem.componentPropertyDefinitions
+>;
+
+export type FloatingActionButtonProperties = InferComponentDefinition<
+  typeof sets.componentFloatingActionButton.componentPropertyDefinitions
+>;
+
+export type FloatingActionButtonButtonItemProperties = InferComponentDefinition<
+  typeof sets.privateComponentItemButtonType.componentPropertyDefinitions
+>;
+
+export type FloatingActionButtonMenuItemProperties = InferComponentDefinition<
+  typeof sets.privateComponentItemMenuType.componentPropertyDefinitions
+>;
+
+export type HelpBubbleProperties = InferComponentDefinition<
+  typeof sets.componentHelpBubble.componentPropertyDefinitions
+>;
+
+export type IdentityPlaceholderProperties = InferComponentDefinition<
+  typeof sets.privateComponentIdentityPlaceholder.componentPropertyDefinitions
+>;
+
+export type ImageFrameProperties = InferComponentDefinition<
+  typeof sets.componentImageFrame.componentPropertyDefinitions
+>;
+
+export type ImageFrameIconProperties = InferComponentDefinition<
+  typeof components.componentImageFrameIcon.componentPropertyDefinitions
+>;
+
+export type ImageFrameOverlayIndicatorProperties = InferComponentDefinition<
+  typeof components.componentImageFrameOverlayIndicator.componentPropertyDefinitions
+>;
+
+export type ImageFrameReactionButtonProperties = InferComponentDefinition<
+  typeof sets.componentImageFrameReactionButton.componentPropertyDefinitions
+>;
+
+export type PageBannerProperties = InferComponentDefinition<
+  typeof sets.componentPageBanner.componentPropertyDefinitions
+>;
+
+export type PageBannerButtonProperties = InferComponentDefinition<
+  typeof components.componentPageBannerSuffixAction.componentPropertyDefinitions
+>;
+
+export type ListHeaderProperties = InferComponentDefinition<
+  typeof sets.componentListHeader.componentPropertyDefinitions
+>;
+
+export type ListItemProperties = InferComponentDefinition<
+  typeof sets.componentListItem.componentPropertyDefinitions
+>;
+
+export type ListItemPrefixIconProperties = InferComponentDefinition<
+  typeof components.componentListItemPrefixIcon.componentPropertyDefinitions
+>;
+
+export type ListItemSuffixIconProperties = InferComponentDefinition<
+  typeof components.componentListItemSuffixIcon.componentPropertyDefinitions
+>;
+
+export type MannerTempProperties = InferComponentDefinition<
+  typeof sets.componentMannerTemp.componentPropertyDefinitions
+>;
+
+export type MannerTempBadgeProperties = InferComponentDefinition<
+  typeof sets.componentMannerTempBadge.componentPropertyDefinitions
+>;
+
+export type ProgressCircleProperties = InferComponentDefinition<
+  typeof sets.componentProgressCircle.componentPropertyDefinitions
+>;
+
+export type RadioProperties = InferComponentDefinition<
+  typeof sets.componentRadio.componentPropertyDefinitions
+>;
+
+export type RadioGroupFieldProperties = InferComponentDefinition<
+  typeof sets.templateRadioField.componentPropertyDefinitions
+>;
+
+export type RadiomarkProperties = InferComponentDefinition<
+  typeof sets.componentRadiomark.componentPropertyDefinitions
+>;
+
+export type ReactionButtonProperties = InferComponentDefinition<
+  typeof sets.componentReactionButton.componentPropertyDefinitions
+>;
+
+export type ResultSectionProperties = InferComponentDefinition<
+  typeof sets.componentResultSection.componentPropertyDefinitions
+>;
+
+export type SegmentedControlProperties = InferComponentDefinition<
+  typeof sets.componentSegmentedControl.componentPropertyDefinitions
+>;
+
+export type SegmentedControlItemProperties = InferComponentDefinition<
+  typeof sets.privateComponentSegmentedControlItem.componentPropertyDefinitions
+>;
+
+export type SelectBoxGroupFieldProperties = InferComponentDefinition<
+  typeof sets.templateSelectBoxField.componentPropertyDefinitions
+>;
+
+export type SelectBoxGroupProperties = InferComponentDefinition<
+  typeof sets.componentSelectBoxGroup.componentPropertyDefinitions
+>;
+
+export type SelectBoxHorizontalProperties = InferComponentDefinition<
+  typeof sets.componentSelectBoxItemHorizontal.componentPropertyDefinitions
+>;
+
+export type SelectBoxVerticalProperties = InferComponentDefinition<
+  typeof sets.componentSelectBoxItemVertical.componentPropertyDefinitions
+>;
+
+export type SelectBoxPrefixIconProperties = InferComponentDefinition<
+  typeof components.componentSelectBoxItemPrefixIcon.componentPropertyDefinitions
+>;
+
+export type SkeletonProperties = InferComponentDefinition<
+  typeof sets.componentSkeleton.componentPropertyDefinitions
+>;
+
+export type SliderProperties = InferComponentDefinition<
+  typeof sets.componentSlider.componentPropertyDefinitions
+>;
+
+export type SliderTicksProperties = InferComponentDefinition<
+  typeof sets.privateComponentSliderItemTickMark.componentPropertyDefinitions
+>;
+
+export type SliderFieldProperties = InferComponentDefinition<
+  typeof sets.templateSliderField.componentPropertyDefinitions
+>;
+
+export type SnackbarProperties = InferComponentDefinition<
+  typeof sets.componentSnackbar.componentPropertyDefinitions
+>;
+
+export type SwitchProperties = InferComponentDefinition<
+  typeof sets.componentSwitch.componentPropertyDefinitions
+>;
+
+export type SwitchmarkProperties = InferComponentDefinition<
+  typeof sets.componentSwitchmark.componentPropertyDefinitions
+>;
+
+export type ToggleButtonProperties = InferComponentDefinition<
+  typeof sets.componentToggleButton.componentPropertyDefinitions
+>;
+
+export type AppBarProperties = InferComponentDefinition<
+  typeof sets.componentTopNavigation.componentPropertyDefinitions
+>;
+
+export type AppBarMainProperties = InferComponentDefinition<
+  typeof sets.privateComponentTopNavigationTitle.componentPropertyDefinitions
+>;
+
+export type AppBarLeftIconButtonProperties = InferComponentDefinition<
+  typeof components.privateComponentTopNavigationLeftIconButton.componentPropertyDefinitions
+>;
+
+export type AppBarRightIconButtonProperties = InferComponentDefinition<
+  typeof sets.privateComponentTopNavigationRightIconButton.componentPropertyDefinitions
+>;
+
+export type TabsProperties = InferComponentDefinition<
+  typeof sets.componentTabs.componentPropertyDefinitions
+>;
+
+export type TabsLineWrapperProperties = InferComponentDefinition<
+  typeof sets.privateComponentTabsLine.componentPropertyDefinitions
+>;
+
+export type TabsLineTriggerHugProperties = InferComponentDefinition<
+  typeof sets.privateComponentTabItemLineHug.componentPropertyDefinitions
+>;
+
+export type TabsLineTriggerFillProperties = InferComponentDefinition<
+  typeof sets.privateComponentTabItemLineFill.componentPropertyDefinitions
+>;
+
+export type TabsChipWrapperProperties = InferComponentDefinition<
+  typeof sets.privateComponentTabsChip.componentPropertyDefinitions
+>;
+
+export type ChipTabsTriggerProperties = InferComponentDefinition<
+  typeof sets.privateComponentTabItemChip.componentPropertyDefinitions
+>;
+
+export type TagGroupProperties = InferComponentDefinition<
+  typeof sets.componentTagGroup.componentPropertyDefinitions
+>;
+
+export type TagGroupItemProperties = InferComponentDefinition<
+  typeof sets.privateComponentItemTag.componentPropertyDefinitions
+>;
+
+export type TextInputFieldProperties = InferComponentDefinition<
+  typeof sets.templateTextField.componentPropertyDefinitions
+>;
+
+export type TextInputOutlineProperties = InferComponentDefinition<
+  typeof sets.componentTextInput.componentPropertyDefinitions
+>;
+
+export type TextInputOutlinePrefixProperties = InferComponentDefinition<
+  typeof sets.privateComponentTextInputPrefix.componentPropertyDefinitions
+>;
+
+export type TextInputOutlineSuffixProperties = InferComponentDefinition<
+  typeof sets.privateComponentTextInputSuffix.componentPropertyDefinitions
+>;
+
+export type TextInputUnderlinePrefixProperties = InferComponentDefinition<
+  typeof sets.privateComponentUnderlineTextInputPrefix.componentPropertyDefinitions
+>;
+
+export type TextInputUnderlineSuffixProperties = InferComponentDefinition<
+  typeof sets.privateComponentUnderlineTextInputSuffix.componentPropertyDefinitions
+>;
+
+export type TextInputUnderlineProperties = InferComponentDefinition<
+  typeof sets.componentUnderlineTextInput.componentPropertyDefinitions
+>;
+
+export type TextareaFieldProperties = InferComponentDefinition<
+  typeof sets.templateTextareaField.componentPropertyDefinitions
+>;
+
+export type TextareaProperties = InferComponentDefinition<
+  typeof sets.componentTextarea.componentPropertyDefinitions
+>;
+
+export type FieldButtonProperties = InferComponentDefinition<
+  typeof sets.templateFieldButton.componentPropertyDefinitions
+>;
+
+export type InputButtonProperties = InferComponentDefinition<
+  typeof sets.componentInputButton.componentPropertyDefinitions
+>;
+
+export type InputButtonPrefixProperties = InferComponentDefinition<
+  typeof sets.privateComponentInputButtonPrefix.componentPropertyDefinitions
+>;
+
+export type InputButtonSuffixProperties = InferComponentDefinition<
+  typeof sets.privateComponentInputButtonSuffix.componentPropertyDefinitions
+>;
+
+export type GenericFieldButtonProps = InferComponentDefinition<{}>;
+
+export type LegacyTextFieldProperties = InferComponentDefinition<
+  typeof sets.componentDeprecatedTextField.componentPropertyDefinitions
+>;
+
+export type LegacyMultilineTextFieldProperties = InferComponentDefinition<
+  typeof sets.componentDeprecatedMultilineTextField.componentPropertyDefinitions
+>;
+
+export type LegacySelectBoxProperties = InferComponentDefinition<
+  typeof sets.componentDeprecatedSelectBox.componentPropertyDefinitions
+>;
+
+export type LegacySelectBoxGroupProperties = InferComponentDefinition<
+  typeof sets.componentDeprecatedSelectBoxGroup.componentPropertyDefinitions
+>;

package/src/codegen/core/codegen.ts

@@ -0,0 +1,112 @@
+import type {
+  NormalizedBooleanOperationNode,
+  NormalizedComponentNode,
+  NormalizedFrameNode,
+  NormalizedInstanceNode,
+  NormalizedRectangleNode,
+  NormalizedSceneNode,
+  NormalizedTextNode,
+  NormalizedVectorNode,
+} from "@/normalizer";
+import { match } from "ts-pattern";
+import { appendSource, createElement, stringifyElement, type ElementNode } from "../core/jsx";
+import type { ElementTransformer } from "./element-transformer";
+import { applyInferredLayout, inferLayout } from "./infer-layout";
+import { pascalCase } from "change-case";
+
+export interface CodeGeneratorDeps {
+  frameTransformer: ElementTransformer<
+    NormalizedFrameNode | NormalizedComponentNode | NormalizedInstanceNode
+  >;
+  textTransformer: ElementTransformer<NormalizedTextNode>;
+  rectangleTransformer: ElementTransformer<NormalizedRectangleNode>;
+  instanceTransformer: ElementTransformer<NormalizedInstanceNode>;
+  vectorTransformer: ElementTransformer<NormalizedVectorNode>;
+  booleanOperationTransformer: ElementTransformer<NormalizedBooleanOperationNode>;
+  shouldInferAutoLayout: boolean;
+  skipComponentKeys?: Set<string>;
+}
+
+export interface CodeGenerator {
+  generateJsxTree: (node: NormalizedSceneNode) => ElementNode | undefined;
+  generateCode: (
+    node: NormalizedSceneNode,
+    options: { shouldPrintSource: boolean },
+  ) => { imports: string; jsx: string } | undefined;
+}
+
+export function createCodeGenerator({
+  frameTransformer,
+  textTransformer,
+  rectangleTransformer,
+  instanceTransformer,
+  vectorTransformer,
+  booleanOperationTransformer,
+  shouldInferAutoLayout,
+  skipComponentKeys,
+}: CodeGeneratorDeps): CodeGenerator {
+  function isSkippedInstance(node: NormalizedSceneNode): boolean {
+    if (!skipComponentKeys || skipComponentKeys.size === 0) return false;
+    if (node.type !== "INSTANCE") return false;
+
+    const { componentKey, componentSetKey } = node;
+
+    return (
+      skipComponentKeys.has(componentKey) ||
+      (!!componentSetKey && skipComponentKeys.has(componentSetKey))
+    );
+  }
+
+  function traverse(node: NormalizedSceneNode): ElementNode | undefined {
+    if ("visible" in node && !node.visible) {
+      return;
+    }
+
+    if (isSkippedInstance(node)) {
+      return;
+    }
+
+    const result = match(node)
+      .with({ type: "FRAME" }, (node) =>
+        shouldInferAutoLayout
+          ? frameTransformer(applyInferredLayout(node, inferLayout(node)), traverse)
+          : frameTransformer(node, traverse),
+      )
+      .with({ type: "TEXT" }, (node) => textTransformer(node, traverse))
+      .with({ type: "RECTANGLE" }, (node) => rectangleTransformer(node, traverse))
+      .with({ type: "COMPONENT" }, (node) => frameTransformer(node, traverse)) // NOTE: Treat component node as Frame for now
+      .with({ type: "INSTANCE" }, (node) => instanceTransformer(node, traverse))
+      .with({ type: "VECTOR" }, (node) => vectorTransformer(node, traverse))
+      .with({ type: "BOOLEAN_OPERATION" }, (node) => booleanOperationTransformer(node, traverse))
+      .with({ type: "UNHANDLED" }, (node) =>
+        createElement(`Unhandled${pascalCase(node.original.type)}Node`),
+      )
+      .exhaustive();
+
+    if (result) {
+      return appendSource(result, node.id);
+    }
+
+    return;
+  }
+
+  function generateJsxTree(node: NormalizedSceneNode) {
+    return traverse(node);
+  }
+
+  function generateCode(node: NormalizedSceneNode, options: { shouldPrintSource: boolean }) {
+    if (isSkippedInstance(node)) {
+      return { imports: "", jsx: "// This component is intentionally excluded from codegen" };
+    }
+
+    const jsxTree = generateJsxTree(node);
+
+    if (!jsxTree) {
+      return undefined;
+    }
+
+    return stringifyElement(jsxTree, { printSource: options.shouldPrintSource });
+  }
+
+  return { generateJsxTree, generateCode };
+}

package/src/codegen/core/component-handler.ts

@@ -0,0 +1,23 @@
+import type { NormalizedInstanceNode, NormalizedSceneNode } from "@/normalizer";
+import type { ElementNode } from "./jsx";
+
+export interface ComponentHandler<
+  T extends
+    NormalizedInstanceNode["componentProperties"] = NormalizedInstanceNode["componentProperties"],
+> {
+  key: string;
+  transform: (
+    node: Omit<NormalizedInstanceNode, "componentProperties"> & { componentProperties: T },
+    traverse: (node: NormalizedSceneNode) => ElementNode | undefined,
+  ) => ElementNode;
+}
+
+export function defineComponentHandler<T extends NormalizedInstanceNode["componentProperties"]>(
+  key: string,
+  transform: (
+    node: Omit<NormalizedInstanceNode, "componentProperties"> & { componentProperties: T },
+    traverse: (node: NormalizedSceneNode) => ElementNode | undefined,
+  ) => ElementNode,
+): ComponentHandler<T> {
+  return { key, transform };
+}

package/src/codegen/core/component-type-helper.ts

@@ -0,0 +1,35 @@
+import type { ComponentPropertyType, InstanceSwapPreferredValue } from "@figma/rest-api-spec";
+
+export interface ComponentPropertyDefinition {
+  type: ComponentPropertyType;
+  preferredValues?: InstanceSwapPreferredValue[];
+  variantOptions?: string[];
+}
+
+export type InferComponentPropertyType<T extends ComponentPropertyDefinition> =
+  T["type"] extends "TEXT"
+    ? string
+    : T["type"] extends "BOOLEAN"
+      ? boolean
+      : T["type"] extends "INSTANCE_SWAP"
+        ? string
+        : T["type"] extends "VARIANT"
+          ? T["variantOptions"] extends string[]
+            ? T["variantOptions"][number]
+            : never
+          : never;
+
+export type InferComponentDefinition<T extends Record<string, ComponentPropertyDefinition>> = {
+  [K in keyof T]: {
+    type: T[K]["type"];
+    value: InferComponentPropertyType<T[K]>;
+    readonly boundVariables?: {
+      [field in VariableBindableComponentPropertyField]?: VariableAlias;
+    };
+  } & (T[K]["type"] extends "INSTANCE_SWAP"
+    ? {
+        componentKey: string;
+        preferredValues: InstanceSwapPreferredValue[];
+      }
+    : {});
+};

package/src/codegen/core/element-transformer.ts

@@ -0,0 +1,13 @@
+import type { NormalizedSceneNode } from "@/normalizer";
+import type { ElementNode } from "./jsx";
+
+export type ElementTransformer<T extends NormalizedSceneNode> = (
+  node: T,
+  traverse: (node: NormalizedSceneNode) => ElementNode | undefined,
+) => ElementNode | undefined;
+
+export function defineElementTransformer<T extends NormalizedSceneNode>(
+  transformer: ElementTransformer<T>,
+) {
+  return transformer;
+}

package/src/codegen/core/index.ts

@@ -0,0 +1,19 @@
+export type { CodeGeneratorDeps } from "./codegen";
+export type { ComponentHandler } from "./component-handler";
+export type {
+  ComponentPropertyDefinition,
+  InferComponentDefinition,
+  InferComponentPropertyType,
+} from "./component-type-helper";
+export type { ElementTransformer } from "./element-transformer";
+export type { ElementNode } from "./jsx";
+export type { PropsConverter } from "./props-converter";
+export type { ValueResolver } from "./value-resolver";
+
+export { createCodeGenerator } from "./codegen";
+export { defineComponentHandler } from "./component-handler";
+export { defineElementTransformer } from "./element-transformer";
+export { inferLayout } from "./infer-layout";
+export { cloneElement, createElement } from "./jsx";
+export { createPropsConverter, definePropsConverter } from "./props-converter";
+export { createValueResolver } from "./value-resolver";