Create v12-react-update-component-prop-shadow migrations

polaris-migrator/src/migrations/v12-react-update-component-prop-shadow/tests/basic.input.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {Box} from '@shopify/polaris';
+
+declare function Child(props: any): JSX.Element;
+
+const BoxWrapper = Box;
+
+export function App() {
+  return (
+    <>
+      <Box shadow="sm" padding="0">
+        Hello
+        <Child shadow="sm" />
+        <BoxWrapper />
+        <Box shadow="border-inset-experimental" />
+        <Box shadow="card-lg-experimental" />
+      </Box>
+    </>
+  );
+}

polaris-migrator/src/migrations/v12-react-update-component-prop-shadow/tests/basic.output.tsx

@@ -0,0 +1,22 @@
+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 shadow="200" padding="0">
+        Hello
+        <Child shadow="sm" />
+        <BoxWrapper />
+        <Box shadow="border-inset" />
+        <Box shadow="300" />
+      </Box>
+    </>
+  );
+}

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

@@ -0,0 +1,15 @@
+import {check} from '../../../utilities/check';
+
+const transform = 'v12-react-update-component-prop-space';
+const fixtures = [
+  {
+    name: 'basic',
+  },
+];
+
+for (const fixture of fixtures) {
+  check(__dirname, {
+    fixture: fixture.name,
+    transform,
+  });
+}

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

@@ -0,0 +1,26 @@
+import type {FileInfo, API} from 'jscodeshift';
+
+import {replacementMaps} from '../v12-styles-replace-custom-property-shadow/transform';
+import reactUpdateComponentProp from '../react-update-component-prop/transform';
+import type {ComponentReplacementOptions} from '../react-update-component-prop/utils';
+import {getReplacementMaps} from '../react-update-component-prop/utils';
+
+const normalizedReplacementMap = Object.fromEntries(
+  Object.entries(replacementMaps['/.+/']).map(([fromValue, toValue]) => [
+    fromValue.replace('--p-shadow-', ''),
+    toValue.replace('--p-shadow-', ''),
+  ]),
+);
+
+const componentReplacementOptions: ComponentReplacementOptions = {
+  Box: ['shadow'],
+};
+
+export default function transformer(fileInfo: FileInfo, _: API) {
+  return reactUpdateComponentProp(fileInfo, _, {
+    replacementMaps: getReplacementMaps(
+      componentReplacementOptions,
+      normalizedReplacementMap,
+    ),
+  });
+}

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

@@ -6,7 +6,7 @@ export default function transformer(fileInfo: FileInfo, _: API) {
   return stylesReplaceCustomProperty(fileInfo, _, {replacementMaps});
 }
 
-const replacementMaps = {
+export const replacementMaps = {
   '/.+/': {
     '--p-shadow-inset-lg': '--p-shadow-inset-200',
     '--p-shadow-inset-md': '--p-shadow-inset-200',