Add typescript aliases for imports (#16)

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",

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"
   }

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
 };

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 });
 

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();

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<PenpotDocument> => {
   return {

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,

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,

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 (

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,

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<PenpotPage> => {
   return {

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,

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,

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([

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';
 

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,

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 {

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<string>());

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) {

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,

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) => {

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);

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,

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) => {

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) {

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);

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) => {

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,

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;

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 = {

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

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;

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');
 

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;

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');
 

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;

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');
 

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;

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');
 

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;

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;

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');
 

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;

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;

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');

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';

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;

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[] };

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;

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);
 

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/*"]
+    }
   }
 }

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',