[Chore/React] Introduce react 18

.eslintrc.json

@@ -22,7 +22,9 @@
     "semi": ["error", "always"],
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
-    "react/prop-types": "off"
+    "react/prop-types": "off",
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off"
   },
   "settings": {
     "react": {

package.json

@@ -17,8 +17,9 @@
   "main": "dist/index.js",
   "types": "dist/index.d.js",
   "dependencies": {
-    "react": "^17.0.2",
-    "react-helmet-async": "^1.0.9",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-helmet-async": "^1.3.0",
     "react-icons": "^4.2.0",
     "sanitize-html": "^2.4.0",
     "styled-components": "^5.3.0"
@@ -31,24 +32,24 @@
     "@babel/preset-typescript": "^7.14.5",
     "@babel/runtime": "^7.14.8",
     "@types/fork-ts-checker-webpack-plugin": "^0.4.5",
-    "@types/react": "^17.0.15",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
     "@types/sanitize-html": "^2.3.2",
     "@types/styled-components": "^5.1.11",
     "@types/webpack": "^4.41.25",
     "@types/webpack-dev-server": "^3.11.1",
-    "@typescript-eslint/eslint-plugin": "^4.28.5",
-    "@typescript-eslint/parser": "^4.28.5",
+    "@typescript-eslint/eslint-plugin": "^5.49.0",
+    "@typescript-eslint/parser": "^5.49.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-styled-components": "^1.13.2",
     "clean-webpack-plugin": "^4.0.0-alpha.0",
-    "eslint": "^7.31.0",
-    "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-webpack-plugin": "^3.0.1",
+    "eslint": "^8.32.0",
+    "eslint-plugin-react": "^7.32.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-webpack-plugin": "^3.2.0",
     "fork-ts-checker-webpack-plugin": "^6.2.13",
     "html-webpack-plugin": "^5.3.2",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "ts-node": "^10.1.0",
     "typescript": "^4.3.5",
     "webpack": "^5.11.1",
@@ -69,4 +70,4 @@
     "textEditor",
     "react"
   ]
-}
+}

src/components/ColorPicker/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { IoIosColorPalette } from "react-icons/io";
 
 import CustomInput from "../CustomInput";

src/components/CoordinatesTag/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import styled from "styled-components";
 import { BoxInnerShadow } from "../../theme/BoxInnerShadow";
 

src/components/CustomInput/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { PropsWithChildren } from "react";
 import styled from "styled-components";
 
 import Icon from "../Icon";
@@ -11,7 +11,7 @@ interface CustomInputProps extends TypedCustomInputProps {
   accept?: string;
 }
 
-const CustomInput: React.FC<CustomInputProps> = ({
+const CustomInput: React.FC<PropsWithChildren<CustomInputProps>> = ({
   onChange,
   value,
   type,

src/components/DragAndDropTable/index.tsx

@@ -1,4 +1,4 @@
-import React, { Children } from "react";
+import { Children, PropsWithChildren } from "react";
 import styled from "styled-components";
 
 import useDragAndDrop from "../../hooks/useDragAndDrop";
@@ -19,11 +19,11 @@ interface DragAndDropItemStyle extends DragAndDropTableStyle {
   height: number;
 }
 
-const DragAndDropTable: React.FC<DragAndDropTableProps> = ({
+const DragAndDropTable: React.FC<PropsWithChildren<DragAndDropTableProps>> = ({
   color,
   isVertical,
   children,
-}): React.ReactElement => {
+}) => {
   const {
     handleDragStart,
     handleDragOver,

src/components/Dropdown/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import styled from "styled-components";
 import { BiChevronRight } from "react-icons/bi";
 

src/components/EditableBoard/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { PropsWithChildren } from "react";
 import styled from "styled-components";
 
 interface EditableBoard {
@@ -10,7 +10,7 @@ interface EditableBoard {
   unit: string;
 }
 
-const EditableBoard: React.FC<EditableBoard> = ({
+const EditableBoard: React.FC<PropsWithChildren<EditableBoard>> = ({
   width,
   height,
   backgroundColor,

src/components/EditorBlock/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { PropsWithChildren, useState } from "react";
 
 import CoordinatesTag from "../CoordinatesTag";
 import { DIRECTIIONS } from "../../constants/location";
@@ -10,7 +10,7 @@ import ResizeHandlersWrapper from "../shared/ResizeHandlerWrapper";
 import useDraggable from "../../hooks/useDraggable";
 import useResize from "../../hooks/useResize";
 
-const EditorBlock: React.FC<EditorBlockProps> = ({
+const EditorBlock: React.FC<PropsWithChildren<EditorBlockProps>> = ({
   width,
   height,
   top,

src/components/EditorButton/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { PropsWithChildren } from "react";
 
 import MenuButton from "../shared/MenuButton";
 
@@ -9,7 +9,7 @@ interface EditorButtonProps {
   onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-const EditorButton: React.FC<EditorButtonProps> = ({
+const EditorButton: React.FC<PropsWithChildren<EditorButtonProps>> = ({
   name,
   isShowing,
   value,

src/components/GuideLine/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import styled from "styled-components";
 
 import { ComponentStyle } from "../../types/ui";

src/components/Icon/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { PropsWithChildren } from "react";
 import styled from "styled-components";
 
 interface IconProps {
@@ -11,7 +11,7 @@ interface IconProps {
   onMouseUp?: () => void;
 }
 
-const Icon: React.FC<IconProps> = ({
+const Icon: React.FC<PropsWithChildren<IconProps>> = ({
   children,
   top,
   right,

src/components/ImageUploader/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { BsImages } from "react-icons/bs";
 
 import CustomInput from "../CustomInput";

src/components/MenuBoard/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import styled from "styled-components";
 import { AiOutlineAlignCenter, AiOutlineAlignLeft, AiOutlineAlignRight } from "react-icons/ai";
 import { FaBold, FaItalic, FaUnderline } from "react-icons/fa";

src/components/MenuOption/index.tsx

@@ -1,11 +1,11 @@
-import React from "react";
+import { PropsWithChildren } from "react";
 import styled from "styled-components";
 
 interface MenuOptionProps {
   name: string;
 }
 
-const MenuOption: React.FC<MenuOptionProps> = ({
+const MenuOption: React.FC<PropsWithChildren<MenuOptionProps>> = ({
   name,
   children
 }): React.ReactElement => {

src/components/Slider/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import styled from "styled-components";
 
 import { SLIDER_MAX, SLIDER_MIN } from "../../constants/ui";

src/components/StyleEditorBlock/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { PropsWithChildren } from "react";
 import styled from "styled-components";
 
 import ColorPicker from "../ColorPicker";
@@ -15,7 +15,7 @@ interface StyleEditorBlockProps extends EditorProps {
   initialImage?: string;
 }
 
-const StyleEditorBlock: React.FC<StyleEditorBlockProps> = ({
+const StyleEditorBlock: React.FC<PropsWithChildren<StyleEditorBlockProps>> = ({
   width,
   height,
   top,

src/components/TextEditor/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import styled from "styled-components";
 import { Helmet, HelmetProvider } from "react-helmet-async";
 

src/components/TextEditorBlock/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import styled from "styled-components";
 import { BiText } from "react-icons/bi";
 import { GiMove } from "react-icons/gi";

tsconfig.json

@@ -13,7 +13,7 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "react"
+    "jsx": "react-jsx"
   },
   "include": ["src"],
 }

webpack.dev.config.ts

@@ -20,9 +20,12 @@ const config: webpack.Configuration = {
           options: {
             presets: [
               "@babel/preset-env",
-              "@babel/preset-react",
               "@babel/preset-typescript",
+              ["@babel/preset-react", {
+                "runtime": "automatic"
+              }]
             ],
+
             plugins: ["styled-components"]
           },
         },