@carbon/upgrade 11.20.0 → 11.22.0-rc.0

package/cli.js

@@ -40483,9 +40483,9 @@ var require_braces = __commonJS({
   }
 });
 
-// ../../node_modules/micromatch/node_modules/picomatch/lib/constants.js
+// ../../node_modules/picomatch/lib/constants.js
 var require_constants3 = __commonJS({
-  "../../node_modules/micromatch/node_modules/picomatch/lib/constants.js"(exports2, module2) {
+  "../../node_modules/picomatch/lib/constants.js"(exports2, module2) {
     "use strict";
     var path3 = require("path");
     var WIN_SLASH = "\\\\/";
@@ -40680,9 +40680,9 @@ var require_constants3 = __commonJS({
   }
 });
 
-// ../../node_modules/micromatch/node_modules/picomatch/lib/utils.js
+// ../../node_modules/picomatch/lib/utils.js
 var require_utils5 = __commonJS({
-  "../../node_modules/micromatch/node_modules/picomatch/lib/utils.js"(exports2) {
+  "../../node_modules/picomatch/lib/utils.js"(exports2) {
     "use strict";
     var path3 = require("path");
     var win32 = process.platform === "win32";
@@ -40741,9 +40741,9 @@ var require_utils5 = __commonJS({
   }
 });
 
-// ../../node_modules/micromatch/node_modules/picomatch/lib/scan.js
+// ../../node_modules/picomatch/lib/scan.js
 var require_scan2 = __commonJS({
-  "../../node_modules/micromatch/node_modules/picomatch/lib/scan.js"(exports2, module2) {
+  "../../node_modules/picomatch/lib/scan.js"(exports2, module2) {
     "use strict";
     var utils = require_utils5();
     var {
@@ -41071,9 +41071,9 @@ var require_scan2 = __commonJS({
   }
 });
 
-// ../../node_modules/micromatch/node_modules/picomatch/lib/parse.js
+// ../../node_modules/picomatch/lib/parse.js
 var require_parse4 = __commonJS({
-  "../../node_modules/micromatch/node_modules/picomatch/lib/parse.js"(exports2, module2) {
+  "../../node_modules/picomatch/lib/parse.js"(exports2, module2) {
     "use strict";
     var constants = require_constants3();
     var utils = require_utils5();
@@ -41844,9 +41844,9 @@ var require_parse4 = __commonJS({
   }
 });
 
-// ../../node_modules/micromatch/node_modules/picomatch/lib/picomatch.js
+// ../../node_modules/picomatch/lib/picomatch.js
 var require_picomatch = __commonJS({
-  "../../node_modules/micromatch/node_modules/picomatch/lib/picomatch.js"(exports2, module2) {
+  "../../node_modules/picomatch/lib/picomatch.js"(exports2, module2) {
     "use strict";
     var path3 = require("path");
     var scan = require_scan2();
@@ -41985,9 +41985,9 @@ var require_picomatch = __commonJS({
   }
 });
 
-// ../../node_modules/micromatch/node_modules/picomatch/index.js
+// ../../node_modules/picomatch/index.js
 var require_picomatch2 = __commonJS({
-  "../../node_modules/micromatch/node_modules/picomatch/index.js"(exports2, module2) {
+  "../../node_modules/picomatch/index.js"(exports2, module2) {
     "use strict";
     module2.exports = require_picomatch();
   }
@@ -52641,6 +52641,38 @@ var upgrades = [
           });
         }
       },
+      {
+        name: "refactor-light-to-layer",
+        description: `
+          Refactor 'light' prop usage to instead wrap components with Layer
+         Transforms:
+         <Button light>Click me</Button>
+         Into:
+        <Layer><Button>Click me</Button></Layer>
+      `,
+        migrate: async (options) => {
+          const transform = import_path2.default.join(
+            TRANSFORM_DIR,
+            "refactor-light-to-layer.js"
+          );
+          const paths = Array.isArray(options.paths) && options.paths.length > 0 ? options.paths : await (0, import_fast_glob2.default)(["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"], {
+            cwd: options.workspaceDir,
+            ignore: [
+              "**/es/**",
+              "**/lib/**",
+              "**/umd/**",
+              "**/node_modules/**",
+              "**/storybook-static/**"
+            ]
+          });
+          await run2({
+            dry: !options.write,
+            transform,
+            paths,
+            verbose: options.verbose
+          });
+        }
+      },
       {
         name: "refactor-to-callout",
         description: "Rewrites imports and usages of StaticNotification to Callout",
@@ -52663,6 +52695,58 @@ var upgrades = [
             verbose: options.verbose
           });
         }
+      },
+      {
+        name: "ibm-products-update-http-errors",
+        description: "Rewrites HttpError403, HttpError404, HttpErrorOther to FullPageError",
+        migrate: async (options) => {
+          const transform = import_path2.default.join(
+            TRANSFORM_DIR,
+            "ibm-products-update-http-errors.js"
+          );
+          const paths = Array.isArray(options.paths) && options.paths.length > 0 ? options.paths : await (0, import_fast_glob2.default)(["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"], {
+            cwd: options.workspaceDir,
+            ignore: [
+              "**/es/**",
+              "**/lib/**",
+              "**/umd/**",
+              "**/node_modules/**",
+              "**/storybook-static/**"
+            ]
+          });
+          await run2({
+            dry: !options.write,
+            transform,
+            paths,
+            verbose: options.verbose
+          });
+        }
+      },
+      {
+        name: "ibm-products-update-userprofileimage",
+        description: "Rewrites UserProfileImage to UserAvatar",
+        migrate: async (options) => {
+          const transform = import_path2.default.join(
+            TRANSFORM_DIR,
+            "ibm-products-update-userprofileimage.js"
+          );
+          const paths = Array.isArray(options.paths) && options.paths.length > 0 ? options.paths : await (0, import_fast_glob2.default)(["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"], {
+            cwd: options.workspaceDir,
+            ignore: [
+              "**/es/**",
+              "**/lib/**",
+              "**/umd/**",
+              "**/node_modules/**",
+              "**/storybook-static/**"
+            ]
+          });
+          await run2({
+            dry: !options.write,
+            transform,
+            paths,
+            verbose: options.verbose
+          });
+        }
       }
     ]
   },
@@ -52691,7 +52775,7 @@ var upgrades = [
 var package_default = {
   name: "@carbon/upgrade",
   description: "A tool for upgrading Carbon versions",
-  version: "11.20.0",
+  version: "11.22.0-rc.0",
   license: "Apache-2.0",
   bin: {
     "carbon-upgrade": "./bin/carbon-upgrade.js"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/upgrade",
   "description": "A tool for upgrading Carbon versions",
-  "version": "11.20.0",
+  "version": "11.22.0-rc.0",
   "license": "Apache-2.0",
   "bin": {
     "carbon-upgrade": "./bin/carbon-upgrade.js"
@@ -61,5 +61,5 @@
     "@ibm/telemetry-js": "^1.5.0",
     "jscodeshift": "^17.0.0"
   },
-  "gitHead": "3141442e5ef367667c8f1d379a1b4a23f67992ad"
+  "gitHead": "7b6d921583ff275baace5baa66da9d9b31740fa8"
 }

package/transforms/__testfixtures__/ibm-products-update-http-errors.input.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+  HTTPError403,
+  HTTPError404,
+  HTTPErrorOther,
+} from '@carbon/ibm-products';
+import './_example.scss';
+
+export const Example = () => (
+  <>
+    <HTTPError403
+      description="You are not authorized to access this resource."
+      errorCodeLabel="Error 403"
+      links={[
+        {
+          href: 'https://www.carbondesignsystem.com',
+          text: 'Carbon Design System',
+        },
+        {
+          href: 'https://github.com/carbon-design-system/ibm-products',
+          text: 'Carbon for IBM Products component library',
+        },
+        {
+          href: 'https://github.com/carbon-design-system/ibm-products',
+          text: 'Carbon for IBM Products component library',
+        },
+        {
+          href: 'https://github.com/carbon-design-system/ibm-products',
+          text: 'Carbon for IBM Products component library',
+        },
+        {
+          href: 'https://github.com/carbon-design-system/ibm-products',
+          text: 'Carbon for IBM Products component library',
+        },
+      ]}
+      title="Forbidden"
+    />
+    <HTTPError404
+      description="The page you are looking for was not found."
+      errorCodeLabel="Error 404"
+      links={[
+        {
+          href: 'https://www.carbondesignsystem.com',
+          text: 'Carbon Design System',
+        },
+        {
+          href: 'https://github.com/carbon-design-system/ibm-products',
+          text: 'Carbon for IBM Products component library',
+        },
+      ]}
+      title="Page not found"
+    />
+    <HTTPErrorOther
+      description="Received an invalid response."
+      errorCodeLabel="Error 502"
+      links={[
+        {
+          href: 'https://www.carbondesignsystem.com',
+          text: 'Carbon Design System',
+        },
+        {
+          href: 'https://github.com/carbon-design-system/ibm-products',
+          text: 'Carbon for IBM Products component library',
+        },
+      ]}
+      title="Bad gateway"
+    />
+    <MyComponent
+      errorCodeLabel="error"
+      links={[
+        {
+          href: 'https://www.carbondesignsystem.com',
+          text: 'Carbon Design System',
+        },
+        {
+          href: 'https://github.com/carbon-design-system/ibm-products',
+          text: 'Carbon for IBM Products component library',
+        },
+      ]}
+    />
+  </>
+);

package/transforms/__testfixtures__/ibm-products-update-http-errors.output.js

@@ -0,0 +1,40 @@
+import { Link } from "@carbon/react";
+import React from 'react';
+import { FullPageError } from '@carbon/ibm-products';
+import './_example.scss';
+
+export const Example = () => (
+  <>
+    <FullPageError
+      description="You are not authorized to access this resource."
+      label="Error 403"
+      children={<><Link href={"https://www.carbondesignsystem.com"}>Carbon Design System</Link><br /><Link href={"https://github.com/carbon-design-system/ibm-products"}>Carbon for IBM Products component library</Link><br /><Link href={"https://github.com/carbon-design-system/ibm-products"}>Carbon for IBM Products component library</Link><br /><Link href={"https://github.com/carbon-design-system/ibm-products"}>Carbon for IBM Products component library</Link><br /><Link href={"https://github.com/carbon-design-system/ibm-products"}>Carbon for IBM Products component library</Link></>}
+      title="Forbidden"
+      kind="403" />
+    <FullPageError
+      description="The page you are looking for was not found."
+      label="Error 404"
+      children={<><Link href={"https://www.carbondesignsystem.com"}>Carbon Design System</Link><br /><Link href={"https://github.com/carbon-design-system/ibm-products"}>Carbon for IBM Products component library</Link></>}
+      title="Page not found"
+      kind="404" />
+    <FullPageError
+      description="Received an invalid response."
+      label="Error 502"
+      children={<><Link href={"https://www.carbondesignsystem.com"}>Carbon Design System</Link><br /><Link href={"https://github.com/carbon-design-system/ibm-products"}>Carbon for IBM Products component library</Link></>}
+      title="Bad gateway"
+      kind="custom" />
+    <MyComponent
+      errorCodeLabel="error"
+      links={[
+        {
+          href: 'https://www.carbondesignsystem.com',
+          text: 'Carbon Design System',
+        },
+        {
+          href: 'https://github.com/carbon-design-system/ibm-products',
+          text: 'Carbon for IBM Products component library',
+        },
+      ]}
+    />
+  </>
+);

package/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 = () => (
+  <>
+    <UserProfileImage
+      size="md"
+      tooltipAlignment="bottom"
+      backgroundColor="light-purple"
+      theme="light"
+      tooltipText="Thomas Watson"
+      className="myClass"
+      initials="thomas j. watson"
+    />
+    <UserProfileImage
+      size="md"
+      tooltipAlignment="bottom"
+      backgroundColor="light-purple"
+      theme="light"
+      tooltipText="Thomas Watson"
+      className="myClass"
+      kind="user"
+    />
+    <UserProfileImage
+      size="md"
+      tooltipAlignment="bottom"
+      backgroundColor="light-purple"
+      theme="light"
+      tooltipText="Thomas Watson"
+      className="myClass"
+      icon={() => <Add size={20} />}
+    />
+    <UserProfileImage
+      size="md"
+      tooltipAlignment="bottom"
+      backgroundColor="light-purple"
+      theme="light"
+      tooltipText="Thomas Watson"
+      className="myClass"
+      image={ImageUrl}
+      imageDescription="Avatar of Thomas Watson"
+    />
+  </>
+);

package/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 = () => (
+  <>
+    <UserAvatar
+      size="md"
+      tooltipAlignment="bottom"
+      backgroundColor="order-5-purple"
+      tooltipText="Thomas Watson"
+      className="myClass"
+      name="thomas j. watson" />
+    <UserAvatar
+      size="md"
+      tooltipAlignment="bottom"
+      backgroundColor="order-5-purple"
+      tooltipText="Thomas Watson"
+      className="myClass"
+      renderIcon={User} />
+    <UserAvatar
+      size="md"
+      tooltipAlignment="bottom"
+      backgroundColor="order-5-purple"
+      tooltipText="Thomas Watson"
+      className="myClass"
+      renderIcon={() => <Add size={20} />} />
+    <UserAvatar
+      size="md"
+      tooltipAlignment="bottom"
+      backgroundColor="order-5-purple"
+      tooltipText="Thomas Watson"
+      className="myClass"
+      image={ImageUrl}
+      imageDescription="Avatar of Thomas Watson" />
+  </>
+);

package/transforms/__testfixtures__/refactor-light-to-layer.input.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Button, Layer } from '@carbon/react';
+
+function TestComponent() {
+  <div>
+    <Button light>Click me</Button>
+    <Button>Another button</Button>
+    <Layer>
+      <Button light>Nested light button</Button>
+    </Layer>
+  </div>;
+}
+
+export default TestComponent;

package/transforms/__testfixtures__/refactor-light-to-layer.output.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Button, Layer } from '@carbon/react';
+
+function TestComponent() {
+  <div>
+    <Layer><Button>Click me</Button></Layer>
+    <Button>Another button</Button>
+    <Layer>
+      <Layer><Button>Nested light button</Button></Layer>
+    </Layer>
+  </div>;
+}
+
+export default TestComponent;

package/transforms/__tests__/ibm-products-update-http-errors-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-http-errors');

package/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');

package/transforms/__tests__/refactor-light-to-layer-test.js

@@ -0,0 +1,5 @@
+'use strict';
+
+const { defineTest } = require('jscodeshift/dist/testUtils');
+
+defineTest(__dirname, 'refactor-light-to-layer');

package/transforms/ibm-products-update-http-errors.js

@@ -0,0 +1,192 @@
+/**
+ * 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 HttpError403, HttpError404, HttpErrorOther to FullPageError
+ *
+ * Transforms:
+ *
+ * <HttpError403 />, <HttpError404 />, <HttpErrorOther />
+ *
+ * Into:
+ *
+ * <FullPageError />
+ */
+
+'use strict';
+
+const transform = (file, api) => {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  let dirtyFlag = false;
+
+  const componentKindMap = {
+    HTTPError403: '403',
+    HTTPError404: '404',
+    HTTPErrorOther: 'custom',
+  };
+  const NEW_COMPONENT = 'FullPageError';
+  const LINK_COMPONENT = 'Link';
+
+  root.find(j.JSXElement).forEach((element) => {
+    const openingElement = element.node.openingElement;
+    const componentName = openingElement.name.name;
+
+    if (componentKindMap[componentName]) {
+      dirtyFlag = true;
+      // Opening tag
+      openingElement.name.name = NEW_COMPONENT;
+
+      if (element.node.closingElement) {
+        // Closing tag
+        element.node.closingElement.name.name = NEW_COMPONENT;
+      }
+
+      // Attach new 'kind' attribute
+      const kindAttribute = j.jsxAttribute(
+        j.jsxIdentifier('kind'),
+        j.literal(componentKindMap[componentName])
+      );
+      openingElement.attributes.push(kindAttribute);
+
+      // Change errorCodeLabel attribute to label
+      const errorCodeLabelProp = openingElement.attributes.find(
+        (attr) => attr.name.name === 'errorCodeLabel'
+      );
+      if (errorCodeLabelProp) {
+        errorCodeLabelProp.name.name = 'label';
+      }
+
+      // Convert 'links' prop to 'children' with <Link></Link> tags
+      const linksProp = openingElement.attributes.find(
+        (attr) => attr.name.name === 'links'
+      );
+      if (linksProp) {
+        linksProp.name.name = 'children';
+
+        // Convert link value elements
+        const linkValues = linksProp.value.expression.elements;
+        let linksLen = linkValues.length;
+        const linkElements = [];
+
+        linkValues.forEach((link) => {
+          const linkTag = j.jsxElement(
+            j.jsxOpeningElement(j.jsxIdentifier(LINK_COMPONENT), [
+              j.jsxAttribute(
+                j.jsxIdentifier('href'),
+                j.jsxExpressionContainer(
+                  j.literal(link.properties[0].value.value)
+                ),
+                j.jsxClosingElement(j.jsxIdentifier(LINK_COMPONENT))
+              ),
+            ]),
+            j.jsxClosingElement(j.jsxIdentifier(LINK_COMPONENT)),
+            [j.jsxText(link.properties[1].value.value)]
+          );
+          linkElements.push(linkTag);
+          linksLen--;
+          if (linksLen) {
+            const brTag = j.jsxElement(
+              j.jsxOpeningElement(j.jsxIdentifier('br'), [], true)
+            );
+
+            linkElements.push(brTag);
+          }
+        });
+
+        const linksFragment = j.jsxFragment(
+          j.jsxOpeningFragment(),
+          j.jsxClosingFragment(),
+          linkElements
+        );
+
+        linksProp.value = j.jsxExpressionContainer(linksFragment);
+      }
+    }
+  });
+
+  // Transform import statements if necessary
+  if (dirtyFlag) {
+    const importDeclarations = root.find(j.ImportDeclaration);
+    const CARBON_PATH = '@carbon/react';
+    const linkComponentSpecifier = j.importSpecifier(
+      j.identifier(LINK_COMPONENT),
+      j.identifier(LINK_COMPONENT)
+    );
+
+    // Check for '@carbon/react' import statement exists
+    const existCarbonImport = importDeclarations.some(
+      (importDeclaration) => importDeclaration.node.source.value === CARBON_PATH
+    );
+
+    // Update @carbon/imb-products import statement
+    importDeclarations.forEach((statement) => {
+      const specifiers = statement.node.specifiers;
+      const source = statement.node.source;
+      const PRODUCTS_PATH = '@carbon/ibm-products';
+
+      if (source.value === PRODUCTS_PATH) {
+        // Check new component name already imported
+        const isNewIdExists = specifiers.some(
+          (spec) => spec.imported.name === NEW_COMPONENT
+        );
+
+        // If the new component not already imported, import it
+        if (!isNewIdExists) {
+          const newSpecifier = j.importSpecifier(
+            j.identifier(NEW_COMPONENT),
+            j.identifier(NEW_COMPONENT)
+          );
+          // Including the new specifier into @carbon/ibm-products import statement
+          specifiers.push(newSpecifier);
+        }
+
+        Object.keys(componentKindMap).forEach((key) => {
+          // Check the old component names exists
+          const identifierIndex = specifiers.findIndex(
+            (spec) => spec.imported.name === key
+          );
+
+          // Remove all old components' import
+          if (identifierIndex !== -1) {
+            specifiers.splice(identifierIndex, 1);
+          }
+        });
+      }
+
+      // if the @carbon/react import statement already exists update the import
+      if (existCarbonImport && source.value === CARBON_PATH) {
+        // Check Link component already imported
+        const linkIdIndex = specifiers.findIndex(
+          (spec) => spec.imported.name === LINK_COMPONENT
+        );
+
+        // if Link component does not in the imported components list
+        if (linkIdIndex === -1) {
+          // Include the Link component in imported components list
+          specifiers.push(linkComponentSpecifier);
+        }
+      }
+    });
+
+    // If @carbon/react import statement not exists
+    if (!existCarbonImport) {
+      const carbonImportDeclaration = j.importDeclaration(
+        [linkComponentSpecifier],
+        j.literal(CARBON_PATH)
+      );
+
+      root
+        .find(j.Program)
+        .forEach((program) =>
+          program.node.body.unshift(carbonImportDeclaration)
+        );
+    }
+  }
+
+  return root.toSource();
+};
+
+module.exports = transform;

package/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:
+ *
+ * <UserProfileImage />
+ *
+ * Into:
+ *
+ * <UserAvatar />
+ */
+
+'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;

package/transforms/refactor-light-to-layer.js

@@ -0,0 +1,108 @@
+/**
+ * Copyright IBM Corp. 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.
+ *
+ * Deprecate the `light` prop and wrap components with `Layer`
+ *
+ * Transforms:
+ *
+ * <Button light>Click me</Button>
+ *
+ * Into:
+ *
+ * <Layer>
+ *   <Button>Click me</Button>
+ * </Layer>
+ */
+
+'use strict';
+
+const defaultOptions = {
+  quote: 'single',
+  trailingComma: true,
+};
+
+function transform(fileInfo, api, options) {
+  const { jscodeshift: j } = api;
+  const root = j(fileInfo.source);
+  const printOptions = options.printOptions || defaultOptions;
+
+  // Check if there are any components with the 'light' prop
+  const hasLightProp =
+    root.find(j.JSXAttribute, { name: { name: 'light' } }).size() > 0;
+
+  if (!hasLightProp) {
+    return null; // if no 'light' prop found, don't modify & return the file
+  }
+
+  // Import Layer component if not already imported
+  const layerImport = root.find(j.ImportDeclaration, {
+    source: { value: '@carbon/react' },
+  });
+
+  if (layerImport.length) {
+    const specifiers = layerImport.get('specifiers');
+    const hasLayerImport = specifiers.value.some(
+      (specifier) => specifier.imported && specifier.imported.name === 'Layer'
+    );
+
+    if (!hasLayerImport) {
+      specifiers.value.push(j.importSpecifier(j.identifier('Layer')));
+    }
+  } else {
+    const newImport = j.importDeclaration(
+      [j.importSpecifier(j.identifier('Layer'))],
+      j.literal('@carbon/react')
+    );
+    // Find the first import declaration
+    const firstImport = root.find(j.ImportDeclaration).at(0);
+
+    if (firstImport.length) {
+      // Insert the new import before the first existing import
+      firstImport.insertAfter(newImport);
+    } else {
+      // If no imports, find the first non-comment node
+      const firstNonCommentNode = root
+        .find(j.Program)
+        .get('body')
+        .filter(
+          (path) =>
+            path.value.type !== 'CommentBlock' &&
+            path.value.type !== 'CommentLine'
+        )[0];
+
+      // Insert the new import before the first non-comment node
+      j(firstNonCommentNode).insertBefore(newImport);
+    }
+  }
+
+  // Find all JSX elements with a 'light' prop
+  root.find(j.JSXElement).forEach((path) => {
+    const lightProp = path.node.openingElement.attributes.find(
+      (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'light'
+    );
+
+    if (lightProp) {
+      // Remove the 'light' prop
+      path.node.openingElement.attributes =
+        path.node.openingElement.attributes.filter(
+          (attr) => attr !== lightProp
+        );
+      // Wrap the component with Layer
+      const layerElement = j.jsxElement(
+        j.jsxOpeningElement(j.jsxIdentifier('Layer'), []),
+        j.jsxClosingElement(j.jsxIdentifier('Layer')),
+        [path.node]
+      );
+
+      // Replace the original element with the wrapped version
+      j(path).replaceWith(layerElement);
+    }
+  });
+
+  return root.toSource(printOptions);
+}
+
+module.exports = transform;