chore: Bump React to v17 and Reactist to v12

.github/renovate.json

@@ -1,7 +1,7 @@
-{
-    "extends": [
-        "github>doist/renovate-config:integrations-base",
-        "github>doist/renovate-config:integrations-automerge",
-        "github>doist/renovate-config-internal:npm-registry-token"
-    ]
-}
+{
+    "extends": [
+        "github>doist/renovate-config:integrations-base",
+        "github>doist/renovate-config:integrations-automerge",
+        "github>doist/renovate-config-internal:npm-registry-token"
+    ]
+}

packages/ui-extensions-react/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@doist/ui-extensions-react",
-    "version": "3.1.5",
+    "version": "3.1.6",
     "author": "Doist",
     "license": "MIT",
     "main": "dist/index.js",
@@ -35,30 +35,33 @@
         "publish:yalc": "yalc push"
     },
     "peerDependencies": {
-        "@doist/reactist": "^11.0.0",
+        "@doist/reactist": "^12.0.0",
         "@doist/ui-extensions-core": "^3.1.4",
         "adaptivecards": "^2.9.0",
-        "react": ">=16"
+        "react": ">=17"
     },
     "prettier": "@doist/prettier-config",
     "dependencies": {
         "classnames": "^2.3.1",
         "dayjs": "^1.9.1"
     },
     "devDependencies": {
+        "@doist/reactist": "^12.0.1",
         "@storybook/addon-actions": "^6.3.12",
         "@storybook/addon-essentials": "^6.3.12",
         "@storybook/addon-links": "^6.3.12",
         "@storybook/react": "^6.3.12",
-        "@testing-library/jest-dom": "^4.2.4",
+        "@testing-library/dom": "^8.13.0",
+        "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^9.5.0",
         "@testing-library/react-hooks": "^3.3.0",
+        "@types/testing-library__jest-dom": "^5.14.3",
         "eslint-config-react-app": "^7.0.0",
         "msw": "^0.36.8",
-        "react": "^16.14.0",
-        "react-dom": "^16.14.0",
-        "react-is": "^16.13.1",
-        "react-test-renderer": "^16.13.1"
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
+        "react-is": "^17.0.2",
+        "react-test-renderer": "^17.0.2"
     },
     "msw": {
         "workerDirectory": "src/stories/public"

packages/ui-extensions-react/setup-tests.ts

@@ -1 +1,2 @@
 import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'

packages/ui-extensions-react/src/components/AdaptiveCardRenderer.tsx

@@ -77,19 +77,16 @@ export function AdaptiveCardRenderer({
     }, [customMarkdownParse])
 
     const elementParser = useRefCallback(
-        (adaptiveCard: ExtensionCard) => (
-            element: CardElement,
-            source: unknown,
-            context: SerializationContext,
-        ) => {
-            if ('autoFocusId' in adaptiveCard) {
-                if (canSetAutoFocus(element)) {
-                    element.shouldAutoFocus = element.id === adaptiveCard.autoFocusId
+        (adaptiveCard: ExtensionCard) =>
+            (element: CardElement, source: unknown, context: SerializationContext) => {
+                if ('autoFocusId' in adaptiveCard) {
+                    if (canSetAutoFocus(element)) {
+                        element.shouldAutoFocus = element.id === adaptiveCard.autoFocusId
+                    }
                 }
-            }
 
-            customElementParse?.(element, source, context)
-        },
+                customElementParse?.(element, source, context)
+            },
     )
 
     const handleAction = useRefCallback((adaptiveCard: AdaptiveCard) => (action: Action) => {

packages/ui-extensions-react/src/hooks/useAdaptiveCardsConnection.ts

@@ -5,6 +5,7 @@ import { processRequest } from '../api/adaptive-cards-server'
 import type {
     DoistCardAction,
     DoistCardActionParams,
+    DoistCardBridge,
     DoistCardError,
     DoistCardExtensionType,
     DoistCardRequest,
@@ -77,7 +78,7 @@ export function useAdaptiveCardsConnection({
                 const { card, bridge, bridges } = response
 
                 if (bridges) {
-                    bridges.forEach((bridge) => {
+                    bridges.forEach((bridge: DoistCardBridge) => {
                         const callback = bridgeActionCallbacks[bridge.bridgeActionType]
                         callback?.(bridge)
                     })
@@ -110,6 +111,7 @@ export function useAdaptiveCardsConnection({
         [context, bridgeActionCallbacks, endpointUrl, extensionType, params, version, token],
     )
 
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
     return { result, onAction }
 }
 

packages/ui-extensions-react/src/test/fixtures.ts

@@ -49,20 +49,17 @@ export const DEFAULT_CARD = {
             images: [
                 {
                     type: 'Image',
-                    url:
-                        'https://media1.giphy.com/media/XYot661SFS62c/giphy.gif?cid=550add23837d0fdf40feddd3a4df0de03a98b54019e5cffc&rid=giphy.gif',
+                    url: 'https://media1.giphy.com/media/XYot661SFS62c/giphy.gif?cid=550add23837d0fdf40feddd3a4df0de03a98b54019e5cffc&rid=giphy.gif',
                     altText: 'robin williams hello GIF',
                 },
                 {
                     type: 'Image',
-                    url:
-                        'https://media1.giphy.com/media/icUEIrjnUuFCWDxFpU/giphy.gif?cid=550add23837d0fdf40feddd3a4df0de03a98b54019e5cffc&rid=giphy.gif',
+                    url: 'https://media1.giphy.com/media/icUEIrjnUuFCWDxFpU/giphy.gif?cid=550add23837d0fdf40feddd3a4df0de03a98b54019e5cffc&rid=giphy.gif',
                     altText: 'Napoleon Dynamite Hello GIF by 20th Century Fox Home Entertainment',
                 },
                 {
                     type: 'Image',
-                    url:
-                        'https://media3.giphy.com/media/BVStb13YiR5Qs/giphy.gif?cid=550add23837d0fdf40feddd3a4df0de03a98b54019e5cffc&rid=giphy.gif',
+                    url: 'https://media3.giphy.com/media/BVStb13YiR5Qs/giphy.gif?cid=550add23837d0fdf40feddd3a4df0de03a98b54019e5cffc&rid=giphy.gif',
                     altText: 'Lionel Richie Hello GIF',
                 },
             ],

packages/ui-extensions-react/src/test/polyfills.ts

@@ -9,8 +9,8 @@ export function polyfillFetch(): void {
         return
     }
 
-    globalThis.fetch = (fetch as unknown) as (
-        input: RequestInfo,
+    globalThis.fetch = fetch as unknown as (
+        input: RequestInfo | URL,
         init?: RequestInit,
     ) => Promise<Response>
 }

packages/ui-extensions-react/src/types/doist-rendering.ts

@@ -1,4 +1,3 @@
-import type { Orientation } from '@doist/ui-extensions-core'
 import {
     Action,
     ActionProperty,
@@ -15,6 +14,8 @@ import {
     Versions,
 } from 'adaptivecards'
 
+import type { Orientation } from '@doist/ui-extensions-core'
+
 export type AdaptiveCardistVersion = '0.2' | '0.3' | '0.4'
 export type InputStyle = 'text' | 'tel' | 'url' | 'email' | 'search'
 

packages/ui-extensions-react/tsconfig.json

@@ -6,7 +6,8 @@
         "rootDir": "./src",
         "declarationDir": "./dist",
         "module": "CommonJS",
-        "jsx": "react"
+        "jsx": "react",
+        "types": ["node", "jest", "@testing-library/jest-dom"]
     },
     "include": ["src", "test", "stories"],
     "exclude": ["node_modules"]