Jøkul

Jøkul er et designsystem utviklet av Fremtind.

Jøkul gir deg ferdige React-komponenter samt CSS- og SCSS-stilark for de grunnleggende komponentene og designmønstrene til Fremtind. De følger Fremtinds designprinsipper.

React-komponentene våre er den raskeste og enkleste måten å ta i bruk Jøkul. Alle komponenter og stilark leveres nå som én konsolidert pakke: @fremtind/jokul. CSSen er tilgjengelig som separate stilark, så om du ikke bruker React kan du fremdeles bruke Jøkul.

Kom i gang

For å starte utviklingsserveren for Jøkul lokalt må du først ha installert:

• Node-versjonen definert i .nvmrc, gjerne via Node Version Manager (NVM).
• pnpm, gjerne via corepack eller npm.
  • På de nye Fremtind-Macene kan det hende at du må installere corepack via Homebrew for at det skal fungere ordentlig: Installer med brew install corepack, og gjør klar med corepack install inne i Jøkul-mappa.

Oppstart og utvikling

For å komme i gang med Jøkul-prosjektet, klon repoet og installer avhengighetene:

• Kjør pnpm i på rot i repoet for å installere avhengighetene.
• Kjør pnpm dev for å starte portal + Storybook.
• Kjør pnpm dev:portal for kun portalen.
• Kjør pnpm dev:storybook for kun Storybook.

Oppsett av linting og formatering

Vi bruker verktøyet Biome for både formatering og linting av koden i prosjektet. Linting og formatering skjer automatisk ved commit, men vi anbefaler også at du setter opp IDEen din til å bruke Biome så den ikke krangler med våre innstillinger.

Det finnes plugins for både VSCode og IntelliJ, som må installeres for å få funksjonaliteten i editoren. Etter å ha installert plugin-en må du fortelle editoren at den skal bruke Biome for formatering og linting.

Oppsett av Biome i VSCode

Etter å ha installert plugin-en, åpne innstillingene og søk på format. Velg Biome under valget "Editor: Default Formatter". NB! vi anbefaler at du gjør dette under "Workspace", siden de fleste andre prosjekter bruker Prettier for formatering.

Deretter kan du søke etter eslint og fjerne avkrysningen ved "Eslint: Enable", for å unngå at Eslint krangler med Biome. Sørg også for at "Eslint > Format: Enable" er skrudd av. Disse endringene bør også gjøres under "Workspace".

Tips under utvikling

• Kjør pnpm reboot om du kommer tilbake til Jøkul-prosjektet etter en stund, eller noe ikke fungerer som du forventer.
• Om du opplever feil fra nx, prøv pnpm dlx nx reset og kjør kommandoen på nytt.

Releases

Repoet bruker Changesets på standard måte med .changeset/config.json, changeset-filer i .changeset/ og changesets/action i GitHub Actions.

main er hovedbranchen for utvikling og publiserer normalt beta-versjoner med npm-taggen next. I tillegg finnes vedlikeholdte grener på formen jokul-N.x (f.eks. jokul-5.x) for eldre major-versjoner. Hvilke grener som vedlikeholdes, hvilket bump-nivå de kan motta, og hvilken av dem som er latest, er definert i .github/maintained-versions.json.

Publisering skjer i én felles GitHub Actions-workflow (release.yml) som trigges ved push til main eller en jokul-*-branch. Workflowen finner riktig npm dist-tag automatisk:

• På en jokul-N.x-branch: latest hvis branchen er markert med "latest": true i maintained-versions.json, ellers version-N.
• På main: tag-en definert i .changeset/pre.json hvis den finnes (dvs. når main er i prerelease-modus), ellers latest.

Denne logikken er samlet i scripts/find-release-tag.mjs, som også brukes av workflowen for Storybook branch-preview.

Backport til vedlikeholdte grener

Endringer utvikles på main og backportes automatisk til de vedlikeholdte jokul-N.x-grenene ved hjelp av workflowen backport.yml:

1. Når en PR mot main merges, leser workflowen changeset-filene som ble lagt til i PR-en og finner høyeste bump-nivå (patch/minor/major) blant dem.
2. scripts/find-backport-targets.mjs filtrerer grenene i maintained-versions.json til dem som har konfigurert et maxBump som er høyt nok til å motta denne endringen.
3. For hver aktuell gren opprettes en egen branch, PR-ens commits cherry-pickes over, og en PR åpnes automatisk mot grenen.
4. Hvis cherry-picken gir konflikt, opprettes PR-en likevel med instruksjoner for manuell konfliktløsning.

Backport kan også trigges manuelt for en gitt PR via workflow_dispatch.

Relevante scripts

• pnpm changeset oppretter et changeset.
• pnpm release:version kjører versjonering med Changesets.
• pnpm release:pre:enter går inn i prerelease-modus.
• pnpm release:pre:exit går ut av prerelease-modus.
• pnpm release:publish bygger og publiserer pakkene i repoet.

Release av ny major

Når vi skal utgi ny major-versjon av Jøkul følger vi følgende oppskrift

1. Lag en ny branch ut fra main. I denne branchen
   • Gå ut av prerelease-modus med pnpm release:pre:exit
   • Oppdater versjoner av pakkene med pnpm release:version
   • Lag en PR med disse endringene mot main
2. Merge inn PRen du nettopp laget. Ny major-versjon vil nå bli publisert
3. Lag en ny branch ut fra main for versjonen du nettopp publiserte, f.eks. jokul-7.x hvis du publiserte versjon 7.0.0, og push den til GitHub
4. Oppdater .github/maintained-versions.json med den nye major-versjonen, og lag en PR med endringen mot main. Backport endringen til alle brancher som er støttet (de som er listet opp i filen)
5. Skru på igjen prerelease-modus i main med pnpm release:pre:enter

Bruk av pakkene

Vi har en egen guide som hjelper deg med å komme i gang som ny bruker av Jøkul.

Dokumentasjon

I dokumentasjonen finner du:

• Informasjon om hvordan du bruker Jøkul.
• Designprinsippene til Fremtind.
• Detaljert dokumentasjon for hver komponent, inkludert eksempler.
• Guider for ulike ting, blant annet hvordan gjøre endringer i Jøkul.
• Bloggen vår, med jevnlige oppsummeringer av hva som er nytt i Jøkul.

Code of Conduct

Jøkul er et åpent og positivt felleskap der alle skal føle seg velkommen. Gjør deg kjent med våre etiske regler for bidragsytere før du deltar med bidrag.

Lisens

Jøkul er distribuert under MIT-lisensen for åpen kildekode.

Bidragsytere

Takk for bidrag fra disse flotte menneskene (emoji-oversikt):

Pio Rasch-Halvorsen 💻 👀 📖 🐛	Glenn A. Brownlee 📆 📋 🐛	Leiv Fredrik Berge 💻 📖 🚇 👀	Simen Sægrov 💻 👀 🐛	Steinop 🎨	ambientconflict 💻	Nicolai Hagen 💻
Stian Liknes 💻	hhannestad 🎨	idalower 📖	Gorild 📖 👀	Mikkel Blytt 🎨 📖	Martinvks 💻	Kristoffer Nordström 💻
Frida Thorkildsen Solhaug 💻 👀	Vegard Sørlie 💻 🐛	Bjørn Ole Bakke 💻	almli 💻	Thomas Rognes 💻	Sigve Hagesæter 🐛	EspenSmith 🤔
Murstam 🎨	fremtind-bot 📖	Jo Emil Holen 💻 📖 🐛 📝 👀	eduardodir 💻	Sercan Leylek 💻 📝 🐛	CamillaDahlstroem 🎨	Mikail Arslan 💻 🚇
Fridaks 💻	Lars-Are Gudmundsen 💻	Audun Berdal 💻 📖	fremtind-tony 📖	Jarle Berentzen 💻	stormoen 🎨	Kenneth Apeland 💻 📝 🐛 👀
Henrik Hermansen 💻	Bjørne Oma 💻 🐛 👀	William Killerud 📖 🚇 💻 🐛 📝	Espen Kvalvik 💻 🐛	Adrian Andersen 🚇	Kathrine 🎨	Tom 💻 🐛
Knut Eirik Leira Hjelle 🐛 💻	karimarkhus 🐛 🎨	Håvard Pedersen 🐛 💻 👀	Øyvind Nordbø 🎨	David Aasterud 🐛 💻	Mats Sommervold 📖	Christopher T. Hennum 🐛 💻
Marius Ingjer 🐛	Francis Paulin 💻	hegebjo 💻	Mathias Rundgreen 🐛	Elise Brenna 💻	maciejost 💻	sigrande 🐛 💻
markusleitvoll 🐛	Glenn Arnold Barosen 🤔 👀	Kristian Ulvund 📖 💻

Dette prosjektet følger retningslinjene i spesifikasjonen all-contributors. Vi setter pris på alle bidrag!