chore(deps): bump cypress from 9.6.0 to 10.4.0

.github/workflows/e2e.yml

@@ -32,7 +32,7 @@ jobs:
       - run: yarn build # build preconstruct libs
       - run: yarn build:docs
 
-      - uses: cypress-io/github-action@v2
+      - uses: cypress-io/github-action@v4
         with:
           record: true
           parallel: true

examples/custom-pragma/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "gatsby": "^4.13.1",
+    "gatsby": "^4.20.0",
     "gatsby-plugin-mdx": "^3.10.2",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",

examples/dark-mode/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "gatsby": "^4.13.1",
+    "gatsby": "^4.20.0",
     "gatsby-plugin-mdx": "^1.6.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",

examples/gatsby-plugin/package.json

@@ -15,7 +15,7 @@
     "@emotion/react": "^11.8.1",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "gatsby": "^4.13.1",
+    "gatsby": "^4.20.0",
     "gatsby-plugin-mdx": "^3.7.1",
     "gatsby-plugin-theme-ui": "latest",
     "react": "^18.1.0",

examples/gatsby/package.json

@@ -15,7 +15,7 @@
     "@emotion/react": "^11.8.1",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "gatsby": "^4.13.1",
+    "gatsby": "^4.20.0",
     "gatsby-plugin-mdx": "^3.7.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",

examples/prism/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "gatsby": "^4.13.1",
+    "gatsby": "^4.20.0",
     "gatsby-plugin-mdx": "^1.6.0",
     "gatsby-remark-prismjs": "^3.2.9",
     "prismjs": "^1.16.0",

examples/typography/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "gatsby": "^4.13.1",
+    "gatsby": "^4.20.0",
     "gatsby-plugin-google-fonts": "^1.0.0",
     "gatsby-plugin-mdx": "^1.6.0",
     "lodash.merge": "^4.6.1",

packages/docs/package.json

@@ -32,7 +32,7 @@
     "@theme-ui/typography": "0.14.7",
     "copy-to-clipboard": "^3.2.0",
     "eslint-config-react-app": "^6.0.0",
-    "gatsby": "^4.13.1",
+    "gatsby": "^4.20.0",
     "gatsby-plugin-catch-links": "^4.2.0",
     "gatsby-plugin-compile-es6-packages": "^2.1.1",
     "gatsby-plugin-mdx": "3.2.0",

packages/e2e/cypress.config.js

@@ -0,0 +1,23 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  screenshotsFolder: 'screenshots',
+  videosFolder: 'videos',
+  downloadsFolder: 'downloads',
+  fixturesFolder: 'fixtures',
+  retries: {
+    runMode: 1,
+    openMode: 3,
+  },
+  projectId: 'fmfid1',
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require('./plugins.js')(on, config)
+    },
+    baseUrl: 'http://localhost:9000',
+    supportFile: 'support.ts',
+    specPattern: 'integration/**/*.*',
+  },
+})

packages/e2e/package.json

@@ -15,7 +15,7 @@
     "@percy/cli": "^1.1.0",
     "@percy/cypress": "^3.1.1",
     "@testing-library/cypress": "^8.0.2",
-    "cypress": "9.6.0",
+    "cypress": "10.4.0",
     "esbuild": "^0.14.14"
   }
 }

packages/e2e/support.ts

@@ -28,3 +28,9 @@ type Chainables<T extends object> = {
       ) => Cypress.Chainable<ReturnType<T[K]>>
     : never
 }
+
+Cypress.on('uncaught:exception', (err, _runnable) => {
+  // returning false here prevents Cypress from
+  // failing the test
+  return false
+})

packages/gatsby-theme-style-guide/package.json

@@ -10,7 +10,7 @@
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "gatsby": "^4.13.1",
+    "gatsby": "^4.20.0",
     "react": "^18",
     "react-dom": "^18"
   },

packages/sidenav/src/index.tsx

@@ -50,9 +50,10 @@ const flattenLinks = (children: ReactNode): ReactNode[] =>
     return acc
   }, [])
 
-const Overlay: FunctionComponent<{
+interface OverlayProps {
   onClick?: EventHandler<MouseEvent<HTMLDivElement>>
-}> = ({ onClick }) => (
+}
+const Overlay = ({ onClick }: OverlayProps) => (
   <React.Fragment>
     <div
       onClick={onClick}
@@ -80,7 +81,7 @@ export const Sidenav = forwardRef<
     open?: boolean
     components?: MDXProviderComponents
     styles?: ThemeStyles
-    children: ReactNode
+    children?: ReactNode
   }
 >(({ open, styles = {}, components = {}, ...props }, ref) => {
   return (
@@ -112,7 +113,7 @@ export const Sidenav = forwardRef<
         ),
       }}
     >
-      {open && <Overlay {...props} />}
+      {open && <Overlay />}
       <MDXProvider components={components}>
         <div
           {...props}
@@ -198,7 +199,11 @@ const NavLinks: FunctionComponent<{
   pathname: string
   links: ReactComponentElement<'a'>[]
   href: string
-  Link: React.FunctionComponent<{ href?: string; className?: string }>
+  Link: React.FunctionComponent<{
+    href?: string
+    className?: string
+    children?: ReactNode
+  }>
 }> = ({ open, pathname = '', links, href, Link }) => {
   if (!links) return null
   if (!open && !pathname.includes(href)) return null
@@ -325,12 +330,22 @@ export const AccordionNav = forwardRef<
 const removeSlash = (str: string) =>
   str.length > 1 ? str.replace(/\/$/, '') : str
 
-const PaginationLink: FunctionComponent<{
+interface PaginationLinkProps {
   label: string
   mdxType: string
   originalType: string
   parentName: string
-}> = ({ label, children, mdxType, originalType, parentName, ...props }) => (
+  children: ReactNode
+}
+
+const PaginationLink = ({
+  label,
+  children,
+  mdxType,
+  originalType,
+  parentName,
+  ...props
+}: PaginationLinkProps) => (
   <a
     {...props}
     sx={{
@@ -351,10 +366,18 @@ const PaginationLink: FunctionComponent<{
   </a>
 )
 
-export const Pagination: FunctionComponent<{
+export interface PaginationProps {
   pathname: string
   components?: any
-}> = ({ pathname = '', children, components, ...props }) => {
+  children?: ReactNode
+}
+
+export const Pagination = ({
+  pathname = '',
+  children,
+  components,
+  ...props
+}: PaginationProps) => {
   const links = flattenLinks(children)
   const index = links.findIndex(
     (link) =>

packages/sidenav/test/index.tsx

@@ -6,21 +6,18 @@
 import { jsx } from 'theme-ui'
 import renderer from 'react-test-renderer'
 import { render, cleanup, act } from '@theme-ui/test-utils'
-import { FunctionComponent } from 'react'
+import { ReactNode } from 'react'
 
 import { Sidenav, Pagination, AccordionNav } from '../src'
 
 afterEach(cleanup)
 
-const Link: FunctionComponent<{
-  href: string
-  mdxType: 'a'
-}> = (props) => {
+const Link = (props: { href: string; mdxType: 'a'; children: ReactNode }) => {
   const { children, ...rest } = props
   return <a {...rest}>{children}</a>
 }
 
-const Ul: FunctionComponent<{ mdxType: 'ul' }> = (props) => {
+const Ul = (props: { mdxType: 'ul'; children: ReactNode }) => {
   const { children, ...rest } = props
   return <ul {...rest}>{children}</ul>
 }