Installation

Checka ut repo som vanligt och gör en npm install.

npm install

Det här kommer starta igång (bootstrap) för både rot-projekt och alla paket i mappen packages.

Beroenden kommer bli lösta genom användning av symlänkar (symboliska länkar) och ändringar blir direkt synliga mellan paketen.

Nästan alla ågärder kan genomföras i batch genom att använda kommando i rot-projektet. Till exempel, npm test kommer köra testerna i alla projekt.

Det finns också ett antal kortkommando-skript för att du ska kunna köra paket-specifika npm-kommandon från roten, till exempel npm run logic build.

Läs mer i dokumentation om Lerna hur kommadon fungerar och se hela listan med kommandon

Om du vill installera ett specifikt paket som till exempel css-variables skriv:

npm  install --save-dev @fkui/css-variables

Kommandon

Installation

För att ladda ner beroenden kör:

npm install

Efter att du har laddat ner beroenden behöver du bygga dem, se kommando nedan.

Bygga

Du bygger alla paket genom:

npm run build

För att köra webbplatsen för dokumentationen behöver du först bygga den:

npm run build:docs

Köra (Run)

För att starta dokumentationen skriver du:

npm run start

För att starta vue-paketet med Vite utvecklingsserver:

npm run vue start

Testning

Du kör igång hela test-sviten mot alla paket genom att skriva:

npm test

För att köra cypress-tester behöver du först starta servern med npm start och därefter köra:

npm exec cypress -- open

För att köra enhetstest för ett paket skriv:

npm run unit

Om du vill köra test i watch mode:

npm run unit:watch

Lintning

Du kör all lintning och konfiguration i rot-paketet genom att skriva:

npm run lint

Applicera kodstandard

Se till att all kod följer kodstandard genom att skriva:

npm run prettier:write

Paketering

För att paketera allt och lägga de resulterande filerna (tarballs) i dist/-katalogen skriv:

npm pack --workspaces --pack-destination dist/

Länkning

Länka alla paket (css-variables, logic, design, vue) så at de kan länkas till andra lokala repon genom att skriva:

npm run link-all

Du länkar till andra lokala repon genom att använda npm link {package-name}, till exempel:

npm link @fkui/vue

Kodstandard

Följ riktlinjerna nedan

• Namnge variabler enligt BEM:s standard för namn.
• Ta fram exempel för olika komponent-tillstånd.
• Undvid att skapa globala CSS-klasser.
• Använd prefix för komponenter för att underlätta för de konsumenter som kör olika versioner på samma webbplats.
• Sätt prefix .h- för hjälp-klasser.
• Använd rem för storlekar (finns undantag, till exempel när du inte vill att skalning ska utgå från rem-storleken).

Commit

Skriv ditt commit-meddelande enligt standard conventional commits.

type [optional scope]: description

Scope är frivilligt men ska sättas till det paket som ändringen påverkar eller använd en av de generiska typerna av ändring (Type) från tabellen längre ner.

git commit -m 'feat: new component (fixes issue number)'

Om inget scope är satt kommer det sättas automatiskt baserat på vilka paket som är påverkade.

Du kan sätta scope manuellt genom:

git commit -m 'feat(fkui-vue): new component (fixes issue number)'

För att sätta multipla scope separerar du dem i en lista med komma:

git commit -m 'fix(fkui-design,fkui-vue): update styling (fixes issue number)'

Du sätter en release som brytande (BREAKING) genom att lägga till orden BREAKING CHANGE: i sidfoten följt av en beskrivning av vad som har ändrats. Du behöver också informera konsumenten hur hen ska hantera ändringen.
Texten kommer inkluderas i CHANGELOG. Du kan också använda ett utropstecken ! efter type/scope för att visa att en release är brytande.

De olika typerna av ändring (Type) som är tillåtna och vilken release som de genererar visas i tabellen nedan.

Typer av ändring och vilken release de generar

Commit-meddelande utifrån typ av ändring