Hvordan bruke komponenter

Den første gangen jeg integrerte Jøkul i et eksisterende Next.js-prosjekt, tok det meg femten minutter å ha en fungerende knapp på skjermen. Hadde det gått galt? Nei — det er bare slik det er ment å fungere. Men det tok meg en uke til å forstå hvorfor det fungerer slik, og det er den historien jeg vil dele her.

Pakkestruktur som faktisk gir mening

I stedet for én stor monolitt-pakke lever hver Jøkul-komponent i sin egen subpath-eksport. Det betyr at du aldri trekker inn knappekode når du bare trenger en tekstinndata. I praksis ser en importlinje slik ut:

import { Button } from "@fremtind/jokul/button";

Enkelt, forutsigbart og lett å grep etter i kodebasen. Ingen magiske re-eksporter som gjemmer seg bak et barrel-fil-labyrint.

De komponentene jeg bruker mest

TextInput

Label, hjelpetekst, feilmelding og ARIA-kobling er innebygd. Slutter aldri å sette pris på det.

Message

Rask feedback til brukeren — info, success, warning og error. Leser-tilgjengelighet via role="alert" ut av boksen.

ExpandablePanel

Compound-komponent med Header og Content. Aria-attributter og fokushåndtering? Allerede på plass.

Select

Stilet nedtrekksliste med samme API som TextInput. Ikke mer ad-hoc CSS-overrides på native select.

Mørk modus uten ekstra kode

Det som virkelig imponerte meg da jeg testet Jøkul for første gang: alle komponentene håndterer mørk modus automatisk via CSS Custom Properties. Du setter data-theme="dark" på rot-elementet, og hele grensesnittet skifter. Ingen styled-components-temaer, ingen context-providers, ingen ekstra bunter.

Vil du speile operativsystemets preferanse? En liten JavaScript-snippet ved oppstart er alt som trengs. Vi løste det med en useEffect i _app.tsx som sjekker prefers-color-scheme og setter attributtet.

// app/layout.tsx eller pages/_app.tsx
import "@fremtind/jokul/core.css";
// komponent-CSS kan importeres der de brukes

TypeScript-integrasjonen er faktisk god

Jeg er vanligvis skeptisk til løfter om "fullt TypeScript-støtte", men Jøkul leverer. Autofullføring på prop-navn, union-typer på varianter som variant="info" | "warning", og feilmeldinger som faktisk forteller deg hva som er galt. Generelle HTML-attributter som className, id og data-* videresendes alltid til roten — ingen surprises.

Rådet mitt er enkelt: start med én komponent, les API-typen, og stol på at resten følger samme mønster. Det gjør det.