From ded8b1c657eebfc6d285c3158215ebdeabd27074 Mon Sep 17 00:00:00 2001 From: Jordi Sala Morales Date: Fri, 12 Apr 2024 16:52:36 +0200 Subject: [PATCH] Add typescript aliases for imports (#16) --- package-lock.json | 143 +++++++++++++++++- package.json | 15 +- prettier.config.mjs | 2 +- src/plugin/code.ts | 6 +- .../messageHandlers/handleExportMessage.ts | 2 +- .../transformers/transformDocumentNode.ts | 5 +- .../transformers/transformEllipseNode.ts | 5 +- src/plugin/transformers/transformFrameNode.ts | 8 +- src/plugin/transformers/transformGroupNode.ts | 3 +- src/plugin/transformers/transformImageNode.ts | 5 +- src/plugin/transformers/transformPageNode.ts | 5 +- .../transformers/transformRectangleNode.ts | 5 +- src/plugin/transformers/transformSceneNode.ts | 6 +- src/plugin/transformers/transformTextNode.ts | 11 +- src/plugin/translators/translateFills.ts | 3 +- .../translateGradientLinearFill.ts | 5 +- src/plugin/translators/translateSolidFill.ts | 5 +- src/ui/PenpotExporter.tsx | 6 +- src/ui/converters/createGradientFill.ts | 2 +- src/ui/converters/createPenpotArtboard.ts | 9 +- src/ui/converters/createPenpotCircle.ts | 8 +- src/ui/converters/createPenpotFile.ts | 5 +- src/ui/converters/createPenpotGroup.ts | 9 +- src/ui/converters/createPenpotImage.ts | 6 +- src/ui/converters/createPenpotItem.ts | 5 +- src/ui/converters/createPenpotPage.ts | 5 +- src/ui/converters/createPenpotRectangle.ts | 8 +- src/ui/converters/createPenpotText.ts | 6 +- src/ui/lib/penpot.d.ts | 17 ++- src/ui/lib/types/bool/boolAttributes.d.ts | 3 +- src/ui/lib/types/bool/boolContent.d.ts | 2 +- src/ui/lib/types/bool/boolShape.d.ts | 3 +- src/ui/lib/types/circle/circleAttributes.ts | 2 +- src/ui/lib/types/circle/circleShape.d.ts | 3 +- src/ui/lib/types/frame/frameAttributes.ts | 2 +- src/ui/lib/types/frame/frameShape.d.ts | 5 +- src/ui/lib/types/group/groupAttributes.ts | 2 +- src/ui/lib/types/group/groupShape.d.ts | 5 +- src/ui/lib/types/image/imageAttributes.ts | 2 +- src/ui/lib/types/image/imageShape.d.ts | 3 +- src/ui/lib/types/penpotNode.d.ts | 12 +- src/ui/lib/types/rect/rectAttributes.ts | 2 +- src/ui/lib/types/rect/rectShape.d.ts | 3 +- src/ui/lib/types/shape.d.ts | 20 +-- src/ui/lib/types/text/textAttributes.ts | 3 +- src/ui/lib/types/text/textContent.d.ts | 2 +- src/ui/lib/types/text/textShape.d.ts | 3 +- src/ui/lib/types/utils/children.d.ts | 2 +- src/ui/translators/translateFillGradients.ts | 4 +- src/ui/validators/validateFont.ts | 2 +- tsconfig.json | 6 +- webpack.config.cjs | 7 +- 52 files changed, 297 insertions(+), 121 deletions(-) diff --git a/package-lock.json b/package-lock.json index 574d0c2..8fc567f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,21 +9,21 @@ "version": "0.0.1", "license": "MPL2.0", "dependencies": { - "@figma-plugin/helpers": "^0.15.2", + "@figma-plugin/helpers": "^0.15", "react": "^18.2", "react-dom": "^18.2", "slugify": "^1.6" }, "devDependencies": { - "@figma/eslint-plugin-figma-plugins": "^0.15.0", - "@figma/plugin-typings": "^1.90.0", + "@figma/eslint-plugin-figma-plugins": "^0.15", + "@figma/plugin-typings": "^1.90", "@trivago/prettier-plugin-sort-imports": "^4.3", "@types/react": "^18.2", "@types/react-dom": "^18.2", - "@typescript-eslint/eslint-plugin": "^7.5.0", - "@typescript-eslint/parser": "^7.5.0", + "@typescript-eslint/eslint-plugin": "^7.5", + "@typescript-eslint/parser": "^7.5", "css-loader": "^6.10", - "eslint": "^8.57.0", + "eslint": "^8.57", "eslint-config-prettier": "^9.1", "eslint-plugin-prettier": "^5.1", "eslint-plugin-react": "^7.34", @@ -36,7 +36,8 @@ "stylelint": "^16.3", "stylelint-config-standard": "^36.0", "ts-loader": "^9.5", - "typescript": "^5.4.4", + "tsconfig-paths-webpack-plugin": "^4.1", + "typescript": "^5.4", "webpack": "^5.91", "webpack-cli": "^5.1" } @@ -4527,6 +4528,18 @@ "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==", "dev": true }, + "node_modules/json5": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", + "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", + "dev": true, + "bin": { + "json5": "lib/cli.js" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/jsonfile": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", @@ -4806,6 +4819,15 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/minimist": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz", + "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==", + "dev": true, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -6473,6 +6495,15 @@ "node": ">=8" } }, + "node_modules/strip-bom": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz", + "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==", + "dev": true, + "engines": { + "node": ">=4" + } + }, "node_modules/strip-json-comments": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz", @@ -7019,6 +7050,104 @@ "node": ">=8" } }, + "node_modules/tsconfig-paths": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz", + "integrity": "sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==", + "dev": true, + "dependencies": { + "json5": "^2.2.2", + "minimist": "^1.2.6", + "strip-bom": "^3.0.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/tsconfig-paths-webpack-plugin": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/tsconfig-paths-webpack-plugin/-/tsconfig-paths-webpack-plugin-4.1.0.tgz", + "integrity": "sha512-xWFISjviPydmtmgeUAuXp4N1fky+VCtfhOkDUFIv5ea7p4wuTomI4QTrXvFBX2S4jZsmyTSrStQl+E+4w+RzxA==", + "dev": true, + "dependencies": { + "chalk": "^4.1.0", + "enhanced-resolve": "^5.7.0", + "tsconfig-paths": "^4.1.2" + }, + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/tsconfig-paths-webpack-plugin/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/tsconfig-paths-webpack-plugin/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/tsconfig-paths-webpack-plugin/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/tsconfig-paths-webpack-plugin/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "node_modules/tsconfig-paths-webpack-plugin/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/tsconfig-paths-webpack-plugin/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/tslib": { "version": "2.6.2", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", diff --git a/package.json b/package.json index f94a36a..1956a96 100644 --- a/package.json +++ b/package.json @@ -20,21 +20,21 @@ "author": "Kaleidos", "license": "MPL2.0", "dependencies": { - "@figma-plugin/helpers": "^0.15.2", + "@figma-plugin/helpers": "^0.15", "react": "^18.2", "react-dom": "^18.2", "slugify": "^1.6" }, "devDependencies": { - "@figma/eslint-plugin-figma-plugins": "^0.15.0", - "@figma/plugin-typings": "^1.90.0", + "@figma/eslint-plugin-figma-plugins": "^0.15", + "@figma/plugin-typings": "^1.90", "@trivago/prettier-plugin-sort-imports": "^4.3", "@types/react": "^18.2", "@types/react-dom": "^18.2", - "@typescript-eslint/eslint-plugin": "^7.5.0", - "@typescript-eslint/parser": "^7.5.0", + "@typescript-eslint/eslint-plugin": "^7.5", + "@typescript-eslint/parser": "^7.5", "css-loader": "^6.10", - "eslint": "^8.57.0", + "eslint": "^8.57", "eslint-config-prettier": "^9.1", "eslint-plugin-prettier": "^5.1", "eslint-plugin-react": "^7.34", @@ -47,7 +47,8 @@ "stylelint": "^16.3", "stylelint-config-standard": "^36.0", "ts-loader": "^9.5", - "typescript": "^5.4.4", + "tsconfig-paths-webpack-plugin": "^4.1", + "typescript": "^5.4", "webpack": "^5.91", "webpack-cli": "^5.1" } diff --git a/prettier.config.mjs b/prettier.config.mjs index 77e9be5..de1e896 100644 --- a/prettier.config.mjs +++ b/prettier.config.mjs @@ -11,7 +11,7 @@ const config = { trailingComma: 'none', useTabs: false, plugins: ['@trivago/prettier-plugin-sort-imports'], - importOrder: ['^[./]'], + importOrder: ['^@plugin/(.*)$', '^@ui/(.*)$', '^[./]'], importOrderSeparation: true, importOrderSortSpecifiers: true }; diff --git a/src/plugin/code.ts b/src/plugin/code.ts index 9c78fcb..b11ffdf 100644 --- a/src/plugin/code.ts +++ b/src/plugin/code.ts @@ -1,4 +1,8 @@ -import { handleCancelMessage, handleExportMessage, handleResizeMessage } from './messageHandlers'; +import { + handleCancelMessage, + handleExportMessage, + handleResizeMessage +} from '@plugin/messageHandlers'; figma.showUI(__html__, { themeColors: true, height: 200, width: 300 }); diff --git a/src/plugin/messageHandlers/handleExportMessage.ts b/src/plugin/messageHandlers/handleExportMessage.ts index b00a050..3d33147 100644 --- a/src/plugin/messageHandlers/handleExportMessage.ts +++ b/src/plugin/messageHandlers/handleExportMessage.ts @@ -1,4 +1,4 @@ -import { transformDocumentNode } from '../transformers'; +import { transformDocumentNode } from '@plugin/transformers'; export async function handleExportMessage() { await figma.loadAllPagesAsync(); diff --git a/src/plugin/transformers/transformDocumentNode.ts b/src/plugin/transformers/transformDocumentNode.ts index c268c37..60c7997 100644 --- a/src/plugin/transformers/transformDocumentNode.ts +++ b/src/plugin/transformers/transformDocumentNode.ts @@ -1,5 +1,6 @@ -import { PenpotDocument } from '../../ui/lib/types/penpotDocument'; -import { transformPageNode } from './transformPageNode'; +import { PenpotDocument } from '@ui/lib/types/penpotDocument'; + +import { transformPageNode } from '.'; export const transformDocumentNode = async (node: DocumentNode): Promise => { return { diff --git a/src/plugin/transformers/transformEllipseNode.ts b/src/plugin/transformers/transformEllipseNode.ts index 9e21006..5134ae7 100644 --- a/src/plugin/transformers/transformEllipseNode.ts +++ b/src/plugin/transformers/transformEllipseNode.ts @@ -1,5 +1,6 @@ -import { CircleShape } from '../../ui/lib/types/circle/circleShape'; -import { translateFills } from '../translators/translateFills'; +import { translateFills } from '@plugin/translators'; + +import { CircleShape } from '@ui/lib/types/circle/circleShape'; export const transformEllipseNode = ( node: EllipseNode, diff --git a/src/plugin/transformers/transformFrameNode.ts b/src/plugin/transformers/transformFrameNode.ts index de90e23..7aa8574 100644 --- a/src/plugin/transformers/transformFrameNode.ts +++ b/src/plugin/transformers/transformFrameNode.ts @@ -1,6 +1,8 @@ -import { FrameShape } from '../../ui/lib/types/frame/frameShape'; -import { translateFills } from '../translators/translateFills'; -import { transformSceneNode } from './transformSceneNode'; +import { translateFills } from '@plugin/translators'; + +import { FrameShape } from '@ui/lib/types/frame/frameShape'; + +import { transformSceneNode } from '.'; export const transformFrameNode = async ( node: FrameNode, diff --git a/src/plugin/transformers/transformGroupNode.ts b/src/plugin/transformers/transformGroupNode.ts index 26f2e76..0925a7f 100644 --- a/src/plugin/transformers/transformGroupNode.ts +++ b/src/plugin/transformers/transformGroupNode.ts @@ -1,4 +1,5 @@ -import { GroupShape } from '../../ui/lib/types/group/groupShape'; +import { GroupShape } from '@ui/lib/types/group/groupShape'; + import { transformSceneNode } from './transformSceneNode'; export const transformGroupNode = async ( diff --git a/src/plugin/transformers/transformImageNode.ts b/src/plugin/transformers/transformImageNode.ts index 028689b..622d337 100644 --- a/src/plugin/transformers/transformImageNode.ts +++ b/src/plugin/transformers/transformImageNode.ts @@ -1,5 +1,6 @@ -import { ImageShape } from '../../ui/lib/types/image/imageShape'; -import { detectMimeType } from '../utils'; +import { detectMimeType } from '@plugin/utils'; + +import { ImageShape } from '@ui/lib/types/image/imageShape'; export const transformImageNode = async ( node: SceneNode, diff --git a/src/plugin/transformers/transformPageNode.ts b/src/plugin/transformers/transformPageNode.ts index a32681f..b995c43 100644 --- a/src/plugin/transformers/transformPageNode.ts +++ b/src/plugin/transformers/transformPageNode.ts @@ -1,5 +1,6 @@ -import { PenpotPage } from '../../ui/lib/types/penpotPage'; -import { transformSceneNode } from './transformSceneNode'; +import { PenpotPage } from '@ui/lib/types/penpotPage'; + +import { transformSceneNode } from '.'; export const transformPageNode = async (node: PageNode): Promise => { return { diff --git a/src/plugin/transformers/transformRectangleNode.ts b/src/plugin/transformers/transformRectangleNode.ts index 798baf2..9d63fb0 100644 --- a/src/plugin/transformers/transformRectangleNode.ts +++ b/src/plugin/transformers/transformRectangleNode.ts @@ -1,5 +1,6 @@ -import { RectShape } from '../../ui/lib/types/rect/rectShape'; -import { translateFills } from '../translators/translateFills'; +import { translateFills } from '@plugin/translators'; + +import { RectShape } from '@ui/lib/types/rect/rectShape'; export const transformRectangleNode = ( node: RectangleNode, diff --git a/src/plugin/transformers/transformSceneNode.ts b/src/plugin/transformers/transformSceneNode.ts index 921e7fa..ecbee57 100644 --- a/src/plugin/transformers/transformSceneNode.ts +++ b/src/plugin/transformers/transformSceneNode.ts @@ -1,3 +1,7 @@ +import { calculateAdjustment } from '@plugin/utils'; + +import { PenpotNode } from '@ui/lib/types/penpotNode'; + import { transformEllipseNode, transformFrameNode, @@ -6,8 +10,6 @@ import { transformRectangleNode, transformTextNode } from '.'; -import { PenpotNode } from '../../ui/lib/types/penpotNode'; -import { calculateAdjustment } from '../utils'; export const transformSceneNode = async ( node: SceneNode, diff --git a/src/plugin/transformers/transformTextNode.ts b/src/plugin/transformers/transformTextNode.ts index 2d61ccf..e699e41 100644 --- a/src/plugin/transformers/transformTextNode.ts +++ b/src/plugin/transformers/transformTextNode.ts @@ -1,6 +1,11 @@ -import { TextNode as PenpotTextNode } from '../../ui/lib/types/text/textContent'; -import { TextShape } from '../../ui/lib/types/text/textShape'; -import { translateFills, translateTextDecoration, translateTextTransform } from '../translators'; +import { + translateFills, + translateTextDecoration, + translateTextTransform +} from '@plugin/translators'; + +import { TextNode as PenpotTextNode } from '@ui/lib/types/text/textContent'; +import { TextShape } from '@ui/lib/types/text/textShape'; export const transformTextNode = (node: TextNode, baseX: number, baseY: number): TextShape => { const styledTextSegments = node.getStyledTextSegments([ diff --git a/src/plugin/translators/translateFills.ts b/src/plugin/translators/translateFills.ts index 0188b71..8be07be 100644 --- a/src/plugin/translators/translateFills.ts +++ b/src/plugin/translators/translateFills.ts @@ -1,4 +1,5 @@ -import { Fill } from '../../ui/lib/types/utils/fill'; +import { Fill } from '@ui/lib/types/utils/fill'; + // import { translateGradientLinearFill } from './translateGradientLinearFill'; import { translateSolidFill } from './translateSolidFill'; diff --git a/src/plugin/translators/translateGradientLinearFill.ts b/src/plugin/translators/translateGradientLinearFill.ts index adf358e..db2028d 100644 --- a/src/plugin/translators/translateGradientLinearFill.ts +++ b/src/plugin/translators/translateGradientLinearFill.ts @@ -1,7 +1,8 @@ import { extractLinearGradientParamsFromTransform } from '@figma-plugin/helpers'; -import { Fill } from '../../ui/lib/types/utils/fill'; -import { rgbToHex } from '../utils'; +import { rgbToHex } from '@plugin/utils'; + +import { Fill } from '@ui/lib/types/utils/fill'; export const translateGradientLinearFill = ( fill: GradientPaint, diff --git a/src/plugin/translators/translateSolidFill.ts b/src/plugin/translators/translateSolidFill.ts index 57eef9f..aebddab 100644 --- a/src/plugin/translators/translateSolidFill.ts +++ b/src/plugin/translators/translateSolidFill.ts @@ -1,5 +1,6 @@ -import { Fill } from '../../ui/lib/types/utils/fill'; -import { rgbToHex } from '../utils'; +import { rgbToHex } from '@plugin/utils'; + +import { Fill } from '@ui/lib/types/utils/fill'; export const translateSolidFill = (fill: SolidPaint): Fill => { return { diff --git a/src/ui/PenpotExporter.tsx b/src/ui/PenpotExporter.tsx index 13446e1..344e70d 100644 --- a/src/ui/PenpotExporter.tsx +++ b/src/ui/PenpotExporter.tsx @@ -1,9 +1,9 @@ import { useEffect, useState } from 'react'; import slugify from 'slugify'; -import { createPenpotFile } from './converters'; -import { PenpotDocument } from './lib/types/penpotDocument'; -import { validateFont } from './validators'; +import { createPenpotFile } from '@ui/converters'; +import { PenpotDocument } from '@ui/lib/types/penpotDocument'; +import { validateFont } from '@ui/validators'; export const PenpotExporter = () => { const [missingFonts, setMissingFonts] = useState(new Set()); diff --git a/src/ui/converters/createGradientFill.ts b/src/ui/converters/createGradientFill.ts index fca0b1a..fe2023a 100644 --- a/src/ui/converters/createGradientFill.ts +++ b/src/ui/converters/createGradientFill.ts @@ -1,4 +1,4 @@ -import { Gradient, LINEAR_TYPE, RADIAL_TYPE } from '../lib/types/utils/gradient'; +import { Gradient, LINEAR_TYPE, RADIAL_TYPE } from '@ui/lib/types/utils/gradient'; export const createGradientFill = ({ type, ...rest }: Gradient): Gradient => { switch (type) { diff --git a/src/ui/converters/createPenpotArtboard.ts b/src/ui/converters/createPenpotArtboard.ts index 79f4486..ac2307b 100644 --- a/src/ui/converters/createPenpotArtboard.ts +++ b/src/ui/converters/createPenpotArtboard.ts @@ -1,7 +1,8 @@ -import { PenpotFile } from '../lib/penpot'; -import { FRAME_TYPE } from '../lib/types/frame/frameAttributes'; -import { FrameShape } from '../lib/types/frame/frameShape'; -import { createPenpotItem } from './createPenpotItem'; +import { PenpotFile } from '@ui/lib/penpot'; +import { FRAME_TYPE } from '@ui/lib/types/frame/frameAttributes'; +import { FrameShape } from '@ui/lib/types/frame/frameShape'; + +import { createPenpotItem } from '.'; export const createPenpotArtboard = ( file: PenpotFile, diff --git a/src/ui/converters/createPenpotCircle.ts b/src/ui/converters/createPenpotCircle.ts index 468a736..6332066 100644 --- a/src/ui/converters/createPenpotCircle.ts +++ b/src/ui/converters/createPenpotCircle.ts @@ -1,7 +1,7 @@ -import { PenpotFile } from '../lib/penpot'; -import { CIRCLE_TYPE } from '../lib/types/circle/circleAttributes'; -import { CircleShape } from '../lib/types/circle/circleShape'; -import { translateFillGradients } from '../translators'; +import { PenpotFile } from '@ui/lib/penpot'; +import { CIRCLE_TYPE } from '@ui/lib/types/circle/circleAttributes'; +import { CircleShape } from '@ui/lib/types/circle/circleShape'; +import { translateFillGradients } from '@ui/translators'; // eslint-disable-next-line @typescript-eslint/no-unused-vars export const createPenpotCircle = (file: PenpotFile, { type, fills, ...rest }: CircleShape) => { diff --git a/src/ui/converters/createPenpotFile.ts b/src/ui/converters/createPenpotFile.ts index 28b2e31..7325bac 100644 --- a/src/ui/converters/createPenpotFile.ts +++ b/src/ui/converters/createPenpotFile.ts @@ -1,6 +1,7 @@ +import { createFile } from '@ui/lib/penpot.js'; +import { PenpotDocument } from '@ui/lib/types/penpotDocument'; + import { createPenpotPage } from '.'; -import { createFile } from '../lib/penpot'; -import { PenpotDocument } from '../lib/types/penpotDocument'; export const createPenpotFile = (node: PenpotDocument) => { const file = createFile(node.name); diff --git a/src/ui/converters/createPenpotGroup.ts b/src/ui/converters/createPenpotGroup.ts index 764dc63..36770b2 100644 --- a/src/ui/converters/createPenpotGroup.ts +++ b/src/ui/converters/createPenpotGroup.ts @@ -1,7 +1,8 @@ -import { PenpotFile } from '../lib/penpot'; -import { GROUP_TYPE } from '../lib/types/group/groupAttributes'; -import { GroupShape } from '../lib/types/group/groupShape'; -import { createPenpotItem } from './createPenpotItem'; +import { PenpotFile } from '@ui/lib/penpot'; +import { GROUP_TYPE } from '@ui/lib/types/group/groupAttributes'; +import { GroupShape } from '@ui/lib/types/group/groupShape'; + +import { createPenpotItem } from '.'; export const createPenpotGroup = ( file: PenpotFile, diff --git a/src/ui/converters/createPenpotImage.ts b/src/ui/converters/createPenpotImage.ts index 0218da7..18d400d 100644 --- a/src/ui/converters/createPenpotImage.ts +++ b/src/ui/converters/createPenpotImage.ts @@ -1,6 +1,6 @@ -import { PenpotFile } from '../lib/penpot'; -import { IMAGE_TYPE } from '../lib/types/image/imageAttributes'; -import { ImageShape } from '../lib/types/image/imageShape'; +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) => { diff --git a/src/ui/converters/createPenpotItem.ts b/src/ui/converters/createPenpotItem.ts index 3c38dc2..7d0ed9f 100644 --- a/src/ui/converters/createPenpotItem.ts +++ b/src/ui/converters/createPenpotItem.ts @@ -1,3 +1,6 @@ +import { PenpotFile } from '@ui/lib/penpot'; +import { PenpotNode } from '@ui/lib/types/penpotNode'; + import { createPenpotArtboard, createPenpotCircle, @@ -6,8 +9,6 @@ import { createPenpotRectangle, createPenpotText } from '.'; -import { PenpotFile } from '../lib/penpot'; -import { PenpotNode } from '../lib/types/penpotNode'; export const createPenpotItem = (file: PenpotFile, node: PenpotNode) => { switch (node.type) { diff --git a/src/ui/converters/createPenpotPage.ts b/src/ui/converters/createPenpotPage.ts index f3c16fa..0007af4 100644 --- a/src/ui/converters/createPenpotPage.ts +++ b/src/ui/converters/createPenpotPage.ts @@ -1,6 +1,7 @@ +import { PenpotFile } from '@ui/lib/penpot'; +import { PenpotPage } from '@ui/lib/types/penpotPage'; + import { createPenpotItem } from '.'; -import { PenpotFile } from '../lib/penpot'; -import { PenpotPage } from '../lib/types/penpotPage'; export const createPenpotPage = (file: PenpotFile, node: PenpotPage) => { file.addPage(node.name); diff --git a/src/ui/converters/createPenpotRectangle.ts b/src/ui/converters/createPenpotRectangle.ts index d79a13b..63f9793 100644 --- a/src/ui/converters/createPenpotRectangle.ts +++ b/src/ui/converters/createPenpotRectangle.ts @@ -1,7 +1,7 @@ -import { PenpotFile } from '../lib/penpot'; -import { RECT_TYPE } from '../lib/types/rect/rectAttributes'; -import { RectShape } from '../lib/types/rect/rectShape'; -import { translateFillGradients } from '../translators'; +import { PenpotFile } from '@ui/lib/penpot'; +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) => { diff --git a/src/ui/converters/createPenpotText.ts b/src/ui/converters/createPenpotText.ts index 3d58357..11f11d9 100644 --- a/src/ui/converters/createPenpotText.ts +++ b/src/ui/converters/createPenpotText.ts @@ -1,6 +1,6 @@ -import { PenpotFile } from '../lib/penpot'; -import { TEXT_TYPE } from '../lib/types/text/textAttributes'; -import { TextShape } from '../lib/types/text/textShape'; +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, diff --git a/src/ui/lib/penpot.d.ts b/src/ui/lib/penpot.d.ts index 161ad4e..d3f2725 100644 --- a/src/ui/lib/penpot.d.ts +++ b/src/ui/lib/penpot.d.ts @@ -1,9 +1,10 @@ -import { CircleShape } from './types/circle/circleShape'; -import { FrameShape } from './types/frame/frameShape'; -import { GroupShape } from './types/group/groupShape'; -import { ImageShape } from './types/image/imageShape'; -import { RectShape } from './types/rect/rectShape'; -import { TextShape } from './types/text/textShape'; +import { BoolShape } from '@ui/lib/types/bool/boolShape'; +import { CircleShape } from '@ui/lib/types/circle/circleShape'; +import { FrameShape } from '@ui/lib/types/frame/frameShape'; +import { GroupShape } from '@ui/lib/types/group/groupShape'; +import { ImageShape } from '@ui/lib/types/image/imageShape'; +import { RectShape } from '@ui/lib/types/rect/rectShape'; +import { TextShape } from '@ui/lib/types/text/textShape'; export interface PenpotFile { // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -13,8 +14,8 @@ export interface PenpotFile { closeArtboard(): void; addGroup(group: GroupShape): void; closeGroup(): void; - // addBool(bool: any): void; - // closeBool(): void; + addBool(bool: BoolShape): void; + closeBool(): void; createRect(rect: RectShape): void; createCircle(circle: CircleShape): void; // createPath(path: any): void; diff --git a/src/ui/lib/types/bool/boolAttributes.d.ts b/src/ui/lib/types/bool/boolAttributes.d.ts index 99a8cd1..a2a8c88 100644 --- a/src/ui/lib/types/bool/boolAttributes.d.ts +++ b/src/ui/lib/types/bool/boolAttributes.d.ts @@ -1,4 +1,5 @@ -import { Uuid } from '../utils/uuid'; +import { Uuid } from '@ui/lib/types/utils/uuid'; + import { BoolContent } from './boolContent'; export type BoolAttributes = { diff --git a/src/ui/lib/types/bool/boolContent.d.ts b/src/ui/lib/types/bool/boolContent.d.ts index c30e180..13ded6c 100644 --- a/src/ui/lib/types/bool/boolContent.d.ts +++ b/src/ui/lib/types/bool/boolContent.d.ts @@ -1,4 +1,4 @@ -import { Point } from '../utils/point'; +import { Point } from '@ui/lib/types/utils/point'; export type BoolContent = { command: string; // @TODO: in Penpot this is of type :keyword. check if it makes sense diff --git a/src/ui/lib/types/bool/boolShape.d.ts b/src/ui/lib/types/bool/boolShape.d.ts index cad53b7..1db2d84 100644 --- a/src/ui/lib/types/bool/boolShape.d.ts +++ b/src/ui/lib/types/bool/boolShape.d.ts @@ -1,4 +1,5 @@ -import { Shape } from '../shape'; +import { Shape } from '@ui/lib/types/shape'; + import { BoolAttributes } from './boolAttributes'; export type BoolShape = Shape & BoolAttributes; diff --git a/src/ui/lib/types/circle/circleAttributes.ts b/src/ui/lib/types/circle/circleAttributes.ts index ceaf842..330ff33 100644 --- a/src/ui/lib/types/circle/circleAttributes.ts +++ b/src/ui/lib/types/circle/circleAttributes.ts @@ -1,4 +1,4 @@ -import { Uuid } from '../utils/uuid'; +import { Uuid } from '@ui/lib/types/utils/uuid'; export const CIRCLE_TYPE: unique symbol = Symbol.for('circle'); diff --git a/src/ui/lib/types/circle/circleShape.d.ts b/src/ui/lib/types/circle/circleShape.d.ts index 7e29625..9c693c4 100644 --- a/src/ui/lib/types/circle/circleShape.d.ts +++ b/src/ui/lib/types/circle/circleShape.d.ts @@ -1,4 +1,5 @@ -import { Shape } from '../shape'; +import { Shape } from '@ui/lib/types/shape'; + import { CircleAttributes } from './circleAttributes'; export type CircleShape = Shape & CircleAttributes; diff --git a/src/ui/lib/types/frame/frameAttributes.ts b/src/ui/lib/types/frame/frameAttributes.ts index 089b98d..faecdd2 100644 --- a/src/ui/lib/types/frame/frameAttributes.ts +++ b/src/ui/lib/types/frame/frameAttributes.ts @@ -1,4 +1,4 @@ -import { Uuid } from '../utils/uuid'; +import { Uuid } from '@ui/lib/types/utils/uuid'; export const FRAME_TYPE: unique symbol = Symbol.for('frame'); diff --git a/src/ui/lib/types/frame/frameShape.d.ts b/src/ui/lib/types/frame/frameShape.d.ts index b73c79e..2ffaf9e 100644 --- a/src/ui/lib/types/frame/frameShape.d.ts +++ b/src/ui/lib/types/frame/frameShape.d.ts @@ -1,5 +1,6 @@ -import { Shape } from '../shape'; -import { Children } from '../utils/children'; +import { Shape } from '@ui/lib/types/shape'; +import { Children } from '@ui/lib/types/utils/children'; + import { FrameAttributes } from './frameAttributes'; export type FrameShape = Shape & FrameAttributes & Children; diff --git a/src/ui/lib/types/group/groupAttributes.ts b/src/ui/lib/types/group/groupAttributes.ts index 6982a9f..bf5a417 100644 --- a/src/ui/lib/types/group/groupAttributes.ts +++ b/src/ui/lib/types/group/groupAttributes.ts @@ -1,4 +1,4 @@ -import { Uuid } from '../utils/uuid'; +import { Uuid } from '@ui/lib/types/utils/uuid'; export const GROUP_TYPE: unique symbol = Symbol.for('group'); diff --git a/src/ui/lib/types/group/groupShape.d.ts b/src/ui/lib/types/group/groupShape.d.ts index 8057e31..7234fc0 100644 --- a/src/ui/lib/types/group/groupShape.d.ts +++ b/src/ui/lib/types/group/groupShape.d.ts @@ -1,5 +1,6 @@ -import { Shape } from '../shape'; -import { Children } from '../utils/children'; +import { Shape } from '@ui/lib/types/shape'; +import { Children } from '@ui/lib/types/utils/children'; + import { GroupAttributes } from './groupAttributes'; export type GroupShape = Shape & GroupAttributes & Children; diff --git a/src/ui/lib/types/image/imageAttributes.ts b/src/ui/lib/types/image/imageAttributes.ts index 9d62fda..4fffe18 100644 --- a/src/ui/lib/types/image/imageAttributes.ts +++ b/src/ui/lib/types/image/imageAttributes.ts @@ -1,4 +1,4 @@ -import { Uuid } from '../utils/uuid'; +import { Uuid } from '@ui/lib/types/utils/uuid'; export const IMAGE_TYPE: unique symbol = Symbol.for('image'); diff --git a/src/ui/lib/types/image/imageShape.d.ts b/src/ui/lib/types/image/imageShape.d.ts index a99dc5c..6ef9fdd 100644 --- a/src/ui/lib/types/image/imageShape.d.ts +++ b/src/ui/lib/types/image/imageShape.d.ts @@ -1,4 +1,5 @@ -import { Shape } from '../shape'; +import { Shape } from '@ui/lib/types/shape'; + import { ImageAttributes } from './imageAttributes'; export type ImageShape = Shape & ImageAttributes; diff --git a/src/ui/lib/types/penpotNode.d.ts b/src/ui/lib/types/penpotNode.d.ts index f0e6d59..4b7731c 100644 --- a/src/ui/lib/types/penpotNode.d.ts +++ b/src/ui/lib/types/penpotNode.d.ts @@ -1,8 +1,8 @@ -import { CircleShape } from './circle/circleShape'; -import { FrameShape } from './frame/frameShape'; -import { GroupShape } from './group/groupShape'; -import { ImageShape } from './image/imageShape'; -import { RectShape } from './rect/rectShape'; -import { TextShape } from './text/textShape'; +import { CircleShape } from '@ui/lib/types/circle/circleShape'; +import { FrameShape } from '@ui/lib/types/frame/frameShape'; +import { GroupShape } from '@ui/lib/types/group/groupShape'; +import { ImageShape } from '@ui/lib/types/image/imageShape'; +import { RectShape } from '@ui/lib/types/rect/rectShape'; +import { TextShape } from '@ui/lib/types/text/textShape'; export type PenpotNode = FrameShape | GroupShape | RectShape | CircleShape | TextShape | ImageShape; diff --git a/src/ui/lib/types/rect/rectAttributes.ts b/src/ui/lib/types/rect/rectAttributes.ts index 3c651b1..2db19ef 100644 --- a/src/ui/lib/types/rect/rectAttributes.ts +++ b/src/ui/lib/types/rect/rectAttributes.ts @@ -1,4 +1,4 @@ -import { Uuid } from '../utils/uuid'; +import { Uuid } from '@ui/lib/types/utils/uuid'; export const RECT_TYPE: unique symbol = Symbol.for('rect'); diff --git a/src/ui/lib/types/rect/rectShape.d.ts b/src/ui/lib/types/rect/rectShape.d.ts index add4eb6..b169150 100644 --- a/src/ui/lib/types/rect/rectShape.d.ts +++ b/src/ui/lib/types/rect/rectShape.d.ts @@ -1,4 +1,5 @@ -import { Shape } from '../shape'; +import { Shape } from '@ui/lib/types/shape'; + import { RectAttributes } from './rectAttributes'; export type RectShape = Shape & RectAttributes; diff --git a/src/ui/lib/types/shape.d.ts b/src/ui/lib/types/shape.d.ts index bc37872..89aba4d 100644 --- a/src/ui/lib/types/shape.d.ts +++ b/src/ui/lib/types/shape.d.ts @@ -1,13 +1,13 @@ -import { Blur } from './utils/blur'; -import { Export } from './utils/export'; -import { Fill } from './utils/fill'; -import { Grid } from './utils/grid'; -import { Interaction } from './utils/interactions/interaction'; -import { Matrix } from './utils/matrix'; -import { Point } from './utils/point'; -import { Selrect } from './utils/selrect'; -import { Shadow } from './utils/shadow'; -import { Stroke } from './utils/stroke'; +import { Blur } from '@ui/lib/types/utils/blur'; +import { Export } from '@ui/lib/types/utils/export'; +import { Fill } from '@ui/lib/types/utils/fill'; +import { Grid } from '@ui/lib/types/utils/grid'; +import { Interaction } from '@ui/lib/types/utils/interaction'; +import { Matrix } from '@ui/lib/types/utils/matrix'; +import { Point } from '@ui/lib/types/utils/point'; +import { Selrect } from '@ui/lib/types/utils/selrect'; +import { Shadow } from '@ui/lib/types/utils/shadow'; +import { Stroke } from '@ui/lib/types/utils/stroke'; export type Shape = { name?: string; diff --git a/src/ui/lib/types/text/textAttributes.ts b/src/ui/lib/types/text/textAttributes.ts index 22301d6..dc90414 100644 --- a/src/ui/lib/types/text/textAttributes.ts +++ b/src/ui/lib/types/text/textAttributes.ts @@ -1,4 +1,5 @@ -import { Uuid } from '../utils/uuid'; +import { Uuid } from '@ui/lib/types/utils/uuid'; + import { TextContent } from './textContent'; export const TEXT_TYPE: unique symbol = Symbol.for('text'); diff --git a/src/ui/lib/types/text/textContent.d.ts b/src/ui/lib/types/text/textContent.d.ts index 5a473da..4339680 100644 --- a/src/ui/lib/types/text/textContent.d.ts +++ b/src/ui/lib/types/text/textContent.d.ts @@ -1,4 +1,4 @@ -import { Fill } from '../utils/fill'; +import { Fill } from '@ui/lib/types/utils/fill'; export type TextContent = { type: 'root'; diff --git a/src/ui/lib/types/text/textShape.d.ts b/src/ui/lib/types/text/textShape.d.ts index 9755e49..a152f7e 100644 --- a/src/ui/lib/types/text/textShape.d.ts +++ b/src/ui/lib/types/text/textShape.d.ts @@ -1,4 +1,5 @@ -import { Shape } from '../shape'; +import { Shape } from '@ui/lib/types/shape'; + import { TextAttributes } from './textAttributes'; export type TextShape = Shape & TextAttributes; diff --git a/src/ui/lib/types/utils/children.d.ts b/src/ui/lib/types/utils/children.d.ts index 2dc2e83..7965a14 100644 --- a/src/ui/lib/types/utils/children.d.ts +++ b/src/ui/lib/types/utils/children.d.ts @@ -1,3 +1,3 @@ -import { PenpotNode } from '../penpotNode'; +import { PenpotNode } from '@ui/lib/types/penpotNode'; export type Children = { children?: PenpotNode[] }; diff --git a/src/ui/translators/translateFillGradients.ts b/src/ui/translators/translateFillGradients.ts index 014d083..6638844 100644 --- a/src/ui/translators/translateFillGradients.ts +++ b/src/ui/translators/translateFillGradients.ts @@ -1,5 +1,5 @@ -import { createGradientFill } from '../converters/createGradientFill'; -import { Fill } from '../lib/types/utils/fill'; +import { createGradientFill } from '@ui/converters/createGradientFill'; +import { Fill } from '@ui/lib/types/utils/fill'; export const translateFillGradients = (fills?: Fill[]): Fill[] | undefined => { if (!fills) return fills; diff --git a/src/ui/validators/validateFont.ts b/src/ui/validators/validateFont.ts index 508b104..87cad5c 100644 --- a/src/ui/validators/validateFont.ts +++ b/src/ui/validators/validateFont.ts @@ -1,6 +1,6 @@ import slugify from 'slugify'; -import fonts from '../gfonts.json'; +import fonts from '@ui/gfonts.json'; const gfonts = new Set(fonts); diff --git a/tsconfig.json b/tsconfig.json index 4b56798..d6f1367 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -10,6 +10,10 @@ "moduleResolution": "Node10", "strict": true, "typeRoots": ["src/ui/lib/penpot.d.ts", "node_modules/@figma", "node_modules/@types"], - "resolveJsonModule": true + "resolveJsonModule": true, + "paths": { + "@plugin/*": ["./src/plugin/*"], + "@ui/*": ["./src/ui/*"] + } } } diff --git a/webpack.config.cjs b/webpack.config.cjs index 19d641c..eaae260 100644 --- a/webpack.config.cjs +++ b/webpack.config.cjs @@ -3,6 +3,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path'); const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin'); +const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); const webpack = require('webpack'); module.exports = (env, argv) => ({ @@ -40,7 +41,11 @@ module.exports = (env, argv) => ({ }, // Webpack tries these extensions for you if you omit the extension like "import './file'" - resolve: { extensions: ['.tsx', '.ts', '.jsx', '.js'], fallback: { crypto: false } }, + resolve: { + extensions: ['.tsx', '.ts', '.jsx', '.js'], + fallback: { crypto: false }, + plugins: [new TsconfigPathsPlugin()] + }, output: { filename: '[name].js',