Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update react v18 #525

Merged
merged 3 commits into from
Jun 8, 2022
Merged

Update react v18 #525

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d8e9d89
feat: update react v18
kmkzt Jun 8, 2022
8265694
fix: fix types
kmkzt Jun 8, 2022
a7dc7a0
fix: remove rebass/forms
kmkzt Jun 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions examples/docs/components/Layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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']}>
Expand Down
8 changes: 3 additions & 5 deletions examples/docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions examples/docs/pages/_app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export default class MyApp extends App {

return (
<StrictMode>
{/** @ts-expect-error */}
<ThemeProvider theme={theme}>
<Component {...pageProps} />
</ThemeProvider>
Expand Down
16 changes: 13 additions & 3 deletions examples/docs/pages/_document.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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

Expand All @@ -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()
}
Expand Down
27 changes: 12 additions & 15 deletions examples/docs/pages/demo/animation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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']}>
Expand Down
3 changes: 1 addition & 2 deletions examples/docs/pages/demo/img-trace.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { Input } from '@rebass/forms/styled-components'
import { Renderer, download } from '@svg-drawing/core'
import {
ImgTrace,
Expand Down Expand Up @@ -250,7 +249,7 @@ export default () => {
<Box as="fieldset">
<Heading>Select Image</Heading>
<Box>
<Input
<input
type="text"
placeholder="input image url"
value={inputUrl}
Expand Down
73 changes: 29 additions & 44 deletions examples/docs/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = [
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down
8 changes: 4 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
Loading