Merge pull request #154 from ensdomains/offshoot1

Update react 18 + node + pnpm + next + jest + testing-library

.github/workflows/main.yml

@@ -11,13 +11,13 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16]
+        node-version: [18]
     steps:
       - uses: actions/checkout@v3
 
       - uses: pnpm/[email protected]
         with:
-          version: 7.8.0
+          version: 8.11.0
 
       - name: Install Node.js
         uses: actions/setup-node@v3
@@ -35,13 +35,13 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16]
+        node-version: [18]
     steps:
       - uses: actions/checkout@v3
 
       - uses: pnpm/[email protected]
         with:
-          version: 7.8.0
+          version: 8.11.0
 
       - name: Install Node.js
         uses: actions/setup-node@v3
@@ -65,13 +65,13 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [14]
+        node-version: [18]
     steps:
       - uses: actions/checkout@v3
 
       - uses: pnpm/[email protected]
         with:
-          version: 7.8.0
+          version: 8.11.0
 
       - name: Install Node.js
         uses: actions/setup-node@v3

.github/workflows/publish.yml

@@ -10,15 +10,15 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16]
+        node-version: [18]
     steps:
       - uses: actions/checkout@v3
         with:
           ref: ${{ github.event.release.target_commitish }}
 
       - uses: pnpm/[email protected]
         with:
-          version: 7.8.0
+          version: 8.11.0
 
       - name: Install Node.js
         uses: actions/setup-node@v3

.gitignore

@@ -10,7 +10,9 @@ yarn-error.log*
 
 docs/.next/
 docs/out/
-# docs/public/playroom/
+docs/public/playroom/
+# Do not delete. This is a dummy file to ensure that cloudflare does not serve the original playroom index file.
+!docs/public/playroom/index.html
 docs/src/playroom/snippets
 
 components/dist/

.nvmrc

@@ -0,0 +1 @@
+18.18.2

README.md

@@ -19,8 +19,6 @@ To install this package using yarn:
 yarn add @ensdomains/thorin styled-components [email protected]
 ```
 
-Checkout the project's [playroom](https://thorin.ens.domains/playroom) to preview the components in a live online environment.
-
 ## Set Up
 
 In your App component, wrap the root of your app in a [`ThemeProvider`](https://styled-components.com/docs/advanced) module from [styled-components](https://styled-components.com). Import `ThorinGlobalStyles` and declare it as a child of `ThemeProvider` to set global styles. Set the theme by passing a theme object to `ThemeProvider`.
@@ -101,7 +99,6 @@ Before development, it is recommended that you read the following:
   - [Adding Components](https://thorin.ens.domains/guides/development#adding-components) - A list of files that need to be added or modified for each component.
   - [Style Guidlines](https://thorin.ens.domains/guides/development#style-guidelines) - Rules and tips to follow to keep the project code consistent and maintainable.
   - [Common Issues](https://thorin.ens.domains/guides/development#common-issues) - A list of known issues and how to resolve them.
-- [Playroom Guide](https://thorin.ens.domains/guides/playroom) - Information on how to add state and interactivity to sample code in playroom and mdx code previews.
 
 ## Contributing
 

components/jest.config.ts

@@ -1,5 +1,5 @@
 import type { Config } from '@jest/types'
-import { pathsToModuleNameMapper } from 'ts-jest/utils'
+import { pathsToModuleNameMapper } from 'ts-jest'
 
 import { compilerOptions } from './tsconfig.json'
 
@@ -12,13 +12,6 @@ const config: Config.InitialOptions = {
     '!**/icons/**',
     '!**/tokens/**',
   ],
-  globals: {
-    'ts-jest': {
-      babelConfig: {
-        plugins: ['babel-plugin-styled-components'],
-      },
-    },
-  },
   moduleNameMapper: {
     '\\.svg$': '<rootDir>/__mocks__/svg.js',
     ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: '<rootDir>/' }),
@@ -31,6 +24,16 @@ const config: Config.InitialOptions = {
     'jest-watch-typeahead/filename',
     'jest-watch-typeahead/testname',
   ],
+  transform: {
+    '\\.tsx?': [
+      'ts-jest',
+      {
+        babelConfig: {
+          plugins: ['babel-plugin-styled-components'],
+        },
+      },
+    ],
+  },
 }
 
 export default config

components/package.json

@@ -37,8 +37,10 @@
     "ver": "pnpm npm version"
   },
   "dependencies": {
+    "@types/jest": "^29.5.12",
     "clsx": "^1.1.1",
     "focus-visible": "^5.2.0",
+    "jest-babel": "^1.0.1",
     "lodash": "^4.17.21",
     "ts-pattern": "^4.3.0"
   },
@@ -49,31 +51,31 @@
     "@stylelint/postcss-css-in-js": "^0.38.0",
     "@svgr/babel-plugin-remove-jsx-attribute": "^6.0.0",
     "@svgr/rollup": "^6.2.1",
-    "@testing-library/dom": "^8.10.1",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/react-hooks": "^7.0.2",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/dom": "^10.1.0",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.7",
+    "@testing-library/user-event": "^14.5.2",
     "@types/glob": "^7.2.0",
     "@types/lodash": "^4.14.176",
     "@types/node": "^16.11.6",
-    "@types/react": "^17.0.33",
-    "@types/react-dom": "^17.0.10",
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
     "@types/rimraf": "^3.0.2",
     "@types/styled-components": "^5",
     "@types/testing-library__jest-dom": "^5.14.1",
     "babel-plugin-styled-components": "^2.0.6",
     "deepmerge": "^4.2.2",
     "esbuild-darwin-arm64": "^0.14.27",
     "glob": "^7.2.0",
-    "jest": "^27.3.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-styled-components": "^7.0.8",
     "jest-watch-typeahead": "^1.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "rimraf": "^3.0.2",
-    "ts-jest": "^27.0.7",
-    "ts-node": "^10.4.0",
+    "ts-jest": "^29.1.3",
+    "ts-node": "^10.9.2",
     "typescript": "4.9.4",
     "vite": "^3.2.5",
     "vite-plugin-babel-macros": "^1.0.6",
@@ -83,9 +85,9 @@
     "vite-tsconfig-paths": "^4.0.1"
   },
   "peerDependencies": {
-    "react": "^17",
-    "react-dom": "^17",
-    "react-transition-state": "^1.1.4",
-    "styled-components": "^5.3.3"
+    "react": "^18",
+    "react-dom": "^18",
+    "react-transition-state": "^2.1.1",
+    "styled-components": "^5.3.6"
   }
 }

components/src/components/atoms/Avatar/Avatar.test.tsx

@@ -20,6 +20,6 @@ describe('<Avatar />', () => {
         />
       </ThemeProvider>,
     )
-    await waitFor(() => expect(screen.getByRole(/img/i)).toBeInTheDocument())
+    await waitFor(() => expect(screen.getByRole('img')).toBeInTheDocument())
   })
 })

components/src/components/atoms/BackdropSurface/BackdropSurface.tsx

@@ -3,7 +3,7 @@ import type { TransitionState } from 'react-transition-state'
 import styled, { css } from 'styled-components'
 
 export const BackdropSurface = styled.div<{
-  $state: TransitionState
+  $state: TransitionState['status']
   $empty: boolean
 }>(
   ({ theme, $state, $empty }) => css`

components/src/components/atoms/DynamicPopover/DynamicPopover.tsx

@@ -15,7 +15,7 @@ export type DynamicPopoverAlignment = 'start' | 'center' | 'end'
 export type PopoverProps = React.PropsWithChildren<{
   placement: DynamicPopoverSide
   mobilePlacement: DynamicPopoverSide
-  state?: TransitionState
+  state?: TransitionState['status']
 }>
 
 export type DynamicPopoverAnimationFunc = (
@@ -140,7 +140,7 @@ const makeWidth = (width: number | string) =>
   typeof width === 'number' ? `${width}px` : width
 
 const PopoverContainer = styled.div<{
-  $state: TransitionState
+  $state: TransitionState['status']
   $translate: string
   $mobileTranslate: string
   $width: number | string
@@ -261,6 +261,17 @@ export const DynamicPopover = ({
 
   const isControlled = isOpen !== undefined
 
+  const [{ status: state }, toggle] = useTransition({
+    preEnter: true,
+    exit: true,
+    mountOnEnter: true,
+    unmountOnExit: true,
+    timeout: {
+      enter: transitionDuration,
+      exit: transitionDuration,
+    },
+  })
+
   const [positionState, setPositionState] = React.useState<{
     top: number
     left: number
@@ -451,22 +462,14 @@ export const DynamicPopover = ({
   ])
 
   React.useEffect(() => {
-    if (isControlled) {
-      toggle(isOpen)
+    const originalIsControlled = isControlled
+    const originalIsOpen = isOpen
+    if (isControlled) toggle(isOpen)
+    return () => {
+      if (originalIsControlled) toggle(!originalIsOpen)
     }
   }, [isControlled, isOpen])
 
-  const [state, toggle] = useTransition({
-    preEnter: true,
-    exit: true,
-    mountOnEnter: true,
-    unmountOnExit: true,
-    timeout: {
-      enter: transitionDuration,
-      exit: transitionDuration,
-    },
-  })
-
   const _placement = useIdealPlacement
     ? positionState.idealPlacement
     : placement

components/src/components/atoms/Field/Field.tsx

@@ -68,6 +68,7 @@ const Label = styled.label<{
     ${$disabled &&
     css`
       cursor: not-allowed;
+      pointer-events: none;
     `}
 
     ${$required &&

components/src/components/molecules/Backdrop/Backdrop.tsx

@@ -7,7 +7,9 @@ import { BackdropSurface } from '../../atoms/BackdropSurface'
 
 type Props = {
   /** A function that renders the children nodes */
-  children: (renderProps: { state: TransitionState }) => React.ReactNode
+  children: (renderProps: {
+    state: TransitionState['status']
+  }) => React.ReactNode
   /** An element that provides backdrop styling. Defaults to BackdropSurface component. */
   surface?: React.ElementType
   /** A event fired when the background is clicked. */
@@ -30,7 +32,7 @@ export const Backdrop = ({
   open,
   renderCallback,
 }: Props) => {
-  const [state, toggle] = useTransition({
+  const [{ status: state }, toggle] = useTransition({
     timeout: {
       enter: 50,
       exit: 300,
@@ -55,29 +57,32 @@ export const Backdrop = ({
       style.top = t
     }
 
-    toggle(open || false)
-    if (typeof window !== 'undefined' && !noBackground) {
-      if (open) {
-        if (currBackdrops() === 0) {
-          setStyles(
-            `${document.body.clientWidth}px`,
-            'fixed',
-            `-${window.scrollY}px`,
-          )
-        }
-        modifyBackdrops(1)
-        return () => {
-          const top = parseFloat(style.top || '0') * -1
-          if (currBackdrops() === 1) {
-            setStyles('', '', '')
-            window.scroll({
-              top,
-            })
-          }
-          modifyBackdrops(-1)
+    const toggleValue = open || false
+    toggle(toggleValue)
+    if (typeof window !== 'undefined' && !noBackground && open) {
+      if (currBackdrops() === 0) {
+        setStyles(
+          `${document.body.clientWidth}px`,
+          'fixed',
+          `-${window.scrollY}px`,
+        )
+      }
+      modifyBackdrops(1)
+      return () => {
+        const top = parseFloat(style.top || '0') * -1
+        if (currBackdrops() === 1) {
+          setStyles('', '', '')
+          window.scroll({
+            top,
+          })
         }
+        modifyBackdrops(-1)
+        toggle(!toggleValue)
       }
     }
+    return () => {
+      toggle(!toggleValue)
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open, noBackground])