@commercetools-frontend/codemod 0.0.0-CRAFT-1791-20251006162610

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 commercetools GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,89 @@
+# @commercetools-frontend/codemod
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@commercetools-frontend/codemod"><img src="https://badgen.net/npm/v/@commercetools-frontend/codemod" alt="Latest release (latest dist-tag)" /></a> <a href="https://www.npmjs.com/package/@commercetools-frontend/codemod"><img src="https://badgen.net/npm/v/@commercetools-frontend/codemod/next" alt="Latest release (next dist-tag)" /></a> <a href="https://bundlephobia.com/result?p=@commercetools-frontend/codemod"><img src="https://badgen.net/bundlephobia/minzip/@commercetools-frontend/codemod" alt="Minified + GZipped size" /></a> <a href="https://github.com/commercetools/merchant-center-application-kit/blob/main/LICENSE"><img src="https://badgen.net/github/license/commercetools/merchant-center-application-kit" alt="GitHub license" /></a>
+</p>
+
+Codemod transformations for Custom Applications.
+
+## Usage
+
+```bash
+$ npx @commercetools-frontend/codemod@latest <transform> <glob_pattern>
+```
+
+We recommend to run `prettier` on the modified files to preserve the formatting configured on your project. For example, you can run `prettier --write $(git diff --name-only)`.
+
+> If you are using `lint-staged` there is a high chance that you already run `prettier` on the staged files. Therefore, you don't need to run it manually.
+
+## Transforms
+
+### `remove-deprecated-modal-level-props`
+
+Remove deprecated `level` and `baseZIndex` props from modal page components.
+
+```
+$ npx @commercetools-frontend/codemod@latest remove-deprecated-modal-level-props 'src/**/*.{js,jsx,ts,tsx}'
+```
+
+### `rename-js-to-jsx`
+
+Rename `.js` files using React JSX syntax to `.jsx`.
+
+```
+$ npx @commercetools-frontend/codemod@latest rename-js-to-jsx 'src/**/*.js'
+```
+
+### `rename-mod-css-to-module-css`
+
+Rename `.mod.css` files to `.module.css` and update imports.
+
+```
+$ npx @commercetools-frontend/codemod@latest rename-mod-css-to-module-css 'src/**/*.{js,jsx,ts,tsx}'
+```
+
+### `redesign-cleanup`
+
+Remove code related to the old design when using the `useTheme` hook, for example the usage of `themedValue`.
+
+```
+$ 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}'
+```

package/bin/mc-codemod.js

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+
+process.env.NODE_ENV = 'production';
+
+require('../').cli();

package/build/package.json

@@ -0,0 +1,47 @@
+{
+    "name": "@commercetools-frontend/codemod",
+    "version": "24.7.2",
+    "description": "Codemod transformations for Custom Applications",
+    "bugs": "https://github.com/commercetools/merchant-center-application-kit/issues",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/commercetools/merchant-center-application-kit.git",
+        "directory": "packages/codemod"
+    },
+    "homepage": "https://docs.commercetools.com/merchant-center-customizations",
+    "keywords": ["javascript", "frontend", "codemod", "toolkit"],
+    "license": "MIT",
+    "publishConfig": {
+        "access": "public"
+    },
+    "main": "./build/src/index.js",
+    "files": ["bin", "build", "package.json", "LICENSE", "README.md"],
+    "bin": {
+        "mc-codemod": "./bin/mc-codemod.js"
+    },
+    "scripts": {
+        "build": "rimraf build && tsc",
+        "build:bundles:watch": "pnpm run build -w"
+    },
+    "dependencies": {
+        "@babel/core": "^7.22.17",
+        "@babel/preset-env": "^7.22.15",
+        "commander": "^13.1.0",
+        "glob": "8.1.0",
+        "jscodeshift": "0.16.1",
+        "prettier": "2.8.8"
+    },
+    "devDependencies": {
+        "@commercetools-frontend/application-components": "workspace:*",
+        "@emotion/react": "^11.14.0",
+        "@tsconfig/node22": "^22.0.0",
+        "@types/glob": "8.1.0",
+        "@types/jscodeshift": "0.12.0",
+        "@types/prettier": "2.7.3",
+        "rimraf": "5.0.10",
+        "typescript": "5.9.2"
+    },
+    "engines": {
+        "node": "18.x || 20.x || >=22.0.0"
+    }
+}

package/build/src/cli.js

@@ -0,0 +1,80 @@
+import path from 'path';
+import { program } from 'commander';
+import glob from 'glob';
+// @ts-ignore internal module
+import Runner from 'jscodeshift/src/Runner';
+import pkgJson from '../package.json';
+program
+    .name('mc-codemod')
+    .description('Codemods for updating Merchant Center customizations.')
+    .version(pkgJson.version)
+    .option('--dry-run', `(optional) Executes the command but does not send any mutation request.`, false);
+const transforms = [
+    {
+        name: 'remove-deprecated-modal-level-props',
+        description: 'Remove deprecated "level" and "baseZIndex" props from modal page components.',
+    },
+    {
+        name: 'rename-js-to-jsx',
+        description: 'Rename ".js" files using React JSX syntax to ".jsx".',
+    },
+    {
+        name: 'rename-mod-css-to-module-css',
+        description: 'Rename ".mod.css" files to ".module.css" and update imports.',
+    },
+    {
+        name: 'redesign-cleanup',
+        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 (transform, globPattern, globalOptions) => {
+    const absoluteGlobPattern = path.resolve(globPattern);
+    const files = glob.sync(path.join(absoluteGlobPattern, '**/*.{ts,tsx,js,jsx}'), {
+        ignore: [
+            '**/node_modules/**',
+            '**/public/**',
+            '**/dist/**',
+            '**/build/**',
+        ],
+    });
+    const runJscodeshift = async (transformPath, filePaths, options) => {
+        await Runner.run(transformPath, filePaths, options);
+    };
+    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': {
+            const transformPath = path.join(__dirname, `transforms/${transform}.js`);
+            await runJscodeshift(transformPath, files, {
+                extensions: 'tsx,ts,jsx,js',
+                parser: 'tsx',
+                verbose: 0,
+                dry: globalOptions.dryRun,
+            });
+            break;
+        }
+        default:
+            throw new Error(`Unknown transform ${transform}.`);
+    }
+};
+export const run = () => {
+    // Transform commands
+    transforms.forEach((transform) => {
+        program
+            .command(transform.name)
+            .argument('<glob-pattern>')
+            .description(transform.description)
+            .action((globPattern) => {
+            const globalOptions = program.opts();
+            executeCodemod(transform.name, globPattern, globalOptions);
+        });
+    });
+    program.parse();
+};
+export default run;

package/build/src/index.js

@@ -0,0 +1,2 @@
+import cli from './cli';
+export { cli };

package/build/src/transforms/react-default-props-migration.js

@@ -0,0 +1,400 @@
+import prettier from 'prettier';
+// When adjusting the component body where the previous props object was used
+// we don't need to adjust the function calls that are listed here
+const IGNORED_FUNCTIONS_ON_BODY_ADJUSTMENTS = [
+    'filterAriaAttributes',
+    'filterDataAttributes',
+];
+/*
+  Given the component function parameter description, we extract the
+  Typescript type name (if any).
+
+  Somethibng like this:
+    (props: MyComponentProps) -> MyComponentProps
+*/
+function resolvePropsTypescriptType(propsParam) {
+    if (propsParam.type === 'ObjectPattern' &&
+        propsParam.typeAnnotation &&
+        propsParam.typeAnnotation.type === 'TSTypeAnnotation' &&
+        propsParam.typeAnnotation.typeAnnotation.type === 'TSTypeReference' &&
+        propsParam.typeAnnotation.typeAnnotation.typeName.type === 'Identifier') {
+        return propsParam.typeAnnotation.typeAnnotation.typeName.name;
+    }
+    return undefined;
+}
+/*
+  This helper takes care of replacing the defaultProps usage in the component body
+  Previously the component code was relying on the props object to access the default values
+  but now the default props are destructured in the function signature
+  Example:
+  ```
+  // BEFORE
+  const MyComponent = (props) => {
+    return <div>{props.prop1}</div>;
+  }
+  // AFTER
+  const MyComponent = ({ prop1 }) => {
+    return <div>{prop1}</div>;
+  }
+  ```
+*/
+function replacePropsUsage({ j, defaultPropsKeys, scope, }) {
+    /*
+      Next code block replaces destructured props usage in the component body.
+      ```
+        // BEFORE
+          const MyComponent = (props) => {
+            return <div>{props.prop1}</div>;
+          }
+        }
+  
+        // AFTER
+        const MyComponent = ({ prop1, ...props }) => {
+          return <div>{prop1}</div>;
+        }
+      ```
+    */
+    scope
+        .find(j.MemberExpression, {
+        object: { type: 'Identifier', name: 'props' },
+    })
+        .forEach((memberPath) => {
+        const property = memberPath.node.property;
+        // Add type guard for Identifier
+        if (property.type === 'Identifier' &&
+            defaultPropsKeys.includes(property.name)) {
+            j(memberPath).replaceWith(j.identifier(property.name));
+        }
+    });
+    /*
+      Next code block replaces props usage in the component body where
+      props is passed as an argument to a function.
+      ```
+        // BEFORE
+        const MyComponent = (props) => {
+          return <div>{getStyles(props)}</div>;
+        }
+  
+        // AFTER
+        const MyComponent = ({ prop1, ...props }) => {
+          return <div>{getStyles({ prop1, ...props })}</div>;
+        }
+      ```
+    */
+    scope
+        .find(j.CallExpression, {
+        // There are some functions that don't need to be adjusted
+        // (example: filterAriaAttributes, filterDataAttributes)
+        callee: {
+            type: 'Identifier',
+            name: (name) => !IGNORED_FUNCTIONS_ON_BODY_ADJUSTMENTS.includes(name),
+        },
+        arguments: [{ type: 'Identifier', name: 'props' }],
+    })
+        .forEach((callPath) => {
+        // Create a destructured object
+        const properties = [
+            ...defaultPropsKeys.map((key) => {
+                const id = j.identifier(key);
+                const newProp = j.property('init', id, id);
+                newProp.shorthand = true;
+                return newProp;
+            }),
+            j.spreadElement(j.identifier('props')),
+        ];
+        const objectExpression = j.objectExpression(properties);
+        // Replace the 'props' argument with the destructured object
+        callPath.node.arguments[0] = objectExpression;
+    });
+    /*
+      Next code block replaces props spread in JSX elements
+      ```
+        // BEFORE
+        const MyComponent = (props) => {
+          return <SubComponent {...props} />
+        }
+  
+        // AFTER
+        const MyComponent = ({ prop1, ...props }) => {
+          return <SubComponent prop1={prop1} prop2={prop2} {...props} />
+        }
+      ```
+    */
+    scope
+        .find(j.JSXSpreadAttribute, {
+        argument: { type: 'Identifier', name: 'props' },
+    })
+        .forEach((path) => {
+        const attributes = defaultPropsKeys.map((key) => j.jsxAttribute(j.jsxIdentifier(key), j.jsxExpressionContainer(j.identifier(key))));
+        // Replace the spread with individual attributes
+        j(path).replaceWith([
+            ...attributes,
+            j.jsxSpreadAttribute(j.identifier('props')),
+        ]);
+    });
+}
+/*
+  We need to make sure the component type definition is updated to reflect the
+  props that are now optional.
+  Example:
+  ```
+  // BEFORE
+  type MyComponentProps = {
+    prop1: string;
+    prop2: string;
+    prop3: string;
+  }
+  function MyComponent(props: MyComponentProps) { ... }
+  MyComponent.defaultProps = {
+    prop1: 'default value',
+  }
+
+  // AFTER
+  type MyComponentProps = {
+    prop1?: string;
+    prop2: string;
+    prop3: string;
+  }
+  function MyComponent({ prop1, ...props }: MyComponentProps) { ... }
+  ```
+*/
+function updateComponentTypes({ j, root, typeName, destructuredKeys, }) {
+    // Find the type definition of the component props
+    root
+        .find(j.TSTypeAliasDeclaration)
+        .forEach((typePath) => {
+        if (typePath.node.id.name === typeName) {
+            const typeAnnotation = typePath.node.typeAnnotation;
+            if (typeAnnotation.type === 'TSTypeLiteral') {
+                typeAnnotation.members.forEach((member) => {
+                    if (member.type === 'TSPropertySignature' &&
+                        member.key.type === 'Identifier' &&
+                        destructuredKeys.includes(member.key.name)) {
+                        member.optional = true;
+                    }
+                });
+            }
+        }
+    });
+}
+/*
+  This helper transforms the component function signature to use a destructured object
+  as first parameter, so we can append the default props to it.
+  Example:
+  ```
+  // BEFORE
+  const MyComponent = (props) => { ... }
+
+  // AFTER
+  const MyComponent = ({ prop1, ...props }) => { ... }
+  ```
+*/
+function transformComponentFunctionSignature({ functionPropsParam, defaultPropsMap, componentName, j, }) {
+    let refactoredParameter;
+    const defaultPropsKeys = Object.keys(defaultPropsMap);
+    switch (functionPropsParam.type) {
+        // In this case, the component already has a destructured object as first parameter
+        // so we need to append the defaultProps to it
+        //   const MyComnponent = ({ prop1, ...props }) => { ... }
+        case 'ObjectPattern':
+            refactoredParameter = functionPropsParam;
+            refactoredParameter.properties = [
+                ...transformDefaultPropsToAST(defaultPropsMap, j),
+                // If the destructured object already had one of the default props, filter it out
+                ...functionPropsParam.properties.filter((prop) => {
+                    return (prop.type !== 'ObjectProperty' ||
+                        prop.key.type !== 'Identifier' ||
+                        !defaultPropsKeys.includes(prop.key.name));
+                }),
+            ];
+            break;
+        // In this case, the component has a simple parameter as first parameter
+        // so we need to refactor it to a destructured object
+        //   const MyComnponent = (props) => { ... }
+        case 'Identifier':
+            refactoredParameter = j.objectPattern([
+                ...transformDefaultPropsToAST(defaultPropsMap, j),
+                j.spreadProperty(j.identifier('props')),
+            ]);
+            // Make sure the refactored parameter has the same type annotation
+            // as the original one
+            refactoredParameter.typeAnnotation = functionPropsParam.typeAnnotation;
+            break;
+        default:
+            console.warn(`[WARNING]: Could not parse component function first parameter "${componentName}"`);
+    }
+    return refactoredParameter;
+}
+/*
+  This helper extracts the default props keys/values from the defaultProps object node
+*/
+function extractDefaultPropsFromNode(defaultPropsNode) {
+    return defaultPropsNode.properties.reduce((acc, prop) => {
+        if ((prop.type === 'ObjectProperty' || prop.type === 'Property') &&
+            prop.key.type === 'Identifier') {
+            return {
+                ...acc,
+                [prop.key.name]: prop.value,
+            };
+        }
+        return acc;
+    }, {});
+}
+/*
+  This helper transforms the default props keys/values to an AST representation
+  so we can easily append them to the component function signature.
+  ```
+*/
+function transformDefaultPropsToAST(defaultPropsMap, j) {
+    return Object.entries(defaultPropsMap).map(([key, value]) => {
+        const propNode = j.objectProperty(j.identifier(key), j.assignmentPattern(j.identifier(key), value));
+        propNode.shorthand = true;
+        return propNode;
+    });
+}
+async function reactDefaultPropsMigration(file, api, options) {
+    const j = api.jscodeshift;
+    const root = j(file.source, { comment: false });
+    const originalSource = root.toSource();
+    console.log('Processing file:', file.path);
+    // 1. Search for "defaultProps" definitions
+    root
+        .find(j.AssignmentExpression, {
+        left: {
+            type: 'MemberExpression',
+            property: { name: 'defaultProps' },
+        },
+    })
+        .forEach((path) => {
+        // Types validation to please Typescript
+        if (path.node.left.type === 'MemberExpression' &&
+            path.node.left.object.type === 'Identifier') {
+            // The node path looks like this:
+            //  defaultProps: MyComponent.defaultProps = defaultProps;
+            const componentName = path.node.left.object.name;
+            const defaultPropsNode = path.node.right;
+            let componentPropsTypescriptType; // Only TypeScript files have type annotations
+            let defaultPropsMap = {};
+            let functionScope;
+            // 2. We now extract the default props values
+            // Default props can be defined inline or as a reference to another object
+            //  INLINE -- MyComponent.defaultProps: { prop1: 'value1', prop2: 'value2' }
+            //  REFERENCE -- MyComponent.defaultProps: defaultProps
+            if (defaultPropsNode.type === 'Identifier') {
+                //  REFERENCE -- MyComponent.defaultProps: defaultProps
+                // A) Look for the identifier declaration
+                const defaultPropsDeclarations = root.find(j.VariableDeclarator, {
+                    id: { type: 'Identifier', name: defaultPropsNode.name },
+                });
+                if (defaultPropsDeclarations.size() === 1) {
+                    // B) Extract default props keys/values
+                    defaultPropsMap = extractDefaultPropsFromNode(defaultPropsDeclarations.nodes()[0].init);
+                    // C) Remove the identifier declaration
+                    defaultPropsDeclarations.remove();
+                }
+                else {
+                    console.warn(`[WARNING]: Could not find defaultProps declaration for "${componentName}"`);
+                }
+            }
+            else if (defaultPropsNode.type === 'ObjectExpression') {
+                // INLINE -- MyComponent.defaultProps: { prop1: 'value1', prop2: 'value2' }
+                // Extract default props keys/values
+                defaultPropsMap = extractDefaultPropsFromNode(defaultPropsNode);
+            }
+            else {
+                console.warn(`[WARNING]: Do not know how to process default props for component "${componentName}": ${j(path).toSource()}`);
+                return;
+            }
+            // 3. Next we update the component function signature
+            // We first look for classic function declarations
+            //   function MyComnponent(props) { ... }
+            const functionComponentDeclaration = root.find(j.FunctionDeclaration, {
+                id: { name: componentName },
+            });
+            if (functionComponentDeclaration.length === 1) {
+                functionComponentDeclaration.nodes()[0].params[0] =
+                    transformComponentFunctionSignature({
+                        functionPropsParam: functionComponentDeclaration.nodes()[0].params[0],
+                        defaultPropsMap,
+                        componentName,
+                        j,
+                    });
+                // Extract the component props TS type name
+                componentPropsTypescriptType = resolvePropsTypescriptType(functionComponentDeclaration.nodes()[0].params[0]);
+                // Get the function body scope so we only do the replacement
+                // within the component function we're currently processing
+                functionScope = j(functionComponentDeclaration.nodes()[0].body);
+            }
+            else {
+                // If we don't find a function declaration, we look for arrow function declarations
+                //   const MyComnponent = (props) => { ... }
+                //   const MyComnponent = ({ prop1, ...props }) => { ... }
+                const variableComponentDeclaration = root.find(j.VariableDeclaration, {
+                    declarations: [
+                        {
+                            id: { name: componentName },
+                        },
+                    ],
+                });
+                if (variableComponentDeclaration.length === 1) {
+                    const functionFirstParamNode = variableComponentDeclaration.nodes()[0].declarations[0];
+                    if (functionFirstParamNode.type === 'VariableDeclarator' &&
+                        functionFirstParamNode.init?.type === 'ArrowFunctionExpression') {
+                        functionFirstParamNode.init.params[0] =
+                            transformComponentFunctionSignature({
+                                functionPropsParam: functionFirstParamNode.init.params[0],
+                                defaultPropsMap,
+                                componentName,
+                                j,
+                            });
+                        // Extract the component props TS type name
+                        componentPropsTypescriptType = resolvePropsTypescriptType(functionFirstParamNode.init.params[0]);
+                        // Get the function body scope so we only do the replacement
+                        // within the component function we're currently processing
+                        functionScope = j(functionFirstParamNode.init.body);
+                    }
+                    else {
+                        console.warn(`[WARNING]: Could parse component function first parameter "${componentName}"`);
+                        return;
+                    }
+                }
+                else {
+                    console.warn(`[WARNING]: Could not find component declaration for "${componentName}" (class component are ignored)`);
+                    return;
+                }
+            }
+            // 4. Refactor the usages of the default props in the body of the component
+            replacePropsUsage({
+                j,
+                defaultPropsKeys: Object.keys(defaultPropsMap),
+                scope: functionScope,
+            });
+            // 5. Update the component TS type definition so we make sure the default props are optional
+            //  (not needed for Javascript files)
+            if (componentPropsTypescriptType) {
+                updateComponentTypes({
+                    j,
+                    root,
+                    typeName: componentPropsTypescriptType,
+                    destructuredKeys: Object.keys(defaultPropsMap),
+                });
+            }
+            // 6. Remove the defaultProps assignment from the component
+            j(path).remove();
+        }
+    });
+    // Do not return anything if no changes were applied
+    // so we don't rewrite the file
+    if (originalSource === root.toSource()) {
+        return null;
+    }
+    if (!options.dry) {
+        // Format output code with prettier
+        const prettierConfig = await prettier.resolveConfig(file.path);
+        return prettier.format(root.toSource(), prettierConfig);
+    }
+    else {
+        return null;
+    }
+}
+export default reactDefaultPropsMigration;

package/build/src/transforms/redesign-cleanup.js

@@ -0,0 +1,384 @@
+import prettier from 'prettier';
+function getArgumentValue(argument, j) {
+    let computedArgumentValue;
+    switch (argument.type) {
+        case 'StringLiteral':
+            computedArgumentValue = argument;
+            break;
+        default:
+            computedArgumentValue = j.jsxExpressionContainer(argument);
+            break;
+    }
+    return computedArgumentValue;
+}
+function isArgumentValueNullish(argumentValue, j) {
+    return (!argumentValue ||
+        (j.StringLiteral.check(argumentValue) && !argumentValue.value) ||
+        (j.JSXExpressionContainer.check(argumentValue) &&
+            j.Identifier.check(argumentValue.expression) &&
+            argumentValue.expression.name === 'undefined') ||
+        (j.JSXExpressionContainer.check(argumentValue) &&
+            j.NullLiteral.check(argumentValue.expression)));
+}
+// Update props in components which use `themedValue` helper to always use new theme value
+// Remove the prop in case the new theme value is undefined
+// Some examples to process:
+// <Spacings.Stack scale={themedValue('m', 'l')}>
+//
+// <Spacings.Stack scale={themedValue(designTokens.A, designTokensB)}>
+//
+// <div
+//   css={css`
+//     color: ${customProperties.colorSurface};
+//     text-align: ${themedValue('left', 'center')};
+//   `}
+// >
+function updateThemedValueUsages(tree, j) {
+    // Props using themedValue helper
+    // Example:
+    //   <CheckboxIconWrapper
+    //     width={themedValue('auto', '26px')}
+    //     height={themedValue('auto', '26px')}
+    //     isHovered={canForcedHoverEffect}
+    //   >
+    tree
+        .find(j.JSXAttribute, {
+        value: {
+            expression: {
+                callee: {
+                    name: 'themedValue',
+                },
+            },
+        },
+    })
+        .replaceWith((attribute) => {
+        const { node } = attribute;
+        if (node.value?.type === 'JSXExpressionContainer' &&
+            node.value?.expression.type === 'CallExpression') {
+            const secondArgument = node.value.expression.arguments[1];
+            let computedArgumentValue = getArgumentValue(secondArgument, j);
+            // In case the value for the new theme is nullish,
+            // we remove the property altogether
+            if (isArgumentValueNullish(computedArgumentValue, j)) {
+                return null;
+            }
+            else {
+                attribute.node.value = computedArgumentValue;
+            }
+        }
+        return attribute.node;
+    });
+    // Variables used to proxy a themed value.
+    // This section removes the proxy component and updates its references/
+    //
+    // Example:
+    // const Button = themedValue(IconButton, SecondaryIconButton);
+    // <Button
+    //   label={intl.formatMessage(messages.hideNotification)}
+    //   onClick={props.onCloseClick}
+    //   icon={<CloseBoldIcon />}
+    //   size="medium"
+    // />
+    const variablesToUpdate = [];
+    tree
+        .find(j.VariableDeclaration)
+        .filter((nodePath) => {
+        const declaration = nodePath.node.declarations[0];
+        return (j.VariableDeclarator.check(declaration) &&
+            j.CallExpression.check(declaration.init) &&
+            j.Identifier.check(declaration.init.callee) &&
+            declaration.init.callee.name === 'themedValue');
+    })
+        .forEach((nodePath) => {
+        const declaration = nodePath.node.declarations[0];
+        const variableName = declaration.id.name;
+        const newThemeValue = declaration.init.arguments[1];
+        variablesToUpdate.push(declaration);
+        tree
+            .find(j.JSXElement, {
+            openingElement: {
+                name: {
+                    name: variableName,
+                },
+            },
+        })
+            .forEach((nodePath) => {
+            if (j.Identifier.check(newThemeValue)) {
+                nodePath.node.openingElement.name = j.jsxIdentifier(newThemeValue.name);
+            }
+            if (j.MemberExpression.check(newThemeValue)) {
+                nodePath.node.openingElement.name = j.jsxMemberExpression(j.jsxIdentifier(newThemeValue.object.name), j.jsxIdentifier(newThemeValue.property.name));
+            }
+            if (nodePath.node.closingElement) {
+                if (j.Identifier.check(newThemeValue)) {
+                    nodePath.node.closingElement.name = j.jsxIdentifier(newThemeValue.name);
+                }
+                if (j.MemberExpression.check(newThemeValue)) {
+                    nodePath.node.closingElement.name = j.jsxMemberExpression(j.jsxIdentifier(newThemeValue.object.name), j.jsxIdentifier(newThemeValue.property.name));
+                }
+            }
+        });
+        tree
+            .find(j.Identifier, {
+            name: variableName,
+        })
+            .filter((nodePath) => {
+            return (j.JSXExpressionContainer.check(nodePath.parent.node) ||
+                j.CallExpression.check(nodePath.parent.node));
+        })
+            .replaceWith(() => {
+            return newThemeValue;
+        });
+    })
+        .remove();
+    // Rest of use cases like template literals or direct JSX
+    // Example 1:
+    //   <div
+    //     css={[
+    //       css`
+    //         width: ${themedValue('16px', '18px')};
+    //         height: ${themedValue('16px', '18px')};
+    //
+    // Example 2:
+    // <li className={styles['list-item']} key={val.id}>
+    //   {themedValue(
+    //     <Spacings.Inset scale="s">
+    //       <ValueCheckbox
+    //         onSelection={props.onSelection}
+    //         id={val.id}
+    //         obj={val.obj}
+    //         onRenderItemName={props.onRenderItemName}
+    //       />
+    //     </Spacings.Inset>,
+    //     <ValueCheckbox
+    //       onSelection={props.onSelection}
+    //       id={val.id}
+    //       obj={val.obj}
+    //       onRenderItemName={props.onRenderItemName}
+    //     />
+    //   )}
+    // </li>
+    tree
+        .find(j.CallExpression, {
+        callee: {
+            name: 'themedValue',
+        },
+    })
+        .replaceWith((callExpression) => {
+        const secondArgument = callExpression.node.arguments[1];
+        let computedArgumentValue = getArgumentValue(secondArgument, j);
+        if (isArgumentValueNullish(computedArgumentValue, j)) {
+            return null;
+        }
+        else {
+            return callExpression.node.arguments[1];
+        }
+    });
+}
+// Process the useTheme hook to remove it or updated it
+// (maybe we're also using "theme" property from the hook)
+function processUseThemeHook(tree, j) {
+    let wasHookRemoved = false;
+    // Skip if there are calls to "themedValue" function
+    const themedValueCalls = tree.find(j.CallExpression, {
+        callee: {
+            name: 'themedValue',
+        },
+    });
+    // Skip if "themeValue" is passed as a parameter to another function
+    const themeValueArguments = tree.find(j.CallExpression, {
+        arguments(values) {
+            return values.some((value) => j.Identifier.check(value) && value.name === 'themedValue');
+        },
+    });
+    if (themedValueCalls.length > 0 || themeValueArguments.length > 0) {
+        return wasHookRemoved;
+    }
+    tree
+        .find(j.VariableDeclaration, {
+        declarations(values) {
+            const [declaration] = values;
+            return (declaration.type === 'VariableDeclarator' &&
+                declaration.init?.type === 'CallExpression' &&
+                declaration.init.callee.type === 'Identifier' &&
+                declaration.init.callee.name === 'useTheme' &&
+                declaration.id.type === 'ObjectPattern');
+        },
+    })
+        .replaceWith((value) => {
+        const declaration = value.node.declarations[0];
+        if (declaration.id.type === 'ObjectPattern') {
+            // Remove the declaration altogether if we were only getting the `themedValue`
+            // helper from the `useTheme` hook
+            //  Ex: const { themedValue } = useTheme();
+            if (declaration.id.properties.length === 1 &&
+                declaration.id.properties[0].type === 'ObjectProperty' &&
+                declaration.id.properties[0].value.type === 'Identifier' &&
+                declaration.id.properties[0].value.name === 'themedValue') {
+                wasHookRemoved = true;
+                return null;
+            }
+            // Update the destructuring of the `useTheme` hook to remove the `themedValue`
+            // const when there were more helpers in the destructuring
+            //  Ex: const { theme, themedValue } = useTheme();
+            const index = declaration.id.properties.findIndex((prop) => prop.type === 'ObjectProperty' &&
+                prop.key.type === 'Identifier' &&
+                prop.key.name === 'themedValue');
+            if (index !== -1) {
+                declaration.id.properties.splice(index, 1);
+            }
+        }
+        return value.node;
+    });
+    return wasHookRemoved;
+}
+function removeUnusedImports(tree, j) {
+    let isUseThemeHookRemoved = false;
+    // Find all the used identifiers in the file
+    const usedIdentifiersMap = new Map();
+    tree.find(j.Identifier).forEach((identifier) => {
+        if ((j.Identifier.check(identifier.node) &&
+            !j.ImportSpecifier.check(identifier.parent.node) &&
+            !j.ImportDefaultSpecifier.check(identifier.parent.node)) ||
+            j.JSXIdentifier.check(identifier.node)) {
+            const previousCount = usedIdentifiersMap.get(identifier.node.name) || 0;
+            usedIdentifiersMap.set(identifier.node.name, previousCount + 1);
+        }
+    });
+    // Find types annotations
+    tree
+        .find(j.CallExpression)
+        .filter((callExpression) => {
+        return j.TSTypeParameterInstantiation.check(callExpression.node
+            .typeParameters);
+    })
+        .forEach((callExpression) => {
+        callExpression.node.typeParameters?.params.forEach((param) => {
+            if (j.TSTypeReference.check(param) &&
+                j.Identifier.check(param.typeName)) {
+                const previousCount = usedIdentifiersMap.get(param.typeName.name) || 0;
+                usedIdentifiersMap.set(param.typeName.name, previousCount + 1);
+            }
+            if (j.TSArrayType.check(param) &&
+                j.TSTypeReference.check(param.elementType) &&
+                j.Identifier.check(param.elementType.typeName)) {
+                const name = param.elementType.typeName.name;
+                const previousCount = usedIdentifiersMap.get(name) || 0;
+                usedIdentifiersMap.set(name, previousCount + 1);
+            }
+            // Declaration of a custom type for a function parameter
+            if (j.TSTypeLiteral.check(param)) {
+                param.members.forEach((propSignature) => {
+                    // TODO: This is to satisfy TS. Can we do it simpler?
+                    if (j.TSPropertySignature.check(propSignature) &&
+                        j.TSTypeAnnotation.check(propSignature.typeAnnotation) &&
+                        j.TSTypeReference.check(propSignature.typeAnnotation.typeAnnotation) &&
+                        j.Identifier.check(propSignature.typeAnnotation.typeAnnotation.typeName)) {
+                        const previousCount = usedIdentifiersMap.get(propSignature.typeAnnotation.typeAnnotation.typeName.name) || 0;
+                        usedIdentifiersMap.set(propSignature.typeAnnotation.typeAnnotation.typeName.name, previousCount + 1);
+                    }
+                });
+            }
+            // Return types in function types
+            if (j.TSFunctionType.check(param) &&
+                j.TSTypeReference.check(param.typeAnnotation?.typeAnnotation)) {
+                const typeName = (param.typeAnnotation?.typeAnnotation.typeName).name;
+                const previousCount = usedIdentifiersMap.get(typeName) || 0;
+                usedIdentifiersMap.set(typeName, previousCount + 1);
+                param.typeAnnotation?.typeAnnotation.typeParameters?.params.forEach((annotationParam) => {
+                    const annotationParamName = j.TSTypeReference.check(annotationParam) &&
+                        annotationParam.typeName.name;
+                    if (annotationParamName) {
+                        const previousCount = usedIdentifiersMap.get(annotationParamName) || 0;
+                        usedIdentifiersMap.set(annotationParamName, previousCount + 1);
+                    }
+                });
+            }
+            // Find TS types in function types parameters signatures
+            if (j.TSFunctionType.check(param)) {
+                param.parameters.forEach((fnParam) => {
+                    let typeName = undefined;
+                    if (j.Identifier.check(fnParam) &&
+                        j.TSTypeReference.check(fnParam.typeAnnotation?.typeAnnotation) &&
+                        j.Identifier.check(fnParam.typeAnnotation?.typeAnnotation.typeName)) {
+                        typeName = fnParam.typeAnnotation?.typeAnnotation.typeName.name;
+                    }
+                    if (j.Identifier.check(fnParam) &&
+                        j.TSArrayType.check(fnParam.typeAnnotation?.typeAnnotation) &&
+                        j.TSTypeReference.check(fnParam.typeAnnotation?.typeAnnotation.elementType) &&
+                        j.Identifier.check(fnParam.typeAnnotation?.typeAnnotation.elementType.typeName)) {
+                        typeName =
+                            fnParam.typeAnnotation?.typeAnnotation.elementType.typeName
+                                .name;
+                    }
+                    if (typeName) {
+                        const previousCount = usedIdentifiersMap.get(typeName) || 0;
+                        usedIdentifiersMap.set(typeName, previousCount + 1);
+                    }
+                });
+            }
+        });
+    });
+    // Remove unused imports
+    tree
+        .find(j.ImportDeclaration)
+        .forEach((importDeclaration) => {
+        const importSpecifiers = importDeclaration.node.specifiers;
+        // Skip if this is an import just to auto-initialize any module
+        // or it's a css import
+        if (!importSpecifiers ||
+            importSpecifiers.length < 1 ||
+            importDeclaration.node.source.value.endsWith('.css')) {
+            return;
+        }
+        const usedSpecifiers = importSpecifiers.filter((specifier) => (usedIdentifiersMap.get(specifier.local?.name || '') || 0) > 0);
+        if (usedSpecifiers.length === 0) {
+            // remove the entire import declaration
+            j(importDeclaration).remove();
+            isUseThemeHookRemoved = importSpecifiers.some((specifier) => specifier.local?.name === 'useTheme');
+        }
+        else if (usedSpecifiers.length < importSpecifiers.length) {
+            // remove unused specifiers from the import declaration
+            importDeclaration.node.specifiers = usedSpecifiers;
+            isUseThemeHookRemoved = importSpecifiers.some((specifier) => specifier.local?.name === 'useTheme');
+        }
+    });
+    return isUseThemeHookRemoved;
+}
+function removeMigrationCleanupComment(tree, j) {
+    tree
+        // @ts-ignore
+        .find(j.Comment)
+        .filter((path) => j.CommentLine.check(path.value) &&
+        path.value.value.indexOf('@redesign cleanup') !== -1)
+        .remove();
+}
+async function themeMigrationCleanup(file, api, options) {
+    const j = api.jscodeshift;
+    const root = j(file.source, { comment: true });
+    const originalSource = root.toSource();
+    // 1. Update props which use `themedValue` helper to always use new theme value
+    updateThemedValueUsages(root, j);
+    // 2. Process the useTheme hook to remove it or updated it
+    processUseThemeHook(root, j);
+    // 3. After updating the useTheme usages, let's potentially remove unnecessary imports
+    const hasUseThemeHookBeenRemoved = removeUnusedImports(root, j);
+    // 4. Remove migration comment -> TODO: @redesign cleanup
+    if (hasUseThemeHookBeenRemoved) {
+        removeMigrationCleanupComment(root, j);
+    }
+    // Do not return anything if no changes were applied
+    // so we don't rewrite the file
+    if (originalSource === root.toSource()) {
+        return null;
+    }
+    if (!options.dry) {
+        // Format output code with prettier
+        const prettierConfig = await prettier.resolveConfig(file.path);
+        return prettier.format(root.toSource(), prettierConfig);
+    }
+    else {
+        return null;
+    }
+}
+export default themeMigrationCleanup;

package/build/src/transforms/remove-deprecated-modal-level-props.js

@@ -0,0 +1,38 @@
+const componentNamesWithDeprecatedZIndexProps = [
+    'InfoModalPage',
+    'FormModalPage',
+    'CustomFormModalPage',
+    'TabularModalPage',
+];
+const deprecatedPropsToBeRemoved = ['level', 'baseZIndex'];
+function removeDeprecatedModalLevelProps(file, api, options) {
+    const j = api.jscodeshift;
+    const root = j(file.source);
+    let hasModifications = false;
+    function removeDepreactedPropsFromComponent(path) {
+        const node = path.node;
+        if (node.name.type === 'JSXIdentifier' &&
+            componentNamesWithDeprecatedZIndexProps.includes(node.name.name)) {
+            if (options.dry) {
+                api.stats(file.path);
+            }
+            else {
+                node.attributes =
+                    node.attributes?.filter((attribute) => {
+                        if (attribute.type === 'JSXAttribute' &&
+                            attribute.name.type === 'JSXIdentifier') {
+                            const hasDeprecatedAttribute = deprecatedPropsToBeRemoved.includes(attribute.name.name);
+                            hasModifications = true;
+                            return !hasDeprecatedAttribute;
+                        }
+                        return true;
+                    }) ?? [];
+            }
+        }
+    }
+    root.find(j.JSXOpeningElement).forEach(removeDepreactedPropsFromComponent);
+    return hasModifications
+        ? root.toSource({ ...options, quote: 'single' })
+        : null;
+}
+export default removeDeprecatedModalLevelProps;

package/build/src/transforms/rename-js-to-jsx.js

@@ -0,0 +1,20 @@
+import fs from 'fs';
+function renameJsToJsx(file, api, options) {
+    const j = api.jscodeshift;
+    const root = j(file.source);
+    if (file.path.endsWith('.js') && !file.path.endsWith('.spec.js')) {
+        const hasJSXElements = root.findJSXElements().length > 0;
+        if (hasJSXElements) {
+            if (options.dry) {
+                api.stats(file.path);
+            }
+            else {
+                const renamedFilePath = file.path.replace('.js', '.jsx');
+                fs.renameSync(file.path, renamedFilePath);
+                api.report(`renamed to ${renamedFilePath}`);
+            }
+        }
+    }
+    return null;
+}
+export default renameJsToJsx;

package/build/src/transforms/rename-mod-css-to-module-css.js

@@ -0,0 +1,29 @@
+import fs from 'fs';
+import path from 'path';
+function renameModCssToModuleCss(file, api, options) {
+    const j = api.jscodeshift;
+    let hasModifications = false;
+    function renameImportModCssToModuleCss(astPath) {
+        const node = astPath.node;
+        if (typeof node.source.value === 'string' &&
+            node.source.value.endsWith('.mod.css')) {
+            if (options.dry) {
+                api.stats(file.path);
+            }
+            else {
+                const previousCssModulesFilePath = node.source.value;
+                const nextCssModulesFilePath = previousCssModulesFilePath.replace('.mod.css', '.module.css');
+                node.source.value = nextCssModulesFilePath;
+                hasModifications = true;
+                // Side effect for renaming the actual CSS module file.
+                fs.renameSync(path.join(path.dirname(file.path), previousCssModulesFilePath), path.join(path.dirname(file.path), nextCssModulesFilePath));
+            }
+        }
+    }
+    const root = j(file.source);
+    root.find(j.ImportDeclaration).forEach(renameImportModCssToModuleCss);
+    return hasModifications
+        ? root.toSource({ ...options, quote: 'single' })
+        : null;
+}
+export default renameModCssToModuleCss;

package/build/src/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@commercetools-frontend/codemod",
+  "version": "0.0.0-CRAFT-1791-20251006162610",
+  "description": "Codemod transformations for Custom Applications",
+  "bugs": "https://github.com/commercetools/merchant-center-application-kit/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/commercetools/merchant-center-application-kit.git",
+    "directory": "packages/codemod"
+  },
+  "homepage": "https://docs.commercetools.com/merchant-center-customizations",
+  "keywords": [
+    "javascript",
+    "frontend",
+    "codemod",
+    "toolkit"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./build/src/index.js",
+  "files": [
+    "bin",
+    "build",
+    "package.json",
+    "LICENSE",
+    "README.md"
+  ],
+  "bin": {
+    "mc-codemod": "./bin/mc-codemod.js"
+  },
+  "dependencies": {
+    "@babel/core": "^7.22.17",
+    "@babel/preset-env": "^7.22.15",
+    "commander": "^13.1.0",
+    "glob": "8.1.0",
+    "jscodeshift": "0.16.1",
+    "prettier": "2.8.8"
+  },
+  "devDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@tsconfig/node22": "^22.0.0",
+    "@types/glob": "8.1.0",
+    "@types/jscodeshift": "0.12.0",
+    "@types/prettier": "2.7.3",
+    "rimraf": "5.0.10",
+    "typescript": "5.9.2",
+    "@commercetools-frontend/application-components": "0.0.0-CRAFT-1791-20251006162610"
+  },
+  "engines": {
+    "node": "18.x || 20.x || >=22.0.0"
+  },
+  "scripts": {
+    "build": "rimraf build && tsc",
+    "build:bundles:watch": "pnpm run build -w"
+  }
+}