@sanity/ui-codemod 1.0.0-alpha.1

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

@@ -0,0 +1,65 @@
+import type {AttributeMods} from '../../../types/AttributeMods'
+
+/** @internal */
+export const INLINE_MODS: AttributeMods = {
+  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',
+    },
+  },
+  margin: {
+    type: 'warn-only',
+    warning:
+      'Please double check the Inline migration below. Margin is not supported in either version.',
+  },
+  marginX: {
+    type: 'warn-only',
+    warning:
+      'Please double check the Inline migration below. Margin is not supported in either version.',
+  },
+  marginY: {
+    type: 'warn-only',
+    warning:
+      'Please double check the Inline migration below. Margin is not supported in either version.',
+  },
+  marginTop: {
+    type: 'warn-only',
+    warning:
+      'Please double check the Inline migration below. Margin is not supported in either version.',
+  },
+  marginRight: {
+    type: 'warn-only',
+    warning:
+      'Please double check the Inline migration below. Margin is not supported in either version.',
+  },
+  marginBottom: {
+    type: 'warn-only',
+    warning:
+      'Please double check the Inline migration below. Margin is not supported in either version.',
+  },
+  marginLeft: {
+    type: 'warn-only',
+    warning:
+      'Please double check the Inline migration below. Margin is not supported in either version.',
+  },
+  space: {
+    type: 'rename-only',
+    name: 'gap',
+  },
+}

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

@@ -0,0 +1,57 @@
+import {defineInlineTest} from '../../../utils/testUtils'
+import transform from './inline'
+
+defineInlineTest(
+  transform,
+  {fromPackage: '@legacy/ui', toPackage: '@sanity/ui'},
+  `
+  import {Inline} from '@legacy/ui'
+
+  <Inline />
+  `,
+  `
+  import {Inline} from "@sanity/ui"
+
+  <Inline />
+  `,
+  'updates Inline import path based on fromPackage and toPackage',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Inline space={2} />
+  `,
+  `
+  <Inline gap={2} />
+  `,
+  'renames space prop to gap',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Inline flex="auto" />
+  `,
+  `
+  <Inline style={{
+    flex: "1 1 auto"
+  }} />
+  `,
+  'moves flex prop to style',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Inline margin={2} />
+  `,
+  `
+  // UI-CODEMOD TODO: Please double check the Inline migration below. Margin is not supported in either version.
+  <Inline margin={2} />
+  `,
+  'warns if margin prop is present',
+)

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

@@ -0,0 +1,42 @@
+import {type API, type FileInfo} from 'jscodeshift'
+
+import type {BaseOptions} from '../../../types/BaseOptions'
+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 {INLINE_MODS} from './inline.mods'
+
+const TODO_WARNING = 'Please double check the Inline 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, 'Inline', options)
+
+    if (!shouldTransformComponent(j, root, 'Inline', localNames, options)) {
+      return
+    }
+
+    if (transformImport(j, root, 'Inline', fromPackage, toPackage)) {
+      markChanged()
+    }
+
+    root
+      .find(j.JSXOpeningElement, {
+        name: {type: 'JSXIdentifier', name: 'Inline'},
+      })
+      .forEach((path) => {
+        if (transformAttributes(j, path, INLINE_MODS, TODO_WARNING)) {
+          markChanged()
+        }
+      })
+  })
+}

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

@@ -0,0 +1,72 @@
+import type {AttributeMods} from '../../../types/AttributeMods'
+
+/** @internal */
+export const LABEL_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/label/label.test.ts

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

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

@@ -0,0 +1,67 @@
+import {type API, type FileInfo} from 'jscodeshift'
+
+import type {BaseOptions} from '../../../types/BaseOptions'
+import {addAttribute} from '../../../utils/addAttribute'
+import {getComponentLocalNames} from '../../../utils/getComponentLocalNames'
+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 {LABEL_MODS} from './label.mods'
+
+const TODO_WARNING = 'Please double check the Label 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, 'Label', options)
+
+    if (!shouldTransformComponent(j, root, 'Label', localNames, options)) {
+      return
+    }
+
+    if (transformImport(j, root, 'Label', fromPackage, toPackage)) {
+      markChanged()
+    }
+
+    if (
+      replaceElement(
+        j,
+        root,
+        () => true,
+        {
+          element: 'Label',
+        },
+        {
+          element: 'Eyebrow',
+          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.mods.ts

@@ -0,0 +1,12 @@
+import type {AttributeMods} from '../../../types/AttributeMods'
+
+/** @internal */
+export const STACK_MODS: AttributeMods = {
+  sizing: {
+    type: 'remove',
+  },
+  space: {
+    type: 'rename-only',
+    name: 'gap',
+  },
+}

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

@@ -0,0 +1,160 @@
+import {defineInlineTest} from '../../../utils/testUtils'
+import transform from './stack'
+
+defineInlineTest(
+  transform,
+  {fromPackage: '@legacy/ui', toPackage: '@sanity/ui'},
+  `
+  import {Stack} from '@legacy/ui'
+
+  <Stack />
+  `,
+  `
+  import {VStack} from "@sanity/ui"
+
+  <VStack />
+  `,
+  'renames Stack and updates import path based on fromPackage and toPackage',
+)
+
+defineInlineTest(
+  transform,
+  {fromPackage: '@legacy/ui', toPackage: '@sanity/ui'},
+  `
+  import {Stack} from '@legacy/ui'
+
+  <Stack padding={2} />
+  `,
+  `
+  import {Flex} from "@sanity/ui"
+
+  <Flex padding={2} flexDirection="column" />
+  `,
+  'replaces Stack with Flex and updates import path based on fromPackage and toPackage',
+)
+
+defineInlineTest(
+  transform,
+  {fromPackage: '@legacy/ui', toPackage: '@sanity/ui'},
+  `
+  import {Stack, Text} from '@legacy/ui'
+
+  <Stack />
+  `,
+  `
+  import { Text } from '@legacy/ui';
+
+  import { VStack } from "@sanity/ui";
+
+  <VStack />
+  `,
+  'renames Stack and updates import path with multiple specifiers',
+)
+
+defineInlineTest(
+  transform,
+  {fromPackage: '@legacy/ui', toPackage: '@sanity/ui'},
+  `
+  import {Stack, Text} from '@legacy/ui'
+
+  <Stack margin={2} />
+  `,
+  `
+  import { Text } from '@legacy/ui';
+
+  import { Flex } from "@sanity/ui";
+
+  <Flex margin={2} flexDirection="column" />
+  `,
+  'replaces Stack and updates import path with multiple specifiers',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Stack gap={2} />
+  `,
+  `
+  <VStack gap={2} />
+  `,
+  'renames Stack with gap',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Stack space={2} sizing="border" />
+  `,
+  `
+  <VStack gap={2} />
+  `,
+  'renames Stack and transforms attributes',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  import {Stack} from '@sanity/ui'
+
+  <>
+    <Stack />
+    <Stack overflow="auto" />
+  </>
+  `,
+  `
+  import { Flex, VStack } from '@sanity/ui';
+
+  <>
+    <VStack />
+    <Flex overflow="auto" flexDirection="column" />
+  </>
+  `,
+  'replaces Stack with Flex and adds Flex import',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  import {Stack} from '@sanity/ui'
+
+  <Stack padding={1} />
+  `,
+  `
+  import {Flex} from '@sanity/ui'
+
+  <Flex padding={1} flexDirection="column" />
+  `,
+  'replaces Stack with Flex and removes Stack import',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Stack padding={1}>
+    <span />
+  </Stack>
+  `,
+  `
+  <Flex padding={1} flexDirection="column">
+    <span />
+  </Flex>
+  `,
+  'replaces Stack with Flex and updates closing tag',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Stack padding={1} width="fill" />
+  `,
+  `
+  <Flex padding={1} width="100%" flexDirection="column" />
+  `,
+  'replaces Stack with Flex and transforms attributes',
+)

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

@@ -0,0 +1,102 @@
+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 {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 {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'
+
+function hasFlexAttrs(attrs: JSXElement['openingElement']['attributes']) {
+  if (!attrs) {
+    return false
+  }
+
+  return attrs.some(
+    (attr) =>
+      attr.type === 'JSXAttribute' &&
+      attr.name.type === 'JSXIdentifier' &&
+      (attr.name.name.startsWith('padding') ||
+        attr.name.name.startsWith('margin') ||
+        attr.name.name.startsWith('overflow') ||
+        attr.name.name.startsWith('flex')),
+  )
+}
+
+/** @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, 'Stack', options)
+
+    if (!shouldTransformComponent(j, root, 'Stack', localNames, options)) {
+      return
+    }
+
+    if (transformImport(j, root, 'Stack', fromPackage, toPackage)) {
+      markChanged()
+    }
+
+    if (
+      replaceElement(
+        j,
+        root,
+        (attrs) => {
+          return hasFlexAttrs(attrs)
+        },
+        {
+          element: 'Stack',
+        },
+        {
+          element: 'Flex',
+          callback: (path) => {
+            let changed = false
+
+            if (addAttribute(j, path.node, 'flexDirection', 'column')) {
+              changed = true
+            }
+
+            if (transformAttributes(j, path, FLEX_MODS, FLEX_TODO_WARNING)) {
+              changed = true
+            }
+
+            return changed
+          },
+        },
+      )
+    ) {
+      markChanged()
+    }
+
+    if (
+      replaceElement(
+        j,
+        root,
+        (attrs) => {
+          return !hasFlexAttrs(attrs)
+        },
+        {
+          element: 'Stack',
+        },
+        {
+          element: 'VStack',
+          callback: (path) => transformAttributes(j, path, STACK_MODS, STACK_TODO_WARNING),
+        },
+      )
+    ) {
+      markChanged()
+    }
+  })
+}