fix: use createRoot for React18

.eslintrc.json

@@ -0,0 +1,22 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:react/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint",
+        "react"
+    ],
+    "rules": {
+    }
+}

package.json

@@ -58,8 +58,8 @@
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
     "@types/xml2js": "^0.4.14",
-    "@typescript-eslint/eslint-plugin": "^7.0.1",
-    "@typescript-eslint/parser": "^7.0.1",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/parser": "^7.0.2",
     "autoprefixer": "^10.4.17",
     "babel-loader": "^9.1.3",
     "brotli-webpack-plugin": "^1.1.0",

src/core/DocumentQrCode/DocumentQrCode.tsx

@@ -2,7 +2,6 @@ import styled from "@emotion/styled";
 import QRCode from "qrcode.react";
 import React, { FunctionComponent } from "react";
 import qrcodeImg from "/static/images/logo-qrcode.png";
-import ImageSettings from "qrcode.react";
 const Print = styled.div`
   display: none;
 

src/core/PrintWatermark/PrintWatermark.tsx

@@ -1,6 +1,6 @@
 /// <reference types="@emotion/react/types/css-prop" />
 
-import React, { FunctionComponent } from "react";
+import React from "react";
 import { css } from "@emotion/react";
 import watermark from "./watermark.svg";
 

src/core/Wrapper/Wrapper.tsx

@@ -5,7 +5,7 @@ interface WrapperProps {
   children: ReactNode;
 }
 // `container mx-auto px-4` <- this is in line with tt and creator's tw config, so containers can align
-export const Wrapper: FunctionComponent<WrapperProps> = ({ children, ...props }) => {
+export const Wrapper: FunctionComponent = ({ children, ...props }) => {
   return (
     <ErrorBoundary>
       <div className="container mx-auto px-4 py-4" {...props}>

src/index.tsx

@@ -1,10 +1,17 @@
 import React from "react";
-import ReactDOM from "react-dom";
-import { FramedDocumentRenderer, fullAttachmentRenderer } from "@tradetrust-tt/decentralized-renderer-react-components";
+import {
+  FramedDocumentRenderer,
+  fullAttachmentRenderer,
+} from "@tradetrust-tt/decentralized-renderer-react-components";
 import { registry } from "./templates";
 import "./main.css";
 
-ReactDOM.render(
-  <FramedDocumentRenderer templateRegistry={registry} attachmentToComponent={fullAttachmentRenderer} />,
-  document.getElementById("root")
+import { createRoot } from "react-dom/client";
+const container = document.getElementById("root");
+const root = createRoot(container!);
+root.render(
+  <FramedDocumentRenderer
+    templateRegistry={registry}
+    attachmentToComponent={fullAttachmentRenderer}
+  />
 );

src/templates/examples/TemplateA/TemplateAWithWrapperAndErrorBoundry.tsx

@@ -1,6 +1,5 @@
 import { TemplateProps } from "@tradetrust-tt/decentralized-renderer-react-components";
 import React, { FunctionComponent } from "react";
-import { DocumentQrCode } from "../../../core/DocumentQrCode";
 import { Wrapper } from "../../../core/Wrapper";
 import { getDocumentData } from "../../../utils";
 import { TemplateADocument, TemplateASchema } from "./types";