From 3738c3cc4ffa9960d43b862ffc7b2a0b49d2368d Mon Sep 17 00:00:00 2001 From: Jordi Sala Morales Date: Mon, 15 Apr 2024 11:36:37 +0000 Subject: [PATCH 1/3] avoid eslint errors --- .eslintrc.cjs | 3 +++ ui-src/converters/createPenpotArtboard.ts | 1 - ui-src/converters/createPenpotCircle.ts | 1 - ui-src/converters/createPenpotGroup.ts | 1 - ui-src/converters/createPenpotImage.ts | 1 - ui-src/converters/createPenpotRectangle.ts | 1 - ui-src/converters/createPenpotText.ts | 6 +----- ui-src/lib/penpot.d.ts | 3 +-- 8 files changed, 5 insertions(+), 12 deletions(-) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 91ca33b..9382192 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -18,5 +18,8 @@ module.exports = { react: { version: 'detect' } + }, + rules: { + '@typescript-eslint/no-unused-vars': ['error', { ignoreRestSiblings: true }] } }; diff --git a/ui-src/converters/createPenpotArtboard.ts b/ui-src/converters/createPenpotArtboard.ts index ac2307b..3614fd4 100644 --- a/ui-src/converters/createPenpotArtboard.ts +++ b/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({ diff --git a/ui-src/converters/createPenpotCircle.ts b/ui-src/converters/createPenpotCircle.ts index 6ac9ee3..a6101d4 100644 --- a/ui-src/converters/createPenpotCircle.ts +++ b/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, diff --git a/ui-src/converters/createPenpotGroup.ts b/ui-src/converters/createPenpotGroup.ts index 36770b2..33e639c 100644 --- a/ui-src/converters/createPenpotGroup.ts +++ b/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({ diff --git a/ui-src/converters/createPenpotImage.ts b/ui-src/converters/createPenpotImage.ts index 18d400d..bb038a6 100644 --- a/ui-src/converters/createPenpotImage.ts +++ b/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, diff --git a/ui-src/converters/createPenpotRectangle.ts b/ui-src/converters/createPenpotRectangle.ts index 63f9793..c84e418 100644 --- a/ui-src/converters/createPenpotRectangle.ts +++ b/ui-src/converters/createPenpotRectangle.ts @@ -3,7 +3,6 @@ import { RECT_TYPE } from '@ui/lib/types/rect/rectAttributes'; import { RectShape } from '@ui/lib/types/rect/rectShape'; import { translateFillGradients } from '@ui/translators'; -// eslint-disable-next-line @typescript-eslint/no-unused-vars export const createPenpotRectangle = (file: PenpotFile, { type, fills, ...rest }: RectShape) => { file.createRect({ type: RECT_TYPE, diff --git a/ui-src/converters/createPenpotText.ts b/ui-src/converters/createPenpotText.ts index 11f11d9..568e9ec 100644 --- a/ui-src/converters/createPenpotText.ts +++ b/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 diff --git a/ui-src/lib/penpot.d.ts b/ui-src/lib/penpot.d.ts index d3f2725..bf0fbc7 100644 --- a/ui-src/lib/penpot.d.ts +++ b/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; } From e6a86795e69d71e80ece160adf4c981c1c8a6f5d Mon Sep 17 00:00:00 2001 From: Jordi Sala Morales Date: Mon, 15 Apr 2024 11:48:04 +0000 Subject: [PATCH 2/3] fix things related to types --- plugin-src/transformers/transformGroupNode.ts | 4 ++++ ui-src/lib/types/frame/frameAttributes.ts | 3 +++ 2 files changed, 7 insertions(+) diff --git a/plugin-src/transformers/transformGroupNode.ts b/plugin-src/transformers/transformGroupNode.ts index 0925a7f..ea5540e 100644 --- a/plugin-src/transformers/transformGroupNode.ts +++ b/plugin-src/transformers/transformGroupNode.ts @@ -10,6 +10,10 @@ export const transformGroupNode = async ( return { type: 'group', name: node.name, + x: node.x + baseX, + y: node.y + baseY, + width: node.width, + height: node.height, children: await Promise.all(node.children.map(child => transformSceneNode(child, baseX, baseY))) }; }; diff --git a/ui-src/lib/types/frame/frameAttributes.ts b/ui-src/lib/types/frame/frameAttributes.ts index d828ff5..f9e7d14 100644 --- a/ui-src/lib/types/frame/frameAttributes.ts +++ b/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 }; From 590a3f7c62de5beae1f1f90523f72f30721d0c5f Mon Sep 17 00:00:00 2001 From: Jordi Sala Morales Date: Mon, 15 Apr 2024 11:58:51 +0000 Subject: [PATCH 3/3] Implement partial transformers --- plugin-src/transformers/partials/index.ts | 1 + .../partials/transformDimensionAndPosition.ts | 14 ++++++++++++++ plugin-src/transformers/transformEllipseNode.ts | 8 +++----- plugin-src/transformers/transformFrameNode.ts | 8 +++----- plugin-src/transformers/transformGroupNode.ts | 13 +++++++------ plugin-src/transformers/transformImageNode.ts | 8 +++----- plugin-src/transformers/transformRectangleNode.ts | 8 +++----- 7 files changed, 34 insertions(+), 26 deletions(-) create mode 100644 plugin-src/transformers/partials/index.ts create mode 100644 plugin-src/transformers/partials/transformDimensionAndPosition.ts diff --git a/plugin-src/transformers/partials/index.ts b/plugin-src/transformers/partials/index.ts new file mode 100644 index 0000000..c38a8eb --- /dev/null +++ b/plugin-src/transformers/partials/index.ts @@ -0,0 +1 @@ +export * from './transformDimensionAndPosition'; diff --git a/plugin-src/transformers/partials/transformDimensionAndPosition.ts b/plugin-src/transformers/partials/transformDimensionAndPosition.ts new file mode 100644 index 0000000..68e17fb --- /dev/null +++ b/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 + }; +}; diff --git a/plugin-src/transformers/transformEllipseNode.ts b/plugin-src/transformers/transformEllipseNode.ts index 5134ae7..7d6f5eb 100644 --- a/plugin-src/transformers/transformEllipseNode.ts +++ b/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) }; }; diff --git a/plugin-src/transformers/transformFrameNode.ts b/plugin-src/transformers/transformFrameNode.ts index 7aa8574..ec3d340 100644 --- a/plugin-src/transformers/transformFrameNode.ts +++ b/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) }; }; diff --git a/plugin-src/transformers/transformGroupNode.ts b/plugin-src/transformers/transformGroupNode.ts index ea5540e..998c827 100644 --- a/plugin-src/transformers/transformGroupNode.ts +++ b/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,10 +12,9 @@ export const transformGroupNode = async ( return { type: 'group', name: node.name, - x: node.x + baseX, - y: node.y + baseY, - width: node.width, - height: node.height, - 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) }; }; diff --git a/plugin-src/transformers/transformImageNode.ts b/plugin-src/transformers/transformImageNode.ts index 622d337..01c16c3 100644 --- a/plugin-src/transformers/transformImageNode.ts +++ b/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) }; }; diff --git a/plugin-src/transformers/transformRectangleNode.ts b/plugin-src/transformers/transformRectangleNode.ts index 9d63fb0..53b58fc 100644 --- a/plugin-src/transformers/transformRectangleNode.ts +++ b/plugin-src/transformers/transformRectangleNode.ts @@ -1,3 +1,4 @@ +import { transformDimensionAndPosition } from '@plugin/transformers/partials'; import { translateFills } from '@plugin/translators'; import { RectShape } from '@ui/lib/types/rect/rectShape'; @@ -10,10 +11,7 @@ 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) + fills: translateFills(node.fills, node.width, node.height), + ...transformDimensionAndPosition(node, baseX, baseY) }; };