ID-porten Storybook

Dette prosjektet inneheld komponentane til ID-porten i dokumentasjonsverktøyet Storybook.

Sette opp Storybook lokalt

1. Installer NODE (LTS)

2. Installer avhengigheiter ved å kjøyre kommandoen frå root mappa (der package.json fila ligg)

npm install

3. Start Storybook lokalt

npm run storybook

Sette opp Storybook i Docker

1. Du må ha Docker og Docker compose installert lokalt :-)

2. Sjekk ut repo og gå til mappa

3. I Docker oppsettet treng ein å spesifisere informasjon i høve GIT og NPM. Dette gjer du ved å opprette ei ".env" fil basert på ".env.test". Legg så inn informasjon om GIT brukarnamn og epost, samt eit NPM token (for publisering). Docker oppsettet forventar og at du har din public github nøkkel for signering lokalt slik "~/.ssh/github_rsa.pub", og at du køyrer ein SSH agent lokalt for nøkkelautentisering.

4. Køyr kommando for å starte utviklingsmiljø:

docker compose up

5. For å kople til container kan du bruke:

docker compose exec idporten-design-system bash

6. For å fjerne miljø:

docker compose down --rmi all

Commit ✍️

Start commits med fix:, feat:, eller BREAKING CHANGE: for å få de med i endringsloggen (se CHANGELOG.md i pakkene) som automatisk oppdateres på Storybook når nye versjoner publiseres. Dette burde gjøres på commits som endrer innholdet i det som publiseres (filene som bygges).

Ved neste versjonering/publisering vil fix: trigge en patch (0.0.x), feat: en minor update (0.x.0), og BREAKING CHANGE: alene eller etter fix:/feat: vil trigge en major update (x.0.0).

Første linje (og eventuelt det etter BREAKING CHANGE:) i commit-teksten blir automatisk lagt til i endringsloggen i pakken til der commiten gjør en endring. Legg til et scope med parantes, se eksempel under:

fix(button): short description of what commit does (e.g. add secondary variant style)

Longer in-depth description in a paragraph here, if needed.

BREAKING CHANGE: Explanation of things that break with this commit and what users need to do to migrate, if needed.
In this case it could be that a fix in the button changes the HTML structure of the button component, 
which requires the users to modify their implementation using the @digdir/ds-core-css package.

Les mer om Conventional Commits på https://conventionalcommits.org.

Versjonering og publisering 🚀

For å byggje filer til distribusjon og publisere desse til NPM, gjer følgjande:

1. Kjøyr denne kommandoen for å oppdatere versjonsnummer og generere ny changelog:

yarn release

Commit meldingane vil automatisk oppdatere til riktig versjon basert på om det er ein FIX, FEAT eller BREAKING CHANGE (sjå commit seksjonen over).

2. Oppdater versjonsnummer manuelt i ./storybook/stories/changelog.stories.mdx

yarn replace:version

Det er totalt 4 plassar versjonsnummer skal oppdaterast (2 gonger i CDN og 2 gonger for zip nedlasting).

3. Bygg distribusjonsfilene:

yarn build

Dette vil lage ei "dist" mappe og ei ZIP fil med den nye versjonen.

4. Sjå gjennom og vurder endringane. Vidare må du leggje endringae til, commite og pushe endringane du gjorde i changelog og dei nye distribusjonsfilene:

# Hente gjeldande versjon frå package.json fil til bruk ved commit melding.
version=$(jq -r '.version' package.json)
echo $version

git status

git add -A

git commit -m "release $version" && git push --follow-tags origin main

Viktig at "--follow-tags" blir med slik at changeloggen blir riktig generert.

5. Publiser til NPM

For å publisere til NPM må du vere lagt til Digdir organisasjonen i NPM og logga inn.

Kjøyr npm whoami for å sjekke om du er logga inn, og så yarn publish:package for å publisere pakken til NPM. Når du får spørsmål om versjon, trykk på enter.

yarn publish:package

Lenke til ID-porten Storybook

https://felleslosninger.github.io/idporten-design-system/

Lisens

BSD 3-Clause License

Laga av:

• Øyvind Thune ([email protected])
• Jens Mo ([email protected])