@sanity/ui-codemod 1.0.0-alpha.1

package/src/constants/latest/layout-mods.ts

@@ -0,0 +1,422 @@
+import type {AttributeMods} from '../../types/AttributeMods'
+
+export const LAYOUT_MODS: AttributeMods = {
+  border: {
+    type: 'mapped-only',
+    mapping: {
+      none: false,
+      muted: true,
+      default: true,
+    },
+  },
+  borderTop: {
+    type: 'mapped-only',
+    mapping: {
+      none: false,
+      muted: true,
+      default: true,
+    },
+  },
+  borderRight: {
+    type: 'mapped-only',
+    mapping: {
+      none: false,
+      muted: true,
+      default: true,
+    },
+  },
+  borderBottom: {
+    type: 'mapped-only',
+    mapping: {
+      none: false,
+      muted: true,
+      default: true,
+    },
+  },
+  borderLeft: {
+    type: 'mapped-only',
+    mapping: {
+      none: false,
+      muted: true,
+      default: true,
+    },
+  },
+  borderWidth: {type: 'remove'},
+  column: {
+    type: 'rename-mapped',
+    name: '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: 'rename-mapped',
+    name: '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: 'rename-mapped',
+    name: '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',
+    },
+  },
+  flex: {
+    type: 'shorthand-mapped',
+    props: [
+      {
+        name: 'flexBasis',
+        mapping: {
+          none: 'auto',
+          auto: 'auto',
+          initial: 'auto',
+        },
+      },
+      {
+        name: 'flexGrow',
+        mapping: {
+          none: 0,
+          auto: 1,
+          initial: 0,
+          1: 1,
+          2: 2,
+          3: 3,
+          4: 4,
+          5: 5,
+          6: 6,
+          7: 7,
+          8: 8,
+          9: 9,
+          10: 10,
+          11: 11,
+          12: 12,
+        },
+      },
+      {
+        name: 'flexShrink',
+        mapping: {
+          none: 0,
+          auto: 1,
+          initial: 1,
+        },
+      },
+    ],
+  },
+  gapX: {
+    type: 'rename-only',
+    name: 'rowGap',
+  },
+  gapY: {
+    type: 'rename-only',
+    name: 'columnGap',
+  },
+  gridColumn: {
+    type: 'mapped-only',
+    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: 'mapped-only',
+    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: 'mapped-only',
+    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: 'mapped-only',
+    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: 'mapped-only',
+    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: 'mapped-only',
+    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',
+    },
+  },
+  height: {
+    type: 'mapped-only',
+    mapping: {
+      fill: '100%',
+      auto: 'auto',
+      min: 'min-content',
+      max: 'max-content',
+      fit: 'fit-content',
+      stretch: 'stretch',
+    },
+  },
+  insetTop: {
+    type: 'rename-only',
+    name: 'top',
+  },
+  insetRight: {
+    type: 'rename-only',
+    name: 'right',
+  },
+  insetBottom: {
+    type: 'rename-only',
+    name: 'bottom',
+  },
+  insetLeft: {
+    type: 'rename-only',
+    name: 'left',
+  },
+  minHeight: {
+    type: 'mapped-only',
+    mapping: {
+      full: '100%',
+      0: '0',
+    },
+  },
+  maxWidth: {
+    type: 'mapped-only',
+    mapping: {
+      auto: 'none',
+      fill: '100%',
+      0: '20rem',
+      1: '40rem',
+      2: '60rem',
+      3: '80rem',
+      4: '100rem',
+      5: '120rem',
+    },
+  },
+  minWidth: {
+    type: 'mapped-only',
+    mapping: {
+      full: '100%',
+      0: '0',
+      auto: 'auto',
+      min: 'min-content',
+      max: 'max-content',
+      fit: 'fit-content',
+    },
+  },
+  muted: {
+    type: 'rename-mapped',
+    name: 'tone',
+    mapping: {
+      true: 'neutral',
+    },
+  },
+  outline: {
+    type: 'style-only',
+    style: 'outline',
+  },
+  pointerEvents: {
+    type: 'style-only',
+    style: 'pointerEvents',
+  },
+  row: {
+    type: 'rename-mapped',
+    name: '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: 'rename-mapped',
+    name: '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: 'rename-mapped',
+    name: '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',
+    },
+  },
+  shadow: {type: 'remove'},
+  sizing: {
+    type: 'style-mapped',
+    style: 'boxSizing',
+    mapping: {
+      content: 'content-box',
+      border: 'border-box',
+    },
+  },
+  textAlign: {
+    type: 'style-only',
+    style: 'textAlign',
+  },
+  width: {
+    type: 'mapped-only',
+    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/box/box.mods.ts

@@ -0,0 +1,88 @@
+import {LAYOUT_MODS} from '../../../constants/latest/layout-mods'
+import type {AttributeMods} from '../../../types/AttributeMods'
+
+/** @internal */
+export const BOX_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',
+  },
+  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',
+    },
+  },
+}

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

@@ -0,0 +1,204 @@
+import {defineInlineTest} from '../../../utils/testUtils'
+import transform from './box'
+
+defineInlineTest(
+  transform,
+  {fromPackage: '@legacy/ui', toPackage: '@sanity/ui'},
+  `
+  import {Box} from '@legacy/ui'
+
+  <Box />
+  `,
+  `
+  import {Box} from "@sanity/ui"
+
+  <Box />
+  `,
+  'updates Box import path based on fromPackage and toPackage',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Box
+    alignItems="center"
+    flexDirection="row"
+    flexWrap="wrap"
+    justifyContent="center"
+  />
+  `,
+  `
+  <Box
+    style={{
+      alignItems: "center",
+      flexDirection: "row",
+      flexWrap: "wrap",
+      justifyContent: "center"
+    }} />
+  `,
+  'moves flex props to style',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Box
+    gridAutoColumns="auto"
+    gridAutoFlow="row"
+    gridAutoRows="auto"
+  />
+  `,
+  `
+  <Box
+    style={{
+      gridAutoColumns: "auto",
+      gridAutoFlow: "row",
+      gridAutoRows: "auto"
+    }} />
+  `,
+  'moves grid props to style',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Box
+    gridTemplateColumns={1}
+    gridTemplateRows={2}
+  />
+  `,
+  `
+  <Box
+    style={{
+      gridTemplateColumns: "repeat(1, 1fr)",
+      gridTemplateRows: "repeat(2, 1fr)"
+    }} />
+  `,
+  'moves grid props to style and updates mapped values',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  import {Box} from '@sanity/ui'
+
+  function Example() {
+    const RootBox = styled(Box)(({theme}) => ({}))
+
+    return <RootBox alignItems="center" />
+  }
+  `,
+  `
+  import {Box} from '@sanity/ui'
+
+  function Example() {
+    const RootBox = styled(Box)(({theme}) => ({}))
+
+    return (
+      <RootBox style={{
+        alignItems: "center"
+      }} />
+    );
+  }
+  `,
+  'transforms attributes on styled component',
+)
+
+defineInlineTest(
+  transform,
+  {fromPackage: '@legacy/ui', toPackage: '@sanity/ui'},
+  `
+  import {Box} from '@legacy/ui'
+
+  function Example() {
+    const RootBox = styled(Box)(({theme}) => ({}))
+
+    return <RootBox alignItems="center" />
+  }
+  `,
+  `
+  import {Box} from "@sanity/ui"
+
+  function Example() {
+    const RootBox = styled(Box)(({theme}) => ({}))
+
+    return (
+      <RootBox style={{
+        alignItems: "center"
+      }} />
+    );
+  }
+  `,
+  'transforms attributes on styled component and updates import path based on fromPackage and toPackage',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  import {Box as ImportedBox} from '@sanity/ui'
+
+  <ImportedBox alignItems="center" />
+  `,
+  `
+  import {Box as ImportedBox} from '@sanity/ui'
+
+  <ImportedBox style={{
+    alignItems: "center"
+  }} />
+  `,
+  'transforms attributes on aliased import',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Box display="flex" alignItems="center" />
+  `,
+  `
+  <Flex display="flex" alignItems="center" />
+  `,
+  'replaces Box with Flex when display is flex',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Box display="grid" gridAutoFlow="row" />
+  `,
+  `
+  <Grid display="grid" gridAutoFlow="row" />
+  `,
+  'replaces Box with Grid when display is grid',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  import {Box} from '@sanity/ui'
+
+  function Example() {
+    const RootBox = styled(Box)(({theme}) => ({}))
+
+    return <RootBox display="flex" alignItems="center" />
+  }
+  `,
+  `
+  import {Box} from '@sanity/ui'
+
+  function Example() {
+    // UI-CODEMOD TODO: Please double check styled(Box) migration(s) below
+    const RootBox = styled(Box)(({theme}) => ({}));
+
+    return <RootBox display="flex" alignItems="center" />
+  }
+  `,
+  'warns and does not transform attributes if styled Box definition should be replaced',
+)