@carbon/upgrade 11.20.0-rc.0 → 11.21.0

package/cli.js

@@ -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,32 @@ var upgrades = [
             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 +52749,7 @@ var upgrades = [
 var package_default = {
   name: "@carbon/upgrade",
   description: "A tool for upgrading Carbon versions",
-  version: "11.20.0-rc.0",
+  version: "11.21.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-rc.0",
+  "version": "11.21.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": "e48f5e6815bd93e518e8da73c7555590b85cda22"
+  "gitHead": "ab3eba8531c341d5ee5d956b962d7cce04944ac3"
 }

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-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-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;