@navikt/aksel 7.34.0 → 7.35.0

package/dist/codemod/transforms/v8.0.0/list/list.js

@@ -0,0 +1,218 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformer;
+const lineterminator_1 = require("../../../utils/lineterminator");
+const headingSizeMap = {
+    small: "xsmall",
+    medium: "small",
+    large: "medium",
+};
+const bodySizeMap = {
+    small: "small",
+    medium: "medium",
+    large: "large",
+};
+const boxMarginMap = {
+    small: "space-12",
+    medium: "space-16",
+    large: "space-16",
+};
+function transformer(file, api) {
+    var _a;
+    const j = api.jscodeshift;
+    const root = j(file.source);
+    let localListName = "List";
+    let hasListImport = false;
+    let dsReactImportPath = null;
+    let localHeadingName = "Heading";
+    let hasHeadingImport = false;
+    let localBodyShortName = "BodyShort";
+    let hasBodyShortImport = false;
+    let localBoxName = "Box";
+    let hasBoxImport = false;
+    // Find the local name for List import
+    root.find(j.ImportDeclaration).forEach((path) => {
+        var _a, _b;
+        if (path.node.source.value === "@navikt/ds-react") {
+            dsReactImportPath = path;
+            (_a = path.node.specifiers) === null || _a === void 0 ? void 0 : _a.forEach((specifier) => {
+                var _a, _b, _c, _d;
+                if (specifier.type === "ImportSpecifier") {
+                    if (specifier.imported.name === "List") {
+                        localListName = ((_a = specifier.local) === null || _a === void 0 ? void 0 : _a.name) || "List";
+                        hasListImport = true;
+                    }
+                    if (specifier.imported.name === "Heading") {
+                        localHeadingName = ((_b = specifier.local) === null || _b === void 0 ? void 0 : _b.name) || "Heading";
+                        hasHeadingImport = true;
+                    }
+                    if (specifier.imported.name === "BodyShort") {
+                        localBodyShortName = ((_c = specifier.local) === null || _c === void 0 ? void 0 : _c.name) || "BodyShort";
+                        hasBodyShortImport = true;
+                    }
+                    if (specifier.imported.name === "Box") {
+                        localBoxName = ((_d = specifier.local) === null || _d === void 0 ? void 0 : _d.name) || "Box";
+                        hasBoxImport = true;
+                    }
+                }
+            });
+        }
+        else if (path.node.source.value === "@navikt/ds-react/List") {
+            (_b = path.node.specifiers) === null || _b === void 0 ? void 0 : _b.forEach((specifier) => {
+                var _a;
+                if (specifier.type === "ImportSpecifier") {
+                    if (specifier.imported.name === "List") {
+                        localListName = ((_a = specifier.local) === null || _a === void 0 ? void 0 : _a.name) || "List";
+                        hasListImport = true;
+                    }
+                }
+            });
+        }
+    });
+    if (!hasListImport) {
+        return root.toSource((0, lineterminator_1.getLineTerminator)(file.source));
+    }
+    const newImports = new Set();
+    root
+        .find(j.JSXElement, {
+        openingElement: { name: { name: localListName } },
+    })
+        .forEach((path) => {
+        var _a, _b;
+        const attributes = path.node.openingElement.attributes;
+        const titleAttr = attributes.find((attr) => attr.type === "JSXAttribute" && attr.name.name === "title");
+        const descAttr = attributes.find((attr) => attr.type === "JSXAttribute" && attr.name.name === "description");
+        if (attributes.some((attr) => attr.type === "JSXAttribute" &&
+            attr.name.name === "data-aksel-migrated-v8")) {
+            return;
+        }
+        const headingTagAttr = attributes.find((attr) => attr.type === "JSXAttribute" && attr.name.name === "headingTag");
+        const sizeAttr = attributes.find((attr) => attr.type === "JSXAttribute" && attr.name.name === "size");
+        // Extract values
+        const titleValue = titleAttr === null || titleAttr === void 0 ? void 0 : titleAttr.value;
+        const descValue = descAttr === null || descAttr === void 0 ? void 0 : descAttr.value;
+        let sizeValue = "medium";
+        if (sizeAttr && ((_a = sizeAttr.value) === null || _a === void 0 ? void 0 : _a.type) === "StringLiteral") {
+            sizeValue = sizeAttr.value.value;
+        }
+        let headingAs = "h3";
+        if (headingTagAttr && ((_b = headingTagAttr.value) === null || _b === void 0 ? void 0 : _b.type) === "StringLiteral") {
+            headingAs = headingTagAttr.value.value;
+        }
+        // Separate attributes
+        const listAttributes = [
+            j.jsxAttribute(j.jsxIdentifier("data-aksel-migrated-v8")),
+        ];
+        const divAttributes = [];
+        attributes.forEach((attr) => {
+            if (attr.type !== "JSXAttribute") {
+                // Spread attributes or others -> move to div
+                divAttributes.push(attr);
+                return;
+            }
+            const name = attr.name.name;
+            if (name === "title" ||
+                name === "description" ||
+                name === "headingTag") {
+                // Handled separately
+                return;
+            }
+            if (name === "size" ||
+                name === "as" ||
+                name === "aria-label" ||
+                name === "aria-labelledby") {
+                listAttributes.push(attr);
+            }
+            else {
+                divAttributes.push(attr);
+            }
+        });
+        const newNodes = [];
+        // Create Heading
+        if (titleValue) {
+            if (!hasHeadingImport) {
+                newImports.add("Heading");
+            }
+            const headingAttrs = [
+                j.jsxAttribute(j.jsxIdentifier("as"), j.stringLiteral(headingAs)),
+            ];
+            const mappedSize = headingSizeMap[sizeValue];
+            if (mappedSize) {
+                headingAttrs.push(j.jsxAttribute(j.jsxIdentifier("size"), j.stringLiteral(mappedSize)));
+            }
+            let children = [];
+            if (titleValue.type === "StringLiteral") {
+                children = [j.jsxText(titleValue.value)];
+            }
+            else if (titleValue.type === "JSXExpressionContainer") {
+                children = [titleValue];
+            }
+            const heading = j.jsxElement(j.jsxOpeningElement(j.jsxIdentifier(localHeadingName), headingAttrs), j.jsxClosingElement(j.jsxIdentifier(localHeadingName)), children);
+            newNodes.push(heading);
+        }
+        // Create BodyShort
+        if (descValue) {
+            if (!hasBodyShortImport) {
+                newImports.add("BodyShort");
+            }
+            const bodyAttrs = [];
+            const mappedSize = bodySizeMap[sizeValue];
+            if (mappedSize && mappedSize !== "medium") {
+                bodyAttrs.push(j.jsxAttribute(j.jsxIdentifier("size"), j.stringLiteral(mappedSize)));
+            }
+            let children = [];
+            if (descValue.type === "StringLiteral") {
+                children = [j.jsxText(descValue.value)];
+            }
+            else if (descValue.type === "JSXExpressionContainer") {
+                children = [descValue];
+            }
+            const body = j.jsxElement(j.jsxOpeningElement(j.jsxIdentifier(localBodyShortName), bodyAttrs), j.jsxClosingElement(j.jsxIdentifier(localBodyShortName)), children);
+            newNodes.push(body);
+        }
+        // Create Box
+        if (!hasBoxImport) {
+            newImports.add("Box");
+        }
+        const boxAttrs = [
+            j.jsxAttribute(j.jsxIdentifier("marginBlock"), j.stringLiteral(boxMarginMap[sizeValue] || "space-16")),
+            j.jsxAttribute(j.jsxIdentifier("asChild")),
+        ];
+        // Reconstruct List element
+        const newList = j.jsxElement(j.jsxOpeningElement(j.jsxIdentifier(localListName), listAttributes), path.node.closingElement, path.node.children);
+        const box = j.jsxElement(j.jsxOpeningElement(j.jsxIdentifier(localBoxName), boxAttrs), j.jsxClosingElement(j.jsxIdentifier(localBoxName)), [newList]);
+        newNodes.push(box);
+        // Wrap in div
+        if (newNodes.length === 1 && divAttributes.length === 0) {
+            j(path).replaceWith(newNodes[0]);
+        }
+        else {
+            const div = j.jsxElement(j.jsxOpeningElement(j.jsxIdentifier("div"), divAttributes), j.jsxClosingElement(j.jsxIdentifier("div")), newNodes);
+            j(path).replaceWith(div);
+        }
+    });
+    // Add imports
+    if (newImports.size > 0) {
+        if (dsReactImportPath) {
+            const existingSpecifiers = new Set((_a = dsReactImportPath.node.specifiers) === null || _a === void 0 ? void 0 : _a.map((specifier) => { var _a; return (_a = specifier.local) === null || _a === void 0 ? void 0 : _a.name; }));
+            newImports.forEach((imp) => {
+                var _a;
+                if (!existingSpecifiers.has(imp)) {
+                    (_a = dsReactImportPath.node.specifiers) === null || _a === void 0 ? void 0 : _a.push(j.importSpecifier(j.identifier(imp)));
+                }
+            });
+        }
+        else {
+            const specifiers = Array.from(newImports).map((imp) => j.importSpecifier(j.identifier(imp)));
+            const newImportDecl = j.importDeclaration(specifiers, j.stringLiteral("@navikt/ds-react"));
+            const lastImport = root.find(j.ImportDeclaration).at(-1);
+            if (lastImport.length > 0) {
+                lastImport.insertAfter(newImportDecl);
+            }
+            else {
+                root.get().node.program.body.unshift(newImportDecl);
+            }
+        }
+    }
+    return root.toSource((0, lineterminator_1.getLineTerminator)(file.source));
+}

package/dist/codemod/transforms/{darkside → v8.0.0}/prop-deprecate/prop-deprecate.js

@@ -8,7 +8,7 @@ const ast_1 = require("../../../utils/ast");
 const lineterminator_1 = require("../../../utils/lineterminator");
 const removeProps_1 = __importDefault(require("../../../utils/removeProps"));
 const deprecationMap = {
-    Accordion: ["headingSize", "variant"],
+    Accordion: ["headingSize"],
     Popover: ["arrow"],
     Page: ["background"],
 };

package/dist/codemod/transforms/v8.0.0/tag-variant/tag-variant.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.migrationConfig = void 0;
+exports.default = transformer;
+const move_variant_to_data_color_1 = require("../../../utils/move-variant-to-data-color");
+exports.migrationConfig = {
+    component: "Tag",
+    prop: "variant",
+    changes: {
+        warning: { replacement: "outline", color: "warning" },
+        "warning-moderate": { replacement: "moderate", color: "warning" },
+        "warning-filled": { replacement: "strong", color: "warning" },
+        error: { replacement: "outline", color: "danger" },
+        "error-moderate": { replacement: "moderate", color: "danger" },
+        "error-filled": { replacement: "strong", color: "danger" },
+        info: { replacement: "outline", color: "info" },
+        "info-moderate": { replacement: "moderate", color: "info" },
+        "info-filled": { replacement: "strong", color: "info" },
+        success: { replacement: "outline", color: "success" },
+        "success-moderate": { replacement: "moderate", color: "success" },
+        "success-filled": { replacement: "strong", color: "success" },
+        neutral: { replacement: "outline", color: "neutral" },
+        "neutral-moderate": { replacement: "moderate", color: "neutral" },
+        "neutral-filled": { replacement: "strong", color: "neutral" },
+        alt1: { replacement: "outline", color: "meta-purple" },
+        "alt1-moderate": { replacement: "moderate", color: "meta-purple" },
+        "alt1-filled": { replacement: "strong", color: "meta-purple" },
+        alt2: { replacement: "outline", color: "meta-lime" },
+        "alt2-moderate": { replacement: "moderate", color: "meta-lime" },
+        "alt2-filled": { replacement: "strong", color: "meta-lime" },
+        alt3: { replacement: "outline", color: "info" },
+        "alt3-moderate": { replacement: "moderate", color: "info" },
+        "alt3-filled": { replacement: "strong", color: "info" },
+    },
+};
+function transformer(file, api) {
+    return (0, move_variant_to_data_color_1.moveVariantToDataColor)(file, api, exports.migrationConfig);
+}

package/dist/codemod/transforms/v8.0.0/toggle-group-variant/toggle-group-variant.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.migrationConfig = void 0;
+exports.default = transformer;
+const move_variant_to_data_color_1 = require("../../../utils/move-variant-to-data-color");
+exports.migrationConfig = {
+    component: "ToggleGroup",
+    prop: "variant",
+    changes: {
+        action: { color: "accent" },
+        neutral: { color: "neutral" },
+    },
+};
+function transformer(file, api) {
+    return (0, move_variant_to_data_color_1.moveVariantToDataColor)(file, api, exports.migrationConfig);
+}

package/dist/codemod/utils/check.js

@@ -46,6 +46,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.check = check;
+exports.checkScenarios = checkScenarios;
+exports.checkMoveVariantToDataColor = checkMoveVariantToDataColor;
 const testUtils_1 = require("jscodeshift/dist/testUtils");
 const node_fs_1 = __importDefault(require("node:fs"));
 const node_path_1 = __importDefault(require("node:path"));
@@ -74,3 +76,36 @@ function check(dirName, { fixture, migration, extension = "js", options = {} })
         }));
     });
 }
+function checkScenarios(dirName, { migration, scenarios, extension = "js", options = {} }) {
+    (0, vitest_1.describe)(migration, () => {
+        const parser = extension;
+        for (const [name, { input, output: expected }] of Object.entries(scenarios)) {
+            (0, vitest_1.test)(name, () => __awaiter(this, void 0, void 0, function* () {
+                const module = yield Promise.resolve(`${node_path_1.default.join(dirName, "..", migration)}`).then(s => __importStar(require(s)));
+                const output = (0, testUtils_1.applyTransform)(Object.assign(Object.assign({}, module), { parser: "tsx" }), options, {
+                    source: input,
+                });
+                (0, vitest_1.expect)(yield prettier_1.default.format(output, {
+                    parser: parser === "js" ? "typescript" : parser,
+                })).toBe(yield prettier_1.default.format(expected, {
+                    parser: parser === "js" ? "typescript" : parser,
+                }));
+            }));
+        }
+    });
+}
+function checkMoveVariantToDataColor(dirName, { migration, config, }) {
+    const scenarios = {};
+    for (const [variant, change] of Object.entries(config.changes)) {
+        const input = `import { ${config.component} } from "@navikt/ds-react";
+<${config.component} ${config.prop}="${variant}">Text</${config.component}>;`;
+        let outputAttrs = `data-color="${change.color}"`;
+        if (change.replacement) {
+            outputAttrs += ` ${config.prop}="${change.replacement}"`;
+        }
+        const output = `import { ${config.component} } from "@navikt/ds-react";
+<${config.component} ${outputAttrs}>Text</${config.component}>;`;
+        scenarios[`should migrate ${variant}`] = { input, output };
+    }
+    checkScenarios(dirName, { migration, scenarios });
+}

package/dist/codemod/utils/move-variant-to-data-color.js

@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.moveVariantToDataColor = moveVariantToDataColor;
+const lineterminator_1 = require("./lineterminator");
+function moveVariantToDataColor(file, api, config) {
+    const j = api.jscodeshift;
+    const root = j(file.source);
+    /* Find all imports from @navikt/ds-react */
+    const imports = root.find(j.ImportDeclaration).filter((path) => {
+        const sourceValue = path.value.source.value;
+        return (typeof sourceValue === "string" &&
+            (sourceValue === "@navikt/ds-react" ||
+                sourceValue.startsWith("@navikt/ds-react/")));
+    });
+    if (imports.size() === 0) {
+        return null;
+    }
+    const [rootComponent, subComponent] = config.component.split(".");
+    let localName = "";
+    imports.forEach((path) => {
+        var _a;
+        (_a = path.value.specifiers) === null || _a === void 0 ? void 0 : _a.forEach((specifier) => {
+            var _a;
+            if (specifier.type === "ImportSpecifier" &&
+                specifier.imported.name === rootComponent) {
+                localName = ((_a = specifier.local) === null || _a === void 0 ? void 0 : _a.name) || specifier.imported.name;
+            }
+        });
+    });
+    if (!localName) {
+        return null;
+    }
+    const elementSearch = subComponent
+        ? {
+            openingElement: {
+                name: {
+                    type: "JSXMemberExpression",
+                    object: { name: localName },
+                    property: { name: subComponent },
+                },
+            },
+        }
+        : { openingElement: { name: { name: localName } } };
+    root.find(j.JSXElement, elementSearch).forEach((path) => {
+        var _a;
+        const attributes = path.value.openingElement.attributes;
+        if (!attributes)
+            return;
+        let variantPropIndex = -1;
+        let colorPropIndex = -1;
+        let variantValue = "";
+        attributes.forEach((attr, index) => {
+            if (attr.type !== "JSXAttribute")
+                return;
+            if (attr.name.name === config.prop) {
+                variantPropIndex = index;
+                const value = getStringValue(attr.value);
+                if (value) {
+                    variantValue = value;
+                }
+            }
+            if (attr.name.name === "data-color") {
+                colorPropIndex = index;
+            }
+        });
+        if (variantPropIndex !== -1 && variantValue) {
+            const changeConfig = config.changes[variantValue];
+            if (changeConfig) {
+                const originalAttr = attributes[variantPropIndex];
+                if (originalAttr.type !== "JSXAttribute")
+                    return;
+                // Handle variant prop update or removal
+                if (changeConfig.replacement) {
+                    let newValue;
+                    if (((_a = originalAttr.value) === null || _a === void 0 ? void 0 : _a.type) === "JSXExpressionContainer") {
+                        newValue = j.jsxExpressionContainer(j.literal(changeConfig.replacement));
+                    }
+                    else {
+                        newValue = j.literal(changeConfig.replacement);
+                    }
+                    const newAttr = j.jsxAttribute(j.jsxIdentifier(config.prop), newValue);
+                    newAttr.comments = originalAttr.comments;
+                    attributes[variantPropIndex] = newAttr;
+                }
+                else {
+                    // Remove the variant prop if no replacement is specified
+                    attributes.splice(variantPropIndex, 1);
+                    // Adjust colorPropIndex if it was after the removed prop
+                    if (colorPropIndex > variantPropIndex) {
+                        colorPropIndex--;
+                    }
+                }
+                // Add data-color prop if it doesn't exist
+                if (colorPropIndex === -1) {
+                    const colorAttr = j.jsxAttribute(j.jsxIdentifier("data-color"), j.literal(changeConfig.color));
+                    attributes.unshift(colorAttr);
+                }
+            }
+        }
+    });
+    const toSourceOptions = (0, lineterminator_1.getLineTerminator)(file.source);
+    return root.toSource(toSourceOptions);
+}
+function getStringValue(node) {
+    var _a;
+    if (!node)
+        return null;
+    if (node.type === "StringLiteral" || node.type === "Literal") {
+        return node.value;
+    }
+    if (node.type === "TemplateLiteral" &&
+        node.expressions.length === 0 &&
+        node.quasis.length === 1) {
+        return (_a = node.quasis[0].value.cooked) !== null && _a !== void 0 ? _a : null;
+    }
+    if (node.type === "JSXExpressionContainer") {
+        return getStringValue(node.expression);
+    }
+    return null;
+}

package/dist/help.js

@@ -13,18 +13,8 @@ function helpCommand() {
    - ${chalk_1.default.blueBright("https://aksel.nav.no/grunnleggende/kode/kommandolinje")}
 
 💻 Commands:
-   - ${chalk_1.default.cyan(`npx @navikt/aksel ${chalk_1.default.green("css-imports")}`)}
-   ✔︎ Helps with CSS imports for all Aksel components
-   ✔︎ Supports Static and CDN-imports
-   ✔︎ Handles cascading, tailwind and @layer rules
-
    - ${chalk_1.default.cyan(`npx @navikt/aksel ${chalk_1.default.green("codemod")} ${chalk_1.default.gray("<migration>")}`)}
    ✔︎ Code-transformations for breaking changes when updating Aksel
    ✔︎ Run with ${chalk_1.default.cyan(`${chalk_1.default.green("--help")}`)} to get started!
-
-   - ${chalk_1.default.cyan(`npx @navikt/aksel ${chalk_1.default.green("darkside")} ${chalk_1.default.gray("<task>")}`)}
-   ✔︎ Tooling for migrating to the darkside
-   ✔︎ Check current status and migrate tokens
-   ✔︎ Run with ${chalk_1.default.cyan(`${chalk_1.default.green("--help")}`)} to get started!
 `);
 }

package/dist/index.js

@@ -16,7 +16,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const chalk_1 = __importDefault(require("chalk"));
 const node_fs_1 = __importDefault(require("node:fs"));
 const index_1 = require("./codemod/index");
-const index_2 = require("./css-imports/index");
 const darkside_1 = require("./darkside");
 const help_1 = require("./help");
 run();
@@ -26,18 +25,17 @@ function run() {
             (0, help_1.helpCommand)();
             return;
         }
-        if (process.argv[2] === "css-imports") {
-            yield (0, index_2.cssImportsCommand)();
+        /**
+         * Runs custom tooling for migrating to v8 tokens
+         */
+        if (process.argv[2] === "codemod" && process.argv[3] === "v8-tokens") {
+            (0, darkside_1.darksideCommand)();
             return;
         }
         if (process.argv[2] === "codemod") {
             (0, index_1.codemodCommand)();
             return;
         }
-        if (process.argv[2] === "darkside") {
-            (0, darkside_1.darksideCommand)();
-            return;
-        }
         if (process.argv[2] === "-v" || process.argv[2] === "--version") {
             const pkg = JSON.parse(node_fs_1.default.readFileSync("./package.json").toString()).version;
             console.info(pkg);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@navikt/aksel",
-  "version": "7.34.0",
-  "description": "Aksel command line interface. Handles css-imports, codemods and more",
+  "version": "7.35.0",
+  "description": "Aksel command line interface. Codemods and other utilities for Aksel users.",
   "author": "Aksel | Nav designsystem team",
   "license": "MIT",
   "keywords": [
@@ -32,12 +32,11 @@
     "url": "https://github.com/navikt/aksel/issues"
   },
   "dependencies": {
-    "@navikt/ds-css": "^7.34.0",
-    "@navikt/ds-tokens": "^7.34.0",
+    "@navikt/ds-css": "^7.35.0",
+    "@navikt/ds-tokens": "^7.35.0",
     "axios": "1.13.2",
     "chalk": "4.1.0",
     "cli-progress": "^3.12.0",
-    "clipboardy": "^2.3.0",
     "commander": "10.0.1",
     "enquirer": "^2.3.6",
     "fast-glob": "3.2.11",

package/dist/css-imports/config.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.layerSuffix = exports.ComponentPrefix = void 0;
-exports.ComponentPrefix = "C_";
-exports.layerSuffix = " layer(aksel)";