Utvikling av nye eller eksisterende løsninger

TL;DR

Vi bruker yarn for pakkeversjonering. Har du ikke yarn? corepack enable

git clone git@github.com:navikt/aksel.git
cd aksel
yarn install
yarn boot

// Storybook
yarn storybook

// Nettside
yarn dev

Storybook: http://localhost:6006

Nettside: http://localhost:3000

Tilgang til GitHub Package Registry

Noen avhengigheter hentes fra GitHub Package Registry. Sett opp en PAT med read:packages (autorisert for organisasjonen navikt): https://github.com/settings/tokens

Legg token i shell-profilen din (.zshrc eller .bashrc):

export NPM_AUTH_TOKEN=<din_pat_med_read:packages>

På Windows kan du legge inn tokenet som en lokal miljøvariabel.

Ikke Nav-ansatt?

Nettsiden avhenger av pakker som ikke er åpent tilgjengelig. Du kan likevel bidra på andre deler av repoet ved å kjøre denne kommandoen i stedet for yarn install:

yarn workspaces focus aksel @navikt/aksel-icons @navikt/ds-tokens @navikt/ds-css @navikt/ds-react @navikt/ds-tailwind @navikt/aksel @navikt/aksel-stylelint

Utviklingsmiljø

Vi bruker Storybook for utvikling av nye komponenter. Lag stories for komponentene du vil teste.

Safeguards

Om man vil ha en ekstra safeguard for å hindre at man kjører diverse sanity scripts fra lokal maskin mot produksjons-datasettet så kan du legge til denne variabelen i filen ./aksel.nav.no/website/.env:

LOCAL_DATASET_OVERRIDE=development

Utvikling av nye komponenter

Det er ikke satt opp noen generator for nye komponenter, men vi følger en fast struktur. Se ds-component-restructure for full mappestruktur og navngivning.

@navikt/core/react/src
├─ index.ts                          # Alle stabile exports (preview.ts for preview-komponenter)
└─ komponent/
   ├─ index.ts                       # "use client" + exports fra komponent
   ├─ Komponent.tsx                  # Komponentkode (root/ + undermapper for sammensatte komponenter)
   ├─ Komponent.meta.ts              # Metadata for dokumentasjon
   ├─ Komponent.stories.tsx          # Stories
   └─ Komponent.tests.stories.tsx    # Interaksjonstester (play-funksjoner)

@navikt/core/css/src
└─ komponent.css                     # Importeres i index.css med riktig layer

Dokumentasjon

Dokumentasjon for komponenter finner man på aksel.nav.no. Hvis man ønsker å skrive noe dokumentasjon selv gjør vi det via CMS-et Sanity. Kode-eksempler blir skrevet lokalt i /pages/eksempler

Versjonering av pakker

Vi bruker changeset for versjonering av pakker. Se README for mer informasjon.

Kodekvalitet og testing

Komponenter og løsninger blir testet med vitest + react-testing-library.

Commit: Kjører prettier på endrede filer + linter
Ved PR: Kjører tester, linter og visuelle regresjonstester

Oppdatere Aksel.nav.no

Push til main pusher endringer til prod

Push til next pusher endringer til aksel.dev.nav.no

3.2 KiB Raw Permalink Blame History