@seed-design/figma 0.0.20 → 0.0.22

package/src/codegen/targets/react/component/transformers/skeleton.ts

@@ -1,51 +0,0 @@
-import { createElement, defineComponentTransformer } from "@/codegen/core";
-import * as metadata from "@/entities/data/__generated__/component-sets";
-import { camelCase } from "change-case";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
-import type { SkeletonProperties } from "../properties.type";
-
-export const createSkeletonTransformer = (ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<SkeletonProperties>(
-    metadata.skeleton.key,
-    ({
-      componentProperties: props,
-      absoluteBoundingBox,
-      layoutSizingHorizontal,
-      layoutSizingVertical,
-      boundVariables,
-    }) => {
-      const commonProps = {
-        radius: camelCase(props.Radius.value),
-        width: (() => {
-          switch (layoutSizingHorizontal) {
-            case "FIXED": {
-              const variableId = boundVariables?.size?.x?.id;
-              if (variableId) return ctx.variableService.getVariableName(variableId);
-
-              return `${absoluteBoundingBox?.width}px`;
-            }
-            case "FILL":
-              return "full";
-            default:
-              return "full";
-          }
-        })(),
-        height: (() => {
-          switch (layoutSizingVertical) {
-            case "FIXED": {
-              const variableId = boundVariables?.size?.y?.id;
-              if (variableId) return ctx.variableService.getVariableName(variableId);
-
-              return `${absoluteBoundingBox?.height}px`;
-            }
-            case "FILL":
-              return "full";
-            default:
-              return "full";
-          }
-        })(),
-      };
-
-      return createElement("Skeleton", commonProps);
-    },
-  );

package/src/codegen/targets/react/context.ts

@@ -1,176 +0,0 @@
-import { createCodegenTransformer, createValueTransformer } from "@/codegen/core";
-import {
-  createIconService,
-  createStyleService,
-  createVariableService,
-  iconRepository,
-  styleRepository,
-  variableRepository,
-} from "@/entities";
-import { camelCasePreserveUnderscoreBetweenNumbers } from "@/utils/common";
-import { toCssPixel, toCssRgba } from "@/utils/css";
-import { camelCase } from "change-case";
-import { createSeedComponentTransformers } from "./component";
-import { createFrameTransformer } from "./frame";
-import { createInstanceTransformer } from "./instance";
-import {
-  createContainerLayoutPropsTransformer,
-  createFrameFillPropsTransformer,
-  createIconSelfLayoutPropsTransformer,
-  createRadiusPropsTransformer,
-  createSelfLayoutPropsTransformer,
-  createShapeFillPropsTransformer,
-  createStrokePropsTransformer,
-  createTextFillPropsTransformer,
-  createTypeStylePropsTransformer,
-} from "./props";
-import {
-  createBooleanOperationTransformer,
-  createRectangleTransformer,
-  createVectorTransformer,
-} from "./shape";
-import { createTextTransformer } from "./text";
-
-const IGNORED_COMPONENT_KEYS = new Set<string>([
-  "1acdc7247c83a73a0504d6fad86d08783938cb1a",
-  "b38b719b61cdf1a24458d7a7888bee74b7649084",
-]);
-
-export interface CreateContextOptions {
-  ignoredComponentKeys?: Set<string>;
-  shouldInferVariableName: boolean;
-  shouldInferAutoLayout: boolean;
-}
-
-const styleService = createStyleService({
-  styleRepository,
-  styleNameTransformer: ({ slug }) =>
-    camelCase(slug[slug.length - 1]!, { mergeAmbiguousCharacters: true }),
-});
-const variableService = createVariableService({
-  variableRepository,
-  variableNameTransformer: ({ slug }) =>
-    slug
-      .filter(
-        (s) =>
-          !(
-            s === "dimension" ||
-            s === "radius" ||
-            s === "font-size" ||
-            s === "font-weight" ||
-            s === "line-height"
-          ),
-      )
-      .map((s) => s.replaceAll(",", "_"))
-      .map(camelCasePreserveUnderscoreBetweenNumbers)
-      .join("."),
-  inferCompareFunction: (name1: string, name2: string) => {
-    const scoreFn = (name: string) => {
-      let score = 0;
-      if (name.includes("bg")) {
-        score += 100;
-      }
-      if (name.includes("fg")) {
-        score += 100;
-      }
-      if (name.includes("stroke")) {
-        score += 100;
-      }
-      if (name.includes("spacing-x")) {
-        score -= 100;
-      }
-      if (name.includes("spacing-y")) {
-        score -= 100;
-      }
-      if (name.endsWith("pressed")) {
-        score -= 100;
-      }
-      return score;
-    };
-
-    return scoreFn(name2) - scoreFn(name1);
-  },
-});
-const iconService = createIconService({
-  iconRepository,
-});
-
-// TODO: implement figma component service
-const componentTransformers = createSeedComponentTransformers({
-  iconService,
-  variableService,
-});
-
-export function createContext(options: CreateContextOptions) {
-  const {
-    ignoredComponentKeys = IGNORED_COMPONENT_KEYS,
-    shouldInferVariableName,
-    shouldInferAutoLayout,
-  } = options;
-
-  const valueTransformer = createValueTransformer({
-    variableService,
-    formatters: {
-      color: (value: RGBA) => toCssRgba(value),
-      dimension: (value: number) => toCssPixel(value),
-      fontDimension: (value: number) => toCssPixel(value),
-      fontWeight: (value: number) => value,
-    },
-    shouldInferVariableName,
-  });
-
-  const containerLayoutPropsTransformer = createContainerLayoutPropsTransformer(valueTransformer);
-  const selfLayoutPropsTransformer = createSelfLayoutPropsTransformer(valueTransformer);
-  const iconSelfLayoutPropsTransformer = createIconSelfLayoutPropsTransformer(valueTransformer);
-  const frameFillPropsTransformer = createFrameFillPropsTransformer(valueTransformer);
-  const shapeFillPropsTransformer = createShapeFillPropsTransformer(valueTransformer);
-  const textFillPropsTransformer = createTextFillPropsTransformer(valueTransformer);
-  const radiusPropsTransformer = createRadiusPropsTransformer(valueTransformer);
-  const strokePropsTransformer = createStrokePropsTransformer(valueTransformer);
-  const typeStylePropsTransformer = createTypeStylePropsTransformer({
-    valueTransformer,
-    styleService,
-  });
-  const propsTransformers = {
-    containerLayout: containerLayoutPropsTransformer,
-    selfLayout: selfLayoutPropsTransformer,
-    iconSelfLayout: iconSelfLayoutPropsTransformer,
-    frameFill: frameFillPropsTransformer,
-    shapeFill: shapeFillPropsTransformer,
-    textFill: textFillPropsTransformer,
-    radius: radiusPropsTransformer,
-    stroke: strokePropsTransformer,
-    typeStyle: typeStylePropsTransformer,
-  };
-
-  const frameTransformer = createFrameTransformer({
-    propsTransformers,
-  });
-  const instanceTransformer = createInstanceTransformer({
-    iconService,
-    ignoredComponentKeys,
-    propsTransformers,
-    componentTransformers,
-    frameTransformer,
-  });
-  const textTransformer = createTextTransformer({
-    propsTransformers,
-  });
-  const rectangleTransformer = createRectangleTransformer({
-    propsTransformers,
-  });
-  const vectorTransformer = createVectorTransformer();
-  const booleanOperationTransformer = createBooleanOperationTransformer();
-
-  const codegenTransformer = createCodegenTransformer({
-    frameTransformer,
-    textTransformer,
-    rectangleTransformer,
-    instanceTransformer,
-    vectorTransformer,
-    booleanOperationTransformer,
-    shouldInferAutoLayout,
-  });
-
-  return codegenTransformer;
-}