Komponentbibliotek for Bekk nøytral profil - IKKE BRUK HVIS DU IKKE ER BASEN

Dette er en veldig tidlig prototype av av et komponentbibliotek for Bekk sin nøytrale profil. Det er ikke ment å brukes av andre enn Basen, og det er ikke i nærheten av å være stabilt.

Installere komponentbiblioteket i en annen React-app

Biblioteket publiseres til npm som @bekk-basen/neutral-ui-do-not-use.

Installer siste release:

npm install @bekk-basen/neutral-ui-do-not-use@latest

Preview-versjoner

Hver merge til main og hver pull request publiseres automatisk til npm med sin egen dist-tag, slik at andre apper (for eksempel preview-deployments) kan ta i bruk en spesifikk versjon av biblioteket:

• @dev – siste bygg fra main
• @pr-<nummer> – siste bygg fra en gitt pull request (for eksempel @pr-42)

npm install @bekk-basen/neutral-ui-do-not-use@dev
npm install @bekk-basen/neutral-ui-do-not-use@pr-42

Preview-versjoner har en flytende 0.0.0-…-versjon uten sammenheng med releases. Dist-tag-en peker alltid på det nyeste bygget.

Bruke komponentbiblioteket i en annen React-app

Importer pakkens stylesheet én gang i appens entry point:

import "@bekk-basen/neutral-ui-do-not-use/styles.css"

Nå kan du bruke komponenter fra komponentbiblioteket:

import { Button } from "@bekk-basen/neutral-ui-do-not-use"

export function Example() {
  return <Button>Fortsett</Button>
}

GT America-fonten

Navbar-komponenten i bekk-neutral-ui bruker GT America-fonten. Komponentbiblioteket leveres imidlertid ikke med GT America-fontfiler. Hvis produktet ditt har lisens for GT America, host fonten i din egen applikasjon og registrer den ved å følge disse stegene:

1. Legg til fontfilen i appen din

For eksempel:

public/fonts/GT-America-Expanded-Medium.woff2

2. Registrer fonten i appens CSS

@font-face {
  font-family: "GT America Expanded";
  src: url("/fonts/GT-America-Expanded-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

Guider for utviklere

Lokal utvikling

Kjør den lokale docs-appen:

npm run dev

Bygg npm pakke:

npm run build:lib

Valider filene som ville blitt publisert:

npm pack --dry-run

Lag en lokal tgz av biblioteket for testing i en annen app:

npm pack

Utvikle en ny komponent

Det anbefales å la AI utvikle nye komponenter ved å følge instruksjonene i CLAUDE.md.

Etter at komponenten er implementert:

1. Verifiser at den ser korrekt ut i den lokale docs-appen (npm run dev).
2. Test den i en annen app med en lokal tarball (npm pack, installer deretter .tgz-filen).
3. La en designer gjøre en QA av komponenten mot Figma-designet.

Når alle tre stegene er godkjent, er komponenten klar til å lanseres.

Lansere en komponent

Når du lanserer en komponent, husk å:

1. Sett status: ReleaseStatus.Released i src/docs/index.ts. Eksempel:

{ name: "Button", ..., status: ReleaseStatus.Released }

2. Eksporter den fra src/index.ts. Eksempel:

export { Button, buttonVariants } from "@/components/button/button"

3. Inkluder pathen i tsconfig.lib.json under include. Eksempel:

"include": [
  "src/components/button"
]

4. Opprett en release på GitHub. Versjonen som publiseres til npm hentes fra git-taggen på releasen (f.eks. tag
5. v0.8.0 gir npm-versjon 0.8.0). Du trenger ikke å endre version-feltet i package.json – det står permanent på 0.0.0.

Når releasen opprettes, bygger og publiserer GitHub Actions automatisk biblioteket til npm med dist-tag-en latest. Versjonering trenger ikke å følge semver strengt, men hver release-tag må være en gyldig npm-versjon som ikke er publisert fra før.

Pre-commit hooks

Dette prosjektet bruker pre-commit hooks, se dokumentasjon.