diff --git a/app/package.json b/app/package.json index 3b7ff0c..11ea4b1 100644 --- a/app/package.json +++ b/app/package.json @@ -11,9 +11,10 @@ "@types/node": "^12.0.0", "@types/react": "^16.9.0", "@types/react-dom": "^16.9.0", - "react": "^16.12.0", - "react-dom": "^16.12.0", - "react-hook-form": "^6.0.0-rc.4", + "little-state-machine": "^4.0.0", + "react": "16.13.1", + "react-dom": "16.13.1", + "react-hook-form": "6.5.0", "react-scripts": "3.3.1", "typescript": "~3.7.2" }, diff --git a/app/src/App.tsx b/app/src/App.tsx index bdce5e0..74fb494 100644 --- a/app/src/App.tsx +++ b/app/src/App.tsx @@ -22,7 +22,7 @@ const App = () => { return (
-
console.log(d))}> + console.log(d))}>

🔧 @@ -33,7 +33,10 @@ const App = () => { React Hook Form DevTools to help debug forms.

- + diff --git a/app/yarn.lock b/app/yarn.lock index e1408db..606f835 100644 --- a/app/yarn.lock +++ b/app/yarn.lock @@ -6271,6 +6271,11 @@ little-state-machine@^3.0.1: resolved "https://registry.yarnpkg.com/little-state-machine/-/little-state-machine-3.0.2.tgz#7ea94c2c1867b5792dd4eaa710a79d13990980c0" integrity sha512-Y7fa32N1NCCEfNynsri+v4igwf0Mu9fNWJuJkgHKrII3DX25SVMXU7tsspTmzzhwjHndnlZGIoELNaclyTjFjw== +little-state-machine@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/little-state-machine/-/little-state-machine-4.0.0.tgz#884dca86a74d70243ea55da74182a06aeb84c213" + integrity sha512-IsG03r81UpHzU/bFZu+F/KX2WTIpvKGyMxo1QBSym0wEsphp3JKJrMqxvIRvwPyscCxzt0nP40VROSby9VQf0w== + load-json-file@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-2.0.0.tgz#7947e42149af80d696cbf797bcaabcfe1fe29ca8" @@ -8420,25 +8425,25 @@ react-dev-utils@^10.1.0: strip-ansi "6.0.0" text-table "0.2.0" -react-dom@^16.12.0: - version "16.12.0" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.12.0.tgz#0da4b714b8d13c2038c9396b54a92baea633fe11" - integrity sha512-LMxFfAGrcS3kETtQaCkTKjMiifahaMySFDn71fZUNpPHZQEzmk/GiAeIT8JSOrHB23fnuCOMruL2a8NYlw+8Gw== +react-dom@16.13.1: + version "16.13.1" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f" + integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" prop-types "^15.6.2" - scheduler "^0.18.0" + scheduler "^0.19.1" react-error-overlay@^6.0.5: version "6.0.5" resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.5.tgz#55d59c2a3810e8b41922e0b4e5f85dcf239bd533" integrity sha512-+DMR2k5c6BqMDSMF8hLH0vYKtKTeikiFW+fj0LClN+XZg4N9b8QUAdHC62CGWNLTi/gnuuemNcNcTFrCvK1f+A== -react-hook-form@^6.0.0-rc.4: - version "6.0.0-rc.4" - resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-6.0.0-rc.4.tgz#83889afbf8aeda7741e983e7a512e42dfd6d13af" - integrity sha512-22t+lh8bDv2ajY66QGsfoMhdJa+G4Qlm7XbnCzw24+CaZnr/UoMNAubeVFVkrQB4COXoErA94L0aMt19BqGkmg== +react-hook-form@6.5.0: + version "6.5.0" + resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-6.5.0.tgz#9442797f9f05644829125772b2656d3da19f732e" + integrity sha512-DRziWoDvmwNIwBk6tkBN/fPeCgbtYHr1tIlVVd0ihmQg9Fv+gjOs0BU0D3o7HrKDeKwDA8pnp4tuEwxe8qg9TA== react-is@^16.8.1, react-is@^16.8.4: version "16.12.0" @@ -8510,10 +8515,10 @@ react-simple-animate@^3.3.8: resolved "https://registry.yarnpkg.com/react-simple-animate/-/react-simple-animate-3.3.8.tgz#f06cf7dd2a95d800d045eb16283bd08ef894ec44" integrity sha512-DR/UvAFb2YDk6CIBvGpkcI49Q19aNz6/AQG4QWTZRIZOH+t5ox9NgrugiRIH924vecRDbBqaJBuxmLiZW/id8Q== -react@^16.12.0: - version "16.12.0" - resolved "https://registry.yarnpkg.com/react/-/react-16.12.0.tgz#0c0a9c6a142429e3614834d5a778e18aa78a0b83" - integrity sha512-fglqy3k5E+81pA8s+7K0/T3DBCF0ZDOher1elBFzF7O6arXJgzyu/FW+COxFvAWXJoJN9KIZbT2LXlukwphYTA== +react@16.13.1: + version "16.13.1" + resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e" + integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" @@ -8994,10 +8999,10 @@ saxes@^3.1.9: dependencies: xmlchars "^2.1.1" -scheduler@^0.18.0: - version "0.18.0" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.18.0.tgz#5901ad6659bc1d8f3fdaf36eb7a67b0d6746b1c4" - integrity sha512-agTSHR1Nbfi6ulI0kYNK0203joW2Y5W4po4l+v03tOoiJKpTBbxpNhWDvqc/4IcOw+KLmSiQLTasZ4cab2/UWQ== +scheduler@^0.19.1: + version "0.19.1" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196" + integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" diff --git a/package.json b/package.json index fad37c6..4a162cf 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "clean": "rimraf dist", "prebuild": "npm run clean", "build": "node rollup/writeCjsEntryFile.js && rollup -c", + "build:watch": "node rollup/writeCjsEntryFile.js && rollup -c -w", "lint": "eslint '**/*.{js,ts,tsx}'", "lint:fix": "npm run lint -- --fix", "lint:types": "tsc --noEmit", @@ -59,6 +60,7 @@ "@types/lodash": "^4.14.152", "little-state-machine": "^3.0.1", "lodash": "^4.17.15", + "re-resizable": "^6.9.0", "react-simple-animate": "^3.3.8" }, "devDependencies": { @@ -84,7 +86,7 @@ "prettier": "^2.0.5", "react": "^16.13.1", "react-dom": "^16.13.1", - "react-hook-form": "^6.5.0", + "react-hook-form": "6.5.0", "rimraf": "^3.0.2", "rollup": "^2.10.7", "rollup-plugin-peer-deps-external": "^2.2.2", diff --git a/src/__snapshots__/devTool.test.tsx.snap b/src/__snapshots__/devTool.test.tsx.snap index b9193fc..ea20161 100644 --- a/src/__snapshots__/devTool.test.tsx.snap +++ b/src/__snapshots__/devTool.test.tsx.snap @@ -6,198 +6,190 @@ exports[`DevTool render correctly 1`] = ` style="position: fixed; top: 0px; right: 0px; transform: translateX(0); z-index: 99999; transition: all 0.2s linear 0s;" >
-
-

- - â–  - - RHF DevTools -

- -
+
+ + + + +
+
+

-
- + + â–  + + RHF DevTools +

- -
+
-
-
+ ♺ UPDATE + + + +
+
+
- - - - - - - -
+
+ - -
+
-
-
-
-
+
+
+ test +
+
+
+ +
- - - - - - - -
+
+ - -
+
- -
- -
-
+
+ test2 +
+ + + + +
- - â–  - - Form State: ON - + + â–  + + Form State: ON + +
- -
-
+
- - - -
diff --git a/src/__snapshots__/panelTable.test.tsx.snap b/src/__snapshots__/panelTable.test.tsx.snap index 68393f0..d59cd11 100644 --- a/src/__snapshots__/panelTable.test.tsx.snap +++ b/src/__snapshots__/panelTable.test.tsx.snap @@ -5,46 +5,35 @@ exports[`PanelTable should render collapsed 1`] = `
- - - - - - - -
- - - -

- test -

-
+
+ + +
+
+ test +
+
`; diff --git a/src/devTool.tsx b/src/devTool.tsx index 2134a17..ab811b9 100644 --- a/src/devTool.tsx +++ b/src/devTool.tsx @@ -4,8 +4,8 @@ import { createStore, setStorageType, } from 'little-state-machine'; -import { Control } from 'react-hook-form'; import { DevToolUI } from './devToolUI'; +import { Control } from 'react-hook-form'; if (typeof window !== 'undefined') { setStorageType(window.localStorage); diff --git a/src/devToolUI.tsx b/src/devToolUI.tsx index 610828e..70f8676 100644 --- a/src/devToolUI.tsx +++ b/src/devToolUI.tsx @@ -9,10 +9,18 @@ import { PanelShadow } from './panelShadow'; import { Button } from './styled'; import { useStateMachine } from 'little-state-machine'; import { setVisible } from './settingAction'; +import { Resizable } from 're-resizable'; + +const DEFAULT_PANEL_WIDTH = 400; +const SHADOW_OVERHANG = 7; export const DevToolUI = ({ control }: { control: Control }) => { const { state, action } = useStateMachine(setVisible); + const [panelWidth, setPanelWidth] = React.useState( + DEFAULT_PANEL_WIDTH + SHADOW_OVERHANG, + ); + return ( <> { top: 0, right: 0, position: 'fixed', - transform: 'translateX(280px)', + transform: `translateX(${panelWidth}px)`, zIndex: 99999, }} > -
setPanelWidth(panelWidth + d.width)} + enable={{ + top: false, + right: false, + bottom: false, + left: true, + topRight: false, + bottomRight: false, + bottomLeft: false, + topLeft: false, + }} + minWidth={200} style={{ position: 'fixed', - height: '100vh', - width: 250, - zIndex: 99999, - background: colors.buttonBlue, - top: 0, right: 0, - display: 'grid', - textAlign: 'left', - color: 'white', - fontSize: 14, - gridTemplateRows: '40px auto', - fontFamily: - "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif", + top: 0, + display: 'flex', + flexDirection: 'column', }} > -
- -
- + + +
+
+ +
+ {!state.visible && ( diff --git a/src/panelShadow.tsx b/src/panelShadow.tsx index b942565..33a099d 100644 --- a/src/panelShadow.tsx +++ b/src/panelShadow.tsx @@ -6,86 +6,90 @@ type Props = { visible: boolean; }; +const SHADOW_LEFT_OVERRIDE = 247; + export const PanelShadow = ({ visible }: Props) => ( - -
+
- + > +
+ - - - -
- + + + +
+ +
); diff --git a/src/panelTable.tsx b/src/panelTable.tsx index ff9e3b2..78a092d 100644 --- a/src/panelTable.tsx +++ b/src/panelTable.tsx @@ -4,7 +4,7 @@ import isUndefined from 'lodash/isUndefined'; import isObject from 'lodash/isObject'; import get from 'lodash/get'; import colors from './colors'; -import { Button, Table, paraGraphDefaultStyle } from './styled'; +import { Button, Table, paraGraphDefaultStyle, Label, Value } from './styled'; type Props = { isNative: boolean; @@ -73,195 +73,114 @@ const PanelTable = ({ easeType="ease-in" delay={index * 0.1} > - - - - - - - +
- - - -

- {name} -

-
+ + {name} {!collapse && ( - + <> {type && ( - - - - + + )} {errorType && ( - - - - + + {errorType} + )} {errorMessage && ( - - - - + + )} {!isUndefined(value) && ( - - - - + + )} {readFormStateRef.current.touched && ( - - - - + + )} {(readFormStateRef.current as any).dirtyFields && ( - - - - + + )} - + )}
+ <> + + {type} -
+ <> + - {errorType} -
+ + {errorMessage.trim()} -
+ <> + + {value} -
+ <> + + + {isTouched ? 'true' : 'false'} -
+ <> + + + {isDirty ? 'true' : 'false'} -
diff --git a/src/styled.tsx b/src/styled.tsx index 48253cc..70b5d31 100644 --- a/src/styled.tsx +++ b/src/styled.tsx @@ -57,12 +57,40 @@ const Input = styled.input` } `; -const Table = styled.table` +const Table = styled.div<{ hasError?: boolean }>` transition: 0.3s all; + display: grid; + grid-template-columns: 120px 5fr; + grid-template-rows: auto; + row-gap: 2px; + padding: 4px; &:hover { background: ${colors.primary}; } + + ${({ hasError }) => `2px solid ${ + hasError ? colors.secondary : colors.buttonBlue + }; + + `} +`; + +export const Label = styled.div<{ right?: boolean }>` + padding-right: 5px; + + ${({ right }) => + right && + ` + font-weight: 500; + text-align: right; + `} +`; + +export const Value = styled.div` + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; `; export { Button, CircleButton, Input, Table }; diff --git a/yarn.lock b/yarn.lock index 3d5813e..136fb0c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1062,6 +1062,13 @@ dependencies: "@types/react" "*" +"@types/react-resizable@^1.7.2": + version "1.7.2" + resolved "https://registry.yarnpkg.com/@types/react-resizable/-/react-resizable-1.7.2.tgz#ff7f6d67394abb6f64207fcc574ffccb932d8a97" + integrity sha512-6c6L94+VOksr9838LDrlYeucic2+0qkGnwolGE77YJztYHCWSucQV0e9+Qyl+uHpJTBRS95A5JESBg5NgCAC3A== + dependencies: + "@types/react" "*" + "@types/react@*": version "16.9.19" resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.19.tgz#c842aa83ea490007d29938146ff2e4d9e4360c40" @@ -1712,6 +1719,11 @@ class-utils@^0.3.5: isobject "^3.0.0" static-extend "^0.1.1" +classnames@^2.2.5: + version "2.2.6" + resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce" + integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q== + clean-stack@^2.0.0: version "2.2.0" resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b" @@ -2550,6 +2562,11 @@ fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6: resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917" integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc= +fast-memoize@^2.5.1: + version "2.5.2" + resolved "https://registry.yarnpkg.com/fast-memoize/-/fast-memoize-2.5.2.tgz#79e3bb6a4ec867ea40ba0e7146816f6cdce9b57e" + integrity sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw== + fastq@^1.6.0: version "1.8.0" resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.8.0.tgz#550e1f9f59bbc65fe185cb6a9b4d95357107f481" @@ -3911,9 +3928,9 @@ listr2@^2.1.0: through "^2.3.8" little-state-machine@^3.0.1: - version "3.0.1" - resolved "https://registry.yarnpkg.com/little-state-machine/-/little-state-machine-3.0.1.tgz#08ab1e1d6ac1d68a72d4a11e0f13df30c988064a" - integrity sha512-/0mabJirUiD4sYdj8oI5mtJ/zRGUIfYxq7em2PiaUE5+DO9r9CRlcMgD5KYJx0sahe8V+5VMtW5PQnGsf229jA== + version "3.1.4" + resolved "https://registry.yarnpkg.com/little-state-machine/-/little-state-machine-3.1.4.tgz#b29c396f732976cc327a612ef9a7a53f3f3520ab" + integrity sha512-gYlLCj6oUME0NG34/2O0Ljy52qYYyYDJ5yiAuq2ijbaRlBKIqtQQkKkEYn0KfjYXCE693j+bdY22EyZin25Bhw== load-json-file@^4.0.0: version "4.0.0" @@ -4715,7 +4732,7 @@ prompts@^2.0.1: kleur "^3.0.3" sisteransi "^1.0.3" -prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@15.x, prop-types@^15.5.4, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -4764,6 +4781,13 @@ randombytes@^2.1.0: dependencies: safe-buffer "^5.1.0" +re-resizable@^6.9.0: + version "6.9.0" + resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.9.0.tgz#9c3059b389ced6ade602234cc5bb1e12d231cd47" + integrity sha512-3cUDG81ylyqI0Pdgle/RHwwRYq0ORZzsUaySOCO8IbEtNyaRtrIHYm/jMQ5pjcNiKCxR3vsSymIQZHwJq4gg2Q== + dependencies: + fast-memoize "^2.5.1" + react-dom@^16.13.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f" @@ -4774,21 +4798,58 @@ react-dom@^16.13.1: prop-types "^15.6.2" scheduler "^0.19.1" -react-hook-form@^6.5.0: - version "6.5.1" - resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-6.5.1.tgz#504389d09970f2e7fc8c5ec8db2c551c863bcde9" - integrity sha512-MakeW3CRj4n1FW4HuliM8vlWup+5keUWDduf5lPlori6OWQ616xGzxrUOKoDUIGh0ERgCebObrLb5UiFDlSxAQ== +react-draggable@^4.0.3: + version "4.4.3" + resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.3.tgz#0727f2cae5813e36b0e4962bf11b2f9ef2b406f3" + integrity sha512-jV4TE59MBuWm7gb6Ns3Q1mxX8Azffb7oTtDtBgFkxRvhDp38YAARmRplrj0+XGkhOJB5XziArX+4HUUABtyZ0w== + dependencies: + classnames "^2.2.5" + prop-types "^15.6.0" + +react-hook-form@6.5.0: + version "6.5.0" + resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-6.5.0.tgz#9442797f9f05644829125772b2656d3da19f732e" + integrity sha512-DRziWoDvmwNIwBk6tkBN/fPeCgbtYHr1tIlVVd0ihmQg9Fv+gjOs0BU0D3o7HrKDeKwDA8pnp4tuEwxe8qg9TA== react-is@^16.12.0, react-is@^16.8.1, react-is@^16.8.4: version "16.12.0" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c" integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q== +react-lifecycles-compat@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" + integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== + +react-resizable@^1.11.0: + version "1.11.0" + resolved "https://registry.yarnpkg.com/react-resizable/-/react-resizable-1.11.0.tgz#0b237c4aff16937b7663de1045861749683227ad" + integrity sha512-VoGz2ddxUFvildS8r8/29UZJeyiM3QJnlmRZSuXm+FpTqq/eIrMPc796Y9XQLg291n2hFZJtIoP1xC3hSTw/jg== + dependencies: + prop-types "15.x" + react-draggable "^4.0.3" + react-simple-animate@^3.3.8: version "3.3.8" resolved "https://registry.yarnpkg.com/react-simple-animate/-/react-simple-animate-3.3.8.tgz#f06cf7dd2a95d800d045eb16283bd08ef894ec44" integrity sha512-DR/UvAFb2YDk6CIBvGpkcI49Q19aNz6/AQG4QWTZRIZOH+t5ox9NgrugiRIH924vecRDbBqaJBuxmLiZW/id8Q== +react-split-pane@^0.1.92: + version "0.1.92" + resolved "https://registry.yarnpkg.com/react-split-pane/-/react-split-pane-0.1.92.tgz#68242f72138aed95dd5910eeb9d99822c4fc3a41" + integrity sha512-GfXP1xSzLMcLJI5BM36Vh7GgZBpy+U/X0no+VM3fxayv+p1Jly5HpMofZJraeaMl73b3hvlr+N9zJKvLB/uz9w== + dependencies: + prop-types "^15.7.2" + react-lifecycles-compat "^3.0.4" + react-style-proptype "^3.2.2" + +react-style-proptype@^3.2.2: + version "3.2.2" + resolved "https://registry.yarnpkg.com/react-style-proptype/-/react-style-proptype-3.2.2.tgz#d8e998e62ce79ec35b087252b90f19f1c33968a0" + integrity sha512-ywYLSjNkxKHiZOqNlso9PZByNEY+FTyh3C+7uuziK0xFXu9xzdyfHwg4S9iyiRRoPCR4k2LqaBBsWVmSBwCWYQ== + dependencies: + prop-types "^15.5.4" + react@^16.13.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"