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 er den raskeste og enkleste måten å ta i bruk Jøkul. CSSen er tilgjengelig som separate pakker, 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.

Så, etter å ha klonet repoet:

• pnpm boot
• pnpm dev
• Åpne localhost:8000

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.
• pnpm dev har live reloading for portalen, ikke kildekoden til pakkene. Kjør pnpm build for pakken du endrer, så oppdaterer portalen seg.
• Hver pakke har sin egen devserver bak pnpm dev om du skal jobbe på noe isolert, og ikke trenger hele portalen.

Kjapt om pnpm dev i pakkene

For å teste server-side rendering har vi det problemet at serverdelen må restarte for at første render skal bli oppdatert med det nyeste. Vi bruker nodemon for å restarte denne automatisk ved endringer.

En ulempe med det er at hvis du har to devservere kjørende vil du få et nytt portnummer på én av de hver gang. Du kan komme deg rundt det problemet ved å sette PORT-miljøvariabelen til noe annet enn 1234. For eksempel PORT=1235 pnpm dev.

Bruk av pakkene

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

Du kan bruke Jøkul på to måter:

1. Bruke React-komponenter og stilark.
2. Ta inn kun stilark.

Komponentpakkene inneholder alt som trengs, inkludert avhengigheter til andre Jøkul-pakker.

NB! Selv om komponentpakkene inneholder alle avhengigheter må du selv sørge for å importere stilpakken i koden din. Dette er fordi vi ikke vil legge for harde føringer på utviklerverktøy, for eksempel kreve Webpack.

Eksempel på bruk av React-pakker

Installer React-pakken, for eksempel npm i @fremtind/jkl-button-react. Den sørger for å laste ned CSS-pakken, men du må selv sørge for at CSSen faktisk blir brukt i prosjektet ditt.

import { PrimaryButton } from "@fremtind/jkl-button-react";
import "@fremtind/jkl-button/button.min.css"; // husk å importere stilarket
...
<PrimaryButton onClick={doStuff}>Cool</PrimaryButton>
...

Noen ganger må du også importere stilarkene til avhengigheter av komponenten du skal bruke. Et eksempel er pakken for tabeller, hvor du trenger CSSen til en annen pakke hvis du skal lage ekspanderbare tabellrader. Sjekk README-fila i hver enkelt React-pakke for å se hva den trenger.

Eksempel på bruk av stilark-pakker

Hvis du ikke vil bruke React-komponentene kan du bruke stilarkene direkte. Pakkene med stilark publiseres både med ferdig kompilert og prefikset CSS i minifisert og uminifisert variant, i tillegg til SCSS-kildekoden.

npm i @fremtind/jkl-button

import "@fremtind/jkl-button/button.min.css";
...
<button className="jkl-button jkl-button--primary" onClick={doStuff}>Cool</button>
...

Hvis prosjektet ditt også bruker SCSS kan du hente stiler via samme filnavn som CSSen. I tillegg har @fremtind/jkl-core en modul med mixins, variabler og funksjoner som brukes internt i Jøkul. Disse kan være nyttige også i ditt eget prosjekt.

@use "@fremtind/jkl-core/jkl"; // ⬅️ Mixins, variabler og funksjoner
@use "@fremtind/jkl-core/core"; // Stilene som kompileres til @fremtind/jkl-core/core.css
@use "@fremtind/jkl-button/button"; // Stilene som kompileres til @fremtind/jkl-button/button.css
// osv.

Bruk kjernen til å lage egne komponenter i Jøkul-drakt

Om du skal bygge komponenter for Fremtind, utover de som finnes i Jøkul, bør du bruke variablene fra @fremtind/jkl-core. Det sørger for at farger, sperring, typografisk skala og liknende holder seg oppdatert mot endringer i designsystemet.

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.

Særtilfeller og kjente problemer

Multi-root workspaces for Jøkul

Merk: Følgende feil ser ut til å kun påvirke de som bruker Visual Studio Code. Bruker du et annet IDE, skal det ikke være nødvendig å følge denne veiledningen.

Bakgrunn

Prosjektet bruker Multi-root Workspaces i Visual Studio Code for å håndtere unike innstillinger for flere mapper i samme arbeidsområde. Ved å sette opp multi-root workspaces kan vi spesifisere konfigurasjoner som er tilpasset hver enkelt mappes krav, som spesifikke TypeScript-versjoner.

Formål

I prosjektet fungerer portalen-mappen som et eget PNPM-workspace og krever TypeScript versjon 5.4.5 for å være kompatibel med Payload CMS v2. Dette oppsettet sikrer korrekt IntelliSense-støtte og konsekvent funksjonalitet spesielt for portalen, uten å påvirke TypeScript-versjonen i hovedarbeidsområdet. Mer om dette behovet kan leses i denne GitHub-saken.

Konfigurasjon

Multi-root workspaces er lagret i en JSON-fil (jokul.code-workspace) med følgende relevante innstillinger:

• Mapper:
  • . (hovedprosjektkatalogen - jokul)
  • portalen (selvstendig arbeidsområde innenfor prosjektet)
• TypeScript-versjon:
  • portalen-mappen har en spesifikk TypeScript-versjonsbane: "typescript.tsdk": "portalen/node_modules/typescript/lib". Dette peker Visual Studio Code til TypeScript 5.4.5 innenfor portalen, mens hovedarbeidsområdet kan operere uavhengig.

Bruksanvisning

For å åpne multi-root workspaces og sikre riktig TypeScript-konfigurasjon:

1. Åpne terminalen.
2. Kjør følgende kommando i jokul: code jokul.code-workspace

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 🤔 👀

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