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')],
 };

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",

packages/components/fields/async-creatable-select-field/src/async-creatable-select-field.tsx

@@ -14,9 +14,7 @@ import {
 } from '@commercetools-uikit/utils';
 import Constraints from '@commercetools-uikit/constraints';
 import Spacings from '@commercetools-uikit/spacings';
-import FieldLabel, {
-  type TFieldLabelHintIconProps,
-} from '@commercetools-uikit/field-label';
+import FieldLabel, { type TIconProps } from '@commercetools-uikit/field-label';
 import AsyncCreatableSelectInput from '@commercetools-uikit/async-creatable-select-input';
 import FieldErrors from '@commercetools-uikit/field-errors';
 import FieldWarnings from '@commercetools-uikit/field-warnings';
@@ -367,7 +365,7 @@ export type TAsyncCreatableSelectFieldProps = {
    * <br />
    * Will only get rendered when `hint` is passed as well.
    */
-  hintIcon?: ReactElement<TFieldLabelHintIconProps>;
+  hintIcon?: ReactElement<TIconProps>;
   /**
    * Badge to be displayed beside the label.
    * <br />

packages/components/fields/async-creatable-select-field/src/export-types.ts

@@ -1 +1,2 @@
 export type { TAsyncCreatableSelectFieldProps } from './async-creatable-select-field';
+export { type TIconProps } from '@commercetools-uikit/field-label';

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

@@ -23,7 +23,6 @@
     "@babel/runtime-corejs3": "^7.20.13",
     "@commercetools-uikit/async-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",

packages/components/fields/async-select-field/src/async-select-field.tsx

@@ -15,9 +15,7 @@ import {
 } from '@commercetools-uikit/utils';
 import Constraints from '@commercetools-uikit/constraints';
 import Spacings from '@commercetools-uikit/spacings';
-import FieldLabel, {
-  type TFieldLabelHintIconProps,
-} from '@commercetools-uikit/field-label';
+import FieldLabel, { type TIconProps } from '@commercetools-uikit/field-label';
 import AsyncSelectInput from '@commercetools-uikit/async-select-input';
 import FieldErrors from '@commercetools-uikit/field-errors';
 import FieldWarnings from '@commercetools-uikit/field-warnings';
@@ -327,7 +325,7 @@ export type TAsyncSelectFieldProps = {
    * <br />
    * Will only get rendered when `hint` is passed as well.
    */
-  hintIcon?: ReactElement<TFieldLabelHintIconProps>;
+  hintIcon?: ReactElement<TIconProps>;
   /**
    * Badge to be displayed beside the label.
    * <br />

packages/components/fields/async-select-field/src/export-types.ts

@@ -1 +1,2 @@
 export type { TAsyncSelectFieldProps } from './async-select-field';
+export { type TIconProps } from '@commercetools-uikit/field-label';

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

@@ -23,7 +23,6 @@
     "@babel/runtime-corejs3": "^7.20.13",
     "@commercetools-uikit/constraints": "19.20.1",
     "@commercetools-uikit/creatable-select-input": "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",

packages/components/fields/creatable-select-field/src/creatable-select-field.tsx

@@ -14,9 +14,7 @@ import {
 } from '@commercetools-uikit/utils';
 import Constraints from '@commercetools-uikit/constraints';
 import Spacings from '@commercetools-uikit/spacings';
-import FieldLabel, {
-  type TFieldLabelHintIconProps,
-} from '@commercetools-uikit/field-label';
+import FieldLabel, { type TIconProps } from '@commercetools-uikit/field-label';
 import CreatableSelectInput from '@commercetools-uikit/creatable-select-input';
 import FieldErrors from '@commercetools-uikit/field-errors';
 import FieldWarnings from '@commercetools-uikit/field-warnings';
@@ -352,7 +350,7 @@ export type TCreatableSelectFieldProps = {
    * <br>
    * Will only get rendered when `hint` is passed as well.
    */
-  hintIcon?: ReactElement<TFieldLabelHintIconProps>;
+  hintIcon?: ReactElement<TIconProps>;
   /**
    * Badge to be displayed beside the label.
    * <br>

packages/components/fields/creatable-select-field/src/export-types.ts

@@ -1 +1,2 @@
 export type { TCreatableSelectFieldProps } from './creatable-select-field';
+export { type TIconProps } from '@commercetools-uikit/field-label';

packages/components/fields/date-field/package.json

@@ -23,7 +23,6 @@
     "@babel/runtime-corejs3": "^7.20.13",
     "@commercetools-uikit/constraints": "19.20.1",
     "@commercetools-uikit/date-input": "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",

packages/components/fields/date-field/src/date-field.tsx

@@ -16,9 +16,7 @@ import {
 } from '@commercetools-uikit/utils';
 import Constraints from '@commercetools-uikit/constraints';
 import Spacings from '@commercetools-uikit/spacings';
-import FieldLabel, {
-  type TFieldLabelHintIconProps,
-} from '@commercetools-uikit/field-label';
+import FieldLabel, { type TIconProps } from '@commercetools-uikit/field-label';
 import DateInput from '@commercetools-uikit/date-input';
 import FieldErrors from '@commercetools-uikit/field-errors';
 import FieldWarnings from '@commercetools-uikit/field-warnings';
@@ -175,7 +173,7 @@ export type TDateFieldProps = {
    * <br />
    * Will only get rendered when `hint` is passed as well.
    */
-  hintIcon?: ReactElement<TFieldLabelHintIconProps>;
+  hintIcon?: ReactElement<TIconProps>;
   /**
    * Badge to be displayed beside the label.
    * <br />

packages/components/fields/date-field/src/export-types.ts

@@ -1 +1,2 @@
 export type { TDateFieldProps } from './date-field';
+export { type TIconProps } from '@commercetools-uikit/field-label';

packages/components/fields/date-range-field/package.json

@@ -23,7 +23,6 @@
     "@babel/runtime-corejs3": "^7.20.13",
     "@commercetools-uikit/constraints": "19.20.1",
     "@commercetools-uikit/date-range-input": "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",

packages/components/fields/date-range-field/src/date-range-field.tsx

@@ -13,9 +13,7 @@ import {
 } from '@commercetools-uikit/utils';
 import Constraints from '@commercetools-uikit/constraints';
 import Spacings from '@commercetools-uikit/spacings';
-import FieldLabel, {
-  type TFieldLabelHintIconProps,
-} from '@commercetools-uikit/field-label';
+import FieldLabel, { type TIconProps } from '@commercetools-uikit/field-label';
 import DateRangeInput from '@commercetools-uikit/date-range-input';
 import FieldErrors from '@commercetools-uikit/field-errors';
 import FieldWarnings from '@commercetools-uikit/field-warnings';
@@ -161,7 +159,7 @@ export type TDateRangeFieldProps = {
    * <br />
    * Will only get rendered when `hint` is passed as well.
    */
-  hintIcon?: ReactElement<TFieldLabelHintIconProps>;
+  hintIcon?: ReactElement<TIconProps>;
   /**
    * Badge to be displayed beside the label.
    * <br />

packages/components/fields/date-range-field/src/export-types.ts

@@ -1 +1,2 @@
 export type { TDateRangeFieldProps } from './date-range-field';
+export { type TIconProps } from '@commercetools-uikit/field-label';