@navikt/aksel 7.14.2 → 7.15.0

package/dist/codemod/migrations.js

@@ -89,6 +89,23 @@ exports.migrations = {
             warning: "Remember to update use of `variant`-prop to match previous use of colors. If needed the component exposes css-variables for custom overrides",
         },
     ],
+    darkside: [
+        {
+            description: "Updates all Primitives to use new `space`-tokens. (Works with old and new system)",
+            value: "primitive-spacing",
+            path: "darkside/primitives-spacing/spacing",
+        },
+        {
+            description: "Updates css, scss and less-variables to use new `space`-tokens. (Works with old and new system)",
+            value: "token-spacing",
+            path: "darkside/token-spacing/spacing",
+        },
+        {
+            description: "Updates js-tokens to use new `space`-tokens. (Works with old and new system)",
+            value: "token-spacing-js",
+            path: "darkside/token-spacing-js/spacing",
+        },
+    ],
 };
 function getMigrationPath(str) {
     var _a;

package/dist/codemod/transforms/darkside/darkside.utils.js

@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.legacySpacingTokenMap = void 0;
+exports.findComponentImport = findComponentImport;
+exports.findJSXElement = findJSXElement;
+exports.findProp = findProp;
+exports.convertSpacingToSpace = convertSpacingToSpace;
+/**
+ * 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.
+ */
+function findComponentImport(input) {
+    const { j, file, 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)) {
+            return;
+        }
+        if (packageType === "tokens" && !isAkselTokensImport(path)) {
+            return;
+        }
+        path.node.specifiers.forEach((specifier) => {
+            if (specifier.type === "ImportSpecifier" &&
+                specifier.imported.name === name) {
+                foundName = specifier.local
+                    ? specifier.local.name
+                    : specifier.imported.name;
+            }
+        });
+    });
+    return foundName;
+}
+/**
+ * Finds a JSX element in the AST, accounting for sub-components.
+ */
+function findJSXElement(input) {
+    const { root, j, name, originalName } = input;
+    const isSubComponent = originalName.includes(".");
+    const openingElement = (isSubComponent
+        ? {
+            name: {
+                type: "JSXMemberExpression",
+                object: {
+                    name,
+                },
+                property: {
+                    name: originalName.split(".")[1],
+                },
+            },
+        }
+        : {
+            name: {
+                type: "JSXIdentifier",
+                name,
+            },
+        });
+    return root.find(j.JSXElement, {
+        openingElement,
+    });
+}
+/**
+ * Finds a prop in a JSX element.
+ */
+function findProp(input) {
+    const { j, path, name } = input;
+    return j(path).find(j.JSXAttribute, {
+        name: {
+            name,
+        },
+    });
+}
+/**
+ * Checks if an import is from @navikt/ds-react.
+ */
+function isAkselReactImport(path) {
+    const importSource = path.node.source.value;
+    return (typeof importSource === "string" &&
+        importSource.startsWith("@navikt/ds-react"));
+}
+/**
+ * Checks if an import is from @navikt/ds-tokens.
+ */
+function isAkselTokensImport(path) {
+    const importSource = path.node.source.value;
+    return (typeof importSource === "string" &&
+        importSource.startsWith("@navikt/ds-tokens"));
+}
+/**
+ * Maps old spacing-token values to new space-tokens
+ */
+const legacySpacingTokenMap = new Map([
+    ["32", "128"],
+    ["24", "96"],
+    ["20", "80"],
+    ["18", "72"],
+    ["16", "64"],
+    ["14", "56"],
+    ["12", "48"],
+    ["11", "44"],
+    ["10", "40"],
+    ["9", "36"],
+    ["8", "32"],
+    ["7", "28"],
+    ["6", "24"],
+    ["5", "20"],
+    ["4", "16"],
+    ["3", "12"],
+    ["2", "8"],
+    ["1-alt", "6"],
+    ["1", "4"],
+    ["05", "2"],
+    ["0", "0"],
+]);
+exports.legacySpacingTokenMap = legacySpacingTokenMap;
+function convertSpacingToSpace(spacing) {
+    return legacySpacingTokenMap.get(spacing) || null;
+}

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

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformer;
+const lineterminator_1 = require("../../../utils/lineterminator");
+const darkside_utils_1 = require("../darkside.utils");
+function transformer(file, api) {
+    const j = api.jscodeshift;
+    const root = j(file.source);
+    /**
+     * Migrate Primitives to `space` from `spacing`
+     */
+    const primitives = [
+        "Box",
+        "Box.New",
+        "BoxNew",
+        "Hgrid",
+        "Stack",
+        "HStack",
+        "VStack",
+        "Bleed",
+    ];
+    const affectedProps = [
+        "padding",
+        "paddingInline",
+        "paddingBlock",
+        "margin",
+        "marginInline",
+        "marginBlock",
+        "inset",
+        "top",
+        "right",
+        "bottom",
+        "left",
+        "gap",
+    ];
+    for (const primitive of primitives) {
+        const name = (0, darkside_utils_1.findComponentImport)({ file, j, name: primitive });
+        if (!name) {
+            continue;
+        }
+        (0, darkside_utils_1.findJSXElement)({
+            root,
+            j,
+            name,
+            originalName: primitive,
+        }).forEach((path) => {
+            for (const prop of affectedProps) {
+                (0, darkside_utils_1.findProp)({ j, path, name: prop }).forEach((attr) => {
+                    const attrValue = attr.value.value;
+                    if (attrValue.type === "StringLiteral") {
+                        /* padding="32" */
+                        attrValue.value = convertSpacingToSpace(attrValue.value);
+                    }
+                    else if (attrValue.type === "JSXExpressionContainer") {
+                        /* padding={{xs: "16", sm: "32"}} */
+                        const expression = attrValue.expression;
+                        if (expression.type === "ObjectExpression") {
+                            /* xs, md, sm */
+                            expression.properties.forEach((property) => {
+                                if (property.type === "ObjectProperty") {
+                                    if (property.value.type === "StringLiteral") {
+                                        property.value.value = convertSpacingToSpace(property.value.value);
+                                    }
+                                }
+                            });
+                        }
+                    }
+                });
+            }
+        });
+    }
+    return root.toSource((0, lineterminator_1.getLineTerminator)(file.source));
+}
+/**
+ * Takes an old valid spacing-token and returns the new converted space-token
+ * oldValue: "8", "8 10", "8 auto", "auto auto", "full px"
+ * @returns "space-32", "space-32 space-40"
+ */
+function convertSpacingToSpace(oldValue) {
+    const spacingTokens = oldValue.split(" ");
+    const newSpacing = [];
+    for (const spacingToken of spacingTokens) {
+        if (spacingToken === "px") {
+            /* We replace "px" with new `space-1` */
+            newSpacing.push(`space-1`);
+        }
+        else if (["auto", "full", "px"].includes(spacingToken) ||
+            spacingToken.startsWith("space-")) {
+            newSpacing.push(spacingToken);
+        }
+        else if (!darkside_utils_1.legacySpacingTokenMap.get(spacingToken)) {
+            console.warn(`Possibly invalid spacing token found: ${spacingToken}\n`);
+            newSpacing.push(spacingToken);
+        }
+        else {
+            newSpacing.push(`space-${darkside_utils_1.legacySpacingTokenMap.get(spacingToken)}`);
+        }
+    }
+    return newSpacing.join(" ");
+}

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformer;
+const translate_token_1 = require("../../../utils/translate-token");
+const darkside_utils_1 = require("../darkside.utils");
+function transformer(file) {
+    let src = file.source;
+    darkside_utils_1.legacySpacingTokenMap.forEach((newVar, oldVar) => {
+        const oldCSSVar = `--a-spacing-${oldVar}`;
+        const newCSSVar = `--a-space-${newVar}`;
+        const CSSRgx = new RegExp("(" + oldCSSVar + ")", "gm");
+        const SCSSRgx = new RegExp("(\\" + (0, translate_token_1.translateToken)(oldCSSVar, "scss") + ")", "gm");
+        const LESSRgx = new RegExp("(" + (0, translate_token_1.translateToken)(oldCSSVar, "less") + ")", "gm");
+        src = src.replace(CSSRgx, newCSSVar);
+        src = src.replace(SCSSRgx, (0, translate_token_1.translateToken)(newCSSVar, "scss"));
+        src = src.replace(LESSRgx, (0, translate_token_1.translateToken)(newCSSVar, "less"));
+    });
+    return src;
+}

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformer;
+const lineterminator_1 = require("../../../utils/lineterminator");
+const translate_token_1 = require("../../../utils/translate-token");
+const darkside_utils_1 = require("../darkside.utils");
+function transformer(file, api) {
+    const j = api.jscodeshift;
+    let root = j(file.source);
+    darkside_utils_1.legacySpacingTokenMap.forEach((newVar, oldVar) => {
+        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, darkside_utils_1.findComponentImport)({
+            file,
+            j,
+            name: oldCSSVar,
+            packageType: "tokens",
+        });
+        if (!name) {
+            return;
+        }
+        let code = root.toSource((0, lineterminator_1.getLineTerminator)(file.source));
+        const rgx = new RegExp("(" + oldCSSVar + ")", "gm");
+        code = code.replace(rgx, newCSSVar);
+        root = j(code);
+    });
+    return root.toSource((0, lineterminator_1.getLineTerminator)(file.source));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "7.14.2",
+  "version": "7.15.0",
   "description": "Aksel command line interface. Handles css-imports, codemods and more",
   "author": "Aksel | Nav designsystem team",
   "license": "MIT",
@@ -29,7 +29,7 @@
   },
   "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
   "dependencies": {
-    "@navikt/ds-css": "^7.14.2",
+    "@navikt/ds-css": "^7.15.0",
     "axios": "1.7.4",
     "chalk": "4.1.0",
     "clipboardy": "^2.3.0",