@sanity/ui-codemod 1.0.0-alpha.1

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

@@ -0,0 +1,72 @@
+import type {AttributeMods} from '../../../types/AttributeMods'
+
+/** @internal */
+export const TEXT_MODS: AttributeMods = {
+  accent: {
+    type: 'rename-mapped',
+    name: 'tone',
+    mapping: {
+      true: 'suggest',
+    },
+  },
+  flex: {
+    type: 'style-mapped',
+    style: 'flex',
+    mapping: {
+      none: '0 0 auto',
+      auto: '1 1 auto',
+      initial: '0 1 auto',
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+      5: '5',
+      6: '6',
+      7: '7',
+      8: '8',
+      9: '9',
+      10: '10',
+      11: '11',
+      12: '12',
+    },
+  },
+  maxWidth: {
+    type: 'style-mapped',
+    style: 'maxWidth',
+    mapping: {
+      auto: 'none',
+      fill: '100%',
+      0: '20rem',
+      1: '40rem',
+      2: '60rem',
+      3: '80rem',
+      4: '100rem',
+      5: '120rem',
+    },
+  },
+  textOverflow: {
+    type: 'rename-mapped',
+    name: 'truncate',
+    mapping: {
+      ellipsis: 1,
+      clip: 1,
+    },
+  },
+  width: {
+    type: 'style-mapped',
+    style: 'width',
+    mapping: {
+      auto: 'auto',
+      fill: '100%',
+      stretch: 'stretch',
+      min: 'min-content',
+      max: 'max-content',
+      0: '20rem',
+      1: '40rem',
+      2: '60rem',
+      3: '80rem',
+      4: '100rem',
+      5: '120rem',
+    },
+  },
+}

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

@@ -0,0 +1,113 @@
+import {defineInlineTest} from '../../../utils/testUtils'
+import transform from './text'
+
+defineInlineTest(
+  transform,
+  {fromPackage: '@legacy/ui', toPackage: '@sanity/ui'},
+  `
+  import {Text} from '@legacy/ui'
+
+  <Text />
+  `,
+  `
+  import {Text} from "@sanity/ui"
+
+  <Text as="div" trim={true} />
+  `,
+  'updates Text import path based on fromPackage and toPackage',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Text />
+  `,
+  `
+  <Text as="div" trim={true} />
+  `,
+  'adds trim prop',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Text />
+  `,
+  `
+  <Text as="div" trim={true} />
+  `,
+  'adds as prop',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Text as="span" />
+  `,
+  `
+  <Text as="span" trim={true} />
+  `,
+  'does not add as prop if already set',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Text flex="auto" />
+  `,
+  `
+  <Text
+    style={{
+      flex: "1 1 auto"
+    }}
+    as="div"
+    trim={true} />
+  `,
+  'moves flex prop to style',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Text accent />
+  `,
+  `
+  <Text tone="suggest" as="div" trim={true} />
+  `,
+  'renames accent prop and updates mapped values',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Text textOverflow="ellipsis" />
+  `,
+  `
+  <Text truncate={1} as="div" trim={true} />
+  `,
+  'renames textOverflow prop and updates mapped values',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Text width={1} maxWidth="fill" />
+  `,
+  `
+  <Text
+    style={{
+      width: "40rem",
+      maxWidth: "100%"
+    }}
+    as="div"
+    trim={true} />
+  `,
+  'moves width props to style and updates mapped value',
+)

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

@@ -0,0 +1,57 @@
+import {type API, type FileInfo} from 'jscodeshift'
+
+import type {BaseOptions} from '../../../types/BaseOptions'
+import {addAttribute} from '../../../utils/addAttribute'
+import {getComponentLocalNames} from '../../../utils/getComponentLocalNames'
+import {shouldTransformComponent} from '../../../utils/shouldTransformComponent'
+import {transformAttributes} from '../../../utils/transformAttributes'
+import {transformComponent} from '../../../utils/transformComponent'
+import {transformImport} from '../../../utils/transformImport'
+import {TEXT_MODS} from './text.mods'
+
+const TODO_WARNING = 'Please double check the Text migration below'
+
+/** @internal */
+export default function transform(
+  fileInfo: FileInfo,
+  api: API,
+  options: BaseOptions,
+): string | undefined {
+  const {fromPackage, toPackage} = options || {}
+
+  return transformComponent(fileInfo, api, ({j, root, markChanged}) => {
+    const localNames = getComponentLocalNames(j, root, 'Text', options)
+
+    if (!shouldTransformComponent(j, root, 'Text', localNames, options)) {
+      return
+    }
+
+    if (transformImport(j, root, 'Text', fromPackage, toPackage)) {
+      markChanged()
+    }
+
+    root
+      .find(j.JSXOpeningElement, {
+        name: {type: 'JSXIdentifier', name: 'Text'},
+      })
+      .forEach((path) => {
+        let changed = false
+
+        if (transformAttributes(j, path, TEXT_MODS, TODO_WARNING)) {
+          changed = true
+        }
+
+        if (addAttribute(j, path.node, 'as', 'div')) {
+          changed = true
+        }
+
+        if (addAttribute(j, path.node, 'trim', true)) {
+          changed = true
+        }
+
+        if (changed) {
+          markChanged()
+        }
+      })
+  })
+}

package/src/types/AnyExpression.ts

@@ -0,0 +1,9 @@
+import type {Expression} from 'jscodeshift'
+
+export interface AnyExpression extends Expression {
+  type: string
+  value?: unknown
+  elements?: unknown
+  quasis?: unknown
+  expressions?: unknown
+}

package/src/types/AttributeMods.ts

@@ -0,0 +1,16 @@
+export type AttributeMapping = Record<string | number, string | boolean | number>
+export type CompositeAttributeMapping = Record<string, Record<string, string | number | boolean>>
+
+export type AttributeMod =
+  | {type: 'remove'}
+  | {type: 'warn-only'; warning?: string}
+  | {type: 'warn-missing'; warning?: string}
+  | {type: 'rename-only'; name: string}
+  | {type: 'rename-mapped'; name: string; mapping: AttributeMapping}
+  | {type: 'style-only'; style: string}
+  | {type: 'style-mapped'; style: string; mapping: AttributeMapping}
+  | {type: 'mapped-only'; mapping: AttributeMapping}
+  | {type: 'shorthand-mapped'; props: {name: string; mapping: AttributeMapping}[]}
+  | {type: 'composite'; name: string; mapping: CompositeAttributeMapping}
+
+export type AttributeMods = Record<string, AttributeMod>

package/src/types/BaseOptions.ts

@@ -0,0 +1,6 @@
+import type {Options} from 'jscodeshift'
+
+export interface BaseOptions extends Options {
+  fromPackage?: string
+  toPackage?: string
+}

package/src/utils/addAttribute.test.ts

@@ -0,0 +1,43 @@
+import {type API, type FileInfo} from 'jscodeshift'
+
+import {defineInlineTest} from '../utils/testUtils'
+import {addAttribute} from './addAttribute'
+
+function transform(fileInfo: FileInfo, api: API): string {
+  const j = api.jscodeshift
+  const root = j(fileInfo.source)
+
+  root
+    .find(j.JSXOpeningElement, {
+      name: {type: 'JSXIdentifier', name: 'div'},
+    })
+    .forEach((path) => {
+      addAttribute(j, path.node, 'trim', true)
+    })
+
+  return root.toSource()
+}
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <div />
+  `,
+  `
+  <div trim={true} />
+  `,
+  'adds prop',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <div width="100%" />
+  `,
+  `
+  <div width="100%" trim={true} />
+  `,
+  'adds prop and preserves existing props',
+)

package/src/utils/addAttribute.ts

@@ -0,0 +1,26 @@
+import type {API, JSXOpeningElement} from 'jscodeshift'
+
+import {getAttribute} from './getAttribute'
+import {getAttributeValue} from './getAttributeValue'
+
+/**
+ * Adds a JSX attribute to the opening element if it doesn't already exist.
+ * Returns whether the AST was updated.
+ */
+export function addAttribute(
+  j: API['jscodeshift'],
+  node: JSXOpeningElement,
+  name: string,
+  value: unknown,
+): boolean {
+  if (getAttribute(node.attributes, name)) {
+    return false
+  }
+
+  if (!node.attributes) {
+    node.attributes = []
+  }
+
+  node.attributes.push(j.jsxAttribute(j.jsxIdentifier(name), getAttributeValue(j, value)))
+  return true
+}

package/src/utils/addImportSpecifier.test.ts

@@ -0,0 +1,36 @@
+import {type API, type FileInfo} from 'jscodeshift'
+
+import {addImportSpecifier} from './addImportSpecifier'
+import {defineInlineTest} from './testUtils'
+
+function transform(fileInfo: FileInfo, api: API): string {
+  const j = api.jscodeshift
+  const root = j(fileInfo.source)
+
+  addImportSpecifier(j, root, 'Card', 'Box')
+  return root.toSource()
+}
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  import {Card} from '@sanity/ui'
+  `,
+  `
+  import { Card, Box } from '@sanity/ui';
+  `,
+  'adds import specifier',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  import {Text, Card} from '@sanity/ui'
+  `,
+  `
+  import { Text, Card, Box } from '@sanity/ui';
+  `,
+  'adds import specifier to import with multiple',
+)

package/src/utils/addImportSpecifier.ts

@@ -0,0 +1,42 @@
+import type {API} from 'jscodeshift'
+
+/**
+ * Adds an import specifier to an existing import declaration.
+ * Returns whether the AST was updated.
+ */
+export function addImportSpecifier(
+  j: API['jscodeshift'],
+  root: ReturnType<API['jscodeshift']>,
+  addTo: string,
+  name: string,
+): boolean {
+  let hasChanges = false
+
+  root.find(j.ImportDeclaration).forEach((path) => {
+    const specs = path.node.specifiers
+
+    if (!specs?.length) {
+      return
+    }
+
+    const hasFromSpecifier = specs.some(
+      (s) =>
+        s.type === 'ImportSpecifier' &&
+        s.imported.type === 'Identifier' &&
+        s.imported.name === addTo,
+    )
+    const hasToSpecifier = specs.some(
+      (s) =>
+        s.type === 'ImportSpecifier' &&
+        s.imported.type === 'Identifier' &&
+        s.imported.name === name,
+    )
+
+    if (hasFromSpecifier && !hasToSpecifier) {
+      specs.push(j.importSpecifier(j.identifier(name), j.identifier(name)))
+      hasChanges = true
+    }
+  })
+
+  return hasChanges
+}

package/src/utils/getAttribute.ts

@@ -0,0 +1,22 @@
+import type {JSXAttribute, JSXElement} from 'jscodeshift'
+
+export function getAttribute(
+  attrs: JSXElement['openingElement']['attributes'],
+  name: string,
+): JSXAttribute | undefined {
+  if (!attrs) {
+    return undefined
+  }
+
+  for (const attr of attrs) {
+    if (
+      attr.type === 'JSXAttribute' &&
+      attr.name.type === 'JSXIdentifier' &&
+      attr.name.name === name
+    ) {
+      return attr
+    }
+  }
+
+  return undefined
+}

package/src/utils/getAttributeExpression.ts

@@ -0,0 +1,22 @@
+import {type API, type JSXAttribute} from 'jscodeshift'
+
+import {type AnyExpression} from '../types/AnyExpression'
+
+export function getAttributeExpression(
+  attr: JSXAttribute,
+  j: API['jscodeshift'],
+): AnyExpression | null {
+  if (!attr.value) {
+    return j.booleanLiteral(true)
+  }
+
+  if (attr.value.type === 'StringLiteral' || attr.value.type === 'Literal') {
+    return attr.value
+  }
+
+  if (attr.value.type === 'JSXExpressionContainer') {
+    return attr.value.expression
+  }
+
+  return null
+}

package/src/utils/getAttributeValue.ts

@@ -0,0 +1,20 @@
+import type {API, JSXAttribute} from 'jscodeshift'
+
+export function getAttributeValue(
+  j: API['jscodeshift'],
+  value: unknown,
+): NonNullable<JSXAttribute['value']> {
+  if (value === true || value === false) {
+    return j.jsxExpressionContainer(j.booleanLiteral(value))
+  }
+
+  if (typeof value === 'string') {
+    return j.stringLiteral(value)
+  }
+
+  if (typeof value === 'number') {
+    return j.jsxExpressionContainer(j.numericLiteral(value))
+  }
+
+  return j.jsxExpressionContainer(j.nullLiteral())
+}

package/src/utils/getClonedImportSpecifiers.ts

@@ -0,0 +1,29 @@
+import type {API, ImportDefaultSpecifier, ImportSpecifier} from 'jscodeshift'
+
+export function getClonedImportSpecifiers(
+  j: API['jscodeshift'],
+  specifiers: (ImportSpecifier | ImportDefaultSpecifier)[] = [],
+) {
+  return specifiers.map((spec) => {
+    if (spec.type === 'ImportSpecifier') {
+      if (spec.imported.type !== 'Identifier' || spec.local?.type !== 'Identifier') {
+        return spec
+      }
+
+      const clone = j.importSpecifier(
+        j.identifier(spec.imported.name),
+        j.identifier(spec.local.name),
+      )
+
+      if ('importKind' in spec && spec.importKind === 'type') {
+        Object.assign(clone, {importKind: 'type'})
+      }
+
+      return clone
+    } else {
+      return j.importDefaultSpecifier(
+        j.identifier((spec as ImportDefaultSpecifier).local?.name as string),
+      )
+    }
+  })
+}

package/src/utils/getComponentJsxNames.ts

@@ -0,0 +1,17 @@
+import type {API, Collection} from 'jscodeshift'
+
+import type {BaseOptions} from '../types/BaseOptions'
+import {getComponentLocalNames} from './getComponentLocalNames'
+import {getStyledComponentAliases} from './getStyledComponentAliases'
+
+export function getComponentJsxNames(
+  j: API['jscodeshift'],
+  root: Collection,
+  componentName: string,
+  options?: BaseOptions,
+): Set<string> {
+  const localNames = getComponentLocalNames(j, root, componentName, options)
+  const styledAliases = getStyledComponentAliases(j, root, localNames)
+
+  return new Set([...localNames, ...styledAliases])
+}

package/src/utils/getComponentLocalNames.ts

@@ -0,0 +1,69 @@
+import type {API, Collection} from 'jscodeshift'
+
+import type {BaseOptions} from '../types/BaseOptions'
+import {DEFAULT_UI_PACKAGE} from './transformImport'
+
+export function getComponentLocalNames(
+  j: API['jscodeshift'],
+  root: Collection,
+  componentName: string,
+  options?: BaseOptions,
+): Set<string> {
+  const importedNames = new Set<string>()
+  const packages = new Set([
+    options?.fromPackage ?? DEFAULT_UI_PACKAGE,
+    options?.toPackage ?? DEFAULT_UI_PACKAGE,
+  ])
+  let hasOtherPackageImport = false
+
+  root.find(j.ImportDeclaration).forEach((path) => {
+    const node = path.node
+
+    if ('importKind' in node && node.importKind === 'type') {
+      return
+    }
+
+    const matchesPackage = packages.has(node.source.value as string)
+
+    for (const spec of node.specifiers ?? []) {
+      if (spec.type !== 'ImportSpecifier') {
+        continue
+      }
+
+      if ('importKind' in spec && spec.importKind === 'type') {
+        continue
+      }
+
+      if (spec.imported.type !== 'Identifier' || spec.imported.name !== componentName) {
+        continue
+      }
+
+      const local = spec.local?.type === 'Identifier' ? spec.local.name : spec.imported.name
+
+      if (!matchesPackage) {
+        hasOtherPackageImport = true
+        continue
+      }
+
+      importedNames.add(local)
+    }
+  })
+
+  if (importedNames.size > 0) {
+    return importedNames
+  }
+
+  if (hasOtherPackageImport) {
+    return new Set()
+  }
+
+  const usesComponentInJsx = root.find(j.JSXOpeningElement).some(({node}) => {
+    return node.name.type === 'JSXIdentifier' && node.name.name === componentName
+  })
+
+  if (usesComponentInJsx) {
+    return new Set([componentName])
+  }
+
+  return new Set()
+}

package/src/utils/getCompositeAttrValue.ts

@@ -0,0 +1,39 @@
+import type {API, JSXAttribute, JSXSpreadAttribute} from 'jscodeshift'
+
+import type {CompositeAttributeMapping} from '../types/AttributeMods'
+import {getStaticAttributeExpression} from './getStaticAttributeExpression'
+
+export function getCompositeAttrValue(
+  j: API['jscodeshift'],
+  attrs: (JSXAttribute | JSXSpreadAttribute)[],
+  mapping: CompositeAttributeMapping,
+) {
+  let compositeAttrValue: string | null = null
+
+  for (const compositeKey of Object.keys(mapping)) {
+    const compositeMapping = mapping[compositeKey]
+
+    if (!compositeMapping) {
+      continue
+    }
+
+    let hasMatchingValues = true
+
+    for (const propName of Object.keys(compositeMapping)) {
+      const mappingValue = compositeMapping[propName]
+      const attrValue = getStaticAttributeExpression(j, attrs, propName)
+
+      if (mappingValue === undefined || attrValue !== mappingValue) {
+        hasMatchingValues = false
+        break
+      }
+    }
+
+    if (hasMatchingValues) {
+      compositeAttrValue = compositeKey
+      break
+    }
+  }
+
+  return compositeAttrValue
+}

package/src/utils/getMappingArray.ts

@@ -0,0 +1,36 @@
+import {type API, type ArrayExpression} from 'jscodeshift'
+
+import type {AnyExpression} from '../types/AnyExpression'
+import type {AttributeMapping} from '../types/AttributeMods'
+import {getMappingExpression} from './getMappingExpression'
+import {getMappingValue} from './getMappingValue'
+
+export function getMappingArray(
+  j: API['jscodeshift'],
+  arr: AnyExpression,
+  mapping: AttributeMapping,
+  allowUndefined?: boolean,
+): ArrayExpression | null {
+  if (arr.type !== 'ArrayExpression') {
+    return null
+  }
+
+  const elements = arr.elements as (AnyExpression | null)[]
+  const output: AnyExpression[] = []
+
+  for (const el of elements) {
+    if (el == null || el.type === 'SpreadElement') {
+      return null
+    }
+
+    const mappingValue = getMappingValue(mapping, el)
+
+    if (!mappingValue && !allowUndefined) {
+      return null
+    }
+
+    output.push(getMappingExpression(j, mappingValue))
+  }
+
+  return j.arrayExpression(output as never[])
+}