@sanity/ui-codemod 1.0.0-alpha.7 → 1.0.0-alpha.9

package/dist/transforms/latest/badge/badge.js

@@ -0,0 +1,118 @@
+import "jscodeshift";
+import { addAttribute } from "../../../_chunks-es/addAttribute.js";
+import { transformComponent, getComponentLocalNames, getStyledComponentAliases, shouldTransformComponent, transformImport, transformStyledComponents, transformAttributes, insertTodoWarning } from "../../../_chunks-es/transformStyledComponents.js";
+const BADGE_MODS = {
+  fontSize: {
+    type: "warn-only",
+    warning: "Please double check the Badge migration below. The fontSize prop is no longer supported. Badge renders its text prop at size 1."
+  },
+  mode: { type: "remove" },
+  paddingX: {
+    type: "style-mapped",
+    style: "paddingInline",
+    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)"
+    }
+  },
+  paddingY: {
+    type: "style-mapped",
+    style: "paddingBlock",
+    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)"
+    }
+  },
+  padding: {
+    type: "style-mapped",
+    style: "padding",
+    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)"
+    }
+  },
+  radius: {
+    type: "style-mapped",
+    style: "borderRadius",
+    mapping: {
+      0: "var(--radius-0)",
+      1: "var(--radius-1)",
+      2: "var(--radius-2)",
+      3: "var(--radius-3)",
+      4: "var(--radius-4)",
+      5: "var(--radius-5)",
+      6: "var(--radius-6)",
+      full: "var(--radius-round)"
+    }
+  },
+  tone: {
+    type: "mapped-only",
+    mapping: {
+      default: "neutral",
+      neutral: "neutral",
+      suggest: "suggest",
+      positive: "positive",
+      caution: "caution",
+      critical: "critical"
+    }
+  }
+}, TODO_WARNING = "Please double check the Badge migration below", CHILDREN_TODO_WARNING = "Please double check the Badge migration below. Move the children into the text prop.";
+function transform(fileInfo, api, options) {
+  const { fromPackage, toPackage } = options || {};
+  return transformComponent(fileInfo, api, ({ j, root, markChanged }) => {
+    const localNames = getComponentLocalNames(j, root, "Badge", options), styledAliases = getStyledComponentAliases(
+      j,
+      root,
+      "Badge",
+      fileInfo.path,
+      localNames,
+      options
+    );
+    if (!shouldTransformComponent(j, root, "Badge", localNames, options, styledAliases))
+      return;
+    transformImport(j, root, "Badge", fromPackage, toPackage) && markChanged();
+    const warnOnChildren = (path) => {
+      const parentNode = path.parent?.node, element = parentNode?.type === "JSXElement" ? parentNode : void 0;
+      return element ? (element.children ?? []).some(
+        (child) => !(child.type === "JSXText" && child.value.trim() === "")
+      ) && insertTodoWarning(j, path, CHILDREN_TODO_WARNING) : !1;
+    }, migrate = (path) => {
+      let changed = !1;
+      return transformAttributes(j, path, BADGE_MODS, TODO_WARNING) && (changed = !0), addAttribute(j, path.node, "as", "div") && (changed = !0), warnOnChildren(path) && (changed = !0), changed;
+    };
+    root.find(j.JSXOpeningElement).forEach((path) => {
+      const name = path.node.name;
+      name.type !== "JSXIdentifier" || !localNames.has(name.name) || migrate(path) && markChanged();
+    }), transformStyledComponents(j, root, styledAliases, () => !0, {
+      callback: (path) => migrate(path)
+    }) && markChanged();
+  });
+}
+export {
+  transform as default
+};
+//# sourceMappingURL=badge.js.map

package/dist/transforms/latest/badge/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sources":["../../../../src/transforms/latest/badge/badge.mods.ts","../../../../src/transforms/latest/badge/badge.ts"],"sourcesContent":["import type {AttributeMods} from '../../../types/AttributeMods'\n\n/** @internal */\nexport const BADGE_MODS: AttributeMods = {\n  fontSize: {\n    type: 'warn-only',\n    warning:\n      'Please double check the Badge migration below. The fontSize prop is no longer supported. Badge renders its text prop at size 1.',\n  },\n  mode: {type: 'remove'},\n  paddingX: {\n    type: 'style-mapped',\n    style: 'paddingInline',\n    mapping: {\n      0: 'var(--space-0)',\n      1: 'var(--space-1)',\n      2: 'var(--space-2)',\n      3: 'var(--space-3)',\n      4: 'var(--space-4)',\n      5: 'var(--space-5)',\n      6: 'var(--space-6)',\n      7: 'var(--space-7)',\n      8: 'var(--space-8)',\n      9: 'var(--space-9)',\n    },\n  },\n  paddingY: {\n    type: 'style-mapped',\n    style: 'paddingBlock',\n    mapping: {\n      0: 'var(--space-0)',\n      1: 'var(--space-1)',\n      2: 'var(--space-2)',\n      3: 'var(--space-3)',\n      4: 'var(--space-4)',\n      5: 'var(--space-5)',\n      6: 'var(--space-6)',\n      7: 'var(--space-7)',\n      8: 'var(--space-8)',\n      9: 'var(--space-9)',\n    },\n  },\n  padding: {\n    type: 'style-mapped',\n    style: 'padding',\n    mapping: {\n      0: 'var(--space-0)',\n      1: 'var(--space-1)',\n      2: 'var(--space-2)',\n      3: 'var(--space-3)',\n      4: 'var(--space-4)',\n      5: 'var(--space-5)',\n      6: 'var(--space-6)',\n      7: 'var(--space-7)',\n      8: 'var(--space-8)',\n      9: 'var(--space-9)',\n    },\n  },\n  radius: {\n    type: 'style-mapped',\n    style: 'borderRadius',\n    mapping: {\n      0: 'var(--radius-0)',\n      1: 'var(--radius-1)',\n      2: 'var(--radius-2)',\n      3: 'var(--radius-3)',\n      4: 'var(--radius-4)',\n      5: 'var(--radius-5)',\n      6: 'var(--radius-6)',\n      full: 'var(--radius-round)',\n    },\n  },\n  tone: {\n    type: 'mapped-only',\n    mapping: {\n      default: 'neutral',\n      neutral: 'neutral',\n      suggest: 'suggest',\n      positive: 'positive',\n      caution: 'caution',\n      critical: 'critical',\n    },\n  },\n}\n","import {\n  type API,\n  type ASTPath,\n  type FileInfo,\n  type JSXElement,\n  type JSXOpeningElement,\n} from 'jscodeshift'\n\nimport type {BaseOptions} from '../../../types/BaseOptions'\nimport {addAttribute} from '../../../utils/addAttribute'\nimport {getComponentLocalNames} from '../../../utils/getComponentLocalNames'\nimport {getStyledComponentAliases} from '../../../utils/getStyledComponentAliases'\nimport {insertTodoWarning} from '../../../utils/insertTodoWarning'\nimport {shouldTransformComponent} from '../../../utils/shouldTransformComponent'\nimport {transformAttributes} from '../../../utils/transformAttributes'\nimport {transformComponent} from '../../../utils/transformComponent'\nimport {transformImport} from '../../../utils/transformImport'\nimport {transformStyledComponents} from '../../../utils/transformStyledComponents'\nimport {BADGE_MODS} from './badge.mods'\n\nconst TODO_WARNING = 'Please double check the Badge migration below'\nconst CHILDREN_TODO_WARNING =\n  'Please double check the Badge migration below. Move the children into the text prop.'\n\n/** @internal */\nexport default function transform(\n  fileInfo: FileInfo,\n  api: API,\n  options: BaseOptions,\n): string | undefined {\n  const {fromPackage, toPackage} = options || {}\n\n  return transformComponent(fileInfo, api, ({j, root, markChanged}) => {\n    const localNames = getComponentLocalNames(j, root, 'Badge', options)\n    const styledAliases = getStyledComponentAliases(\n      j,\n      root,\n      'Badge',\n      fileInfo.path,\n      localNames,\n      options,\n    )\n\n    if (!shouldTransformComponent(j, root, 'Badge', localNames, options, styledAliases)) {\n      return\n    }\n\n    if (transformImport(j, root, 'Badge', fromPackage, toPackage)) {\n      markChanged()\n    }\n\n    const warnOnChildren = (path: ASTPath<JSXOpeningElement>): boolean => {\n      const parentNode = path.parent?.node\n      const element: JSXElement | undefined =\n        parentNode?.type === 'JSXElement' ? parentNode : undefined\n\n      if (!element) {\n        return false\n      }\n\n      const hasChildren = (element.children ?? []).some(\n        (child) => !(child.type === 'JSXText' && child.value.trim() === ''),\n      )\n\n      return hasChildren && insertTodoWarning(j, path, CHILDREN_TODO_WARNING)\n    }\n\n    const migrate = (path: ASTPath<JSXOpeningElement>): boolean => {\n      let changed = false\n\n      if (transformAttributes(j, path, BADGE_MODS, TODO_WARNING)) {\n        changed = true\n      }\n\n      if (addAttribute(j, path.node, 'as', 'div')) {\n        changed = true\n      }\n\n      if (warnOnChildren(path)) {\n        changed = true\n      }\n\n      return changed\n    }\n\n    root.find(j.JSXOpeningElement).forEach((path) => {\n      const name = path.node.name\n\n      if (name.type !== 'JSXIdentifier' || !localNames.has(name.name)) {\n        return\n      }\n\n      if (migrate(path)) {\n        markChanged()\n      }\n    })\n\n    if (\n      transformStyledComponents(j, root, styledAliases, () => true, {\n        callback: (path) => migrate(path),\n      })\n    ) {\n      markChanged()\n    }\n  })\n}\n"],"names":[],"mappings":"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"}

package/dist/transforms/latest/box/box.js

@@ -1,5 +1,5 @@
 import "jscodeshift";
-import { transformComponent, getComponentLocalNames, getStyledComponentAliases, shouldTransformComponent, transformImport, transformAttributes, transformStyledComponents, getStaticAttributeExpression } from "../../../_chunks-es/transformStyledComponents.js";
+import { transformComponent, getComponentLocalNames, getStyledComponentAliases, shouldTransformComponent, transformImport, transformStyledComponents, transformAttributes, getStaticAttributeExpression } from "../../../_chunks-es/transformStyledComponents.js";
 import { replaceElement } from "../../../_chunks-es/replaceElement.js";
 import { FLEX_MODS } from "../../../_chunks-es/flex.mods.js";
 import { GRID_MODS } from "../../../_chunks-es/grid.mods.js";

package/dist/transforms/latest/stack/stack.js

@@ -40,7 +40,7 @@ function transform(fileInfo, api, options) {
         element: "Flex",
         callback: (path) => {
           let changed = !1;
-          return addAttribute(j, path.node, "flexDirection", "column") && (changed = !0), transformAttributes(j, path, FLEX_MODS, FLEX_TODO_WARNING) && (changed = !0), changed;
+          return transformAttributes(j, path, FLEX_MODS, FLEX_TODO_WARNING) && (changed = !0), addAttribute(j, path.node, "flexDirection", "column") && (changed = !0), addAttribute(j, path.node, "flexShrink", 0) && (changed = !0), changed;
         }
       }
     ) && markChanged(), replaceElement(

package/dist/transforms/latest/stack/stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"stack.js","sources":["../../../../src/transforms/latest/stack/stack.mods.ts","../../../../src/transforms/latest/stack/stack.ts"],"sourcesContent":["import type {AttributeMods} from '../../../types/AttributeMods'\n\n/** @internal */\nexport const STACK_MODS: AttributeMods = {\n  sizing: {\n    type: 'remove',\n  },\n  space: {\n    type: 'rename-only',\n    name: 'gap',\n  },\n}\n","import {type API, type FileInfo, type JSXElement} from 'jscodeshift'\n\nimport type {BaseOptions} from '../../../types/BaseOptions'\nimport {addAttribute} from '../../../utils/addAttribute'\nimport {getComponentLocalNames} from '../../../utils/getComponentLocalNames'\nimport {getStyledComponentAliases} from '../../../utils/getStyledComponentAliases'\nimport {replaceElement} from '../../../utils/replaceElement'\nimport {shouldTransformComponent} from '../../../utils/shouldTransformComponent'\nimport {transformAttributes} from '../../../utils/transformAttributes'\nimport {transformComponent} from '../../../utils/transformComponent'\nimport {transformImport} from '../../../utils/transformImport'\nimport {transformStyledComponents} from '../../../utils/transformStyledComponents'\nimport {FLEX_MODS} from '../flex/flex.mods'\nimport {STACK_MODS} from './stack.mods'\n\nconst STACK_TODO_WARNING = 'Please double check the Stack migration below'\nconst FLEX_TODO_WARNING = 'Please double check the Flex migration below'\nconst STYLED_TODO_WARNING = 'Please double check styled(Stack) migration below'\n\nfunction replaceWithFlex(attrs: JSXElement['openingElement']['attributes']) {\n  if (!attrs) {\n    return false\n  }\n\n  return attrs.some(\n    (attr) =>\n      attr.type === 'JSXAttribute' &&\n      attr.name.type === 'JSXIdentifier' &&\n      (attr.name.name.startsWith('padding') ||\n        attr.name.name.startsWith('margin') ||\n        attr.name.name.startsWith('overflow') ||\n        attr.name.name.startsWith('flex') ||\n        attr.name.name.endsWith('height') ||\n        attr.name.name.endsWith('width')),\n  )\n}\n\n/** @internal */\nexport default function transform(\n  fileInfo: FileInfo,\n  api: API,\n  options?: BaseOptions,\n): string | undefined {\n  const {fromPackage, toPackage} = options || {}\n\n  return transformComponent(fileInfo, api, ({j, root, markChanged}) => {\n    const localNames = getComponentLocalNames(j, root, 'Stack', options)\n    const styledAliases = getStyledComponentAliases(\n      j,\n      root,\n      'Stack',\n      fileInfo.path,\n      localNames,\n      options,\n    )\n\n    if (!shouldTransformComponent(j, root, 'Stack', localNames, options, styledAliases)) {\n      return\n    }\n\n    if (transformImport(j, root, 'Stack', fromPackage, toPackage)) {\n      markChanged()\n    }\n\n    if (\n      replaceElement(\n        j,\n        root,\n        (attrs) => replaceWithFlex(attrs),\n        {\n          element: 'Stack',\n          localNames,\n        },\n        {\n          element: 'Flex',\n          callback: (path) => {\n            let changed = false\n\n            if (addAttribute(j, path.node, 'flexDirection', 'column')) {\n              changed = true\n            }\n\n            if (transformAttributes(j, path, FLEX_MODS, FLEX_TODO_WARNING)) {\n              changed = true\n            }\n\n            return changed\n          },\n        },\n      )\n    ) {\n      markChanged()\n    }\n\n    if (\n      replaceElement(\n        j,\n        root,\n        (attrs) => {\n          return !replaceWithFlex(attrs)\n        },\n        {\n          element: 'Stack',\n          localNames,\n        },\n        {\n          element: 'VStack',\n          callback: (path) => transformAttributes(j, path, STACK_MODS, STACK_TODO_WARNING),\n        },\n      )\n    ) {\n      markChanged()\n    }\n\n    if (\n      transformStyledComponents(j, root, styledAliases, (attrs) => !replaceWithFlex(attrs), {\n        warning: STYLED_TODO_WARNING,\n        callback: (path) => transformAttributes(j, path, STACK_MODS, STACK_TODO_WARNING),\n      })\n    ) {\n      markChanged()\n    }\n  })\n}\n"],"names":[],"mappings":";;;;;AAGO,MAAM,aAA4B;AAAA,EACvC,QAAQ;AAAA,IACN,MAAM;AAAA,EAAA;AAAA,EAER,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,EAAA;AAEV,GCIM,qBAAqB,iDACrB,oBAAoB,gDACpB,sBAAsB;AAE5B,SAAS,gBAAgB,OAAmD;AAC1E,SAAK,QAIE,MAAM;AAAA,IACX,CAAC,SACC,KAAK,SAAS,kBACd,KAAK,KAAK,SAAS,oBAClB,KAAK,KAAK,KAAK,WAAW,SAAS,KAClC,KAAK,KAAK,KAAK,WAAW,QAAQ,KAClC,KAAK,KAAK,KAAK,WAAW,UAAU,KACpC,KAAK,KAAK,KAAK,WAAW,MAAM,KAChC,KAAK,KAAK,KAAK,SAAS,QAAQ,KAChC,KAAK,KAAK,KAAK,SAAS,OAAO;AAAA,EAAA,IAZ5B;AAcX;AAGA,SAAwB,UACtB,UACA,KACA,SACoB;AACpB,QAAM,EAAC,aAAa,UAAA,IAAa,WAAW,CAAA;AAE5C,SAAO,mBAAmB,UAAU,KAAK,CAAC,EAAC,GAAG,MAAM,kBAAiB;AACnE,UAAM,aAAa,uBAAuB,GAAG,MAAM,SAAS,OAAO,GAC7D,gBAAgB;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAGG,6BAAyB,GAAG,MAAM,SAAS,YAAY,SAAS,aAAa,MAI9E,gBAAgB,GAAG,MAAM,SAAS,aAAa,SAAS,KAC1D,eAIA;AAAA,MACE;AAAA,MACA;AAAA,MACA,CAAC,UAAU,gBAAgB,KAAK;AAAA,MAChC;AAAA,QACE,SAAS;AAAA,QACT;AAAA,MAAA;AAAA,MAEF;AAAA,QACE,SAAS;AAAA,QACT,UAAU,CAAC,SAAS;AAClB,cAAI,UAAU;AAEd,iBAAI,aAAa,GAAG,KAAK,MAAM,iBAAiB,QAAQ,MACtD,UAAU,KAGR,oBAAoB,GAAG,MAAM,WAAW,iBAAiB,MAC3D,UAAU,KAGL;AAAA,QACT;AAAA,MAAA;AAAA,IACF,KAGF,eAIA;AAAA,MACE;AAAA,MACA;AAAA,MACA,CAAC,UACQ,CAAC,gBAAgB,KAAK;AAAA,MAE/B;AAAA,QACE,SAAS;AAAA,QACT;AAAA,MAAA;AAAA,MAEF;AAAA,QACE,SAAS;AAAA,QACT,UAAU,CAAC,SAAS,oBAAoB,GAAG,MAAM,YAAY,kBAAkB;AAAA,MAAA;AAAA,IACjF,KAGF,YAAA,GAIA,0BAA0B,GAAG,MAAM,eAAe,CAAC,UAAU,CAAC,gBAAgB,KAAK,GAAG;AAAA,MACpF,SAAS;AAAA,MACT,UAAU,CAAC,SAAS,oBAAoB,GAAG,MAAM,YAAY,kBAAkB;AAAA,IAAA,CAChF,KAED,YAAA;AAAA,EAEJ,CAAC;AACH;"}
+{"version":3,"file":"stack.js","sources":["../../../../src/transforms/latest/stack/stack.mods.ts","../../../../src/transforms/latest/stack/stack.ts"],"sourcesContent":["import type {AttributeMods} from '../../../types/AttributeMods'\n\n/** @internal */\nexport const STACK_MODS: AttributeMods = {\n  sizing: {\n    type: 'remove',\n  },\n  space: {\n    type: 'rename-only',\n    name: 'gap',\n  },\n}\n","import {type API, type FileInfo, type JSXElement} from 'jscodeshift'\n\nimport type {BaseOptions} from '../../../types/BaseOptions'\nimport {addAttribute} from '../../../utils/addAttribute'\nimport {getComponentLocalNames} from '../../../utils/getComponentLocalNames'\nimport {getStyledComponentAliases} from '../../../utils/getStyledComponentAliases'\nimport {replaceElement} from '../../../utils/replaceElement'\nimport {shouldTransformComponent} from '../../../utils/shouldTransformComponent'\nimport {transformAttributes} from '../../../utils/transformAttributes'\nimport {transformComponent} from '../../../utils/transformComponent'\nimport {transformImport} from '../../../utils/transformImport'\nimport {transformStyledComponents} from '../../../utils/transformStyledComponents'\nimport {FLEX_MODS} from '../flex/flex.mods'\nimport {STACK_MODS} from './stack.mods'\n\nconst STACK_TODO_WARNING = 'Please double check the Stack migration below'\nconst FLEX_TODO_WARNING = 'Please double check the Flex migration below'\nconst STYLED_TODO_WARNING = 'Please double check styled(Stack) migration below'\n\nfunction replaceWithFlex(attrs: JSXElement['openingElement']['attributes']) {\n  if (!attrs) {\n    return false\n  }\n\n  return attrs.some(\n    (attr) =>\n      attr.type === 'JSXAttribute' &&\n      attr.name.type === 'JSXIdentifier' &&\n      (attr.name.name.startsWith('padding') ||\n        attr.name.name.startsWith('margin') ||\n        attr.name.name.startsWith('overflow') ||\n        attr.name.name.startsWith('flex') ||\n        attr.name.name.endsWith('height') ||\n        attr.name.name.endsWith('width')),\n  )\n}\n\n/** @internal */\nexport default function transform(\n  fileInfo: FileInfo,\n  api: API,\n  options?: BaseOptions,\n): string | undefined {\n  const {fromPackage, toPackage} = options || {}\n\n  return transformComponent(fileInfo, api, ({j, root, markChanged}) => {\n    const localNames = getComponentLocalNames(j, root, 'Stack', options)\n    const styledAliases = getStyledComponentAliases(\n      j,\n      root,\n      'Stack',\n      fileInfo.path,\n      localNames,\n      options,\n    )\n\n    if (!shouldTransformComponent(j, root, 'Stack', localNames, options, styledAliases)) {\n      return\n    }\n\n    if (transformImport(j, root, 'Stack', fromPackage, toPackage)) {\n      markChanged()\n    }\n\n    if (\n      replaceElement(\n        j,\n        root,\n        (attrs) => replaceWithFlex(attrs),\n        {\n          element: 'Stack',\n          localNames,\n        },\n        {\n          element: 'Flex',\n          callback: (path) => {\n            let changed = false\n\n            if (transformAttributes(j, path, FLEX_MODS, FLEX_TODO_WARNING)) {\n              changed = true\n            }\n\n            if (addAttribute(j, path.node, 'flexDirection', 'column')) {\n              changed = true\n            }\n\n            if (addAttribute(j, path.node, 'flexShrink', 0)) {\n              changed = true\n            }\n\n            return changed\n          },\n        },\n      )\n    ) {\n      markChanged()\n    }\n\n    if (\n      replaceElement(\n        j,\n        root,\n        (attrs) => {\n          return !replaceWithFlex(attrs)\n        },\n        {\n          element: 'Stack',\n          localNames,\n        },\n        {\n          element: 'VStack',\n          callback: (path) => transformAttributes(j, path, STACK_MODS, STACK_TODO_WARNING),\n        },\n      )\n    ) {\n      markChanged()\n    }\n\n    if (\n      transformStyledComponents(j, root, styledAliases, (attrs) => !replaceWithFlex(attrs), {\n        warning: STYLED_TODO_WARNING,\n        callback: (path) => transformAttributes(j, path, STACK_MODS, STACK_TODO_WARNING),\n      })\n    ) {\n      markChanged()\n    }\n  })\n}\n"],"names":[],"mappings":";;;;;AAGO,MAAM,aAA4B;AAAA,EACvC,QAAQ;AAAA,IACN,MAAM;AAAA,EAAA;AAAA,EAER,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,EAAA;AAEV,GCIM,qBAAqB,iDACrB,oBAAoB,gDACpB,sBAAsB;AAE5B,SAAS,gBAAgB,OAAmD;AAC1E,SAAK,QAIE,MAAM;AAAA,IACX,CAAC,SACC,KAAK,SAAS,kBACd,KAAK,KAAK,SAAS,oBAClB,KAAK,KAAK,KAAK,WAAW,SAAS,KAClC,KAAK,KAAK,KAAK,WAAW,QAAQ,KAClC,KAAK,KAAK,KAAK,WAAW,UAAU,KACpC,KAAK,KAAK,KAAK,WAAW,MAAM,KAChC,KAAK,KAAK,KAAK,SAAS,QAAQ,KAChC,KAAK,KAAK,KAAK,SAAS,OAAO;AAAA,EAAA,IAZ5B;AAcX;AAGA,SAAwB,UACtB,UACA,KACA,SACoB;AACpB,QAAM,EAAC,aAAa,UAAA,IAAa,WAAW,CAAA;AAE5C,SAAO,mBAAmB,UAAU,KAAK,CAAC,EAAC,GAAG,MAAM,kBAAiB;AACnE,UAAM,aAAa,uBAAuB,GAAG,MAAM,SAAS,OAAO,GAC7D,gBAAgB;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAGG,6BAAyB,GAAG,MAAM,SAAS,YAAY,SAAS,aAAa,MAI9E,gBAAgB,GAAG,MAAM,SAAS,aAAa,SAAS,KAC1D,eAIA;AAAA,MACE;AAAA,MACA;AAAA,MACA,CAAC,UAAU,gBAAgB,KAAK;AAAA,MAChC;AAAA,QACE,SAAS;AAAA,QACT;AAAA,MAAA;AAAA,MAEF;AAAA,QACE,SAAS;AAAA,QACT,UAAU,CAAC,SAAS;AAClB,cAAI,UAAU;AAEd,iBAAI,oBAAoB,GAAG,MAAM,WAAW,iBAAiB,MAC3D,UAAU,KAGR,aAAa,GAAG,KAAK,MAAM,iBAAiB,QAAQ,MACtD,UAAU,KAGR,aAAa,GAAG,KAAK,MAAM,cAAc,CAAC,MAC5C,UAAU,KAGL;AAAA,QACT;AAAA,MAAA;AAAA,IACF,KAGF,eAIA;AAAA,MACE;AAAA,MACA;AAAA,MACA,CAAC,UACQ,CAAC,gBAAgB,KAAK;AAAA,MAE/B;AAAA,QACE,SAAS;AAAA,QACT;AAAA,MAAA;AAAA,MAEF;AAAA,QACE,SAAS;AAAA,QACT,UAAU,CAAC,SAAS,oBAAoB,GAAG,MAAM,YAAY,kBAAkB;AAAA,MAAA;AAAA,IACjF,KAGF,YAAA,GAIA,0BAA0B,GAAG,MAAM,eAAe,CAAC,UAAU,CAAC,gBAAgB,KAAK,GAAG;AAAA,MACpF,SAAS;AAAA,MACT,UAAU,CAAC,SAAS,oBAAoB,GAAG,MAAM,YAAY,kBAAkB;AAAA,IAAA,CAChF,KAED,YAAA;AAAA,EAEJ,CAAC;AACH;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui-codemod",
-  "version": "1.0.0-alpha.7",
+  "version": "1.0.0-alpha.9",
   "description": "",
   "keywords": [],
   "license": "ISC",
@@ -15,6 +15,8 @@
   "type": "module",
   "sideEffects": false,
   "exports": {
+    "./transforms/latest/badge": "./dist/transforms/latest/badge/badge.js",
+    "./latest/badge": "./dist/commands/latest/badge.js",
     "./transforms/latest/box": "./dist/transforms/latest/box/box.js",
     "./latest/box": "./dist/commands/latest/box.js",
     "./transforms/latest/card": "./dist/transforms/latest/card/card.js",

package/src/commands/latest/badge.ts

@@ -0,0 +1,21 @@
+import {run} from 'jscodeshift/src/Runner.js'
+
+import {BaseCommand} from '../../baseCommand'
+import {getTransformPath} from '../../utils/getTransformPath'
+
+/** @public */
+export default class Badge extends BaseCommand<typeof Badge> {
+  static override description = 'Transform Badge component'
+
+  public async run(): Promise<void> {
+    const {flags} = await this.parse(Badge)
+    const {paths, ...restFlags} = flags
+    const transformPath = getTransformPath(this.config.root, 'latest', 'badge')
+
+    await run(transformPath, paths, {
+      babel: true,
+      parser: 'tsx',
+      ...restFlags,
+    })
+  }
+}

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

@@ -0,0 +1,84 @@
+import type {AttributeMods} from '../../../types/AttributeMods'
+
+/** @internal */
+export const BADGE_MODS: AttributeMods = {
+  fontSize: {
+    type: 'warn-only',
+    warning:
+      'Please double check the Badge migration below. The fontSize prop is no longer supported. Badge renders its text prop at size 1.',
+  },
+  mode: {type: 'remove'},
+  paddingX: {
+    type: 'style-mapped',
+    style: 'paddingInline',
+    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)',
+    },
+  },
+  paddingY: {
+    type: 'style-mapped',
+    style: 'paddingBlock',
+    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)',
+    },
+  },
+  padding: {
+    type: 'style-mapped',
+    style: 'padding',
+    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)',
+    },
+  },
+  radius: {
+    type: 'style-mapped',
+    style: 'borderRadius',
+    mapping: {
+      0: 'var(--radius-0)',
+      1: 'var(--radius-1)',
+      2: 'var(--radius-2)',
+      3: 'var(--radius-3)',
+      4: 'var(--radius-4)',
+      5: 'var(--radius-5)',
+      6: 'var(--radius-6)',
+      full: 'var(--radius-round)',
+    },
+  },
+  tone: {
+    type: 'mapped-only',
+    mapping: {
+      default: 'neutral',
+      neutral: 'neutral',
+      suggest: 'suggest',
+      positive: 'positive',
+      caution: 'caution',
+      critical: 'critical',
+    },
+  },
+}

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

@@ -0,0 +1,264 @@
+import {expect} from 'vitest'
+
+import {defineCrossFileTest, defineInlineTest} from '../../../utils/testUtils'
+import transform from './badge'
+
+defineInlineTest(
+  transform,
+  {fromPackage: '@legacy/ui', toPackage: '@sanity/ui'},
+  `
+  import {Badge} from '@legacy/ui'
+
+  <Badge />
+  `,
+  `
+  import {Badge} from "@sanity/ui"
+
+  <Badge as="div" />
+  `,
+  'updates Badge import path based on fromPackage and toPackage',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Badge />
+  `,
+  `
+  <Badge as="div" />
+  `,
+  'adds as prop',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Badge tone="default" />
+  `,
+  `
+  <Badge tone="neutral" as="div" />
+  `,
+  'maps the default tone to neutral',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Badge mode="outline" />
+  `,
+  `
+  <Badge as="div" />
+  `,
+  'removes the deprecated mode prop',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Badge radius={3} />
+  `,
+  `
+  <Badge
+    style={{
+      borderRadius: "var(--radius-3)"
+    }}
+    as="div" />
+  `,
+  'moves radius prop to style and updates mapped value',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Badge radius="full" />
+  `,
+  `
+  <Badge
+    style={{
+      borderRadius: "var(--radius-round)"
+    }}
+    as="div" />
+  `,
+  'maps the full radius to the round radius variable',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Badge paddingX={2} paddingY={1} />
+  `,
+  `
+  <Badge style={{
+    paddingInline: "var(--space-2)",
+    paddingBlock: "var(--space-1)"
+  }} as="div" />
+  `,
+  'moves axis padding props to logical style properties',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Badge style={{color: 'red'}} paddingX={2} />
+  `,
+  `
+  <Badge style={{
+    color: 'red',
+    paddingInline: "var(--space-2)"
+  }} as="div" />
+  `,
+  'merges mapped props into an existing style prop',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Badge data-testid="status" tone="caution" />
+  `,
+  `
+  <Badge data-testid="status" tone="caution" as="div" />
+  `,
+  'leaves pass-through props such as data-testid alone',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Badge {...rest} radius={2} tone="primary" />
+  `,
+  `
+  // UI-CODEMOD TODO: Please double check the Badge migration below
+  <Badge
+    {...rest}
+    tone="primary"
+    style={{
+      borderRadius: "var(--radius-2)"
+    }}
+    as="div" />
+  `,
+  'preserves a spread attribute',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Badge tone="primary" />
+  `,
+  `
+  // UI-CODEMOD TODO: Please double check the Badge migration below
+  <Badge tone="primary" as="div" />
+  `,
+  'warns on the unsupported primary tone',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Badge fontSize={0} />
+  `,
+  `
+  // UI-CODEMOD TODO: Please double check the Badge migration below. The fontSize prop is no longer supported. Badge renders its text prop at size 1.
+  <Badge fontSize={0} as="div" />
+  `,
+  'warns on the unsupported fontSize prop',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Badge tone="critical">{label}</Badge>
+  `,
+  `
+  // UI-CODEMOD TODO: Please double check the Badge migration below. Move the children into the text prop.
+  <Badge tone="critical" as="div">{label}</Badge>
+  `,
+  'warns when the Badge has children',
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `
+  <Badge fontSize={1} mode="outline" paddingX={2} paddingY={1} radius={4} tone={badge.color ? BADGE_TONES[badge.color] : undefined} style={{whiteSpace: 'nowrap'}}>{badge.label}</Badge>
+  `,
+  `
+  // UI-CODEMOD TODO: Please double check the Badge migration below. Move the children into the text prop.
+  // UI-CODEMOD TODO: Please double check the Badge migration below. The fontSize prop is no longer supported. Badge renders its text prop at size 1.
+  <Badge
+    fontSize={1}
+    tone={badge.color ? BADGE_TONES[badge.color] : undefined}
+    style={{
+      whiteSpace: 'nowrap',
+      paddingInline: "var(--space-2)",
+      paddingBlock: "var(--space-1)",
+      borderRadius: "var(--radius-4)"
+    }}
+    as="div">{badge.label}</Badge>
+  `,
+  'transforms a Badge that combines mapped props, an existing style, and a dynamic tone',
+)
+
+defineCrossFileTest(
+  transform,
+  {},
+  `
+    import {Badge} from '@sanity/ui'
+
+    export const RootBadge = styled(Badge)(({theme}) => ({}))
+  `,
+  `
+    import {RootBadge} from './Component.styled'
+
+    export function Component() {
+      return <RootBadge radius={3} />
+    }
+  `,
+  (output) => {
+    expect(output.replace(/\s+/g, ' ')).toContain(
+      '<RootBadge style={{ borderRadius: "var(--radius-3)" }} as="div" />',
+    )
+  },
+  'transforms attributes on imported styled Badge wrappers',
+)
+
+defineCrossFileTest(
+  transform,
+  {},
+  `
+    import {Badge} from '@sanity/ui'
+
+    export const RootBadge = styled(Badge)(({theme}) => ({}))
+  `,
+  `
+    import {Badge} from 'another-package'
+    import {RootBadge} from './Component.styled'
+
+    export function Component() {
+      return (
+        <>
+          <RootBadge radius={3} />
+          <Badge radius={3} />
+        </>
+      )
+    }
+  `,
+  (output) => {
+    expect(output.replace(/\s+/g, ' ')).toContain(
+      '<RootBadge style={{ borderRadius: "var(--radius-3)" }} as="div" />',
+    )
+    expect(output).toContain('<Badge radius={3} />')
+  },
+  'does not transform attributes on unrelated Badge from another package',
+)

package/src/transforms/latest/badge/badge.ts

@@ -0,0 +1,106 @@
+import {
+  type API,
+  type ASTPath,
+  type FileInfo,
+  type JSXElement,
+  type JSXOpeningElement,
+} from 'jscodeshift'
+
+import type {BaseOptions} from '../../../types/BaseOptions'
+import {addAttribute} from '../../../utils/addAttribute'
+import {getComponentLocalNames} from '../../../utils/getComponentLocalNames'
+import {getStyledComponentAliases} from '../../../utils/getStyledComponentAliases'
+import {insertTodoWarning} from '../../../utils/insertTodoWarning'
+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 {BADGE_MODS} from './badge.mods'
+
+const TODO_WARNING = 'Please double check the Badge migration below'
+const CHILDREN_TODO_WARNING =
+  'Please double check the Badge migration below. Move the children into the text prop.'
+
+/** @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, 'Badge', options)
+    const styledAliases = getStyledComponentAliases(
+      j,
+      root,
+      'Badge',
+      fileInfo.path,
+      localNames,
+      options,
+    )
+
+    if (!shouldTransformComponent(j, root, 'Badge', localNames, options, styledAliases)) {
+      return
+    }
+
+    if (transformImport(j, root, 'Badge', fromPackage, toPackage)) {
+      markChanged()
+    }
+
+    const warnOnChildren = (path: ASTPath<JSXOpeningElement>): boolean => {
+      const parentNode = path.parent?.node
+      const element: JSXElement | undefined =
+        parentNode?.type === 'JSXElement' ? parentNode : undefined
+
+      if (!element) {
+        return false
+      }
+
+      const hasChildren = (element.children ?? []).some(
+        (child) => !(child.type === 'JSXText' && child.value.trim() === ''),
+      )
+
+      return hasChildren && insertTodoWarning(j, path, CHILDREN_TODO_WARNING)
+    }
+
+    const migrate = (path: ASTPath<JSXOpeningElement>): boolean => {
+      let changed = false
+
+      if (transformAttributes(j, path, BADGE_MODS, TODO_WARNING)) {
+        changed = true
+      }
+
+      if (addAttribute(j, path.node, 'as', 'div')) {
+        changed = true
+      }
+
+      if (warnOnChildren(path)) {
+        changed = true
+      }
+
+      return changed
+    }
+
+    root.find(j.JSXOpeningElement).forEach((path) => {
+      const name = path.node.name
+
+      if (name.type !== 'JSXIdentifier' || !localNames.has(name.name)) {
+        return
+      }
+
+      if (migrate(path)) {
+        markChanged()
+      }
+    })
+
+    if (
+      transformStyledComponents(j, root, styledAliases, () => true, {
+        callback: (path) => migrate(path),
+      })
+    ) {
+      markChanged()
+    }
+  })
+}