Bidra som utvikler

RepoAssetsCSSCLIReactVue

Hvordan bidra - Vue ⭐

Vi er veldig happy med at du vurderer å bidra! Om du er usikker på noe som helst, ta kontakt. Eller bare send inn den buggen eller PRen uansett. Verste som skjer er at vi høflig ber deg endre på noe. Vi setter pris på alle hyggelige bidrag!

📝 Forutsetninger

Aller først må du konfigurere git-hooks slik at scripts kjøres ved commits, som for eksempel et script som kopierer innhold fra readme og contributing til dokumentasjonsnettsiden.

Sett opp git hooks:

git config core.hooksPath scripts/git-hooks

Lerna

Punkt er et monorepo og bruker lerna. Det betyr at alle kommandoer kjører fra repoets rot, og ikke i subrepoene.

Et utdrag fra rot-package.json viser noen scripts som er satt opp for å forenkle utvikling i dette subrepoet:

  "scripts": {
    "build-vue": "npx lerna run build --scope=@oslokommune/punkt-vue",
    "build-vue-app": "npx lerna run build-app --scope=@oslokommune/punkt-vue",
    "dev-vue": "npx lerna run dev --scope=@oslokommune/punkt-vue",
  }

Figma

Sørg for at noen har designet komponenten i Figma (Krever innlogging og tilgang).

🛠️ Gjør arbeidet

Filstruktur

Under components lag en folder med komponentnavnet. Lag to filer, en for vue-komponenten og en for eksport av komponenten. Prefixen Pkt skal ikke være med på navngivingen, men skal navngis i komponenten og eksporteres med det.

vue/
└── src/
    └── components/
        └── alert/
            ├── index.js
            └── Alert.vue

Husk å legge til komponenten i index.js som ligger i components-mappen.

// components/index.js

import Alert from "./Alert.vue";
import { use, registerComponent } from "../../utils/plugins";

const Plugin = {
  install(Vue) {
    registerComponent(Vue, Alert);
  },
};

use(Plugin);

export default Plugin;

export { Alert as PktAlert };

Lokal utviklingsserver

For å teste komponenten din kan du legge den til i views og router, kjør følgende (fra root):

$ npm run dev-vue

SCSS

Det enkleste er å starte og utvikle komponenten som en normal vue-komponent, med SCSS i <style>. Når du er fornøyd flytt SCSS til punkt-css:

css/
└── src/
    └── scss/
        └── components/
            └── _alert.scss

Fra mappen css kjør:

$ npm run build-package

Da skal CSS’en være tilgjengelig for deg i vue

🤝 Lag PR

Når du er klar for en PR skriv din GitHub-message som sier hva som er gjort, og evt issue nummer.

Vi bruker Conventional Commits for å beskrive commits gjennom noen regler. Ingen fare om du ikke følger den, vi tar en gjennomgang og evt justerer 😎.

fix(vue): #NR Rett feil på alert-komponenten              # med issuenummer
fix(vue): Rett feil på alert-komponenten                  # patcher en bug i koden (patch i Semantic Versioning)
feat(vue): Legg til funksjonalitet                        # ny funksjonalitet i koden (minor i Semantic Versioning)
feat(vue)!: Legg til funksjonalitet og endre eksisterende # breaking change i koden (major i Semantic Versioning)
docs: Endre dokumentasjon                                  # Endring i dokumentasjon

🔢 Publisering og versjonering

Vi tar oss av publisering av pakken og versjonering.

Punkt bruker Semantic Versioning 2.0.0 for versjonering av pakkene.