@sanity/ui-codemod 1.0.0-alpha.1

package/src/utils/getMappingExpression.ts

@@ -0,0 +1,22 @@
+import {type API} from 'jscodeshift'
+
+import type {AnyExpression} from '../types/AnyExpression'
+
+export function getMappingExpression(
+  j: API['jscodeshift'],
+  val: string | boolean | number | undefined,
+): AnyExpression {
+  if (val === undefined) {
+    return j.identifier('undefined')
+  }
+
+  if (typeof val === 'boolean') {
+    return j.booleanLiteral(val)
+  }
+
+  if (typeof val === 'number') {
+    return j.numericLiteral(val)
+  }
+
+  return j.stringLiteral(val)
+}

package/src/utils/getMappingValue.ts

@@ -0,0 +1,52 @@
+import type {AnyExpression} from '../types/AnyExpression'
+import type {AttributeMapping} from '../types/AttributeMods'
+
+export function getMappingValue(mapping: AttributeMapping, expr: AnyExpression) {
+  let matchedVal
+
+  for (const val in mapping) {
+    if (expr.value === mapping[val]) {
+      matchedVal = mapping[val]
+    }
+  }
+
+  if (matchedVal) {
+    return matchedVal
+  }
+
+  let key
+
+  if (
+    expr.type === 'NumericLiteral' ||
+    expr.type === 'BooleanLiteral' ||
+    expr.type === 'StringLiteral' ||
+    expr.type === 'Literal'
+  ) {
+    key = String(expr.value)
+  }
+
+  if (expr.type === 'TemplateLiteral') {
+    const expressions = expr.expressions as unknown[]
+    const quasis = expr.quasis as {value: {cooked: string | null}}[]
+
+    if (expressions.length === 0 && quasis.length === 1) {
+      key = quasis[0]?.value.cooked ?? null
+    }
+  }
+
+  if (!key) {
+    return
+  }
+
+  if (Object.prototype.hasOwnProperty.call(mapping, key)) {
+    return mapping[key]
+  }
+
+  const number = Number(key)
+
+  if (!Number.isNaN(number) && Object.prototype.hasOwnProperty.call(mapping, number)) {
+    return mapping[number]
+  }
+
+  return
+}

package/src/utils/getShorthandAttributes.ts

@@ -0,0 +1,54 @@
+import type {API, JSXAttribute} from 'jscodeshift'
+
+import type {AnyExpression} from '../types/AnyExpression'
+import type {AttributeMod} from '../types/AttributeMods'
+import {getMappingArray} from './getMappingArray'
+import {getMappingExpression} from './getMappingExpression'
+import {getMappingValue} from './getMappingValue'
+
+export function getShorthandAttributes(
+  j: API['jscodeshift'],
+  expr: AnyExpression,
+  mod: AttributeMod,
+) {
+  const attributes: JSXAttribute[] = []
+
+  if (!('props' in mod)) {
+    return []
+  }
+
+  if (expr.type === 'ArrayExpression') {
+    for (const prop of mod.props) {
+      const styleArray = getMappingArray(j, expr, prop.mapping, true)
+
+      if (!styleArray) {
+        continue
+      }
+
+      attributes.push(
+        j.jsxAttribute(j.jsxIdentifier(prop.name), j.jsxExpressionContainer(styleArray)),
+      )
+    }
+  }
+
+  for (const prop of mod.props) {
+    const styleValue = getMappingValue(prop.mapping, expr)
+
+    if (styleValue === undefined) {
+      continue
+    }
+
+    if (typeof styleValue === 'string') {
+      attributes.push(j.jsxAttribute(j.jsxIdentifier(prop.name), j.stringLiteral(styleValue)))
+    } else {
+      attributes.push(
+        j.jsxAttribute(
+          j.jsxIdentifier(prop.name),
+          j.jsxExpressionContainer(getMappingExpression(j, styleValue) as never),
+        ),
+      )
+    }
+  }
+
+  return attributes
+}

package/src/utils/getSplitImportSpecifiers.ts

@@ -0,0 +1,40 @@
+import type {ImportDefaultSpecifier, ImportNamespaceSpecifier, ImportSpecifier} from 'jscodeshift'
+
+export function getSplitImportSpecifiers(
+  specifiers: (ImportSpecifier | ImportDefaultSpecifier | ImportNamespaceSpecifier)[] = [],
+  componentName: string,
+) {
+  const componentNames = new Set([componentName, `${componentName}Props`])
+  const specs = {
+    componentSpecs: [] as (ImportSpecifier | ImportDefaultSpecifier)[],
+    restSpecs: [] as (ImportSpecifier | ImportDefaultSpecifier | ImportNamespaceSpecifier)[],
+  }
+
+  for (const spec of specifiers) {
+    if (spec.type === 'ImportNamespaceSpecifier') {
+      specs.restSpecs.push(spec)
+      continue
+    }
+
+    if (spec.type === 'ImportSpecifier' || spec.type === 'ImportDefaultSpecifier') {
+      let local
+
+      if (spec.type === 'ImportSpecifier') {
+        const loc = spec.local ?? spec.imported
+        local = loc.type === 'Identifier' ? loc.name : null
+      }
+
+      if (spec.type === 'ImportDefaultSpecifier') {
+        local = spec.local?.type === 'Identifier' ? spec.local.name : null
+      }
+
+      if (local && componentNames.has(local)) {
+        specs.componentSpecs.push(spec)
+      } else {
+        specs.restSpecs.push(spec)
+      }
+    }
+  }
+
+  return specs
+}

package/src/utils/getStaticAttributeExpression.ts

@@ -0,0 +1,35 @@
+import type {API, JSXAttribute, JSXSpreadAttribute} from 'jscodeshift'
+
+import {getAttribute} from './getAttribute'
+import {getAttributeExpression} from './getAttributeExpression'
+
+export type CompositePrimitive = string | number | boolean
+
+export function getStaticAttributeExpression(
+  j: API['jscodeshift'],
+  attrs: (JSXAttribute | JSXSpreadAttribute)[],
+  name: string,
+): CompositePrimitive | null {
+  const attr = getAttribute(attrs, name)
+
+  if (!attr) {
+    return null
+  }
+
+  const expr = getAttributeExpression(attr, j)
+
+  if (!expr) {
+    return null
+  }
+
+  if (
+    expr.type === 'StringLiteral' ||
+    expr.type === 'NumericLiteral' ||
+    expr.type === 'BooleanLiteral' ||
+    expr.type === 'Literal'
+  ) {
+    return expr.value as string | number | boolean
+  }
+
+  return null
+}

package/src/utils/getStyleExpression.ts

@@ -0,0 +1,37 @@
+import {type API} from 'jscodeshift'
+
+import {type AnyExpression} from '../types/AnyExpression'
+
+export function getStyleExpression(j: API['jscodeshift'], expr: AnyExpression): AnyExpression {
+  if (expr.type === 'Literal') {
+    if (expr.value === null) {
+      return j.literal(null)
+    }
+
+    if (typeof expr.value === 'boolean') {
+      return j.booleanLiteral(expr.value)
+    }
+
+    if (typeof expr.value === 'number') {
+      return j.numericLiteral(expr.value)
+    }
+
+    if (typeof expr.value === 'string') {
+      return j.stringLiteral(expr.value)
+    }
+  }
+
+  if (expr.type === 'BooleanLiteral') {
+    return j.booleanLiteral(expr.value as boolean)
+  }
+
+  if (expr.type === 'NumericLiteral') {
+    return j.numericLiteral(expr.value as number)
+  }
+
+  if (expr.type === 'StringLiteral') {
+    return j.stringLiteral(expr.value as string)
+  }
+
+  return expr
+}

package/src/utils/getStyledComponentAliases.ts

@@ -0,0 +1,28 @@
+import type {API, Collection} from 'jscodeshift'
+
+import {getStyledComponentName} from './getStyledComponentName'
+
+export function getStyledComponentAliases(
+  j: API['jscodeshift'],
+  root: Collection,
+  localNames: Iterable<string>,
+): Set<string> {
+  const aliases = new Set<string>()
+  const names = new Set(localNames)
+
+  root.find(j.VariableDeclarator).forEach((path) => {
+    const {id, init} = path.node
+
+    if (!init || id.type !== 'Identifier') {
+      return
+    }
+
+    const baseComponent = getStyledComponentName(init)
+
+    if (baseComponent && names.has(baseComponent)) {
+      aliases.add(id.name)
+    }
+  })
+
+  return aliases
+}

package/src/utils/getStyledComponentName.ts

@@ -0,0 +1,52 @@
+export function getStyledComponentName(node: unknown): string | null {
+  if (!node || typeof node !== 'object' || !('type' in node)) {
+    return null
+  }
+
+  const current = node as {
+    type: string
+    callee?: unknown
+    tag?: unknown
+    object?: unknown
+    arguments?: unknown[]
+  }
+
+  if (current.type === 'TaggedTemplateExpression') {
+    return getStyledComponentName(current.tag)
+  }
+
+  if (current.type === 'CallExpression') {
+    const callee = current.callee
+
+    if (
+      callee &&
+      typeof callee === 'object' &&
+      'type' in callee &&
+      callee.type === 'Identifier' &&
+      'name' in callee &&
+      callee.name === 'styled'
+    ) {
+      const arg = current.arguments?.[0]
+
+      if (
+        arg &&
+        typeof arg === 'object' &&
+        'type' in arg &&
+        arg.type === 'Identifier' &&
+        'name' in arg
+      ) {
+        return arg.name as string
+      }
+
+      return null
+    }
+
+    return getStyledComponentName(callee)
+  }
+
+  if (current.type === 'MemberExpression' && current.object) {
+    return getStyledComponentName(current.object)
+  }
+
+  return null
+}

package/src/utils/getTransformPath.ts

@@ -0,0 +1,17 @@
+import {existsSync} from 'node:fs'
+import path from 'node:path'
+
+export function getTransformPath(root: string, version: string, name: string) {
+  const jsPath = path.join(root, `dist/transforms/${version}/${name}/${name}.js`)
+  const tsPath = path.join(root, `src/transforms/${version}/${name}/${name}.ts`)
+
+  if (existsSync(jsPath)) {
+    return jsPath
+  }
+
+  if (existsSync(tsPath)) {
+    return tsPath
+  }
+
+  throw new Error(`Could not find ${name} codemod`)
+}

package/src/utils/insertTodoWarning.ts

@@ -0,0 +1,48 @@
+import {
+  type API,
+  type ASTPath,
+  type ImportDeclaration,
+  type JSXOpeningElement,
+  type VariableDeclarator,
+} from 'jscodeshift'
+
+type CommentableNode = {
+  comments?: {type: string; value: string; leading?: boolean}[] | null
+}
+
+/**
+ * Inserts a `UI-CODEMOD TODO` comment.
+ * Returns whether the AST was updated.
+ */
+export function insertTodoWarning(
+  j: API['jscodeshift'],
+  path: ASTPath<JSXOpeningElement | ImportDeclaration | VariableDeclarator>,
+  warning: string,
+): boolean {
+  let target: CommentableNode | null = null
+
+  if (path.node.type === 'ImportDeclaration') {
+    target = path.node
+  } else if (path.node.type === 'VariableDeclarator') {
+    const parent = path.parent
+
+    if (parent?.node.type === 'VariableDeclaration') {
+      target = parent.node
+    }
+  } else if (path.parent?.node.type === 'JSXElement') {
+    target = path.parent.node
+  }
+
+  if (!target) {
+    return false
+  }
+
+  target.comments ??= []
+
+  if (target.comments.some((comment) => comment.value.includes(warning))) {
+    return false
+  }
+
+  target.comments.unshift(j.commentLine(` UI-CODEMOD TODO: ${warning}`, true))
+  return true
+}

package/src/utils/isImportBindingUsed.ts

@@ -0,0 +1,53 @@
+import type {API, ASTPath, ImportSpecifier} from 'jscodeshift'
+
+export function isImportBindingUsed(
+  j: API['jscodeshift'],
+  root: ReturnType<API['jscodeshift']>,
+  name: string,
+  specifierPath: ASTPath<ImportSpecifier>,
+): boolean {
+  const jsxOpening = root.find(j.JSXOpeningElement).some(({node}) => {
+    return node.name.type === 'JSXIdentifier' && node.name.name === name
+  })
+
+  if (jsxOpening) {
+    return true
+  }
+
+  const jsxClosing = root.find(j.JSXClosingElement).some(({node}) => {
+    return node.name.type === 'JSXIdentifier' && node.name.name === name
+  })
+
+  if (jsxClosing) {
+    return true
+  }
+
+  const importedPath = specifierPath.get('imported')
+  const localPath = specifierPath.get('local')
+
+  return root.find(j.Identifier).some((idPath) => {
+    if (idPath.node.name !== name) {
+      return false
+    }
+
+    if (idPath === importedPath || idPath === localPath) {
+      return false
+    }
+
+    const parent = idPath.parent?.node
+
+    if (!parent) {
+      return true
+    }
+
+    if (parent.type === 'MemberExpression' && !parent.computed && parent.property === idPath.node) {
+      return false
+    }
+
+    if (parent.type === 'TSQualifiedName' && parent.right === idPath.node) {
+      return false
+    }
+
+    return true
+  })
+}

package/src/utils/isValidStyleType.ts

@@ -0,0 +1,21 @@
+import {type AnyExpression} from '../types/AnyExpression'
+
+export function isValidStyleType(expr: AnyExpression) {
+  if (expr.type === 'TemplateLiteral') {
+    const expressions = expr.expressions as unknown[]
+    const quasis = expr.quasis as {value: {cooked: string | null}}[]
+    return expressions.length === 0 && quasis.length === 1
+  }
+
+  if (
+    expr.type === 'StringLiteral' ||
+    expr.type === 'Literal' ||
+    expr.type === 'NumericLiteral' ||
+    expr.type === 'BooleanLiteral' ||
+    expr.type === 'NullLiteral'
+  ) {
+    return true
+  }
+
+  return false
+}

package/src/utils/mergeStyle.ts

@@ -0,0 +1,64 @@
+import {type API, type JSXAttribute, type JSXSpreadAttribute} from 'jscodeshift'
+
+import {type AnyExpression} from '../types/AnyExpression'
+
+export function mergeStyle(
+  j: API['jscodeshift'],
+  attrs: (JSXAttribute | JSXSpreadAttribute)[],
+  styleKey: string,
+  styleExpression: AnyExpression,
+) {
+  const styleProp = j.objectProperty(j.identifier(styleKey), styleExpression as never)
+
+  const styleIndex = attrs.findIndex(
+    (a): a is JSXAttribute =>
+      a.type === 'JSXAttribute' && a.name.type === 'JSXIdentifier' && a.name.name === 'style',
+  )
+
+  if (styleIndex === -1) {
+    attrs.push(
+      j.jsxAttribute(
+        j.jsxIdentifier('style'),
+        j.jsxExpressionContainer(j.objectExpression([styleProp])),
+      ),
+    )
+
+    return true
+  }
+
+  const styleAttr = attrs[styleIndex] as JSXAttribute
+
+  if (styleAttr.value?.type !== 'JSXExpressionContainer') {
+    return false
+  }
+
+  const expr = styleAttr.value.expression
+
+  if (expr.type === 'ObjectExpression') {
+    expr.properties = expr.properties.filter((prop) => {
+      if (prop.type !== 'ObjectProperty' && prop.type !== 'Property') {
+        return true
+      }
+
+      const key = prop.key
+
+      const name =
+        key.type === 'Identifier'
+          ? key.name
+          : key.type === 'StringLiteral' || key.type === 'Literal'
+            ? String(key.value)
+            : null
+
+      return name !== styleKey
+    })
+
+    expr.properties.push(styleProp)
+    return true
+  }
+
+  styleAttr.value = j.jsxExpressionContainer(
+    j.objectExpression([j.spreadElement(expr as never), styleProp]),
+  )
+
+  return true
+}

package/src/utils/removeUnusedImport.test.ts

@@ -0,0 +1,77 @@
+import {type API, type FileInfo} from 'jscodeshift'
+
+import {removeUnusedImport} from './removeUnusedImport'
+import {defineInlineTest} from './testUtils'
+
+function transform(fileInfo: FileInfo, api: API): string {
+  const j = api.jscodeshift
+  const root = j(fileInfo.source)
+
+  removeUnusedImport(j, root, 'Card')
+  return root.toSource()
+}
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  import {Card} from '@sanity/ui'
+
+  <Card density="regular" />
+  `,
+  `
+  import {Card} from '@sanity/ui'
+
+  <Card density="regular" />
+  `,
+  'preserves import if element is in jsx',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  import {Card} from '@sanity/ui'
+  import {Box} from '@sanity/ui'
+
+  <Box />
+  `,
+  `
+  import {Box} from '@sanity/ui'
+
+  <Box />
+  `,
+  'removes import if element is not in jsx',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  import {Box, Card} from '@sanity/ui'
+
+  <Box />
+  `,
+  `
+  import { Box } from '@sanity/ui';
+
+  <Box />
+  `,
+  'updates import with multiple specifiers if element is not in jsx',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  import {Card} from '@sanity/ui'
+
+  const RootCard = styled(Card)(({theme}) => {})
+  `,
+  `
+  import {Card} from '@sanity/ui'
+
+  const RootCard = styled(Card)(({theme}) => {})
+  `,
+  'preserves import when component is used with styled()',
+)

package/src/utils/removeUnusedImport.ts

@@ -0,0 +1,57 @@
+import type {API, ASTPath, ImportSpecifier} from 'jscodeshift'
+
+import {isImportBindingUsed} from './isImportBindingUsed'
+
+/**
+ * Removes unused import specifier or the whole import if no specifiers remain.
+ * Returns whether the AST was updated.
+ */
+export function removeUnusedImport(
+  j: API['jscodeshift'],
+  root: ReturnType<API['jscodeshift']>,
+  name: string,
+): boolean {
+  let hasChanges = false
+
+  root.find(j.ImportDeclaration).forEach((path) => {
+    const specs = path.node.specifiers
+
+    if (!specs?.length) {
+      return
+    }
+
+    const next = specs.filter((spec, i) => {
+      if (spec.type !== 'ImportSpecifier' || spec.imported.type !== 'Identifier') {
+        return true
+      }
+
+      if (spec.imported.name !== name) {
+        return true
+      }
+
+      if ('importKind' in spec && spec.importKind === 'type') {
+        return true
+      }
+
+      const localName = spec.local?.type === 'Identifier' ? spec.local.name : spec.imported.name
+      const specifierPath = path.get('specifiers', i) as ASTPath<ImportSpecifier>
+
+      return isImportBindingUsed(j, root, localName, specifierPath)
+    })
+
+    if (next.length === specs.length) {
+      return
+    }
+
+    if (next.length === 0) {
+      j(path).remove()
+      hasChanges = true
+      return
+    }
+
+    path.node.specifiers = next
+    hasChanges = true
+  })
+
+  return hasChanges
+}