[Darkside] Interaktiv migrering (#3642)

* ✨ Setup darkside migration

* ✨ Can now convert primitives spacing

* 🧪 Added more tests

* 📝 Docs for utils

* 📝 Changeset

* 📝 Typos

* [Darkside] ✨ Added migration for css, less and scss (#3598)

* ✨ Added migration for css, less and scsss

* Update @navikt/aksel/src/codemod/migrations.ts

* ✨ Make old px spacing space-1

* ✨ Use esbuild to inline local references

* ✨ Added js migration to space-tokens (#3600)

* ✨ Setup first iteration of token translation object

* ✨ Started mapping old to new tokens

* ♻️ Simplified repalcement logic

* ✨ Added tests for token-migration

* ✨ Replaces old token with new reference

* ✨ Handle overrides of tokens

* 🧪 Global messages storage

* 📝 Added migration

* 🐛 Initialize message list

* ✨ Customizable results messaging

* ✨ Customizable results messaging

* 🐛 Use replacement, not ref

* 📝 Only document found legacy-tokens, dont rename them

* 📝 Better comments

* ✨ Added context to remaining token updates

* ✨ Added comments to unsupported token

* ✨ Format comments better, remove duplicates

* 📝 Success message if no legacy-tokens found

* 🐛 Return updated source files

* 🐛 Reference valid replacement

* 🔥 Removed comments

* ✨ Added better messaging

* ✨ Better messaging structure

* 🧪 Added more tests

* 🧪 Tests for less, scss, css and js tokens

* 🐛 CSS hits were shown as scss and less hits

* 📝 Format messages better

* 📝 Format messages better

* ✨ Added js-migrations template

* Update test runner

* 🐛 Revert mistakes

* 🐛 Resolve testing rig

* ✨ Js token migration

* 📝 Better docs for JS migration

* 📝 Added missing lineshift

* ✨ Tooling setup

* ✨ Tooling setup with enquirer

* ✨ Tooling setup with enquirer

* ✨ Set up inquirier and enquirer to promt user for tasks

* ✨ Get legacy-data

* ✨ Now formats and prints progress

* ✨ Now formats and prints progress

* ⚡ Smarter scanning of updated tokens

* ⚡ Refactored status-code

* ✨ Now prints remaining files

* ✨ Smarter tailwind-regex

* 📝 Tell user we are scanning the files

* ✨ Moved transforms to new darkside location

* 🚚 Moved tests for js transforms

* 📝 Updated prettier config to ignore new test-files

* 📝 Moved css, less, scss tests

* 🐛 Resolved tests not running properly on less,scss setup

* WIP: tailwind config migration

* 📝 Added tailwind config for border-radius

* ✨ Strictly match tailwind-classes

* ♻️ Convert status obj to class

* ♻️ Compact regex parsing

* ♻️ Simplified regex-handling for new token lookup

* ✨ Added support for component tokens

* ⚡ Optimize lineNumber task

* 🐛 Inline regex-probe

* 🐛 Remove old merged code

* 🐛 Fix regex escape-characters

* Update @navikt/aksel/src/darkside/index.ts

Co-authored-by: Copilot <[email protected]>

* 🐛 Fix token-tests

* ✨ Now prints with token-name

* ♻️ Move files

* ♻️ Move printing to TokenStatus class

* ✨ Add comments to printout

* 🐛 Handle word boundaries

* ⚡ Pre-generate the regexes

* 🧪 More regex-tests

* 🧪 More regex-tests

* ⚡ Use built-in regexes

* ⚡ Only run codeshift on relevant files

* 🐛 No print for codemod status update

* ⚡ Only run codeshift on relevant files

* 📝 Added extra space

* 📝 Exit after codemod

* 📝 Removed temp logging

* 🐛 Await codeshift execution

* 🧪 Added tests for not imported JS-tokens

* ✨ Implemented tailwind migration code

* 🧪 @apply tests for tailwind transform

* 🐛 Handle spaces better for tailwind config

* 🐛 Handle prefixing of tailwind config correctly

* 🐛 Handles cases where empty collection was passed

* 🐛 makes sure to clean up match before parsing

* 🧪 More tailwind-codemod tests

* ⚰️ Removed moved code, renamed darkside -> spacing for migrations

* ♻️ Config cleanup part 1

* ♻️ Config cleanup part 2

* ♻️ Refactored runner

* ✨ Added run all migraitons task

* 🐛 Use destrucutred taskname

* 📝 Better naming

* 📝 More spesific import docs

* 🐛 Print filename correctly when token contains special characters

* 🐛 Update spacing migrations paths

* 🐛 Added new spacing-tokens to legacy config

* ✨ Initialize status directly in constructor

* ⬆️ yarn lock sync

---------

Co-authored-by: Copilot <[email protected]>

Author: KenAJoh

.eslintrc.js

@@ -179,6 +179,8 @@ module.exports = {
     "esm",
     "cjs",
     "dist",
+    "@navikt/aksel/**/*.input.*",
+    "@navikt/aksel/**/*.output.*",
     "**/codemod/**/*.js",
     "!.storybook",
     "**/playwright-report/**",

.prettierignore

@@ -1,6 +1,8 @@
 **/nais*.yaml
 **/nais*.yml
 **/codemod/**/tests/**/*.js
+**/@navikt/aksel/**/*.input.*
+**/@navikt/aksel/**/*.output.*
 node_modules
 .next
 dist

@navikt/aksel/package.json

@@ -30,8 +30,10 @@
   "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
   "dependencies": {
     "@navikt/ds-css": "^7.17.3",
+    "@navikt/ds-tokens": "^7.17.3",
     "axios": "1.8.2",
     "chalk": "4.1.0",
+    "cli-progress": "^3.12.0",
     "clipboardy": "^2.3.0",
     "commander": "10.0.1",
     "enquirer": "^2.3.6",
@@ -44,6 +46,7 @@
     "react-scanner": "^1.1.0"
   },
   "devDependencies": {
+    "@types/cli-progress": "3.11.6",
     "rimraf": "6.0.1",
     "typescript": "5.5.4",
     "vitest": "^2.1.8"

@navikt/aksel/src/codemod/codeshift.utils.ts

@@ -0,0 +1,28 @@
+const GLOB_IGNORE_PATTERNS = [
+  "**/node_modules/**",
+  "**/dist/**",
+  "**/build/**",
+  "**/lib/**",
+  "**/.next/**",
+  "**/__snapshots__/**",
+];
+
+/**
+ * Utility function to generate the default glob pattern
+ */
+function getDefaultGlob(ext: string): string {
+  const defaultExt = "js,ts,jsx,tsx,css,scss,less";
+  return `**/*.{${cleanExtensions(ext ?? defaultExt).join(",")}}`;
+}
+
+/**
+ * Utility function to clean file extensions
+ */
+function cleanExtensions(ext: string): string[] {
+  return ext
+    .split(",")
+    .map((e) => e.trim())
+    .map((e) => e.replace(".", ""));
+}
+
+export { GLOB_IGNORE_PATTERNS, getDefaultGlob, cleanExtensions };

@navikt/aksel/src/codemod/migrations.ts

@@ -97,35 +97,24 @@ export const migrations: {
         "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",
-    },
-    {
-      description: "Updates js tokens to use new token-prefix and names",
-      value: "token-update-js",
-      path: "darkside/token-update-js/token-update-js",
+      path: "spacing/token-spacing-js/spacing",
     },
   ],
 };

@navikt/aksel/src/codemod/run-codeshift.ts

@@ -3,6 +3,7 @@ import { Command } from "commander";
 import fg from "fast-glob";
 import * as jscodeshift from "jscodeshift/src/Runner";
 import path from "path";
+import { GLOB_IGNORE_PATTERNS, getDefaultGlob } from "./codeshift.utils";
 import { getMigrationPath, getWarning } from "./migrations";
 
 const ignoreNodeModules = [
@@ -13,14 +14,6 @@ const ignoreNodeModules = [
   "**/.next/**",
 ];
 
-export const messages = new Map<
-  string,
-  {
-    format: (input: any) => void;
-    data: any;
-  }
->();
-
 export async function runCodeshift(
   input: string,
   options: any,
@@ -33,7 +26,7 @@ export async function runCodeshift(
 
   const filepaths = fg.sync([options.glob ?? getDefaultGlob(options?.ext)], {
     cwd: process.cwd(),
-    ignore: ignoreNodeModules,
+    ignore: GLOB_IGNORE_PATTERNS,
   });
 
   console.info("\nRunning migration:", chalk.green("input"));
@@ -58,23 +51,7 @@ export async function runCodeshift(
     });
 
     warning && console.info(`\n${chalk.yellow(warning)}\n`);
-
-    messages.forEach((value) => {
-      value.format(value.data);
-    });
   } catch (error) {
     program.error(chalk.red("Error:", error.message));
   }
 }
-
-function getDefaultGlob(ext: string): string {
-  const defaultExt = "js,ts,jsx,tsx,css,scss,less";
-  return `**/*.{${cleanExtensions(ext ?? defaultExt).join(",")}}`;
-}
-
-function cleanExtensions(ext: string): string[] {
-  return ext
-    .split(",")
-    .map((e) => e.trim())
-    .map((e) => e.replace(".", ""));
-}