@commercetools-frontend/codemod 0.0.0-FEC-157-preview-releases-20241126230331

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,51 @@
+# @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}'
+```

package/bin/mc-codemod.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+require('../').cli();

package/build/package.json

@@ -0,0 +1,46 @@
+{
+    "name": "@commercetools-frontend/codemod",
+    "version": "22.35.1",
+    "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",
+        "cac": "6.7.14",
+        "glob": "8.1.0",
+        "jscodeshift": "0.15.2",
+        "prettier": "2.8.8"
+    },
+    "devDependencies": {
+        "@commercetools-frontend/application-components": "workspace:*",
+        "@emotion/react": "^11.11.4",
+        "@tsconfig/node16": "^16.1.1",
+        "@types/glob": "8.1.0",
+        "@types/jscodeshift": "0.11.11",
+        "rimraf": "5.0.7",
+        "typescript": "5.0.4"
+    },
+    "engines": {
+        "node": "16.x || >=18.0.0"
+    }
+}

package/build/src/cli.js

@@ -0,0 +1,82 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.run = void 0;
+const path_1 = __importDefault(require("path"));
+const cac_1 = __importDefault(require("cac"));
+const glob_1 = __importDefault(require("glob"));
+// @ts-ignore internal module
+const Runner_1 = __importDefault(require("jscodeshift/src/Runner"));
+const package_json_1 = __importDefault(require("../package.json"));
+const cli = (0, cac_1.default)('mc-codemod');
+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".',
+    },
+];
+const executeCodemod = async (transform, globPattern, globalOptions) => {
+    const files = glob_1.default.sync(globPattern);
+    const runJscodeshift = async (transformPath, filePaths, options) => {
+        await Runner_1.default.run(transformPath, filePaths, options);
+    };
+    switch (transform) {
+        case 'redesign-cleanup':
+        case 'remove-deprecated-modal-level-props':
+        case 'rename-js-to-jsx':
+        case 'rename-mod-css-to-module-css': {
+            const transformPath = path_1.default.join(__dirname, `transforms/${transform}.js`);
+            await runJscodeshift(transformPath, files, {
+                extensions: 'tsx,ts,jsx,js',
+                ignorePattern: [
+                    '**/node_modules/**',
+                    '**/public/**',
+                    '**/dist/**',
+                    '**/build/**',
+                ],
+                parser: 'tsx',
+                verbose: 0,
+                dry: globalOptions.dryRun,
+            });
+            break;
+        }
+        default:
+            throw new Error(`Unknown transform ${transform}.`);
+    }
+};
+const run = () => {
+    cli.option('--dry-run', `(optional) Executes the command but does not send any mutation request.`, { default: false });
+    // Default command
+    cli
+        .command('')
+        .usage('\n\n  Codemods for updating Custom Applications.')
+        .action(() => {
+        cli.outputHelp();
+    });
+    // Transform commands
+    transforms.forEach((transform) => {
+        cli
+            .command(`${transform.name} <glob-pattern>`, transform.description)
+            .usage(`${transform.name} <glob-pattern>\n\n  ${transform.description}`)
+            .action((globPattern, globalOptions) => executeCodemod(transform.name, globPattern, globalOptions));
+    });
+    cli.help();
+    cli.version(package_json_1.default.version);
+    cli.parse();
+};
+exports.run = run;
+exports.default = exports.run;

package/build/src/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cli = void 0;
+const cli_1 = __importDefault(require("./cli"));
+exports.cli = cli_1.default;

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

@@ -0,0 +1,389 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const prettier_1 = __importDefault(require("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_1.default.resolveConfig(file.path);
+        return prettier_1.default.format(root.toSource(), prettierConfig);
+    }
+    else {
+        return null;
+    }
+}
+exports.default = themeMigrationCleanup;

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

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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;
+}
+exports.default = removeDeprecatedModalLevelProps;

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

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fs_1 = __importDefault(require("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_1.default.renameSync(file.path, renamedFilePath);
+                api.report(`renamed to ${renamedFilePath}`);
+            }
+        }
+    }
+    return null;
+}
+exports.default = renameJsToJsx;

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

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("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_1.default.renameSync(path_1.default.join(path_1.default.dirname(file.path), previousCssModulesFilePath), path_1.default.join(path_1.default.dirname(file.path), nextCssModulesFilePath));
+            }
+        }
+    }
+    const root = j(file.source);
+    root.find(j.ImportDeclaration).forEach(renameImportModCssToModuleCss);
+    return hasModifications
+        ? root.toSource({ ...options, quote: 'single' })
+        : null;
+}
+exports.default = renameModCssToModuleCss;

package/build/src/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@commercetools-frontend/codemod",
+  "version": "0.0.0-FEC-157-preview-releases-20241126230331",
+  "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",
+    "cac": "6.7.14",
+    "glob": "8.1.0",
+    "jscodeshift": "0.15.2",
+    "prettier": "2.8.8"
+  },
+  "devDependencies": {
+    "@emotion/react": "^11.11.4",
+    "@tsconfig/node16": "^16.1.1",
+    "@types/glob": "8.1.0",
+    "@types/jscodeshift": "0.11.11",
+    "rimraf": "5.0.7",
+    "typescript": "5.0.4",
+    "@commercetools-frontend/application-components": "0.0.0-FEC-157-preview-releases-20241126230331"
+  },
+  "engines": {
+    "node": "16.x || >=18.0.0"
+  },
+  "scripts": {
+    "build": "rimraf build && tsc",
+    "build:bundles:watch": "pnpm run build -w"
+  }
+}