https://github.com/fremtind/jokul
Jøkul er et designsystem utviklet av Fremtind.
https://github.com/fremtind/jokul
design-system designsystem fremtind react sass scss
Last synced: 2 months ago
JSON representation
Jøkul er et designsystem utviklet av Fremtind.
- Host: GitHub
- URL: https://github.com/fremtind/jokul
- Owner: fremtind
- License: mit
- Created: 2019-06-14T11:31:00.000Z (about 7 years ago)
- Default Branch: main
- Last Pushed: 2026-04-21T14:21:50.000Z (2 months ago)
- Last Synced: 2026-04-21T15:42:38.956Z (2 months ago)
- Topics: design-system, designsystem, fremtind, react, sass, scss
- Language: TypeScript
- Homepage: https://jokul.fremtind.no
- Size: 450 MB
- Stars: 74
- Watchers: 21
- Forks: 33
- Open Issues: 67
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
- Security: SECURITY.md
Awesome Lists containing this project
README
# Jøkul
[Jøkul](https://jokul.fremtind.no) er et designsystem utviklet av [Fremtind](https://fremtind.no).
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](https://nodejs.org/en)-versjonen definert i [`.nvmrc`](./.nvmrc), gjerne via [Node Version Manager (NVM)](https://github.com/nvm-sh/nvm).
- [pnpm](https://pnpm.io/installation#using-corepack), 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](https://biomejs.dev/) 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](https://marketplace.visualstudio.com/items?itemName=biomejs.biome) og [IntelliJ](https://plugins.jetbrains.com/plugin/22761-biome), 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.
Vi bruker to tydelige release-brancher:
- `main` publiserer stabile versjoner.
- `release/next` publiserer prereleases med npm-taggen `next`.
Dette er splittet i to egne GitHub Actions-workflows: én for stabile releases og én for prereleases.
I tillegg synkes `release/next` automatisk med `main` ved hver push til `main`, slik at prerelease-branchen holder seg oppdatert med det som allerede er merged og publisert stabilt. Hvis synken treffer mergekonflikter gjenbrukes en fast sync-branch og én sync-PR inn mot `release/next` for manuell konfliktløsning. Når sync-PR-en ikke lenger trengs, ryddes sync-branchen opp automatisk så lenge den ikke inneholder egne commits som mangler i `release/next`.
### Relevante scripts
- `pnpm changeset` oppretter en changeset.
- `pnpm release:version` kjører `changeset version`.
- `pnpm release:pre:enter` kjører `changeset pre enter next`.
- `pnpm release:pre:exit` kjører `changeset pre exit`.
- `pnpm release:publish` bygger og publiserer.
### Anbefalt prerelease-flyt
`release/next` er den faste branchen for prereleases.
1. Gå til `release/next`.
2. Hvis vi starter en ny prerelease-runde og `.changeset/pre.json` ikke finnes, kjør `pnpm release:pre:enter`.
3. Hvis `.changeset/pre.json` ble opprettet eller endret, commit filen til `release/next`.
4. Lag en branch fra `release/next`.
5. Gjør endringene dine på branchen.
6. Hvis endringen skal publiseres, kjør `pnpm changeset`.
7. Lag en PR inn mot `release/next`.
8. Når PR-en merges til `release/next`, håndterer CI prerelease-versjonering og publisering med `next`.
9. Når innholdet i `release/next` er ferdig testet og klart for stabil release, kjør `pnpm release:pre:exit`, deretter `pnpm release:version`, og commit resultatet på `release/next`.
10. Merge `release/next` tilbake til `main`. Neste publisering fra `main` går da ut som en vanlig stabil versjon.
Steg 2 og 3 er bare nødvendig når vi starter en ny prerelease-runde. Filen `.changeset/pre.json` forteller Changesets og CI at `release/next` er i prerelease-modus med taggen `next`.
Kort sagt: `main` er for stabile releases, og `release/next` er for testing og publisering av prereleases.
### Bruk av pakkene
Vi har en egen guide som hjelper deg med å [komme i gang](https://github.com/fremtind/jokul/tree/main/packages/jokul#fremtindjokul) som ny bruker av Jøkul.
## Dokumentasjon
I [dokumentasjonen](https://jokul.fremtind.no/) 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](https://jokul.fremtind.no/guider/hvordan-endre-jokul).
- [Bloggen vår](https://jokul.fremtind.no/blog/), 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](./CODE_OF_CONDUCT.md) før du deltar med bidrag.
## Lisens
Jøkul er distribuert under [MIT-lisensen](./LICENSE) for åpen kildekode.
## Bidragsytere
Takk for bidrag fra disse flotte menneskene ([emoji-oversikt](https://allcontributors.org/docs/en/emoji-key)):
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](https://github.com/all-contributors/all-contributors). Vi setter pris på alle bidrag!