@navikt/aksel 7.18.0 → 7.19.1

package/dist/codemod/migrations.js

@@ -112,6 +112,12 @@ exports.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.",
+        },
     ],
 };
 function getMigrationPath(str) {

package/dist/codemod/transforms/darkside/box-to-boxnew/box-to-boxnew.js

@@ -0,0 +1,159 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformer;
+const legacy_tokens_1 = require("../../../../darkside/config/legacy.tokens");
+const ast_1 = require("../../../utils/ast");
+const lineterminator_1 = require("../../../utils/lineterminator");
+const packageImports_1 = __importStar(require("../../../utils/packageImports"));
+const propsAffected = ["background", "borderColor", "shadow"];
+function transformer(file, api) {
+    const j = api.jscodeshift;
+    const root = j(file.source);
+    const toSourceOptions = (0, lineterminator_1.getLineTerminator)(file.source);
+    if (file.source.includes("TODO: aksel box migration")) {
+        return root.toSource(toSourceOptions);
+    }
+    const localName = (0, ast_1.findComponentImport)({
+        root,
+        j,
+        name: "Box",
+        packageType: "react",
+    });
+    if (!localName) {
+        return;
+    }
+    const astElements = root.find(j.JSXElement, {
+        openingElement: {
+            name: {
+                type: "JSXIdentifier",
+                name: localName,
+            },
+        },
+    });
+    const tokenComments = [];
+    for (const astElement of astElements.paths()) {
+        let encounteredUnmigratableProp = false;
+        for (const prop of propsAffected) {
+            (0, ast_1.findProps)({ j, path: astElement, name: prop }).forEach((attr) => {
+                const attrvalue = attr.value.value;
+                if (attrvalue.type === "StringLiteral") {
+                    const config = legacy_tokens_1.legacyTokenConfig[attrvalue.value];
+                    if (config === null || config === void 0 ? void 0 : config.replacement) {
+                        attrvalue.value = config.replacement;
+                    }
+                    else {
+                        encounteredUnmigratableProp = true;
+                        const tokenComment = {
+                            prop,
+                            token: attrvalue.value,
+                        };
+                        if (config === null || config === void 0 ? void 0 : config.comment) {
+                            tokenComment.comment = config.comment;
+                        }
+                        tokenComments.push(tokenComment);
+                    }
+                }
+            });
+        }
+        if (!encounteredUnmigratableProp) {
+            // TODO: ?? Box -> BoxNew type fail? (but works)
+            astElement.node.openingElement.name.name = "BoxNew";
+            astElement.node.closingElement.name.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
+        (0, packageImports_1.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
+        (0, packageImports_1.default)(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;
+}
+const createFileComments = ({ 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;
+};
+const analyzePartialMigration = (j, source) => {
+    const root = j(source);
+    const astNewElements = (0, ast_1.findJSXElement)({
+        root,
+        j,
+        name: "BoxNew",
+        originalName: "BoxNew",
+    });
+    if (astNewElements.length === 0) {
+        return "no new";
+    }
+    const localName = (0, ast_1.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 = (0, ast_1.findJSXElement)({
+        root,
+        j,
+        name: localName,
+        originalName: "Box",
+    });
+    if (astOldElements.length === 0) {
+        return "all new";
+    }
+    return "mixed";
+};

package/dist/codemod/transforms/darkside/prop-deprecate/prop-deprecate.js

@@ -18,7 +18,7 @@ function transformer(file, api) {
     const toSourceOptions = (0, lineterminator_1.getLineTerminator)(file.source);
     for (const [component, props] of Object.entries(deprecationMap)) {
         const sourceName = (0, ast_1.findComponentImport)({
-            file,
+            root,
             j,
             name: component,
             packageType: "react",

package/dist/codemod/transforms/spacing/primitives-spacing/spacing.js

@@ -35,7 +35,7 @@ function transformer(file, api) {
         "gap",
     ];
     for (const primitive of primitives) {
-        const name = (0, ast_1.findComponentImport)({ file, j, name: primitive });
+        const name = (0, ast_1.findComponentImport)({ root, j, name: primitive });
         if (!name) {
             continue;
         }
@@ -46,7 +46,7 @@ function transformer(file, api) {
             originalName: primitive,
         }).forEach((path) => {
             for (const prop of affectedProps) {
-                (0, ast_1.findProp)({ j, path, name: prop }).forEach((attr) => {
+                (0, ast_1.findProps)({ j, path, name: prop }).forEach((attr) => {
                     const attrValue = attr.value.value;
                     if (attrValue.type === "StringLiteral") {
                         /* padding="32" */

package/dist/codemod/transforms/spacing/token-spacing-js/spacing.js

@@ -12,7 +12,7 @@ function transformer(file, api) {
         const oldCSSVar = (0, translate_token_1.translateToken)(`--a-spacing-${oldVar}`, "js");
         const newCSSVar = (0, translate_token_1.translateToken)(`--a-space-${newVar}`, "js");
         const name = (0, ast_1.findComponentImport)({
-            file,
+            root,
             j,
             name: oldCSSVar,
             packageType: "tokens",

package/dist/codemod/transforms/v3.0.0/copybutton/copybutton.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = transformer;
 const chalk_1 = __importDefault(require("chalk"));
 const lineterminator_1 = require("../../../utils/lineterminator");
-const moveAndRenameImport_1 = __importDefault(require("../../../utils/moveAndRenameImport"));
+const packageImports_1 = __importDefault(require("../../../utils/packageImports"));
 const removeProps_1 = __importDefault(require("../../../utils/removeProps"));
 /**
  * @param {import('jscodeshift').FileInfo} file
@@ -22,7 +22,7 @@ function transformer(file, api) {
         return file.source;
     }
     const toName = "CopyButton";
-    const localName = (0, moveAndRenameImport_1.default)(j, root, {
+    const localName = (0, packageImports_1.default)(j, root, {
         fromImport: "@navikt/ds-react-internal",
         toImport: "@navikt/ds-react",
         fromName: "CopyToClipboard",

package/dist/codemod/transforms/v4.0.0/internal-react/internal-react.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = transformer;
 const lineterminator_1 = require("../../../utils/lineterminator");
-const moveAndRenameImport_1 = __importDefault(require("../../../utils/moveAndRenameImport"));
+const packageImports_1 = __importDefault(require("../../../utils/packageImports"));
 /**
  * @param {import('jscodeshift').FileInfo} file
  * @param {import('jscodeshift').API} api
@@ -19,19 +19,19 @@ function transformer(file, api) {
     catch (_a) {
         return file.source;
     }
-    (0, moveAndRenameImport_1.default)(j, root, {
+    (0, packageImports_1.default)(j, root, {
         fromImport: "@navikt/ds-react-internal",
         toImport: "@navikt/ds-react",
         fromName: "Header",
         toName: "InternalHeader",
     });
-    (0, moveAndRenameImport_1.default)(j, root, {
+    (0, packageImports_1.default)(j, root, {
         fromImport: "@navikt/ds-react-internal",
         toImport: "@navikt/ds-react",
         fromName: "Dropdown",
         toName: "Dropdown",
     });
-    (0, moveAndRenameImport_1.default)(j, root, {
+    (0, packageImports_1.default)(j, root, {
         fromImport: "@navikt/ds-react-internal",
         toImport: "@navikt/ds-react",
         fromName: "Timeline",

package/dist/codemod/utils/ast.js

@@ -2,16 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.findComponentImport = findComponentImport;
 exports.findJSXElement = findJSXElement;
-exports.findProp = findProp;
+exports.findProps = findProps;
 /**
  * Finds a component import, accounting for sub-components and aliases.
  * Returns the local name of the component. If the component is not found, returns null.
+ * root should ideally be the root of the file in most cases (imports happen at top level)
  */
 function findComponentImport(input) {
-    const { j, file, name: _name, packageType = "react" } = input;
+    const { j, root, name: _name, packageType = "react" } = input;
     /* Account for sub-components */
     const name = _name.includes(".") ? _name.split(".")[0] : _name;
-    const root = j(file.source);
     let foundName = null;
     root.find(j.ImportDeclaration).forEach((path) => {
         if (packageType === "react" && !isAkselReactImport(path)) {
@@ -62,7 +62,7 @@ function findJSXElement(input) {
 /**
  * Finds a prop in a JSX element.
  */
-function findProp(input) {
+function findProps(input) {
     const { j, path, name } = input;
     return j(path).find(j.JSXAttribute, {
         name: {

package/dist/codemod/utils/{moveAndRenameImport.js → packageImports.js}

@@ -1,6 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.addPackageImport = void 0;
 exports.default = moveAndRenameImport;
+// add import declaration after first existing import declaration, or
+// at the beginning of the file
+const addPackageImport = ({ j, root, packageName, specifiers, }) => {
+    const existingImport = root.find(j.ImportDeclaration);
+    const importDecl = j.importDeclaration(specifiers.map((specifier) => j.importSpecifier(j.identifier(specifier))), j.stringLiteral(packageName));
+    if (existingImport.length === 0) {
+        root.get().node.program.body.unshift(importDecl);
+    }
+    else {
+        existingImport.insertBefore(importDecl);
+    }
+};
+exports.addPackageImport = addPackageImport;
 function moveAndRenameImport(j, root, { fromImport, toImport, fromName, toName, ignoreAlias = false, }) {
     var _a, _b;
     /* Does package-name exist */

package/dist/darkside/config/legacy.tokens.js

@@ -693,7 +693,7 @@ const colors = {
     "surface-alt-3-strong": {
         ref: "deepblue-800",
         raw: "rgba(0, 52, 83, 1)",
-        comment: "Use 'bg-brand-blue-moderate' in theme 'dark'-mode. ",
+        comment: "Use 'bg-brand-blue-moderate' in theme 'dark'-mode.",
         replacement: "",
     },
     "surface-alt-3-moderate": {

package/dist/darkside/transforms/darkside-tokens-js.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = transformer;
 const imports_1 = require("../../codemod/utils/imports");
 const lineterminator_1 = require("../../codemod/utils/lineterminator");
-const moveAndRenameImport_1 = __importDefault(require("../../codemod/utils/moveAndRenameImport"));
+const packageImports_1 = __importDefault(require("../../codemod/utils/packageImports"));
 const translate_token_1 = require("../../codemod/utils/translate-token");
 const legacy_tokens_1 = require("../config/legacy.tokens");
 function transformer(file, api) {
@@ -32,7 +32,7 @@ function transformer(file, api) {
         if (config.replacement.length > 0) {
             /* We remove the prefix */
             const jsToken = (0, translate_token_1.translateToken)(`--ax-${config.replacement}`, "js").slice(2);
-            const localName = (0, moveAndRenameImport_1.default)(j, root, {
+            const localName = (0, packageImports_1.default)(j, root, {
                 fromImport: "@navikt/ds-tokens/dist/tokens",
                 toImport: "@navikt/ds-tokens/darkside-js",
                 fromName: foundName,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "7.18.0",
+  "version": "7.19.1",
   "description": "Aksel command line interface. Handles css-imports, codemods and more",
   "author": "Aksel | Nav designsystem team",
   "license": "MIT",
@@ -29,8 +29,8 @@
   },
   "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
   "dependencies": {
-    "@navikt/ds-css": "^7.18.0",
-    "@navikt/ds-tokens": "^7.18.0",
+    "@navikt/ds-css": "^7.19.1",
+    "@navikt/ds-tokens": "^7.19.1",
     "axios": "1.8.3",
     "chalk": "4.1.0",
     "cli-progress": "^3.12.0",
@@ -38,7 +38,7 @@
     "commander": "10.0.1",
     "enquirer": "^2.3.6",
     "fast-glob": "3.2.11",
-    "figlet": "1.6.0",
+    "figlet": "1.8.0",
     "is-git-clean": "1.1.0",
     "jscodeshift": "^0.15.1",
     "jscodeshift-add-imports": "1.0.11",