@navikt/aksel 2.9.2 → 2.9.3-beta.1

package/README.md

@@ -1,6 +1,6 @@
 # Aksel command line interface
 
-CLI tool for managing CSS-imports and more when consuming Aksel-packages.
+CLI tool for managing CSS-imports and Codemods when consuming Aksel-packages.
 
 [Documentation](https://aksel.nav.no/preview/grunnleggende/kode/kommandolinje)
 
@@ -10,6 +10,162 @@ npx @navikt/aksel
 
 commands:
 css-imports: Generate css-imports for all components from Aksel
+codemod: Codemods for version-migrations related to Aksel
+```
+
+## Codemods
+
+Codemods are code-transformations that patches breaking changes in your project. This helps when migrating without spending time doing it manually.
+
+```bash
+To get started:
+npx @navikt/aksel codemod --help
+```
+
+### v1 -> v2
+
+[Documentation](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112)
+
+v2-css: Patches changed css-variables
+v2-js: Patches changed js-variables
+v2-sass: Patches changed sass-variables
+v2-less: Patches changed less-variables
+
+#### css-tokens (--navds format)
+
+`npx @navikt/aksel codemod v2-css src`
+
+When having redefined a token, you will need to manually find and replace these instances after the codemod-run. A global search for `--v2-migration__` will show all found instances where you had redefined a token.
+
+```diff
+.example{
+- color: var(--navds-global-color-gray-900);
++ color: var(--a-gray-900);
+
+- --navds-semantic-color-text: red;
++ --v2-migration__navds-semantic-color-text: red;
+}
+```
+
+#### sass/scss-tokens ($navds format)
+
+`npx @navikt/aksel codemod v2-sass src`
+
+```diff
+.example{
+- color: $navds-global-color-gray-900;
++ color: $a-gray-900;
+}
+```
+
+#### less-tokens (@navds format)
+
+`npx @navikt/aksel codemod v2-less src`
+
+```diff
+.example{
+- color: @navds-global-color-gray-900;
++ color: @a-gray-900;
+}
+```
+
+#### js-tokens
+
+`npx @navikt/aksel codemod v2-js src`
+
+```diff
+
+- import { NavdsGlobalColorGray900 } from "@navikt/ds-tokens";
++ import { AGray900 } from "@navikt/ds-tokens";
+
+const styled = styled.p`
+- color: ${NavdsGlobalColorGray900};
++ color: ${AGray900};
+`
+```
+
+### beta -> v1
+
+[Documentation](https://aksel.nav.no/grunnleggende/kode/migrering#h50d54a5af8c1)
+
+v1-preset: Runs all codemods for beta -> v1
+v1-pagination: Fixes breaking API-changes for <Pagination /> component
+v1-tabs: Fixes breaking API-changes for <Tabs /> component
+v1-chat: Fixes breaking API-changes for <SpeechBubble /> (now <Chat/>) component
+
+#### preset
+
+Combines all avaliable codemods for migrating from beta -> v1. This transform should only be ran once.
+
+Includes these transforms
+
+- v1-tabs
+- v1-chat
+- v1-pagination
+
+#### tabs
+
+`npx @navikt/aksel codemod v1-tabs src`
+
+```diff
+<Tabs
+  defaultValue="logg"
+  onChange={(x) => console.log(x)}
+-  loop
++  iconPosition="left"
+>
+  <Tabs.List
+-    loop
+  >
+    <Tabs.Tab
+      value="logg"
+      label="logg"
+-     iconPosition="left"
+    />
+  </Tabs.List>
+  <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
+</Tabs>
+```
+
+#### chat
+
+`npx @navikt/aksel codemod v1-chat src`
+
+```diff
+-<SpeechBubble
++<Chat
+-  illustration={<Illustration />}
+-  topText="Ola Normann 01.01.21 14:00"
+-  illustrationBgColor="blue"
++  avatar={<Illustration />}
++  name="Ola Normann 01.01.21 14:00"
++  avatarBgColor="blue"
+  backgroundColor="red"
+>
+- <SpeechBubble.Bubble>
++ <Chat.Bubble>
+    Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+- </SpeechBubble.Bubble>
++ </Chat.Bubble>
+-</SpeechBubble>
++</Chat>
+```
+
+#### pagination
+
+`npx @navikt/aksel codemod v1-pagination src`
+
+This codemod can only be ran once, since the size-scale will keep decreasing for each subsequent iteration.
+
+```diff
+-<Pagiation />
++<Pagiation size="small"/>
+
+-<Pagiation size="medium"/>
++<Pagiation size="small"/>
+
+-<Pagiation size="small"/>
++<Pagiation size="xsmall"/>
 ```
 
 ## License

package/dist/codemod/index.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.codemodCommand = void 0;
+const commander_1 = require("commander");
+const figlet_1 = __importDefault(require("figlet"));
+const chalk_1 = __importDefault(require("chalk"));
+const migrations_js_1 = require("./migrations.js");
+const validation_js_1 = require("./validation.js");
+const run_codeshift_js_1 = require("./run-codeshift.js");
+const program = new commander_1.Command();
+function codemodCommand() {
+    program.name(`${chalk_1.default.blueBright(`npx @navikt/aksel`)}`);
+    program
+        .command("codemod")
+        .addHelpText("beforeAll", figlet_1.default.textSync("Codemods"))
+        .addHelpText("afterAll", chalk_1.default.gray(`\nAvailable migrations:\n${(0, migrations_js_1.getMigrationString)()}`))
+        .description("Migrations for Aksel components and more")
+        .argument("<migration>", "Migration name")
+        .option("-e, --ext [extension]", "default: js,ts,jsx,tsx,css,scss,less")
+        .option("-g, --glob [glob]", "Globbing pattern, overrides --ext! Run with 'noglob' if using zsh-terminal. ")
+        .option("-d, --dry-run", "Dry run, no changes will be made")
+        .option("-p, --print", "Print transformed files")
+        .option("-f, --force", "Forcibly run migrations without checking git-changes")
+        .addHelpText("after", `\nExample:
+  $ npx @navikt/aksel --dry-run v2-css`)
+        .action((str, options) => {
+        (0, validation_js_1.validateMigration)(str, program);
+        (0, validation_js_1.validateGit)(options, program);
+        (0, run_codeshift_js_1.runCodeshift)(str, options, program);
+    });
+    program.parse();
+}
+exports.codemodCommand = codemodCommand;

package/dist/codemod/migrations.js

@@ -0,0 +1,75 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMigrationString = exports.getMigrationNames = exports.getMigrationPath = exports.migrations = void 0;
+const chalk_1 = __importDefault(require("chalk"));
+exports.migrations = {
+    "1.0.0": [
+        {
+            description: "Runs all codemods for beta -> v1 migration",
+            value: "v1-preset",
+            path: "v1.0.0/preset/preset",
+        },
+        {
+            description: "Fixes breaking API-changes for <Pagination /> component",
+            value: "v1-pagination",
+            path: "v1.0.0/pagination/pagination",
+        },
+        {
+            description: "Fixes breaking API-changes for <Tabs /> component",
+            value: "v1-tabs",
+            path: "v1.0.0/tabs/tabs",
+        },
+        {
+            description: "Fixes breaking API-changes for <SpeechBubble /> (now <Chat/>) component",
+            value: "v1-chat",
+            path: "v1.0.0/chat/chat",
+        },
+    ],
+    "2.0.0": [
+        {
+            description: "Patches changed css-variables",
+            value: "v2-css",
+            path: "v2.0.0/update-css-tokens/update-css-tokens",
+        },
+        {
+            description: "Patches changed js-variables",
+            value: "v2-js",
+            path: "v2.0.0/update-js-tokens/update-js-tokens",
+        },
+        {
+            description: "Patches changed sass-variables",
+            value: "v2-sass",
+            path: "v2.0.0/update-sass-tokens/update-sass-tokens",
+        },
+        {
+            description: "Patches changed less-variables",
+            value: "v2-less",
+            path: "v2.0.0/update-less-tokens/update-less-tokens",
+        },
+    ],
+};
+function getMigrationPath(str) {
+    var _a;
+    return (_a = Object.values(exports.migrations)
+        .reduce((acc, val) => [...val, ...acc], [])
+        .find((x) => x.value === str)) === null || _a === void 0 ? void 0 : _a.path;
+}
+exports.getMigrationPath = getMigrationPath;
+function getMigrationNames() {
+    return Object.values(exports.migrations).reduce((acc, val) => [...val.map((x) => x.value), ...acc], []);
+}
+exports.getMigrationNames = getMigrationNames;
+function getMigrationString() {
+    let str = "";
+    Object.entries(exports.migrations).forEach(([version, migrations]) => {
+        str += `\n${chalk_1.default.underline(version)}\n`;
+        migrations.forEach((migration) => {
+            str += `${chalk_1.default.blue(migration.value)}: ${migration.description}\n`;
+        });
+    });
+    return str;
+}
+exports.getMigrationString = getMigrationString;

package/dist/codemod/run-codeshift.js

@@ -0,0 +1,91 @@
+"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.runCodeshift = void 0;
+const fast_glob_1 = __importDefault(require("fast-glob"));
+const jscodeshift = __importStar(require("jscodeshift/src/Runner"));
+const path_1 = __importDefault(require("path"));
+const migrations_1 = require("./migrations");
+const chalk_1 = __importDefault(require("chalk"));
+const ignoreNodeModules = [
+    "**/node_modules/**",
+    "**/dist/**",
+    "**/build/**",
+    "**/lib/**",
+    "**/.next/**",
+];
+function runCodeshift(input, options, program) {
+    var _a;
+    return __awaiter(this, void 0, void 0, function* () {
+        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)], {
+            cwd: process.cwd(),
+            ignore: ignoreNodeModules,
+        });
+        console.log("\nRunning migration:", chalk_1.default.green("input"));
+        (options === null || options === void 0 ? void 0 : options.glob) && console.log(`Using glob: ${chalk_1.default.green(options.glob)}\n`);
+        try {
+            yield jscodeshift.run(codemodPath, filepaths, {
+                babel: true,
+                ignorePattern: ignoreNodeModules,
+                extensions: "tsx,ts,jsx,js",
+                parser: "tsx",
+                verbose: 2,
+                runInBand: true,
+                silent: false,
+                stdin: false,
+                dry: options === null || options === void 0 ? void 0 : options.dryRun,
+                force: options === null || options === void 0 ? void 0 : options.force,
+                print: options === null || options === void 0 ? void 0 : options.print,
+            });
+        }
+        catch (error) {
+            program.error(chalk_1.default.red("Error:", error.message));
+        }
+    });
+}
+exports.runCodeshift = runCodeshift;
+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(".", ""));
+}