@seed-design/figma 0.0.6 → 0.0.17

package/src/codegen/domain/props/container-layout-props.service.ts

@@ -1,248 +0,0 @@
-import { definePropsTransformer, type PropsTransformer } from "@/codegen/core";
-import type {
-  NormalizedHasChildrenTrait,
-  NormalizedHasFramePropertiesTrait,
-  NormalizedIsLayerTrait,
-} from "@/normalizer";
-import { objectEntries } from "@/utils/common";
-import { toCssPixel } from "@/utils/css";
-import type { VariableService } from "../variable.service";
-
-type ContainerLayoutTrait = NormalizedHasFramePropertiesTrait &
-  NormalizedHasChildrenTrait &
-  NormalizedIsLayerTrait;
-
-export interface ContainerLayoutPropsService<T extends Record<string, any>> {
-  transform: PropsTransformer<ContainerLayoutTrait, T>;
-}
-
-// Seed Implementation
-type LayoutPropsKey =
-  | "flexDirection"
-  | "justifyContent"
-  | "alignItems"
-  | "flexWrap"
-  | "gap"
-  | "paddingBottom"
-  | "paddingLeft"
-  | "paddingRight"
-  | "paddingTop";
-
-type LayoutShorthandPropsKey = "padding" | "paddingX" | "paddingY";
-
-type LayoutPropHandler = (props: ContainerLayoutTrait) => string | number | boolean | undefined;
-
-type LayoutShorthandHandler = (
-  props: Partial<Record<LayoutPropsKey, string | number | boolean | undefined>>,
-) =>
-  | {
-      value: string | number | boolean | undefined;
-      exclude: LayoutPropsKey[];
-    }
-  | undefined;
-
-export type SeedContainerLayoutProps = Partial<
-  Record<LayoutPropsKey | LayoutShorthandPropsKey, string | number | boolean>
->;
-
-export function createContainerLayoutPropsService({
-  variableService,
-  shouldInferVariableName,
-}: {
-  variableService: VariableService;
-  shouldInferVariableName: boolean;
-}): ContainerLayoutPropsService<SeedContainerLayoutProps> {
-  const getLayoutVariableName = (id: string) => variableService.getVariableName(id);
-  const inferSpacingVariableName = (value?: number) => {
-    if (value === undefined) {
-      return undefined;
-    }
-
-    if (shouldInferVariableName) {
-      const inferred = variableService.inferVariableName("GAP", value);
-      if (inferred) {
-        return inferred;
-      }
-    }
-
-    return value === 0 ? 0 : toCssPixel(value);
-  };
-
-  const layoutPropHandlers: Record<LayoutPropsKey, LayoutPropHandler> = {
-    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"),
-    gap: ({ itemSpacing, boundVariables, primaryAxisAlignItems, children }) =>
-      children.length <= 1
-        ? 0
-        : primaryAxisAlignItems === "SPACE_BETWEEN"
-          ? 0
-          : boundVariables?.itemSpacing
-            ? getLayoutVariableName(boundVariables.itemSpacing.id)
-            : inferSpacingVariableName(itemSpacing),
-    paddingTop: ({ paddingTop, boundVariables }) =>
-      boundVariables?.paddingTop
-        ? getLayoutVariableName(boundVariables.paddingTop.id)
-        : inferSpacingVariableName(paddingTop),
-    paddingBottom: ({ paddingBottom, boundVariables }) =>
-      boundVariables?.paddingBottom
-        ? getLayoutVariableName(boundVariables.paddingBottom.id)
-        : inferSpacingVariableName(paddingBottom),
-    paddingLeft: ({ paddingLeft, boundVariables }) =>
-      boundVariables?.paddingLeft
-        ? getLayoutVariableName(boundVariables.paddingLeft.id)
-        : inferSpacingVariableName(paddingLeft),
-    paddingRight: ({ paddingRight, boundVariables }) =>
-      boundVariables?.paddingRight
-        ? getLayoutVariableName(boundVariables.paddingRight.id)
-        : inferSpacingVariableName(paddingRight),
-  };
-
-  const layoutShorthandHandlers: Record<LayoutShorthandPropsKey, LayoutShorthandHandler> = {
-    paddingX: ({ paddingLeft, paddingRight, paddingTop, paddingBottom }) => {
-      if (paddingLeft === undefined || paddingRight === undefined) {
-        return undefined;
-      }
-
-      if (
-        paddingLeft === paddingRight &&
-        paddingTop === paddingBottom &&
-        paddingLeft === paddingTop
-      ) {
-        return undefined;
-      }
-
-      if (paddingLeft === paddingRight) {
-        const value = paddingLeft;
-        return {
-          value,
-          exclude: ["paddingLeft", "paddingRight"],
-        };
-      }
-      return undefined;
-    },
-    paddingY: ({ paddingLeft, paddingRight, paddingTop, paddingBottom }) => {
-      if (paddingTop === undefined || paddingBottom === undefined) {
-        return undefined;
-      }
-
-      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 === undefined ||
-        paddingRight === undefined ||
-        paddingTop === undefined ||
-        paddingBottom === undefined
-      ) {
-        return undefined;
-      }
-
-      if (
-        paddingLeft === paddingRight &&
-        paddingTop === paddingBottom &&
-        paddingLeft === paddingTop
-      ) {
-        return {
-          value: paddingLeft,
-          exclude: ["paddingLeft", "paddingRight", "paddingTop", "paddingBottom"],
-        };
-      }
-      return undefined;
-    },
-  };
-
-  // Default values
-  const layoutPropDefaults: SeedContainerLayoutProps = {
-    flexDirection: "row",
-    justifyContent: "flexStart",
-    alignItems: "stretch",
-    flexWrap: "nowrap",
-    gap: 0,
-    padding: 0,
-    paddingX: 0,
-    paddingY: 0,
-    paddingBottom: 0,
-    paddingLeft: 0,
-    paddingRight: 0,
-    paddingTop: 0,
-  };
-
-  const transform = definePropsTransformer((node: ContainerLayoutTrait) => {
-    const result: SeedContainerLayoutProps = {};
-
-    for (const [prop, handler] of objectEntries(layoutPropHandlers)) {
-      const value = handler(node);
-      if (value !== undefined && value !== layoutPropDefaults[prop]) {
-        result[prop] = value;
-      }
-    }
-
-    for (const [prop, handler] of objectEntries(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;
-  });
-
-  return { transform };
-}

package/src/codegen/domain/props/fill-props.service.ts

@@ -1,75 +0,0 @@
-import { definePropsTransformer, type PropsTransformer } from "@/codegen/core";
-import type { NormalizedHasGeometryTrait, NormalizedIsLayerTrait } from "@/normalizer";
-import { toCssRgba } from "@/utils/css";
-import type { VariableService } from "../variable.service";
-
-type FillTrait = NormalizedIsLayerTrait & NormalizedHasGeometryTrait;
-
-export interface FillPropsService<T extends Record<string, any>> {
-  transform: PropsTransformer<FillTrait, T>;
-}
-
-export interface FrameFillProps {
-  background?: string;
-}
-
-export function createFrameFillPropsService({
-  variableService,
-}: { variableService: VariableService }): FillPropsService<FrameFillProps> {
-  const transform = definePropsTransformer((node: FillTrait) => {
-    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: variableService.getVariableName(node.boundVariables.fills[0]!.id),
-      };
-    }
-
-    const color = fill.color;
-    return {
-      background: toCssRgba(color),
-    };
-  });
-
-  return { transform };
-}
-
-export interface ShapeFillProps {
-  color?: string;
-}
-
-export function createShapeFillPropsService({
-  variableService,
-}: { variableService: VariableService }): FillPropsService<ShapeFillProps> {
-  const transform = definePropsTransformer((node: FillTrait) => {
-    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: variableService.getVariableName(node.boundVariables.fills[0]!.id),
-      };
-    }
-
-    const color = fill.color;
-    return {
-      color: toCssRgba(color),
-    };
-  });
-
-  return { transform };
-}

package/src/codegen/domain/props/radius-props.service.ts

@@ -1,105 +0,0 @@
-import { definePropsTransformer, type PropsTransformer } from "@/codegen/core";
-import type { NormalizedCornerTrait, NormalizedIsLayerTrait } from "@/normalizer";
-import { objectEntries } from "@/utils/common";
-import { toCssPixel } from "@/utils/css";
-import type { VariableService } from "../variable.service";
-
-type RadiusTrait = NormalizedCornerTrait & NormalizedIsLayerTrait;
-
-export interface RadiusPropsService<T extends Record<string, any>> {
-  transform: PropsTransformer<RadiusTrait, T>;
-}
-
-type RadiusPropsKey =
-  | "borderRadius"
-  | "borderTopLeftRadius"
-  | "borderTopRightRadius"
-  | "borderBottomLeftRadius"
-  | "borderBottomRightRadius";
-
-type ApperancePropHandler = (props: RadiusTrait) => string | number | boolean | undefined;
-
-export type SeedRadiusProps = Partial<Record<RadiusPropsKey, string | number | boolean>>;
-
-export function createRadiusPropsService({
-  variableService,
-  shouldInferVariableName,
-}: {
-  variableService: VariableService;
-  shouldInferVariableName: boolean;
-}): RadiusPropsService<SeedRadiusProps> {
-  const getLayoutVariableName = (id: string) => variableService.getVariableName(id);
-  const inferRadiusVariableName = (value?: number) => {
-    if (value === undefined) {
-      return undefined;
-    }
-
-    if (shouldInferVariableName) {
-      const inferred = variableService.inferVariableName("CORNER_RADIUS", value);
-      if (inferred) {
-        return inferred;
-      }
-    }
-
-    return value === 0 ? 0 : toCssPixel(value);
-  };
-
-  const radiusPropHandlers: Record<RadiusPropsKey, ApperancePropHandler> = {
-    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)
-          : inferRadiusVariableName(cornerRadius);
-      }
-
-      // TODO: handle individual corner radii
-      return undefined;
-    },
-    borderTopLeftRadius: ({ rectangleCornerRadii, boundVariables }) =>
-      boundVariables?.topLeftRadius
-        ? getLayoutVariableName(boundVariables.topLeftRadius.id)
-        : inferRadiusVariableName(rectangleCornerRadii?.[0]),
-    borderTopRightRadius: ({ rectangleCornerRadii, boundVariables }) =>
-      boundVariables?.topRightRadius
-        ? getLayoutVariableName(boundVariables.topRightRadius.id)
-        : inferRadiusVariableName(rectangleCornerRadii?.[1]),
-    borderBottomLeftRadius: ({ rectangleCornerRadii, boundVariables }) =>
-      boundVariables?.bottomLeftRadius
-        ? getLayoutVariableName(boundVariables.bottomLeftRadius.id)
-        : inferRadiusVariableName(rectangleCornerRadii?.[2]),
-    borderBottomRightRadius: ({ rectangleCornerRadii, boundVariables }) =>
-      boundVariables?.bottomRightRadius
-        ? getLayoutVariableName(boundVariables.bottomRightRadius.id)
-        : inferRadiusVariableName(rectangleCornerRadii?.[3]),
-  };
-
-  // Default values
-  const radiusPropDefaults: SeedRadiusProps = {
-    borderRadius: 0,
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0,
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0,
-  };
-
-  const transform = definePropsTransformer((node: RadiusTrait) => {
-    const result: SeedRadiusProps = {};
-
-    for (const [prop, handler] of objectEntries(radiusPropHandlers)) {
-      const value = handler(node);
-      if (value !== undefined && value !== radiusPropDefaults[prop]) {
-        result[prop] = value;
-      }
-    }
-
-    return result;
-  });
-
-  return { transform };
-}

package/src/codegen/domain/props/self-layout-props.service.ts

@@ -1,127 +0,0 @@
-import { definePropsTransformer, type PropsTransformer } from "@/codegen/core";
-import type {
-  NormalizedHasFramePropertiesTrait,
-  NormalizedHasLayoutTrait,
-  NormalizedIsLayerTrait,
-} from "@/normalizer";
-import { objectEntries } from "@/utils/common";
-import { toCssPixel } from "@/utils/css";
-import type { VariableService } from "../variable.service";
-
-type SelfLayoutTrait = NormalizedIsLayerTrait &
-  NormalizedHasLayoutTrait &
-  NormalizedHasFramePropertiesTrait;
-
-export interface SelfLayoutPropsService<T extends Record<string, any>> {
-  transform: PropsTransformer<SelfLayoutTrait, T>;
-}
-
-type LayoutPropsKey =
-  | "flexGrow"
-  | "alignSelf"
-  | "width"
-  | "height"
-  | "minWidth"
-  | "minHeight"
-  | "maxWidth"
-  | "maxHeight";
-
-type LayoutPropHandler = (props: SelfLayoutTrait) => string | number | boolean | undefined;
-
-export type SeedSelfLayoutProps = Partial<Record<LayoutPropsKey, string | number | boolean>>;
-
-export function createSelfLayoutPropsService({
-  variableService,
-  shouldInferVariableName,
-}: {
-  variableService: VariableService;
-  shouldInferVariableName: boolean;
-}): SelfLayoutPropsService<SeedSelfLayoutProps> {
-  const getLayoutVariableName = (id: string) => variableService.getVariableName(id);
-  const inferSizeVariableName = (value?: number) => {
-    if (value === undefined) {
-      return undefined;
-    }
-
-    if (shouldInferVariableName) {
-      const inferred = variableService.inferVariableName("WIDTH_HEIGHT", value);
-      if (inferred) {
-        return inferred;
-      }
-    }
-
-    return value === 0 ? 0 : toCssPixel(value);
-  };
-
-  const layoutPropHandlers: Record<LayoutPropsKey, LayoutPropHandler> = {
-    flexGrow: ({ layoutGrow }) => layoutGrow,
-    alignSelf: ({ layoutAlign }) => {
-      switch (layoutAlign) {
-        case "STRETCH":
-          return "stretch";
-        case "MIN":
-          return "flexStart";
-        case "CENTER":
-          return "center";
-        case "MAX":
-          return "flexEnd";
-      }
-    },
-    height: ({ boundVariables, layoutSizingVertical, absoluteBoundingBox }) =>
-      layoutSizingVertical === "FIXED" || layoutSizingVertical === undefined
-        ? boundVariables?.size?.y
-          ? getLayoutVariableName(boundVariables.size.y.id)
-          : inferSizeVariableName(absoluteBoundingBox?.height)
-        : undefined,
-    width: ({ boundVariables, layoutSizingHorizontal, absoluteBoundingBox }) =>
-      layoutSizingHorizontal === "FIXED" || layoutSizingHorizontal === undefined
-        ? boundVariables?.size?.x
-          ? getLayoutVariableName(boundVariables.size.x.id)
-          : inferSizeVariableName(absoluteBoundingBox?.width)
-        : undefined,
-    minHeight: ({ boundVariables, layoutSizingVertical, minHeight }) =>
-      layoutSizingVertical === "HUG"
-        ? boundVariables?.minHeight
-          ? getLayoutVariableName(boundVariables.minHeight.id)
-          : inferSizeVariableName(minHeight)
-        : undefined,
-    maxHeight: ({ boundVariables, layoutSizingVertical, maxHeight }) =>
-      layoutSizingVertical === "HUG"
-        ? boundVariables?.maxHeight
-          ? getLayoutVariableName(boundVariables.maxHeight.id)
-          : inferSizeVariableName(maxHeight)
-        : undefined,
-    minWidth: ({ boundVariables, layoutSizingHorizontal, minWidth }) =>
-      layoutSizingHorizontal === "HUG"
-        ? boundVariables?.minWidth
-          ? getLayoutVariableName(boundVariables.minWidth.id)
-          : inferSizeVariableName(minWidth)
-        : undefined,
-    maxWidth: ({ boundVariables, layoutSizingHorizontal, maxWidth }) =>
-      layoutSizingHorizontal === "HUG"
-        ? boundVariables?.maxWidth
-          ? getLayoutVariableName(boundVariables.maxWidth.id)
-          : inferSizeVariableName(maxWidth)
-        : undefined,
-  };
-
-  // Default values
-  const layoutPropDefaults: SeedSelfLayoutProps = {
-    flexGrow: 0,
-  };
-
-  const transform = definePropsTransformer((node: SelfLayoutTrait) => {
-    const result: SeedSelfLayoutProps = {};
-
-    for (const [prop, handler] of objectEntries(layoutPropHandlers)) {
-      const value = handler(node);
-      if (value !== undefined && value !== layoutPropDefaults[prop]) {
-        result[prop] = value;
-      }
-    }
-
-    return result;
-  });
-
-  return { transform };
-}

package/src/codegen/domain/props/stroke-props.service.ts

@@ -1,45 +0,0 @@
-import { definePropsTransformer, type PropsTransformer } from "@/codegen/core";
-import type { NormalizedHasGeometryTrait, NormalizedIsLayerTrait } from "@/normalizer";
-import type { VariableService } from "../variable.service";
-
-type StrokeTrait = NormalizedIsLayerTrait & NormalizedHasGeometryTrait;
-
-export interface StrokePropsService<T extends Record<string, any>> {
-  transform: PropsTransformer<StrokeTrait, T>;
-}
-
-export interface SeedFrameStrokeProps {
-  borderWidth?: number;
-  borderColor?: string;
-}
-
-export function createFrameStrokePropsService({
-  variableService,
-}: { variableService: VariableService }): StrokePropsService<SeedFrameStrokeProps> {
-  const transform = definePropsTransformer((node: StrokeTrait) => {
-    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: variableService.getVariableName(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})`,
-    };
-  });
-
-  return { transform };
-}

package/src/codegen/domain/props/type-style-props.service.ts

@@ -1,31 +0,0 @@
-import { definePropsTransformer, type PropsTransformer } from "@/codegen/core";
-import type { NormalizedTextNode } from "@/normalizer";
-import type { VariableService } from "../variable.service";
-
-export interface TypeStylePropsService {
-  transform: PropsTransformer<NormalizedTextNode>;
-}
-
-export function createFrameTypeStylePropsService({
-  variableService,
-}: { variableService: VariableService }) {
-  const transform = definePropsTransformer((node: NormalizedTextNode) => {
-    const fontSizeBoundVariables = node.boundVariables?.fontSize?.[0];
-    const fontStyleBoundVariables = node.boundVariables?.fontStyle?.[0];
-    const lineHeightBoundVariables = node.boundVariables?.lineHeight?.[0];
-
-    return {
-      fontSize: fontSizeBoundVariables
-        ? variableService.getVariableName(fontSizeBoundVariables.id)
-        : undefined,
-      fontWeight: fontStyleBoundVariables
-        ? variableService.getVariableName(fontStyleBoundVariables.id)
-        : undefined,
-      lineHeight: lineHeightBoundVariables
-        ? variableService.getVariableName(lineHeightBoundVariables.id)
-        : undefined,
-    };
-  });
-
-  return { transform } satisfies TypeStylePropsService;
-}

package/src/codegen/domain/rectangle.service.ts

@@ -1,31 +0,0 @@
-import type { NormalizedRectangleNode } from "@/normalizer";
-import { createElement, defineElementTransformer, type ElementTransformer } from "../core";
-import type {
-  SeedSelfLayoutProps,
-  SelfLayoutPropsService,
-} from "./props/self-layout-props.service";
-
-export interface RectangleService {
-  transform: ElementTransformer<NormalizedRectangleNode>;
-}
-
-export interface SeedRectangleServiceDeps {
-  selfLayoutPropsService: SelfLayoutPropsService<SeedSelfLayoutProps>;
-}
-
-export function createSeedRectangleService({
-  selfLayoutPropsService,
-}: SeedRectangleServiceDeps): RectangleService {
-  const transform = defineElementTransformer((node: NormalizedRectangleNode, traverse) => {
-    return createElement(
-      "Box",
-      { ...selfLayoutPropsService.transform(node, traverse), background: "palette.gray200" },
-      undefined,
-      "Rectangle Node Placeholder",
-    );
-  });
-
-  return {
-    transform,
-  };
-}