@sanity/ui-codemod 1.0.0-alpha.1

package/src/transforms/latest/box/box.ts

@@ -0,0 +1,104 @@
+import {type API, type FileInfo, type JSXSpreadAttribute, type JSXAttribute} from 'jscodeshift'
+
+import type {BaseOptions} from '../../../types/BaseOptions'
+import {getComponentLocalNames} from '../../../utils/getComponentLocalNames'
+import {getStaticAttributeExpression} from '../../../utils/getStaticAttributeExpression'
+import {getStyledComponentAliases} from '../../../utils/getStyledComponentAliases'
+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 {transformStyledComponents} from '../../../utils/transformStyledComponents'
+import {FLEX_MODS} from '../flex/flex.mods'
+import {GRID_MODS} from '../grid/grid.mods'
+import {BOX_MODS} from './box.mods'
+
+const BOX_TODO_WARNING = 'Please double check the Box migration below'
+const FLEX_TODO_WARNING = 'Please double check the Flex migration below'
+const GRID_TODO_WARNING = 'Please double check the Grid migration below'
+const STYLED_TODO_WARNING = 'Please double check styled(Box) migration(s) 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, 'Box', options)
+    const styledAliases = getStyledComponentAliases(j, root, localNames)
+
+    if (!shouldTransformComponent(j, root, 'Box', localNames, options)) {
+      return
+    }
+
+    const replaceWithFlex = (attrs: (JSXAttribute | JSXSpreadAttribute)[]) => {
+      const display = getStaticAttributeExpression(j, attrs, 'display')
+      return display === 'flex' || display == 'inline-flex'
+    }
+
+    const replaceWithGrid = (attrs: (JSXAttribute | JSXSpreadAttribute)[]) => {
+      const display = getStaticAttributeExpression(j, attrs, 'display')
+      return display === 'grid' || display == 'inline-grid'
+    }
+
+    if (transformImport(j, root, 'Box', fromPackage, toPackage)) {
+      markChanged()
+    }
+
+    if (
+      replaceElement(
+        j,
+        root,
+        replaceWithFlex,
+        {
+          element: 'Box',
+          localNames,
+        },
+        {
+          element: 'Flex',
+          callback: (path) => transformAttributes(j, path, FLEX_MODS, FLEX_TODO_WARNING),
+        },
+      )
+    ) {
+      markChanged()
+    }
+
+    if (
+      replaceElement(
+        j,
+        root,
+        replaceWithGrid,
+        {
+          element: 'Box',
+          localNames,
+          callback: (path) => transformAttributes(j, path, BOX_MODS, BOX_TODO_WARNING),
+        },
+        {
+          element: 'Grid',
+          callback: (path) => transformAttributes(j, path, GRID_MODS, GRID_TODO_WARNING),
+        },
+      )
+    ) {
+      markChanged()
+    }
+
+    if (
+      transformStyledComponents(
+        j,
+        root,
+        styledAliases,
+        (attrs) => !replaceWithFlex(attrs) && !replaceWithGrid(attrs),
+        {
+          warning: STYLED_TODO_WARNING,
+          callback: (path) => transformAttributes(j, path, BOX_MODS, BOX_TODO_WARNING),
+        },
+      )
+    ) {
+      markChanged()
+    }
+  })
+}

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

@@ -0,0 +1,592 @@
+import type {AttributeMods} from '../../../types/AttributeMods'
+
+/** @internal */
+export const CARD_MODS: AttributeMods = {
+  alignItems: {
+    type: 'style-only',
+    style: 'alignItems',
+  },
+  border: {
+    type: 'remove',
+  },
+  borderTop: {
+    type: 'style-mapped',
+    style: 'borderTop',
+    mapping: {
+      true: '1px solid var(--tone-separator, var(--border-color-default))',
+      default: '1px solid var(--tone-separator, var(--border-color-default))',
+      muted: '1px solid var(--tone-separator, var(--border-color-default))',
+      false: 'none',
+      none: 'none',
+    },
+  },
+  borderRight: {
+    type: 'style-mapped',
+    style: 'borderRight',
+    mapping: {
+      true: '1px solid var(--tone-separator, var(--border-color-default))',
+      default: '1px solid var(--tone-separator, var(--border-color-default))',
+      muted: '1px solid var(--tone-separator, var(--border-color-default))',
+      false: 'none',
+      none: 'none',
+    },
+  },
+  borderbottom: {
+    type: 'style-mapped',
+    style: 'borderBottom',
+    mapping: {
+      true: '1px solid var(--tone-separator, var(--border-color-default))',
+      default: '1px solid var(--tone-separator, var(--border-color-default))',
+      muted: '1px solid var(--tone-separator, var(--border-color-default))',
+      false: 'none',
+      none: 'none',
+    },
+  },
+  borderLeft: {
+    type: 'style-mapped',
+    style: 'borderLeft',
+    mapping: {
+      true: '1px solid var(--tone-separator, var(--border-color-default))',
+      default: '1px solid var(--tone-separator, var(--border-color-default))',
+      muted: '1px solid var(--tone-separator, var(--border-color-default))',
+      false: 'none',
+      none: 'none',
+    },
+  },
+  borderWidth: {type: 'remove'},
+  column: {
+    type: 'style-mapped',
+    style: 'gridColumn',
+    mapping: {
+      auto: 'auto',
+      full: '1 / -1',
+      1: 'span 1 / span 1',
+      2: 'span 2 / span 2',
+      3: 'span 3 / span 3',
+      4: 'span 4 / span 4',
+      5: 'span 5 / span 5',
+      6: 'span 6 / span 6',
+      7: 'span 7 / span 7',
+      8: 'span 8 / span 8',
+      9: 'span 9 / span 9',
+      10: 'span 10 / span 10',
+      11: 'span 11 / span 11',
+      12: 'span 12 / span 12',
+    },
+  },
+  columnEnd: {
+    type: 'style-mapped',
+    style: 'gridColumnEnd',
+    mapping: {
+      auto: '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',
+    },
+  },
+  columnStart: {
+    type: 'style-mapped',
+    style: 'gridColumnStart',
+    mapping: {
+      auto: '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',
+    },
+  },
+  display: {
+    type: 'style-only',
+    style: 'display',
+  },
+  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',
+    },
+  },
+  flexDirection: {
+    type: 'style-only',
+    style: 'flexDirection',
+  },
+  flexWrap: {
+    type: 'style-only',
+    style: 'flexWrap',
+  },
+  gap: {
+    type: 'style-mapped',
+    style: 'gap',
+    mapping: {
+      0: 'var(--space-0)',
+      1: 'var(--space-1)',
+      2: 'var(--space-2)',
+      3: 'var(--space-3)',
+      4: 'var(--space-4)',
+      5: 'var(--space-5)',
+      6: 'var(--space-6)',
+      7: 'var(--space-7)',
+      8: 'var(--space-8)',
+      9: 'var(--space-9)',
+    },
+  },
+  gapX: {
+    type: 'style-mapped',
+    style: 'rowGap',
+    mapping: {
+      0: 'var(--space-0)',
+      1: 'var(--space-1)',
+      2: 'var(--space-2)',
+      3: 'var(--space-3)',
+      4: 'var(--space-4)',
+      5: 'var(--space-5)',
+      6: 'var(--space-6)',
+      7: 'var(--space-7)',
+      8: 'var(--space-8)',
+      9: 'var(--space-9)',
+    },
+  },
+  gapY: {
+    type: 'style-mapped',
+    style: 'columnGap',
+    mapping: {
+      0: 'var(--space-0)',
+      1: 'var(--space-1)',
+      2: 'var(--space-2)',
+      3: 'var(--space-3)',
+      4: 'var(--space-4)',
+      5: 'var(--space-5)',
+      6: 'var(--space-6)',
+      7: 'var(--space-7)',
+      8: 'var(--space-8)',
+      9: 'var(--space-9)',
+    },
+  },
+  gridAutoColumns: {
+    type: 'style-only',
+    style: 'gridAutoColumns',
+  },
+  gridAutoFlow: {
+    type: 'style-only',
+    style: 'gridAutoFlow',
+  },
+  gridAutoRows: {
+    type: 'style-only',
+    style: 'gridAutoRows',
+  },
+  gridColumn: {
+    type: 'style-mapped',
+    style: 'gridColumn',
+    mapping: {
+      auto: 'auto',
+      full: '1 / -1',
+      1: 'span 1 / span 1',
+      2: 'span 2 / span 2',
+      3: 'span 3 / span 3',
+      4: 'span 4 / span 4',
+      5: 'span 5 / span 5',
+      6: 'span 6 / span 6',
+      7: 'span 7 / span 7',
+      8: 'span 8 / span 8',
+      9: 'span 9 / span 9',
+      10: 'span 10 / span 10',
+      11: 'span 11 / span 11',
+      12: 'span 12 / span 12',
+    },
+  },
+  gridColumnEnd: {
+    type: 'style-mapped',
+    style: 'gridColumnEnd',
+    mapping: {
+      auto: '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',
+    },
+  },
+  gridColumnStart: {
+    type: 'style-mapped',
+    style: 'gridColumnStart',
+    mapping: {
+      auto: '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',
+    },
+  },
+  gridRow: {
+    type: 'style-mapped',
+    style: 'gridRow',
+    mapping: {
+      auto: 'auto',
+      full: '1 / -1',
+      1: 'span 1 / span 1',
+      2: 'span 2 / span 2',
+      3: 'span 3 / span 3',
+      4: 'span 4 / span 4',
+      5: 'span 5 / span 5',
+      6: 'span 6 / span 6',
+      7: 'span 7 / span 7',
+      8: 'span 8 / span 8',
+      9: 'span 9 / span 9',
+      10: 'span 10 / span 10',
+      11: 'span 11 / span 11',
+      12: 'span 12 / span 12',
+    },
+  },
+  gridRowEnd: {
+    type: 'style-mapped',
+    style: 'gridRowEnd',
+    mapping: {
+      auto: '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',
+    },
+  },
+  gridRowStart: {
+    type: 'style-mapped',
+    style: 'gridRowStart',
+    mapping: {
+      auto: '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',
+    },
+  },
+  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)',
+    },
+  },
+  height: {
+    type: 'style-mapped',
+    style: 'height',
+    mapping: {
+      fill: '100%',
+      auto: 'auto',
+      min: 'min-content',
+      max: 'max-content',
+      fit: 'fit-content',
+      stretch: 'stretch',
+    },
+  },
+  inset: {
+    type: 'style-only',
+    style: 'inset',
+  },
+  insetTop: {
+    type: 'style-only',
+    style: 'top',
+  },
+  insetRight: {
+    type: 'style-only',
+    style: 'right',
+  },
+  insetBottom: {
+    type: 'style-only',
+    style: 'bottom',
+  },
+  insetLeft: {
+    type: 'style-only',
+    style: 'left',
+  },
+  justifyContent: {
+    type: 'style-only',
+    style: 'justifyContent',
+  },
+  maxWidth: {
+    type: 'style-mapped',
+    style: 'maxWidth',
+    mapping: {
+      auto: 'none',
+      fill: '100%',
+      0: '20rem',
+      1: '40rem',
+      2: '60rem',
+      3: '80rem',
+      4: '100rem',
+      5: '120rem',
+    },
+  },
+  minHeight: {
+    type: 'style-mapped',
+    style: 'minHeight',
+    mapping: {
+      full: '100%',
+      0: '0',
+    },
+  },
+  minWidth: {
+    type: 'style-mapped',
+    style: 'minWidth',
+    mapping: {
+      full: '100%',
+      0: '0',
+      auto: 'auto',
+      min: 'min-content',
+      max: 'max-content',
+      fit: 'fit-content',
+    },
+  },
+  muted: {
+    type: 'warn-only',
+    warning: 'Please double check the Card migration below. The muted prop has been deprecated.',
+  },
+  outline: {
+    type: 'style-only',
+    style: 'outline',
+  },
+  overflow: {
+    type: 'style-only',
+    style: 'overflow',
+  },
+  overflowX: {
+    type: 'style-only',
+    style: 'overflowX',
+  },
+  overflowY: {
+    type: 'style-only',
+    style: 'overflowY',
+  },
+  padding: {
+    type: 'composite',
+    name: 'density',
+    mapping: {
+      compact: {
+        padding: 3,
+        radius: 2,
+      },
+      regular: {
+        padding: 4,
+        radius: 3,
+      },
+      loose: {
+        padding: 5,
+        radius: 4,
+      },
+    },
+  },
+  position: {
+    type: 'style-only',
+    style: 'position',
+  },
+  row: {
+    type: 'style-mapped',
+    style: 'gridRow',
+    mapping: {
+      auto: 'auto',
+      full: '1 / -1',
+      1: 'span 1 / span 1',
+      2: 'span 2 / span 2',
+      3: 'span 3 / span 3',
+      4: 'span 4 / span 4',
+      5: 'span 5 / span 5',
+      6: 'span 6 / span 6',
+      7: 'span 7 / span 7',
+      8: 'span 8 / span 8',
+      9: 'span 9 / span 9',
+      10: 'span 10 / span 10',
+      11: 'span 11 / span 11',
+      12: 'span 12 / span 12',
+    },
+  },
+  rowEnd: {
+    type: 'style-mapped',
+    style: 'gridRowEnd',
+    mapping: {
+      auto: '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',
+    },
+  },
+  rowStart: {
+    type: 'style-mapped',
+    style: 'gridRowStart',
+    mapping: {
+      auto: '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',
+    },
+  },
+  scheme: {
+    type: 'warn-only',
+    warning: 'Please double check the Card migration below. The scheme prop has been deprecated.',
+  },
+  shadow: {
+    type: 'style-mapped',
+    style: 'boxShadow',
+    mapping: {
+      0: 'var(--shadow0)',
+      1: 'var(--shadow1)',
+      2: 'var(--shadow2)',
+      3: 'var(--shadow3)',
+      4: 'var(--shadow4)',
+      5: 'var(--shadow5)',
+    },
+  },
+  sizing: {
+    type: 'style-mapped',
+    style: 'boxSizing',
+    mapping: {
+      content: 'content-box',
+      border: 'border-box',
+    },
+  },
+  textAlign: {
+    type: 'style-only',
+    style: 'textAlign',
+  },
+  tone: {
+    type: 'mapped-only',
+    mapping: {
+      default: 'none',
+      none: 'none',
+      transparent: 'neutral',
+      neutral: 'neutral',
+      brand: 'primary',
+      primary: 'primary',
+      positive: 'positive',
+      caution: 'caution',
+      critical: 'critical',
+      suggest: 'suggest',
+    },
+  },
+  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',
+    },
+  },
+}