@sanity/ui-codemod 1.0.0-alpha.5 → 1.0.0-alpha.6

package/src/transforms/latest/box/box.test.ts

@@ -255,8 +255,7 @@ defineCrossFileTest(
     }
   `,
   (output) => {
-    expect(output).toContain('alignItems: "center"')
-    expect(output).not.toContain('<RootBox alignItems="center" />')
+    expect(output.replace(/\s+/g, ' ')).toContain('<RootBox style={{ alignItems: "center" }} />')
   },
   'transforms attributes on imported styled Box wrappers',
 )
@@ -279,7 +278,6 @@ defineCrossFileTest(
   (output) => {
     expect(output).toContain('UI-CODEMOD TODO: Please double check styled(Box) migration below')
     expect(output).toContain('<RootBox display="flex" alignItems="center" />')
-    expect(output).not.toContain('const RootBox = styled(Box)')
   },
   'adds todo warning when imported styled Box wrapper should be replaced',
 )
@@ -306,10 +304,8 @@ defineCrossFileTest(
     }
   `,
   (output) => {
-    expect(output).toContain('alignItems: "center"')
-    expect(output).not.toContain('<RootBox alignItems="center" />')
+    expect(output.replace(/\s+/g, ' ')).toContain('<RootBox style={{ alignItems: "center" }} />')
     expect(output).toContain('<Box display="flex" />')
-    expect(output).not.toContain('<Flex')
   },
   'does not rewrite unrelated Box from another package',
 )
@@ -330,8 +326,7 @@ defineCrossFileTest(
     }
   `,
   (output) => {
-    expect(output).toContain('alignItems: "center"')
-    expect(output).not.toContain('<RootBox alignItems="center" />')
+    expect(output.replace(/\s+/g, ' ')).toContain('<RootBox style={{ alignItems: "center" }} />')
   },
   'transforms styled Box wrappers imported through barrel re-exports',
   {

package/src/transforms/latest/card/card.test.ts

@@ -1,4 +1,6 @@
-import {defineInlineTest} from '../../../utils/testUtils'
+import {expect} from 'vitest'
+
+import {defineCrossFileTest, defineInlineTest} from '../../../utils/testUtils'
 import transform from './card'
 
 defineInlineTest(
@@ -205,3 +207,100 @@ defineInlineTest(
   `,
   'warns if Card includes muted prop',
 )
+
+defineCrossFileTest(
+  transform,
+  {},
+  `
+    import {Card} from '@sanity/ui'
+
+    export const RootCard = styled(Card)(({theme}) => ({}))
+  `,
+  `
+    import {RootCard} from './Component.styled'
+
+    export function Component() {
+      return <RootCard padding={4} radius={3} border />
+    }
+  `,
+  (output) => {
+    expect(output).toContain('<RootCard density="regular" />')
+  },
+  'transforms attributes on imported styled Card wrappers',
+)
+
+defineCrossFileTest(
+  transform,
+  {},
+  `
+    import {Card} from '@sanity/ui'
+
+    export const RootCard = styled(Card)(({theme}) => ({}))
+  `,
+  `
+    import {RootCard} from './Component.styled'
+
+    export function Component() {
+      return <RootCard padding={1} />
+    }
+  `,
+  (output) => {
+    expect(output).toContain('UI-CODEMOD TODO: Please double check styled(Card) migration below')
+    expect(output).toContain('<RootCard padding={1} />')
+  },
+  'adds todo warning when imported styled Card wrapper should be replaced',
+)
+
+defineCrossFileTest(
+  transform,
+  {},
+  `
+    import {Card} from '@sanity/ui'
+
+    export const RootCard = styled(Card)(({theme}) => ({}))
+  `,
+  `
+    import {Card} from 'another-package'
+    import {RootCard} from './Component.styled'
+
+    export function Component() {
+      return (
+        <>
+          <RootCard padding={4} radius={3} border />
+          <Card padding={4} radius={3} border />
+        </>
+      )
+    }
+  `,
+  (output) => {
+    expect(output).toContain('<RootCard density="regular" />')
+    expect(output).toContain('<Card padding={4} radius={3} border />')
+  },
+  'does not rewrite unrelated Card from another package',
+)
+
+defineCrossFileTest(
+  transform,
+  {},
+  `
+    import {Card} from '@sanity/ui'
+
+    export const RootCard = styled(Card)(({theme}) => ({}))
+  `,
+  `
+    import {RootCard} from './index'
+
+    export function Component() {
+      return <RootCard padding={4} radius={3} border />
+    }
+  `,
+  (output) => {
+    expect(output).toContain('<RootCard density="regular" />')
+  },
+  'transforms styled Card wrappers imported through barrel re-exports',
+  {
+    extraFiles: {
+      'index.ts': `export {RootCard} from './Component.styled'`,
+    },
+  },
+)

package/src/transforms/latest/card/card.ts

@@ -1,19 +1,22 @@
-import {type API, type FileInfo} from 'jscodeshift'
+import {type API, type FileInfo, type JSXAttribute, type JSXSpreadAttribute} from 'jscodeshift'
 
 import type {BaseOptions} from '../../../types/BaseOptions'
 import {getAttribute} from '../../../utils/getAttribute'
 import {getComponentLocalNames} from '../../../utils/getComponentLocalNames'
 import {getStaticAttributeExpression} from '../../../utils/getStaticAttributeExpression'
+import {getStyledComponentAliases} from '../../../utils/getStyledComponentAliases'
 import {replaceElement} from '../../../utils/replaceElement'
 import {shouldTransformComponent} from '../../../utils/shouldTransformComponent'
 import {transformAttributes} from '../../../utils/transformAttributes'
 import {transformComponent} from '../../../utils/transformComponent'
 import {transformImport} from '../../../utils/transformImport'
+import {transformStyledComponents} from '../../../utils/transformStyledComponents'
 import {BOX_MODS} from '../box/box.mods'
 import {CARD_MODS} from './card.mods'
 
 const CARD_TODO_WARNING = 'Please double check the Card migration below'
 const BOX_TODO_WARNING = 'Please double check the Box migration below'
+const STYLED_TODO_WARNING = 'Please double check styled(Card) migration below'
 
 /** @internal */
 export default function transform(
@@ -25,8 +28,16 @@ export default function transform(
 
   return transformComponent(fileInfo, api, ({j, root, markChanged}) => {
     const localNames = getComponentLocalNames(j, root, 'Card', options)
+    const styledAliases = getStyledComponentAliases(
+      j,
+      root,
+      'Card',
+      fileInfo.path,
+      localNames,
+      options,
+    )
 
-    if (!shouldTransformComponent(j, root, 'Card', localNames, options)) {
+    if (!shouldTransformComponent(j, root, 'Card', localNames, options, styledAliases)) {
       return
     }
 
@@ -34,29 +45,32 @@ export default function transform(
       markChanged()
     }
 
+    const replaceWithBox = (attrs: (JSXAttribute | JSXSpreadAttribute)[]) => {
+      const density = getAttribute(attrs, 'density')
+      const muted = getAttribute(attrs, 'muted')
+      const scheme = getAttribute(attrs, 'scheme')
+      const border = getAttribute(attrs, 'border')
+      const padding = getStaticAttributeExpression(j, attrs, 'padding')
+      const radius = getStaticAttributeExpression(j, attrs, 'radius')
+
+      return !(
+        density ||
+        muted ||
+        scheme ||
+        (border && padding === 3 && radius == 2) ||
+        (border && padding === 4 && radius == 3) ||
+        (border && padding === 5 && radius == 4)
+      )
+    }
+
     if (
       replaceElement(
         j,
         root,
-        (attrs) => {
-          const density = getAttribute(attrs, 'density')
-          const muted = getAttribute(attrs, 'muted')
-          const scheme = getAttribute(attrs, 'scheme')
-          const border = getAttribute(attrs, 'border')
-          const padding = getStaticAttributeExpression(j, attrs, 'padding')
-          const radius = getStaticAttributeExpression(j, attrs, 'radius')
-
-          return !(
-            density ||
-            muted ||
-            scheme ||
-            (border && padding === 3 && radius == 2) ||
-            (border && padding === 4 && radius == 3) ||
-            (border && padding === 5 && radius == 4)
-          )
-        },
+        (attrs) => replaceWithBox(attrs),
         {
           element: 'Card',
+          localNames,
           callback: (path) => transformAttributes(j, path, CARD_MODS, CARD_TODO_WARNING),
         },
         {
@@ -67,5 +81,14 @@ export default function transform(
     ) {
       markChanged()
     }
+
+    if (
+      transformStyledComponents(j, root, styledAliases, (attrs) => !replaceWithBox(attrs), {
+        warning: STYLED_TODO_WARNING,
+        callback: (path) => transformAttributes(j, path, CARD_MODS, CARD_TODO_WARNING),
+      })
+    ) {
+      markChanged()
+    }
   })
 }

package/src/transforms/latest/code/code.test.ts

@@ -1,4 +1,6 @@
-import {defineInlineTest} from '../../../utils/testUtils'
+import {expect} from 'vitest'
+
+import {defineCrossFileTest, defineInlineTest} from '../../../utils/testUtils'
 import transform from './code'
 
 defineInlineTest(
@@ -59,3 +61,84 @@ defineInlineTest(
   `,
   'moves width props to style and uppdates mapped values',
 )
+
+defineCrossFileTest(
+  transform,
+  {},
+  `
+    import {Code} from '@sanity/ui'
+
+    export const RootCode = styled(Code)(({theme}) => ({}))
+  `,
+  `
+    import {RootCode} from './Component.styled'
+
+    export function RootCode() {
+      return <RootCode flex="auto" />
+    }
+  `,
+  (output) => {
+    expect(output.replace(/\s+/g, ' ')).toContain(
+      '<RootCode style={{ flex: "1 1 auto" }} trim={true} />',
+    )
+  },
+  'transforms attributes on imported styled Code wrappers',
+)
+
+defineCrossFileTest(
+  transform,
+  {},
+  `
+    import {Code} from '@sanity/ui'
+
+    export const RootCode = styled(Code)(({theme}) => ({}))
+  `,
+  `
+    import {Code} from 'another-package'
+    import {RootCode} from './Component.styled'
+
+    export function Component() {
+      return (
+        <>
+          <RootCode flex="auto" />
+          <Code flex="auto" />
+        </>
+      )
+    }
+  `,
+  (output) => {
+    expect(output.replace(/\s+/g, ' ')).toContain(
+      '<RootCode style={{ flex: "1 1 auto" }} trim={true} />',
+    )
+    expect(output).toContain('<Code flex="auto" />')
+  },
+  'does not transform attributes on unrelated Code from another package',
+)
+
+defineCrossFileTest(
+  transform,
+  {},
+  `
+    import {Code} from '@sanity/ui'
+
+    export const RootCode = styled(Code)(({theme}) => ({}))
+  `,
+  `
+    import {RootCode} from './index'
+
+    export function Component() {
+      return <RootCode flex="auto" />
+    }
+  `,
+  (output) => {
+    expect(output.replace(/\s+/g, ' ')).toContain(
+      '<RootCode style={{ flex: "1 1 auto" }} trim={true} />',
+    )
+  },
+  'transforms styled Code wrappers imported through barrel re-exports',
+  {
+    extraFiles: {
+      'index.ts': `export {RootCode} from './Component.styled'`,
+    },
+  },
+)

package/src/transforms/latest/code/code.ts

@@ -3,10 +3,12 @@ import {type API, type FileInfo} from 'jscodeshift'
 import type {BaseOptions} from '../../../types/BaseOptions'
 import {addAttribute} from '../../../utils/addAttribute'
 import {getComponentLocalNames} from '../../../utils/getComponentLocalNames'
+import {getStyledComponentAliases} from '../../../utils/getStyledComponentAliases'
 import {shouldTransformComponent} from '../../../utils/shouldTransformComponent'
 import {transformAttributes} from '../../../utils/transformAttributes'
 import {transformComponent} from '../../../utils/transformComponent'
 import {transformImport} from '../../../utils/transformImport'
+import {transformStyledComponents} from '../../../utils/transformStyledComponents'
 import {CODE_MODS} from './code.mods'
 
 const TODO_WARNING = 'Please double check the Code migration below'
@@ -21,8 +23,16 @@ export default function transform(
 
   return transformComponent(fileInfo, api, ({j, root, markChanged}) => {
     const localNames = getComponentLocalNames(j, root, 'Code', options)
+    const styledAliases = getStyledComponentAliases(
+      j,
+      root,
+      'Code',
+      fileInfo.path,
+      localNames,
+      options,
+    )
 
-    if (!shouldTransformComponent(j, root, 'Code', localNames, options)) {
+    if (!shouldTransformComponent(j, root, 'Code', localNames, options, styledAliases)) {
       return
     }
 
@@ -30,24 +40,45 @@ export default function transform(
       markChanged()
     }
 
-    root
-      .find(j.JSXOpeningElement, {
-        name: {type: 'JSXIdentifier', name: 'Code'},
-      })
-      .forEach((path) => {
-        let changed = false
+    root.find(j.JSXOpeningElement).forEach((path) => {
+      let changed = false
+      const name = path.node.name
+
+      if (name.type !== 'JSXIdentifier' || !localNames.has(name.name)) {
+        return
+      }
+
+      if (transformAttributes(j, path, CODE_MODS, TODO_WARNING)) {
+        changed = true
+      }
+
+      if (addAttribute(j, path.node, 'trim', true)) {
+        changed = true
+      }
 
-        if (transformAttributes(j, path, CODE_MODS, TODO_WARNING)) {
-          changed = true
-        }
+      if (changed) {
+        markChanged()
+      }
+    })
 
-        if (addAttribute(j, path.node, 'trim', true)) {
-          changed = true
-        }
+    if (
+      transformStyledComponents(j, root, styledAliases, () => true, {
+        callback: (path) => {
+          let changed = false
 
-        if (changed) {
-          markChanged()
-        }
+          if (transformAttributes(j, path, CODE_MODS, TODO_WARNING)) {
+            changed = true
+          }
+
+          if (addAttribute(j, path.node, 'trim', true)) {
+            changed = true
+          }
+
+          return changed
+        },
       })
+    ) {
+      markChanged()
+    }
   })
 }

package/src/transforms/latest/container/container.test.ts

@@ -1,4 +1,6 @@
-import {defineInlineTest} from '../../../utils/testUtils'
+import {expect} from 'vitest'
+
+import {defineCrossFileTest, defineInlineTest} from '../../../utils/testUtils'
 import transform from './container'
 
 defineInlineTest(
@@ -103,3 +105,78 @@ defineInlineTest(
   `,
   'moves grid props to style and updates mapped values',
 )
+
+defineCrossFileTest(
+  transform,
+  {},
+  `
+    import {Container} from '@sanity/ui'
+
+    export const RootContainer = styled(Container)(({theme}) => ({}))
+  `,
+  `
+    import {RootContainer} from './Component.styled'
+
+    export function Component() {
+      return <RootContainer width={2} />
+    }
+  `,
+  (output) => {
+    expect(output).toContain('<RootContainer size={2} />')
+  },
+  'transforms attributes on imported styled Container wrappers',
+)
+
+defineCrossFileTest(
+  transform,
+  {},
+  `
+    import {Container} from '@sanity/ui'
+
+    export const RootContainer = styled(Container)(({theme}) => ({}))
+  `,
+  `
+    import {Container} from 'another-package'
+    import {RootContainer} from './Component.styled'
+
+    export function Component() {
+      return (
+        <>
+          <RootContainer width={2} />
+          <Container width={2} />
+        </>
+      )
+    }
+  `,
+  (output) => {
+    expect(output).toContain('<RootContainer size={2} />')
+    expect(output).toContain('<Container width={2} />')
+  },
+  'does not transform attributes on unrelated Container from another package',
+)
+
+defineCrossFileTest(
+  transform,
+  {},
+  `
+    import {Container} from '@sanity/ui'
+
+    export const RootContainer = styled(Container)(({theme}) => ({}))
+  `,
+  `
+    import {RootContainer} from './index'
+
+    export function Component() {
+      return <RootContainer width={2} />
+    }
+  `,
+  (output) => {
+    expect(output).toContain('<RootContainer size={2} />')
+  },
+  'transforms styled Container wrappers imported through barrel re-exports',
+  {
+    extraFiles: {
+      'index.ts': `export {RootContainer} from './Component.styled'`,
+    },
+  },
+)

package/src/transforms/latest/container/container.ts

@@ -2,10 +2,12 @@ import {type API, type FileInfo} from 'jscodeshift'
 
 import type {BaseOptions} from '../../../types/BaseOptions'
 import {getComponentLocalNames} from '../../../utils/getComponentLocalNames'
+import {getStyledComponentAliases} from '../../../utils/getStyledComponentAliases'
 import {shouldTransformComponent} from '../../../utils/shouldTransformComponent'
 import {transformAttributes} from '../../../utils/transformAttributes'
 import {transformComponent} from '../../../utils/transformComponent'
 import {transformImport} from '../../../utils/transformImport'
+import {transformStyledComponents} from '../../../utils/transformStyledComponents'
 import {CONTAINER_MODS} from './container.mods'
 
 const TODO_WARNING = 'Please double check the Container migration below'
@@ -20,8 +22,16 @@ export default function transform(
 
   return transformComponent(fileInfo, api, ({j, root, markChanged}) => {
     const localNames = getComponentLocalNames(j, root, 'Container', options)
+    const styledAliases = getStyledComponentAliases(
+      j,
+      root,
+      'Container',
+      fileInfo.path,
+      localNames,
+      options,
+    )
 
-    if (!shouldTransformComponent(j, root, 'Container', localNames, options)) {
+    if (!shouldTransformComponent(j, root, 'Container', localNames, options, styledAliases)) {
       return
     }
 
@@ -29,14 +39,24 @@ export default function transform(
       markChanged()
     }
 
-    root
-      .find(j.JSXOpeningElement, {
-        name: {type: 'JSXIdentifier', name: 'Container'},
-      })
-      .forEach((path) => {
-        if (transformAttributes(j, path, CONTAINER_MODS, TODO_WARNING)) {
-          markChanged()
-        }
+    root.find(j.JSXOpeningElement).forEach((path) => {
+      const name = path.node.name
+
+      if (name.type !== 'JSXIdentifier' || !localNames.has(name.name)) {
+        return
+      }
+
+      if (transformAttributes(j, path, CONTAINER_MODS, TODO_WARNING)) {
+        markChanged()
+      }
+    })
+
+    if (
+      transformStyledComponents(j, root, styledAliases, () => true, {
+        callback: (path) => transformAttributes(j, path, CONTAINER_MODS, TODO_WARNING),
       })
+    ) {
+      markChanged()
+    }
   })
 }

package/src/transforms/latest/grid/grid.test.ts

@@ -1,4 +1,6 @@
-import {defineInlineTest} from '../../../utils/testUtils'
+import {expect} from 'vitest'
+
+import {defineCrossFileTest, defineInlineTest} from '../../../utils/testUtils'
 import transform from './grid'
 
 defineInlineTest(
@@ -95,3 +97,78 @@ defineInlineTest(
   `,
   'updates v3 grid props mapped values',
 )
+
+defineCrossFileTest(
+  transform,
+  {},
+  `
+    import {Grid} from '@sanity/ui'
+
+    export const RootGrid = styled(Grid)(({theme}) => ({}))
+  `,
+  `
+    import {RootGrid} from './Component.styled'
+
+    export function Component() {
+      return <RootGrid autoCols="auto" />
+    }
+  `,
+  (output) => {
+    expect(output).toContain('<RootGrid gridAutoColumns="auto" />')
+  },
+  'transforms attributes on imported styled Grid wrappers',
+)
+
+defineCrossFileTest(
+  transform,
+  {},
+  `
+    import {Grid} from '@sanity/ui'
+
+    export const RootGrid = styled(Grid)(({theme}) => ({}))
+  `,
+  `
+    import {Grid} from 'another-package'
+    import {RootGrid} from './Component.styled'
+
+    export function Component() {
+      return (
+        <>
+          <RootGrid autoCols="auto" />
+          <Grid autoCols="auto" />
+        </>
+      )
+    }
+  `,
+  (output) => {
+    expect(output).toContain('<RootGrid gridAutoColumns="auto" />')
+    expect(output).toContain('<Grid autoCols="auto" />')
+  },
+  'does not transform attributes on unrelated Grid from another package',
+)
+
+defineCrossFileTest(
+  transform,
+  {},
+  `
+    import {Grid} from '@sanity/ui'
+
+    export const RootGrid = styled(Grid)(({theme}) => ({}))
+  `,
+  `
+    import {RootGrid} from './index'
+
+    export function Component() {
+      return <RootGrid autoCols="auto" />
+    }
+  `,
+  (output) => {
+    expect(output).toContain('<RootGrid gridAutoColumns="auto" />')
+  },
+  'transforms styled Grid wrappers imported through barrel re-exports',
+  {
+    extraFiles: {
+      'index.ts': `export {RootGrid} from './Component.styled'`,
+    },
+  },
+)