ID-porten Storybook
Dette prosjektet inneheld komponentane til ID-porten i dokumentasjonsverktøyet Storybook.
Sette opp Storybook lokalt
-
Installer NODE (LTS)
-
Installer yarn globalt (sudo på linux)
npm install --global yarn
- Installer avhengigheiter ved å kjøyre kommandoen frå root mappa (der package.json fila ligg)
yarn install
- Start Storybook lokalt
yarn storybook
Sette opp Storybook i Docker
-
Du må ha Docker og Docker compose installert lokalt :-)
-
Sjekk ut repo og gå til mappa
-
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.
-
Køyr kommando for å starte utviklingsmiljø:
docker compose up
- For å kople til container kan du bruke:
docker compose exec idporten-design-system bash
- 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:
- 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).
- 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).
- Bygg distribusjonsfilene:
yarn build
Dette vil lage ei "dist" mappe og ei ZIP fil med den nye versjonen.
- 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.
- 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