@fremtind/jokul 5.0.0-next.1 → 5.0.0-next.11

package/codemods/import-paths.mjs

@@ -0,0 +1,198 @@
+import { readdir, readFile, stat, writeFile } from "node:fs/promises";
+import path from "node:path";
+
+import {
+    applyDirectReplacements,
+    applyBetaStyleReplacements,
+    removeRedundantWebfontsCssImport,
+    reorderConfiguredFontImport,
+    BASE_OR_COMPONENT_CSS_PATTERN,
+} from "./transforms/import-specifiers.mjs";
+import { applyCssTokenRenames, applyTailwindColorRenames } from "./transforms/color-tokens.mjs";
+import { applyFontFamilyReplacements } from "./transforms/font-family.mjs";
+import { collectManualMigrationWarnings } from "./transforms/warnings.mjs";
+
+const TEXT_EXTENSIONS = new Set([
+    ".cjs",
+    ".css",
+    ".cts",
+    ".js",
+    ".jsx",
+    ".md",
+    ".mdx",
+    ".mjs",
+    ".mts",
+    ".sass",
+    ".scss",
+    ".ts",
+    ".tsx",
+]);
+
+const IGNORED_DIRECTORIES = new Set([
+    ".changeset",
+    ".git",
+    ".github",
+    ".next",
+    ".turbo",
+    "build",
+    "coverage",
+    "dist",
+    "node_modules",
+    "storybook-static",
+]);
+
+const IGNORED_FILE_PATTERNS = [
+    "/packages/jokul/CHANGELOG.md",
+    "/packages/jokul/MIGRATION.md",
+    "/packages/jokul/build-styles.mjs",
+    "/packages/jokul/bin/",
+    "/packages/jokul/codemods/",
+];
+
+function shouldIgnoreFile(filePath) {
+    const normalizedPath = filePath.split(path.sep).join("/");
+    return IGNORED_FILE_PATTERNS.some((pattern) => normalizedPath.includes(pattern));
+}
+
+function shouldIgnoreDirectory(directoryPath) {
+    return IGNORED_DIRECTORIES.has(path.basename(directoryPath));
+}
+
+export function transformImportPaths(text, filePath = "") {
+    const webfontsRemoval = removeRedundantWebfontsCssImport(text);
+    const fontFamily = applyFontFamilyReplacements(webfontsRemoval.text);
+    const direct = applyDirectReplacements(fontFamily.text);
+    const beta = applyBetaStyleReplacements(direct.text);
+    const cssTokens = applyCssTokenRenames(beta.text);
+    const tailwindColors = applyTailwindColorRenames(cssTokens.text);
+    let next = tailwindColors.text;
+    let reordered = false;
+
+    if (/\.(sass|scss)$/i.test(filePath)) {
+        const reorderedResult = reorderConfiguredFontImport(next);
+        next = reorderedResult.text;
+        reordered = reorderedResult.reordered;
+    }
+
+    const warnings = [
+        ...beta.warnings,
+        ...collectManualMigrationWarnings(text),
+    ];
+
+    if (webfontsRemoval.count > 0 && !BASE_OR_COMPONENT_CSS_PATTERN.test(next)) {
+        warnings.push(
+            "Manuell vurdering: fjernet import av `styles/fonts/webfonts.css`. `@font-face`-definisjonene ligger nå i `@fremtind/jokul/styles/base.css`, så den må importeres for at fontene skal lastes.",
+        );
+    }
+
+    return {
+        text: next,
+        changed: next !== text,
+        replacements:
+            direct.replacements +
+            beta.replacements +
+            webfontsRemoval.count +
+            fontFamily.count +
+            cssTokens.count +
+            tailwindColors.count,
+        warnings,
+        reordered,
+    };
+}
+
+async function collectFiles(targetPath, collected) {
+    const stats = await stat(targetPath);
+
+    if (stats.isDirectory()) {
+        if (shouldIgnoreDirectory(targetPath)) {
+            return collected;
+        }
+
+        const entries = await readdir(targetPath, { withFileTypes: true });
+        const sortedEntries = [...entries].sort((a, b) => a.name.localeCompare(b.name));
+
+        for (const entry of sortedEntries) {
+            if (entry.isDirectory() && IGNORED_DIRECTORIES.has(entry.name)) {
+                continue;
+            }
+            await collectFiles(path.join(targetPath, entry.name), collected);
+        }
+
+        return collected;
+    }
+
+    if (TEXT_EXTENSIONS.has(path.extname(targetPath)) && !shouldIgnoreFile(targetPath)) {
+        collected.push(targetPath);
+    }
+
+    return collected;
+}
+
+function parseArguments(rawArgs) {
+    const options = { dryRun: false, verbose: false };
+    const targets = [];
+
+    for (const arg of rawArgs) {
+        if (arg === "--dry-run") { options.dryRun = true; continue; }
+        if (arg === "--verbose") { options.verbose = true; continue; }
+        if (arg === "--help" || arg === "-h") {
+            throw new Error(
+                "Bruk: jokul codemod [import-paths] [sti ...] [--dry-run] [--verbose]",
+            );
+        }
+        targets.push(arg);
+    }
+
+    return { options, targets: targets.length > 0 ? targets : ["."] };
+}
+
+export async function runImportPathsCodemod(rawArgs = []) {
+    const { options, targets } = parseArguments(rawArgs);
+    const files = [];
+
+    for (const target of targets) {
+        await collectFiles(path.resolve(target), files);
+    }
+
+    const uniqueFiles = [...new Set(files)].sort((a, b) => a.localeCompare(b));
+    let changedFiles = 0;
+    let changedSpecifiers = 0;
+    let reorderedFiles = 0;
+    const warnings = [];
+
+    for (const filePath of uniqueFiles) {
+        const source = await readFile(filePath, "utf-8");
+        const result = transformImportPaths(source, filePath);
+
+        for (const warning of result.warnings) {
+            warnings.push(`${filePath}: ${warning}`);
+        }
+
+        if (!result.changed) {
+            continue;
+        }
+
+        changedFiles += 1;
+        changedSpecifiers += result.replacements;
+        reorderedFiles += result.reordered ? 1 : 0;
+
+        if (!options.dryRun) {
+            await writeFile(filePath, result.text, "utf-8");
+        }
+
+        if (options.verbose || options.dryRun) {
+            console.log(`${options.dryRun ? "Ville endret" : "Endret"} ${filePath}`);
+        }
+    }
+
+    if (warnings.length > 0) {
+        console.warn("\nFiler som trenger manuell oppfølging:");
+        for (const warning of warnings) {
+            console.warn(`- ${warning}`);
+        }
+    }
+
+    console.log(
+        `\n${options.dryRun ? "Dry run ferdig" : "Codemod ferdig"}: ${changedFiles} filer, ${changedSpecifiers} erstatninger${reorderedFiles > 0 ? `, ${reorderedFiles} justerte font-importrekkefølger` : ""}.`,
+    );
+}

package/codemods/transforms/color-tokens.mjs

@@ -0,0 +1,77 @@
+import { replaceSpecifier, replaceTailwindClass } from "../utils.mjs";
+
+// Sortert lengst-først: spesifikke tokens (f.eks. -alert-info) må ikke bli
+// delvis matchet av kortere prefiks.
+const CSS_TOKEN_RENAMES = [
+    ["--jkl-color-background-alert-warning", "--jkl-color-warning-background-container"],
+    ["--jkl-color-background-alert-success", "--jkl-color-success-background-container"],
+    ["--jkl-color-background-alert-error", "--jkl-color-error-background-container"],
+    ["--jkl-color-background-alert-info", "--jkl-color-info-background-container"],
+    ["--jkl-color-background-container-high", "--jkl-color-background-container"],
+    ["--jkl-color-background-container-low", "--jkl-color-background-container"],
+    ["--jkl-color-background-container-inverted", "--jkl-color-background-contrast"],
+    ["--jkl-color-background-action", "--jkl-color-background-contrast"],
+    ["--jkl-color-text-on-action", "--jkl-color-text-on-contrast"],
+    ["--jkl-color-text-inverted", "--jkl-color-text-on-contrast"],
+].sort(([a], [b]) => b.length - a.length);
+
+// Tilsvarende omdøyping for Tailwind --color-{nøkkel}-variablar.
+const TAILWIND_COLOR_RENAMES = [
+    ["background-alert-warning", "warning-background-container"],
+    ["background-alert-success", "success-background-container"],
+    ["background-alert-error", "error-background-container"],
+    ["background-alert-info", "info-background-container"],
+    ["background-container-high", "background-container"],
+    ["background-container-low", "background-container"],
+    ["background-container-inverted", "background-contrast"],
+    ["background-action", "background-contrast"],
+    ["text-on-action", "text-on-contrast"],
+    ["text-inverted", "text-on-contrast"],
+].sort(([a], [b]) => b.length - a.length);
+
+const TAILWIND_COLOR_PREFIXES = [
+    "bg",
+    "text",
+    "border",
+    "ring",
+    "shadow",
+    "fill",
+    "stroke",
+    "accent",
+    "caret",
+    "outline",
+    "placeholder",
+    "divide",
+    "from",
+    "via",
+    "to",
+    "decoration",
+];
+
+export function applyCssTokenRenames(text) {
+    let next = text;
+    let count = 0;
+
+    for (const [from, to] of CSS_TOKEN_RENAMES) {
+        const result = replaceSpecifier(next, from, to);
+        next = result.text;
+        count += result.count;
+    }
+
+    return { text: next, count };
+}
+
+export function applyTailwindColorRenames(text) {
+    let next = text;
+    let count = 0;
+
+    for (const [fromKey, toKey] of TAILWIND_COLOR_RENAMES) {
+        for (const prefix of TAILWIND_COLOR_PREFIXES) {
+            const result = replaceTailwindClass(next, `${prefix}-${fromKey}`, `${prefix}-${toKey}`);
+            next = result.text;
+            count += result.count;
+        }
+    }
+
+    return { text: next, count };
+}

package/codemods/transforms/font-family.mjs

@@ -0,0 +1,23 @@
+import { escapeRegExp } from "../utils.mjs";
+
+// Fallback-navnet kommer først (lengst-først) slik at det ikke blir delvis
+// overskrevet av det kortere primærnavnet.
+const FONT_FAMILY_REPLACEMENTS = [
+    ["Fremtind Material Symbols Fallback", "Jokul Icons Fallback"],
+    ["Fremtind Material Symbols", "Jokul Icons"],
+];
+
+export function applyFontFamilyReplacements(text) {
+    let next = text;
+    let count = 0;
+
+    for (const [from, to] of FONT_FAMILY_REPLACEMENTS) {
+        const pattern = new RegExp(escapeRegExp(from), "g");
+        next = next.replace(pattern, () => {
+            count += 1;
+            return to;
+        });
+    }
+
+    return { text: next, count };
+}

package/codemods/transforms/import-specifiers.mjs

@@ -0,0 +1,230 @@
+import { escapeRegExp, replaceSpecifier } from "../utils.mjs";
+
+const DIRECT_REPLACEMENTS = [
+    [
+        "@fremtind/jokul/styles/core/core.min.css",
+        "@fremtind/jokul/styles/base.min.css",
+    ],
+    [
+        "@fremtind/jokul/styles/core/core.css",
+        "@fremtind/jokul/styles/base.css",
+    ],
+    [
+        "@fremtind/jokul/styles/core/core.scss",
+        "@fremtind/jokul/styles/base.scss",
+    ],
+    ["@fremtind/jokul/styles/core/core", "@fremtind/jokul/styles/base"],
+    [
+        "@fremtind/jokul/styles/styles.min.css",
+        "@fremtind/jokul/styles/components.min.css",
+    ],
+    ["@fremtind/jokul/styles/styles.css", "@fremtind/jokul/styles/components.css"],
+    [
+        "@fremtind/jokul/styles/styles.scss",
+        "@fremtind/jokul/styles/components.scss",
+    ],
+    ["@fremtind/jokul/styles/styles", "@fremtind/jokul/styles/components"],
+    [
+        "@fremtind/jokul/styles/core/jkl/index",
+        "@fremtind/jokul/styles/jkl",
+    ],
+    ["@fremtind/jokul/styles/core/jkl", "@fremtind/jokul/styles/jkl"],
+    [
+        "@fremtind/jokul/styles/fonts/webfonts.scss",
+        "@fremtind/jokul/styles/theme/fonts",
+    ],
+    [
+        "@fremtind/jokul/styles/fonts/webfonts",
+        "@fremtind/jokul/styles/theme/fonts",
+    ],
+    ["@fremtind/jokul/styles/fonts", "@fremtind/jokul/styles/theme/fonts"],
+    ["../../../core/jkl/index", "../../../styles/jkl"],
+    ["../../../core/jkl", "../../../styles/jkl"],
+    ["../../core/jkl/index", "../../styles/jkl"],
+    ["../../core/jkl", "../../styles/jkl"],
+    ["../core/jkl/index", "../styles/jkl"],
+    ["../core/jkl", "../styles/jkl"],
+    ["@fremtind/jokul/tailwind/v4", "@fremtind/jokul/styles/tailwind"],
+    ["@fremtind/jokul/styles/core", "@fremtind/jokul/styles/base.scss"],
+    ["@fremtind/jokul/styles", "@fremtind/jokul/styles/components.scss"],
+    ["@fremtind/jokul/core", "@fremtind/jokul/utilities"],
+].sort(([a], [b]) => b.length - a.length);
+
+const BETA_STYLE_MIGRATIONS = [
+    {
+        component: "DescriptionList",
+        betaIdentifiers: ["BETA_DescriptionList", "BETA_DescriptionListItem"],
+        replacements: [
+            [
+                "@fremtind/jokul/styles/components/description-list/_index.scss",
+                "@fremtind/jokul/styles/components/beta/description-list/_index.scss",
+            ],
+            [
+                "@fremtind/jokul/styles/components/description-list/description-list.scss",
+                "@fremtind/jokul/styles/components/beta/description-list/description-list.scss",
+            ],
+            [
+                "@fremtind/jokul/styles/components/description-list",
+                "@fremtind/jokul/styles/components/beta/description-list",
+            ],
+        ],
+    },
+    {
+        component: "NavLink",
+        betaIdentifiers: ["BETA_NavLink"],
+        replacements: [
+            [
+                "@fremtind/jokul/styles/components/nav-link/_index.scss",
+                "@fremtind/jokul/styles/components/beta/nav-link/_index.scss",
+            ],
+            [
+                "@fremtind/jokul/styles/components/nav-link/nav-link.scss",
+                "@fremtind/jokul/styles/components/beta/nav-link/navlink.scss",
+            ],
+            [
+                "@fremtind/jokul/styles/components/nav-link",
+                "@fremtind/jokul/styles/components/beta/nav-link",
+            ],
+        ],
+    },
+    {
+        component: "Select",
+        betaIdentifiers: ["BETA_Select"],
+        replacements: [
+            [
+                "@fremtind/jokul/styles/components/select/_index.scss",
+                "@fremtind/jokul/styles/components/beta/select/_index.scss",
+            ],
+            [
+                "@fremtind/jokul/styles/components/select/select.scss",
+                "@fremtind/jokul/styles/components/beta/select/select.scss",
+            ],
+            [
+                "@fremtind/jokul/styles/components/select",
+                "@fremtind/jokul/styles/components/beta/select",
+            ],
+        ],
+    },
+];
+
+const WEBFONTS_CSS_SPECIFIER =
+    "@fremtind/jokul/styles/fonts/webfonts(?:\\.min)?\\.css";
+
+export const BASE_OR_COMPONENT_CSS_PATTERN = new RegExp(
+    "@fremtind/jokul/styles/(?:base|components)(?:\\.min)?\\.css",
+);
+
+const WEBFONTS_CSS_REMOVAL_PATTERNS = [
+    // import "@fremtind/jokul/styles/fonts/webfonts.css"; (ESM)
+    new RegExp(
+        `^[ \\t]*import\\s+["']${WEBFONTS_CSS_SPECIFIER}["']\\s*;?[ \\t]*\\r?\\n?`,
+        "gm",
+    ),
+    // require("@fremtind/jokul/styles/fonts/webfonts.css"); (CJS)
+    new RegExp(
+        `^[ \\t]*require\\(\\s*["']${WEBFONTS_CSS_SPECIFIER}["']\\s*\\)\\s*;?[ \\t]*\\r?\\n?`,
+        "gm",
+    ),
+    // @import "@fremtind/jokul/styles/fonts/webfonts.css"; (CSS / SCSS)
+    new RegExp(
+        `^[ \\t]*@import\\s+["']${WEBFONTS_CSS_SPECIFIER}["']\\s*;?[ \\t]*\\r?\\n?`,
+        "gm",
+    ),
+];
+
+export function applyDirectReplacements(text) {
+    let next = text;
+    let replacements = 0;
+
+    for (const [from, to] of DIRECT_REPLACEMENTS) {
+        const result = replaceSpecifier(next, from, to);
+        next = result.text;
+        replacements += result.count;
+    }
+
+    return { text: next, replacements };
+}
+
+export function applyBetaStyleReplacements(text) {
+    let next = text;
+    let replacements = 0;
+    const warnings = [];
+
+    for (const migration of BETA_STYLE_MIGRATIONS) {
+        const mentionsBeta = migration.betaIdentifiers.some((identifier) =>
+            next.includes(identifier),
+        );
+
+        const hasOldSpecifier = migration.replacements.some(([from]) =>
+            new RegExp(
+                `(?<![A-Za-z0-9_./-])${escapeRegExp(from)}(?![A-Za-z0-9_./-])`,
+            ).test(next),
+        );
+
+        if (!hasOldSpecifier) {
+            continue;
+        }
+
+        if (!mentionsBeta) {
+            warnings.push(
+                `Manuell vurdering: gammel stilimport for ${migration.component} kan peke på enten stabil eller beta-variant.`,
+            );
+            continue;
+        }
+
+        for (const [from, to] of migration.replacements) {
+            const result = replaceSpecifier(next, from, to);
+            next = result.text;
+            replacements += result.count;
+        }
+    }
+
+    return { text: next, replacements, warnings };
+}
+
+// I Jøkul 5 er @font-face-definisjonene flyttet inn i styles/base.css. Standalone
+// CSS-importer av webfonts.css fjernes; SCSS-konsumenter håndteres av
+// DIRECT_REPLACEMENTS siden de kan overstyre $webfonts-dir.
+export function removeRedundantWebfontsCssImport(text) {
+    let next = text;
+    let count = 0;
+
+    for (const pattern of WEBFONTS_CSS_REMOVAL_PATTERNS) {
+        next = next.replace(pattern, () => {
+            count += 1;
+            return "";
+        });
+    }
+
+    return { text: next, count };
+}
+
+export function reorderConfiguredFontImport(text) {
+    const fontImportPattern =
+        /^@use\s+["']@fremtind\/jokul\/styles\/theme\/fonts["'][\s\S]*?;\s*/m;
+    const baseImportPattern =
+        /^@use\s+["']@fremtind\/jokul\/styles\/base(?:\.scss)?["'][^;]*;\s*/m;
+
+    const fontMatch = fontImportPattern.exec(text);
+    const baseMatch = baseImportPattern.exec(text);
+
+    if (!fontMatch || !baseMatch || fontMatch.index < baseMatch.index) {
+        return { text, reordered: false };
+    }
+
+    const withoutFontImport =
+        text.slice(0, fontMatch.index) +
+        text.slice(fontMatch.index + fontMatch[0].length);
+    const nextBaseMatch = baseImportPattern.exec(withoutFontImport);
+
+    if (!nextBaseMatch) {
+        return { text, reordered: false };
+    }
+
+    const nextText =
+        withoutFontImport.slice(0, nextBaseMatch.index) +
+        fontMatch[0] +
+        withoutFontImport.slice(nextBaseMatch.index);
+
+    return { text: nextText, reordered: true };
+}

package/codemods/transforms/warnings.mjs

@@ -0,0 +1,41 @@
+const MANUAL_MIGRATION_WARNINGS = [
+    {
+        pattern: /--jkl-color-text-on-alert-/,
+        message:
+            "Tokens --jkl-color-text-on-alert-* er fjernet. Bruk --jkl-color-<rolle>-text-default i stedet, f.eks. --jkl-color-info-text-default.",
+    },
+    {
+        pattern: /--jkl-color-(?:background|text)-interactive\b/,
+        message:
+            "Tokens --jkl-color-background-interactive og --jkl-color-text-interactive er fjernet og skal ikke brukes lenger.",
+    },
+    {
+        pattern: /\bvariant=["'](?:outlined|high|low)["']/,
+        message:
+            'Card variant-prop er fjernet i Jøkul 5. Bruk `outlined`-prop (boolean) for ramme: `<Card outlined>`. Fjern `variant="high"` og `variant="low"` — de er erstattet av standard flat flate.',
+    },
+    {
+        pattern:
+            /(?<![A-Za-z0-9-])(?:bg|text|border|ring|shadow|fill|stroke|accent|caret|outline|placeholder|divide|from|via|to|decoration)-(?:background-interactive|text-interactive)(?![A-Za-z0-9-])/,
+        message:
+            "Fjernede Tailwind-klasser basert på background-interactive og text-interactive (f.eks. bg-background-interactive, text-text-interactive). Disse er fjernet fra Jøkul 5-temaet og skal ikke brukes lenger.",
+    },
+    {
+        pattern:
+            /(?<![A-Za-z0-9-])(?:border|ring|outline|divide|decoration)-border-(?:action|input(?:-focus)?|separator(?:-strong|-hover)?)(?![A-Za-z0-9-])/,
+        message:
+            "Fjernede Tailwind-kantklasser (border-border-action, border-border-input, border-border-separator m.fl.). Bruk border-border-default, border-border-subdued eller border-border-strong i stedet.",
+    },
+];
+
+export function collectManualMigrationWarnings(text) {
+    const warnings = [];
+
+    for (const { pattern, message } of MANUAL_MIGRATION_WARNINGS) {
+        if (pattern.test(text)) {
+            warnings.push(`Manuell vurdering: ${message}`);
+        }
+    }
+
+    return warnings;
+}

package/codemods/utils.mjs

@@ -0,0 +1,35 @@
+export function escapeRegExp(value) {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+export function replaceSpecifier(text, from, to) {
+    const pattern = new RegExp(
+        `(?<![A-Za-z0-9_./-])${escapeRegExp(from)}(?![A-Za-z0-9_./-])`,
+        "g",
+    );
+
+    let count = 0;
+    const next = text.replace(pattern, () => {
+        count += 1;
+        return to;
+    });
+
+    return { text: next, count };
+}
+
+// Som replaceSpecifier, men uten "/" i grensemengden slik at Tailwind-modifikatorer
+// som opacity (/50) og vilkårsverdier ([&_svg]:) fortsatt matches.
+export function replaceTailwindClass(text, fromClass, toClass) {
+    const pattern = new RegExp(
+        `(?<![A-Za-z0-9-])${escapeRegExp(fromClass)}(?![A-Za-z0-9-])`,
+        "g",
+    );
+
+    let count = 0;
+    const next = text.replace(pattern, () => {
+        count += 1;
+        return toClass;
+    });
+
+    return { text: next, count };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fremtind/jokul",
-  "version": "5.0.0-next.1",
+  "version": "5.0.0-next.11",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -14,13 +14,19 @@
     "*.scss"
   ],
   "files": [
+    "./bin",
     "./build",
+    "./codemods",
     "./styles",
     "./src/fonts",
     "./package.json"
   ],
+  "bin": {
+    "jokul": "./bin/jokul.mjs"
+  },
   "exports": {
     "./package.json": "./package.json",
+    "./styles/jkl": "./styles/jkl/_index.scss",
     "./styles/*": "./styles/*",
     "./tailwind": {
       "import": {