Update react v18 (#525)

* feat: update react v18 * fix: fix types * fix: remove rebass/forms
kmkzt · Jun 8, 2022 · 34c6ff7 · 34c6ff7 · vercel · Jun 8, 2022
1 parent d3c6e8b
commit 34c6ff7
Show file tree

Hide file tree

Showing 9 changed files with 177 additions and 219 deletions.
diff --git a/examples/docs/components/Layout.tsx b/examples/docs/components/Layout.tsx
@@ -61,14 +61,19 @@ const GlobalHeader = () => (
   </Box>
 )
 
-const Layout: React.SFC<{
+const Layout = ({
+  children,
+  title = '',
+}: {
   title?: string
-}> = ({ children, title = '' }) => {
+  children: React.ReactNode
+}) => {
   return (
     <Fragment>
       <Head>
         <title>{`svg-drawing ${title}`}</title>
       </Head>
+      {/** @ts-expect-error */}
       <GlobalStyle />
       <GlobalHeader />
       <Box py="12px" px={['2vw', '2vw', '5vw']}>

diff --git a/examples/docs/package.json b/examples/docs/package.json
@@ -12,23 +12,21 @@
     "prepare": "build"
   },
   "dependencies": {
-    "@rebass/forms": "4.0.6",
     "@styled-icons/octicons": "10.6.0",
     "@svg-drawing/animation": "4.2.3",
     "@svg-drawing/core": "4.2.3",
     "@svg-drawing/img-trace": "4.2.3",
     "@svg-drawing/react": "4.2.3",
-    "next": "12.1.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "next": "12.1.6",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
     "rebass": "4.0.7",
     "regenerator-runtime": "0.13.9",
     "styled-components": "5.1.1",
     "styled-system": "5.1.5"
   },
   "devDependencies": {
     "@types/rebass": "4.0.6",
-    "@types/rebass__forms": "4.0.2",
     "@types/styled-components": "5.1.1",
     "@types/styled-system": "5.1.1",
     "babel-plugin-styled-components": "1.10.7",

diff --git a/examples/docs/pages/_app.tsx b/examples/docs/pages/_app.tsx
@@ -8,6 +8,7 @@ export default class MyApp extends App {
 
     return (
       <StrictMode>
+        {/** @ts-expect-error */}
         <ThemeProvider theme={theme}>
           <Component {...pageProps} />
         </ThemeProvider>

diff --git a/examples/docs/pages/_document.tsx b/examples/docs/pages/_document.tsx
@@ -1,10 +1,12 @@
 import Document, { Head, Html, Main, NextScript } from 'next/document'
 import { ServerStyleSheet } from 'styled-components'
 import { GA_TRACKING_ID } from '../lib/gtag'
-import type { DocumentContext } from 'next/document'
+import type { DocumentContext, DocumentInitialProps } from 'next/document'
 
 export default class MyDocument extends Document {
-  static async getInitialProps(ctx: DocumentContext) {
+  static async getInitialProps(
+    ctx: DocumentContext
+  ): Promise<DocumentInitialProps> {
     const sheet = new ServerStyleSheet()
     const originalRenderPage = ctx.renderPage
 
@@ -17,14 +19,22 @@ export default class MyDocument extends Document {
 
       const initialProps = await Document.getInitialProps(ctx)
       return {
-        ...initialProps,
+        html: initialProps.html,
+        head: initialProps.head,
+        // @ts-expect-error
         styles: (
           <>
             {initialProps.styles}
             {sheet.getStyleElement()}
           </>
         ),
       }
+    } catch {
+      return {
+        styles: undefined,
+        html: '',
+        head: undefined,
+      }
     } finally {
       sheet.seal()
     }

diff --git a/examples/docs/pages/demo/animation.tsx b/examples/docs/pages/demo/animation.tsx
@@ -1,4 +1,3 @@
-import { Slider, Input, Label } from '@rebass/forms/styled-components'
 import { SvgAnimation } from '@svg-drawing/animation'
 import { Point } from '@svg-drawing/core'
 import { useEffect, useRef, useCallback, useState } from 'react'
@@ -147,20 +146,18 @@ const Animation: NextPage<Props> = ({ isSp }) => {
     <Layout>
       <Box as="fieldset">
         <Flex justifyContent="start" mb={2}>
-          <Label width={3 / 10} style={{ whiteSpace: 'nowrap' }}>
+          <label style={{ whiteSpace: 'nowrap' }}>
             ANIMATION MS:
-          </Label>
-          <Slider
-            width={6 / 10}
-            type="range"
-            min="0"
-            max="500"
-            step="5"
-            value={animMs}
-            onChange={handleChangeAnimMs}
-          />
-          <Input
-            width="auto"
+            <input
+              type="range"
+              min="0"
+              max="500"
+              step="5"
+              value={animMs}
+              onChange={handleChangeAnimMs}
+            />
+          </label>
+          <input
             type="number"
             min="0"
             max="500"
@@ -208,7 +205,7 @@ const Animation: NextPage<Props> = ({ isSp }) => {
         </Flex>
         <Box>
           <Text>Svg exported by this library can be read.</Text>
-          <Input type="file" onChange={handleFiles} multiple accept="image/*" />
+          <input type="file" onChange={handleFiles} multiple accept="image/*" />
         </Box>
       </Box>
       <Box width={['96vw', '96vw', '40vw']} height={['96vw', '96vw', '40vw']}>

diff --git a/examples/docs/pages/demo/img-trace.tsx b/examples/docs/pages/demo/img-trace.tsx
@@ -1,4 +1,3 @@
-import { Input } from '@rebass/forms/styled-components'
 import { Renderer, download } from '@svg-drawing/core'
 import {
   ImgTrace,
@@ -250,7 +249,7 @@ export default () => {
       <Box as="fieldset">
         <Heading>Select Image</Heading>
         <Box>
-          <Input
+          <input
             type="text"
             placeholder="input image url"
             value={inputUrl}

diff --git a/examples/docs/pages/index.tsx b/examples/docs/pages/index.tsx
@@ -1,10 +1,9 @@
-import { Input, Checkbox, Label, Slider } from '@rebass/forms/styled-components'
 import { useSvgDrawing } from '@svg-drawing/react'
 import { useEffect, useCallback, useState } from 'react'
 import { Box, Flex, Button, Text } from 'rebass/styled-components'
 import Layout from '../components/Layout'
 import type { NextPage } from 'next'
-import type { ChangeEvent } from 'react'
+import type { ChangeEvent, ChangeEventHandler } from 'react'
 
 const size = 30
 const colorList = [
@@ -79,7 +78,9 @@ const DrawingDemo: NextPage<Props> = ({ isSp }) => {
     [draw]
   )
 
-  const handleChangeRainbowPen = useCallback(
+  const handleChangeRainbowPen = useCallback<
+    ChangeEventHandler<HTMLInputElement>
+  >(
     (e) => {
       draw.changeFill('none')
       draw.changeClose(false)
@@ -218,18 +219,15 @@ const DrawingDemo: NextPage<Props> = ({ isSp }) => {
         <Flex flexWrap="wrap">
           <Box width={[1, 1 / 2, 1 / 2]} pr={3}>
             <Flex alignItems="center">
-              <Label fontSize={[2, 1, 1]} width={3 / 10} htmlFor="strokeWidth">
-                STROKE WIDTH:
-              </Label>
-              <Slider
-                width={5 / 10}
+              <label htmlFor="strokeWidth">STROKE WIDTH:</label>
+              <input
                 min="1"
                 max="20"
                 step="1"
                 value={penWidth}
                 onChange={handlePenWidth}
               />
-              <Input
+              <input
                 width="auto"
                 id="strokeWidth"
                 type="number"
@@ -241,24 +239,16 @@ const DrawingDemo: NextPage<Props> = ({ isSp }) => {
               />
             </Flex>
             <Flex alignItems="center">
-              <Label
-                width={3 / 10}
-                fontSize={[2, 1, 1]}
-                htmlFor="throttleDelay"
-              >
-                THROTTLE DELAY:
-              </Label>
-              <Slider
-                width={5 / 10}
+              <label htmlFor="throttleDelay">THROTTLE DELAY:</label>
+              <input
                 type="range"
                 min="0"
                 max="300"
                 step="5"
                 value={delay}
                 onChange={handleChangeDelay}
               />
-              <Input
-                width="auto"
+              <input
                 id="throttleDelay"
                 type="number"
                 min="0"
@@ -269,48 +259,49 @@ const DrawingDemo: NextPage<Props> = ({ isSp }) => {
               />
             </Flex>
             <Flex pt={3} justifyContent="start">
-              <Label htmlFor="curve">
-                <Checkbox
+              <label htmlFor="curve">
+                <input
+                  type="checkbox"
                   id="curve"
                   checked={curve}
                   onChange={handleChangeCiruler}
                 />
                 Curve
-              </Label>
+              </label>
               {!rainbowPen && (
-                <Label htmlFor="close">
-                  <Checkbox
+                <label htmlFor="close">
+                  <input
+                    type="checkbox"
                     id="close"
                     checked={close}
                     onChange={handleChangeClose}
                   />
                   Close
-                </Label>
+                </label>
               )}
-              <Label htmlFor="rainbow">
-                <Checkbox
+              <label htmlFor="rainbow">
+                <input
+                  type="checkbox"
                   id="rainbow"
                   checked={rainbowPen}
                   onChange={handleChangeRainbowPen}
                 />
                 Rainbow pen
-              </Label>
+              </label>
             </Flex>
           </Box>
           {!rainbowPen && (
             <Box width={[1, 1 / 2, 1 / 2]}>
-              <Label fontSize={0} htmlFor="fill">
+              <label htmlFor="fill">
                 FILL:
-                <Input
-                  p={1}
-                  fontSize={0}
+                <input
                   id="fill"
                   type="text"
                   placeholder="#000 or black or rgba(0,0,0,1)"
                   value={fill}
                   onChange={handleChangeFill}
                 />
-              </Label>
+              </label>
               <Flex flexWrap="wrap">
                 {colorList.map((col: string) => (
                   <Box
@@ -327,22 +318,16 @@ const DrawingDemo: NextPage<Props> = ({ isSp }) => {
                   />
                 ))}
               </Flex>
-              <Label
-                fontSize={0}
-                htmlFor="penColor"
-                style={{ whiteSpace: 'nowrap' }}
-              >
+              <label htmlFor="penColor" style={{ whiteSpace: 'nowrap' }}>
                 PEN COLOR:
-                <Input
-                  fontSize={0}
-                  p={1}
+                <input
                   id="penColor"
                   type="text"
                   placeholder="#000 or black or rgba(0,0,0,1)"
                   value={penColor}
                   onChange={handleChangePenColor}
                 />
-              </Label>
+              </label>
               <Flex flexWrap="wrap">
                 {colorList.map((col: string) => (
                   <Box
@@ -402,7 +387,7 @@ const DrawingDemo: NextPage<Props> = ({ isSp }) => {
               <Text fontSize={0}>
                 Svg exported by this library can be read.
               </Text>
-              <Input
+              <input
                 type="file"
                 onChange={handleFiles}
                 multiple

diff --git a/package.json b/package.json
@@ -37,8 +37,8 @@
     "@testing-library/user-event": "14.2.0",
     "@types/jest": "27.5.2",
     "@types/node": "16.11.39",
-    "@types/react": "17.0.45",
-    "@types/react-dom": "17.0.17",
+    "@types/react": "18.0.12",
+    "@types/react-dom": "18.0.5",
     "@typescript-eslint/eslint-plugin": "5.8.1",
     "@typescript-eslint/parser": "5.8.1",
     "@typescript-eslint/typescript-estree": "5.8.1",
@@ -60,8 +60,8 @@
     "png.js": "0.2.1",
     "prettier": "2.6.2",
     "prettier-plugin-jsdoc": "0.3.38",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
     "rimraf": "3.0.2",
     "rollup": "2.75.6",
     "rollup-plugin-babel": "4.4.0",