nve-designsystem 0.1.13 → 0.1.14

package/package.json

@@ -1,60 +1,18 @@
 {
   "name": "nve-designsystem",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "main": "./nve-designsystem.umd.cjs",
   "module": "./nve-designsystem.js",
   "type": "module",
   "types": "index.d.ts",
-  "scripts": {
-    "dev": "vite",
-    "pack": "node scripts/prepublish.js pack",
-    "publish": "node scripts/prepublish.js publish",
-    "build": "node scripts/build.js",
-    "preview": "vite preview",
-    "lint": "eslint \"**/*.{js,ts}\"",
-    "doc": "npx web-component-analyzer analyze src/components/**/*.ts --format markdown --outDir doc",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build  && npm run copy-files-storybook",
-    "build:light": "node transform.js light",
-    "build:dark": "node transform.js dark",
-    "build:varsom_light": "node transform.js varsom",
-    "build:varsom_dark": "node transform.js varsom_dark",
-    "tokenbuild": "npm run build:light && npm run build:dark && npm run build:varsom_light && npm run build:varsom_dark",
-    "copy-files-storybook": "cpy \"./build/css/*\" \"./src/styles/*\" storybook-static/assets"
-  },
+  "scripts": {},
   "dependencies": {
     "@shoelace-style/shoelace": "^2.11.2",
     "chromatic": "^10.1.0",
     "lit": "^3.0.2"
   },
-  "devDependencies": {
-    "@mdx-js/loader": "^3.0.0",
-    "@storybook/addon-docs": "^7.6.4",
-    "@storybook/addon-essentials": "^7.6.4",
-    "@storybook/addon-links": "^7.6.4",
-    "@storybook/blocks": "^7.6.4",
-    "@storybook/web-components": "^7.6.4",
-    "@storybook/web-components-vite": "^7.6.4",
-    "@typescript-eslint/eslint-plugin": "^6.12.0",
-    "@typescript-eslint/parser": "^6.12.0",
-    "cpy": "^11.0.0",
-    "cpy-cli": "^5.0.0",
-    "eslint": "^8.54.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-lit": "^1.10.1",
-    "eslint-plugin-storybook": "^0.6.15",
-    "prettier": "^3.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "storybook": "^7.6.4",
-    "style-dictionary-utils": "^2.0.4",
-    "typescript": "^5.2.2",
-    "vite": "^5.0.0",
-    "vite-plugin-css-injected-by-js": "^3.3.1",
-    "vite-plugin-dts": "^3.7.0",
-    "web-component-analyzer": "^2.0.0"
-  },
+  "devDependencies": {},
   "overrides": {
     "prettier": "^3.1.0"
   }
-}
+}

package/.eslintignore

@@ -1,8 +0,0 @@
-/dist
-/node_modules
-.eslintrc.js
-/vite.config.ts
-/tokens
-/www
-/build
-/loader

package/.eslintrc.js

@@ -1,35 +0,0 @@
-module.exports = {
-    "env": {
-        "browser": true,
-        "es2021": true
-    },
-    "extends": [
-        "eslint:recommended",
-        "plugin:@typescript-eslint/recommended",
-        "plugin:lit/recommended",
-        "plugin:storybook/recommended"
-    ],
-    "overrides": [
-        {
-            "env": {
-                "node": true
-            },
-            "files": [
-                ".eslintrc.{js,cjs}"
-            ],
-            "parserOptions": {
-                "sourceType": "script"
-            }
-        }
-    ],
-    "parser": "@typescript-eslint/parser",
-    "parserOptions": {
-        "ecmaVersion": "latest",
-        "sourceType": "module"
-    },
-    "plugins": [
-        "@typescript-eslint"
-    ],
-    "rules": {
-    }
-}

package/.gitattributes

@@ -1,6 +0,0 @@
-# Bytt ut <CR><LF> i alle tekstfiler i Windows med kun <LF> før de pushes (såkalt "LF normalization")
-* text=auto eof=lf
-
-# Generert API-dokumentasjon har kun <LF> som linjeskift, også i Windows.
-# Dette gjør at git tror alle filer er endret hver gang vi genererer dokumentasjon
-doc/nve*.md text eol=lf

package/.github/workflows/azure-static-web-app-kind-mushroom-03c272603.yml

@@ -1,52 +0,0 @@
-name: Azure Static Web Apps CI/CD
-
-on:
-  push:
-    branches:
-      - main
-    paths:
-      - 'src/**'
-      - 'stories/**'
-  pull_request:
-    types: [opened, synchronize, reopened, closed]
-    branches:
-      - main
-    paths:
-      - 'src/**'
-
-jobs:
-  # Run when a pull request is created or updated
-  build_and_deploy_pull_request:
-    if: github.event_name == 'pull_request' && github.event.action != 'closed'
-    runs-on: ubuntu-latest
-    name: Build and Deploy Pull Request
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-        with:
-          submodules: true
-
-      - name: Build And Deploy
-        id: builddeploy
-        uses: Azure/static-web-apps-deploy@v1
-        with:
-          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN  }}
-          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
-          action: 'upload'
-          app_location: '/'
-          output_location: 'storybook-static'
-          app_build_command: 'npm run build-storybook'
-          ###### End of Repository/Build Configurations ######
-          close_pull_request_job:
-
-  close_pull_request_job:
-    if: (github.event_name == 'pull_request' && github.event.action == 'closed') || (github.event.pull_request.merged == false && github.event.pull_request.merged_by == null)
-    runs-on: ubuntu-latest
-    name: Close Pull Request Job
-    steps:
-      - name: Close Pull Request
-        id: closepullrequest
-        uses: Azure/static-web-apps-deploy@v1
-        with:
-          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
-          action: 'close'

package/.github/workflows/chromatic.yml

@@ -1,30 +0,0 @@
-# Workflow name
-name: 'Chromatic Publish'
-
-# Event for the workflow
-on:
-  push:
-    branches:
-      - main
-    paths:
-      - 'src/**'
-      - '.storybook/**'
-
-# List of jobs
-jobs:
-  test:
-    # Operating System
-    runs-on: ubuntu-latest
-    # Job steps
-    steps:
-      - uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-          cache: 'npm'
-      - run: npm i
-      - run: npm run build
-      - run: npm run build-storybook
-      - run: npx chromatic --project-token=${{ secrets.CHROMATIC_PROJECT_TOKEN }} --token=${{ secrets.GITHUB_TOKEN }} --storybook-build-dir=storybook-static --auto-accept-changes

package/.github/workflows/npm-publish.yml

@@ -1,34 +0,0 @@
-name: Publish package to npmjs
-
-on:
-  push:
-    branches:
-      - main
-    paths:
-      - 'src/**'
-      - 'build/**'
-  workflow_dispatch:
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-
-      # Setup .npmrc file to publish to npm
-      - uses: actions/setup-node@v3
-        with:
-          node-version: '20.x'
-          registry-url: 'https://registry.npmjs.org'
-
-      - name: Build and Publish
-        run: |
-          npm i
-          npm run build
-          git config --global user.email "jobl@nve.no"
-          git config --global user.name "Designsystem"
-          npm version patch -m "Bump version to %s [skip ci]" --force
-          git push --follow-tags
-          npm publish
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_PUBLISH }}

package/.prettierrc

@@ -1,6 +0,0 @@
-{
-  "singleQuote": true,
-  "semi": true,
-  "trailingComma": "es5",
-  "printWidth": 120
-}

package/.storybook/DocTemp.mdx

@@ -1,36 +0,0 @@
-import { Story, Meta, Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks';
-
-<Meta isTemplate />
-
-<Title />
-
-# Default implementation
-
-<div style={{ display: 'flex' }}>
-  <span style={{ margin: '1rem' }}>
-    <Story name="Primary" height="50px">
-      {() => <Primary />}
-    </Story>
-  </span>
-  <span style={{ margin: '1rem' }}>
-    <Story name="Secondary" height="50px">
-      {() => <Primary />}
-    </Story>
-  </span>
-</div>
-
-<Primary />
-
-## Inputs
-
-The component accepts the following inputs (props):
-
-<Controls />
-
----
-
-## Additional variations
-
-Listed below are additional variations of the component.
-
-<Stories />

package/.storybook/main.ts

@@ -1,36 +0,0 @@
-import type { StorybookConfig } from '@storybook/web-components-vite';
-
-const globalCSSPath = process.env.NODE_ENV === 'production' ? '/assets/global.css' : '../src/styles/global.css';
-
-const varsomCSSPath = process.env.NODE_ENV === 'production' ? '/assets/varsom.css' : '../../../build/css/varsom.css';
-
-// we have to add another styling files after they will be in use
-
-const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx|mdx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-docs'],
-  framework: {
-    name: '@storybook/web-components-vite',
-    options: {},
-  },
-  previewHead: (head) => `
-  ${head}
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.12.0/cdn/themes/light.css" />
-  <link rel="stylesheet" href="https://fonts.cdnfonts.com/css/source-sans-pro" />
-  <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
-    />
-  <link rel="stylesheet" href="${varsomCSSPath}" />
-  <link rel="stylesheet" href="${globalCSSPath}" />
-  <link
-  rel="stylesheet"
-  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
-/>
-`,
-  docs: {
-    autodocs: 'tag',
-
-  },
-};
-export default config;

package/.storybook/preview.ts

@@ -1,18 +0,0 @@
-import type { Preview } from '@storybook/web-components';
-import DocTemp from './../.storybook/DocTemp.mdx';
-const preview: Preview = {
-  parameters: {
-    docs: {
-      //page: DocTemp, kan sette custom mdx-fil her.
-    },
-    actions: { argTypesRegex: '^on[A-Z].*' },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-};
-
-export default preview;

package/.vscode/settings.json

@@ -1,30 +0,0 @@
-{
-  "i18n-ally.localesPaths": ["src/locale"],
-  "editor.rulers": [120],
-  "editor.formatOnSave": true,
-  "editor.formatOnSaveMode": "file",
-  "editor.codeActionsOnSave": {
-    "source.fixAll": "explicit",
-    "source.organizeImports": "never"
-  },
-  "[json]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.formatOnSaveMode": "file"
-  },
-  "[css]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.formatOnSaveMode": "file"
-  },
-  "[ts]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.formatOnSaveMode": "file"
-  },
-  "[javascript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.formatOnSaveMode": "file"
-  },
-  "[html]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.formatOnSaveMode": "file"
-  }
-}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2023 Norges vassdrags- og energidirektorat
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/README.md

@@ -1,209 +0,0 @@
-# NVE Designsystem
-
-Dette repository inneholder css generert fra Figma-tokens og komponentbibliotek basert på Shoelace [( Shoelace dokumentasjon)](https://shoelace.style/).
-[Lenke til npm-pakke.](https://www.npmjs.com/package/nve-designsystem)
-
-## Skal du bruke NVE designsystem? Denne seksjonen er for deg.
-
-### Api-dokumentasjon
-
-[Her er dokumentasjon på hver komponent](./doc/components.md)
-
-### **Oppsett i Vue**
-
-1. Install pakke med `npm i nve-designsystem`.
-
-2. I vite.config (lagre en ny fil hvis den ikke eksisterer i rot-mappe), legg inn isCustomElement som forteller Vue at det er en customElement, og dropp component resolution [(les mer her)](https://vuejs.org/guide/extras/web-components.html).
-
-```js
-export default defineConfig({
-  plugins: [
-    vue({
-      template: {
-        transformAssetUrls,
-        compilerOptions: {
-          isCustomElement: (tag) => tag.includes('nve-'),
-        },
-      },
-    }),
-  ],
-});
-```
-
-3. I tillegg trenger du å importere en .css-fil for farge-tema i main.ts. Filene finnes i mappa `nve-designsystem/build/css/`. For NVE-tema, bruk:
-
-```ts
-import 'nve-designsystem/dist/css/nve.css';
-```
-
-For Varsom-tema, bruk:
-
-```ts
-import 'nve-designsystem/dist/css/varsom.css';
-```
-
-Du har også mulighet til å velge enten lyst eller mørkt tema. Lyst er standard.
-
-### **Eksempel på bruk av komponent**
-
-```html
-<template>
-  <nve-button variant="primary" size="small" @click="send">Button</nve-button>
-</template>
-<script setup lang="ts">
-  import { NveButton } from 'nve-designsystem';
-</script>
-```
-
-Husk å alltid bruke både opening og closing tag individuelt, (`<nve-button />` fungerer ikke).
-
-### **Storybook**
-
-Komponentene kan ses og testes i Storybook med ulike parametere og varianter: https://main--65322c4ee3062d1c117bb2d5.chromatic.com/
-
-## Skal du utvikle NVE designsystem? Denne seksjonen er for deg.
-
-De fleste komponentene bygger på [Shoelace](https://shoelace.style/), men er tilpasset NVE Designsystem. Etterhvert vil de fleste Shoelace-komponenter få sin NVE-variant, men vi kommer også til å lage komponenter som ikke baseres på Shoelace. Vi anbefaler at du laster ned [kildekoden til Shoelace](https://github.com/shoelace-style/shoelace) og setter deg inn i [Lit](https://lit.dev/), som vi bruker som rammeverk.
-
-### **Kjøremiljø**
-
-Prosjektet importerer Shoelace sin npm-pakke. Kjør `npm run dev` for utvikling.
-For å teste en komponent i main.ts må man huske å legge til script tag med komponenten i index.html fila som f.eks. <script type="module" src="/src/nve-button.ts"></script>
-
-### **Mappe struktur**
-
-Ved å lage en ny komponent opprett en mappe under src/components med komponent navn. Fil som inneholder selve komponent burde ha
-
-- .component.ts suffiks på fil sin inneholder selve komponent f.eks. /components/nve-component/nve-component.component
-- .styles.ts på filer med styling f.eks. /components/nve-component/nve-component.styles.ts
-- .demo.ts på filer som skal demonstrere komponent (til utviklere) f.eks. /components/nve-component/nve-component.demo.ts
-
-### **Hvordan vi bygger komponenter**
-Vi setter reflect: true på alle properties i komponenter (se eksempel under) for å kunne se properties som oppdateres i DOMen. Gjelder reaktive applikasjoner.
-```js
-@property({ reflect: true }) title: string = '';
-```
-
-### **Komponent eksport**
-
-Komponenter skal eksponeres i src/index.ts fila med
-
-```js
-export { default as NveComponent } from './components/nve-component/nve-component.component';
-```
-
-### **Styling**
-
-Når vi styler shoelace-komponenter kan vi enten overskrive Shoelace sine css-klasser eller bruke parts i shadow-DOM.
-Bruk helst parts fordi koden blir lettere å lese.
-Dette:
-
-```css
-::part(control) {
-  color: red;
-}
-```
-
-ser bedre ut enn dette:
-
-```css
-.checkbox checkbox--medium checkbox__control {
-  color: red;
-}
-```
-
-Hvis det ikke er mulig å style med ::part, bruk css-klasser.
-
-### **Typografi**
-
-Det finnes tokens for typografi i Figma.
-Sett Figma i utviklermodus og klikk på en tekst.
-I typografi-seksjonen til høyre ser vi css'en som er generert. Vi skal ikke bruke selve css'en, men <b>kommentaren</b> over css'en gir et hint om navnet på tokenet. Eksempel i Figma:
-
-```css
-color: var(--neutrals-foreground-mute, #3c3f44);
-
-/* Label/small */
-font-family: Source Sans Pro;
-font-size: 1rem;
-font-style: normal;
-font-weight: 600;
-line-height: 110%; /* 1.1rem */
-```
-
-Kommentaren `/* Label/small */` betyr at vi skal bruke css-variabelen `--label-small`, f.eks. slik:
-
-```css
-.button-label {
-  font: var(--label-small);
-}
-```
-
-### **Mapping av shoelace tokes til NVE-tokens**
-
-Det hadde vært fint om vi kunne sette en NVE-verdi for alle Shoelace-tokens. Men dette går ikke fordi strukturen i Shoelace og NVE Designsystem er forskjellig.
-Vi har satt NVE-verdier for en del Shoelace-tokens, og disse ligger i global.css.
-Foreslå gjerne flere Shoelace-tokens som kan mappes på denne måten.
-
-Vi trenger ikke å style:
-
-- fokus-tilstand på alle komponenter. Dette settes globalt
-- høyde på input-felter, knapper og select
-- border-radius på alle komponenter (med mindre border radius mangler på en Shoelace-komponent, men designsystemet spesifiserer border-radius)
-- bakgrunn, font-farge, font-størrelse, ikon-farge, ramme i input, select og textarea i både variantene filled og not filled
-
-### **Test-app for designere når man lager en PR**
-
-Pull requests på komponenter skal godkjennes av designere. Derfor har vi satt opp en azure static app med Storybook. Denne bygges og kjøres når man lager en PR.
-
-Det er maks 10 apper som kan kjøres samtidig, så hvis det er flere enn 10 PR'er kan det være at appen ikke bygges. De skal slettes automatisk når en PR lukkes, men det er ikke alltid dette virker. I slike tilfeller må vi slette appene manuelt i Azure-portalen. Appene ligger i denne ressursgruppa: TEST-Designsystemet-RG.
-
-### Dokumentasjon
-
-- Vi dokumenterer på norsk
-- Alle komponenter dokumenteres med JsDoc-tags i koden. Alt som er tilgjengelig for de som bruker komponentene skal dokumenteres, dvs. alle public klasser, interfaces, properties/attributter, metoder, events, slots, css-parts og css-properties. [Her er noen tips.](https://github.com/runem/web-component-analyzer#-how-to-document-your-components-using-jsdoc)
-  Vi bruker [Web Component Analyzer](https://github.com/runem/web-component-analyze) til å generere API-dokumentasjon.
-- Generer .MD-filer med `npm run doc` og sjekk inn de genererte filene sammen med koden. Om du har laget nye komponenter, legg dem til i [denne lista](./doc/components.md).
-
-### **Bygge css**
-
-For å bygge css filer som inneholder verdier basert på tokens fra Figma, kjør følgende kommando: "npm run tokenbuild." <br>
-
-### **npm**
-
-For å publisere på npm, må man oppdatere versjonsnr. i package.json og package-lock.json. Deretter kjør kommando `npm publish --access public`. Dette krever at man er innlogget på npm. For at CSS-variabler skal være tilgjengelig i npm-pakken, må css-filer kopieres. Dette gjøres ved å kjøre kommando `npm run copy-files`.
-
-### **Kjøremiljø**
-
-Prosjektet importerer Shoelace sin npm-pakke. Kjør `npm run dev` for utvikling.
-For å teste en komponent i main.ts må man huske å legge til script tag med komponenten i index.html fila som f.eks. <script type="module" src="/src/nve-button.ts"></script>
-
-### **Test pakke lokalt**
-
-Før man pusher til main er det lurt å teste pakke lokalt. Med `npm run pack` kan man teste hvordan pakken oppfører seg akkurat på samme måte som etter publisering. For å teste en nve-designsystem pakke lokalt:
-
-1. Kjør `npm run build`
-2. Kjør `npm run pack`. En .tgz fil med pakken navn og versjon burde dukke opp i dist mappe
-3. Åpen et annet prosjekt hvor du kan teste nve-designsystem pakken
-4. Kjør `npm  i` <nve-designsystem-x.y.z.tgz med full sti>`
-5. Importer komponent i prosjektet og sjekk om alt fungerer som det burde
-
-NB! Vi lager pakken i dist mappe fordi det er enklere å strukturere hvordan pakken skal se ut når man laster den ned. Vi prøvde med `exports` og `files` i package.json men det ga oss ikke result vi var fornøyd med.
-
-### Storybook
-
-For å kjøre Storybook lokalt, kjør `npm run storybook`
-
-Det skal opprettes en story for hver nye komponent som lages. Story opprettes på følgende måte: <br>
-
-<ul>
-<li>Opprett en mappe for komponenten i mappen stories</li>
-<li>Opprett en fil med filnavn "NavnPåKomponent.stories.ts." F.eks. NveButton.stories.ts.</li>
-<li>Se på eksisterende stories-filer og bruk samme oppsett </li>
-<li>Storbyook lager toggle-buttons for boolean verdier. For dropdown-meny må man selv definere alternativene </li>
-<li>Komponent-filen, f.eks. NavnPåKomponent.ts må eksportere props. Se eksisterende filer for eksempel (export interface NavnPåKomponentProps)</li>
-<li>Minimum et eksempel på komponent må opprettes og eksporteres i stories-filen, f.eks. "export const Primary..." for Primary-vaiant av NveButton</li>
-<li>Informasjon om komponenten (fra Figma og ev. ekstra info) kan legges inn i stories-files under parameters -> docs --> description -->  component</li>
-</ul>
-
-For å publisere Storybook på Chromatic, kjør `npm run build; npm run build-storybook`. Deretter må det kjøres en kommando med project token fra Chromatic: `npx chromatic --project-token=\<project-token\>`