@seed-design/figma 0.0.4 → 0.0.6

package/src/component/index.ts

@@ -1,76 +0,0 @@
-import { actionButtonHandler } from "./handlers/action-button";
-import { actionChipHandler } from "./handlers/action-chip";
-import { actionSheetHandler } from "./handlers/action-sheet";
-import { appBarHandler } from "./handlers/app-bar";
-import { avatarHandler } from "./handlers/avatar";
-import { avatarStackHandler } from "./handlers/avatar-stack";
-import { badgeHandler } from "./handlers/badge";
-import { calloutHandler } from "./handlers/callout";
-import { checkboxHandler } from "./handlers/checkbox";
-import { chipTabsHandler } from "./handlers/chip-tabs";
-import { controlChipHandler } from "./handlers/control-chip";
-import { errorStateHandler } from "./handlers/error-state";
-import { extendedActionSheetHandler } from "./handlers/extended-action-sheet";
-import { extendedFabHandler } from "./handlers/extended-fab";
-import { fabHandler } from "./handlers/fab";
-import { helpBubbleHandler } from "./handlers/help-bubble";
-import { identityPlaceholderHandler } from "./handlers/identity-placeholder";
-import { inlineBannerHandler } from "./handlers/inline-banner";
-import { mannerTempBadgeHandler } from "./handlers/manner-temp-badge";
-import { multilineTextFieldHandler } from "./handlers/multiline-text-field";
-import { progressCircleHandler } from "./handlers/progress-circle";
-import { reactionButtonHandler } from "./handlers/reaction-button";
-import { segmentedControlHandler } from "./handlers/segmented-control";
-import { selectBoxGroupHandler, selectBoxHandler } from "./handlers/select-box";
-import { skeletonHandler } from "./handlers/skeleton";
-import { snackbarHandler } from "./handlers/snackbar";
-import { switchHandler } from "./handlers/switch";
-import { tabsHandler } from "./handlers/tabs";
-import { textButtonHandler } from "./handlers/text-button";
-import { textFieldHandler } from "./handlers/text-field";
-import { toggleButtonHandler } from "./handlers/toggle-button";
-import type { ComponentHandler } from "./type-helper";
-
-const componentHandlers = [
-  actionButtonHandler,
-  actionChipHandler,
-  actionSheetHandler,
-  appBarHandler,
-  avatarHandler,
-  avatarStackHandler,
-  badgeHandler,
-  calloutHandler,
-  checkboxHandler,
-  chipTabsHandler,
-  controlChipHandler,
-  errorStateHandler,
-  extendedActionSheetHandler,
-  extendedFabHandler,
-  fabHandler,
-  helpBubbleHandler,
-  identityPlaceholderHandler,
-  inlineBannerHandler,
-  mannerTempBadgeHandler,
-  multilineTextFieldHandler,
-  progressCircleHandler,
-  reactionButtonHandler,
-  segmentedControlHandler,
-  selectBoxGroupHandler,
-  selectBoxHandler,
-  skeletonHandler,
-  snackbarHandler,
-  switchHandler,
-  tabsHandler,
-  textButtonHandler,
-  textFieldHandler,
-  toggleButtonHandler,
-] as ComponentHandler[];
-
-export const componentHandlerMap = new Map(
-  componentHandlers.map((component) => [component.key, component]),
-);
-
-export const ignoredComponentKeys = new Set<string>([
-  "1acdc7247c83a73a0504d6fad86d08783938cb1a",
-  "b38b719b61cdf1a24458d7a7888bee74b7649084",
-]);

package/src/generate-code.ts

@@ -1,251 +0,0 @@
-import { camelCase } from "change-case";
-import { componentHandlerMap, ignoredComponentKeys } from "./component";
-import { iconRecord } from "./data/icons";
-import { FIGMA_TEXT_STYLES } from "./data/styles";
-import { createIconTagNameFromKey, createMonochromeIconColorProps, isIconComponent } from "./icon";
-import type { ElementNode } from "./jsx";
-import { createElement, stringifyElement } from "./jsx";
-import { inferLayoutComponent } from "./layout";
-import type {
-  NormalizedComponentNode,
-  NormalizedFrameNode,
-  NormalizedInstanceNode,
-  NormalizedRectangleNode,
-  NormalizedSceneNode,
-  NormalizedTextNode,
-} from "./normalizer";
-import { createBackgroundProps, createBorderProps } from "./props/color";
-import { createLayoutProps } from "./props/layout";
-import { createSizingProps } from "./props/sizing";
-import { createTextProps } from "./props/text";
-import { getColorVariableName, getLayoutVariableName, inferDimension } from "./props/variable";
-import { compactObject } from "./utils/common";
-
-type PromiseLikeMaybe<T> = Promise<T | undefined> | T | undefined;
-
-export type FigmaNodeHandler = (node: NormalizedSceneNode) => PromiseLikeMaybe<ElementNode>;
-
-type FigmaNodeHandlerFactory<T extends NormalizedSceneNode> = (
-  traverse: FigmaNodeHandler,
-) => (node: T) => PromiseLikeMaybe<ElementNode>;
-
-export type FrameNodeHandlerFactory = FigmaNodeHandlerFactory<
-  NormalizedFrameNode | NormalizedComponentNode | NormalizedInstanceNode
->;
-
-export type TextNodeHandlerFactory = FigmaNodeHandlerFactory<NormalizedTextNode>;
-
-export type RectangleNodeHandlerFactory = FigmaNodeHandlerFactory<NormalizedRectangleNode>;
-
-export type ComponentNodeHandlerFactory = FigmaNodeHandlerFactory<NormalizedComponentNode>;
-
-export type InstanceNodeHandlerFactory = FigmaNodeHandlerFactory<NormalizedInstanceNode>;
-
-const defaultFrameHandler: FrameNodeHandlerFactory = (traverse) => async (node) => {
-  const children = node.children;
-
-  const props = {
-    ...createLayoutProps(node),
-    ...createSizingProps(node),
-    ...createBackgroundProps(node),
-    ...createBorderProps(node),
-  };
-
-  const layoutComponent = inferLayoutComponent(props);
-
-  if (layoutComponent === "Stack") {
-    const { flexDirection, ...rest } = props;
-
-    return createElement("Stack", rest, await Promise.all(children.map(traverse)));
-  }
-
-  if (layoutComponent === "Inline") {
-    const { flexDirection, flexWrap, alignItems, justifyContent, ...rest } = props;
-
-    return createElement("Inline", rest, await Promise.all(children.map(traverse)));
-  }
-
-  if (layoutComponent === "Columns") {
-    const { flexDirection, flexWrap, justifyContent, ...rest } = props;
-
-    const childrenResult = await Promise.all(children.map(traverse));
-
-    return createElement(
-      "Columns",
-      rest,
-      childrenResult.map((child) => createElement("Column", {}, child)),
-    );
-  }
-
-  return createElement("Flex", props, await Promise.all(children.map(traverse)));
-};
-
-const defaultTextNodeHandler: TextNodeHandlerFactory = () => (node) => {
-  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 />"),
-  );
-};
-
-const defaultRectangleNodeHandler: RectangleNodeHandlerFactory = () => (node) => {
-  return createElement(
-    "Box",
-    { ...createSizingProps(node), background: "palette.gray200" },
-    undefined,
-    "Rectangle Node Placeholder",
-  );
-};
-
-const defaultComponentNodeHandler: ComponentNodeHandlerFactory = (traverse) => async (node) => {
-  return defaultFrameHandler(traverse)(node);
-};
-
-const defaultInstanceNodeHandler: InstanceNodeHandlerFactory = (traverse) => async (node) => {
-  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 defaultFrameHandler(traverse)(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",
-  // );
-};
-
-export async function generateCode(
-  selection: NormalizedSceneNode,
-  options?: {
-    handlers?: {
-      frame?: FrameNodeHandlerFactory;
-      text?: TextNodeHandlerFactory;
-      rectangle?: RectangleNodeHandlerFactory;
-      component?: ComponentNodeHandlerFactory;
-      instance?: InstanceNodeHandlerFactory;
-    };
-  },
-) {
-  const handlers = {
-    frame: defaultFrameHandler,
-    text: defaultTextNodeHandler,
-    rectangle: defaultRectangleNodeHandler,
-    component: defaultComponentNodeHandler,
-    instance: defaultInstanceNodeHandler,
-    ...options?.handlers,
-  };
-
-  const handleFrameNode = handlers.frame(traverse);
-  const handleTextNode = handlers.text(traverse);
-  const handleRectangleNode = handlers.rectangle(traverse);
-  const handleComponentNode = handlers.component(traverse);
-  const handleInstanceNode = handlers.instance(traverse);
-
-  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 "./props/color";
-import { iconRecord } from "./data/icons";
-import type { NormalizedInstanceNode } from "./normalizer";
-
-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,31 +0,0 @@
-export interface LayoutComponentProps {
-  flexDirection: string | number | boolean;
-  alignItems: string | number | boolean;
-  justifyContent: string | number | boolean;
-  flexWrap: string | number | boolean;
-}
-
-export function inferLayoutComponent(props: LayoutComponentProps) {
-  if (
-    props.flexDirection === "row" &&
-    props.alignItems === "flexStart" &&
-    props.justifyContent === "flexStart" &&
-    props.flexWrap === "wrap"
-  ) {
-    return "Inline";
-  }
-
-  if (
-    props.flexDirection === "row" &&
-    props.justifyContent === "flexStart" &&
-    props.flexWrap === "nowrap"
-  ) {
-    return "Columns";
-  }
-
-  if (props.flexDirection === "column") {
-    return "Stack";
-  }
-
-  return "Flex";
-}

package/src/props/color.ts

@@ -1,78 +0,0 @@
-import type { NormalizedFrameNode, NormalizedTextNode } from "../normalizer";
-import { getColorVariableName } from "./variable";
-
-export function createBackgroundProps(
-  node: Pick<NormalizedFrameNode, "fills" | "boundVariables">,
-): Partial<Record<"background", string | undefined>> {
-  const fills = node.fills;
-  if (fills.length === 0) {
-    return {};
-  }
-
-  const fill = fills[0];
-  if (!fill || ("visible" in fill && !fill.visible) || fill.type !== "SOLID") {
-    return {};
-  }
-
-  if (node.boundVariables?.fills?.length === 1) {
-    return {
-      background: getColorVariableName(node.boundVariables.fills[0]!.id),
-    };
-  }
-
-  const color = fill.color;
-  return {
-    background: `rgba(${color.r * 255}, ${color.g * 255}, ${color.b * 255}, ${fill.opacity})`,
-  };
-}
-
-export function createColorProps(
-  node: Pick<NormalizedTextNode, "fills" | "boundVariables">,
-): Partial<Record<"color", string | undefined>> {
-  const fills = node.fills;
-  if (fills.length === 0) {
-    return {};
-  }
-
-  const fill = fills[0];
-  if (!fill || ("visible" in fill && !fill.visible) || fill.type !== "SOLID") {
-    return {};
-  }
-  if (node.boundVariables?.fills?.length === 1) {
-    return {
-      color: getColorVariableName(node.boundVariables.fills[0]!.id),
-    };
-  }
-
-  const color = fill.color;
-  return {
-    color: `rgba(${color.r * 255}, ${color.g * 255}, ${color.b * 255}, ${fill.opacity})`,
-  };
-}
-
-export function createBorderProps(
-  node: Pick<NormalizedFrameNode, "strokeWeight" | "strokes" | "boundVariables">,
-): Partial<Record<"borderWidth" | "borderColor", string | number | undefined>> {
-  const strokes = node.strokes;
-  if (strokes === undefined || strokes.length === 0) {
-    return {};
-  }
-
-  const stroke = strokes[0];
-  if (!stroke || ("visible" in stroke && !stroke.visible) || stroke.type !== "SOLID") {
-    return {};
-  }
-
-  if (node.boundVariables?.strokes?.length === 1) {
-    return {
-      borderWidth: node.strokeWeight as number,
-      borderColor: getColorVariableName(node.boundVariables.strokes[0]!.id),
-    };
-  }
-
-  const color = stroke.color;
-  return {
-    borderWidth: node.strokeWeight as number,
-    borderColor: `rgba(${color.r * 255}, ${color.g * 255}, ${color.b * 255}, ${stroke.opacity})`,
-  };
-}