ts config paths

package.json

@@ -42,6 +42,7 @@
     "react-dom": "^16.14.0",
     "style-loader": "0.23.1",
     "ts-loader": "^6.2.2",
+    "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^3.9.10",
     "url-loader": "^2.3.0",
     "webpack": "^4.46.0",

sandbox/webpack.config.js

@@ -4,6 +4,7 @@ var sourcePath = path.join(__dirname, "./");
 var outPath = path.join(__dirname, "../public");
 var HtmlWebpackPlugin = require("html-webpack-plugin");
 var WebpackCleanupPlugin = require("webpack-cleanup-plugin");
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 // const config = require('./config.js')
 
 module.exports = {
@@ -20,6 +21,7 @@ module.exports = {
   target: "web",
   mode: "development",
   resolve: {
+    plugins: [new TsconfigPathsPlugin({/* options: see below */})],
     extensions: [".js", ".jsx", ".ts", ".tsx"],
     mainFields: ["module", "browser", "main"],
     alias: {

src/components/atoms/ButtonSimple.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as styles from "../styles/ButtonSimple";
+import * as styles from "@styles/ButtonSimple";
 export interface ButtonSimpleProps {
   onClick: () => void;
   children: React.ReactNode;

src/components/atoms/Checkbox.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import classnames from "classnames";
-import { CheckBox } from "../icons";
-import * as styles from "../styles/CheckboxStyles";
+import { CheckBox } from "@components/icons"
+import * as styles from "@styles/CheckboxStyles";
 
 export interface ICheckBoxProps {
   value?: boolean;

src/components/atoms/IconButton.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as styles from "../styles/IconButton";
+import * as styles from "@styles/IconButton";
 export interface IconButtonProps {
   onClick: () => void;
   children: React.ReactNode;

src/components/editor/ColumnComponent.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { PartialObjects } from "../../graphql-zeus";
+import { PartialObjects } from "@/graphql-zeus";
 import { FeatureComponent } from "./FeatureComponent";
 import * as styles from "./styles/Column";
 import { Controls } from "./Controls";

src/components/editor/ColumnsComponent.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import { PartialObjects } from "../../graphql-zeus";
+import { PartialObjects } from "@/graphql-zeus";
 import * as styles from "./styles/Columns";
 import { ColumnComponent } from "./ColumnComponent";
-import { Colors } from "../../Colors";
+import { Colors } from "@/Colors";
 import { Resizable } from "re-resizable";
-import { translated } from "../../models";
+import { translated } from "@/models";
 import * as Icons from "react-feather";
 import * as styles1 from "./styles/Feature";
 import cx from "classnames";

src/components/editor/Controls.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
 import * as styles from "./styles/Controls";
-import { BuiltInStyles, PartialObjects } from "../../graphql-zeus";
+import { BuiltInStyles, PartialObjects } from "@/graphql-zeus";
 import { PlusCircle, MinusCircle } from "react-feather";
-import { translated } from "../../models";
+import { translated } from "@/models";
 export interface ControlsProps {
   features: PartialObjects["Feature"][];
   mutateWholeObject: () => void;

src/components/editor/DocumentComponent.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
-import { PartialObjects } from "../../graphql-zeus";
+import { PartialObjects } from "@/graphql-zeus";
 import { Editor } from "..";
 import { Rolloutable } from "./display/Rolloutable";
-import { Confirm } from "../molecules/Confirm";
+import { Confirm } from "@components/molecules/Confirm";
 import * as Icons from "react-feather";
 import * as styles from "./styles/Feature";
 import cx from "classnames";

src/components/editor/EmptyFeatureComponent.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { PartialObjects } from "../../graphql-zeus";
+import { PartialObjects } from "@/graphql-zeus";
 import { Controls } from "./Controls";
 export interface EmptyFeatureComponentProps {
   feature: PartialObjects["Feature"];

src/components/editor/FeatureComponent.tsx

@@ -1,13 +1,13 @@
 import * as React from "react";
-import { PartialObjects } from "../../graphql-zeus";
+import { PartialObjects } from "@/graphql-zeus";
 import {
   isTextBlock,
   isImage,
   isStack,
   isListBlock,
   isTableBlock,
   isTimeStamp
-} from "../../utils";
+} from "@/utils";
 import { TextBlockComponent } from "./TextBlockComponent";
 import { ImageComponent } from "./ImageComponent";
 import { StackComponent } from "./StackComponent";

src/components/editor/ImageComponent.tsx

@@ -1,14 +1,14 @@
 import React, { useState } from "react";
-import { PartialObjects } from "../../graphql-zeus";
+import { PartialObjects } from "@/graphql-zeus";
 import * as styles from "./styles/Image";
-import { translated } from "../../models";
-import { MAX_IMAGE_WIDTH } from "../../constants";
+import { translated } from "@/models";
+import { MAX_IMAGE_WIDTH } from "@/constants";
 import {
   DeleteAndEditIconsComponentProps,
   DeleteAndEditIconsComponent
 } from "./display/DeleteAndEdit";
 
-import { TopMenuProps, TopMenu } from "../../topmenu/index";
+import { TopMenuProps, TopMenu } from "@/topmenu/index";
 
 const t = translated("ImageComponentTxt");
 
@@ -25,7 +25,7 @@ function getBase64(file: Blob): Promise<string> {
 }
 export interface ImageComponentProps
   extends DeleteAndEditIconsComponentProps,
-    TopMenuProps {
+  TopMenuProps {
   image: PartialObjects["Image"];
   onChange: () => void;
 }
@@ -44,10 +44,10 @@ export const ImageComponent = ({
     <div>
       <div
         className={styles.ImageTitleDiv}
-        // style={{
-        //   display: "flex",
-        //   justifyContent: "center"
-        // }}
+      // style={{
+      //   display: "flex",
+      //   justifyContent: "center"
+      // }}
       >
         <p className={styles.ImageTitle}>{t("ImageTitle")}</p>
 

src/components/editor/ListBlockComponent.tsx

@@ -1,14 +1,14 @@
 import * as React from "react";
-import { PartialObjects } from "../../graphql-zeus";
+import { PartialObjects } from "@/graphql-zeus";
 import { FeatureComponent } from "./FeatureComponent";
 import { Controls } from "./Controls";
 import {
   Rolloutable,
 } from "./display/Rolloutable";
 import { DeleteAndEditIconsComponentProps } from "./display/DeleteAndEdit";
-import { swapInArray } from "../../utils";
-import { translated } from "../../models";
-import { TopMenu } from "../../topmenu/index";
+import { swapInArray } from "@/utils";
+import { translated } from "@/models";
+import { TopMenu } from "@/topmenu/index";
 // import { TextBlockComponentProps } from "livepdf/livecomponents/editor";
 export interface ListBlockComponentProps extends DeleteAndEditIconsComponentProps {
   listBlock: PartialObjects["ListBlock"];
@@ -20,7 +20,7 @@ export interface ListBlockComponentProps extends DeleteAndEditIconsComponentProp
 const t = translated("ListBlockComponentTxt");
 
 export const ListBlockComponent = (props: ListBlockComponentProps) => {
-  const { onChange,onEdit,listBlock } = props;
+  const { onChange, onEdit, listBlock } = props;
   return (
     <Rolloutable title={t("TitleList")} {...props}>
       <TopMenu editedFeature={listBlock} onChange={onChange} />
@@ -39,25 +39,25 @@ export const ListBlockComponent = (props: ListBlockComponentProps) => {
               onMoveDown={
                 index !== listBlock.items!.length - 1
                   ? () => {
-                      swapInArray(listBlock.items!, index, index + 1);
-                      onChange();
-                    }
+                    swapInArray(listBlock.items!, index, index + 1);
+                    onChange();
+                  }
                   : undefined
               }
               onMoveUp={
                 index !== 0 && listBlock.items!.length > 1
                   ? () => {
-                      swapInArray(listBlock.items!, index, index - 1);
-                      onChange();
-                    }
+                    swapInArray(listBlock.items!, index, index - 1);
+                    onChange();
+                  }
                   : undefined
               }
             />
           );
         })}
       {listBlock.items && (
-        <Controls 
-           parent={listBlock}
+        <Controls
+          parent={listBlock}
           features={listBlock.items}
           mutateWholeObject={onChange}
           clean={() => {

src/components/editor/StackComponent.tsx

@@ -1,12 +1,12 @@
 import * as React from "react";
-import { PartialObjects } from "../../graphql-zeus";
+import { PartialObjects } from "@/graphql-zeus";
 import { FeatureComponent } from "./FeatureComponent";
 import { Controls } from "./Controls";
 import { Rolloutable } from "./display/Rolloutable";
 import { DeleteAndEditIconsComponentProps } from "./display/DeleteAndEdit";
-import { swapInArray } from "../../utils";
-import { translated } from "../../models";
-import { TopMenu } from "../../topmenu/index";
+import { swapInArray } from "@/utils";
+import { translated } from "@/models";
+import { TopMenu } from "@/topmenu/index";
 export interface StackComponentProps extends DeleteAndEditIconsComponentProps {
   stack: PartialObjects["Stack"];
   onChange: () => void;
@@ -38,17 +38,17 @@ export const StackComponent = (props: StackComponentProps) => {
               onMoveDown={
                 index !== stack.items!.length - 1
                   ? () => {
-                      swapInArray(stack.items!, index, index + 1);
-                      onChange();
-                    }
+                    swapInArray(stack.items!, index, index + 1);
+                    onChange();
+                  }
                   : undefined
               }
               onMoveUp={
                 index !== 0 && stack.items!.length > 1
                   ? () => {
-                      swapInArray(stack.items!, index, index - 1);
-                      onChange();
-                    }
+                    swapInArray(stack.items!, index, index - 1);
+                    onChange();
+                  }
                   : undefined
               }
             />