From 2a594b7ba3123b66eb2d4b31066cd81c52453121 Mon Sep 17 00:00:00 2001 From: Anamika T S <47971732+anamikaanu96@users.noreply.github.com> Date: Thu, 21 Nov 2024 01:57:41 +0530 Subject: [PATCH] feat: implement codemod ibm-products-update-userprofileimage (#18058) * feat: implement codemod ibm-products-update-userprofileimage * feat: implement codemod ibm-products-update-userprofileimage * feat: implement codemod ibm-products-update-userprofileimage * feat: implement codemod ibm-products-update-userprofileimage * feat: implement codemod ibm-products-update-userprofileimage * feat: implement codemod ibm-products-update-userprofileimage * feat: implement codemod ibm-products-update-userprofileimage * feat: implement codemod ibm-products-update-userprofileimage * feat: implement codemod ibm-products-update-userprofileimage * feat: implement codemod ibm-products-update-userprofileimage * feat: implement codemod ibm-products-update-userprofileimage * feat: codemod implementation removed sample file --------- Co-authored-by: Nikhil Tomar <63502271+2nikhiltom@users.noreply.github.com> --- packages/upgrade/src/upgrades.js | 30 +++++ ...-products-update-userprofileimage.input.js | 48 +++++++ ...products-update-userprofileimage.output.js | 41 ++++++ ...m-products-update-userprofileimage-test.js | 12 ++ .../ibm-products-update-userprofileimage.js | 125 ++++++++++++++++++ 5 files changed, 256 insertions(+) create mode 100644 packages/upgrade/transforms/__testfixtures__/ibm-products-update-userprofileimage.input.js create mode 100644 packages/upgrade/transforms/__testfixtures__/ibm-products-update-userprofileimage.output.js create mode 100644 packages/upgrade/transforms/__tests__/ibm-products-update-userprofileimage-test.js create mode 100644 packages/upgrade/transforms/ibm-products-update-userprofileimage.js diff --git a/packages/upgrade/src/upgrades.js b/packages/upgrade/src/upgrades.js index 17ba125c7d0f..8a9bd4c05f14 100644 --- a/packages/upgrade/src/upgrades.js +++ b/packages/upgrade/src/upgrades.js @@ -396,6 +396,36 @@ export const upgrades = [ }); }, }, + { + name: 'ibm-products-update-userprofileimage', + description: 'Rewrites UserProfileImage to UserAvatar', + migrate: async (options) => { + const transform = path.join( + TRANSFORM_DIR, + 'ibm-products-update-userprofileimage.js' + ); + const paths = + Array.isArray(options.paths) && options.paths.length > 0 + ? options.paths + : await glob(['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'], { + cwd: options.workspaceDir, + ignore: [ + '**/es/**', + '**/lib/**', + '**/umd/**', + '**/node_modules/**', + '**/storybook-static/**', + ], + }); + + await run({ + dry: !options.write, + transform, + paths, + verbose: options.verbose, + }); + }, + }, ], }, { diff --git a/packages/upgrade/transforms/__testfixtures__/ibm-products-update-userprofileimage.input.js b/packages/upgrade/transforms/__testfixtures__/ibm-products-update-userprofileimage.input.js new file mode 100644 index 000000000000..889770918fd3 --- /dev/null +++ b/packages/upgrade/transforms/__testfixtures__/ibm-products-update-userprofileimage.input.js @@ -0,0 +1,48 @@ +import React from 'react'; +import { UserProfileImage } from '@carbon/ibm-products'; +import { Add } from '@carbon/react/icons'; + +const ImageUrl = + 'https://img.freepik.com/free-photo/portrait-man-cartoon-style_23-2151133939.jpg?semt=ais_hybrid'; + +export const Example = () => ( + <> + + + } + /> + + +); diff --git a/packages/upgrade/transforms/__testfixtures__/ibm-products-update-userprofileimage.output.js b/packages/upgrade/transforms/__testfixtures__/ibm-products-update-userprofileimage.output.js new file mode 100644 index 000000000000..2780bec7305d --- /dev/null +++ b/packages/upgrade/transforms/__testfixtures__/ibm-products-update-userprofileimage.output.js @@ -0,0 +1,41 @@ +import { User } from "@carbon/react/icons"; +import React from 'react'; +import { UserAvatar } from '@carbon/ibm-products'; +import { Add } from '@carbon/react/icons'; + +const ImageUrl = + 'https://img.freepik.com/free-photo/portrait-man-cartoon-style_23-2151133939.jpg?semt=ais_hybrid'; + +export const Example = () => ( + <> + + + } /> + + +); diff --git a/packages/upgrade/transforms/__tests__/ibm-products-update-userprofileimage-test.js b/packages/upgrade/transforms/__tests__/ibm-products-update-userprofileimage-test.js new file mode 100644 index 000000000000..c9c144b9236d --- /dev/null +++ b/packages/upgrade/transforms/__tests__/ibm-products-update-userprofileimage-test.js @@ -0,0 +1,12 @@ +/** + * Copyright IBM Corp. 2021, 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +'use strict'; + +const { defineTest } = require('jscodeshift/dist/testUtils'); + +defineTest(__dirname, 'ibm-products-update-userprofileimage'); diff --git a/packages/upgrade/transforms/ibm-products-update-userprofileimage.js b/packages/upgrade/transforms/ibm-products-update-userprofileimage.js new file mode 100644 index 000000000000..38fbf5bb9679 --- /dev/null +++ b/packages/upgrade/transforms/ibm-products-update-userprofileimage.js @@ -0,0 +1,125 @@ +/** + * Copyright IBM Corp. 2021, 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * Rewrites UserProfileImage to UserAvatar + * + * Transforms: + * + * + * + * Into: + * + * + */ + +'use strict'; + +const transform = (fileInfo, api) => { + const j = api.jscodeshift; + const root = j(fileInfo.source); + let shouldImportUser = false; + let shouldImportGroup = false; + + const ensureImport = (identifierName) => { + const importDeclaration = j.importDeclaration( + [j.importSpecifier(j.identifier(identifierName))], + j.literal('@carbon/react/icons') + ); + + const existingImport = root + .find(j.ImportDeclaration, { + source: { value: '@carbon/react/icons' }, + }) + .filter((path) => { + return path.node.specifiers.some( + (specifier) => specifier.imported.name === identifierName + ); + }); + + if (existingImport.size() === 0) { + root.find(j.Program).get('body', 0).insertBefore(importDeclaration); + } + }; + // Transform UserProfileImage to UserAvatar + root + .find(j.JSXElement, { + openingElement: { name: { name: 'UserProfileImage' } }, + }) + .forEach((path) => { + // Change the component name + path.node.openingElement.name.name = 'UserAvatar'; + if (path.node.closingElement) { + path.node.closingElement.name.name = 'UserAvatar'; + } + + const colorMapping = { + 'light-cyan': 'order-1-cyan', + 'dark-cyan': 'order-7-cyan', + 'light-gray': 'order-2-gray', + 'dark-gray': 'order-8-gray', + 'light-green': 'order-3-green', + 'dark-green': 'order-9-green', + 'light-magenta': 'order-10-magenta', + 'dark-magenta': 'order-10-magenta', + 'light-purple': 'order-5-purple', + 'dark-purple': 'order-11-purple', + 'light-teal': 'order-6-teal', + 'dark-teal': 'order-12-teal', + }; + const updatedAttributes = []; + // Update attributes + path.node.openingElement.attributes.forEach((attr) => { + if (attr.name.name === 'backgroundColor') { + if (colorMapping[attr.value.value]) { + attr.value.value = colorMapping[attr.value.value]; + } + } + if (attr.name.name === 'theme') { + return; + } + if (attr.name.name === 'initials') { + attr.name.name = 'name'; + } + if (attr.name.name === 'kind' || attr.name.name === 'icon') { + const originalName = attr.name.name; + attr.name.name = 'renderIcon'; + if (originalName === 'kind') { + if (attr.value.value === 'user') { + attr.value = j.jsxExpressionContainer(j.identifier('User')); + shouldImportUser = true; + } else if (attr.value.value === 'group') { + attr.value = j.jsxExpressionContainer(j.identifier('Group')); + shouldImportGroup = true; + } + } + } + updatedAttributes.push(attr); + }); + path.node.openingElement.attributes = updatedAttributes; + }); + // Update import statement + root + .find(j.ImportDeclaration) + .filter((path) => path.node.source.value === '@carbon/ibm-products') + .forEach((path) => { + path.node.specifiers.forEach((specifier) => { + if (specifier.imported.name === 'UserProfileImage') { + specifier.imported.name = 'UserAvatar'; + } + }); + }); + + if (shouldImportUser) { + ensureImport('User'); + } + + if (shouldImportGroup) { + ensureImport('Group'); + } + return root.toSource(); +}; + +module.exports = transform;