[Migration]: box -> boxNew

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

@@ -123,6 +123,13 @@ 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: "darkside/box-to-boxnew/box-to-boxnew",
+     warning: "Remember to check if 'aksel box migration'-comment were added to any files after migration. This comment will help you find and update Box-instances where we could not resolve the update for you.",
+    },
   ],
 };
 

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

@@ -0,0 +1,193 @@
+import type { API, FileInfo, JSCodeshift, JSXIdentifier } from "jscodeshift";
+import { legacyTokenConfig } from "../../../../darkside/config/legacy.tokens";
+import {
+  findComponentImport,
+  findJSXElement,
+  findProps,
+} from "../../../utils/ast";
+import { getLineTerminator } from "../../../utils/lineterminator";
+import moveAndRenameImport, {
+  addPackageImport,
+} from "../../../utils/packageImports";
+
+const propsAffected = ["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);
+
+  if (file.source.includes("TODO: aksel box migration")) {
+    return root.toSource(toSourceOptions);
+  }
+
+  const localName = findComponentImport({
+    root,
+    j,
+    name: "Box",
+    packageType: "react",
+  });
+
+  if (!localName) {
+    return;
+  }
+
+  const astElements = root.find(j.JSXElement, {
+    openingElement: {
+      name: {
+        type: "JSXIdentifier",
+        name: localName,
+      },
+    },
+  });
+
+  const tokenComments: TokenComments = [];
+
+  for (const astElement of astElements.paths()) {
+    let encounteredUnmigratableProp = false;
+    for (const prop of propsAffected) {
+      findProps({ j, path: astElement, name: prop }).forEach((attr) => {
+        const attrvalue = attr.value.value;
+        if (attrvalue.type === "StringLiteral") {
+          const config = legacyTokenConfig[attrvalue.value];
+          if (config?.replacement) {
+            attrvalue.value = config.replacement;
+          } else {
+            encounteredUnmigratableProp = true;
+            const tokenComment: TokenComment = {
+              prop,
+              token: attrvalue.value,
+            };
+            if (config?.comment) {
+              tokenComment.comment = config.comment;
+            }
+            tokenComments.push(tokenComment);
+          }
+        }
+      });
+    }
+    if (!encounteredUnmigratableProp) {
+      // TODO: ?? Box -> BoxNew type fail? (but works)
+      (astElement.node.openingElement.name as JSXIdentifier).name = "BoxNew";
+      (astElement.node.closingElement.name as JSXIdentifier).name = "BoxNew";
+    }
+  }
+
+  const blockComment = createFileComments({ tokenComments });
+
+  const importAnalysis = analyzePartialMigration(
+    j,
+    root.toSource(toSourceOptions),
+  );
+
+  if (importAnalysis === "no new") {
+    // WHY: we do nothing to the import statements if we couldn't migrate any Box
+  }
+
+  if (importAnalysis === "mixed") {
+    // WHY: mixed Box and BoxNew == we keep old, and add the new import
+    addPackageImport({
+      j,
+      root,
+      packageName: "@navikt/ds-react/Box",
+      specifiers: ["BoxNew"],
+    });
+  }
+
+  if (importAnalysis === "all new") {
+    // WHY: when we have only new boxes == we replace the old import with the new one
+    moveAndRenameImport(j, root, {
+      fromImport: "@navikt/ds-react",
+      toImport: "@navikt/ds-react/Box",
+      fromName: "Box",
+      toName: "BoxNew",
+      ignoreAlias: localName !== "Box",
+    });
+  }
+
+  const output = `${blockComment ? blockComment + "\n\n" : ""}${root.toSource(
+    toSourceOptions,
+  )}`;
+
+  return output;
+}
+
+type TokenComment = {
+  prop: string;
+  token: string;
+  comment?: string;
+};
+
+type TokenComments = TokenComment[];
+
+const createFileComments = ({
+  tokenComments,
+}: {
+  tokenComments: TokenComments;
+}) => {
+  if (tokenComments.length === 0) {
+    return null;
+  }
+
+  let constructedComment =
+    "/*\nTODO: aksel box migration:\nCould not migrate the following:\n";
+
+  for (const { prop, token, comment } of tokenComments.values()) {
+    constructedComment += `  - ${prop}=${token}\n`;
+    if (comment) {
+      constructedComment += `    - ${comment}\n`;
+    }
+  }
+
+  constructedComment += "*/";
+
+  return constructedComment;
+};
+
+type MigrationResult = "all new" | "mixed" | "no new";
+
+const analyzePartialMigration = (
+  j: JSCodeshift,
+  source: string,
+): MigrationResult => {
+  const root = j(source);
+
+  const astNewElements = findJSXElement({
+    root,
+    j,
+    name: "BoxNew",
+    originalName: "BoxNew",
+  });
+
+  if (astNewElements.length === 0) {
+    return "no new";
+  }
+
+  const localName = findComponentImport({
+    root,
+    j,
+    name: "Box",
+    packageType: "react",
+  });
+
+  if (!localName) {
+    // this should never happen
+    throw new Error(
+      'package imports have been tampered with before the package import "step" in the migration',
+    );
+  }
+
+  const astOldElements = findJSXElement({
+    root,
+    j,
+    name: localName,
+    originalName: "Box",
+  });
+
+  if (astOldElements.length === 0) {
+    return "all new";
+  }
+
+  return "mixed";
+};

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

@@ -0,0 +1,21 @@
+import { Box } from "@navikt/ds-react"
+
+export const MyComponent = () => {
+	return (<>
+		<Box background="bg-subtle" borderColor="border-alt-1">
+      migratable
+		</Box>
+		<Box background="bg-subtle" borderColor="border-alt-1" shadow="large">
+      migratable + unmigratable (no comment)
+		</Box>
+		<Box background="surface-alt-3-strong" >
+      unmigratable (with comment)
+		</Box>
+		<Box borderWidth="4" padding={{ lg: "10", sm: "8" }} height="200rem">
+      old
+		</Box>
+		<Box borderWidth="4" background="bg-subtle">
+      old + migratable
+		</Box>
+	</>);
+}

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

@@ -0,0 +1,30 @@
+/*
+TODO: aksel box migration:
+Could not migrate the following:
+  - shadow=large
+  - background=surface-alt-3-strong
+    - Use 'bg-brand-blue-moderate' in theme 'dark'-mode.
+*/
+
+import { BoxNew } from "@navikt/ds-react/Box"
+import { Box } from "@navikt/ds-react"
+
+export const MyComponent = () => {
+  return (<>
+    <BoxNew background="bg-neutral-soft" borderColor="border-meta-purple">
+      migratable
+    </BoxNew>
+    <Box background="bg-neutral-soft" borderColor="border-meta-purple" shadow="large">
+      migratable + unmigratable (no comment)
+    </Box>
+    <Box background="surface-alt-3-strong" >
+      unmigratable (with comment)
+    </Box>
+    <BoxNew borderWidth="4" padding={{ lg: "10", sm: "8" }} height="200rem">
+      old
+    </BoxNew>
+    <BoxNew borderWidth="4" background="bg-neutral-soft">
+      old + migratable
+    </BoxNew>
+  </>);
+}

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

@@ -0,0 +1,20 @@
+/*
+TODO: aksel box migration:
+Could not migrate the following:
+  - shadow=large
+  - background=surface-alt-3-strong
+    - Use 'bg-brand-blue-moderate' in theme 'dark'-mode.
+*/
+
+import { Box } from "@navikt/ds-react"
+
+export const MyComponent = () => {
+  return (<>
+    <Box background="bg-neutral-soft" borderColor="border-meta-purple" shadow="large">
+      migratable + unmigratable (no comment)
+    </Box>
+    <Box background="surface-alt-3-strong" >
+      unmigratable (with comment)
+    </Box>
+  </>);
+}

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

@@ -0,0 +1,20 @@
+/*
+TODO: aksel box migration:
+Could not migrate the following:
+  - shadow=large
+  - background=surface-alt-3-strong
+    - Use 'bg-brand-blue-moderate' in theme 'dark'-mode.
+*/
+
+import { Box } from "@navikt/ds-react"
+
+export const MyComponent = () => {
+  return (<>
+    <Box background="bg-neutral-soft" borderColor="border-meta-purple" shadow="large">
+      migratable + unmigratable (no comment)
+    </Box>
+    <Box background="surface-alt-3-strong" >
+      unmigratable (with comment)
+    </Box>
+  </>);
+}

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

@@ -0,0 +1,30 @@
+/*
+TODO: aksel box migration:
+Could not migrate the following:
+  - shadow=large
+  - background=surface-alt-3-strong
+    - Use 'bg-brand-blue-moderate' in theme 'dark'-mode.
+*/
+
+import { BoxNew } from "@navikt/ds-react/Box"
+import { Box } from "@navikt/ds-react"
+
+export const MyComponent = () => {
+  return (<>
+    <BoxNew background="bg-neutral-soft" borderColor="border-meta-purple">
+      migratable
+    </BoxNew>
+    <Box background="bg-neutral-soft" borderColor="border-meta-purple" shadow="large">
+      migratable + unmigratable (no comment)
+    </Box>
+    <Box background="surface-alt-3-strong" >
+      unmigratable (with comment)
+    </Box>
+    <BoxNew borderWidth="4" padding={{ lg: "10", sm: "8" }} height="200rem">
+      old
+    </BoxNew>
+    <BoxNew borderWidth="4" background="bg-neutral-soft">
+      old + migratable
+    </BoxNew>
+  </>);
+}

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

@@ -0,0 +1,30 @@
+/*
+TODO: aksel box migration:
+Could not migrate the following:
+  - shadow=large
+  - background=surface-alt-3-strong
+    - Use 'bg-brand-blue-moderate' in theme 'dark'-mode.
+*/
+
+import { BoxNew } from "@navikt/ds-react/Box"
+import { Box } from "@navikt/ds-react"
+
+export const MyComponent = () => {
+  return (<>
+    <BoxNew background="bg-neutral-soft" borderColor="border-meta-purple">
+      migratable
+    </BoxNew>
+    <Box background="bg-neutral-soft" borderColor="border-meta-purple" shadow="large">
+      migratable + unmigratable (no comment)
+    </Box>
+    <Box background="surface-alt-3-strong" >
+      unmigratable (with comment)
+    </Box>
+    <BoxNew borderWidth="4" padding={{ lg: "10", sm: "8" }} height="200rem">
+      old
+    </BoxNew>
+    <BoxNew borderWidth="4" background="bg-neutral-soft">
+      old + migratable
+    </BoxNew>
+  </>);
+}

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

@@ -0,0 +1,12 @@
+import { Box as AkselBox } from "@navikt/ds-react"
+
+export const MyComponent = () => {
+	return (<>
+		<AkselBox background="bg-subtle" borderColor="border-alt-1">
+			simple rename of import
+		</AkselBox>
+		<AkselBox shadow="medium">
+			simple rename of import
+		</AkselBox>
+	</>);
+}

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

@@ -0,0 +1,19 @@
+/*
+TODO: aksel box migration:
+Could not migrate the following:
+  - shadow=medium
+*/
+
+import { BoxNew } from "@navikt/ds-react/Box";
+import { Box as AkselBox } from "@navikt/ds-react"
+
+export const MyComponent = () => {
+	return (<>
+		<BoxNew background="bg-neutral-soft" borderColor="border-meta-purple">
+			simple rename of import
+		</BoxNew>
+		<AkselBox shadow="medium">
+			simple rename of import
+		</AkselBox>
+	</>);
+}