@navikt/aksel 7.34.0 → 7.35.1

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformer;
+const move_variant_to_data_color_1 = require("../../../utils/move-variant-to-data-color");
+const migrationConfigToggleSub = {
+    component: "Chips.Toggle",
+    prop: "variant",
+    changes: {
+        action: { color: "accent" },
+        neutral: { color: "neutral" },
+    },
+};
+const migrationConfigToggleDirect = Object.assign(Object.assign({}, migrationConfigToggleSub), { component: "ChipsToggle" });
+const migrationConfigRemovableSub = Object.assign(Object.assign({}, migrationConfigToggleSub), { component: "Chips.Removable" });
+const migrationConfigRemovableDirect = Object.assign(Object.assign({}, migrationConfigToggleSub), { component: "ChipsRemovable" });
+function transformer(file, api) {
+    const configs = [
+        migrationConfigToggleSub,
+        migrationConfigToggleDirect,
+        migrationConfigRemovableSub,
+        migrationConfigRemovableDirect,
+    ];
+    let source = file.source;
+    for (const config of configs) {
+        const newSource = (0, move_variant_to_data_color_1.moveVariantToDataColor)(Object.assign(Object.assign({}, file), { source }), api, config);
+        if (newSource) {
+            source = newSource;
+        }
+    }
+    return source;
+}

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/ast.js

@@ -64,7 +64,7 @@ function findJSXElement(input) {
  */
 function findProps(input) {
     const { j, path, name } = input;
-    return j(path).find(j.JSXAttribute, {
+    return j(path.get("openingElement")).find(j.JSXAttribute, {
         name: {
             name,
         },

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/darkside/index.js

@@ -6,23 +6,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.darksideCommand = darksideCommand;
 const chalk_1 = __importDefault(require("chalk"));
 const commander_1 = require("commander");
-const validation_js_1 = require("../codemod/validation.js");
-// import figlet from "figlet";
-// import { getMigrationString } from "./migrations.js";
 const run_tooling_js_1 = require("./run-tooling.js");
 const program = new commander_1.Command();
 function darksideCommand() {
-    program.name(`${chalk_1.default.blueBright(`npx @navikt/aksel`)}`);
+    program.name(`${chalk_1.default.blueBright(`npx @navikt/aksel v8-tokens`)}`);
     program
         .option("-g, --glob [glob]", "Globbing pattern, overrides --ext! Run with 'noglob' if using zsh-terminal. ")
+        .option("-e, --ext [ext]", "File extensions to include, defaults to 'js,ts,jsx,tsx,css,scss,less'")
         .option("-d, --dry-run", "Dry run, no changes will be made")
         .option("-f, --force", "Forcibly run updates without checking git-changes")
-        .description("Update tool for darkside token updates");
+        .description("Update tool for v8 token updates");
     program.parse();
     const options = program.opts();
-    /* Makes sure that you don't migrate lots of files while having other uncommitted changes */
-    if (!options.force) {
-        (0, validation_js_1.validateGit)(options, program);
-    }
     (0, run_tooling_js_1.runTooling)(options, program);
 }