@sanity/ui-codemod 1.0.0-alpha.1

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

@@ -0,0 +1,207 @@
+import {defineInlineTest} from '../../../utils/testUtils'
+import transform from './card'
+
+defineInlineTest(
+  transform,
+  {fromPackage: '@legacy/ui', toPackage: '@sanity/ui'},
+  `
+  import {Card} from '@legacy/ui'
+
+  <Card padding={4} radius={3} border />
+  `,
+  `
+  import {Card} from "@sanity/ui"
+
+  <Card density="regular" />
+  `,
+  'updates Card import path based on fromPackage and toPackage',
+)
+
+defineInlineTest(
+  transform,
+  {fromPackage: '@legacy/ui', toPackage: '@sanity/ui'},
+  `
+  import {Card} from '@legacy/ui'
+
+  <Card />
+  `,
+  `
+  import {Box} from "@sanity/ui"
+
+  <Box />
+  `,
+  'replaces Card with Box and updates import path based on fromPackage and toPackage',
+)
+
+defineInlineTest(
+  transform,
+  {fromPackage: '@legacy/ui', toPackage: '@sanity/ui'},
+  `
+  import {Card, Text} from '@legacy/ui'
+
+  <Card />
+  `,
+  `
+  import { Text } from '@legacy/ui';
+
+  import { Box } from "@sanity/ui";
+
+  <Box />
+  `,
+  'replaces Card and updates import path with multiple specifiers',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Card padding={4} radius={3} border />
+  `,
+  `
+  <Card density="regular" />
+  `,
+  'preserves Card if padding and radius match density',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  import {Card} from '@sanity/ui'
+
+  <Card padding={2} border={true} />
+  `,
+  `
+  import {Box} from '@sanity/ui'
+
+  <Box padding={2} border={true} />
+  `,
+  'replaces Card with Box if padding and radius do not match density',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  import {Card} from '@sanity/ui'
+
+  <>
+    <Card padding={1} />
+    <Card padding={4} radius={3} border />
+  </>
+  `,
+  `
+  import { Card, Box } from '@sanity/ui';
+
+  <>
+    <Box padding={1} />
+    <Card density="regular" />
+  </>
+  `,
+  'replaces Card with Box and adds Box import',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  import {Card} from '@sanity/ui'
+
+  <Card padding={1} />
+  `,
+  `
+  import {Box} from '@sanity/ui'
+
+  <Box padding={1} />
+  `,
+  'replaces Card with Box and removes Card import',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Card padding={1}>
+    <span />
+  </Card>
+  `,
+  `
+  <Box padding={1}>
+    <span />
+  </Box>
+  `,
+  'replaces Card with Box and updates closing tag',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Card padding={4} radius={3} border sizing="content" />
+  `,
+  `
+  <Card
+    density="regular"
+    style={{
+      boxSizing: "content-box"
+    }} />
+  `,
+  'preserves Card and transforms attributes',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Card padding={1} alignItems="center" />
+  `,
+  `
+  <Box padding={1} style={{
+    alignItems: "center"
+  }} />
+  `,
+  'replaces Card with Box and transforms attributes',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Card
+    padding={3}
+    border
+    radius={2}
+    style={{ borderStyle: 'dotted' }}
+  />
+  `,
+  `
+  <Card density="compact" style={{ borderStyle: 'dotted' }} />
+  `,
+  'preserves Card and transforms attributes with style',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Card scheme="light" />
+  `,
+  `
+  // UI-CODEMOD TODO: Please double check the Card migration below. The scheme prop has been deprecated.
+  <Card scheme="light" />
+  `,
+  'warns if Card includes scheme prop',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Card muted />
+  `,
+  `
+  // UI-CODEMOD TODO: Please double check the Card migration below. The muted prop has been deprecated.
+  <Card muted />
+  `,
+  'warns if Card includes muted prop',
+)

package/src/transforms/latest/card/card.ts

@@ -0,0 +1,71 @@
+import {type API, type FileInfo} from 'jscodeshift'
+
+import type {BaseOptions} from '../../../types/BaseOptions'
+import {getAttribute} from '../../../utils/getAttribute'
+import {getComponentLocalNames} from '../../../utils/getComponentLocalNames'
+import {getStaticAttributeExpression} from '../../../utils/getStaticAttributeExpression'
+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 {BOX_MODS} from '../box/box.mods'
+import {CARD_MODS} from './card.mods'
+
+const CARD_TODO_WARNING = 'Please double check the Card migration below'
+const BOX_TODO_WARNING = 'Please double check the Box 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, 'Card', options)
+
+    if (!shouldTransformComponent(j, root, 'Card', localNames, options)) {
+      return
+    }
+
+    if (transformImport(j, root, 'Card', fromPackage, toPackage)) {
+      markChanged()
+    }
+
+    if (
+      replaceElement(
+        j,
+        root,
+        (attrs) => {
+          const density = getAttribute(attrs, 'density')
+          const muted = getAttribute(attrs, 'muted')
+          const scheme = getAttribute(attrs, 'scheme')
+          const border = getAttribute(attrs, 'border')
+          const padding = getStaticAttributeExpression(j, attrs, 'padding')
+          const radius = getStaticAttributeExpression(j, attrs, 'radius')
+
+          return !(
+            density ||
+            muted ||
+            scheme ||
+            (border && padding === 3 && radius == 2) ||
+            (border && padding === 4 && radius == 3) ||
+            (border && padding === 5 && radius == 4)
+          )
+        },
+        {
+          element: 'Card',
+          callback: (path) => transformAttributes(j, path, CARD_MODS, CARD_TODO_WARNING),
+        },
+        {
+          element: 'Box',
+          callback: (path) => transformAttributes(j, path, BOX_MODS, BOX_TODO_WARNING),
+        },
+      )
+    ) {
+      markChanged()
+    }
+  })
+}

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

@@ -0,0 +1,57 @@
+import type {AttributeMods} from '../../../types/AttributeMods'
+
+/** @internal */
+export const CODE_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',
+    },
+  },
+  maxWidth: {
+    type: 'style-mapped',
+    style: 'maxWidth',
+    mapping: {
+      auto: 'none',
+      fill: '100%',
+      0: '20rem',
+      1: '40rem',
+      2: '60rem',
+      3: '80rem',
+      4: '100rem',
+      5: '120rem',
+    },
+  },
+  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/code/code.test.ts

@@ -0,0 +1,61 @@
+import {defineInlineTest} from '../../../utils/testUtils'
+import transform from './code'
+
+defineInlineTest(
+  transform,
+  {fromPackage: '@legacy/ui', toPackage: '@sanity/ui'},
+  `
+  import {Code} from '@legacy/ui'
+
+  <Code />
+  `,
+  `
+  import {Code} from "@sanity/ui"
+
+  <Code trim={true} />
+  `,
+  'updates Code import path based on fromPackage and toPackage',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Code />
+  `,
+  `
+  <Code trim={true} />
+  `,
+  'adds trim prop',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Code flex="auto" />
+  `,
+  `
+  <Code
+    style={{
+      flex: "1 1 auto"
+    }}
+    trim={true} />
+  `,
+  'moves flex prop to style',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Code width={1} maxWidth="fill" />
+  `,
+  `
+  <Code style={{
+    width: "40rem",
+    maxWidth: "100%"
+  }} trim={true} />
+  `,
+  'moves width props to style and uppdates mapped values',
+)

package/src/transforms/latest/code/code.ts

@@ -0,0 +1,53 @@
+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 {CODE_MODS} from './code.mods'
+
+const TODO_WARNING = 'Please double check the Code 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, 'Code', options)
+
+    if (!shouldTransformComponent(j, root, 'Code', localNames, options)) {
+      return
+    }
+
+    if (transformImport(j, root, 'Code', fromPackage, toPackage)) {
+      markChanged()
+    }
+
+    root
+      .find(j.JSXOpeningElement, {
+        name: {type: 'JSXIdentifier', name: 'Code'},
+      })
+      .forEach((path) => {
+        let changed = false
+
+        if (transformAttributes(j, path, CODE_MODS, TODO_WARNING)) {
+          changed = true
+        }
+
+        if (addAttribute(j, path.node, 'trim', true)) {
+          changed = true
+        }
+
+        if (changed) {
+          markChanged()
+        }
+      })
+  })
+}

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

@@ -0,0 +1,77 @@
+import {LAYOUT_MODS} from '../../../constants/latest/layout-mods'
+import type {AttributeMods} from '../../../types/AttributeMods'
+
+/** @internal */
+export const CONTAINER_MODS: AttributeMods = {
+  ...LAYOUT_MODS,
+  alignItems: {
+    type: 'style-only',
+    style: 'alignItems',
+  },
+  flexDirection: {
+    type: 'style-only',
+    style: 'flexDirection',
+  },
+  flexWrap: {
+    type: 'style-only',
+    style: 'flexWrap',
+  },
+  gridAutoColumns: {
+    type: 'style-only',
+    style: 'gridAutoColumns',
+  },
+  gridAutoFlow: {
+    type: 'style-only',
+    style: 'gridAutoFlow',
+  },
+  gridAutoRows: {
+    type: 'style-only',
+    style: 'gridAutoRows',
+  },
+  gridTemplateColumns: {
+    type: 'style-mapped',
+    style: 'gridTemplateColumns',
+    mapping: {
+      0: '0px',
+      1: 'repeat(1, 1fr)',
+      2: 'repeat(2, 1fr)',
+      3: 'repeat(3, 1fr)',
+      4: 'repeat(4, 1fr)',
+      5: 'repeat(5, 1fr)',
+      6: 'repeat(6, 1fr)',
+      7: 'repeat(7, 1fr)',
+      8: 'repeat(8, 1fr)',
+      9: 'repeat(9, 1fr)',
+      10: 'repeat(10, 1fr)',
+      11: 'repeat(11, 1fr)',
+      12: 'repeat(12, 1fr)',
+    },
+  },
+  gridTemplateRows: {
+    type: 'style-mapped',
+    style: 'gridTemplateRows',
+    mapping: {
+      0: '0px',
+      1: 'repeat(1, 1fr)',
+      2: 'repeat(2, 1fr)',
+      3: 'repeat(3, 1fr)',
+      4: 'repeat(4, 1fr)',
+      5: 'repeat(5, 1fr)',
+      6: 'repeat(6, 1fr)',
+      7: 'repeat(7, 1fr)',
+      8: 'repeat(8, 1fr)',
+      9: 'repeat(9, 1fr)',
+      10: 'repeat(10, 1fr)',
+      11: 'repeat(11, 1fr)',
+      12: 'repeat(12, 1fr)',
+    },
+  },
+  justifyContent: {
+    type: 'style-only',
+    style: 'justifyContent',
+  },
+  width: {
+    type: 'rename-only',
+    name: 'size',
+  },
+}

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

@@ -0,0 +1,105 @@
+import {defineInlineTest} from '../../../utils/testUtils'
+import transform from './container'
+
+defineInlineTest(
+  transform,
+  {fromPackage: '@legacy/ui', toPackage: '@sanity/ui'},
+  `
+  import {Container} from '@legacy/ui'
+
+  <Container />
+  `,
+  `
+  import {Container} from "@sanity/ui"
+
+  <Container />
+  `,
+  'updates Container import path based on fromPackage and toPackage',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Container width={2} />
+  `,
+  `
+  <Container size={2} />
+  `,
+  'renames width to size',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Container width={[1, 2, 3]} />
+  `,
+  `
+  <Container size={[1, 2, 3]} />
+  `,
+  'renames responsive width to size',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Container
+    alignItems="center"
+    flexDirection="row"
+    flexWrap="wrap"
+    justifyContent="center"
+  />
+  `,
+  `
+  <Container
+    style={{
+      alignItems: "center",
+      flexDirection: "row",
+      flexWrap: "wrap",
+      justifyContent: "center"
+    }} />
+  `,
+  'moves flex props to style',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Container
+    gridAutoColumns="auto"
+    gridAutoFlow="row"
+    gridAutoRows="auto"
+  />
+  `,
+  `
+  <Container
+    style={{
+      gridAutoColumns: "auto",
+      gridAutoFlow: "row",
+      gridAutoRows: "auto"
+    }} />
+  `,
+  'moves grid props to style',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Container
+    gridTemplateColumns={1}
+    gridTemplateRows={2}
+  />
+  `,
+  `
+  <Container
+    style={{
+      gridTemplateColumns: "repeat(1, 1fr)",
+      gridTemplateRows: "repeat(2, 1fr)"
+    }} />
+  `,
+  'moves grid props to style and updates mapped values',
+)

package/src/transforms/latest/container/container.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 {CONTAINER_MODS} from './container.mods'
+
+const TODO_WARNING = 'Please double check the Container 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, 'Container', options)
+
+    if (!shouldTransformComponent(j, root, 'Container', localNames, options)) {
+      return
+    }
+
+    if (transformImport(j, root, 'Container', fromPackage, toPackage)) {
+      markChanged()
+    }
+
+    root
+      .find(j.JSXOpeningElement, {
+        name: {type: 'JSXIdentifier', name: 'Container'},
+      })
+      .forEach((path) => {
+        if (transformAttributes(j, path, CONTAINER_MODS, TODO_WARNING)) {
+          markChanged()
+        }
+      })
+  })
+}