🚧 box migration

@navikt/aksel/src/codemod/migrations.ts

@@ -123,6 +123,12 @@ export const migrations: {
       value: "prop-deprecate",
       path: "darkside/prop-deprecate/prop-deprecate",
     },
+    {
+      description:
+        "Update Box to to BoxNew (future Box) using the new token system",
+      value: "box-to-boxnew",
+      path: "box-to-boxnew/box-to-boxnew",
+    },
   ],
 };
 

@navikt/aksel/src/codemod/transforms/box-to-boxnew/box-to-boxnew.ts

@@ -0,0 +1,32 @@
+import type { API, FileInfo } from "jscodeshift";
+import { getLineTerminator } from "../../utils/lineterminator";
+import renameProps from "../../utils/rename-props";
+import { findComponentImport, findJSXElement } from "../spacing/spacing.utils";
+
+// to look up in replacements
+const deprecationMap = ["background", "borderColor", "shadow"];
+
+export default function transformer(file: FileInfo, api: API) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  const toSourceOptions = getLineTerminator(file.source);
+
+  const sourceName = findComponentImport({
+    file,
+    j,
+    name: "Box",
+    packageType: "react",
+  });
+
+  if (!sourceName) {
+    return;
+  }
+
+  for (const prop of deprecationMap) {
+    const jsx = findJSXElement({ root, j, name: sourceName });
+    // conditional renameProps()
+  }
+
+  return root.toSource(toSourceOptions);
+}

@navikt/aksel/src/codemod/transforms/box-to-boxnew/tests/box.input.js

@@ -0,0 +1,10 @@
+export const MyComponent = () => {
+	return ( <>
+    <Box background="bg-subtle" borderColor="border-alt-1" shadow="large">
+      this is a box with props that need migration
+    </Box>
+    <Box borderWidth="4" padding={{ lg: "10", sm: "8" }} height="200rem">
+      this is a box without
+    </Box>
+	</> );
+}

@navikt/aksel/src/codemod/transforms/box-to-boxnew/tests/box.output.js

@@ -0,0 +1,10 @@
+export const MyComponent = () => {
+  return ( <>
+    <Box background="bg-neutral-soft" borderColor="border-meta-purple" shadow="large">
+      this is a box with props that need migration
+    </Box>
+    <Box borderWidth="4" padding={{ lg: "10", sm: "8" }} height="200rem">
+      this is a box without
+    </Box>
+  </> );
+}