diff --git a/package-lock.json b/package-lock.json index d2c537b40..f8b00b9be 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,9 +19,9 @@ "@commitlint/prompt-cli": "^17.3.0", "@eslint/js": "^9.15.0", "@testing-library/cypress": "^10.0.1", - "@testing-library/dom": "^9.3.4", + "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "^6.4.2", - "@testing-library/react": "^14.2.1", + "@testing-library/react": "^16.0.1", "@testing-library/user-event": "^14.5.2", "@types/eslint__js": "^8.42.3", "@types/js-beautify": "^1.14.3", @@ -5769,7 +5769,7 @@ "cypress": "^12.0.0 || ^13.0.0" } }, - "node_modules/@testing-library/cypress/node_modules/@testing-library/dom": { + "node_modules/@testing-library/dom": { "version": "10.4.0", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz", "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==", @@ -5789,36 +5789,6 @@ "node": ">=18" } }, - "node_modules/@testing-library/cypress/node_modules/aria-query": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", - "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", - "dev": true, - "license": "Apache-2.0", - "dependencies": { - "dequal": "^2.0.3" - } - }, - "node_modules/@testing-library/dom": { - "version": "9.3.4", - "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz", - "integrity": "sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "@babel/code-frame": "^7.10.4", - "@babel/runtime": "^7.12.5", - "@types/aria-query": "^5.0.1", - "aria-query": "5.1.3", - "chalk": "^4.1.0", - "dom-accessibility-api": "^0.5.9", - "lz-string": "^1.5.0", - "pretty-format": "^27.0.2" - }, - "engines": { - "node": ">=14" - } - }, "node_modules/@testing-library/jest-dom": { "version": "6.6.3", "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.6.3.tgz", @@ -5862,22 +5832,31 @@ "license": "MIT" }, "node_modules/@testing-library/react": { - "version": "14.3.1", - "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-14.3.1.tgz", - "integrity": "sha512-H99XjUhWQw0lTgyMN05W3xQG1Nh4lq574D8keFf1dDoNTJgp66VbJozRaczoF+wsiaPJNt/TcnfpLGufGxSrZQ==", + "version": "16.0.1", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.0.1.tgz", + "integrity": "sha512-dSmwJVtJXmku+iocRhWOUFbrERC76TX2Mnf0ATODz8brzAZrMBbzLwQixlBSanZxR6LddK3eiwpSFZgDET1URg==", "dev": true, "license": "MIT", "dependencies": { - "@babel/runtime": "^7.12.5", - "@testing-library/dom": "^9.0.0", - "@types/react-dom": "^18.0.0" + "@babel/runtime": "^7.12.5" }, "engines": { - "node": ">=14" + "node": ">=18" }, "peerDependencies": { + "@testing-library/dom": "^10.0.0", + "@types/react": "^18.0.0", + "@types/react-dom": "^18.0.0", "react": "^18.0.0", "react-dom": "^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } } }, "node_modules/@testing-library/user-event": { @@ -7607,13 +7586,13 @@ } }, "node_modules/aria-query": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz", - "integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==", + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", + "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", "dev": true, "license": "Apache-2.0", "dependencies": { - "deep-equal": "^2.0.5" + "dequal": "^2.0.3" } }, "node_modules/array-buffer-byte-length": { @@ -11119,39 +11098,6 @@ } } }, - "node_modules/deep-equal": { - "version": "2.2.3", - "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.3.tgz", - "integrity": "sha512-ZIwpnevOurS8bpT4192sqAowWM76JDKSHYzMLty3BZGSswgq6pBaH3DhCSW5xVAZICZyKdOBPjwww5wfgT/6PA==", - "dev": true, - "license": "MIT", - "dependencies": { - "array-buffer-byte-length": "^1.0.0", - "call-bind": "^1.0.5", - "es-get-iterator": "^1.1.3", - "get-intrinsic": "^1.2.2", - "is-arguments": "^1.1.1", - "is-array-buffer": "^3.0.2", - "is-date-object": "^1.0.5", - "is-regex": "^1.1.4", - "is-shared-array-buffer": "^1.0.2", - "isarray": "^2.0.5", - "object-is": "^1.1.5", - "object-keys": "^1.1.1", - "object.assign": "^4.1.4", - "regexp.prototype.flags": "^1.5.1", - "side-channel": "^1.0.4", - "which-boxed-primitive": "^1.0.2", - "which-collection": "^1.0.1", - "which-typed-array": "^1.1.13" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/deep-is": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", @@ -11989,27 +11935,6 @@ "node": ">= 0.4" } }, - "node_modules/es-get-iterator": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.3.tgz", - "integrity": "sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==", - "dev": true, - "license": "MIT", - "dependencies": { - "call-bind": "^1.0.2", - "get-intrinsic": "^1.1.3", - "has-symbols": "^1.0.3", - "is-arguments": "^1.1.1", - "is-map": "^2.0.2", - "is-set": "^2.0.2", - "is-string": "^1.0.7", - "isarray": "^2.0.5", - "stop-iteration-iterator": "^1.0.0" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/es-iterator-helpers": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.2.0.tgz", @@ -15686,23 +15611,6 @@ "url": "https://github.com/sponsors/wooorm" } }, - "node_modules/is-arguments": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz", - "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==", - "dev": true, - "license": "MIT", - "dependencies": { - "call-bind": "^1.0.2", - "has-tostringtag": "^1.0.0" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/is-array-buffer": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz", @@ -22076,23 +21984,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/object-is": { - "version": "1.1.6", - "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz", - "integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==", - "dev": true, - "license": "MIT", - "dependencies": { - "call-bind": "^1.0.7", - "define-properties": "^1.2.1" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/object-keys": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz", @@ -26242,19 +26133,6 @@ "node": ">= 0.8" } }, - "node_modules/stop-iteration-iterator": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz", - "integrity": "sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "internal-slot": "^1.0.4" - }, - "engines": { - "node": ">= 0.4" - } - }, "node_modules/string_decoder": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", @@ -29304,9 +29182,9 @@ "@rollup/pluginutils": "^5.0.4", "@tanstack/react-virtual": "^3.0.0-beta.54", "@testing-library/cypress": "^10.0.1", - "@testing-library/dom": "^9.3.4", + "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "^6.4.2", - "@testing-library/react": "^14.2.1", + "@testing-library/react": "^16.0.1", "@testing-library/user-event": "^14.5.2", "@types/jest": "^29.5.2", "@types/node": "^18.11.17", diff --git a/package.json b/package.json index 359f2cb87..8bcde81c1 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "prettier --single-quote --write" ], "packages/es-components/src/**/*.{js,jsx,ts,tsx}": [ - "eslint --fix --config packages/es-components/.eslintrc.js --cache" + "eslint --fix --config eslint.config.mjs --cache" ] }, "devDependencies": { @@ -39,9 +39,9 @@ "@commitlint/prompt-cli": "^17.3.0", "@eslint/js": "^9.15.0", "@testing-library/cypress": "^10.0.1", - "@testing-library/dom": "^9.3.4", + "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "^6.4.2", - "@testing-library/react": "^14.2.1", + "@testing-library/react": "^16.0.1", "@testing-library/user-event": "^14.5.2", "@types/eslint__js": "^8.42.3", "@types/js-beautify": "^1.14.3", diff --git a/packages/es-components/package.json b/packages/es-components/package.json index 1d3439090..a92c2b776 100644 --- a/packages/es-components/package.json +++ b/packages/es-components/package.json @@ -64,9 +64,9 @@ "@rollup/pluginutils": "^5.0.4", "@tanstack/react-virtual": "^3.0.0-beta.54", "@testing-library/cypress": "^10.0.1", - "@testing-library/dom": "^9.3.4", + "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "^6.4.2", - "@testing-library/react": "^14.2.1", + "@testing-library/react": "^16.0.1", "@testing-library/user-event": "^14.5.2", "@types/jest": "^29.5.2", "@types/node": "^18.11.17", diff --git a/packages/es-components/src/components/controls/buttons/features/withLoadingStateWhileRunning.specs.tsx b/packages/es-components/src/components/controls/buttons/features/withLoadingStateWhileRunning.specs.tsx index 8daf30d0e..3ccb6654a 100644 --- a/packages/es-components/src/components/controls/buttons/features/withLoadingStateWhileRunning.specs.tsx +++ b/packages/es-components/src/components/controls/buttons/features/withLoadingStateWhileRunning.specs.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; @@ -6,7 +5,7 @@ import Button from '../Button'; import { renderWithTheme } from '../../../util/test-utils'; import { withLoadingStateWhileRunning, - LoadingStateOnClick, + LoadingStateOnClick } from './withLoadingStateWhileRunning'; import noop from '../../../util/noop'; diff --git a/packages/es-components/src/components/controls/buttons/features/withLoadingStateWhileRunning.tsx b/packages/es-components/src/components/controls/buttons/features/withLoadingStateWhileRunning.tsx index 72af3b827..f479642bd 100644 --- a/packages/es-components/src/components/controls/buttons/features/withLoadingStateWhileRunning.tsx +++ b/packages/es-components/src/components/controls/buttons/features/withLoadingStateWhileRunning.tsx @@ -11,9 +11,9 @@ type AwaitableButtonClickHandler = ( ...params: ButtonClickParams ) => Promise; -export type LoadingStateOnClick = - | ButtonClickHandler - | AwaitableButtonClickHandler; +export type LoadingStateOnClick = ( + ...params: ButtonClickParams +) => ButtonClickReturn | Promise; export interface LoadingStateProps { showWhileRunning?: React.ReactNode; @@ -26,73 +26,61 @@ type ExpectedButtonProps = Pick< >; type ForwardedButtonProps = Override; type ModifiedButtonProps

= Override< - ForwardedButtonProps, - P + P, + ForwardedButtonProps >; const voidClick = () => Promise.resolve(); +type ButtonWithLoadingStateProps

= + P extends ExpectedButtonProps ? ModifiedButtonProps

: never; + export function withLoadingStateWhileRunning

( ButtonComponent: React.ComponentType

) { - type ButtonWithLoadingStateProps = P extends ExpectedButtonProps - ? ModifiedButtonProps

- : never; - - type ButtonWithLoadingStateFunction = React.ForwardRefRenderFunction< - HTMLButtonElement, - React.PropsWithoutRef - >; - const ButtonWithLoadingState = React.forwardRef< HTMLButtonElement, - ButtonWithLoadingStateProps - >( - ((): ButtonWithLoadingStateFunction => { - const ForwardedButtonWithLoadingState: ButtonWithLoadingStateFunction = ( - { - showWhileRunning: runningContent, - children, - waiting, - onClick = voidClick, - ...otherProps - }, - ref - ) => { - const [isRunning, showRunningWhile] = useLoadingState(); - const runOperation = useMonitoringCallback( - (currentOnClick, ...params: ButtonClickParams) => { - if (runningContent && !isRunning) - return void showRunningWhile( - (currentOnClick as AwaitableButtonClickHandler)(...params) - ); - - return void currentOnClick(...params); - }, - [isRunning, runningContent, showRunningWhile], - onClick - ); + ButtonWithLoadingStateProps

+ >(function ForwardedButtonWithLoadingState( + { + showWhileRunning: runningContent, + children, + waiting, + onClick = voidClick, + ...otherProps + }, + ref + ) { + const [isRunning, showRunningWhile] = useLoadingState(); + const runOperation = useMonitoringCallback( + (currentOnClick, ...params: ButtonClickParams) => { + if (runningContent && !isRunning) + return void showRunningWhile( + (currentOnClick as AwaitableButtonClickHandler)(...params) + ); - const buttonProps = { - ...otherProps, - waiting: waiting || isRunning, - onClick: runOperation, - children: (isRunning && runningContent) || children, - }; + return void currentOnClick(...params); + }, + [isRunning, runningContent, showRunningWhile], + onClick + ); - return ; - }; + const buttonProps = { + ...otherProps, + waiting: waiting || isRunning, + onClick: runOperation, + children: (isRunning && runningContent) || children + }; - ForwardedButtonWithLoadingState.propTypes = { - children: PropTypes.node, - ...(ButtonComponent.propTypes || {}), - showWhileRunning: PropTypes.node, - onClick: PropTypes.func, - } as unknown as (typeof ForwardedButtonWithLoadingState)['propTypes']; + return ; + }); - return ForwardedButtonWithLoadingState; - })() - ); + ButtonWithLoadingState.propTypes = { + children: PropTypes.node, + ...(ButtonComponent.propTypes || {}), + showWhileRunning: PropTypes.node, + onClick: PropTypes.func + } as (typeof ButtonWithLoadingState)['propTypes']; return ButtonWithLoadingState; } diff --git a/packages/es-components/tsconfig.json b/packages/es-components/tsconfig.json index bd9d4ecb2..f5f1eab3b 100644 --- a/packages/es-components/tsconfig.json +++ b/packages/es-components/tsconfig.json @@ -15,7 +15,7 @@ "declaration": true, "emitDeclarationOnly": true, "outDir": "types", - "jsx": "react", + "jsx": "react-jsx", "allowSyntheticDefaultImports": true, "rootDirs": ["src", "../../shared/types/src"], "plugins": [ diff --git a/workflow-helpers/generateJestConfig.js b/workflow-helpers/generateJestConfig.js index 050b77556..1d4aa5440 100644 --- a/workflow-helpers/generateJestConfig.js +++ b/workflow-helpers/generateJestConfig.js @@ -5,26 +5,27 @@ const generateConfig = (rootDir = esComponentsRoot) => ({ setupFilesAfterEnv: [ `${rootDir}/src/build-utils/jest.ts`, `${rootDir}/config/jest-setup.ts`, - `${rootDir}/config/jest-shims.ts`, + `${rootDir}/config/jest-shims.ts` ], testPathIgnorePatterns: ['es6', 'lib'], testEnvironmentOptions: { - url: 'http://localhost/', + url: 'http://localhost/' }, testRegex: 'specs\\.(js|ts|tsx)$', transform: { '^.+\\.(j|t)sx?$': [ 'ts-jest', { - tsconfig: `${rootDir}/config/test-tsconfig.json`, - }, - ], + tsconfig: `${rootDir}/config/test-tsconfig.json` + } + ] }, + maxWorkers: '50%', moduleNameMapper: { '^es-components-via-theme$': `${rootDir}/../es-components-via-theme/src/index.ts`, - '^es-components-shared-types$': `${rootDir}/../../shared/types/src/index.ts`, + '^es-components-shared-types$': `${rootDir}/../../shared/types/src/index.ts` }, - preset: 'ts-jest', + preset: 'ts-jest' }); module.exports = generateConfig;