merge

.eslintrc.cjs

@@ -18,5 +18,8 @@ module.exports = {
     react: {
       version: 'detect'
     }
+  },
+  rules: {
+    '@typescript-eslint/no-unused-vars': ['error', { ignoreRestSiblings: true }]
   }
 };

plugin-src/transformers/partials/index.ts

@@ -0,0 +1 @@
+export * from './transformDimensionAndPosition';

plugin-src/transformers/partials/transformDimensionAndPosition.ts

@@ -0,0 +1,14 @@
+import { ShapeGeomAttributes } from '@ui/lib/types/shape/shapeGeomAttributes';
+
+export const transformDimensionAndPosition = (
+  node: DimensionAndPositionMixin,
+  baseX: number,
+  baseY: number
+): ShapeGeomAttributes => {
+  return {
+    x: node.x + baseX,
+    y: node.y + baseY,
+    width: node.width,
+    height: node.height
+  };
+};

plugin-src/transformers/transformEllipseNode.ts

@@ -1,3 +1,4 @@
+import { transformDimensionAndPosition } from '@plugin/transformers/partials';
 import { translateFills } from '@plugin/translators';
 
 import { CircleShape } from '@ui/lib/types/circle/circleShape';
@@ -10,10 +11,7 @@ export const transformEllipseNode = (
   return {
     type: 'circle',
     name: node.name,
-    x: node.x + baseX,
-    y: node.y + baseY,
-    width: node.width,
-    height: node.height,
-    fills: translateFills(node.fills, node.width, node.height)
+    fills: translateFills(node.fills, node.width, node.height),
+    ...transformDimensionAndPosition(node, baseX, baseY)
   };
 };

plugin-src/transformers/transformFrameNode.ts

@@ -1,3 +1,4 @@
+import { transformDimensionAndPosition } from '@plugin/transformers/partials';
 import { translateFills } from '@plugin/translators';
 
 import { FrameShape } from '@ui/lib/types/frame/frameShape';
@@ -12,13 +13,10 @@ export const transformFrameNode = async (
   return {
     type: 'frame',
     name: node.name,
-    x: node.x + baseX,
-    y: node.y + baseY,
-    width: node.width,
-    height: node.height,
     fills: translateFills(node.fills, node.width, node.height),
     children: await Promise.all(
       node.children.map(child => transformSceneNode(child, baseX + node.x, baseY + node.y))
-    )
+    ),
+    ...transformDimensionAndPosition(node, baseX, baseY)
   };
 };

plugin-src/transformers/transformGroupNode.ts

@@ -1,6 +1,8 @@
+import { transformDimensionAndPosition } from '@plugin/transformers/partials';
+
 import { GroupShape } from '@ui/lib/types/group/groupShape';
 
-import { transformSceneNode } from './transformSceneNode';
+import { transformSceneNode } from '.';
 
 export const transformGroupNode = async (
   node: GroupNode,
@@ -10,6 +12,9 @@ export const transformGroupNode = async (
   return {
     type: 'group',
     name: node.name,
-    children: await Promise.all(node.children.map(child => transformSceneNode(child, baseX, baseY)))
+    children: await Promise.all(
+      node.children.map(child => transformSceneNode(child, baseX, baseY))
+    ),
+    ...transformDimensionAndPosition(node, baseX, baseY)
   };
 };

plugin-src/transformers/transformImageNode.ts

@@ -1,3 +1,4 @@
+import { transformDimensionAndPosition } from '@plugin/transformers/partials';
 import { detectMimeType } from '@plugin/utils';
 
 import { ImageShape } from '@ui/lib/types/image/imageShape';
@@ -17,14 +18,11 @@ export const transformImageNode = async (
   return {
     type: 'image',
     name: node.name,
-    x: node.x + baseX,
-    y: node.y + baseY,
-    width: node.width,
-    height: node.height,
     metadata: {
       width: node.width,
       height: node.height
     },
-    dataUri: dataUri
+    dataUri: dataUri,
+    ...transformDimensionAndPosition(node, baseX, baseY)
   };
 };

plugin-src/transformers/transformRectangleNode.ts

@@ -1,3 +1,4 @@
+import { transformDimensionAndPosition } from '@plugin/transformers/partials';
 import { translateBlendMode, translateFills } from '@plugin/translators';
 
 import { RectShape } from '@ui/lib/types/rect/rectShape';
@@ -10,11 +11,8 @@ export const transformRectangleNode = (
   return {
     type: 'rect',
     name: node.name,
-    x: node.x + baseX,
-    y: node.y + baseY,
-    width: node.width,
-    height: node.height,
     fills: translateFills(node.fills, node.width, node.height),
-    blendMode: translateBlendMode(node.blendMode)
+    blendMode: translateBlendMode(node.blendMode),
+    ...transformDimensionAndPosition(node, baseX, baseY)
   };
 };

ui-src/converters/createPenpotArtboard.ts

@@ -6,7 +6,6 @@ import { createPenpotItem } from '.';
 
 export const createPenpotArtboard = (
   file: PenpotFile,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   { type, children = [], ...rest }: FrameShape
 ) => {
   file.addArtboard({

ui-src/converters/createPenpotCircle.ts

@@ -4,7 +4,6 @@ import { CircleShape } from '@ui/lib/types/circle/circleShape';
 
 import { translateFillGradients } from '../translators';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const createPenpotCircle = (file: PenpotFile, { type, fills, ...rest }: CircleShape) => {
   file.createCircle({
     type: CIRCLE_TYPE,

ui-src/converters/createPenpotGroup.ts

@@ -6,7 +6,6 @@ import { createPenpotItem } from '.';
 
 export const createPenpotGroup = (
   file: PenpotFile,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   { type, children = [], ...rest }: GroupShape
 ) => {
   file.addGroup({

ui-src/converters/createPenpotImage.ts

@@ -2,7 +2,6 @@ import { PenpotFile } from '@ui/lib/penpot';
 import { IMAGE_TYPE } from '@ui/lib/types/image/imageAttributes';
 import { ImageShape } from '@ui/lib/types/image/imageShape';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const createPenpotImage = (file: PenpotFile, { type, ...rest }: ImageShape) => {
   file.createImage({
     type: IMAGE_TYPE,

ui-src/converters/createPenpotText.ts

@@ -2,11 +2,7 @@ import { PenpotFile } from '@ui/lib/penpot';
 import { TEXT_TYPE } from '@ui/lib/types/text/textAttributes';
 import { TextShape } from '@ui/lib/types/text/textShape';
 
-export const createPenpotText = (
-  file: PenpotFile,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  { type, ...rest }: TextShape
-) => {
+export const createPenpotText = (file: PenpotFile, { type, ...rest }: TextShape) => {
   file.createText({
     type: TEXT_TYPE,
     ...rest

ui-src/lib/penpot.d.ts

@@ -36,8 +36,7 @@ export interface PenpotFile {
   // lookupShape(shapeId: string): void;
   // updateObject(id: string, object: any): void;
   // deleteObject(id: string): void;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  asMap(): any;
+  asMap(): unknown;
   export(): void;
 }
 

ui-src/lib/types/frame/frameAttributes.ts

@@ -1,5 +1,7 @@
 import { Uuid } from '@ui/lib/types/utils/uuid';
 
+import { Fill } from '../utils/fill';
+
 export const FRAME_TYPE: unique symbol = Symbol.for('frame');
 
 export type FrameAttributes = {
@@ -9,4 +11,5 @@ export type FrameAttributes = {
   hideFillOnExport?: boolean;
   showContent?: boolean;
   hideInViewer?: boolean;
+  fills: Fill[]; // @TODO: Discover why is not defined on Penpot types
 };