Lage nye React-komponenter

Denne guiden går mer på det tekniske av å utvikle et nytt komponent etter du vet hva som bør lages. Det står mer om prosessen rundt å velge hva som skal lages her og en guide på hvordan sette opp prosjektet på din maskin.

Basert på Radix UI primitives

For flere komponenter kan det være visse UU-krav som kan være vanskelig å implementere på egenhånd. Si du skal lage en modal. Det er visse krav til hvor fokus forekommer når du både entrer og forlater. Derfor bruker vi Radix UI primitives som utgangspunkt for flere av komponentene våre. Radix UI primitives er et ustylet bibliotek som har et fokus på UU. Ta derfor en titt i biblioteket deres om du finner et godt utgangspunkt der for det du skal lage.

Om du ikke finner et eksempel i Radix UI primitives, sjekk ut hvilke UU-krav som stilles til komponenten før du går i gang med utvikling.

Hvordan style komponentene?

Vi bruker SCSS-modules som styling-teknologi. Det utnytter at mange kjenner til CSS og du får unike klassenavn som unngår stil-kræsj. Vi bruker CSS-variabler (--layout-eksempel-variabel) istedenfor SCSS-variabler ($layout-eksempel-variabel). Unntaket er breakpoints, ettersom CSS ikke støtter CSS-variabler i media query.

Et eksempel kan se slik ut:

/* example.module.scss */
.wrapper {
  background: var(--color-primary);

  @media (min-width: $layout-breakpoint-medium) {
    display: none;
  }
}

For å få stilen konsistent med annet, helst benytt design-tokens så langt de dekker behovene dine. Velg først og fremst funksjonelle design-tokens, som color-primary istedenfor color-black-50. Om du har behov utenfor det design-tokens dekker, kan du bruke egendefinert styling.

Siden CSS ikke støtter variabler i breakpoints, benytter vi SCSS-modules.

Filstruktur

Du finner alle komponentene i packages/design-react. Hver komponent importeres i design-react/lientComponents.tsx eller design-react/serverComponents.tsx avhengig om de er et React server component eller ikke.

Hver komponent får sin egen mappe, for eksempel /button. I mappen vil det ligge button.tsx, button.module.scss og button.test.tsx.

Nyttige tips

• Skriv gode jsdoc-kommentarer, gjerne med et eksempel for bruk
• Bruk så få props som mulig. Om det fins flere usecases, kan det hende det er rett å splitte opp i flere komponenter
• Bryt opp komponenter i mindre komponenter, om det gir bedre leselighet
• Unngå å legge til avhengigheter
• Eksporter komponentene med stor bokstav og som named export, e.g. export function ExampleComponent({})