Hopp til innhold

Praktisk info for utviklere

Designsystemet blir både en ekstern avhengighet og et prosjekt du er med på å utvikle. Derfor er det et par ting det kan være verdt å vite om.

Jøkul er open source

Jøkul oppfører seg som alle andre eksterne avhengigheter du har i prosjektet ditt, som for eksempel React. Du installerer og oppgraderer Jøkul-pakker på akkurat samme måte. Jøkul er open source og offentlig tilgjengelig, så du trenger ikke sette opp noe eget for å få tilgang – det bare funker.

~ $ yarn add @fremtind/jkl-core @fremtind/jkl-webfonts

Se hvilke pakker som finnes

Jøkuls kode er delt inn i mange pakker, to pakker per komponent. Vi skiller på CSS-pakker og React-pakker i Jøkul for å kunne bruke stilene selv om prosjektet ikke bruker React, selv om det er sterkt anbefalt.

Når du bruker React-komponenten blir stilpakken automatisk installert som en avhengighet. Du trenger med andre ord ikke både React- og stilpakken i package.json.

Hvordan er flyten for å få publisert kode?

Det er en forventning at du er med på utviklingen av Jøkul, så det er lurt å ha et forhold til hvordan kode kommer fra din egen maskin ut i publiserte pakker. Vi har skrevet en egen guide om det her.

Brekkpunkter

Jøkul har tre brekkpunkter: medium, large, extra large. Disse punktene blir brukt innad i Jøkul, men begrenser ikke hva du kan bruke i din egen app. Det vil si at typografi og spacing i komponenter vil forandre seg ved disse verdiene, samtidig som du står fritt til å bruke egne brekkpunkter for å tilpasse layouten i prosjektet ditt etter egne behov.

StørrelseVerdiBenevnelse
Medium680pxmd
Large1200pxl
Extra Large1600pxxl

Dokumentasjon rett i editoren

Jøkul er skrevet i TypeScript og kommer med typedefinisjoner som en del av pakka. Editors med god TypeScript-støtte som Visual Studio Code hjelper deg med autoutfylling av propnavn og viser deg dokumentasjon i kontekst av det du jobber med.

Kodeeksempler i portalen

Alle komponentene har ett eller flere eksempler av typen du ser under. De viser hvordan du bruker dem, inkludert kodeeksempler. Bruk Vis kode-knappen for å se hvordan du kan lage eksemplet du ser på. Du finner også en oversikt over alle propsene til komponentene nederst på siden.

EmneInfoSuksessAdvarselFeil

Endringslogger og annet snadder

Du finner endringslogger og mer teknisk dokumentasjon i hver enkelt pakke på GitHub. Det er spesielt tre filer det verdt å vite om, her eksemplifisert gjennom pakken @fremtind/jkl-core:

Til slutt kommer det månedlige oppsummeringer på bloggen som det er verdt å følge med på. Sleng den i RSS-leseren din, så går du ikke glipp av noe.

Nyttige utviklerverktøy

Du har kanskje noen favoritter selv, men ta gjerne en titt på disse verktøyene når du jobber i eget prosjekt.

Visual Studio Code extensions

  • Live Share gjør det mulig å dele editoren med én eller flere kolleger i sanntid
  • Some Sass gir deg IntelliSense og forhåndsvisning av SassDoc som brukes i Jøkul
  • Prettier for å få formatering ved lagring
  • Når du skal jobbe i Jøkul bør du ha konfigurert VS Code til å foreslå relative importer, så skal forslag bli riktig med pakkenavn i stedet for paths

Linting og testing

Andre verktøy

Nå som du kjenner til det praktiske er det på tide å bli kjent med profilen