FEC 155 - Upgrade all UI Kit packages to React 19

.changeset/fast-ligers-unite.md

@@ -0,0 +1,102 @@
+---
+'@commercetools-uikit/localized-multiline-text-field': major
+'@commercetools-uikit/localized-multiline-text-input': major
+'@commercetools-uikit/async-creatable-select-field': major
+'@commercetools-uikit/async-creatable-select-input': major
+'@commercetools-uikit/localized-rich-text-input': major
+'@commercetools-uikit/selectable-search-input': major
+'@commercetools-uikit/spacings-inset-squish': major
+'@commercetools-uikit/secondary-icon-button': major
+'@commercetools-uikit/creatable-select-field': major
+'@commercetools-uikit/creatable-select-input': major
+'@commercetools-uikit/localized-money-input': major
+'@commercetools-uikit/localized-text-field': major
+'@commercetools-uikit/multiline-text-field': major
+'@commercetools-uikit/localized-text-input': major
+'@commercetools-uikit/multiline-text-input': major
+'@commercetools-uikit/search-select-field': major
+'@commercetools-uikit/search-select-input': major
+'@commercetools-uikit/accessible-button': major
+'@commercetools-uikit/async-select-field': major
+'@commercetools-uikit/async-select-input': major
+'@commercetools-uikit/secondary-button': major
+'@commercetools-uikit/search-text-input': major
+'@commercetools-uikit/spacings-inline': major
+'@commercetools-uikit/dropdown-menu': major
+'@commercetools-uikit/date-range-field': major
+'@commercetools-uikit/date-range-input': major
+'@commercetools-uikit/primary-action-dropdown': major
+'@commercetools-uikit/spacings-inset': major
+'@commercetools-uikit/spacings-stack': major
+'@commercetools-uikit/primary-button': major
+'@commercetools-uikit/date-time-field': major
+'@commercetools-uikit/date-time-input': major
+'@commercetools-uikit/rich-text-input': major
+'@commercetools-uikit/rich-text-utils': major
+'@commercetools-uikit/password-field': major
+'@commercetools-uikit/checkbox-input': major
+'@commercetools-uikit/password-input': major
+'@commercetools-uikit/flat-button': major
+'@commercetools-uikit/icon-button': major
+'@commercetools-uikit/link-button': major
+'@commercetools-uikit/number-field': major
+'@commercetools-uikit/select-field': major
+'@commercetools-uikit/number-input': major
+'@commercetools-uikit/select-input': major
+'@commercetools-uikit/select-utils': major
+'@commercetools-uikit/toggle-input': major
+'@commercetools-uikit/collapsible-motion': major
+'@commercetools-uikit/data-table-manager': major
+'@commercetools-uikit/money-field': major
+'@commercetools-uikit/radio-field': major
+'@commercetools-uikit/input-utils': major
+'@commercetools-uikit/money-input': major
+'@commercetools-uikit/radio-input': major
+'@commercetools-uikit/accessible-hidden': major
+'@commercetools-uikit/collapsible-panel': major
+'@commercetools-uikit/date-field': major
+'@commercetools-uikit/text-field': major
+'@commercetools-uikit/time-field': major
+'@commercetools-uikit/date-input': major
+'@commercetools-uikit/text-input': major
+'@commercetools-uikit/time-input': major
+'@commercetools-uikit/loading-spinner': major
+'@commercetools-uikit/field-warnings': major
+'@commercetools-uikit/notifications': major
+'@commercetools-uikit/quick-filters': major
+'@commercetools-uikit/view-switcher': major
+'@commercetools-uikit/field-errors': major
+'@commercetools-uikit/progress-bar': major
+'@commercetools-uikit/collapsible': major
+'@commercetools-uikit/constraints': major
+'@commercetools-uikit/field-label': major
+'@commercetools-uikit/data-table': major
+'@commercetools-uikit/pagination': major
+'@commercetools-uikit/messages': major
+'@commercetools-uikit/filters': major
+'@commercetools-uikit/tooltip': major
+'@commercetools-uikit/avatar': major
+'@commercetools-uikit/icons': major
+'@commercetools-uikit/label': major
+'@commercetools-uikit/stamp': major
+'@commercetools-uikit/card': major
+'@commercetools-uikit/grid': major
+'@commercetools-uikit/link': major
+'@commercetools-uikit/text': major
+'@commercetools-uikit/calendar-utils': major
+'@commercetools-uikit/tag': major
+'visual-testing-app': major
+'@commercetools-uikit/spacings': major
+'@commercetools-uikit/buttons': major
+'@commercetools-uikit/hooks': major
+'@commercetools-uikit/utils': major
+'@commercetools-uikit/fields': major
+'@commercetools-uikit/inputs': major
+'@commercetools-frontend/ui-kit': major
+'@commercetools-uikit/design-system': major
+'@commercetools-local/storybook': major
+---
+
+Upgrade UI Kit to React 19.
+
+From this version onwards, this is the minimum version an application using this library should be using.

babel.config.js

@@ -7,12 +7,8 @@ module.exports = {
       '@commercetools-frontend/babel-preset-mc-app',
       {
         runtime: 'automatic',
-        keepPropTypes: true,
       },
     ],
   ],
-  plugins: [
-    'babel-plugin-typescript-to-proptypes',
-    require('./babel-plugin-package-version'),
-  ],
+  plugins: [require('./babel-plugin-package-version')],
 };

design-system/package.json

@@ -28,8 +28,7 @@
     "@commercetools-uikit/hooks": "19.26.0",
     "@emotion/react": "^11.10.5",
     "lodash": "4.17.21",
-    "prop-types": "15.8.1",
-    "react": "17.0.2"
+    "react": "19.0.0"
   },
   "devDependencies": {
     "nodemon": "^3.0.0"

design-system/src/icon-utils.ts

@@ -2,7 +2,7 @@
 import { css } from '@emotion/react';
 import designTokens from './design-tokens';
 
-export type TIconProps = {
+export type TIconProps = Record<string, unknown> & {
   color?:
     | 'solid'
     | 'neutral60'

design-system/src/theme-provider.tsx

@@ -76,8 +76,8 @@ const ThemeProvider = ({
   ...props
 }: ThemeProviderProps) => {
   const parentSelectorRef = useRef(parentSelector);
-  const themeNameRef = useRef<string>();
-  const themeOverridesRef = useRef<Record<string, string>>();
+  const themeNameRef = useRef<string>(undefined);
+  const themeOverridesRef = useRef<Record<string, string>>(undefined);
 
   useLayoutEffect(() => {
     // We want to make sure we don't really apply the change when the props
@@ -88,7 +88,7 @@ const ThemeProvider = ({
       !isEqual(themeOverridesRef.current, props.themeOverrides)
     ) {
       themeNameRef.current = theme;
-      themeOverridesRef.current = props.themeOverrides!;
+      themeOverridesRef.current = props.themeOverrides;
 
       applyTheme({
         newTheme: theme,
@@ -118,12 +118,17 @@ const useTheme = (parentSelector = defaultParentSelector): TUseThemeResult => {
   const [theme, setTheme] = useState<ThemeName>('default');
   const parentSelectorRef = useRef(parentSelector);
 
-  const mutationChangeCallback = useCallback((mutationList) => {
-    // We expect only a single element in the mutation list as we configured the
-    // observer to only listen to `data-theme` changes.
-    const [mutationEvent] = mutationList;
-    setTheme((mutationEvent.target as HTMLElement).dataset.theme as ThemeName);
-  }, []);
+  const mutationChangeCallback = useCallback(
+    (mutationList: MutationRecord[]) => {
+      // We expect only a single element in the mutation list as we configured the
+      // observer to only listen to `data-theme` changes.
+      const [mutationEvent] = mutationList;
+      setTheme(
+        (mutationEvent.target as HTMLElement).dataset.theme as ThemeName
+      );
+    },
+    []
+  );
 
   useMutationObserver(parentSelector(), mutationChangeCallback, {
     attributes: true,

package.json

@@ -71,8 +71,8 @@
     "@babel/preset-env": "^7.18.6",
     "@jest/types": "29.6.3",
     "@types/eslint": "^9.0.0",
-    "@types/react": "17.0.85",
-    "@types/react-dom": "17.0.26",
+    "@types/react": "^19.0.3",
+    "@types/react-dom": "19.0.2",
     "@types/react-router": "5.1.20",
     "@types/unist": "3.0.3",
     "@typescript-eslint/eslint-plugin": "8.32.0",
@@ -119,13 +119,16 @@
     "@svgr/core": "8.1.0",
     "@svgr/plugin-jsx": "8.1.0",
     "@svgr/plugin-svgo": "8.1.0",
-    "@testing-library/jest-dom": "5.17.0",
-    "@testing-library/react": "12.1.5",
-    "@testing-library/react-hooks": "8.0.1",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/react": "^16.2.0",
     "@types/is-hotkey": "^0.1.7",
     "@types/is-url": "^1.2.32",
+    "@types/jest": "^29.5.14",
     "@types/node": "^22.13.1",
     "@types/prettier": "^2.7.3",
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
     "@typescript-eslint/eslint-plugin": "8.32.0",
     "@typescript-eslint/parser": "8.32.0",
     "babel-jest": "29.7.0",
@@ -140,7 +143,7 @@
     "eslint": "8.57.1",
     "eslint-formatter-pretty": "4.1.0",
     "execa": "9.5.3",
-    "formik": "^2.2.9",
+    "formik": "^2.4.6",
     "glob": "11.0.2",
     "global": "4.4.0",
     "husky": "8.0.3",
@@ -160,7 +163,7 @@
     "moment": "2.30.1",
     "moment-timezone": "0.5.48",
     "omit-empty-es": "1.2.0",
-    "patch-package": "6.5.1",
+    "patch-package": "^8.0.0",
     "postcss": "8.5.3",
     "postcss-styled-syntax": "^0.7.0",
     "postcss-syntax": "^0.36.2",
@@ -170,11 +173,10 @@
     "puppeteer": "22.15.0",
     "qs": "6.14.0",
     "rcfile": "1.0.3",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-intl": "^6.3.2",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-intl": "^7.1.4",
     "react-router-dom": "5.3.4",
-    "react-test-renderer": "17.0.2",
     "react-value": "0.2.0",
     "replace": "1.2.2",
     "rimraf": "3.0.2",

packages/calendar-utils/package.json

@@ -34,19 +34,18 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "lodash": "4.17.21",
-    "prop-types": "15.8.1",
     "react-select": "5.10.1"
   },
   "devDependencies": {
     "moment": "2.30.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-intl": "^6.3.2"
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-intl": "^7.1.4"
   },
   "peerDependencies": {
     "moment": "2.x",
-    "react": "17.x",
-    "react-dom": "17.x",
-    "react-intl": "6.x"
+    "react": "19.x",
+    "react-dom": "19.x",
+    "react-intl": "7.x"
   }
 }

packages/calendar-utils/src/calendar-body/calendar-body.tsx

@@ -87,7 +87,7 @@ export const CalendarBody = ({
 
   const onInputFocus = props.inputProps?.onFocus;
 
-  const handleInputFocus = useCallback(
+  const handleInputFocus: FocusEventHandler = useCallback(
     (event) => {
       toggleIsFocused(true);
       if (onInputFocus) onInputFocus(event);
@@ -97,7 +97,7 @@ export const CalendarBody = ({
 
   const onInputBlur = props.inputProps?.onBlur;
 
-  const handleInputBlur = useCallback(
+  const handleInputBlur: FocusEventHandler = useCallback(
     (event) => {
       toggleIsFocused(false);
       if (onInputBlur) onInputBlur(event);
@@ -107,7 +107,7 @@ export const CalendarBody = ({
 
   const onToggleFocus = props.toggleButtonProps?.onFocus;
 
-  const handleToggleFocus = useCallback(
+  const handleToggleFocus: FocusEventHandler = useCallback(
     (event) => {
       toggleIsFocused(true);
       if (onToggleFocus) onToggleFocus(event);
@@ -117,7 +117,7 @@ export const CalendarBody = ({
 
   const onToggleBlur = props.toggleButtonProps?.onBlur;
 
-  const handleToggleBlur = useCallback(
+  const handleToggleBlur: FocusEventHandler = useCallback(
     (event) => {
       toggleIsFocused(false);
       if (onToggleBlur) onToggleBlur(event);

packages/calendar-utils/src/calendar-header/calendar-header.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { MouseEventHandler, useCallback } from 'react';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useIntl } from 'react-intl';
@@ -34,9 +34,12 @@ const CalendarHeader = (props: TCalendarHeader) => {
 
   // we prevent all our defined onClicks inside of the CalendarHeader
   // from blurring our input.
-  const onMouseDown = useCallback((event) => {
-    event.preventDefault();
-  }, []);
+  const onMouseDown: MouseEventHandler<HTMLDivElement> = useCallback(
+    (event) => {
+      event.preventDefault();
+    },
+    []
+  );
   return (
     <div
       onMouseDown={onMouseDown}

packages/components/accessible-hidden/package.json

@@ -21,13 +21,12 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
-    "@emotion/react": "^11.10.5",
-    "prop-types": "15.8.1"
+    "@emotion/react": "^11.10.5"
   },
   "devDependencies": {
-    "react": "17.0.2"
+    "react": "19.0.0"
   },
   "peerDependencies": {
-    "react": "17.x"
+    "react": "19.x"
   }
 }

packages/components/avatar/package.json

@@ -25,13 +25,12 @@
     "@commercetools-uikit/utils": "19.26.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "lodash": "4.17.21",
-    "prop-types": "15.8.1"
+    "lodash": "4.17.21"
   },
   "devDependencies": {
-    "react": "17.0.2"
+    "react": "19.0.0"
   },
   "peerDependencies": {
-    "react": "17.x"
+    "react": "19.x"
   }
 }