@navikt/aksel 2.9.2 → 2.9.3-beta.1

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

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const imports_1 = require("../../../utils/imports");
+const translate_token_1 = require("../../../utils/translate-token");
+const tokens_map_mjs_1 = require("../../../tokens-map.mjs");
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function transformer(file, api) {
+    let src = file.source;
+    const j = api.jscodeshift;
+    let root = j(file.source);
+    const jsImport = root.find(j.ImportDeclaration).filter((x) => {
+        return ["@navikt/ds-tokens/dist/tokens"].includes(x.node.source.value);
+    });
+    if (!jsImport) {
+        return src;
+    }
+    tokens_map_mjs_1.tokens.forEach((x) => {
+        const name = (0, translate_token_1.translateToken)(x[0], "js");
+        const out = (0, translate_token_1.translateToken)(x[1], "js");
+        let foundName = "";
+        (0, imports_1.getImportSpecifier)(j, root, name, "@navikt/ds-tokens/dist/tokens").forEach((x) => (foundName = x.node.imported.name));
+        if (name === foundName) {
+            const localName = (0, imports_1.getImportSpecifierName)(j, root, name, "@navikt/ds-tokens/dist/tokens") || name;
+            (0, imports_1.renameImportSpecifier)(j, root, name, out, "@navikt/ds-tokens/dist/tokens");
+            let code = root.toSource();
+            const rgx = new RegExp("(" + localName + ")", "gm");
+            code = code.replace(rgx, out);
+            root = j(code);
+        }
+    });
+    return root.toSource();
+}
+exports.default = transformer;

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const translate_token_1 = require("../../../utils/translate-token");
+const tokens_map_mjs_1 = require("../../../tokens-map.mjs");
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function transformer(file, api) {
+    let src = file.source;
+    tokens_map_mjs_1.tokens.forEach((tok) => {
+        const lessToken = (0, translate_token_1.translateToken)(tok[0], "less");
+        const rgx = new RegExp("(\\" + lessToken + ")", "gm");
+        src = src.replace(rgx, (0, translate_token_1.translateToken)(tok[1], "less"));
+    });
+    return src;
+}
+exports.default = transformer;

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const translate_token_1 = require("../../../utils/translate-token");
+const tokens_map_mjs_1 = require("../../../tokens-map.mjs");
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function transformer(file, api) {
+    let src = file.source;
+    tokens_map_mjs_1.tokens.forEach((tok) => {
+        const scssToken = (0, translate_token_1.translateToken)(tok[0], "scss");
+        const rgx = new RegExp("(\\" + scssToken + ")", "gm");
+        src = src.replace(rgx, (0, translate_token_1.translateToken)(tok[1], "scss"));
+    });
+    return src;
+}
+exports.default = transformer;

package/dist/codemod/utils/check.js

@@ -0,0 +1,66 @@
+"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;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.check = void 0;
+const node_fs_1 = __importDefault(require("node:fs"));
+const node_path_1 = __importDefault(require("node:path"));
+const prettier_1 = __importDefault(require("prettier"));
+const applyTransform = require("jscodeshift/dist/testUtils").applyTransform;
+function check(dirName, { fixture, migration, extension = "js", options = {} }) {
+    describe(migration, () => {
+        it(fixture, () => __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            const fixtureDir = node_path_1.default.join(dirName);
+            const inputPath = node_path_1.default.join(fixtureDir, `${fixture}.input.${extension}`);
+            const parser = extension;
+            const source = node_fs_1.default.readFileSync(inputPath, "utf8");
+            const expected = node_fs_1.default.readFileSync(node_path_1.default.join(fixtureDir, `${fixture}.output.${extension}`), "utf8");
+            // Assumes transform is one level up from tests directory
+            const module = yield (_a = node_path_1.default.join(dirName, "..", migration), Promise.resolve().then(() => __importStar(require(_a))));
+            const output = applyTransform(Object.assign(Object.assign({}, module), { parser: "tsx" }), options, {
+                source,
+            });
+            // Format output and expected with prettier for white spaces and line breaks consistency
+            expect(prettier_1.default.format(output, {
+                parser: parser === "js" ? "typescript" : parser,
+            })).toBe(prettier_1.default.format(expected, {
+                parser: parser === "js" ? "typescript" : parser,
+            }));
+        }));
+    });
+}
+exports.check = check;

package/dist/codemod/utils/imports.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getImportSpecifierName = exports.renameImportSpecifier = exports.getImportSpecifier = void 0;
+function getImportSpecifier(j, source, specifier, sourcePath) {
+    return source
+        .find(j.ImportDeclaration)
+        .filter((path) => path.node.source.value === sourcePath)
+        .find(j.ImportSpecifier)
+        .filter((path) => path.value.imported.name === specifier);
+}
+exports.getImportSpecifier = getImportSpecifier;
+function renameImportSpecifier(j, source, specifier, newSpecifier, sourcePath) {
+    getImportSpecifier(j, source, specifier, sourcePath).replaceWith(j.importSpecifier(j.identifier(newSpecifier)));
+}
+exports.renameImportSpecifier = renameImportSpecifier;
+function getImportSpecifierName(j, source, specifier, sourcePath) {
+    const specifiers = getImportSpecifier(j, source, specifier, sourcePath);
+    return specifiers.length > 0 ? specifiers.nodes()[0].local.name : null;
+}
+exports.getImportSpecifierName = getImportSpecifierName;

package/dist/codemod/utils/rename-props.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function renameProps({ root, componentName, props }) {
+    return root.findJSXElements(componentName).forEach((path) => {
+        path.node.openingElement.attributes.forEach((node) => {
+            if (node.type === "JSXAttribute" &&
+                Object.keys(props).includes(node.name.name)) {
+                node.name.name = props[node.name.name];
+            }
+        });
+    });
+}
+exports.default = renameProps;

package/dist/codemod/utils/translate-token.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.translateToken = void 0;
+const lodash_1 = __importDefault(require("lodash"));
+const translateToken = (token, type) => {
+    switch (type) {
+        case "scss":
+            return token.replace("--", "$");
+        case "less":
+            return token.replace("--", "@");
+        case "js":
+            return lodash_1.default.startCase(token).split(" ").join("");
+        default:
+            return token;
+    }
+};
+exports.translateToken = translateToken;

package/dist/codemod/validation.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateGit = exports.validateMigration = void 0;
+const chalk_1 = __importDefault(require("chalk"));
+const is_git_clean_1 = __importDefault(require("is-git-clean"));
+const migrations_js_1 = require("./migrations.js");
+function validateMigration(str, program) {
+    if (!(0, migrations_js_1.getMigrationNames)().includes(str)) {
+        program.error(chalk_1.default.red(`Migration <${str}> not found!\n${chalk_1.default.gray(`\nAvailable migrations:\n${(0, migrations_js_1.getMigrationString)()}`)}`));
+    }
+    const path = (0, migrations_js_1.getMigrationPath)(str);
+    if (!path) {
+        program.error(chalk_1.default.red(`Code for migration <${str}> not found!\n${chalk_1.default.gray(`\nContact creator (Aksel) to get it fixed!\n`)}`));
+    }
+}
+exports.validateMigration = validateMigration;
+function validateGit(options, program) {
+    if (options.dryRun) {
+        return;
+    }
+    if (options.force) {
+        console.log(chalk_1.default.yellow("Forcing migration without git check"));
+        return;
+    }
+    let clean = false;
+    try {
+        clean = is_git_clean_1.default.sync(process.cwd());
+    }
+    catch (err) {
+        if (err && err.stderr && err.stderr.indexOf("Not a git repository") >= 0) {
+            clean = true;
+        }
+    }
+    if (!clean) {
+        program.error(`${chalk_1.default.yellow("\nBefore we continue, please stash or commit your git changes.")}${"\nYou can use the --force flag to override this safety check."}`);
+    }
+}
+exports.validateGit = validateGit;

package/dist/css-imports/config.js

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

package/dist/css-imports/generate-output.js

@@ -1,3 +1,4 @@
+"use strict";
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -7,20 +8,25 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { ComponentPrefix, layerSuffix } from "./config.js";
-import { formCss, typoCss, componentsCss, StyleMappings, componentDir, rootDir, globalDir, } from "@navikt/ds-css/config/_mappings.js";
-import { inquiry } from "./inquiry.js";
-import clipboard from "clipboardy";
-import lodash from "lodash";
-import chalk from "chalk";
-export function generateImportOutput(answers) {
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateImportOutput = void 0;
+const config_js_1 = require("./config.js");
+const _mappings_1 = require("@navikt/ds-css/config/_mappings");
+const inquiry_1 = require("./inquiry");
+const clipboardy_1 = __importDefault(require("clipboardy"));
+const lodash_1 = __importDefault(require("lodash"));
+const chalk_1 = __importDefault(require("chalk"));
+function generateImportOutput(answers) {
     return __awaiter(this, void 0, void 0, function* () {
         const useCdn = answers.cdn === "yes";
         const useTailwind = answers.tailwind === "yes";
         const version = answers.version;
         const imports = [];
         let importStr = "";
-        yield inquiry(answers, [
+        yield (0, inquiry_1.inquiry)(answers, [
             {
                 type: "select",
                 name: "output",
@@ -48,56 +54,57 @@ ${imports.join("\n")}
             importStr = imports.join("\n");
         }
         if (answers.output.includes("print")) {
-            console.log(chalk.bold.cyan(`\nImports 🚀 \n`));
-            console.log(chalk.green(`${importStr}`));
+            console.log(chalk_1.default.bold.cyan(`\nImports 🚀 \n`));
+            console.log(chalk_1.default.green(`${importStr}`));
         }
         if (useCdn) {
-            console.log(chalk.bold.underline.cyan(`\nNotes on CDN-usage 📝`));
+            console.log(chalk_1.default.bold.underline.cyan(`\nNotes on CDN-usage 📝`));
             console.log(`We recommend using Static imports, then uploading the your bundled static-files to your own CDN-instance.
 ✔︎ This allows you to control the version of the CSS-files with package.json, and avoids desync between ds-react/ds-css.
 ✔︎ Remember to add 'https://cdn.nav.no' to your applications CSP!`);
         }
         if (useTailwind) {
-            console.log(chalk.bold.underline.cyan(`\nNotes on Tailwind-use 📝`));
-            console.log(`When using tailwind with Aksel, you will need to add the postcss plugin ${chalk.cyan("postcss-import")}
+            console.log(chalk_1.default.bold.underline.cyan(`\nNotes on Tailwind-use 📝`));
+            console.log(`When using tailwind with Aksel, you will need to add the postcss plugin ${chalk_1.default.cyan("postcss-import")}
 ✔︎ NPM: https://www.npmjs.com/package/postcss-import
 ✔︎ Read more here: https://aksel.nav.no/grunnleggende/kode/tailwind`);
         }
         if (answers.layers === "yes") {
-            console.log(chalk.bold.underline.cyan(`\nNotes on Layers 📝`));
+            console.log(chalk_1.default.bold.underline.cyan(`\nNotes on Layers 📝`));
             console.log(`Layers is not yet supported in Safari <= 15.3. (https://caniuse.com/css-cascade-layers)`);
         }
-        answers.output.includes("clipboard") && clipboard.writeSync(importStr);
+        answers.output.includes("clipboard") && clipboardy_1.default.writeSync(importStr);
     });
 }
+exports.generateImportOutput = generateImportOutput;
 function simpleOutput(cdn, layers, version) {
     const options = {
-        static: `@import "@navikt/ds-css"${layers ? layerSuffix : ""};`,
+        static: `@import "@navikt/ds-css"${layers ? config_js_1.layerSuffix : ""};`,
         cdn: toCdn("index.css", version),
     };
     return cdn ? options.cdn : options.static;
 }
 function advancedOutput(answers, cdn, layers, version) {
     const imports = ["/* Defaults */"];
-    const baselineImports = answers.imports.filter((x) => !x.startsWith(ComponentPrefix) && x !== "default");
+    const baselineImports = answers.imports.filter((x) => !x.startsWith(config_js_1.ComponentPrefix) && x !== "default");
     const componentImports = answers.imports
-        .filter((x) => x.startsWith(ComponentPrefix) && x !== "components")
-        .map((x) => x.replace(ComponentPrefix, ""));
+        .filter((x) => x.startsWith(config_js_1.ComponentPrefix) && x !== "components")
+        .map((x) => x.replace(config_js_1.ComponentPrefix, ""));
     baselineImports.forEach((x) => {
         cdn
-            ? imports.push(toCdn(`${globalDir}/${x}.css`, version))
-            : imports.push(toCssImport(`${globalDir}/${x}.css`, layers));
+            ? imports.push(toCdn(`${_mappings_1.globalDir}/${x}.css`, version))
+            : imports.push(toCssImport(`${_mappings_1.globalDir}/${x}.css`, layers));
     });
     if (answers["config-type"] === "easy") {
         cdn
-            ? imports.push(toCdn(componentsCss, version))
-            : imports.push(toCssImport(`${rootDir}/${componentsCss}`, layers));
+            ? imports.push(toCdn(_mappings_1.componentsCss, version))
+            : imports.push(toCssImport(`${_mappings_1.rootDir}/${_mappings_1.componentsCss}`, layers));
         return imports;
     }
     const components = new Set();
     componentImports.forEach((x) => {
         var _a;
-        const styleRef = StyleMappings.components.find((y) => y.component === x);
+        const styleRef = _mappings_1.StyleMappings.components.find((y) => y.component === x);
         if (styleRef) {
             components.add(styleRef.main);
             (_a = styleRef === null || styleRef === void 0 ? void 0 : styleRef.dependencies) === null || _a === void 0 ? void 0 : _a.forEach((dep) => components.add(dep));
@@ -106,13 +113,13 @@ function advancedOutput(answers, cdn, layers, version) {
     let componentImportsList = Array.from(components)
         .filter((x) => x.length > 0)
         .sort((a, b) => a.localeCompare(b));
-    if (componentImportsList.find((x) => x === formCss)) {
-        componentImportsList = componentImportsList.filter((x) => x !== formCss);
-        componentImportsList.unshift(formCss);
+    if (componentImportsList.find((x) => x === _mappings_1.formCss)) {
+        componentImportsList = componentImportsList.filter((x) => x !== _mappings_1.formCss);
+        componentImportsList.unshift(_mappings_1.formCss);
     }
-    if (componentImportsList.find((x) => x === typoCss)) {
-        componentImportsList = componentImportsList.filter((x) => x !== typoCss);
-        componentImportsList.unshift(typoCss);
+    if (componentImportsList.find((x) => x === _mappings_1.typoCss)) {
+        componentImportsList = componentImportsList.filter((x) => x !== _mappings_1.typoCss);
+        componentImportsList.unshift(_mappings_1.typoCss);
     }
     if (componentImportsList.length === 0) {
         return imports;
@@ -120,18 +127,18 @@ function advancedOutput(answers, cdn, layers, version) {
     imports.push(``);
     imports.push(`/* Components */`);
     componentImportsList.forEach((x) => {
-        const pascalCase = lodash.camelCase(x.replace("css", "")).toLowerCase();
+        const pascalCase = lodash_1.default.camelCase(x.replace("css", "")).toLowerCase();
         cdn
-            ? imports.push(toCdn(`${componentDir}/${pascalCase}.css`, version))
-            : imports.push(toCssImport(`${componentDir}/${pascalCase}.css`, layers));
+            ? imports.push(toCdn(`${_mappings_1.componentDir}/${pascalCase}.css`, version))
+            : imports.push(toCssImport(`${_mappings_1.componentDir}/${pascalCase}.css`, layers));
     });
     return imports;
 }
 function toCdn(str, version) {
     return `<link rel="preload" href="https://cdn.nav.no/aksel/@navikt/ds-css/${version}/${str
         .replace(".css", ".min.css")
-        .replace(`${rootDir}/`, "")}" as="style"></link>`;
+        .replace(`${_mappings_1.rootDir}/`, "")}" as="style"></link>`;
 }
 function toCssImport(str, layers) {
-    return `@import "@navikt/ds-css/${str}"${layers ? layerSuffix : ""};`;
+    return `@import "@navikt/ds-css/${str}"${layers ? config_js_1.layerSuffix : ""};`;
 }

package/dist/css-imports/get-directories.js

@@ -1,3 +1,4 @@
+"use strict";
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -7,9 +8,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import fg from "fast-glob";
-import path from "path";
-export function getDirectories() {
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDirectories = void 0;
+const fast_glob_1 = __importDefault(require("fast-glob"));
+const path_1 = __importDefault(require("path"));
+function getDirectories() {
     return __awaiter(this, void 0, void 0, function* () {
         const baseDir = process.cwd();
         const ignoreNodeModules = [
@@ -18,11 +24,12 @@ export function getDirectories() {
             "**/build/**",
             "**/lib/**",
         ];
-        const directories = yield fg(`${baseDir}/**`, {
+        const directories = yield (0, fast_glob_1.default)(`${baseDir}/**`, {
             onlyDirectories: true,
             ignore: ignoreNodeModules,
         });
         directories.sort((a, b) => a.length - b.length);
-        return [baseDir, ...directories].map((x) => x.replace(baseDir, path.basename(baseDir)));
+        return [baseDir, ...directories].map((x) => x.replace(baseDir, path_1.default.basename(baseDir)));
     });
 }
+exports.getDirectories = getDirectories;

package/dist/css-imports/get-version.js

@@ -1,3 +1,4 @@
+"use strict";
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -7,16 +8,22 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import axios from "axios";
-export function getAllVersions() {
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAllVersions = void 0;
+const axios_1 = __importDefault(require("axios"));
+function getAllVersions() {
     return __awaiter(this, void 0, void 0, function* () {
         try {
-            const npmPackageData = yield axios.get(`https://registry.npmjs.org/@navikt/ds-css`);
+            const npmPackageData = yield axios_1.default.get(`https://registry.npmjs.org/@navikt/ds-css`);
             return Object.keys(npmPackageData.data["versions"]);
         }
         catch (e) {
-            console.log(e);
+            console.error(e);
             return [];
         }
     });
 }
+exports.getAllVersions = getAllVersions;