@react-spectrum/codemods 0.5.2 → 0.6.0

package/dist/s1-to-s2/src/codemods/codemod.js

@@ -15,27 +15,35 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = transformer;
 /* eslint-disable max-depth */
-const utils_1 = require("./utils");
-const changes_1 = require("./changes");
-const transforms_1 = require("./transforms");
+const utils_1 = require("./shared/utils");
 const getComponents_1 = require("../getComponents");
-const iconMap_1 = require("../iconMap");
+const iconMap_1 = require("./icons/iconMap");
 const recast_1 = require("recast");
 const t = __importStar(require("@babel/types"));
-const styleProps_1 = require("./styleProps");
+const styleProps_1 = __importDefault(require("./shared/styleProps"));
 const traverse_1 = __importDefault(require("@babel/traverse"));
 // Determine list of available components in S2 from index.ts
 let availableComponents = (0, getComponents_1.getComponents)();
@@ -194,7 +202,7 @@ function transformer(file, api, options) {
             return;
         }
         try {
-            let res = (0, styleProps_1.transformStyleProps)(path, elementName);
+            let res = (0, styleProps_1.default)(path, elementName);
             if (res) {
                 hasMacros || (hasMacros = res.hasMacros);
                 usedLightDark || (usedLightDark = res.usedLightDark);
@@ -203,19 +211,19 @@ function transformer(file, api, options) {
         catch (error) {
             (0, utils_1.addComment)(path.node, ' TODO(S2-upgrade): Could not transform style prop automatically: ' + error);
         }
-        const componentInfo = changes_1.changes[elementName];
-        if (!componentInfo) {
-            return;
-        }
-        const { changes } = componentInfo;
-        changes.forEach((change) => {
-            const { function: functionInfo } = change;
-            let { name: functionName, args: functionArgs } = functionInfo;
-            // Call the respective transformation function
-            if (transforms_1.functionMap[functionName]) {
-                transforms_1.functionMap[functionName](path, functionArgs);
+        // Try to find a specific transform
+        try {
+            // Dynamically import the transform based on elementName
+            const transformPath = `./components/${elementName}/transform`;
+            // Use require for dynamic import in CommonJS context
+            const componentTransform = require(transformPath);
+            if (componentTransform && typeof componentTransform.default === 'function') {
+                componentTransform.default(path);
             }
-        });
+        }
+        catch {
+            // Do nothing if the transform doesn't exist
+        }
     });
     if (hasMacros) {
         let specifiers = [t.importSpecifier(t.identifier('style'), t.identifier('style'))];

package/dist/s1-to-s2/src/codemods/components/ActionGroup/transform.js

@@ -0,0 +1,164 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformActionGroup;
+const utils_1 = require("../../shared/utils");
+const transforms_1 = require("../../shared/transforms");
+const getComponents_1 = require("../../../getComponents");
+const t = __importStar(require("@babel/types"));
+let availableComponents = (0, getComponents_1.getComponents)();
+/**
+ * Transforms ActionGroup:
+ * - Comment out overflowMode (it has not been implemented yet).
+ * - Comment out buttonLabelBehavior (it has not been implemented yet).
+ * - Comment out summaryIcon (it has not been implemented yet).
+ * - Use ActionButtonGroup if no selection.
+ * - Use ToggleButtonGroup if selection is used.
+ * - Update root level onAction to onPress on each ActionButton.
+ * - Apply isDisabled directly on each ActionButton/ToggleButton instead of disabledKeys.
+ * - Convert dynamic collections render function to items.map.
+ */
+function transformActionGroup(path) {
+    // Comment out overflowMode
+    (0, transforms_1.commentOutProp)(path, { propName: 'overflowMode' });
+    // Comment out buttonLabelBehavior
+    (0, transforms_1.commentOutProp)(path, { propName: 'buttonLabelBehavior' });
+    // Comment out summaryIcon
+    (0, transforms_1.commentOutProp)(path, { propName: 'summaryIcon' });
+    let selectionModePath = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === 'selectionMode');
+    let selectionMode = t.isStringLiteral(selectionModePath?.node.value) ? selectionModePath.node.value.value : 'none';
+    let newComponentName, childComponentName;
+    if (selectionMode === 'none') {
+        // Use ActionButtonGroup if no selection
+        newComponentName = 'ActionButtonGroup';
+        childComponentName = 'ActionButton';
+        selectionModePath?.remove();
+    }
+    else {
+        // Use ToggleButtonGroup if selection is used
+        newComponentName = 'ToggleButtonGroup';
+        childComponentName = 'ToggleButton';
+    }
+    let localName = newComponentName;
+    if (availableComponents.has(newComponentName)) {
+        let program = path.findParent((p) => t.isProgram(p.node));
+        localName = (0, utils_1.addComponentImport)(program, newComponentName);
+    }
+    let localChildName = childComponentName;
+    if (availableComponents.has(childComponentName)) {
+        let program = path.findParent((p) => t.isProgram(p.node));
+        localChildName = (0, utils_1.addComponentImport)(program, childComponentName);
+    }
+    // Convert dynamic collection to an array.map.
+    let items = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === 'items');
+    let itemArg;
+    if (items && t.isJSXExpressionContainer(items.node.value) && t.isExpression(items.node.value.expression)) {
+        let child = path.get('children').find(c => c.isJSXExpressionContainer());
+        if (child && child.isJSXExpressionContainer() && t.isFunction(child.node.expression)) {
+            let arg = child.node.expression.params[0];
+            if (t.isIdentifier(arg)) {
+                itemArg = arg;
+            }
+            child.replaceWith(t.jsxExpressionContainer(t.callExpression(t.memberExpression(items.node.value.expression, t.identifier('map')), [child.node.expression])));
+        }
+    }
+    items?.remove();
+    let onAction = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === 'onAction');
+    // Pull disabledKeys prop out into a variable, converted to a Set.
+    // Then we can check it in the isDisabled prop of each item.
+    let disabledKeysPath = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === 'disabledKeys');
+    let disabledKeys;
+    if (disabledKeysPath && t.isJSXExpressionContainer(disabledKeysPath.node.value) && t.isExpression(disabledKeysPath.node.value.expression)) {
+        disabledKeys = path.scope.generateUidIdentifier('disabledKeys');
+        path.scope.push({
+            id: disabledKeys,
+            init: t.newExpression(t.identifier('Set'), [disabledKeysPath.node.value.expression]),
+            kind: 'let'
+        });
+        disabledKeysPath.remove();
+    }
+    path.traverse({
+        JSXElement(child) {
+            if (t.isJSXIdentifier(child.node.openingElement.name) && child.node.openingElement.name.name === 'Item') {
+                // Replace Item with ActionButton or ToggleButton.
+                let childNode = t.cloneNode(child.node);
+                childNode.openingElement.name = t.jsxIdentifier(localChildName);
+                if (childNode.closingElement) {
+                    childNode.closingElement.name = t.jsxIdentifier(localChildName);
+                }
+                // If there is no key prop and we are using dynamic collections, add a default computed from item.key ?? item.id.
+                let key = childNode.openingElement.attributes.find(attr => t.isJSXAttribute(attr) && attr.name.name === 'key');
+                if (!key && itemArg) {
+                    let id = t.jsxExpressionContainer(t.logicalExpression('??', t.memberExpression(itemArg, t.identifier('key')), t.memberExpression(itemArg, t.identifier('id'))));
+                    key = t.jsxAttribute(t.jsxIdentifier('key'), id);
+                    childNode.openingElement.attributes.push(key);
+                }
+                // If this is a ToggleButtonGroup, add an id prop in addition to key when needed.
+                if (key && newComponentName === 'ToggleButtonGroup') {
+                    // If we are in an array.map we need both key and id. Otherwise, we only need id.
+                    if (itemArg) {
+                        childNode.openingElement.attributes.push(t.jsxAttribute(t.jsxIdentifier('id'), key.value));
+                    }
+                    else {
+                        key.name.name = 'id';
+                    }
+                }
+                let keyValue = undefined;
+                if (key && t.isJSXExpressionContainer(key.value) && t.isExpression(key.value.expression)) {
+                    keyValue = key.value.expression;
+                }
+                else if (key && t.isStringLiteral(key.value)) {
+                    keyValue = key.value;
+                }
+                // Add an onPress to each item that calls the previous onAction, passing in the key.
+                if (onAction && t.isJSXExpressionContainer(onAction.node.value) && t.isExpression(onAction.node.value.expression)) {
+                    childNode.openingElement.attributes.push(t.jsxAttribute(t.jsxIdentifier('onPress'), t.jsxExpressionContainer(keyValue
+                        ? t.arrowFunctionExpression([], t.callExpression(onAction.node.value.expression, [keyValue]))
+                        : onAction.node.value.expression)));
+                }
+                // Add an isDisabled prop to each item, testing whether it is in disabledKeys.
+                if (disabledKeys && keyValue) {
+                    childNode.openingElement.attributes.push(t.jsxAttribute(t.jsxIdentifier('isDisabled'), t.jsxExpressionContainer(t.callExpression(t.memberExpression(disabledKeys, t.identifier('has')), [keyValue]))));
+                }
+                child.replaceWith(childNode);
+            }
+        }
+    });
+    onAction?.remove();
+    path.node.openingElement.name = t.jsxIdentifier(localName);
+    if (path.node.closingElement) {
+        path.node.closingElement.name = t.jsxIdentifier(localName);
+    }
+}

package/dist/s1-to-s2/src/codemods/components/ActionMenu/transform.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformActionMenu;
+const transforms_1 = require("../../shared/transforms");
+/**
+ * Transforms ActionMenu:
+ * - Comment out closeOnSelect (it has not been implemented yet).
+ * - Comment out trigger (it has not been implemented yet).
+ */
+function transformActionMenu(path) {
+    // Comment out closeOnSelect
+    (0, transforms_1.commentOutProp)(path, { propName: 'closeOnSelect' });
+    // Comment out trigger
+    (0, transforms_1.commentOutProp)(path, { propName: 'trigger' });
+}

package/dist/s1-to-s2/src/codemods/components/Avatar/transform.js

@@ -0,0 +1,77 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformAvatar;
+const transforms_1 = require("../../shared/transforms");
+const utils_1 = require("../../shared/utils");
+const t = __importStar(require("@babel/types"));
+function updateAvatarSize(path) {
+    if (t.isJSXElement(path.node) &&
+        t.isJSXIdentifier(path.node.openingElement.name) &&
+        (0, utils_1.getName)(path, path.node.openingElement.name) === 'Avatar') {
+        let sizeAttrPath = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === 'size');
+        if (sizeAttrPath) {
+            let value = sizeAttrPath.node.value;
+            if (value?.type === 'StringLiteral') {
+                const avatarDimensions = {
+                    'avatar-size-50': 16,
+                    'avatar-size-75': 18,
+                    'avatar-size-100': 20,
+                    'avatar-size-200': 22,
+                    'avatar-size-300': 26,
+                    'avatar-size-400': 28,
+                    'avatar-size-500': 32,
+                    'avatar-size-600': 36,
+                    'avatar-size-700': 40
+                };
+                let val = avatarDimensions[value.value];
+                if (val != null) {
+                    sizeAttrPath.node.value = t.jsxExpressionContainer(t.numericLiteral(val));
+                }
+            }
+        }
+    }
+}
+/**
+ * Transforms Avatar:
+ * - Comment out isDisabled (it has not been implemented yet).
+ * - Update size to be a pixel value if it currently matches 'avatar-size-*'.
+ */
+function transformAvatar(path) {
+    // Comment out isDisabled
+    (0, transforms_1.commentOutProp)(path, { propName: 'isDisabled' });
+    // Update size to be a pixel value if it currently matches 'avatar-size-*'
+    updateAvatarSize(path);
+}

package/dist/s1-to-s2/src/codemods/components/Badge/transform.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformBadge;
+const transforms_1 = require("../../shared/transforms");
+/**
+ * Transforms Badge:
+ * - Change variant="info" to variant="informative".
+ */
+function transformBadge(path) {
+    // Change variant="info" to variant="informative"
+    (0, transforms_1.updatePropNameAndValue)(path, {
+        oldPropName: 'variant',
+        oldPropValue: 'info',
+        newPropName: 'variant',
+        newPropValue: 'informative'
+    });
+}

package/dist/s1-to-s2/src/codemods/components/Breadcrumbs/transform.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformBreadcrumbs;
+const transforms_1 = require("../../shared/transforms");
+/**
+ * Transforms Breadcrumbs:
+ * - Comment out showRoot (it has not been implemented yet).
+ * - Comment out isMultiline (it has not been implemented yet).
+ * - Comment out autoFocusCurrent (it has not been implemented yet).
+ * - Remove size="S" (Small is no longer a supported size in Spectrum 2).
+ * - Add comment to wrap in nav element if needed.
+ */
+function transformBreadcrumbs(path) {
+    // Comment out showRoot
+    (0, transforms_1.commentOutProp)(path, { propName: 'showRoot' });
+    // Comment out isMultiline
+    (0, transforms_1.commentOutProp)(path, { propName: 'isMultiline' });
+    // Comment out autoFocusCurrent
+    (0, transforms_1.commentOutProp)(path, { propName: 'autoFocusCurrent' });
+    // Remove size="S"
+    (0, transforms_1.removeProp)(path, { propName: 'size', propValue: 'S' });
+    // Add comment to wrap in nav element if needed
+    (0, transforms_1.addCommentToElement)(path, {
+        comment: 'S2 Breadcrumbs no longer includes a nav element by default. You can wrap the Breadcrumbs component in a nav element if needed.'
+    });
+}

package/dist/s1-to-s2/src/codemods/components/Button/transform.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformButton;
+const transforms_1 = require("../../shared/transforms");
+/**
+ * Transforms Button:
+ * - Change variant="cta" to variant="accent"
+ * - Change variant="overBackground" to variant="primary" staticColor="white"
+ * - Change style to fillStyle
+ * - Remove isQuiet (it is no longer supported in Spectrum 2)
+ * - If href is present, the Button should be converted to a LinkButton
+ * - Remove elementType (it is no longer supported in Spectrum 2).
+ */
+function transformButton(path) {
+    // Change variant="cta" to variant="accent"
+    (0, transforms_1.updatePropNameAndValue)(path, {
+        oldPropName: 'variant',
+        oldPropValue: 'cta',
+        newPropName: 'variant',
+        newPropValue: 'accent'
+    });
+    // Change variant="overBackground" to variant="primary" staticColor="white"
+    (0, transforms_1.updatePropValueAndAddNewPropName)(path, {
+        oldPropName: 'variant',
+        oldPropValue: 'overBackground',
+        newPropName: 'variant',
+        newPropValue: 'primary',
+        additionalPropName: 'staticColor',
+        additionalPropValue: 'white'
+    });
+    // Change style to fillStyle
+    (0, transforms_1.updatePropName)(path, {
+        oldPropName: 'style',
+        newPropName: 'fillStyle'
+    });
+    // Remove isQuiet
+    (0, transforms_1.removeProp)(path, { propName: 'isQuiet' });
+    // If href is present, the Button should be converted to a LinkButton
+    (0, transforms_1.updateComponentIfPropPresent)(path, {
+        propName: 'href',
+        newComponentName: 'LinkButton'
+    });
+    // Remove elementType
+    (0, transforms_1.removeProp)(path, { propName: 'elementType' });
+}

package/dist/s1-to-s2/src/codemods/components/CheckboxGroup/transform.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformCheckboxGroup;
+const transforms_1 = require("../../shared/transforms");
+/**
+ * Transforms CheckboxGroup:
+ * - Remove showErrorIcon (it has been removed due to accessibility issues).
+ */
+function transformCheckboxGroup(path) {
+    // Remove showErrorIcon
+    (0, transforms_1.removeProp)(path, { propName: 'showErrorIcon' });
+}

package/dist/s1-to-s2/src/codemods/components/ColorField/transform.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformColorField;
+const transforms_1 = require("../../shared/transforms");
+/**
+ * Transforms ColorField:
+ * - Remove isQuiet (it is no longer supported in Spectrum 2).
+ * - Remove placeholder (it has been removed due to accessibility issues).
+ * - Change validationState="invalid" to isInvalid.
+ * - Remove validationState="valid" (it is no longer supported in Spectrum 2).
+ */
+function transformColorField(path) {
+    // Remove isQuiet
+    (0, transforms_1.removeProp)(path, { propName: 'isQuiet' });
+    // Remove placeholder
+    (0, transforms_1.removeProp)(path, { propName: 'placeholder' });
+    // Change validationState="invalid" to isInvalid
+    (0, transforms_1.updatePropNameAndValue)(path, {
+        oldPropName: 'validationState',
+        oldPropValue: 'invalid',
+        newPropName: 'isInvalid',
+        newPropValue: true
+    });
+    // Remove validationState="valid"
+    (0, transforms_1.removeProp)(path, { propName: 'validationState', propValue: 'valid' });
+}

package/dist/s1-to-s2/src/codemods/components/ColorSlider/transform.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformColorSlider;
+const transforms_1 = require("../../shared/transforms");
+/**
+ * Transforms ColorSlider:
+ * - Remove showValueLabel (it has been removed due to accessibility issues).
+ */
+function transformColorSlider(path) {
+    // Remove showValueLabel
+    (0, transforms_1.removeProp)(path, { propName: 'showValueLabel' });
+}

package/dist/s1-to-s2/src/codemods/components/Column/transform.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformColumn;
+const transforms_1 = require("../../shared/transforms");
+/**
+ * Transforms Column:
+ * - Update key to id.
+ */
+function transformColumn(path) {
+    // Update key to id
+    (0, transforms_1.updateKeyToId)(path);
+}

package/dist/s1-to-s2/src/codemods/components/ComboBox/transform.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformComboBox;
+const transforms_1 = require("../../shared/transforms");
+/**
+ * Transforms ComboBox:
+ * - Change menuWidth value from a DimensionValue to a pixel value.
+ * - Remove isQuiet (it is no longer supported in Spectrum 2).
+ * - Remove placeholder (it is no longer supported in Spectrum 2).
+ * - Change validationState="invalid" to isInvalid.
+ * - Remove validationState="valid" (it is no longer supported in Spectrum 2).
+ */
+function transformComboBox(path) {
+    // Change menuWidth value from a DimensionValue to a pixel value
+    (0, transforms_1.convertDimensionValueToPx)(path, { propName: 'menuWidth' });
+    // Remove isQuiet
+    (0, transforms_1.removeProp)(path, { propName: 'isQuiet' });
+    // Remove placeholder
+    (0, transforms_1.removeProp)(path, { propName: 'placeholder' });
+    // Change validationState="invalid" to isInvalid
+    (0, transforms_1.updatePropNameAndValue)(path, {
+        oldPropName: 'validationState',
+        oldPropValue: 'invalid',
+        newPropName: 'isInvalid',
+        newPropValue: true
+    });
+    // Remove validationState="valid"
+    (0, transforms_1.removeProp)(path, { propName: 'validationState', propValue: 'valid' });
+}

package/dist/s1-to-s2/src/codemods/components/ContextualHelp/transform.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformContextualHelp;
+const transforms_1 = require("../../shared/transforms");
+/**
+ * Transforms ContextualHelp:
+ * - Comment out variant="info" (informative variant is the only one supported).
+ * - Update placement prop to have only one value (e.g., "bottom left" becomes "bottom").
+ */
+function transformContextualHelp(path) {
+    // Comment out variant="info"
+    (0, transforms_1.commentOutProp)(path, { propName: 'variant', propValue: 'info' });
+    // Update placement prop to have only one value
+    (0, transforms_1.updatePlacementToSingleValue)(path, { propToUpdateName: 'placement' });
+}

package/dist/s1-to-s2/src/codemods/components/DialogContainer/transform.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformDialogContainer;
+const transform_1 = require("../DialogTrigger/transform");
+const transforms_1 = require("../../shared/transforms");
+/**
+ * Transforms DialogContainer:
+ * - Remove type (dependent on the dialog level child used, e.g., Dialog, FullscreenDialog, Popover).
+ * - Move isDismissable (as isDismissible) to the dialog level component.
+ * - Move isKeyboardDismissDisabled to the dialog level component.
+ */
+function transformDialogContainer(path) {
+    // Move isDismissable (as isDismissible) to the dialog level component
+    (0, transforms_1.updatePropName)(path, { oldPropName: 'isDismissable', newPropName: 'isDismissible' });
+    (0, transform_1.updateDialogChild)(path);
+}