@commercetools-frontend/codemod 21.25.0 → 21.25.2

package/README.md

@@ -41,3 +41,11 @@ 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/build/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@commercetools-frontend/codemod",
-    "version": "21.25.0",
+    "version": "21.25.2",
     "description": "Codemod transformations for Custom Applications",
     "bugs": "https://github.com/commercetools/merchant-center-application-kit/issues",
     "repository": {
@@ -26,13 +26,14 @@
     "dependencies": {
         "cac": "6.7.14",
         "glob": "8.1.0",
-        "jscodeshift": "0.14.0"
+        "jscodeshift": "0.14.0",
+        "prettier": "2.8.4"
     },
     "devDependencies": {
         "@tsconfig/node16": "^1.0.3",
         "@types/jscodeshift": "0.11.6",
         "rimraf": "3.0.2",
-        "typescript": "4.9.5"
+        "typescript": "5.0.4"
     },
     "engines": {
         "node": "14.x || >=16.0.0"

package/build/src/cli.js

@@ -24,6 +24,10 @@ const transforms = [
         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);
@@ -31,6 +35,7 @@ const executeCodemod = async (transform, globPattern, globalOptions) => {
         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': {

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/codemod",
-  "version": "21.25.0",
+  "version": "21.25.2",
   "description": "Codemod transformations for Custom Applications",
   "bugs": "https://github.com/commercetools/merchant-center-application-kit/issues",
   "repository": {
@@ -26,13 +26,14 @@
   "dependencies": {
     "cac": "6.7.14",
     "glob": "8.1.0",
-    "jscodeshift": "0.14.0"
+    "jscodeshift": "0.14.0",
+    "prettier": "2.8.4"
   },
   "devDependencies": {
     "@tsconfig/node16": "^1.0.3",
     "@types/jscodeshift": "0.11.6",
     "rimraf": "3.0.2",
-    "typescript": "4.9.5"
+    "typescript": "5.0.4"
   },
   "engines": {
     "node": "14.x || >=16.0.0"