New codemod to help migrating React components "defaultProps" usage

.changeset/purple-panthers-attack.md

@@ -0,0 +1,40 @@
+---
+'@commercetools-frontend/codemod': minor
+---
+
+Introduces a new codemod which helps migrating away from React's `defaultProps` to `prop` destructuring.
+
+This is how the change looks like:
+
+```ts
+// BEFORE
+type TMyComponentProps = {
+  message: string;
+  size: string;
+}
+
+function MyComponent(props: TMyComponentProps) {
+ ...
+}
+
+MyComponent.defaultProps = {
+  size: 'big'
+}
+
+
+// AFTER
+type TMyComponentProps = {
+  message: string;
+  size?: string; // <--- Note this property is now defined as optional
+}
+
+function MyComponent({ size = 'big', ...props }: TMyComponentProps) {
+ ...
+}
+```
+
+And here is how the new codemod can be run:
+
+```
+$ npx @commercetools-frontend/codemod@latest react-default-props-migration 'src/**/*.{jsx,tsx}'
+```

packages/codemod/README.md

@@ -49,3 +49,41 @@ Remove code related to the old design when using the `useTheme` hook, for exampl
 ```
 $ npx @commercetools-frontend/codemod@latest redesign-cleanup 'src/**/*.{jsx,tsx}'
 ```
+
+### `react-default-props-migration`
+
+Migrates the way React Components `defaultProps` to use JavaScript default parameters instead. This is needed for React v18 or later.
+Example:
+
+```jsx
+// BEFORE
+function MyComponent(props) {
+  return (
+    <ul>
+    <li>Prop 1: {props.prop1}</li>
+    <li>Prop 2: {props.prop2}</li>
+    <li>Prop 3: {props.prop3}</li>
+  </ul>
+  );
+}
+MyComponent.defaultProps = {
+  prop1: 'My default value',
+};
+
+// AFTER
+function MyComponent({ prop1: 'My default value', ...props }) {
+  return (
+    <ul>
+    <li>Prop 1: {prop1}</li>
+    <li>Prop 2: {props.prop2}</li>
+    <li>Prop 3: {props.prop3}</li>
+  </ul>
+  );
+}
+```
+
+You can run this codemod by using the following command:
+
+```
+$ npx @commercetools-frontend/codemod@latest react-default-props-migration 'src/**/*.{jsx,tsx}'
+```

packages/codemod/src/cli.ts

@@ -31,6 +31,11 @@ const transforms: { name: TCliTransformName; description: string }[] = [
     description:
       'Remove code related to the old design when using the "useTheme" hook, for example the usage of "themedValue".',
   },
+  {
+    name: 'react-default-props-migration',
+    description:
+      'Migrate React components using defaultProps as a component property to a destructured object param.',
+  },
 ];
 
 const executeCodemod = async (
@@ -49,6 +54,7 @@ const executeCodemod = async (
   };
   switch (transform) {
     case 'redesign-cleanup':
+    case 'react-default-props-migration':
     case 'remove-deprecated-modal-level-props':
     case 'rename-js-to-jsx':
     case 'rename-mod-css-to-module-css': {