@navikt/aksel 7.17.3 → 7.17.4

package/dist/codemod/codeshift.utils.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GLOB_IGNORE_PATTERNS = void 0;
+exports.getDefaultGlob = getDefaultGlob;
+exports.cleanExtensions = cleanExtensions;
+const GLOB_IGNORE_PATTERNS = [
+    "**/node_modules/**",
+    "**/dist/**",
+    "**/build/**",
+    "**/lib/**",
+    "**/.next/**",
+    "**/__snapshots__/**",
+];
+exports.GLOB_IGNORE_PATTERNS = GLOB_IGNORE_PATTERNS;
+/**
+ * Utility function to generate the default glob pattern
+ */
+function getDefaultGlob(ext) {
+    const defaultExt = "js,ts,jsx,tsx,css,scss,less";
+    return `**/*.{${cleanExtensions(ext !== null && ext !== void 0 ? ext : defaultExt).join(",")}}`;
+}
+/**
+ * Utility function to clean file extensions
+ */
+function cleanExtensions(ext) {
+    return ext
+        .split(",")
+        .map((e) => e.trim())
+        .map((e) => e.replace(".", ""));
+}

package/dist/codemod/migrations.js

@@ -89,31 +89,28 @@ 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: [
+    spacing: [
         {
             description: "Updates all Primitives to use new `space`-tokens. (Works with old and new system)",
             value: "primitive-spacing",
-            path: "darkside/primitives-spacing/spacing",
+            path: "spacing/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",
+            path: "spacing/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",
-        },
-        {
-            description: "Updates css, scss and less-variables to use new token-prefix",
-            value: "token-update",
-            path: "darkside/token-update/token-update",
+            path: "spacing/token-spacing-js/spacing",
         },
+    ],
+    darkside: [
         {
-            description: "Updates js tokens to use new token-prefix and names",
-            value: "token-update-js",
-            path: "darkside/token-update-js/token-update-js",
+            description: "marks deprecated prop usage with comments.",
+            value: "prop-deprecate",
+            path: "darkside/prop-deprecate/prop-deprecate",
         },
     ],
 };

package/dist/codemod/run-codeshift.js

@@ -35,12 +35,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.messages = void 0;
 exports.runCodeshift = runCodeshift;
 const chalk_1 = __importDefault(require("chalk"));
 const fast_glob_1 = __importDefault(require("fast-glob"));
 const jscodeshift = __importStar(require("jscodeshift/src/Runner"));
 const path_1 = __importDefault(require("path"));
+const codeshift_utils_1 = require("./codeshift.utils");
 const migrations_1 = require("./migrations");
 const ignoreNodeModules = [
     "**/node_modules/**",
@@ -49,14 +49,13 @@ const ignoreNodeModules = [
     "**/lib/**",
     "**/.next/**",
 ];
-exports.messages = new Map();
 function runCodeshift(input, options, program) {
     return __awaiter(this, void 0, void 0, function* () {
         var _a;
         const codemodPath = path_1.default.join(__dirname, `./transforms/${(0, migrations_1.getMigrationPath)(input)}.js`);
-        const filepaths = fast_glob_1.default.sync([(_a = options.glob) !== null && _a !== void 0 ? _a : getDefaultGlob(options === null || options === void 0 ? void 0 : options.ext)], {
+        const filepaths = fast_glob_1.default.sync([(_a = options.glob) !== null && _a !== void 0 ? _a : (0, codeshift_utils_1.getDefaultGlob)(options === null || options === void 0 ? void 0 : options.ext)], {
             cwd: process.cwd(),
-            ignore: ignoreNodeModules,
+            ignore: codeshift_utils_1.GLOB_IGNORE_PATTERNS,
         });
         console.info("\nRunning migration:", chalk_1.default.green("input"));
         (options === null || options === void 0 ? void 0 : options.glob) && console.info(`Using glob: ${chalk_1.default.green(options.glob)}\n`);
@@ -76,22 +75,9 @@ function runCodeshift(input, options, program) {
                 print: options === null || options === void 0 ? void 0 : options.print,
             });
             warning && console.info(`\n${chalk_1.default.yellow(warning)}\n`);
-            exports.messages.forEach((value) => {
-                value.format(value.data);
-            });
         }
         catch (error) {
             program.error(chalk_1.default.red("Error:", error.message));
         }
     });
 }
-function getDefaultGlob(ext) {
-    const defaultExt = "js,ts,jsx,tsx,css,scss,less";
-    return `**/*.{${cleanExtensions(ext !== null && ext !== void 0 ? ext : defaultExt).join(",")}}`;
-}
-function cleanExtensions(ext) {
-    return ext
-        .split(",")
-        .map((e) => e.trim())
-        .map((e) => e.replace(".", ""));
-}

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

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformer;
+const ast_1 = require("../../../utils/ast");
+const lineterminator_1 = require("../../../utils/lineterminator");
+const removeProps_1 = __importDefault(require("../../../utils/removeProps"));
+const deprecationMap = {
+    Accordion: ["headingSize", "variant"],
+    Popover: ["arrow"],
+    Page: ["background"],
+};
+function transformer(file, api) {
+    const j = api.jscodeshift;
+    const root = j(file.source);
+    const toSourceOptions = (0, lineterminator_1.getLineTerminator)(file.source);
+    for (const [component, props] of Object.entries(deprecationMap)) {
+        const sourceName = (0, ast_1.findComponentImport)({
+            file,
+            j,
+            name: component,
+            packageType: "react",
+        });
+        if (!sourceName) {
+            continue;
+        }
+        (0, removeProps_1.default)(j, root, sourceName, props);
+    }
+    return root.toSource(toSourceOptions);
+}

package/dist/codemod/transforms/{darkside → spacing}/primitives-spacing/spacing.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = transformer;
+const ast_1 = require("../../../utils/ast");
 const lineterminator_1 = require("../../../utils/lineterminator");
-const darkside_utils_1 = require("../darkside.utils");
+const spacing_utils_1 = require("../spacing.utils");
 function transformer(file, api) {
     const j = api.jscodeshift;
     const root = j(file.source);
@@ -34,18 +35,18 @@ function transformer(file, api) {
         "gap",
     ];
     for (const primitive of primitives) {
-        const name = (0, darkside_utils_1.findComponentImport)({ file, j, name: primitive });
+        const name = (0, ast_1.findComponentImport)({ file, j, name: primitive });
         if (!name) {
             continue;
         }
-        (0, darkside_utils_1.findJSXElement)({
+        (0, ast_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) => {
+                (0, ast_1.findProp)({ j, path, name: prop }).forEach((attr) => {
                     const attrValue = attr.value.value;
                     if (attrValue.type === "StringLiteral") {
                         /* padding="32" */
@@ -88,12 +89,12 @@ function convertSpacingToSpace(oldValue) {
             spacingToken.startsWith("space-")) {
             newSpacing.push(spacingToken);
         }
-        else if (!darkside_utils_1.legacySpacingTokenMap.get(spacingToken)) {
+        else if (!spacing_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)}`);
+            newSpacing.push(`space-${spacing_utils_1.legacySpacingTokenMap.get(spacingToken)}`);
         }
     }
     return newSpacing.join(" ");

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.legacySpacingTokenMap = void 0;
+exports.convertSpacingToSpace = convertSpacingToSpace;
+/**
+ * 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 → spacing}/token-spacing/spacing.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = transformer;
 const translate_token_1 = require("../../../utils/translate-token");
-const darkside_utils_1 = require("../darkside.utils");
+const spacing_utils_1 = require("../spacing.utils");
 function transformer(file) {
     let src = file.source;
-    darkside_utils_1.legacySpacingTokenMap.forEach((newVar, oldVar) => {
+    spacing_utils_1.legacySpacingTokenMap.forEach((newVar, oldVar) => {
         const oldCSSVar = `--a-spacing-${oldVar}`;
         const newCSSVar = `--a-space-${newVar}`;
         const CSSRgx = new RegExp("(" + oldCSSVar + ")", "gm");

package/dist/codemod/transforms/{darkside → spacing}/token-spacing-js/spacing.js

@@ -1,16 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = transformer;
+const ast_1 = require("../../../utils/ast");
 const lineterminator_1 = require("../../../utils/lineterminator");
 const translate_token_1 = require("../../../utils/translate-token");
-const darkside_utils_1 = require("../darkside.utils");
+const spacing_utils_1 = require("../spacing.utils");
 function transformer(file, api) {
     const j = api.jscodeshift;
     let root = j(file.source);
-    darkside_utils_1.legacySpacingTokenMap.forEach((newVar, oldVar) => {
+    spacing_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)({
+        const name = (0, ast_1.findComponentImport)({
             file,
             j,
             name: oldCSSVar,

package/dist/codemod/transforms/v2.0.0/update-js-tokens/update-js-tokens.js

@@ -16,7 +16,7 @@ function transformer(file, api) {
     const jsImport = root.find(j.ImportDeclaration).filter((x) => {
         return ["@navikt/ds-tokens/dist/tokens"].includes(x.node.source.value);
     });
-    if (!jsImport) {
+    if (jsImport.size() === 0) {
         return src;
     }
     tokens_map_js_1.tokens.forEach((token) => {

package/dist/codemod/{transforms/darkside/darkside.utils.js → utils/ast.js}

@@ -1,10 +1,8 @@
 "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.
@@ -88,33 +86,3 @@ function isAkselTokensImport(path) {
     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/darkside/config/TokenStatus.js

@@ -0,0 +1,145 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TokenStatus = void 0;
+const chalk_1 = __importDefault(require("chalk"));
+const cli_progress_1 = __importDefault(require("cli-progress"));
+class TokenStatus {
+    constructor() {
+        this.initStatus();
+    }
+    initStatus() {
+        this.status = {
+            css: { legacy: [], updated: [] },
+            scss: { legacy: [], updated: [] },
+            less: { legacy: [], updated: [] },
+            js: { legacy: [], updated: [] },
+            tailwind: { legacy: [], updated: [] },
+            component: { legacy: [], updated: [] },
+        };
+    }
+    add(_a) {
+        var { isLegacy, type } = _a, hit = __rest(_a, ["isLegacy", "type"]);
+        const statusType = isLegacy ? "legacy" : "updated";
+        switch (type) {
+            case "css":
+                this.status.css[statusType].push(hit);
+                break;
+            case "scss":
+                this.status.scss[statusType].push(hit);
+                break;
+            case "less":
+                this.status.less[statusType].push(hit);
+                break;
+            case "js":
+                this.status.js[statusType].push(hit);
+                break;
+            case "tailwind":
+                this.status.tailwind[statusType].push(hit);
+                break;
+        }
+    }
+    printStatusForAll() {
+        Object.keys(this.status).forEach((type) => {
+            this.printStatus(type);
+        });
+        console.info("\n");
+    }
+    printStatus(type) {
+        let statusDataObj;
+        if (type === "summary") {
+            statusDataObj = {
+                legacy: [].concat(...Object.values(this.status).map((_status) => _status.legacy)),
+                updated: [].concat(...Object.values(this.status).map((_status) => _status.updated)),
+            };
+            const uniqueFiles = new Set(statusDataObj.legacy.map((token) => token.fileName));
+            const automigratedN = statusDataObj.legacy.filter((legacy) => legacy.canAutoMigrate).length;
+            console.info(`Files with legacy tokens: ${uniqueFiles.size}`);
+            const autoMigratePercentage = statusDataObj.legacy.length
+                ? Math.round((automigratedN / statusDataObj.legacy.length) * 100)
+                : 0;
+            console.info(`You have ${statusDataObj.legacy.length} total tokens that need to be updated. Of these, ${automigratedN} (${autoMigratePercentage}%) can be automatically migrated for you.`);
+        }
+        else {
+            statusDataObj = this.status[type];
+        }
+        const multibar = new cli_progress_1.default.MultiBar({
+            clearOnComplete: false,
+            hideCursor: true,
+            format: "{bar} {type} | {count} | {value}/{total}",
+        }, cli_progress_1.default.Presets.shades_grey);
+        const totalTokens = statusDataObj.legacy.length + statusDataObj.updated.length;
+        const completedPercentage = (totalTokens === 0
+            ? 100
+            : (statusDataObj.updated.length / totalTokens) * 100).toFixed(0);
+        console.info(`\n${type.toUpperCase()} (${completedPercentage}%)`);
+        multibar.create(totalTokens, statusDataObj.updated.length, {
+            type: "Tokens left to update",
+            count: statusDataObj.legacy.length,
+        });
+        const canBeAutomigratedN = statusDataObj.legacy.filter((legacy) => legacy.canAutoMigrate).length;
+        multibar.create(statusDataObj.legacy.length, canBeAutomigratedN, {
+            type: "Can be auto-migrated ",
+            count: canBeAutomigratedN,
+        });
+        multibar.stop();
+    }
+    printMigrationHelp() {
+        const imports = {
+            css: {
+                old: `import "@navikt/ds-tokens";`,
+                new: `import "@navikt/ds-tokens/darkside-css";`,
+            },
+            scss: {
+                old: `@use '@navikt/ds-tokens/dist/tokens' as *;`,
+                new: `@use "@navikt/ds-tokens/darkside-scss" as *;`,
+            },
+            less: {
+                old: `@import "~@navikt/ds-tokens/dist/tokens.less";`,
+                new: `@import "~@navikt/ds-tokens/darkside-less";`,
+            },
+            js: {
+                old: `import { ... } from "@navikt/ds-tokens/dist/tokens";`,
+                new: `import { ... } from "@navikt/ds-tokens/darkside-js";`,
+            },
+            tailwind: {
+                old: `import config from "@navikt/ds-tailwind";`,
+                new: `import config from "@navikt/ds-tailwind/darkside-tw3";`,
+            },
+        };
+        for (const key of Object.keys(imports)) {
+            const data = this.status[key];
+            const legacyNeeded = data.legacy.length > 0;
+            const foundUse = legacyNeeded || data.updated.length > 0;
+            if (!foundUse) {
+                continue;
+            }
+            console.info(chalk_1.default.underline(`\n${key.toUpperCase()} Tokens Migration`));
+            const importStrings = imports[key];
+            console.info(`${chalk_1.default.blue("→")} Add new import: ${chalk_1.default.green(importStrings.new)}`);
+            if (legacyNeeded) {
+                console.info(`${chalk_1.default.yellow("!")} Keep old import until fully migrated: ${chalk_1.default.dim(importStrings.old)}`);
+            }
+        }
+        const componentTokens = this.status.component.legacy.length;
+        if (componentTokens > 0) {
+            console.info(chalk_1.default.underline(`COMPONENT Tokens Migration`));
+            console.info(`We no longer support component tokens. Please migrate to the new darkside tokens. using theming or other methods.`);
+            console.info(`You can read more at https://aksel.nav.no/darkside`);
+        }
+    }
+}
+exports.TokenStatus = TokenStatus;