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

package/src/transforms/latest/heading/heading.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 {HEADING_MODS} from './heading.mods'
 
 const TODO_WARNING = 'Please double check the Heading migration below'
@@ -21,8 +23,16 @@ export default function transform(
 
   return transformComponent(fileInfo, api, ({j, root, markChanged}) => {
     const localNames = getComponentLocalNames(j, root, 'Heading', options)
+    const styledAliases = getStyledComponentAliases(
+      j,
+      root,
+      'Heading',
+      fileInfo.path,
+      localNames,
+      options,
+    )
 
-    if (!shouldTransformComponent(j, root, 'Heading', localNames, options)) {
+    if (!shouldTransformComponent(j, root, 'Heading', localNames, options, styledAliases)) {
       return
     }
 
@@ -30,24 +40,45 @@ export default function transform(
       markChanged()
     }
 
-    root
-      .find(j.JSXOpeningElement, {
-        name: {type: 'JSXIdentifier', name: 'Heading'},
-      })
-      .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, HEADING_MODS, TODO_WARNING)) {
+        changed = true
+      }
+
+      if (addAttribute(j, path.node, 'trim', true)) {
+        changed = true
+      }
 
-        if (transformAttributes(j, path, HEADING_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, HEADING_MODS, TODO_WARNING)) {
+            changed = true
+          }
+
+          if (addAttribute(j, path.node, 'trim', true)) {
+            changed = true
+          }
+
+          return changed
+        },
       })
+    ) {
+      markChanged()
+    }
   })
 }

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

@@ -1,4 +1,6 @@
-import {defineInlineTest} from '../../../utils/testUtils'
+import {expect} from 'vitest'
+
+import {defineCrossFileTest, defineInlineTest} from '../../../utils/testUtils'
 import transform from './inline'
 
 defineInlineTest(
@@ -55,3 +57,78 @@ defineInlineTest(
   `,
   'warns if margin prop is present',
 )
+
+defineCrossFileTest(
+  transform,
+  {},
+  `
+    import {Inline} from '@sanity/ui'
+
+    export const RootInline = styled(Inline)(({theme}) => ({}))
+  `,
+  `
+    import {RootInline} from './Component.styled'
+
+    export function Component() {
+      return <RootInline space={2} />
+    }
+  `,
+  (output) => {
+    expect(output).toContain('<RootInline gap={2} />')
+  },
+  'transforms attributes on imported styled Inline wrappers',
+)
+
+defineCrossFileTest(
+  transform,
+  {},
+  `
+    import {Inline} from '@sanity/ui'
+
+    export const RootInline = styled(Inline)(({theme}) => ({}))
+  `,
+  `
+    import {Inline} from 'another-package'
+    import {RootInline} from './Component.styled'
+
+    export function Component() {
+      return (
+        <>
+          <RootInline space={2} />
+          <Inline space={2} />
+        </>
+      )
+    }
+  `,
+  (output) => {
+    expect(output).toContain('<RootInline gap={2} />')
+    expect(output).toContain('<Inline space={2} />')
+  },
+  'does not transform attributes on unrelated Inline from another package',
+)
+
+defineCrossFileTest(
+  transform,
+  {},
+  `
+    import {Inline} from '@sanity/ui'
+
+    export const RootInline = styled(Inline)(({theme}) => ({}))
+  `,
+  `
+    import {RootInline} from './index'
+
+    export function Component() {
+      return <RootInline space={2} />
+    }
+  `,
+  (output) => {
+    expect(output).toContain('<RootInline gap={2} />')
+  },
+  'transforms styled Inline wrappers imported through barrel re-exports',
+  {
+    extraFiles: {
+      'index.ts': `export {RootInline} from './Component.styled'`,
+    },
+  },
+)

package/src/transforms/latest/inline/inline.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 {INLINE_MODS} from './inline.mods'
 
 const TODO_WARNING = 'Please double check the Inline migration below'
@@ -20,8 +22,16 @@ export default function transform(
 
   return transformComponent(fileInfo, api, ({j, root, markChanged}) => {
     const localNames = getComponentLocalNames(j, root, 'Inline', options)
+    const styledAliases = getStyledComponentAliases(
+      j,
+      root,
+      'Inline',
+      fileInfo.path,
+      localNames,
+      options,
+    )
 
-    if (!shouldTransformComponent(j, root, 'Inline', localNames, options)) {
+    if (!shouldTransformComponent(j, root, 'Inline', localNames, options, styledAliases)) {
       return
     }
 
@@ -29,14 +39,24 @@ export default function transform(
       markChanged()
     }
 
-    root
-      .find(j.JSXOpeningElement, {
-        name: {type: 'JSXIdentifier', name: 'Inline'},
-      })
-      .forEach((path) => {
-        if (transformAttributes(j, path, INLINE_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, INLINE_MODS, TODO_WARNING)) {
+        markChanged()
+      }
+    })
+
+    if (
+      transformStyledComponents(j, root, styledAliases, () => true, {
+        callback: (path) => transformAttributes(j, path, INLINE_MODS, TODO_WARNING),
       })
+    ) {
+      markChanged()
+    }
   })
 }

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

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

package/src/transforms/latest/label/label.ts

@@ -3,11 +3,13 @@ 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 {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 {LABEL_MODS} from './label.mods'
 
 const TODO_WARNING = 'Please double check the Label migration below'
@@ -22,8 +24,16 @@ export default function transform(
 
   return transformComponent(fileInfo, api, ({j, root, markChanged}) => {
     const localNames = getComponentLocalNames(j, root, 'Label', options)
+    const styledAliases = getStyledComponentAliases(
+      j,
+      root,
+      'Label',
+      fileInfo.path,
+      localNames,
+      options,
+    )
 
-    if (!shouldTransformComponent(j, root, 'Label', localNames, options)) {
+    if (!shouldTransformComponent(j, root, 'Label', localNames, options, styledAliases)) {
       return
     }
 
@@ -38,6 +48,7 @@ export default function transform(
         () => true,
         {
           element: 'Label',
+          localNames,
         },
         {
           element: 'Eyebrow',
@@ -63,5 +74,29 @@ export default function transform(
     ) {
       markChanged()
     }
+
+    if (
+      transformStyledComponents(j, root, styledAliases, () => true, {
+        callback: (path) => {
+          let changed = false
+
+          if (transformAttributes(j, path, LABEL_MODS, TODO_WARNING)) {
+            changed = true
+          }
+
+          if (addAttribute(j, path.node, 'as', 'div')) {
+            changed = true
+          }
+
+          if (addAttribute(j, path.node, 'trim', true)) {
+            changed = true
+          }
+
+          return changed
+        },
+      })
+    ) {
+      markChanged()
+    }
   })
 }

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

@@ -1,4 +1,6 @@
-import {defineInlineTest} from '../../../utils/testUtils'
+import {expect} from 'vitest'
+
+import {defineCrossFileTest, defineInlineTest} from '../../../utils/testUtils'
 import transform from './stack'
 
 defineInlineTest(
@@ -158,3 +160,100 @@ defineInlineTest(
   `,
   'replaces Stack with Flex and transforms attributes',
 )
+
+defineCrossFileTest(
+  transform,
+  {},
+  `
+    import {Stack} from '@sanity/ui'
+
+    export const RootStack = styled(Stack)(({theme}) => ({}))
+  `,
+  `
+    import {RootStack} from './Component.styled'
+
+    export function Component() {
+      return <RootStack space={2} />
+    }
+  `,
+  (output) => {
+    expect(output).toContain('<RootStack gap={2} />')
+  },
+  'transforms attributes on imported styled Stack wrappers',
+)
+
+defineCrossFileTest(
+  transform,
+  {},
+  `
+    import {Stack} from '@sanity/ui'
+
+    export const RootStack = styled(Stack)(({theme}) => ({}))
+  `,
+  `
+    import {RootStack} from './Component.styled'
+
+    export function Component() {
+      return <RootStack padding={2} />
+    }
+  `,
+  (output) => {
+    expect(output).toContain('UI-CODEMOD TODO: Please double check styled(Stack) migration below')
+    expect(output).toContain('<RootStack padding={2} />')
+  },
+  'adds todo warning when imported styled Stack wrapper should be replaced',
+)
+
+defineCrossFileTest(
+  transform,
+  {},
+  `
+    import {Stack} from '@sanity/ui'
+
+    export const RootStack = styled(Stack)(({theme}) => ({}))
+  `,
+  `
+    import {Stack} from 'another-package'
+    import {RootStack} from './Component.styled'
+
+    export function Component() {
+      return (
+        <>
+          <RootStack space={2} />
+          <Stack space={2} />
+        </>
+      )
+    }
+  `,
+  (output) => {
+    expect(output).toContain('<RootStack gap={2} />')
+    expect(output).toContain('<Stack space={2} />')
+  },
+  'does not rewrite unrelated Stack from another package',
+)
+
+defineCrossFileTest(
+  transform,
+  {},
+  `
+    import {Stack} from '@sanity/ui'
+
+    export const RootStack = styled(Stack)(({theme}) => ({}))
+  `,
+  `
+    import {RootStack} from './index'
+
+    export function Component() {
+      return <RootStack space={2} />
+    }
+  `,
+  (output) => {
+    expect(output).toContain('<RootStack gap={2} />')
+  },
+  'transforms styled Stack wrappers imported through barrel re-exports',
+  {
+    extraFiles: {
+      'index.ts': `export {RootStack} from './Component.styled'`,
+    },
+  },
+)

package/src/transforms/latest/stack/stack.ts

@@ -3,18 +3,21 @@ import {type API, type FileInfo, type JSXElement} from 'jscodeshift'
 import type {BaseOptions} from '../../../types/BaseOptions'
 import {addAttribute} from '../../../utils/addAttribute'
 import {getComponentLocalNames} from '../../../utils/getComponentLocalNames'
+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 {FLEX_MODS} from '../flex/flex.mods'
 import {STACK_MODS} from './stack.mods'
 
 const STACK_TODO_WARNING = 'Please double check the Stack migration below'
 const FLEX_TODO_WARNING = 'Please double check the Flex migration below'
+const STYLED_TODO_WARNING = 'Please double check styled(Stack) migration below'
 
-function hasFlexAttrs(attrs: JSXElement['openingElement']['attributes']) {
+function replaceWithFlex(attrs: JSXElement['openingElement']['attributes']) {
   if (!attrs) {
     return false
   }
@@ -26,7 +29,9 @@ function hasFlexAttrs(attrs: JSXElement['openingElement']['attributes']) {
       (attr.name.name.startsWith('padding') ||
         attr.name.name.startsWith('margin') ||
         attr.name.name.startsWith('overflow') ||
-        attr.name.name.startsWith('flex')),
+        attr.name.name.startsWith('flex') ||
+        attr.name.name.endsWith('height') ||
+        attr.name.name.endsWith('width')),
   )
 }
 
@@ -40,8 +45,16 @@ export default function transform(
 
   return transformComponent(fileInfo, api, ({j, root, markChanged}) => {
     const localNames = getComponentLocalNames(j, root, 'Stack', options)
+    const styledAliases = getStyledComponentAliases(
+      j,
+      root,
+      'Stack',
+      fileInfo.path,
+      localNames,
+      options,
+    )
 
-    if (!shouldTransformComponent(j, root, 'Stack', localNames, options)) {
+    if (!shouldTransformComponent(j, root, 'Stack', localNames, options, styledAliases)) {
       return
     }
 
@@ -53,11 +66,10 @@ export default function transform(
       replaceElement(
         j,
         root,
-        (attrs) => {
-          return hasFlexAttrs(attrs)
-        },
+        (attrs) => replaceWithFlex(attrs),
         {
           element: 'Stack',
+          localNames,
         },
         {
           element: 'Flex',
@@ -85,10 +97,11 @@ export default function transform(
         j,
         root,
         (attrs) => {
-          return !hasFlexAttrs(attrs)
+          return !replaceWithFlex(attrs)
         },
         {
           element: 'Stack',
+          localNames,
         },
         {
           element: 'VStack',
@@ -98,5 +111,14 @@ export default function transform(
     ) {
       markChanged()
     }
+
+    if (
+      transformStyledComponents(j, root, styledAliases, (attrs) => !replaceWithFlex(attrs), {
+        warning: STYLED_TODO_WARNING,
+        callback: (path) => transformAttributes(j, path, STACK_MODS, STACK_TODO_WARNING),
+      })
+    ) {
+      markChanged()
+    }
   })
 }

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

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