@navikt/aksel
Version:
Aksel command line interface. Handles css-imports, codemods and more
146 lines (145 loc) • 6.4 kB
JavaScript
;
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;