fix(various): update files that manipulate icons in react.cloneElemen…

…t to type the icon props with TIconProps and export TIconProps in those packages as a convenience, remove unnecessary import of ui-kit/design-system from all fields, remove use of babel-plugin-typescript-to-prop-types in build tool as prop-types are no longer supported in react 19, remove patches and patch commit step related to prop types babel plugin

babel.config.js

@@ -11,8 +11,5 @@ module.exports = {
       },
     ],
   ],
-  plugins: [
-    'babel-plugin-typescript-to-proptypes',
-    require('./babel-plugin-package-version'),
-  ],
+  plugins: [require('./babel-plugin-package-version')],
 };

generators/readme/test/fixtures/avenger/src/avenger.tsx

@@ -0,0 +1,55 @@
+interface AvengerProps {
+  /**
+   * The name of an Avenger.
+   */
+  name: string;
+  /**
+   * The real identity of this Avenger, if known.
+   */
+  identity?: {
+    firstName?: string;
+    lastName?: string;
+    age?: number;
+  };
+  /**
+   * A callback function, called when the component is clicked.
+   * <br>
+   * Signature: `(event) => void`
+   */
+  onClick?(...args: unknown[]): unknown;
+  /**
+   * List the abilities of this Avenger.
+   */
+  abilities: {
+    /**
+     * The name of the ability.
+     */
+    name: string;
+    description?: string;
+    /**
+     * Set this to `true` to mark this ability as new.
+     *
+     * @@defaultValue@@: false
+     */
+    isNew?: boolean;
+  }[];
+  /**
+   * The list of movies where this Avenger appears in.
+   * It can either be just the name of the movie or a more detailed
+   * information about the movie.
+   */
+  movies: unknown | unknown[];
+  /**
+   * Define the power for this Avenger, from a scale of 1-10.
+   */
+  power: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+  isAlive?: boolean;
+}
+
+const Avenger = (props: AvengerProps) => <div>{`Avenger: ${props.name}`}</div>;
+Avenger.defaultProps = {
+  power: 1,
+  isAlive: true,
+};
+
+export default Avenger;

package.json

@@ -128,7 +128,6 @@
     "@typescript-eslint/parser": "8.18.0",
     "babel-jest": "29.7.0",
     "babel-loader": "9.2.1",
-    "babel-plugin-typescript-to-proptypes": "1.4.2",
     "browserslist": "4.24.3",
     "bundlesize": "0.18.2",
     "cac": "6.7.14",
@@ -157,13 +156,13 @@
     "moment": "2.30.1",
     "moment-timezone": "0.5.46",
     "omit-empty-es": "1.2.0",
-    "patch-package": "6.5.1",
     "postcss": "8.4.49",
     "postcss-styled-syntax": "^0.7.0",
     "postcss-syntax": "^0.36.2",
     "postcss-value-parser": "4.2.0",
     "pptr-testing-library": "0.8.0",
     "prettier": "2.8.8",
+    "prop-types": "^15.8.1",
     "puppeteer": "22.15.0",
     "qs": "6.13.1",
     "rcfile": "1.0.3",

packages/components/buttons/flat-button/src/export-types.ts

@@ -1 +1,2 @@
 export type { TFlatButtonProps } from './flat-button';
+export type { TIconProps } from '@commercetools-uikit/design-system';

packages/components/buttons/flat-button/src/flat-button.tsx

@@ -8,21 +8,16 @@ import {
 } from 'react';
 import { css } from '@emotion/react';
 import omit from 'lodash/omit';
-import { designTokens } from '@commercetools-uikit/design-system';
+import {
+  designTokens,
+  type TIconProps,
+} from '@commercetools-uikit/design-system';
 import { filterInvalidAttributes } from '@commercetools-uikit/utils';
 import AccessibleButton from '@commercetools-uikit/accessible-button';
 import { getTextColor } from './flat-button.styles';
 
 const propsToOmit = ['type'];
 
-/**
- * Props for child icons
- */
-type TButtonIconProps = {
-  color?: string;
-  size?: string;
-} & Record<string, unknown>;
-
 export type TFlatButtonProps<
   TStringOrComponent extends ElementType = 'button'
 > = {
@@ -54,7 +49,7 @@ export type TFlatButtonProps<
   /**
    * The icon of the button.
    */
-  icon?: ReactElement<TButtonIconProps>;
+  icon?: ReactElement<TIconProps>;
   /**
    * The position of the icon.
    */

packages/components/buttons/link-button/src/export-types.ts

@@ -1 +1,2 @@
 export type { TLinkButtonProps } from './link-button';
+export type { TIconProps } from '@commercetools-uikit/design-system';

packages/components/buttons/link-button/src/link-button.tsx

@@ -4,22 +4,17 @@ import { cloneElement, ReactElement } from 'react';
 import { Link as ReactRouterLink } from 'react-router-dom';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { designTokens } from '@commercetools-uikit/design-system';
+import {
+  designTokens,
+  type TIconProps,
+} from '@commercetools-uikit/design-system';
 import {
   useWarnDeprecatedComponent,
   filterInvalidAttributes,
 } from '@commercetools-uikit/utils';
 import Inline from '@commercetools-uikit/spacings-inline';
 import Text from '@commercetools-uikit/text';
 
-/**
- * Props for child icons
- */
-type TButtonIconProps = {
-  color?: string;
-  size?: string;
-} & Record<string, unknown>;
-
 export type TLinkButtonProps = {
   /**
    * Should describe what the button is for.
@@ -34,7 +29,7 @@ export type TLinkButtonProps = {
   /**
    * The icon of the button.
    */
-  iconLeft?: ReactElement<TButtonIconProps>;
+  iconLeft?: ReactElement<TIconProps>;
 
   /**
    * Determines if the button is disabled.

packages/components/buttons/primary-button/src/export-types.ts

@@ -1 +1,2 @@
 export type { TPrimaryButtonProps } from './primary-button';
+export type { TIconProps } from '@commercetools-uikit/design-system';

packages/components/buttons/primary-button/src/primary-button.tsx

@@ -8,6 +8,7 @@ import {
 } from 'react';
 import omit from 'lodash/omit';
 import { css } from '@emotion/react';
+import { type TIconProps } from '@commercetools-uikit/design-system';
 import Inline from '@commercetools-uikit/spacings-inline';
 import {
   filterInvalidAttributes,
@@ -28,13 +29,6 @@ type TLegacySizes = 'small' | 'medium' | 'big';
  */
 type TSizes = '10' | '20';
 
-/**
- * Props for child icons
- */
-type TButtonIconProps = {
-  color?: string;
-} & Record<string, unknown>;
-
 /**
  * Mapping of legacy sizes to new sizes.
  */
@@ -91,11 +85,11 @@ export type TPrimaryButtonProps<
   /**
    * The left icon displayed within the button.
    */
-  iconLeft?: ReactElement<TButtonIconProps>;
+  iconLeft?: ReactElement<TIconProps>;
   /**
-   * The right icon displayed within the button.
+   * The right icon displayed within the .
    */
-  iconRight?: ReactElement<TButtonIconProps>;
+  iconRight?: ReactElement<TIconProps>;
   /**
    * If this is active, it means the button will persist in an "active" state when toggled (see `isToggled`), and back to normal state when untoggled
    */

packages/components/buttons/secondary-button/src/export-types.ts

@@ -1 +1,2 @@
 export type { TSecondaryButtonProps } from './secondary-button';
+export type { TIconProps } from '@commercetools-uikit/design-system';

packages/components/buttons/secondary-button/src/secondary-button.tsx

@@ -16,6 +16,7 @@ import {
   useWarning,
   warning,
 } from '@commercetools-uikit/utils';
+import { type TIconProps } from '@commercetools-uikit/design-system';
 import AccessibleButton from '@commercetools-uikit/accessible-button';
 import {
   getStateStyles,
@@ -34,13 +35,6 @@ type TLegacySizes = 'small' | 'medium' | 'big';
  */
 type TSizes = '10' | '20';
 
-/**
- * Props for child icons
- */
-type TButtonIconProps = {
-  color?: string;
-} & Record<string, unknown>;
-
 /**
  * Mapping of legacy sizes to new sizes.
  */
@@ -71,11 +65,11 @@ export type TSecondaryButtonProps<
   /**
    * The left icon displayed within the button.
    */
-  iconLeft?: ReactElement<TButtonIconProps>;
+  iconLeft?: ReactElement<TIconProps>;
   /**
    * The righr icon displayed within the button.
    */
-  iconRight?: ReactElement<TButtonIconProps>;
+  iconRight?: ReactElement<TIconProps>;
   /**
    * If this is active, it means the button will persist in an "active" state when toggled (see `isToggled`), and back to normal state when untoggled
    */
@@ -140,8 +134,8 @@ const PositionedIcon = ({
   color,
 }: {
   size: string;
-  icon: ReactElement<TButtonIconProps>;
-  color: string;
+  icon: ReactElement<TIconProps>;
+  color: TIconProps['color'];
 }) => {
   return (
     <span

packages/components/data-table-manager/src/draggable-tag/draggable-tag.spec.js

@@ -24,9 +24,9 @@ it('should render the column tag when rendering a column', () => {
     <DragDropContext>
       <Droppable
         droppableId="droppableId"
-        // isDropDisabled={false}
-        // isCombineEnabled={false}
-        // ignoreContainerClipping={false}
+        isDropDisabled={false}
+        isCombineEnabled={false}
+        ignoreContainerClipping={false}
       >
         {(provided) => (
           <div ref={provided.innerRef}>

packages/components/field-label/src/export-types.ts

@@ -1 +1,2 @@
-export type { TFieldLabelProps, TFieldLabelHintIconProps } from './field-label';
+export type { TFieldLabelProps } from './field-label';
+export type { TIconProps } from '@commercetools-uikit/design-system';

packages/components/field-label/src/field-label.tsx

@@ -14,9 +14,10 @@ import Text from '@commercetools-uikit/text';
 import Constraints from '@commercetools-uikit/constraints';
 import Inline from '@commercetools-uikit/spacings-inline';
 import Label from '@commercetools-uikit/label';
-import { designTokens } from '@commercetools-uikit/design-system';
-
-export type TFieldLabelHintIconProps = { size?: string; color?: string };
+import {
+  designTokens,
+  type TIconProps,
+} from '@commercetools-uikit/design-system';
 
 export type TFieldLabelProps = {
   /**
@@ -44,7 +45,7 @@ export type TFieldLabelProps = {
   /**
    * Icon to be displayed beside the hint text. Will only get rendered when hint is passed as well.
    */
-  hintIcon?: ReactElement<TFieldLabelHintIconProps>;
+  hintIcon?: ReactElement<TIconProps>;
   /**
    * Badge to be displayed beside the label. Might be used to display additional information about the content of the field (E.g verified email)
    */

packages/components/fields/async-creatable-select-field/package.json

@@ -23,7 +23,6 @@
     "@babel/runtime-corejs3": "^7.20.13",
     "@commercetools-uikit/async-creatable-select-input": "19.20.1",
     "@commercetools-uikit/constraints": "19.20.1",
-    "@commercetools-uikit/design-system": "19.20.1",
     "@commercetools-uikit/field-errors": "19.20.1",
     "@commercetools-uikit/field-label": "19.20.1",
     "@commercetools-uikit/field-warnings": "19.20.1",