Add v12-react-avatar-component migration (#10874)

### WHY are these changes introduced?

In order to run the `v12-react-avatar-component` migration as part of
our beta release it needs to be merged and released on `main` instead of
the `next` branch.

### WHAT is this pull request doing?
Ports over `v12-react-avatar-component` migration from [[Avatar] Remove
customer prop and experiemntal values
#10283](#10283) to main branch

---------

Co-authored-by: Lo Kim <lo.kim@shopify.com>
Co-authored-by: Lo Kim <26749317+laurkim@users.noreply.github.com>

Author: lgriffee

.changeset/spotty-garlics-kick.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-migrator': minor
+---
+
+Ported `v12-react-avatar-component` migration from [Avatar] Remove customer prop and experimental values [#10283](https://github.com/Shopify/polaris/pull/10283) to main branch

polaris-migrator/src/migrations/v12-react-avatar-component/tests/transform.test.ts

@@ -0,0 +1,14 @@
+import {check} from '../../../utilities/check';
+
+const transform = 'v12-react-avatar-component';
+const fixtures = ['v12-react-avatar-component'];
+
+for (const fixture of fixtures) {
+  check(__dirname, {
+    fixture,
+    transform,
+    options: {
+      relative: fixture.includes('relative') ? true : undefined,
+    },
+  });
+}

polaris-migrator/src/migrations/v12-react-avatar-component/tests/v12-react-avatar-component.input.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {Avatar} from '@shopify/polaris';
+
+export function App() {
+  return (
+    <>
+      <Avatar customer size={undefined} />
+      <Avatar customer size="extraSmall" />
+      <Avatar customer size="small" />
+      <Avatar customer size="medium" />
+      <Avatar customer size="large" />
+      <Avatar size="xl-experimental" />
+      <Avatar size="2xl-experimental" />
+    </>
+  );
+}

polaris-migrator/src/migrations/v12-react-avatar-component/tests/v12-react-avatar-component.output.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {Avatar} from '@shopify/polaris';
+
+export function App() {
+  return (
+    <>
+      <Avatar customer size={undefined} />
+      <Avatar customer size="xs" />
+      <Avatar customer size="sm" />
+      <Avatar customer size="md" />
+      <Avatar customer size="lg" />
+      <Avatar size="xl" />
+      <Avatar size="xl" />
+    </>
+  );
+}

polaris-migrator/src/migrations/v12-react-avatar-component/transform.ts

@@ -0,0 +1,64 @@
+import type {API, FileInfo, Options} from 'jscodeshift';
+
+import {
+  getImportSpecifierName,
+  hasImportDeclaration,
+  hasImportSpecifier,
+  normalizeImportSourcePaths,
+} from '../../utilities/imports';
+import {replaceJSXAttributes} from '../../utilities/jsx';
+
+export interface MigrationOptions extends Options {
+  relative?: boolean;
+}
+
+export default function transformer(
+  file: FileInfo,
+  {jscodeshift: j}: API,
+  options: MigrationOptions,
+) {
+  const source = j(file.source);
+
+  if (
+    !options.relative &&
+    !hasImportDeclaration(j, source, '@shopify/polaris')
+  ) {
+    return file.source;
+  }
+
+  const sourcePaths = normalizeImportSourcePaths(j, source, {
+    relative: options.relative,
+    from: 'Avatar',
+    to: 'Avatar',
+  });
+
+  if (!sourcePaths) return;
+  if (
+    !hasImportSpecifier(j, source, 'Avatar', sourcePaths.from) &&
+    !hasImportSpecifier(j, source, 'AvatarProps', sourcePaths.from)
+  ) {
+    return;
+  }
+
+  const localElementName =
+    getImportSpecifierName(j, source, 'Avatar', sourcePaths.from) || 'Avatar';
+
+  // Find all JSX elements with the name 'Avatar'
+  source.findJSXElements(localElementName).forEach((element) => {
+    // Replace the 'size' prop value with the new size
+    replaceJSXAttributes(j, element, 'size', 'size', sizeMapping);
+  });
+
+  return source.toSource();
+}
+
+// Define the mapping of old sizes to new sizes
+const sizeMapping = {
+  extraSmall: 'xs',
+  small: 'sm',
+  medium: 'md',
+  large: 'lg',
+  'xl-experimental': 'xl',
+  // 2xl-experimental is not supported in the new Avatar component
+  '2xl-experimental': 'xl',
+};