@sanity/ui-codemod 1.0.0-alpha.1

package/src/utils/transformStyledComponents.test.ts

@@ -0,0 +1,172 @@
+import {type API, type FileInfo} from 'jscodeshift'
+
+import {getAttribute} from './getAttribute'
+import {getComponentLocalNames} from './getComponentLocalNames'
+import {getStyledComponentAliases} from './getStyledComponentAliases'
+import {defineInlineTest} from './testUtils'
+import {transformAttributes} from './transformAttributes'
+import {transformStyledComponents} from './transformStyledComponents'
+
+const DEFAULT_WARNING = 'Please double check styled-component migration(s) below'
+const CUSTOM_WARNING =
+  'Please double check styled(Card) migration — update to styled(Box) manually if needed'
+
+function transform(
+  fileInfo: FileInfo,
+  api: API,
+  options?: {
+    warning?: string
+    hasCallback?: boolean
+  },
+): string {
+  const j = api.jscodeshift
+  const root = j(fileInfo.source)
+  const localNames = getComponentLocalNames(j, root, 'Card')
+  const styledAliases = getStyledComponentAliases(j, root, localNames)
+
+  transformStyledComponents(j, root, styledAliases, (attrs) => !!getAttribute(attrs, 'margin'), {
+    warning: options?.warning,
+    callback: options?.hasCallback
+      ? (path) =>
+          transformAttributes(
+            j,
+            path,
+            {
+              insetTop: {
+                type: 'rename-only',
+                name: 'top',
+              },
+            },
+            'Warning',
+          )
+      : undefined,
+  })
+
+  return root.toSource()
+}
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  import {Card} from '@sanity/ui'
+
+  function Example() {
+    const RootCard = styled(Card)(({theme}) => ({}))
+
+    return <RootCard margin={1} />
+  }
+  `,
+  `
+  import {Card} from '@sanity/ui'
+
+  function Example() {
+    const RootCard = styled(Card)(({theme}) => ({}))
+
+    return <RootCard margin={1} />
+  }
+  `,
+  'preserves component if filter matches',
+)
+
+defineInlineTest(
+  transform,
+  {
+    hasCallback: true,
+  },
+  `
+  import {Card} from '@sanity/ui'
+
+  function Example() {
+    const RootCard = styled(Card)(({theme}) => {})
+
+    return <RootCard margin={1} insetTop={0} />
+  }
+  `,
+  `
+  import {Card} from '@sanity/ui'
+
+  function Example() {
+    const RootCard = styled(Card)(({theme}) => {})
+
+    return <RootCard margin={1} top={0} />;
+  }
+  `,
+  'preserves component and runs callback if filter matches',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  import {Card} from '@sanity/ui'
+
+  function Example() {
+    const RootCard = styled(Card)(({theme}) => ({}))
+
+    return <RootCard padding={1} />
+  }
+  `,
+  `
+  import {Card} from '@sanity/ui'
+
+  function Example() {
+    // UI-CODEMOD TODO: ${DEFAULT_WARNING}
+    const RootCard = styled(Card)(({theme}) => ({}));
+
+    return <RootCard padding={1} />
+  }
+  `,
+  'adds todo warning on styled definition when filter does not match',
+)
+
+defineInlineTest(
+  transform,
+  {warning: CUSTOM_WARNING},
+  `
+  import {Card} from '@sanity/ui'
+
+  function Example() {
+    const RootCard = styled(Card)(({theme}) => ({}))
+
+    return <RootCard padding={1} />
+  }
+  `,
+  `
+  import {Card} from '@sanity/ui'
+
+  function Example() {
+    // UI-CODEMOD TODO: ${CUSTOM_WARNING}
+    const RootCard = styled(Card)(({theme}) => ({}));
+
+    return <RootCard padding={1} />
+  }
+  `,
+  'adds custom todo warning on styled definition when filter does not match',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  import {Card} from '@sanity/ui'
+
+  function Example() {
+    // UI-CODEMOD TODO: ${DEFAULT_WARNING}
+    const RootCard = styled(Card)(({theme}) => ({}))
+
+    return <RootCard padding={1} />
+  }
+  `,
+  `
+  import {Card} from '@sanity/ui'
+
+  function Example() {
+    // UI-CODEMOD TODO: ${DEFAULT_WARNING}
+    const RootCard = styled(Card)(({theme}) => ({}))
+
+    return <RootCard padding={1} />
+  }
+  `,
+  'does not duplicate todo warning',
+)

package/src/utils/transformStyledComponents.ts

@@ -0,0 +1,58 @@
+import type {API, ASTPath, JSXAttribute, JSXOpeningElement, JSXSpreadAttribute} from 'jscodeshift'
+
+import {insertTodoWarning} from './insertTodoWarning'
+
+const DEFAULT_WARNING = 'Please double check styled-component migration(s) below'
+
+/**
+ * Runs callback on JSX styled-component if `filter` passes. Otherwise, adds
+ * a TODO on the styled definition if manual review is needed.
+ * Returns whether the AST was updated.
+ */
+export function transformStyledComponents(
+  j: API['jscodeshift'],
+  root: ReturnType<API['jscodeshift']>,
+  aliases: Iterable<string>,
+  filter: (attrs: (JSXAttribute | JSXSpreadAttribute)[]) => boolean,
+  options: {
+    callback?: (path: ASTPath<JSXOpeningElement>) => boolean | void
+    warning?: string
+  } = {},
+): boolean {
+  const names = new Set(aliases)
+  const {callback, warning = DEFAULT_WARNING} = options
+  const aliasesToWarn = new Set<string>()
+  let hasChanges = false
+
+  root.find(j.JSXOpeningElement).forEach((path) => {
+    const name = path.node.name
+
+    if (name.type !== 'JSXIdentifier' || !names.has(name.name)) {
+      return
+    }
+
+    const attrs = path.node.attributes ?? []
+
+    if (!filter(attrs)) {
+      aliasesToWarn.add(name.name)
+    }
+
+    if (filter(attrs)) {
+      if (callback?.(path)) {
+        hasChanges = true
+      }
+    }
+  })
+
+  root.find(j.VariableDeclarator).forEach((path) => {
+    const {id} = path.node
+
+    if (id.type === 'Identifier' && aliasesToWarn.has(id.name)) {
+      if (insertTodoWarning(j, path, warning)) {
+        hasChanges = true
+      }
+    }
+  })
+
+  return hasChanges
+}