@fremtind/jokul 5.0.0-next.0 → 5.0.0-next.10

package/README.md

@@ -1,17 +1,40 @@
 # @fremtind/jokul
 
--   [Migrering til monopakke](#migrering-til-monopakke)
--   [React-komponenter](#react-komponenter)
--   [Stilark](#stilark)
--   [Fonter](#fonter)
--   [Hooks](#hooks)
--   [Utilities](#utilities)
--   [Tailwind](#tailwind)
+- [Migrering til monopakke](#migrering-til-monopakke)
+- [Codemods](#codemods)
+- [React-komponenter](#react-komponenter)
+- [Stilark](#stilark)
+- [Fonter](#fonter)
+- [Hooks](#hooks)
+- [Utilities](#utilities)
+- [Tailwind](#tailwind)
 
 ## Migrering til `@fremtind/jokul`
 
 Dersom du bruker dagens pakkestruktur med pakker for hver komponent har vi laget en [migrasjonsguide](./MIGRATION.md) for hvordan du går over til å bruke `@fremtind/jokul`.
 
+## Codemods
+
+Hvis du oppgraderer til `5.0.0` eller nyere kan du bruke codemoden vår for å oppdatere importstier til dagens struktur.
+
+Primær-CLI-et er `jokul`, og codemods kjøres som `jokul codemod`. Hvordan du starter det avhenger av package manageren din:
+
+```bash
+# pnpm
+pnpm exec jokul codemod --dry-run
+pnpm exec jokul codemod
+
+# npm
+npx jokul codemod --dry-run
+npx jokul codemod
+
+# Valgfritt: begrens kjøringen til bestemte mapper
+jokul codemod src app --dry-run
+jokul codemod src app
+```
+
+Codemoden oppdaterer sikre stier automatisk og varsler når den finner tvetydige stilimports for beta-komponenter som må vurderes manuelt. Den fjerner `@fremtind/jokul/styles/fonts/webfonts.css`-imports siden `@font-face`-definisjonene nå ligger i `styles/base.css`, bytter ut det gamle font-family-navnet `Fremtind Material Symbols` med `Jokul Icons`, og flagger fjernede Sass-fargevariabler, gamle `light-mode-variables`/`dark-mode-variables`-mixins og utdaterte `text-style`-navn (`"body"`, `"small"`).
+
 ## React-komponenter
 
 Alle Jøkul komponenter installeres fra denne pakka.
@@ -42,14 +65,14 @@ Det finnes en del grunnleggende stiler som må med for at ting skal fungere rikt
 kan du importere med
 
 ```scss
-@use "@fremtind/jokul/styles/core/core";
+@use "@fremtind/jokul/styles/base";
 ```
 
 eller i ts/js
 
 ```tsx
 // Finnes også ferdig bygget, med filendelsene .css og .min.css
-import "@fremtind/jokul/styles/core/core.scss";
+import "@fremtind/jokul/styles/base.scss";
 ```
 
 ### Stiler for komponenter
@@ -79,14 +102,14 @@ import "@fremtind/jokul/styles/components/[komponent]/[komponent].min.css";
 Du kan importere stilarkene for alle Jøkulkomponentene på en gang med
 
 ```scss
-@use "@fremtind/jokul/styles";
+@use "@fremtind/jokul/styles/components.scss";
 ```
 
 eller i ts/js
 
 ```tsx
 // Finnes også ferdig bygget, med filendelsene .css og .min.css
-import "@fremtind/jokul/styles/styles.scss";
+import "@fremtind/jokul/styles/components.scss";
 ```
 
 Vær obs på at du da kan få med en del mer stilark enn du trenger så vurder dette opp mot
@@ -105,7 +128,7 @@ Dette gjør du med
 ```scss
 // Variabelen `$webfonts-dir` angir hvor på disk filene ligger.
 // Hvis den ikke spesifiseres vil stilarket se etter fontfilene i mappen `/fonts`.
-@use "@fremtind/jokul/styles/fonts" with (
+@use "@fremtind/jokul/styles/theme/fonts" with (
     $webfonts-dir: "relative/path/to/node_modules/@fremtind/jokul/src/fonts"
 );
 ```
@@ -114,20 +137,16 @@ Dette gjør du med
 
 Om du ikke bruker Sass kan du bruke CSS-versjonen. Denne versjonen ser **kun** etter fontfilene på URLen `/fonts`, så det beste er å sørge for å kopiere fonter på en måte som gjør at de blir tilgjengelig på den URLen.
 
-Om du er nødt til å legge fontfilene et annet sted må CSS-filen `node_modules/@fremtind/jokul/styles/fonts/webfonts.css`
-kopieres inn i prosjektet. Deretter må du endre URLen i hver `@font-face`-definisjon manuelt så det stemmer med hvor fontfilene ligger. **Husk at man må gjenta prosessen hver gang man oppdaterer pakken!**
+Om du er nødt til å legge fontfilene et annet sted må `@font-face`-definisjonene fra `node_modules/@fremtind/jokul/styles/base.css` kopieres inn i prosjektet. Deretter må du endre URLen i hver `@font-face`-definisjon manuelt så det stemmer med hvor fontfilene ligger. **Husk at man må gjenta prosessen hver gang man oppdaterer pakken!**
 
 ```css
 @font-face {
-    font-family: "Fremtind Grotesk";
+    font-family: "Jokul";
     font-display: fallback;
-    font-weight: normal;
+    font-weight: 400;
     font-style: normal;
-    src: local("Fremtind Grotesk"),
-        /* Endre de to neste linjene så de stemmer */
-            url("/relative/path/to/font/files/FremtindGrotesk-Regular-Web.woff2")
-            format("woff2"), url("/relative/path/to/font/files/FremtindGrotesk-Regular-Web.woff")
-            format("woff");
+    /* Endre URLen så den stemmer */
+    src: url("/relative/path/to/font/files/InterVariable.woff2") format("woff2");
 }
 ```
 
@@ -138,7 +157,7 @@ OBS: Vi har et kjent problem med dette i Vite v6, se [#4378](https://github.com/
 For å få tilgang til mixins vi tilbyr kan du i din .scss fil bruke
 
 ```scss
-@use "@fremtind/jokul/styles/core/jkl";
+@use "@fremtind/jokul/styles/jkl";
 ```
 
 ## Hooks
@@ -187,7 +206,7 @@ Dersom du bruker versjon 4 av Tailwind laster du inn vårt theme rett etter impo
 
 ```css
 @import "tailwindcss";
-@import "@fremtind/jokul/tailwind/v4";
+@import "@fremtind/jokul/styles/tailwind";
 ```
 
 ### Farger

package/bin/jokul.mjs

@@ -0,0 +1,10 @@
+#!/usr/bin/env node
+
+import { runJokulCli } from "./run-jokul-cli.mjs";
+
+try {
+    process.exit(await runJokulCli());
+} catch (error) {
+    console.error(error instanceof Error ? error.message : String(error));
+    process.exit(1);
+}

package/bin/run-jokul-cli.mjs

@@ -0,0 +1,63 @@
+import { runImportPathsCodemod } from "../codemods/import-paths.mjs";
+
+function printCodemodHelp(commandName) {
+    console.log(`Jøkul codemods
+
+Bruk:
+  ${commandName} [import-paths] [--dry-run] [--verbose] [sti ...]
+
+Eksempler:
+  ${commandName}
+  ${commandName} --dry-run
+  ${commandName} src app
+  ${commandName} import-paths src app README.md --dry-run
+`);
+}
+
+async function runCodemodCommand(args, commandName) {
+    const [firstArg, ...rest] = args;
+
+    if (firstArg === "--help" || firstArg === "-h") {
+        printCodemodHelp(commandName);
+        return 0;
+    }
+
+    if (!firstArg) {
+        await runImportPathsCodemod([]);
+        return 0;
+    }
+
+    if (firstArg === "import-paths") {
+        await runImportPathsCodemod(rest);
+        return 0;
+    }
+
+    await runImportPathsCodemod(args);
+    return 0;
+}
+
+export async function runJokulCli(argv = process.argv.slice(2)) {
+    const [command, ...rest] = argv;
+
+    if (!command || command === "--help" || command === "-h") {
+        console.log(`Jøkul kommandolinje
+
+Bruk:
+  jokul codemod [import-paths] [--dry-run] [--verbose] [sti ...]
+
+Eksempler:
+  jokul codemod
+  jokul codemod --dry-run
+  jokul codemod src app
+  jokul codemod import-paths src app README.md --dry-run
+`);
+        return 0;
+    }
+
+    if (command !== "codemod") {
+        console.error(`Ukjent kommando: ${command}`);
+        return 1;
+    }
+
+    return runCodemodCommand(rest, "jokul codemod");
+}