Merge pull request #200 from navikt/migrere-til-vite

Migrerer fra react-scripts til Vite
navikt · Aug 7, 2024 · 3a2637b · 3a2637b
2 parents ac2f550 + a751e37
commit 3a2637b
Show file tree

Hide file tree

Showing 94 changed files with 9,506 additions and 72,628 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,35 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:react/jsx-runtime",
+        "plugin:jsx-a11y/recommended",
+        "prettier"
+    ],
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
+    },
+    "overrides": [],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": ["react", "@typescript-eslint"],
+    "rules": {
+        "quotes": ["warn", "single", { "avoidEscape": true }],
+        "semi": ["error", "always"],
+        "max-len": [1, { "code": 150, "ignoreComments": true, "ignoreStrings": true }],
+        "indent": "off",
+        "@typescript-eslint/no-non-null-assertion": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+        "react/display-name": "off"
+    }
+}
diff --git a/.github/workflows/build-and-test.yml b/.github/workflows/build-and-test.yml
@@ -1,25 +1,25 @@
 name: Build and test
 
 on:
-  push:
+    push:
 
 jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repo
-        uses: actions/checkout@v3
-      - name: Setup node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: '18'
-          registry-url: 'https://npm.pkg.github.com'
-          cache: 'npm'
-      - name: Install dependencies
-        run: npm ci
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.READER_TOKEN }}
-      - name: Build application
-        run: npm run build
-      - name: Run tests
-        run: npm test
+    build:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout repo
+              uses: actions/checkout@v3
+            - name: Setup node.js
+              uses: actions/setup-node@v3
+              with:
+                  node-version: '20'
+                  registry-url: 'https://npm.pkg.github.com'
+                  cache: 'npm'
+            - name: Install dependencies
+              run: npm ci
+              env:
+                  NODE_AUTH_TOKEN: ${{ secrets.READER_TOKEN }}
+            - name: Build application
+              run: npm run build
+            - name: Run tests
+              run: npm test
diff --git a/.github/workflows/publish-beta.yaml b/.github/workflows/publish-beta.yaml
@@ -1,41 +1,40 @@
 name: Publish beta
-on:
-  workflow_dispatch
+on: workflow_dispatch
 
 jobs:
-  publish-beta:
-    name: Publish to package registry
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write
-      packages: write
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-      - name: Setup node.js
-        uses: actions/setup-node@v2
-        with:
-          node-version: '16.15.0'
-          registry-url: 'https://npm.pkg.github.com'
-          cache: 'npm'
-      - name: Bump version
-        run: |
-          git config --global user.name '${{ github.actor }}'
-          git config --global user.email '${{ github.actor }}@users.noreply.github.com'
-          npm version prerelease --preid beta
-      - name: Install dependencies
-        run: npm ci
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.READER_TOKEN  }}
-      - name: Build package
-        run: npm run build
-      - name: Run tests
-        run: npm test
-      - name: Publish package
-        id: publish
-        run: npm publish --tag beta
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      - name: Push new version tag
-        if: steps.publish.outcome == 'success'
-        run: git push
+    publish-beta:
+        name: Publish to package registry
+        runs-on: ubuntu-latest
+        permissions:
+            contents: write
+            packages: write
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v2
+            - name: Setup node.js
+              uses: actions/setup-node@v2
+              with:
+                  node-version: '20'
+                  registry-url: 'https://npm.pkg.github.com'
+                  cache: 'npm'
+            - name: Bump version
+              run: |
+                  git config --global user.name '${{ github.actor }}'
+                  git config --global user.email '${{ github.actor }}@users.noreply.github.com'
+                  npm version prerelease --preid beta
+            - name: Install dependencies
+              run: npm ci
+              env:
+                  NODE_AUTH_TOKEN: ${{ secrets.READER_TOKEN  }}
+            - name: Build package
+              run: npm run build
+            - name: Run tests
+              run: npm test
+            - name: Publish package
+              id: publish
+              run: npm publish --tag beta
+              env:
+                  NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+            - name: Push new version tag
+              if: steps.publish.outcome == 'success'
+              run: git push
diff --git a/.github/workflows/publish-release.yaml b/.github/workflows/publish-release.yaml
@@ -1,61 +1,61 @@
 name: Publish release (master only)
 on:
-  workflow_dispatch:
-    inputs:
-      releaseType:
-        type: choice
-        required: true
-        description: 'Release type'
-        default: 'patch'
-        options:
-          - patch
-          - minor
-          - major
-      releaseBody:
-        type: string
-        required: true
-        description: 'Release description'
+    workflow_dispatch:
+        inputs:
+            releaseType:
+                type: choice
+                required: true
+                description: 'Release type'
+                default: 'patch'
+                options:
+                    - patch
+                    - minor
+                    - major
+            releaseBody:
+                type: string
+                required: true
+                description: 'Release description'
 
 jobs:
-  publish:
-    name: Publish to package registry
-    runs-on: ubuntu-latest
-    if: github.ref == 'refs/heads/master'
-    permissions:
-      contents: write
-      packages: write
-    steps:
-      - name: Checkout branch
-        uses: actions/checkout@v2
-      - name: Setup node.js
-        uses: actions/setup-node@v2
-        with:
-          node-version: '16.15.0'
-          registry-url: 'https://npm.pkg.github.com'
-          cache: 'npm'
-      - name: Bump version
-        run: |
-          git config --global user.name '${{ github.actor }}'
-          git config --global user.email '${{ github.actor }}@users.noreply.github.com'
-          echo "VERSION_TAG=$(npm version ${{ github.event.inputs.releaseType }})" >> $GITHUB_ENV
-      - name: Install dependencies
-        run: npm ci
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.READER_TOKEN  }}
-      - name: Build package
-        run: npm run build
-      - name: Run tests
-        run: npm test
-      - name: Publish package
-        id: publish
-        run: npm publish
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      - name: Push new version tag
-        if: steps.publish.outcome == 'success'
-        run: git push
-      - name: Create release
-        uses: softprops/action-gh-release@v1
-        with:
-          tag_name: ${{ env.VERSION_TAG }}
-          body: ${{ github.event.inputs.releaseBody }}
+    publish:
+        name: Publish to package registry
+        runs-on: ubuntu-latest
+        if: github.ref == 'refs/heads/master'
+        permissions:
+            contents: write
+            packages: write
+        steps:
+            - name: Checkout branch
+              uses: actions/checkout@v2
+            - name: Setup node.js
+              uses: actions/setup-node@v2
+              with:
+                  node-version: '20'
+                  registry-url: 'https://npm.pkg.github.com'
+                  cache: 'npm'
+            - name: Bump version
+              run: |
+                  git config --global user.name '${{ github.actor }}'
+                  git config --global user.email '${{ github.actor }}@users.noreply.github.com'
+                  echo "VERSION_TAG=$(npm version ${{ github.event.inputs.releaseType }})" >> $GITHUB_ENV
+            - name: Install dependencies
+              run: npm ci
+              env:
+                  NODE_AUTH_TOKEN: ${{ secrets.READER_TOKEN  }}
+            - name: Build package
+              run: npm run build
+            - name: Run tests
+              run: npm test
+            - name: Publish package
+              id: publish
+              run: npm publish
+              env:
+                  NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+            - name: Push new version tag
+              if: steps.publish.outcome == 'success'
+              run: git push
+            - name: Create release
+              uses: softprops/action-gh-release@v1
+              with:
+                  tag_name: ${{ env.VERSION_TAG }}
+                  body: ${{ github.event.inputs.releaseBody }}
diff --git a/.npmrc b/.npmrc
@@ -1 +1 @@
-@OWNER:registry=https://npm.pkg.github.com
+@navikt:registry=https://npm.pkg.github.com
diff --git a/CONTRIBUTE.md b/CONTRIBUTE.md
@@ -8,47 +8,24 @@ I terminalen kjør følgende kommandoer
 
 ```
   npm install
-  docker-compose up -d && npm start
+  docker-compose up -d
   npm start
 ```
 
-(docker-compose kjører opp nødvendige mocks og oidc-provider)
+(docker-compose starter dekoratøren, mocks og oidc-provider)
 
-Arbeidsforhold er kun npm-pakker som skal konsumeres av andre applikasjoner. For å vise denne pakken i nettleser, blir den åpnet via eksempelapplikasjonen (ligger i `/example`-mappen). Det er denne eksempelapplikasjonen som starter opp når du kjører `npm start`.
+Arbeidsforhold er kun npm-pakker som skal brukes av andre applikasjoner. For å vise denne pakken i nettleser, blir den åpnet via eksempelapplikasjonen som ligger i `/example`-mappen. Det er denne eksempelapplikasjonen som starter opp når du kjører `npm start`.
 
-Prosjektet støtter hot-reloading, endringer i komponentene vil føre til at test-applikasjonen oppdateres.
+Prosjektet støtter hot-reloading, endringer i komponentene vil føre til at eksempel-applikasjonen oppdateres.
 
 ## Publisering
 
-Merk at pakken publiseres i Github Packages og ikke Npmjs. Dersom du ikke har autentisert npm cli mot GHP, gjør du det med
-`npm login --registry=https://npm.pkg.github.com`
-Du finner [mer informasjon om autentisering mot Github Packages her](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry#authenticating-to-github-packages).
+Benytt fanen "Actions" og deploy-jobben "Beta" for å publisere nye betaer, enten som patch, minor eller major. Merk at pakken publiseres i Github Packages og ikke Npmjs.
 
-### Publisering av betaversjon
+### Versjonering
 
-1. Husk å oppdatere branchen din slik at den ikke ligger etter master. (`git fetch` henter alle brancher.)
-2. For ordens skyld, commit alle endringene i forkant.
-3. `npm run publish:prepatch` | `npm run publish:preminor` | `npm run publish:premajor`
+Det er viktig å følge semver-prinsippene når du velger hvilken versjon du øker til. Du finner [mer informasjon om semver her](https://docs.npmjs.com/about-semantic-versioning) dersom du er usikker på om du skal velge patch, minor eller major.
 
-Du finner [mer informasjon om semver her](https://docs.npmjs.com/about-semantic-versioning) dersom du er usikker på om du skal velge prepatch, preminor eller premajor.
-
-Beta-versjonen du har publisert blir gjort tilgjengelig som `x.x.x-beta.x` og kan hentes inn som en spesifikk versjon i den konsumerende applikasjonen, feks
-
-`npm install @navikt/[email protected]`.
-
-## Publisering av flere betaer
-
-Enkelte ganger er det nødvendig å publisere flere betaer iløpet av testingen, feks `x.x.x-beta.0`, `x.x.x-beta.1`, `x.x.x-beta.2` osv. Etter å ha publisert første beta (se ovenfor) kan du 'betabumpe' pakken med
-
-`npm version prerelease`
-og deretter
-`npm publish --access public --tag beta`
-
-### Publisering av ny versjon
-
-1. Publisering av ny versjon skjer fra master. Dvs at alle relevante brancher må være merget inn.
-2. `npm run build`
-3. `npm version patch | minor | major`
-4. `npm publish --access public`
-
-Du finner [mer informasjon om semver her](https://docs.npmjs.com/about-semantic-versioning) dersom du er usikker på om du skal velge patch, minor eller major.
+-   Major: Arbeidsforhold har såkalte "breaking changes" som kan gjøre at den slutter å fungere hvis man ikke gjør nødvendige tilpassinger i applikasjonen sin.
+-   Minor: Relativt mange endringer og nye funksjoner, men alle skal i utgangspunktet være bakoverkompatible.
+-   Patch: Kun feilretting og ingen funksjonsendring eller nye funksjoner.
diff --git a/README.md b/README.md
@@ -1,7 +1,5 @@
 # NAV Arbeidsforhold
 
-[![npm version](https://badge.fury.io/js/%40navikt%2Farbeidsforhold.svg)](https://badge.fury.io/js/%40navikt%2Farbeidsforhold) |
-
 NPM-modul med React-komponenter som viser brukerens arbeidsforhold
 
 ## Installasjon
@@ -10,14 +8,23 @@ NPM-modul med React-komponenter som viser brukerens arbeidsforhold
 npm install @navikt/arbeidsforhold
 ```
 
+### Peke til korrekt pakkeregister
+
+Merk at pakken er publisert til Github Package Registry (npm.pkg.github.com) og ikke npmjs.com. Det betyr at du i roten av prosjektet ditt
+må legge inn .npmrc med følgende innhold:
+
+```
+@navikt:registry=https://npm.pkg.github.com
+```
+
 ## Komponenter
 
 Prosjektet er delt opp i uavhengige moduler som kan importeres
 
 #### Liste med arbeidsforhold
 
 ```js
-import { ListeMedArbeidsforhold } from "@navikt/arbeidsforhold";
+import { ListeMedArbeidsforhold } from '@navikt/arbeidsforhold';
 ```
 
 <img alt="Screenshot av liste med arbeidsforhold" src="screenshots/ListeMedArbeidsforhold.png" width="60%"/>
@@ -63,7 +70,7 @@ Se komplett eksempel under mappen <i>/example</i>
 #### Detaljert arbeidsforhold
 
 ```js
-import { Detaljert } from "@navikt/arbeidsforhold";
+import { Detaljert } from '@navikt/arbeidsforhold';
 ```
 
 <img alt="Screenshot av detaljert arbeidsforhold" src="screenshots/DetaljertArbeidsforhold.png" width="60%"/>
@@ -89,6 +96,14 @@ Komponenten vil hente data fra arbeidsforhold-api basert på miljo-variabelen, m
 CustomApiUrl må inneholde {id} som erstattes av navArbeidsforholdId.
 Eksempel: "https://din-api-proxy.nav.no/arbeidsforhold/{id}"
 
+#### CSS
+
+CSS må importeres spesifikt, feks i index.tsx eller app.tsx i applikasjonen din:
+
+```
+@import '@navikt/arbeidsforhold/style.css'
+```
+
 ## Logging
 
 Vi bruker fo-frontendlogger for logging. For oppslag i kibana: