Update dependencies and react 18

package.json

@@ -3,40 +3,41 @@
   "version": "0.0.5",
   "private": true,
   "dependencies": {
-    "@emotion/core": "^10.1.1",
-    "@emotion/styled": "^10.0.27",
-    "@stitches/react": "^1.2.1",
-    "@tippyjs/react": "^4.2.0",
-    "@types/classnames": "^2.2.11",
-    "@types/jest": "^26.0.15",
-    "@types/node": "^14.14.6",
-    "@types/react": "^16.9.56",
-    "@types/react-dom": "^16.9.9",
-    "@xstate/react": "^1.0.2",
-    "classnames": "^2.2.6",
+    "@emotion/core": "^11.0.0",
+    "@emotion/styled": "^11.8.1",
+    "@stitches/react": "^1.2.7",
+    "@tippyjs/react": "^4.2.6",
+    "@types/classnames": "^2.3.0",
+    "@types/jest": "^27.4.1",
+    "@types/node": "^17.0.23",
+    "@types/react": "^17.0.43",
+    "@types/react-dom": "^17.0.14",
+    "@xstate/react": "^2.0.1",
+    "classnames": "^2.3.1",
     "fast-memoize": "^2.5.2",
-    "graphql": "^15.4.0",
-    "graphql.js": "^0.6.6",
+    "graphql": "^16.3.0",
+    "graphql.js": "^0.6.8",
     "lodash.debounce": "^4.0.8",
-    "object-path-immutable": "^4.1.1",
-    "prettier": "^2.1.2",
-    "prismjs": "^1.22.0",
-    "ramda": "^0.27.1",
-    "react": "^17.0.1",
-    "react-dark-mode-toggle": "^0.0.10",
-    "react-dom": "^17.0.1",
-    "react-scripts": "^4.0.0",
-    "rxjs": "^6.6.3",
-    "typescript": "^4.0.5",
-    "xstate": "^4.14.0"
+    "object-path-immutable": "^4.1.2",
+    "prettier": "^2.6.2",
+    "prismjs": "^1.27.0",
+    "ramda": "^0.28.0",
+    "react": "^18.0.0",
+    "react-dark-mode-toggle": "^0.2.0",
+    "react-dom": "^18.0.0",
+    "react-scripts": "^5.0.0",
+    "rxjs": "^7.5.5",
+    "typescript": "^4.6.3",
+    "xstate": "^4.30.6"
   },
   "scripts": {
     "start": "./scripts/watch.js",
     "build": "SKIP_PREFLIGHT_CHECK=true INLINE_RUNTIME_CHUNK=false react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "prepare": "husky install"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -63,20 +64,20 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.12.3",
-    "@commitlint/config-conventional": "^11.0.0",
-    "@storybook/addon-actions": "^6.0.28",
-    "@storybook/addon-links": "^6.0.28",
-    "@storybook/addons": "^6.0.28",
-    "@storybook/react": "^6.0.28",
+    "@babel/core": "^7.17.8",
+    "@commitlint/config-conventional": "^16.2.1",
+    "@storybook/addon-actions": "^6.4.20",
+    "@storybook/addon-links": "^6.4.20",
+    "@storybook/addons": "^6.4.20",
+    "@storybook/react": "^6.4.20",
     "@types/lodash.debounce": "^4.0.6",
-    "@types/prettier": "^2.1.5",
-    "@types/prismjs": "^1.16.2",
-    "babel-loader": "^8.1.0",
-    "commitlint": "^11.0.0",
+    "@types/prettier": "^2.4.4",
+    "@types/prismjs": "^1.26.0",
+    "babel-loader": "^8.2.4",
+    "commitlint": "^16.2.3",
     "cz-conventional-changelog": "3.3.0",
-    "husky": ">=4",
-    "lint-staged": ">=10",
+    "husky": "7",
+    "lint-staged": ">=12",
     "webpack-extension-reloader": "^1.1.4"
   },
   "config": {

src/App.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import coreMachine from './core/machine';
 import { useMachine } from '@xstate/react';
 import Table from './core/components/Table';
@@ -16,20 +14,20 @@ import { filterOperations } from 'core/_utils/operation';
 function App() {
   const [current, send] = useMachine(coreMachine);
   const { requestsMetaDataById, selectedRequest } = current.context;
-  const filteredRequests = filterOperations(current);
+  const filteredRequests = filterOperations(current as any);
 
   return (
     <>
-      <Header send={send} current={current} />
+      <Header send={send} current={current as any} />
       {current.matches('core.openPreferences') && (
-        <Preferences current={current} send={send} />
+        <Preferences current={current as any} send={send} />
       )}
       <Grid
         Left={
           <>
             <FixedElement>
-              <Settings send={send} current={current} />
-              <Filters send={send} current={current} />
+              <Settings send={send} current={current as any} />
+              <Filters send={send} current={current as any} />
             </FixedElement>
             <Table
               onRequestSelected={(request) =>

src/core/components/Filters.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Sender, State } from 'xstate';
 import { styled } from 'stitches.config';
 import { Button } from '../ui/Button';

src/core/components/Message.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { styled } from 'stitches.config';
 
 const Container = styled('div', {

src/core/components/Preferences.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Sender, State } from 'xstate';
 
 import { styled } from 'stitches.config';

src/core/components/Settings.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent } from 'react';
+import { ChangeEvent } from 'react';
 import { Sender, State } from 'xstate';
 import debounce from 'lodash.debounce';
 

src/core/components/Status.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 import { styled } from 'stitches.config';
 import { ReactComponent as ErrorIcon } from '../../icons/error.svg';
 

src/core/components/Table.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import classNames from 'classnames';
 
 import Status from './Status';

src/core/ui/Tip.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Placement } from 'tippy.js';
 import Tippy from '@tippyjs/react';
 import 'tippy.js/dist/tippy.css';

src/domains/editor/components/CodeEditor.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useEffect, useCallback } from 'react';
+import { memo, useEffect, useCallback } from 'react';
 
 import '../../../styles/prism.css';
 import { useMachine } from '@xstate/react';

src/index.tsx

@@ -1,8 +1,10 @@
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import App from './App';
 
 import reset from 'reset';
 
 reset();
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM
+  .createRoot(document.getElementById('root') as Element)
+  .render(<App />);

src/layouts/Grid.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { styled } from 'stitches.config';
 
 const Grid = styled('div', {

src/layouts/Header.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react'
 import { styled } from 'stitches.config';
 import { ReactComponent as GitHubIcon } from '../icons/github.svg';
 import { ReactComponent as GearIcon } from '../icons/gear.svg';

stories/0-Welcome.stories.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { linkTo } from '@storybook/addon-links';
 import { Welcome } from '@storybook/react/demo';
 

stories/1-Button.stories.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { Button } from '@storybook/react/demo';