@react-spectrum/codemods 0.5.1 → 0.6.0

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

@@ -0,0 +1,189 @@
+"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 = transformTable;
+const utils_1 = require("../../shared/utils");
+const transforms_1 = require("../../shared/transforms");
+const t = __importStar(require("@babel/types"));
+/**
+ * Copies the columns prop from the TableHeader to the Row component.
+ */
+function addColumnsPropToRow(path) {
+    const tableHeaderPath = path.get('children').find((child) => t.isJSXElement(child.node) &&
+        t.isJSXIdentifier(child.node.openingElement.name) &&
+        (0, utils_1.getName)(child, child.node.openingElement.name) === 'TableHeader');
+    if (!tableHeaderPath) {
+        (0, utils_1.addComment)(path.node, ' TODO(S2-upgrade): Could not find TableHeader within Table to retrieve columns prop.');
+        return;
+    }
+    const columnsProp = tableHeaderPath
+        .get('openingElement')
+        .get('attributes')
+        .find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === 'columns');
+    if (columnsProp) {
+        path.traverse({
+            JSXElement(innerPath) {
+                if (t.isJSXElement(innerPath.node) &&
+                    t.isJSXIdentifier(innerPath.node.openingElement.name) &&
+                    (0, utils_1.getName)(innerPath, innerPath.node.openingElement.name) === 'Row') {
+                    let rowPath = innerPath;
+                    rowPath.node.openingElement.attributes.push(columnsProp.node);
+                    // If Row doesn't contain id prop, leave a comment for the user to check manually
+                    let idProp = rowPath.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === 'id');
+                    if (!idProp) {
+                        (0, utils_1.addComment)(rowPath.node, ' TODO(S2-upgrade): If the items do not have id properties, you\'ll need to add an id prop to the Row.');
+                    }
+                }
+            }
+        });
+    }
+}
+function commentIfNestedColumns(path) {
+    const headerPath = path.get('children').find((child) => t.isJSXElement(child.node) &&
+        t.isJSXIdentifier(child.node.openingElement.name) &&
+        (0, utils_1.getName)(child, child.node.openingElement.name) === 'TableHeader');
+    const columns = headerPath?.get('children') || [];
+    let hasNestedColumns = false;
+    columns.forEach(column => {
+        let columnChildren = column.get('children');
+        if (columnChildren.find(child => t.isJSXElement(child.node) &&
+            t.isJSXIdentifier(child.node.openingElement.name) &&
+            (0, utils_1.getName)(child, child.node.openingElement.name) === 'Column')) {
+            hasNestedColumns = true;
+        }
+    });
+    if (hasNestedColumns) {
+        (0, utils_1.addComment)(path.node, ' TODO(S2-upgrade): Nested Column components are not supported yet.');
+    }
+}
+/**
+ * Adds isRowHeader to the first Column in a table if there isn't already a row header.
+ * @param path
+ */
+function addRowHeader(path) {
+    let tableHeaderPath = path.get('children').find((child) => t.isJSXElement(child.node) &&
+        t.isJSXIdentifier(child.node.openingElement.name) &&
+        (0, utils_1.getName)(child, child.node.openingElement.name) === 'TableHeader');
+    // Check if isRowHeader is already set on a Column
+    let hasRowHeader = false;
+    tableHeaderPath?.get('children').forEach((child) => {
+        if (t.isJSXElement(child.node) &&
+            t.isJSXIdentifier(child.node.openingElement.name) &&
+            (0, utils_1.getName)(child, child.node.openingElement.name) === 'Column') {
+            let isRowHeaderProp = child.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === 'isRowHeader');
+            if (isRowHeaderProp) {
+                hasRowHeader = true;
+            }
+        }
+    });
+    // If there isn't already a row header, add one to the first Column if possible
+    if (!hasRowHeader) {
+        tableHeaderPath?.get('children').forEach((child) => {
+            // Add to first Column if static
+            if (!hasRowHeader &&
+                t.isJSXElement(child.node) &&
+                t.isJSXIdentifier(child.node.openingElement.name) &&
+                (0, utils_1.getName)(child, child.node.openingElement.name) === 'Column') {
+                child.node.openingElement.attributes.push(t.jsxAttribute(t.jsxIdentifier('isRowHeader'), t.jsxExpressionContainer(t.booleanLiteral(true))));
+                hasRowHeader = true;
+            }
+            // If render function is used, leave a comment to update manually
+            if (t.isJSXExpressionContainer(child.node) &&
+                t.isArrowFunctionExpression(child.node.expression)) {
+                (0, utils_1.addComment)(child.node, ' TODO(S2-upgrade): You\'ll need to add isRowHeader to one of the columns manually.');
+            }
+            // If array.map is used, leave a comment to update manually
+            if (t.isJSXExpressionContainer(child.node) &&
+                t.isCallExpression(child.node.expression) &&
+                t.isMemberExpression(child.node.expression.callee) &&
+                t.isIdentifier(child.node.expression.callee.property) &&
+                child.node.expression.callee.property.name === 'map') {
+                (0, utils_1.addComment)(child.node, ' TODO(S2-upgrade): You\'ll need to add isRowHeader to one of the columns manually.');
+            }
+        });
+    }
+}
+/**
+ * Moves loadingState and onLoadMore from TableBody to TableView.
+ * @param path
+ */
+function movePropsFromTableBodyToTableView(path) {
+    const tableBodyPath = path.get('children').find((child) => t.isJSXElement(child.node) &&
+        t.isJSXIdentifier(child.node.openingElement.name) &&
+        (0, utils_1.getName)(child, child.node.openingElement.name) === 'TableBody');
+    if (!tableBodyPath) {
+        return;
+    }
+    const propsToMove = ['loadingState', 'onLoadMore'];
+    const newAttributes = [];
+    tableBodyPath.node.openingElement.attributes = tableBodyPath.node.openingElement.attributes.filter(attribute => {
+        if (t.isJSXAttribute(attribute) && propsToMove.includes(attribute.name.name)) {
+            newAttributes.push(attribute);
+            return false; // Remove from TableBody
+        }
+        return true; // Keep in TableBody
+    });
+    if (newAttributes.length > 0) {
+        path.node.openingElement.attributes.push(...newAttributes);
+    }
+}
+/**
+ * Transforms TableView:
+ * - For Column and Row: Update key to be id (and keep key if rendered inside array.map).
+ * - For dynamic tables, pass a columns prop into Row.
+ * - For Row: Update dynamic render function to pass in column instead of columnKey.
+ * - Comment out UNSTABLE_allowsExpandableRows (it has not been implemented yet).
+ * - Comment out UNSTABLE_onExpandedChange (it has not been implemented yet).
+ * - Comment out UNSTABLE_expandedKeys (it has not been implemented yet).
+ * - Comment out UNSTABLE_defaultExpandedKeys (it has not been implemented yet).
+ */
+function transformTable(path) {
+    // Add columns prop to Row for dynamic tables
+    addColumnsPropToRow(path);
+    // Comment out nested columns
+    commentIfNestedColumns(path);
+    // Comment out dragAndDropHooks
+    (0, transforms_1.commentOutProp)(path, { propName: 'dragAndDropHooks' });
+    // Comment out selectionStyle="highlight"
+    (0, transforms_1.commentOutProp)(path, { propName: 'selectionStyle' });
+    // Comment out unstable expandable rows props
+    (0, transforms_1.commentOutProp)(path, { propName: 'UNSTABLE_allowsExpandableRows' });
+    (0, transforms_1.commentOutProp)(path, { propName: 'UNSTABLE_onExpandedChange' });
+    (0, transforms_1.commentOutProp)(path, { propName: 'UNSTABLE_expandedKeys' });
+    (0, transforms_1.commentOutProp)(path, { propName: 'UNSTABLE_defaultExpandedKeys' });
+    addRowHeader(path);
+    // Move loadingState and onLoadMore from TableBody to TableView
+    movePropsFromTableBodyToTableView(path);
+}

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

@@ -0,0 +1,116 @@
+"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 = transformTabs;
+const utils_1 = require("../../shared/utils");
+const transforms_1 = require("../../shared/transforms");
+const t = __importStar(require("@babel/types"));
+function transformTabList(tabListPath) {
+    tabListPath.get('children').forEach(itemPath => {
+        if (t.isJSXElement(itemPath.node) &&
+            t.isJSXIdentifier(itemPath.node.openingElement.name) &&
+            (0, utils_1.getName)(itemPath, itemPath.node.openingElement.name) === 'Item') {
+            (0, transforms_1.updateComponentWithinCollection)(itemPath, { parentComponentName: 'TabList', newComponentName: 'Tab' });
+        }
+    });
+    return tabListPath.node;
+}
+function transformTabPanels(tabPanelsPath, itemsProp) {
+    // Dynamic case
+    let dynamicRender = tabPanelsPath.get('children').find(path => t.isJSXExpressionContainer(path.node));
+    if (dynamicRender) {
+        (0, transforms_1.updateToNewComponentName)(tabPanelsPath, { newComponentName: 'Collection' });
+        let itemPath = dynamicRender.get('expression').get('body');
+        (0, transforms_1.updateComponentWithinCollection)(itemPath, { parentComponentName: 'Collection', newComponentName: 'TabPanel' });
+        if (itemsProp) {
+            tabPanelsPath.node.openingElement.attributes.push(t.jsxAttribute(t.jsxIdentifier('items'), itemsProp.value));
+        }
+        return [tabPanelsPath.node];
+    }
+    // Static case
+    return tabPanelsPath.get('children').map(itemPath => {
+        if (t.isJSXElement(itemPath.node) &&
+            t.isJSXIdentifier(itemPath.node.openingElement.name) &&
+            (0, utils_1.getName)(itemPath, itemPath.node.openingElement.name) === 'Item') {
+            (0, transforms_1.updateComponentWithinCollection)(itemPath, { parentComponentName: 'TabPanels', newComponentName: 'TabPanel' });
+            return itemPath.node;
+        }
+        return null;
+    }).filter(Boolean);
+}
+/**
+ * Transforms Tabs props and structure:
+ * - Inside TabList: Update Item to be Tab.
+ * - Update items on Tabs to be on TabList.
+ * - Inside TabPanels: Update Item to be a TabPanel and remove the surrounding TabPanels.
+ * - Remove isEmphasized (it is no longer supported in Spectrum 2).
+ * - Remove isQuiet (it is no longer supported in Spectrum 2).
+ */
+function transformTabs(path) {
+    let program = path.findParent((p) => t.isProgram(p.node));
+    (0, utils_1.removeComponentImport)(program, 'TabPanels');
+    let tabListNode = null;
+    let tabPanelsNodes = [];
+    let itemsProp = null;
+    path.node.openingElement.attributes = path.node.openingElement.attributes.filter(attr => {
+        if (t.isJSXAttribute(attr) && attr.name.name === 'items') {
+            itemsProp = attr;
+            return false;
+        }
+        return true;
+    });
+    path.get('children').forEach(childPath => {
+        if (t.isJSXElement(childPath.node)) {
+            if (t.isJSXIdentifier(childPath.node.openingElement.name) &&
+                (0, utils_1.getName)(childPath, childPath.node.openingElement.name) === 'TabList') {
+                tabListNode = transformTabList(childPath);
+                if (itemsProp) {
+                    tabListNode.openingElement.attributes.push(itemsProp);
+                }
+            }
+            else if (t.isJSXIdentifier(childPath.node.openingElement.name) &&
+                (0, utils_1.getName)(childPath, childPath.node.openingElement.name) === 'TabPanels') {
+                tabPanelsNodes = transformTabPanels(childPath, itemsProp);
+            }
+        }
+    });
+    if (tabListNode) {
+        path.node.children = [tabListNode, ...tabPanelsNodes];
+    }
+    // Remove isEmphasized
+    (0, transforms_1.removeProp)(path, { propName: 'isEmphasized' });
+    // Remove isQuiet
+    (0, transforms_1.removeProp)(path, { propName: 'isQuiet' });
+}

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformTagGroup;
+const transforms_1 = require("../../shared/transforms");
+/**
+ * Transforms TagGroup:
+ * - Rename actionLabel to groupActionLabel.
+ * - Rename onAction to onGroupAction.
+ * - Change validationState="invalid" to isInvalid.
+ * - Update Item to be Tag.
+ * - Remove validationState="valid" (it is no longer supported in Spectrum 2).
+ */
+function transformTagGroup(path) {
+    // Rename actionLabel to groupActionLabel
+    (0, transforms_1.updatePropName)(path, { oldPropName: 'actionLabel', newPropName: 'groupActionLabel' });
+    // Rename onAction to onGroupAction
+    (0, transforms_1.updatePropName)(path, { oldPropName: 'onAction', newPropName: 'onGroupAction' });
+    // 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/TextArea/transform.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformTextArea;
+const transforms_1 = require("../../shared/transforms");
+/**
+ * Transforms TextArea:
+ * - Comment out icon (it has not been implemented yet).
+ * - 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 transformTextArea(path) {
+    // Comment out icon
+    (0, transforms_1.commentOutProp)(path, { propName: 'icon' });
+    // 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/TextField/transform.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformTextField;
+const transforms_1 = require("../../shared/transforms");
+/**
+ * Transforms TextField:
+ * - Comment out icon (it has not been implemented yet).
+ * - 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 transformTextField(path) {
+    // Comment out icon
+    (0, transforms_1.commentOutProp)(path, { propName: 'icon' });
+    // 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/Tooltip/transform.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformTooltip;
+const transforms_1 = require("../../shared/transforms");
+/**
+ * Transforms Tooltip:
+ * - Remove variant (it is no longer supported in Spectrum 2).
+ * - Move placement prop to the parent TooltipTrigger.
+ * - Remove showIcon (it is no longer supported in Spectrum 2).
+ * - Move isOpen prop to the parent TooltipTrigger.
+ */
+function transformTooltip(path) {
+    // Remove variant
+    (0, transforms_1.removeProp)(path, { propName: 'variant' });
+    // Move placement prop to the parent TooltipTrigger
+    (0, transforms_1.movePropToParentComponent)(path, {
+        parentComponentName: 'TooltipTrigger',
+        childComponentName: 'Tooltip',
+        propName: 'placement'
+    });
+    // Remove showIcon
+    (0, transforms_1.removeProp)(path, { propName: 'showIcon' });
+    // Move isOpen prop to the parent TooltipTrigger
+    (0, transforms_1.movePropToParentComponent)(path, {
+        parentComponentName: 'TooltipTrigger',
+        childComponentName: 'Tooltip',
+        propName: 'isOpen'
+    });
+}

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformTooltipTrigger;
+const transforms_1 = require("../../shared/transforms");
+/**
+ * Transforms TooltipTrigger:
+ * - Updates placement prop to single value.
+ */
+function transformTooltipTrigger(path) {
+    // Update placement prop to single value
+    (0, transforms_1.updatePlacementToSingleValue)(path, {
+        propToUpdateName: 'placement',
+        childComponentName: 'Tooltip'
+    });
+}

package/dist/s1-to-s2/src/codemods/{styleProps.js → shared/styleProps.js}

@@ -15,21 +15,34 @@ 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.borderRadius = exports.borderWidths = void 0;
-exports.transformStyleProps = transformStyleProps;
+exports.default = transformStyleProps;
 const utils_1 = require("./utils");
 const colors_1 = require("./colors");
 const dimensions_1 = require("./dimensions");
 const t = __importStar(require("@babel/types"));
-const unsafeStyle_1 = require("./unsafeStyle");
+const unsafeStyle_1 = __importDefault(require("./unsafeStyle"));
 exports.borderWidths = {
     none: 0,
     thin: 1,
@@ -509,7 +522,7 @@ function handleProp(path, element, colorVersion) {
     switch (prop) {
         case 'UNSAFE_style':
             if (propValue.type === 'ObjectExpression') {
-                let value = (0, unsafeStyle_1.transformUnsafeStyle)(propValue, element);
+                let value = (0, unsafeStyle_1.default)(propValue, element);
                 if (value) {
                     path.remove();
                     return value;