@react-spectrum/codemods 0.1.1 → 0.1.2-nightly.5030

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

@@ -42,6 +42,23 @@ exports.changes = {
             }
         ]
     },
+    Badge: {
+        changes: [
+            {
+                description: "Change variant='info' to variant='informative'",
+                reason: 'Updated naming convention',
+                function: {
+                    name: 'updatePropNameAndValue',
+                    args: {
+                        oldProp: 'variant',
+                        oldValue: 'info',
+                        newProp: 'variant',
+                        newValue: 'informative'
+                    }
+                }
+            }
+        ]
+    },
     Breadcrumbs: {
         changes: [
             {
@@ -332,18 +349,6 @@ exports.changes = {
             }
         ]
     },
-    Flex: {
-        changes: [
-            {
-                description: 'Update Flex to be a div and apply flex styles using the style macro',
-                reason: 'Updated API',
-                function: {
-                    name: 'updateToNewComponent',
-                    args: { newComponent: 'div' }
-                }
-            }
-        ]
-    },
     Form: {
         changes: [
             {
@@ -366,18 +371,6 @@ exports.changes = {
             }
         ]
     },
-    Grid: {
-        changes: [
-            {
-                description: 'Update Grid to be a div and apply grid styles using the style macro',
-                reason: 'Updated API',
-                function: {
-                    name: 'updateToNewComponent',
-                    args: { newComponent: 'div' }
-                }
-            }
-        ]
-    },
     InlineAlert: {
         changes: [
             {
@@ -499,6 +492,14 @@ exports.changes = {
                         newValue: 'white'
                     }
                 }
+            },
+            {
+                description: 'Remove inner anchor element if used (legacy API)',
+                reason: 'Updated API',
+                function: {
+                    name: 'updateLegacyLink',
+                    args: {}
+                }
             }
         ]
     },
@@ -1090,17 +1091,5 @@ exports.changes = {
                 }
             }
         ]
-    },
-    View: {
-        changes: [
-            {
-                description: 'Update View to be a div and apply styles using the style macro',
-                reason: 'Updated API',
-                function: {
-                    name: 'updateToNewComponent',
-                    args: { newComponent: 'div' }
-                }
-            }
-        ]
     }
 };

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

@@ -41,6 +41,7 @@ let availableComponents = (0, getComponents_1.getComponents)();
 availableComponents.add('View');
 availableComponents.add('Flex');
 availableComponents.add('Grid');
+availableComponents.add('Well');
 // Replaced by collection component-specific items
 availableComponents.add('Item');
 availableComponents.add('Section');
@@ -196,9 +197,11 @@ function transformer(file, api, options) {
             if (t.isImportSpecifier(b.path.node) &&
                 t.isIdentifier(b.path.node.imported) &&
                 (b.path.node.imported.name === 'Item' || b.path.node.imported.name === 'Section')) {
-                // Keep Item and Section imports
-                // TODO: remove if they are unused
-                return;
+                // Keep Item and Section imports if they are still used
+                bindings[0]?.path.scope.crawl();
+                if (bindings[0]?.path.scope.bindings[b.path.node.local.name]?.referencePaths.length > 0) {
+                    return;
+                }
             }
             b.path.remove();
             // If the import statement is now empty, remove it entirely.

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

@@ -484,7 +484,7 @@ function handleProp(path, element, colorVersion) {
             (0, utils_1.addComment)(path.node, ' TODO(S2-upgrade): check this UNSAFE_style');
             break;
         case 'UNSAFE_className':
-            if (element === 'Flex' || element === 'Grid' || element === 'View') {
+            if (element === 'Flex' || element === 'Grid' || element === 'View' || element === 'Well') {
                 path.get('name').replaceWith(t.jsxIdentifier('className'));
             }
             else {
@@ -508,13 +508,26 @@ function transformStyleProps(path, element) {
     let macroValues = new Map;
     let dynamicValues = new Map;
     let conditions = new Map;
-    let isDOMElement = element === 'Flex' || element === 'Grid' || element === 'View';
+    let isDOMElement = element === 'Flex' || element === 'Grid' || element === 'View' || element === 'Well';
     if (element === 'Flex') {
         macroValues.set('display', 'flex');
     }
     else if (element === 'Grid') {
         macroValues.set('display', 'grid');
     }
+    else if (element === 'Well') {
+        macroValues.set('display', 'block');
+        macroValues.set('textAlign', 'start');
+        macroValues.set('minWidth', 160);
+        macroValues.set('padding', 16);
+        macroValues.set('marginTop', 4);
+        macroValues.set('borderWidth', 1);
+        macroValues.set('borderRadius', 'sm');
+        macroValues.set('backgroundColor', 'layer-1');
+        macroValues.set('borderStyle', 'solid');
+        macroValues.set('borderColor', 'transparent-black-75');
+        macroValues.set('font', 'body-sm');
+    }
     let attrs = path.get('openingElement').get('attributes');
     // Find the color version in use.
     let colorVersion = 5;

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

@@ -663,6 +663,28 @@ function updateAvatarSize(path) {
         }
     }
 }
+/**
+ * Handles the legacy `Link` API where an `a` tag or custom router component could be used within a `Link` component.
+ * Removes the inner component and moves its attributes to the `Link` component.
+ */
+function updateLegacyLink(path) {
+    let missingOuterHref = t.isJSXElement(path.node) && !path.node.openingElement.attributes.some((attr) => t.isJSXAttribute(attr) && attr.name.name === 'href');
+    if (missingOuterHref) {
+        let innerLink = path.node.children.find((child) => t.isJSXElement(child) && t.isJSXIdentifier(child.openingElement.name));
+        if (innerLink && t.isJSXElement(innerLink)) {
+            let innerAttributes = innerLink.openingElement.attributes;
+            let outerAttributes = path.node.openingElement.attributes;
+            innerAttributes.forEach((attr) => {
+                outerAttributes.push(attr);
+            });
+            if (t.isJSXIdentifier(innerLink.openingElement.name) &&
+                innerLink.openingElement.name.name !== 'a') {
+                (0, utils_1.addComment)(path.node, ' TODO(S2-upgrade): You may have been using a custom link component here. You\'ll need to update this manually.');
+            }
+            path.node.children = innerLink.children;
+        }
+    }
+}
 exports.functionMap = {
     updatePropNameAndValue,
     updatePropValueAndAddNewProp,
@@ -681,5 +703,6 @@ exports.functionMap = {
     convertDimensionValueToPx,
     updatePlacementToSingleValue,
     removeComponentIfWithinParent,
-    updateAvatarSize
+    updateAvatarSize,
+    updateLegacyLink
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/codemods",
-  "version": "0.1.1",
+  "version": "0.1.2-nightly.5030+32574f874",
   "main": "dist/index.js",
   "source": "src/index.ts",
   "bin": "dist/index.js",
@@ -24,8 +24,8 @@
     "@babel/parser": "^7.24.5",
     "@babel/traverse": "^7.24.5",
     "@babel/types": "^7.24.5",
-    "@react-spectrum/s2": "^0.3.1",
-    "@react-types/shared": "^3.24.0",
+    "@react-spectrum/s2": "0.3.2-nightly.5030+32574f874",
+    "@react-types/shared": "3.0.0-nightly.3102+32574f874",
     "@types/node": "^20",
     "boxen": "^5.1.2",
     "build": "^0.1.4",
@@ -47,5 +47,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "87fc14abdcdd6dfe517354a73806ad8fdabc6f61"
+  "gitHead": "32574f874fd8a8b667a409938457819ac33f8e84"
 }