@sanity/ui-codemod 1.0.0-alpha.1

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

@@ -0,0 +1,73 @@
+import {LAYOUT_MODS} from '../../../constants/latest/layout-mods'
+import type {AttributeMods} from '../../../types/AttributeMods'
+
+/** @internal */
+export const FLEX_MODS: AttributeMods = {
+  ...LAYOUT_MODS,
+  align: {
+    type: 'rename-only',
+    name: 'alignItems',
+  },
+  direction: {
+    type: 'rename-only',
+    name: 'flexDirection',
+  },
+  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)',
+    },
+  },
+  wrap: {
+    type: 'rename-only',
+    name: 'flexWrap',
+  },
+  justify: {
+    type: 'rename-only',
+    name: 'justifyContent',
+  },
+}

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

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

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

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

@@ -0,0 +1,109 @@
+import {LAYOUT_MODS} from '../../../constants/latest/layout-mods'
+import type {AttributeMods} from '../../../types/AttributeMods'
+
+/** @internal */
+export const GRID_MODS: AttributeMods = {
+  ...LAYOUT_MODS,
+  alignItems: {
+    type: 'style-only',
+    style: 'alignItems',
+  },
+  autoCols: {
+    type: 'rename-only',
+    name: 'gridAutoColumns',
+  },
+  autoFlow: {
+    type: 'rename-only',
+    name: 'gridAutoFlow',
+  },
+  autoRows: {
+    type: 'rename-only',
+    name: 'gridAutoRows',
+  },
+  flexDirection: {
+    type: 'style-only',
+    style: 'flexDirection',
+  },
+  flexWrap: {
+    type: 'style-only',
+    style: 'flexWrap',
+  },
+  columns: {
+    type: 'rename-mapped',
+    name: '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)',
+    },
+  },
+  gridTemplateColumns: {
+    type: 'mapped-only',
+    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: 'mapped-only',
+    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',
+  },
+  rows: {
+    type: 'rename-mapped',
+    name: '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)',
+    },
+  },
+}

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

@@ -0,0 +1,97 @@
+import {defineInlineTest} from '../../../utils/testUtils'
+import transform from './grid'
+
+defineInlineTest(
+  transform,
+  {fromPackage: '@legacy/ui', toPackage: '@sanity/ui'},
+  `
+  import {Grid} from '@legacy/ui'
+
+  <Grid />
+  `,
+  `
+  import {Grid} from "@sanity/ui"
+
+  <Grid />
+  `,
+  'updates Grid import path based on fromPackage and toPackage',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Grid
+    alignItems="center"
+    flexDirection="row"
+    flexWrap="wrap"
+    justifyContent="center"
+  />
+  `,
+  `
+  <Grid
+    style={{
+      alignItems: "center",
+      flexDirection: "row",
+      flexWrap: "wrap",
+      justifyContent: "center"
+    }} />
+  `,
+  'moves flex props to style',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Grid
+    gridTemplateColumns={1}
+    gridTemplateRows={2}
+  />
+  `,
+  `
+  <Grid
+    gridTemplateColumns="repeat(1, 1fr)"
+    gridTemplateRows="repeat(2, 1fr)"
+  />
+  `,
+  'updates grid props mapped values',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Grid
+    autoCols="auto"
+    autoFlow="row"
+    autoRows="auto"
+  />
+  `,
+  `
+  <Grid
+    gridAutoColumns="auto"
+    gridAutoFlow="row"
+    gridAutoRows="auto"
+  />
+  `,
+  'renames v3 grid props',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Grid
+    columns={1}
+    rows={2}
+  />
+  `,
+  `
+  <Grid
+    gridTemplateColumns="repeat(1, 1fr)"
+    gridTemplateRows="repeat(2, 1fr)"
+  />
+  `,
+  'updates v3 grid props mapped values',
+)

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

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

@@ -0,0 +1,70 @@
+import type {AttributeMods} from '../../../types/AttributeMods'
+
+/** @internal */
+export const HEADING_MODS: AttributeMods = {
+  as: {
+    type: 'warn-missing',
+    warning:
+      'Please double check the Heading migration below. The as prop is missing and will default to h2.',
+  },
+  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/heading/heading.test.ts

@@ -0,0 +1,87 @@
+import {defineInlineTest} from '../../../utils/testUtils'
+import transform from './heading'
+
+defineInlineTest(
+  transform,
+  {fromPackage: '@legacy/ui', toPackage: '@sanity/ui'},
+  `
+  import {Heading} from '@legacy/ui'
+
+  <Heading as="h1" />
+  `,
+  `
+  import {Heading} from "@sanity/ui"
+
+  <Heading as="h1" trim={true} />
+  `,
+  'updates Heading import path based on fromPackage and toPackage',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Heading as="h1" />
+  `,
+  `
+  <Heading as="h1" trim={true} />
+  `,
+  'adds trim prop',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Heading as="h1" flex="auto" />
+  `,
+  `
+  <Heading
+    as="h1"
+    style={{
+      flex: "1 1 auto"
+    }}
+    trim={true} />
+  `,
+  'moves flex prop to style',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Heading as="h1" textOverflow="ellipsis" />
+  `,
+  `
+  <Heading as="h1" truncate={1} trim={true} />
+  `,
+  'renames textOverflow prop and updates mapped values',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Heading as="h1" width={1} maxWidth="fill" />
+  `,
+  `
+  <Heading as="h1" style={{
+    width: "40rem",
+    maxWidth: "100%"
+  }} trim={true} />
+  `,
+  'moves width props to style and uppdates mapped values',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Heading />
+  `,
+  `
+  // UI-CODEMOD TODO: Please double check the Heading migration below. The as prop is missing and will default to h2.
+  <Heading trim={true} />
+  `,
+  'warns if as props is missing',
+)

package/src/transforms/latest/heading/heading.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 {HEADING_MODS} from './heading.mods'
+
+const TODO_WARNING = 'Please double check the Heading 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, 'Heading', options)
+
+    if (!shouldTransformComponent(j, root, 'Heading', localNames, options)) {
+      return
+    }
+
+    if (transformImport(j, root, 'Heading', fromPackage, toPackage)) {
+      markChanged()
+    }
+
+    root
+      .find(j.JSXOpeningElement, {
+        name: {type: 'JSXIdentifier', name: 'Heading'},
+      })
+      .forEach((path) => {
+        let changed = false
+
+        if (transformAttributes(j, path, HEADING_MODS, TODO_WARNING)) {
+          changed = true
+        }
+
+        if (addAttribute(j, path.node, 'trim', true)) {
+          changed = true
+        }
+
+        if (changed) {
+          markChanged()
+        }
+      })
+  })
+}