Merge pull request #72 from aexol-studio/refactor/new-2022

Refactor/new 2022

package.json

@@ -2,25 +2,25 @@
   "name": "react-pdf-editor",
   "version": "0.0.0",
   "dependencies": {
-    "@react-pdf/renderer": "^1.6.7",
-    "classnames": "^2.2.6",
+    "@react-pdf/renderer": "^1.6.17",
+    "classnames": "^2.3.1",
     "rc-color-picker": "^1.2.6",
-    "rc-tooltip": "^4.0.0-alpha.2",
-    "re-resizable": "^6.1.0",
-    "react-feather": "^2.0.3",
-    "typestyle": "^2.0.4"
+    "rc-tooltip": "^4.2.3",
+    "re-resizable": "^6.9.9",
+    "react-feather": "^2.0.9",
+    "typestyle": "^2.3.0"
   },
   "peerDependencies": {
     "react": ">=16.8.6",
     "react-dom": ">=16.8.6"
   },
   "devDependencies": {
     "@babel/core": "7.4.3",
-    "@babel/preset-env": "^7.7.4",
+    "@babel/preset-env": "^7.17.12",
     "@svgr/webpack": "4.1.0",
-    "@types/classnames": "^2.2.9",
-    "@types/react": "^16.9.19",
-    "@types/react-dom": "^16.9.4",
+    "@types/classnames": "^2.3.1",
+    "@types/react": "^16.14.26",
+    "@types/react-dom": "^16.9.16",
     "@typescript-eslint/eslint-plugin": "1.6.0",
     "@typescript-eslint/parser": "1.6.0",
     "case-sensitive-paths-webpack-plugin": "2.2.0",
@@ -33,21 +33,22 @@
     "eslint-plugin-react": "7.12.4",
     "eslint-plugin-react-hooks": "^1.5.0",
     "file-loader": "3.0.1",
-    "graphql-zeus": "^2.4.8",
+    "graphql-zeus": "^2.8.6",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
     "mini-css-extract-plugin": "0.5.0",
     "optimize-css-assets-webpack-plugin": "5.0.1",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
     "style-loader": "0.23.1",
-    "ts-loader": "^6.2.1",
-    "typescript": "^3.7.2",
+    "ts-loader": "^6.2.2",
+    "tsconfig-paths-webpack-plugin": "^3.5.2",
+    "typescript": "^3.9.10",
     "url-loader": "^2.3.0",
-    "webpack": "^4.41.2",
+    "webpack": "^4.46.0",
     "webpack-cleanup-plugin": "^0.5.1",
-    "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.9.0",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.3",
     "webpack-manifest-plugin": "2.0.4"
   },
   "scripts": {

sandbox/index.tsx

@@ -3,6 +3,7 @@ import ReactDOM from "react-dom";
 import { style } from "typestyle";
 import { ReactPDFEditor } from "../src";
 
+
 export const AppContainer = style({
   $debugName: "AppContainer",
   fontFamily: "Fira Sans",

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/ButtonSimple.tsx → 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/Checkbox.tsx → 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/IconButton.tsx → 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/atoms/index.tsx

@@ -0,0 +1,3 @@
+export { ButtonSimple } from "./ButtonSimple";
+export { Checkbox } from "./Checkbox";
+export { IconButton } from "./IconButton";

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;
@@ -54,7 +54,6 @@ export const Controls = ({
             return;
           }
           setOpen(!open);
-          console.log("beng 1");
 
           //zmiana stanu na true i pokazują się kontrolki
         }}
@@ -77,7 +76,6 @@ export const Controls = ({
                       } as PartialObjects["Stack"]);
                       setOpen(false);
                       mutateWholeObject();
-                      console.log("beng 2");
                     }}
                   >
                     <p
@@ -124,7 +122,6 @@ export const Controls = ({
                         } as PartialObjects["Stack"]);
                         mutateWholeObject();
                         setOpen(false);
-                        console.log("beng 3");
                       }}
                     >
                       {t("ButtonStack")}

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 "../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,14 +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";
-// import * as Icons from "react-feather";
+} from "@/utils";
 import { TextBlockComponent } from "./TextBlockComponent";
 import { ImageComponent } from "./ImageComponent";
 import { StackComponent } from "./StackComponent";
@@ -17,27 +16,20 @@ import { ListBlockComponent } from "./ListBlockComponent";
 import * as styles from "./styles/Feature";
 import { EmptyFeatureComponent } from "./EmptyFeatureComponent";
 import { TimeStampComponent } from "./TimeStampComponent";
-// import cx from "classnames";
 import { DeleteAndEditIconsComponent } from "./display/DeleteAndEdit";
-// import { TopMenu } from "../../topmenu";
 export interface BaseFeatureComponentProps {
   onChange: () => void;
 }
 export interface FeatureComponentProps extends BaseFeatureComponentProps {
   feature: PartialObjects["Feature"];
   onDelete: () => void;
   onEdit: (feature: PartialObjects["Feature"]) => void;
-  // editedFeature?: PartialObjects["Feature"];
-  // textBlock: PartialObjects["TextBlock"];
-  //  tu usunięte
-
   onMoveDown?: () => void;
   onMoveUp?: () => void;
   [k: string]: unknown;
 }
 
 {
-  /* <TopMenu editedFeature={textBlock} onChange={onChange}  /> */
 }
 
 /// tutaj jest komponen wyświetlany itp itp itp
@@ -56,57 +48,54 @@ const FeatureComp = (props: FeatureComponentProps) => {
     return (
       <TextBlockComponent
         textBlock={feature}
+        {...props}
         onChange={onChange}
-        onEdit={onEdit}
         onDelete={onDelete}
-        {...props}
       />
     );
   }
   if (isImage(feature)) {
     return (
       <ImageComponent
         image={feature}
+        {...props}
         onChange={onChange}
         onDelete={onDelete}
-        {...props}
       />
     );
   }
   if (isStack(feature)) {
     return (
       <StackComponent
+        {...props}
         stack={feature}
         onChange={onChange}
-        // onEdit={onEdit}
         onDelete={onDelete}
         onMoveDown={onMoveDown}
         onMoveUp={onMoveUp}
-        // tutaj dodać komponent taki header po kliknięciu onEdit
-
-        {...props}
+      // tutaj dodać komponent taki header po kliknięciu onEdit
       />
     );
   }
   if (isTableBlock(feature)) {
     return (
       <TableBlockComponent
         tableBlock={feature}
+        {...props}
         onChange={onChange}
         onDelete={onDelete}
         onEdit={onEdit}
-        {...props}
       />
     );
   }
   if (isListBlock(feature)) {
     return (
       <ListBlockComponent
         listBlock={feature}
+        {...props}
         onDelete={onDelete}
         onChange={onChange}
         onEdit={onEdit}
-        {...props}
       />
     );
   }
@@ -123,13 +112,13 @@ export const FeatureComponent = (props: FeatureComponentProps) => {
   return (
     <div className={styles.FeatureMain}>
       <FeatureComp
+        onMoveDown={onMoveDown}
+        onMoveUp={onMoveUp}
+        {...props}
         onChange={onChange}
         onEdit={onEdit}
         onDelete={onDelete}
         feature={feature}
-        onMoveDown={onMoveDown}
-        onMoveUp={onMoveUp}
-        {...props}
       />
     </div>
   );

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>