Add v12-react-update-component-prop-color migration

polaris-migrator/src/migrations/react-update-component-prop/transform.ts

@@ -23,7 +23,7 @@ interface ReplacementOptions {
   toValue?: string;
 }
 
-interface ReplacementMaps {
+export interface ReplacementMaps {
   [componentName: string]: ReplacementOptions[];
 }
 

polaris-migrator/src/migrations/v12-react-update-component-prop-color/tests/step1.input.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import {Box} from '@shopify/polaris';
+
+declare function Child(props: any): JSX.Element;
+
+const BoxWrapper = Box;
+
+export function App() {
+  return (
+    <>
+      <Box background="bg" padding="0">
+        Hello
+        <Child background="bg" />
+        <BoxWrapper />
+      </Box>
+      <Box background="bg-app" padding="0">
+        Hello
+        <Child background="bg-app" />
+        <BoxWrapper />
+      </Box>
+    </>
+  );
+}

polaris-migrator/src/migrations/v12-react-update-component-prop-color/tests/step1.output.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import {Box} from '@shopify/polaris';
+
+declare function Child(props: any): JSX.Element;
+
+const BoxWrapper =
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
+  Box;
+
+export function App() {
+  return (
+    <>
+      <Box background="bg-surface" padding="0">
+        Hello
+        <Child background="bg" />
+        <BoxWrapper />
+      </Box>
+      <Box background="bg-app" padding="0">
+        Hello
+        <Child background="bg-app" />
+        <BoxWrapper />
+      </Box>
+    </>
+  );
+}

polaris-migrator/src/migrations/v12-react-update-component-prop-color/tests/step2.input.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import {Box} from '@shopify/polaris';
+
+declare function Child(props: any): JSX.Element;
+
+const BoxWrapper = Box;
+
+export function App() {
+  return (
+    <>
+      <Box background="bg-surface" padding="0">
+        Hello
+        <Child background="bg" />
+        <BoxWrapper />
+      </Box>
+      <Box background="bg-app" padding="0">
+        Hello
+        <Child background="bg-app" />
+        <BoxWrapper />
+      </Box>
+    </>
+  );
+}

polaris-migrator/src/migrations/v12-react-update-component-prop-color/tests/step2.output.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import {Box} from '@shopify/polaris';
+
+declare function Child(props: any): JSX.Element;
+
+const BoxWrapper =
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
+  Box;
+
+export function App() {
+  return (
+    <>
+      <Box background="bg-surface" padding="0">
+        Hello
+        <Child background="bg" />
+        <BoxWrapper />
+      </Box>
+      <Box background="bg" padding="0">
+        Hello
+        <Child background="bg-app" />
+        <BoxWrapper />
+      </Box>
+    </>
+  );
+}

polaris-migrator/src/migrations/v12-react-update-component-prop-color/tests/transform.test.ts

@@ -0,0 +1,25 @@
+import {check} from '../../../utilities/check';
+
+const transform = 'v12-react-update-component-prop-color';
+const fixtures = [
+  {
+    name: 'step1',
+    options: {
+      step: 1,
+    },
+  },
+  {
+    name: 'step2',
+    options: {
+      step: 2,
+    },
+  },
+];
+
+for (const fixture of fixtures) {
+  check(__dirname, {
+    fixture: fixture.name,
+    transform,
+    options: fixture.options,
+  });
+}

polaris-migrator/src/migrations/v12-react-update-component-prop-color/transform.ts

@@ -0,0 +1,58 @@
+import type {FileInfo, API, Options} from 'jscodeshift';
+
+import reactUpdateComponentProp from '../react-update-component-prop/transform';
+import {
+  replacementMap1,
+  replacementMap2,
+} from '../v12-styles-replace-custom-property-color/transform';
+
+import type {ComponentFromPropsMap} from './utils';
+import {getReplacementMaps} from './utils';
+
+const normalizedReplacementMap1 = Object.fromEntries(
+  Object.entries(replacementMap1).map(([fromValue, toValue]) => [
+    fromValue.replace('--p-color-', ''),
+    toValue.replace('--p-color-', ''),
+  ]),
+);
+
+const normalizedReplacementMap2 = Object.fromEntries(
+  Object.entries(replacementMap2).map(([fromValue, toValue]) => [
+    fromValue.replace('--p-color-', ''),
+    toValue.replace('--p-color-', ''),
+  ]),
+);
+
+const componentFromPropsMap: ComponentFromPropsMap = {
+  Banner: ['textColor'],
+  Box: ['background', 'borderColor', 'color', 'outlineColor'],
+  Card: ['background'],
+  Divider: ['borderColor'],
+};
+
+export interface MigrationOptions extends Options {
+  step: number;
+}
+
+export default function transformer(
+  fileInfo: FileInfo,
+  _: API,
+  options: MigrationOptions,
+) {
+  if (options.step === 1) {
+    return reactUpdateComponentProp(fileInfo, _, {
+      replacementMaps: getReplacementMaps(
+        componentFromPropsMap,
+        normalizedReplacementMap1,
+      ),
+    });
+  } else if (options.step === 2) {
+    return reactUpdateComponentProp(fileInfo, _, {
+      replacementMaps: getReplacementMaps(
+        componentFromPropsMap,
+        normalizedReplacementMap2,
+      ),
+    });
+  }
+  throw new Error('Invalid step');
+}

polaris-migrator/src/migrations/v12-react-update-component-prop-color/utils.ts

@@ -0,0 +1,31 @@
+import type {ReplacementMaps} from '../react-update-component-prop/transform';
+
+type ComponentFromProp = string;
+
+export interface ComponentFromPropsMap {
+  [componentName: string]: ComponentFromProp[];
+}
+
+type ReplacementMapToValue = string;
+
+interface ReplacementMap {
+  [fromValue: string]: ReplacementMapToValue;
+}
+
+export function getReplacementMaps(
+  componentFromPropsMap: ComponentFromPropsMap,
+  replacementMap: ReplacementMap,
+): ReplacementMaps {
+  return Object.fromEntries(
+    Object.entries(componentFromPropsMap).map(([componentName, fromProps]) => [
+      componentName,
+      fromProps.flatMap((fromProp) =>
+        Object.entries(replacementMap).map(([fromValue, toValue]) => ({
+          fromProp,
+          fromValue,
+          toValue,
+        })),
+      ),
+    ]),
+  );
+}

polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/transform.ts

@@ -21,7 +21,7 @@ export default function transformer(
   throw new Error('Invalid step');
 }
 
-const replacementMap1 = {
+export const replacementMap1 = {
   '--p-color-avatar-background-experimental': '--p-color-avatar-bg-fill',
   '--p-color-avatar-color-experimental': '--p-color-avatar-text-on-bg-fill',
   '--p-color-avatar-style-five-background-experimental':
@@ -180,7 +180,7 @@ const replacementMap1 = {
   '--p-color-text-warning-experimental': '--p-color-text-warning',
 };
 
-const replacementMap2 = {
+export const replacementMap2 = {
   '--p-color-bg-app': '--p-color-bg',
 };