Merge pull request #2215 from system-ui/bump-deps

system-ui · Apr 30, 2022 · fca88a4 · fca88a4
2 parents 5053d4d + 30e6d7a
commit fca88a4
Show file tree

Hide file tree

Showing 50 changed files with 2,769 additions and 1,106 deletions.
diff --git a/examples/create-react-app/package.json b/examples/create-react-app/package.json
@@ -1,11 +1,11 @@
 {
   "private": true,
   "name": "create-react-app-theme-ui-example",
-  "version": "0.4.0-alpha.0",
+  "version": "1.0.0",
   "dependencies": {
     "mdx.macro": "^0.2.8",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "theme-ui": "latest"
   },
   "scripts": {

diff --git a/examples/custom-pragma/package.json b/examples/custom-pragma/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "custom-pragma-example",
-  "version": "0.4.0",
+  "version": "0.1.0",
   "main": "index.js",
   "author": "Brent Jackson <jxnblk@gmail.com>",
   "license": "MIT",
@@ -13,10 +13,10 @@
   "dependencies": {
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "gatsby": "^4.10.3",
+    "gatsby": "^4.13.1",
     "gatsby-plugin-mdx": "^3.10.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "theme-ui": "latest"
   }
 }
diff --git a/examples/dark-mode/package.json b/examples/dark-mode/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "dark-mode-theme-ui-example",
-  "version": "0.4.0-rc.0",
+  "version": "0.1.0",
   "main": "index.js",
   "author": "Brent Jackson <jxnblk@gmail.com>",
   "license": "MIT",
@@ -13,10 +13,10 @@
   "dependencies": {
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "gatsby": "^2.6.3",
+    "gatsby": "^4.13.1",
     "gatsby-plugin-mdx": "^1.6.0",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "theme-ui": "latest"
   }
 }
diff --git a/examples/gatsby-plugin/package.json b/examples/gatsby-plugin/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "gatsby-plugin-theme-ui-example",
-  "version": "0.4.0-rc.0",
+  "version": "0.1.0",
   "main": "index.js",
   "author": "Brent Jackson <jxnblk@gmail.com>",
   "license": "MIT",
@@ -15,11 +15,11 @@
     "@emotion/react": "^11.8.1",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "gatsby": "^4.7.2",
+    "gatsby": "^4.13.1",
     "gatsby-plugin-mdx": "^3.7.1",
     "gatsby-plugin-theme-ui": "latest",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "theme-ui": "latest"
   }
 }
diff --git a/examples/gatsby/package.json b/examples/gatsby/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "gatsby-theme-ui-example",
-  "version": "0.4.0-rc.0",
+  "version": "0.1.0",
   "main": "index.js",
   "author": "Brent Jackson <jxnblk@gmail.com>",
   "license": "MIT",
@@ -15,10 +15,10 @@
     "@emotion/react": "^11.8.1",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "gatsby": "^4.7.2",
+    "gatsby": "^4.13.1",
     "gatsby-plugin-mdx": "^3.7.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "theme-ui": "latest"
   },
   "devDependencies": {

diff --git a/examples/prism/package.json b/examples/prism/package.json
@@ -13,12 +13,12 @@
   "dependencies": {
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "gatsby": "^2.6.3",
+    "gatsby": "^4.13.1",
     "gatsby-plugin-mdx": "^1.6.0",
     "gatsby-remark-prismjs": "^3.2.9",
     "prismjs": "^1.16.0",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "theme-ui": "latest"
   }
 }
diff --git a/examples/typography/package.json b/examples/typography/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "typography-js-theme-ui-example",
-  "version": "0.4.0-rc.0",
+  "version": "0.1.0",
   "main": "index.js",
   "author": "Brent Jackson <jxnblk@gmail.com>",
   "license": "MIT",
@@ -13,12 +13,12 @@
   "dependencies": {
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "gatsby": "^2.6.3",
+    "gatsby": "^4.13.1",
     "gatsby-plugin-google-fonts": "^1.0.0",
     "gatsby-plugin-mdx": "^1.6.0",
     "lodash.merge": "^4.6.1",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "theme-ui": "latest",
     "theme-ui-typography": "^0.1.7",
     "typography-theme-fairy-gates": "^0.16.19"

diff --git a/package.json b/package.json
@@ -47,12 +47,15 @@
     "@codechecks/build-size-watcher": "^0.1.0",
     "@codechecks/client": "0.1.10-beta",
     "@emotion/jest": "^11.6.0",
+    "@emotion/react": "^11",
+    "@mdx-js/react": "^1 || ^2",
     "@preconstruct/cli": "^2.1.5",
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/react": "^13.0.0",
     "@types/jest": "^27.0.3",
+    "@types/mdx-js__react": "^1 || ^2",
     "@types/node": "^17.0.5",
-    "@types/react-dom": "^17.0.11",
-    "@types/react-test-renderer": "^17.0.1",
+    "@types/react-dom": "^18.0.3",
+    "@types/react-test-renderer": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "auto": "^10.32.3",
@@ -61,22 +64,20 @@
     "cross-env": "^7.0.3",
     "egzek": "^1.2.0",
     "husky": ">=7.0.4",
-    "jest": "^27.1.1",
-    "jest-canvas-mock": "^2.3.1",
+    "jest": "^28.0.3",
+    "jest-canvas-mock": "^2.4.0",
+    "jest-environment-jsdom": "^28.0.2",
     "jest-mock-console": "^1.0.1",
     "lerna": "^4.0.0",
     "lint-staged": "12.3.2",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.2.1",
-    "react-test-renderer": "^17.0.2",
+    "react-test-renderer": "^18.0.0",
     "rimraf": "^3.0.2",
-    "ts-jest": "^27.0.7",
+    "ts-jest": "^28.0.0-next.3",
     "ts-toolbelt": "^9.6.0",
     "typecov": "^0.2.3",
-    "typescript": "^4",
-    "@mdx-js/react": "^1 || ^2",
-    "@types/mdx-js__react": "^1 || ^2",
-    "@emotion/react": "^11"
+    "typescript": "^4"
   },
   "husky": {
     "hooks": {

diff --git a/packages/color-modes/package.json b/packages/color-modes/package.json
@@ -20,10 +20,10 @@
   },
   "peerDependencies": {
     "@emotion/react": "^11",
-    "react": ">16"
+    "react": ">=18"
   },
   "devDependencies": {
-    "react": "^17.0.1"
+    "react": "^18.1.0"
   },
   "gitHead": "621199460fa3bdb0100748441e62517b7529b8c8"
 }
diff --git a/packages/color-modes/test/index.tsx b/packages/color-modes/test/index.tsx
@@ -154,7 +154,7 @@ test('color mode is passed through theme context', () => {
     </ThemeProvider>
   )
   const button = tree.getByText('test')
-  button.click()
+  act(() => button.click())
   expect(mode).toBe('dark')
   expect(tree.getByText('test')).toHaveStyleRule('color', 'cyan')
 })
@@ -636,7 +636,7 @@ test('dot notation works with color modes', () => {
     </ThemeProvider>
   )
   const button = root.getByText('test')
-  button.click()
+  act(() => button.click())
   expect(button).toHaveStyleRule('color', 'tomato')
 })
 
@@ -678,7 +678,7 @@ test('dot notation works with color modes and custom properties', () => {
     </ThemeProvider>
   )
   const button = root.getByText('test')
-  button.click()
+  act(() => button.click())
   expect(button).toHaveStyleRule('color', 'var(--theme-ui-colors-header-title)')
 })
 

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -15,7 +15,7 @@
   },
   "peerDependencies": {
     "@emotion/react": "^11",
-    "react": ">16"
+    "react": ">=18"
   },
   "publishConfig": {
     "access": "public"
@@ -24,6 +24,6 @@
   "license": "MIT",
   "repository": "system-ui/theme-ui",
   "devDependencies": {
-    "react": "^17.0.1"
+    "react": "^18.1.0"
   }
 }
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -20,7 +20,7 @@
   },
   "peerDependencies": {
     "@emotion/react": "^11",
-    "react": ">16"
+    "react": ">=18"
   },
   "preconstruct": {
     "entrypoints": [

diff --git a/packages/docs/gatsby-browser.js b/packages/docs/gatsby-browser.js
@@ -5,4 +5,8 @@ import * as React from 'react'
 
 import { WrapPageElement } from './src'
 
-export const wrapPageElement = (props) => <WrapPageElement {...props} />
+export const wrapPageElement = (props) => (
+  <React.StrictMode>
+    <WrapPageElement {...props} />
+  </React.StrictMode>
+)
diff --git a/packages/docs/gatsby-config.js b/packages/docs/gatsby-config.js
@@ -23,4 +23,10 @@ module.exports = {
       },
     },
   ],
+  flags: {
+    PARALLEL_SOURCING: true,
+    FAST_DEV: true,
+    DEV_SSR: true,
+    DEV_WEBPACK_CACHE: true,
+  },
 }
diff --git a/packages/docs/gatsby-ssr.js b/packages/docs/gatsby-ssr.js
@@ -5,7 +5,11 @@ import * as React from 'react'
 
 import { WrapPageElement, setDocSearchComponents } from './src'
 
-export const wrapPageElement = (props) => <WrapPageElement {...props} />
+export const wrapPageElement = (props) => (
+  <React.StrictMode>
+    <WrapPageElement {...props} />
+  </React.StrictMode>
+)
 
 export const onRenderBody = (args) => {
   setDocSearchComponents(args)

diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -17,7 +17,7 @@
     "icon": "npx repng src/components/logo.js -d static -f icon.png -w=32 -h=32 --props='{\"size\":32}'"
   },
   "dependencies": {
-    "@emotion/react": "^11.6.0",
+    "@emotion/react": "^11.9.0",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
     "@theme-ui/color": "0.14.4",
@@ -32,7 +32,7 @@
     "@theme-ui/typography": "0.14.4",
     "copy-to-clipboard": "^3.2.0",
     "eslint-config-react-app": "^6.0.0",
-    "gatsby": "^4.2.0",
+    "gatsby": "^4.13.1",
     "gatsby-plugin-catch-links": "^4.2.0",
     "gatsby-plugin-compile-es6-packages": "^2.1.1",
     "gatsby-plugin-mdx": "3.2.0",
@@ -42,8 +42,8 @@
     "lodash.merge": "^4.6.1",
     "lodash.omit": "^4.5.0",
     "prismjs": "^1.16.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "react-helmet": "^6.1.0",
     "react-live": "^2.1.2",
     "remark-slug": "^6",

diff --git a/packages/docs/src/components/layout.js b/packages/docs/src/components/layout.js
@@ -43,7 +43,6 @@ const getModeName = (mode) => {
 
 export default function DocsLayout(props) {
   const [menuOpen, setMenuOpen] = useState(false)
-  const nav = useRef(null)
   const [mode, setMode] = useColorMode()
 
   const { pathname } = props.location
@@ -85,9 +84,6 @@ export default function DocsLayout(props) {
               <MenuButton
                 onClick={(e) => {
                   setMenuOpen(!menuOpen)
-                  if (!nav.current) return
-                  const navLink = nav.current.querySelector('a')
-                  if (navLink) navLink.focus()
                 }}
               />
               <Link to="/" sx={{ variant: 'links.nav' }}>
@@ -125,7 +121,6 @@ export default function DocsLayout(props) {
           }}
         >
           <Sidebar
-            ref={nav}
             role="navigation"
             onFocus={(e) => {
               setMenuOpen(true)