update packages

package.json

@@ -12,38 +12,38 @@
     "deploy": "gh-pages -d out -t true"
   },
   "dependencies": {
-    "next": "^12.1.2",
+    "next": "^12.1.5",
     "next-transpile-modules": "^9.0.0",
     "parse-json": "^6.0.2",
-    "react": "17.0.2",
+    "react": "18.0.0",
-    "react-ace": "^9.5.0",
+    "react-ace": "^10.0.0",
-    "react-dom": "17.0.2",
+    "react-dom": "18.0.0",
     "react-hot-toast": "^2.2.0",
     "react-icons": "^4.3.1",
     "react-split-pane": "^0.1.92",
     "react-zoom-pan-pinch": "^2.1.3",
-    "reaflow": "^4.2.16",
+    "reaflow": "4.2.16",
     "styled-components": "^5.3.5"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.16.3",
+    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^12.1.4",
+    "@testing-library/react": "^13.1.0",
-    "@testing-library/user-event": "^14.0.0",
+    "@testing-library/user-event": "^14.1.0",
-    "@types/enzyme": "^3.10.11",
+    "@types/enzyme": "^3.10.12",
     "@types/jest": "^27.4.1",
-    "@types/node": "17.0.23",
+    "@types/node": "17.0.24",
     "@types/parse-json": "^4.0.0",
-    "@types/react": "17.0.43",
+    "@types/react": "18.0.5",
     "@types/react-splitter-layout": "^3.0.2",
-    "@types/styled-components": "^5.1.24",
+    "@types/styled-components": "^5.1.25",
     "babel-jest": "^27.5.1",
     "enzyme": "^3.11.0",
-    "eslint": "8.12.0",
+    "eslint": "8.13.0",
-    "eslint-config-next": "12.1.2",
+    "eslint-config-next": "12.1.5",
-    "eslint-plugin-testing-library": "^5.1.0",
+    "eslint-plugin-testing-library": "^5.3.1",
     "gh-pages": "^3.2.3",
     "jest": "^27.5.1",
-    "prettier": "^2.6.1",
+    "prettier": "^2.6.2",
     "ts-node": "^10.7.0",
     "typescript": "4.6.3"
   }

src/components/Container/index.tsx

@@ -24,7 +24,7 @@ const StyledContainer = styled.div<{ reverse: boolean }>`
   }
 `;
 
-export const Container: React.FC<ContainerProps> = ({
+export const Container: React.FC<React.PropsWithChildren<ContainerProps>> = ({
   children,
   reverse = false,
 }) => {

src/components/Tooltip/index.tsx

@@ -34,7 +34,10 @@ const StyledTooltip = styled.div<{ visible: boolean }>`
 
 const StyledChildren = styled.div``;
 
-export const Tooltip: React.FC<TooltipProps> = ({ children, title }) => {
+export const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
+  children,
+  title,
+}) => {
   const [visible, setVisible] = React.useState(false);
 
   return (

src/containers/LiveEditor/CustomNode/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Label, Node, Port, NodeProps } from "reaflow";
+import { Label, Node, NodeProps } from "reaflow";
 import ObjectNode from "./ObjectNode";
 import TextNode from "./TextNode";
 
@@ -23,7 +23,7 @@ export const CustomNode = React.memo((nodeProps: NodeProps) => {
 
   return (
     <Node {...nodeProps} label={<Label style={baseLabelStyle} />}>
-      {(nodeProps: NodeProps) => {
+      {() => {
         const { width, height } = nodeProps;
 
         if (data.text instanceof Object) {

src/containers/LiveEditor/index.tsx

@@ -36,7 +36,9 @@ export const LiveEditor: React.FC = React.memo(function LiveEditor() {
     dispatch,
   } = useConfig();
   const pageLoaded = useLoading();
-  const wrapperRef = React.useRef<ReactZoomPanPinchRef | null>(null);
+  const wrapperRef = React.useRef<ReactZoomPanPinchRef | null>(
+    settings.zoomPanPinch
+  );
   const [data, setData] = React.useState({
     nodes: [],
     edges: [],
@@ -84,11 +86,12 @@ export const LiveEditor: React.FC = React.memo(function LiveEditor() {
     if (input) input.blur();
   };
 
-  const onInit = (ref: ReactZoomPanPinchRef) =>
+  const onInit = (ref: ReactZoomPanPinchRef) => {
     dispatch({
       type: ConfigActionType.SET_ZOOM_PAN_PICNH_REF,
       payload: ref,
     });
+  };
 
   if (pageLoaded)
     return (
@@ -99,7 +102,6 @@ export const LiveEditor: React.FC = React.memo(function LiveEditor() {
             maxScale={1.8}
             minScale={0.4}
             initialScale={0.8}
-            ref={wrapperRef}
             limitToBounds={false}
             wheel={wheelOptions}
             onInit={onInit}
@@ -116,7 +118,7 @@ export const LiveEditor: React.FC = React.memo(function LiveEditor() {
                 fit={true}
                 direction={settings.layout}
                 readonly
-                key={settings.layout || settings.lightmode}
+                key={settings.layout}
                 onCanvasClick={onCanvasClick}
               />
             </TransformComponent>

src/hocs/config.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { defaultConfig, defaultJson } from "src/constants/data";
 import { ReducerAction, useConfigReducer } from "src/reducer/reducer";
-import { StorageConfig } from "src/typings/global";
+import { ReactComponent, StorageConfig } from "src/typings/global";
 
 export interface AppConfig {
   json: string;
@@ -28,7 +28,7 @@ const ConfigContext: React.Context<Config> =
 
 const useConfig = () => React.useContext(ConfigContext);
 
-const WithConfig: React.FC = ({ children }) => {
+const WithConfig: ReactComponent = ({ children }) => {
   const [states, dispatch] = React.useReducer(useConfigReducer, initialStates);
   const value = { states, dispatch };
 
@@ -37,12 +37,13 @@ const WithConfig: React.FC = ({ children }) => {
   );
 };
 
-const withConfig = (Component) => {
+const withConfig =
-  return (props) => (
+  <P extends object>(Component: React.ComponentType<P>): React.FC =>
-    <WithConfig>
+  (props) =>
-      <Component {...props} />
+    (
-    </WithConfig>
+      <WithConfig>
-  );
+        <Component {...(props as P)} />
-};
+      </WithConfig>
+    );
 
 export { WithConfig, useConfig, ConfigContext, withConfig };

src/pages/_app.tsx

@@ -5,7 +5,7 @@ import { ThemeProvider } from "styled-components";
 import GlobalStyle from "src/constants/globalStyle";
 import { darkTheme, lightTheme } from "src/constants/theme";
 import { Toaster } from "react-hot-toast";
-import { useConfig, withConfig, WithConfig } from "src/hocs/config";
+import { useConfig, withConfig } from "src/hocs/config";
 
 function JsonVisio({ Component, pageProps }: AppProps) {
   const {

src/pages/index.tsx

@@ -6,7 +6,6 @@ import { Image } from "src/components/Image";
 import styled from "styled-components";
 import { AiFillGithub } from "react-icons/ai";
 import { Footer } from "src/components/Footer";
-import Link from "next/link";
 import Head from "next/head";
 import { Producthunt } from "src/components/Producthunt";
 import { useRouter } from "next/router";

src/typings/global.ts

@@ -1,3 +1,4 @@
+import React, { PropsWithChildren } from "react";
 import { ReactZoomPanPinchRef } from "react-zoom-pan-pinch";
 import { CanvasDirection } from "reaflow";
 
@@ -10,3 +11,5 @@ export interface StorageConfig {
   zoomPanPinch: ReactZoomPanPinchRef | null;
   lightmode: boolean;
 }
+
+export type ReactComponent = React.FC<PropsWithChildren<{}>>;