@seed-design/figma 0.0.2 → 0.0.5

package/src/generate-code.ts

@@ -1,213 +0,0 @@
-import { camelCase } from "change-case";
-import { createBackgroundProps, createBorderProps } from "./color";
-import { componentHandlerMap, ignoredComponentKeys } from "./component";
-import { iconRecord } from "./data/icons";
-import { createIconTagNameFromKey, createMonochromeIconColorProps, isIconComponent } from "./icon";
-import type { ElementNode } from "./jsx";
-import { createElement, stringifyElement } from "./jsx";
-import { createLayoutProps } from "./layout";
-import type {
-  NormalizedComponentNode,
-  NormalizedFrameNode,
-  NormalizedInstanceNode,
-  NormalizedRectangleNode,
-  NormalizedSceneNode,
-  NormalizedTextNode,
-} from "./normalizer/types";
-import { createSizingProps } from "./sizing";
-import { createTextProps } from "./text";
-import { getColorVariableName, getLayoutVariableName, inferDimension } from "./variable";
-import { FIGMA_TEXT_STYLES } from "./data/styles";
-import { compactObject } from "./util";
-
-export async function generateCode(selection: NormalizedSceneNode) {
-  async function handleFrameNode(
-    node: NormalizedFrameNode | NormalizedComponentNode | NormalizedInstanceNode,
-  ) {
-    const children = node.children;
-
-    const props = {
-      ...createLayoutProps(node),
-      ...createSizingProps(node),
-      ...createBackgroundProps(node),
-      ...createBorderProps(node),
-    };
-
-    if (
-      props.flexDirection === "row" &&
-      props.alignItems === "flexStart" &&
-      props.justifyContent === "flexStart" &&
-      props.flexWrap === "wrap"
-    ) {
-      const { flexDirection, flexWrap, alignItems, justifyContent, ...rest } = props;
-
-      return createElement("Inline", rest, await Promise.all(children.map(traverse)));
-    }
-
-    if (
-      props.flexDirection === "row" &&
-      props.justifyContent === "flexStart" &&
-      props.flexWrap === "nowrap"
-    ) {
-      const { flexDirection, flexWrap, justifyContent, ...rest } = props;
-
-      const childrenResult = await Promise.all(children.map(traverse));
-
-      return createElement(
-        "Columns",
-        rest,
-        childrenResult.map((child) => createElement("Column", {}, child)),
-      );
-    }
-
-    if (props.flexDirection === "column") {
-      const { flexDirection, ...rest } = props;
-
-      return createElement("Stack", rest, await Promise.all(children.map(traverse)));
-    }
-
-    return createElement("Flex", props, await Promise.all(children.map(traverse)));
-  }
-
-  function handleTextNode(node: NormalizedTextNode): ElementNode {
-    const maxLines =
-      node.style.textTruncation === "ENDING" ? (node.style.maxLines ?? undefined) : undefined;
-
-    if (node.fills.length > 1) {
-      throw new Error("Expected a single fill");
-    }
-
-    const onlyFill = node.fills.length === 1 ? node.fills[0] : null;
-    const fillBoundVariableId =
-      onlyFill && onlyFill.type === "SOLID" ? (onlyFill.boundVariables?.color?.id ?? null) : null;
-    const color = fillBoundVariableId ? getColorVariableName(fillBoundVariableId) : undefined;
-
-    const style = FIGMA_TEXT_STYLES.find((s) => s.key === node.textStyleKey);
-
-    if (style) {
-      const styleNameSlugs = style.name.split("/");
-      const styleName = styleNameSlugs[styleNameSlugs.length - 1]!;
-      return createElement(
-        "Text",
-        compactObject({
-          textStyle: camelCase(styleName, { mergeAmbiguousCharacters: true }),
-          maxLines,
-          color,
-        }),
-        node.characters.replace(/\n/g, "<br />"),
-        color ? "" : "color 프로퍼티는 반영되지 않았습니다.",
-      );
-    }
-
-    const { fontSize, fontWeight, lineHeight } = createTextProps(node.boundVariables);
-
-    return createElement(
-      "Text",
-      compactObject({
-        fontSize,
-        fontWeight,
-        lineHeight,
-        color,
-      }),
-      node.characters.replace(/\n/g, "<br />"),
-    );
-  }
-
-  async function handleRectangleNode(node: NormalizedRectangleNode) {
-    return createElement(
-      "Box",
-      { ...createSizingProps(node), background: "palette.gray200" },
-      undefined,
-      "Rectangle Node Placeholder",
-    );
-  }
-
-  async function handleComponentNode(node: NormalizedComponentNode) {
-    return await handleFrameNode(node);
-  }
-
-  async function handleInstanceNode(node: NormalizedInstanceNode) {
-    const { componentKey, componentSetKey } = node;
-
-    if (isIconComponent(componentKey)) {
-      const iconElement = createElement(createIconTagNameFromKey(componentKey));
-
-      switch (iconRecord[componentKey]?.type) {
-        case "monochrome":
-          return createElement("Icon", {
-            size:
-              getLayoutVariableName(node.boundVariables?.size?.x?.id) ??
-              inferDimension(node.absoluteBoundingBox?.width ?? 0),
-            ...createMonochromeIconColorProps(node),
-            svg: iconElement,
-          });
-        case "multicolor":
-          return iconElement;
-        default:
-          return createElement("Icon", {
-            size:
-              getLayoutVariableName(node.boundVariables?.size?.x?.id) ??
-              inferDimension(node.absoluteBoundingBox?.width ?? 0),
-            svg: iconElement,
-            ...createMonochromeIconColorProps(node),
-          });
-      }
-    }
-
-    if (ignoredComponentKeys.has(componentSetKey ?? componentKey)) {
-      return;
-    }
-
-    const componentData = componentSetKey
-      ? componentHandlerMap.get(componentSetKey)
-      : componentHandlerMap.get(componentKey);
-
-    if (componentData) {
-      return componentData.codegen(node);
-    }
-
-    // if (node.id === selection.id) {
-    return await handleFrameNode(node);
-    // }
-
-    // const mainComponent = node.mainComponent;
-
-    // return createElement(
-    //   mainComponent.parent?.type === "COMPONENT_SET"
-    //     ? mainComponent.parent.name
-    //     : mainComponent.name,
-    //   Object.fromEntries(
-    //     Object.entries(node.componentProperties)
-    //       .filter(([_, props]) => props.type === "VARIANT" || props.type === "TEXT")
-    //       .map(([key, props]) => [camelCase(key), camelCase(props.value as string)]),
-    //   ),
-    //   undefined,
-    //   "Custom Component",
-    // );
-  }
-
-  async function traverse(node: NormalizedSceneNode): Promise<ElementNode | undefined> {
-    if ("visible" in node && !node.visible) {
-      return;
-    }
-
-    if (node.type === "FRAME") return await handleFrameNode(node);
-    if (node.type === "TEXT") return handleTextNode(node);
-    if (node.type === "RECTANGLE") return await handleRectangleNode(node);
-    if (node.type === "COMPONENT") return await handleComponentNode(node);
-    if (node.type === "INSTANCE") return await handleInstanceNode(node);
-
-    return;
-  }
-
-  try {
-    const rootEl = await traverse(selection);
-    if (!rootEl) {
-      return "";
-    }
-    return stringifyElement(rootEl);
-  } catch (e) {
-    console.error(e);
-    return "";
-  }
-}

package/src/icon.ts

@@ -1,46 +0,0 @@
-import { pascalCase } from "change-case";
-
-import { createColorProps } from "./color";
-import { iconRecord } from "./data/icons";
-import type { NormalizedInstanceNode } from "./normalizer/types";
-
-export function isIconComponent(componentKey: string) {
-  return !!iconRecord[componentKey];
-}
-
-export function createIconTagNameFromKey(key?: string) {
-  if (!key) {
-    return "UnknownIcon";
-  }
-
-  const iconData = iconRecord[key];
-  if (!iconData) {
-    throw new Error(`Icon not found: ${key}`);
-  }
-
-  const { name, weight } = iconData;
-
-  return pascalCase(`${name}${weight ? weight : ""}`);
-}
-
-export function createMonochromeIconColorProps(node: NormalizedInstanceNode) {
-  if (node.children.length === 0) {
-    throw new Error("Icon node has no children");
-  }
-
-  const icons = node.children.filter(
-    (child) => child.type === "VECTOR" || child.type === "BOOLEAN_OPERATION",
-  );
-
-  const colorProps = icons.map(createColorProps);
-
-  const fills = new Set(
-    colorProps.map((props) => props.color).filter((color) => color !== undefined),
-  );
-
-  if (fills.size > 1) {
-    throw new Error(`Children of the icon node ${node.name} has multiple colors`);
-  }
-
-  return { color: fills.values().next().value };
-}

package/src/layout.ts

@@ -1,289 +0,0 @@
-import type {
-  NormalizedComponentNode,
-  NormalizedFrameNode,
-  NormalizedInstanceNode,
-  NormalizedSceneNode,
-} from "./normalizer/types";
-import { getLayoutVariableName, inferDimension, inferRadius } from "./variable";
-
-interface FigmaLayoutProps {
-  layoutMode?: NormalizedFrameNode["layoutMode"];
-  layoutWrap?: NormalizedFrameNode["layoutWrap"];
-  paddingLeft?: NormalizedFrameNode["paddingLeft"];
-  paddingRight?: NormalizedFrameNode["paddingRight"];
-  paddingTop?: NormalizedFrameNode["paddingTop"];
-  paddingBottom?: NormalizedFrameNode["paddingBottom"];
-  primaryAxisAlignItems?: NormalizedFrameNode["primaryAxisAlignItems"];
-  counterAxisAlignItems?: NormalizedFrameNode["counterAxisAlignItems"];
-  primaryAxisSizingMode?: NormalizedFrameNode["primaryAxisSizingMode"];
-  counterAxisSizingMode?: NormalizedFrameNode["counterAxisSizingMode"];
-  layoutGrow?: NormalizedFrameNode["layoutGrow"];
-  layoutAlign?: NormalizedFrameNode["layoutAlign"];
-  itemSpacing?: NormalizedFrameNode["itemSpacing"];
-  counterAxisSpacing?: NormalizedFrameNode["counterAxisSpacing"];
-  boundVariables?: NormalizedFrameNode["boundVariables"];
-  cornerRadius?: NormalizedFrameNode["cornerRadius"];
-  rectangleCornerRadii?: NormalizedFrameNode["rectangleCornerRadii"];
-  children: NormalizedSceneNode[];
-}
-
-type LayoutPropHandler = (props: FigmaLayoutProps) => string | number | boolean | undefined;
-
-const layoutPropHandlers = {
-  flexDirection: ({ layoutMode }) => (layoutMode === "HORIZONTAL" ? "row" : "column"),
-  justifyContent: ({ primaryAxisAlignItems }) => {
-    switch (primaryAxisAlignItems) {
-      case "MIN":
-        return "flexStart";
-      case "CENTER":
-        return "center";
-      case "MAX":
-        return "flexEnd";
-      case "SPACE_BETWEEN":
-        return "spaceBetween";
-    }
-  },
-  alignItems: ({ counterAxisAlignItems, children }) => {
-    const isStretch = children.every((child) => {
-      if (!("layoutAlign" in child)) {
-        return false;
-      }
-
-      return child.layoutAlign === "STRETCH";
-    });
-
-    if (isStretch) {
-      return "stretch";
-    }
-
-    switch (counterAxisAlignItems) {
-      case "MIN":
-        return "flexStart";
-      case "CENTER":
-        return "center";
-      case "MAX":
-        return "flexEnd";
-      case "BASELINE":
-        return "baseline";
-    }
-  },
-  flexWrap: ({ layoutWrap }) => (layoutWrap === "WRAP" ? "wrap" : "nowrap"),
-  flexGrow: ({ layoutGrow }) => layoutGrow,
-  alignSelf: ({ layoutAlign }) => {
-    switch (layoutAlign) {
-      case "STRETCH":
-        return "stretch";
-      case "MIN":
-        return "flexStart";
-      case "CENTER":
-        return "center";
-      case "MAX":
-        return "flexEnd";
-    }
-  },
-  gap: ({ itemSpacing, boundVariables, primaryAxisAlignItems, children }) =>
-    children.length <= 1
-      ? 0
-      : primaryAxisAlignItems === "SPACE_BETWEEN"
-        ? 0
-        : boundVariables?.itemSpacing
-          ? getLayoutVariableName(boundVariables.itemSpacing.id)
-          : inferDimension(itemSpacing ?? 0),
-  paddingTop: ({ paddingTop, boundVariables }) =>
-    boundVariables?.paddingTop
-      ? getLayoutVariableName(boundVariables.paddingTop.id)
-      : inferDimension(paddingTop ?? 0),
-  paddingBottom: ({ paddingBottom, boundVariables }) =>
-    boundVariables?.paddingBottom
-      ? getLayoutVariableName(boundVariables.paddingBottom.id)
-      : inferDimension(paddingBottom ?? 0),
-  paddingLeft: ({ paddingLeft, boundVariables }) =>
-    boundVariables?.paddingLeft
-      ? getLayoutVariableName(boundVariables.paddingLeft.id)
-      : inferDimension(paddingLeft ?? 0),
-  paddingRight: ({ paddingRight, boundVariables }) =>
-    boundVariables?.paddingRight
-      ? getLayoutVariableName(boundVariables.paddingRight.id)
-      : inferDimension(paddingRight ?? 0),
-  borderRadius: ({ cornerRadius, boundVariables }) => {
-    // If all corner radii are the same, use the first one
-    if (
-      cornerRadius &&
-      boundVariables?.bottomLeftRadius === boundVariables?.bottomRightRadius &&
-      boundVariables?.bottomLeftRadius === boundVariables?.topLeftRadius &&
-      boundVariables?.bottomLeftRadius === boundVariables?.topRightRadius
-    ) {
-      return boundVariables?.bottomLeftRadius
-        ? getLayoutVariableName(boundVariables.bottomLeftRadius.id)
-        : inferRadius(cornerRadius ?? 0);
-    }
-
-    // TODO: handle individual corner radii
-    return undefined;
-  },
-  borderTopLeftRadius: ({ rectangleCornerRadii, boundVariables }) =>
-    boundVariables?.topLeftRadius
-      ? getLayoutVariableName(boundVariables.topLeftRadius.id)
-      : inferRadius(rectangleCornerRadii?.[0] ?? 0),
-  borderTopRightRadius: ({ rectangleCornerRadii, boundVariables }) =>
-    boundVariables?.topRightRadius
-      ? getLayoutVariableName(boundVariables.topRightRadius.id)
-      : inferRadius(rectangleCornerRadii?.[1] ?? 0),
-  borderBottomLeftRadius: ({ rectangleCornerRadii, boundVariables }) =>
-    boundVariables?.bottomLeftRadius
-      ? getLayoutVariableName(boundVariables.bottomLeftRadius.id)
-      : inferRadius(rectangleCornerRadii?.[2] ?? 0),
-  borderBottomRightRadius: ({ rectangleCornerRadii, boundVariables }) =>
-    boundVariables?.bottomRightRadius
-      ? getLayoutVariableName(boundVariables.bottomRightRadius.id)
-      : inferRadius(rectangleCornerRadii?.[3] ?? 0),
-} satisfies Record<string, LayoutPropHandler>;
-
-type LayoutProps = keyof typeof layoutPropHandlers;
-
-type LayoutShorthandHandler = (props: Record<LayoutProps, string | number | boolean | undefined>) =>
-  | {
-      value: string | number | boolean | undefined;
-      exclude: LayoutProps[];
-    }
-  | undefined;
-
-const layoutShorthandHandlers = {
-  paddingX: ({ paddingLeft, paddingRight, paddingTop, paddingBottom }) => {
-    if (
-      paddingLeft === paddingRight &&
-      paddingTop === paddingBottom &&
-      paddingLeft === paddingTop
-    ) {
-      return undefined;
-    }
-    if (paddingLeft === paddingRight) {
-      const value =
-        paddingLeft === "globalGutter" || paddingLeft === "betweenChips"
-          ? `spacingX.${paddingLeft}`
-          : paddingLeft;
-      return {
-        value,
-        exclude: ["paddingLeft", "paddingRight"],
-      };
-    }
-    return undefined;
-  },
-  paddingY: ({ paddingLeft, paddingRight, paddingTop, paddingBottom }) => {
-    if (
-      paddingLeft === paddingRight &&
-      paddingTop === paddingBottom &&
-      paddingLeft === paddingTop
-    ) {
-      return undefined;
-    }
-    if (paddingTop === paddingBottom) {
-      return {
-        value: paddingTop,
-        exclude: ["paddingTop", "paddingBottom"],
-      };
-    }
-    return undefined;
-  },
-  padding: ({ paddingLeft, paddingRight, paddingTop, paddingBottom }) => {
-    if (
-      paddingLeft === paddingRight &&
-      paddingTop === paddingBottom &&
-      paddingLeft === paddingTop
-    ) {
-      return {
-        value: paddingLeft,
-        exclude: ["paddingLeft", "paddingRight", "paddingTop", "paddingBottom"],
-      };
-    }
-    return undefined;
-  },
-} satisfies Record<string, LayoutShorthandHandler>;
-
-type LayoutShorthandProps = keyof typeof layoutShorthandHandlers;
-
-const layoutPropDefaults: Record<string, string | number | boolean> = {
-  flexDirection: "row",
-  justifyContent: "flexStart",
-  alignItems: "stretch",
-  flexWrap: "nowrap",
-  flexGrow: 0,
-  alignSelf: "auto",
-  gap: 0,
-  padding: 0,
-  paddingX: 0,
-  paddingY: 0,
-  paddingBottom: 0,
-  paddingLeft: 0,
-  paddingRight: 0,
-  paddingTop: 0,
-  borderRadius: 0,
-  borderTopLeftRadius: 0,
-  borderTopRightRadius: 0,
-  borderBottomLeftRadius: 0,
-  borderBottomRightRadius: 0,
-} satisfies Record<LayoutProps | LayoutShorthandProps, string | number | boolean>;
-
-type FrameLikeNode = NormalizedFrameNode | NormalizedComponentNode | NormalizedInstanceNode;
-
-export function createLayoutProps(
-  node: FrameLikeNode,
-): Record<LayoutProps | LayoutShorthandProps, string | number | boolean> {
-  const boundVariables = node.boundVariables;
-  const children = node.children;
-
-  const autoLayoutProperties = {
-    layoutMode: node.layoutMode,
-    layoutWrap: node.layoutWrap,
-    paddingLeft: node.paddingLeft,
-    paddingRight: node.paddingRight,
-    paddingTop: node.paddingTop,
-    paddingBottom: node.paddingBottom,
-    primaryAxisAlignItems: node.primaryAxisAlignItems,
-    counterAxisAlignItems: node.counterAxisAlignItems,
-    primaryAxisSizingMode: node.primaryAxisSizingMode,
-    counterAxisSizingMode: node.counterAxisSizingMode,
-    layoutGrow: node.layoutGrow,
-    layoutAlign: node.layoutAlign,
-    itemSpacing: node.itemSpacing,
-    counterAxisSpacing: node.counterAxisSpacing,
-  };
-
-  const radiusProperties = {
-    cornerRadius: node.cornerRadius,
-    topLeftRadius: node.rectangleCornerRadii?.[0],
-    topRightRadius: node.rectangleCornerRadii?.[1],
-    bottomRightRadius: node.rectangleCornerRadii?.[2],
-    bottomLeftRadius: node.rectangleCornerRadii?.[3],
-  };
-
-  const result: Record<string, string | number | boolean> = {};
-
-  for (const [prop, handler] of Object.entries(layoutPropHandlers)) {
-    const value = handler({
-      ...autoLayoutProperties,
-      ...radiusProperties,
-      boundVariables,
-      children,
-    });
-    if (value !== undefined && value !== layoutPropDefaults[prop]) {
-      result[prop] = value;
-    }
-  }
-
-  for (const [prop, handler] of Object.entries(layoutShorthandHandlers)) {
-    const shorthandResult = handler(result);
-    if (shorthandResult === undefined) {
-      continue;
-    }
-    const { value, exclude } = shorthandResult;
-    if (value !== undefined && value !== layoutPropDefaults[prop]) {
-      result[prop] = value;
-      for (const excludedProp of exclude) {
-        delete result[excludedProp];
-      }
-    }
-  }
-
-  return result;
-}

package/src/sizing.ts

@@ -1,58 +0,0 @@
-import type { NormalizedFrameNode } from "./normalizer/types";
-import { getLayoutVariableName, inferDimension } from "./variable";
-
-type SizingPropHandler = (props: {
-  boundVariables: NonNullable<NormalizedFrameNode["boundVariables"]>;
-  layoutSizingHorizontal: FrameNode["layoutSizingHorizontal"];
-  layoutSizingVertical: FrameNode["layoutSizingVertical"];
-  width: FrameNode["width"];
-  height: FrameNode["height"];
-}) => string | number | boolean | undefined;
-
-const sizingPropHandlers = {
-  height: ({ boundVariables, layoutSizingVertical, height }) =>
-    layoutSizingVertical === "FIXED"
-      ? boundVariables.size?.y
-        ? getLayoutVariableName(boundVariables.size.y.id)
-        : inferDimension(height)
-      : undefined,
-  width: ({ boundVariables, layoutSizingHorizontal, width }) =>
-    layoutSizingHorizontal === "FIXED"
-      ? boundVariables.size?.x
-        ? getLayoutVariableName(boundVariables.size.x.id)
-        : inferDimension(width)
-      : undefined,
-} satisfies Record<string, SizingPropHandler>;
-
-export function createSizingProps(
-  node: Pick<
-    NormalizedFrameNode,
-    "boundVariables" | "layoutSizingHorizontal" | "layoutSizingVertical" | "absoluteBoundingBox"
-  >,
-): Record<string, string | number | boolean> {
-  const boundVariables = node.boundVariables;
-  const layoutSizingHorizontal = node.layoutSizingHorizontal ?? "FIXED";
-  const layoutSizingVertical = node.layoutSizingVertical ?? "FIXED";
-  const { width, height } = node.absoluteBoundingBox ?? { width: 0, height: 0 };
-
-  if (!boundVariables) {
-    return {};
-  }
-
-  const result: Record<string, string | number | boolean> = {};
-
-  for (const [prop, handler] of Object.entries(sizingPropHandlers)) {
-    const value = handler({
-      boundVariables,
-      layoutSizingHorizontal,
-      layoutSizingVertical,
-      width,
-      height,
-    });
-    if (value !== undefined) {
-      result[prop] = value;
-    }
-  }
-
-  return result;
-}

package/src/text.ts

@@ -1,20 +0,0 @@
-import type { NormalizedTextNode } from "./normalizer/types";
-import { getTypographyVariableName } from "./variable";
-
-export function createTextProps(boundVariables: NormalizedTextNode["boundVariables"]) {
-  const fontSizeBoundVariables = boundVariables?.fontSize?.[0];
-  const fontStyleBoundVariables = boundVariables?.fontStyle?.[0];
-  const lineHeightBoundVariables = boundVariables?.lineHeight?.[0];
-
-  return {
-    fontSize: fontSizeBoundVariables
-      ? getTypographyVariableName(fontSizeBoundVariables.id)
-      : undefined,
-    fontWeight: fontStyleBoundVariables
-      ? getTypographyVariableName(fontStyleBoundVariables.id)
-      : undefined,
-    lineHeight: lineHeightBoundVariables
-      ? getTypographyVariableName(lineHeightBoundVariables.id)
-      : undefined,
-  };
-}

package/src/util.ts

@@ -1,17 +0,0 @@
-import type { NormalizedSceneNode } from "./normalizer/types";
-
-export function ensureArray<T>(maybeArray: T | T[]): T[] {
-  if (Array.isArray(maybeArray)) {
-    return maybeArray;
-  }
-
-  return [maybeArray];
-}
-
-export function exists<T>(value: T | null | undefined): value is T {
-  return value != null;
-}
-
-export function compactObject<T extends Record<string, unknown>>(obj: T): T {
-  return Object.fromEntries(Object.entries(obj).filter(([, value]) => value != null)) as T;
-}