@forsakringskassan/vue-lib-template 0.0.0 → 1.0.0

package/files/CODEOWNERS

@@ -0,0 +1,9 @@
+# This is a CODEOWNERS file.
+# Lines starting with '#' are comments.
+# Each line is a file pattern followed by one or more owners.
+
+# Global owner for the whole repository
+# * @username-or-team
+
+# Example folder-specific owner
+# /docs/ @org/doc-team

package/files/Jenkinsfile

@@ -0,0 +1 @@
+buildRepo()

package/files/LICENSE.md

@@ -0,0 +1,7 @@
+Copyright 2026 Försäkringskassan
+
+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/files/README.md

@@ -0,0 +1,88 @@
+# @forsakringskassan/vue-lib-template
+
+En mall för hur ett komponentbibliotek fungerar.
+
+## Dokumentation
+
+Bygg och starta dokumentationen med:
+
+```bash
+npm run build:docs
+npm run start:docs
+```
+
+Dokumentationen kan nås på http://localhost:8080.
+
+Komponenter dokumenteras i `docs/components` katalogen.
+Varje komponent ska ha en tillhörande Markdown fil (`.md`) med ett inledande Frontmatter-block:
+
+```md
+---
+title: Fantastisk komponent
+status: Draft
+layout: component
+component: AwesomeComponent
+---
+```
+
+Exempel infogas med en code fence:
+
+````md
+```import
+${filename}
+```
+````
+
+Vue API dokumentation för komponenter infogas med ett api block:
+
+```md
+::: api
+vue:${component}
+:::
+```
+
+Dokumentationen genereras med [`@forsakringskassan/docs-generator`](https://forsakringskassan.github.io/docs-generator/latest/).
+
+## Att dokumentera
+
+- [ ] ingress
+- [ ] quick start: de vanliga kommandon man behöver
+- [ ] lintning och statisk kodanalys
+    - vilka verktyg körs och varför
+    - förklara html-validate och no-unknown-elements
+- [ ] förklara varför vi använder api-extractor/värde | public internal | dts-fil
+- [ ] förstå vad paketet levererar
+- [ ] så här kör du cypress
+- [ ] bundling och inte bundling, hur gör jag
+- [ ] hur dokumenterar man komponenter?
+- [x] hur bygger man dokumentationen?
+- [x] hur startar man dokumentationen?
+- [ ] checklista över vad som ska fungera
+    - importera static assets
+    - vscode: ska inte visa squiggly lines vid import av static assets
+    - vscode: ska inte visa squiggly lines vid cy.mount i komponenttest
+
+## Att göra
+
+- [x] börja med att kopiera alla rotfiler och cypresskatalog etc från designsystem (det vi inte fick med som körs från roten t ex lint osv)
+- [x] docs
+- [x] sandbox eller inte
+- [ ] stylelint, även på sfc
+- [x] levera css
+- [ ] postcss med autoprefixer ska köras
+- [x] trimma allowScripts (jättelåg prio)
+- [x] semantic release för vanligt repo
+- [ ] uppdatera .gitignore med app.vue
+- [ ] pretest: att vara eller att inte vara, det är frågan
+- [x] npm start
+- [x] npm start AwesomeComponent
+- [x] npm test
+- [x] npm run build
+- [x] npm run build:docs
+- [x] npm run start:docs
+- [ ] apimock
+- [ ] bättre exempelkomponent
+- [ ] bättre enhetstest
+- [ ] bättre komponenttest
+- [ ] live exempel
+- [ ] skill för att skapa live exempel

package/files/_editorconfig

@@ -0,0 +1,21 @@
+# EditorConfig documentation: http://EditorConfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+
+[*.{html,ts,mts,cts,js,cjs,mjs,scss,json,vue}]
+indent_style = space
+indent_size = 4
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[package{,-lock}.json]
+indent_size = 2
+
+[Jenkinsfile]
+indent_style = space
+indent_size = 4
+trim_trailing_whitespace = true
+insert_final_newline = true

package/files/_gitignore

@@ -0,0 +1,24 @@
+# vite dev
+# /src/vite-dev/app.vue
+*.tgz
+node_modules/
+
+# Build artifacts
+.eslintcache
+coverage/
+dist/
+public/
+temp/
+
+# Cypress output
+cypress/screenshots/
+test-results/
+
+# Editor directories and files
+.DS_Store
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

package/files/_htmlvalidate.json

@@ -0,0 +1,22 @@
+{
+    "root": true,
+    "extends": [
+        "@fkui/vue:recommended",
+        "html-validate:recommended",
+        "html-validate:prettier",
+        "html-validate-vue:recommended",
+        "@forsakringskassan/docs-live-example/htmlvalidate:recommended"
+    ],
+    "plugins": [
+        "html-validate-vue",
+        "@fkui/vue/htmlvalidate",
+        "@forsakringskassan/docs-live-example/htmlvalidate"
+    ],
+    "transform": {
+        "^.*\\.spec.ts$": "html-validate-vue:html",
+        "^.*\\.md$": "html-validate-markdown",
+        "^.*\\.md:html$": "html-validate-vue:html",
+        "^.*\\.vue$": "html-validate-vue"
+    },
+    "elements": ["html5"]
+}

package/files/_npmrc

@@ -0,0 +1,5 @@
+save-exact=true
+strict-allow-scripts=true
+min-release-age=3
+min-release-age-exclude[]=@forsakringskassan/*
+min-release-age-exclude[]=@fkui/*

package/files/_prettierignore

@@ -0,0 +1,29 @@
+# owned by tooling
+package-lock.json
+node_modules/
+
+# generated files
+CHANGELOG.md
+*.api.md
+
+# build artifacts
+build/
+coverage/
+dist/
+temp/
+
+.DS_Store
+
+# Log files
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

package/files/api-extractor.lib.json

@@ -0,0 +1,18 @@
+/* This file was generated by @forsakringskassan/vite-lib-config. Changes may be overwritten! */
+
+{
+    "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+    "extends": "@forsakringskassan/vite-lib-config/api-extractor/api-extractor.json",
+    "compiler": {
+        "tsconfigFilePath": "<projectFolder>/tsconfig.lib.json"
+    },
+    "apiReport": {
+        "reportFileName": "<unscopedPackageName>.api.md"
+    },
+    "docModel": {
+        "enabled": true
+    },
+    "dtsRollup": {
+        "publicTrimmedFilePath": "<projectFolder>/dist/types/index.d.ts"
+    }
+}

package/files/api-extractor.selectors.json

@@ -0,0 +1,16 @@
+/* This file was generated by @forsakringskassan/vite-lib-config. Changes may be overwritten! */
+
+{
+    "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+    "extends": "@forsakringskassan/vite-lib-config/api-extractor/api-extractor.json",
+    "mainEntryPointFilePath": "<projectFolder>/temp/types/selectors/index.d.ts",
+    "compiler": {
+        "tsconfigFilePath": "<projectFolder>/tsconfig.selectors.json"
+    },
+    "apiReport": {
+        "reportFileName": "<unscopedPackageName>-selectors.api.md"
+    },
+    "dtsRollup": {
+        "publicTrimmedFilePath": "<projectFolder>/dist/types/selectors.d.ts"
+    }
+}

package/files/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    presets: ["@forsakringskassan/vite-lib-config/babel"],
+};

package/files/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+    "name": "Using fixtures to represent data",
+    "email": "hello@cypress.io",
+    "body": "Fixtures are a great way to mock data for responses to routes"
+}

package/files/cypress/support/commands/forced-colors.ts

@@ -0,0 +1,33 @@
+/// <reference types="cypress" />
+
+export type ForcedColorMode = "none" | "dark" | "light";
+
+/**
+ * Custom Cypress command for testing with forced colors mode
+ * Forces the browser to use forced colors prefers-color-scheme media query
+ */
+Cypress.Commands.add("forcedColors", (mode: ForcedColorMode) => {
+    const cdpCommand = "Emulation.setEmulatedMedia";
+    const media = "forced-colors";
+
+    const features =
+        mode === "none"
+            ? [{ name: media, value: "none" }]
+            : [
+                  { name: media, value: "active" },
+                  {
+                      name: "prefers-color-scheme",
+                      value: mode,
+                  },
+              ];
+
+    cy.then(() => {
+        return Cypress.automation("remote:debugger:protocol", {
+            command: cdpCommand,
+            params: {
+                media,
+                features,
+            },
+        });
+    }).window();
+});

package/files/cypress/support/common.ts

@@ -0,0 +1,10 @@
+/// <reference types="cypress" />
+
+import "@forsakringskassan/cypress-visual-regression/commands";
+import "@forsakringskassan/cypress-axe/support";
+import "cypress-html-validate/dist/commands";
+import "./commands/forced-colors";
+
+afterEach(() => {
+    cy.htmlvalidate();
+});

package/files/cypress/support/component-index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+        <title>Components App</title>
+    </head>
+    <body>
+        <div data-cy-root>
+            <div id="teleport"></div>
+        </div>
+    </body>
+</html>

package/files/cypress/support/component.ts

@@ -0,0 +1,45 @@
+import { type App } from "vue";
+import { mount } from "cypress/vue";
+import { injectSpritesheet } from "@fkui/icon-lib-default/dist/f/injectSpritesheet";
+import {
+    config,
+    setRunningContext,
+    FormatPlugin,
+    TestPlugin,
+    TranslationPlugin,
+    ValidationPlugin,
+} from "@fkui/vue";
+import "@fkui/theme-default";
+import "./main.scss";
+import "./common";
+
+config.teleportTarget = "#teleport";
+
+Cypress.Commands.add("mount", (component, options = {}) => {
+    // Setup options object
+    options.global ??= {};
+    options.global.plugins ??= [];
+    options.global.config ??= {};
+    options.global.config.compilerOptions ??= {};
+    options.global.config.compilerOptions.whitespace = "preserve";
+
+    /* Installing validationPlugin */
+    options.global.plugins.push({
+        install(app: App) {
+            app.use(FormatPlugin);
+            app.use(ValidationPlugin);
+            app.use(TestPlugin);
+            app.use(TranslationPlugin);
+            setRunningContext(app);
+
+            /* handle warnings as errors */
+            app.config.warnHandler = (msg, b, trace) => {
+                throw new Error(`Vue warning: ${msg}\n${trace}`);
+            };
+        },
+    });
+
+    return mount(component, options);
+});
+
+injectSpritesheet();

package/files/cypress/support/main.scss

@@ -0,0 +1,11 @@
+@use "@fkui/design/src/core/config-variables" with (
+    $asset-path: "@fkui/design"
+);
+
+@use "@fkui/design/src/fonts";
+@use "@fkui/design/src/fkui";
+
+:root {
+    --f-logo-image-small: hotpink;
+    --f-logo-image-large: hotpink;
+}

package/files/cypress/tsconfig.json

@@ -0,0 +1,20 @@
+{
+    "extends": ["@fkui/tsconfig/recommended", "@fkui/tsconfig/cypress"],
+    "compilerOptions": {
+        "rootDir": "..",
+        "types": [
+            "cypress",
+            "node",
+            "vite/client",
+            "cy-mount",
+            "cypress-html-validate/commands",
+            "@forsakringskassan/cypress-visual-regression/commands",
+            "forced-colors"
+        ],
+        "typeRoots": ["../node_modules", "../node_modules/@types", "./types"],
+        "paths": {
+            "@forsakringskassan/vue-lib-template": ["./src/index.ts"]
+        }
+    },
+    "include": ["**/*.ts"]
+}

package/files/cypress/types/cy-mount.d.ts

@@ -0,0 +1,9 @@
+import { mount } from "cypress/vue";
+
+declare global {
+    namespace Cypress {
+        interface Chainable {
+            mount: typeof mount;
+        }
+    }
+}

package/files/cypress/types/forced-colors.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="cypress" />
+
+declare global {
+    namespace Cypress {
+        interface Chainable {
+            /**
+             * Forces the application to run in forced colors mode
+             * @param mode - "light" or "dark" color mode, "none" will disable the forced colors
+             * @example cy.forcedColors("dark")
+             */
+            forcedColors(
+                mode: "none" | "dark" | "light",
+            ): Cypress.Chainable<void>;
+        }
+    }
+}
+
+export {};

package/files/cypress.config.ts

@@ -0,0 +1,91 @@
+import { defineConfig } from "cypress";
+import exclude from "@fkui/vue/htmlvalidate/cypress";
+import { init as installAxe } from "@forsakringskassan/cypress-axe/plugins";
+import getToMatchScreenshotsPlugin from "@forsakringskassan/cypress-visual-regression/plugin";
+import htmlvalidate, {
+    CypressHtmlValidateOptions,
+} from "cypress-html-validate/plugin";
+import { type ConfigData } from "html-validate";
+
+function installPlugins(
+    on: Cypress.PluginEvents,
+    config: Cypress.PluginConfigOptions,
+): Cypress.PluginConfigOptions {
+    getToMatchScreenshotsPlugin(on, config);
+    htmlvalidate.install(on, htmlValidateConfig, htmlValidateOptions);
+    config = installAxe(on, config, {
+        context: {
+            include: [
+                [".code-preview"],
+                ["[data-preview]"],
+                ["[data-cy-root]"],
+            ],
+            exclude: [
+                [".calendar__item--selected"],
+                [".file-selector input"],
+                [".wizard-step__header__title"],
+                [".live-example__code"],
+            ],
+        },
+    });
+    return config;
+}
+
+const htmlValidateConfig: ConfigData = {
+    rules: {
+        /* some examples show how to use custom heading levels which often
+         * doesn't match the heading outline for the documentation */
+        "heading-level": ["off"],
+
+        /* prevents mismatches from disabled rules which does not trigger errors
+         * when Cypress tests are running but would yield errors during normal
+         * validation */
+        "no-unused-disable": "off",
+
+        /* we cannot use native progressbar element due to SLA */
+        "prefer-native-element": [
+            "error",
+            {
+                exclude: ["progressbar"],
+            },
+        ],
+
+        /* sadly we dont use SRI at FK */
+        "require-sri": "off",
+    },
+};
+
+const htmlValidateOptions: CypressHtmlValidateOptions = {
+    include: [
+        /* Cypress component tests */
+        "#__cy_vue_root > div",
+    ],
+    exclude,
+};
+
+export default defineConfig({
+    allowCypressEnv: false,
+    // Cypress may sometimes restart tests when it detects a changed file in the __screenshot__ folder.
+    watchForFileChanges: false,
+    /* disable video recording, it is to slow both on remote machines and on
+     * CI/CD testing. */
+    video: false,
+    reporter: require.resolve("mocha-multi-reporters"),
+    reporterOptions: {
+        reporterEnabled: "spec, mocha-junit-reporter",
+        mochaJunitReporterReporterOptions: {
+            mochaFile: "test-results/cypress-test-output_[hash].xml",
+        },
+    },
+    component: {
+        setupNodeEvents(on, config) {
+            return installPlugins(on, config);
+        },
+        devServer: {
+            framework: "vue",
+            bundler: "vite",
+        },
+    },
+    defaultBrowser: "chrome",
+    hosts: { localhost: "127.0.0.1" },
+});

package/files/docs/build.mts

@@ -0,0 +1,34 @@
+import path from "node:path";
+import {
+    Generator,
+    frontMatterFileReader,
+    vueFileReader,
+} from "@forsakringskassan/docs-generator";
+import pkg from "../package.json" with { type: "json" };
+
+const docs = new Generator(import.meta.url, {
+    site: { name: pkg.name, lang: "sv" },
+    outputFolder: path.resolve(import.meta.dirname, "public"),
+    exampleFolders: [path.resolve(import.meta.dirname, "../src")],
+    setupPath: path.resolve(import.meta.dirname, "src/setup.ts"),
+    vendor: [
+        { package: "vue", alias: "vue/dist/vue.esm-bundler.js" },
+        "@fkui/vue",
+    ],
+});
+
+docs.compileStyle("main", "./src/main.scss", {
+    appendTo: "head",
+});
+
+await docs.build([
+    {
+        include: ["**/*.md"],
+        exclude: ["**/node_modules/**"],
+        fileReader: frontMatterFileReader,
+    },
+    {
+        include: ["../src/**/*.vue"],
+        fileReader: vueFileReader,
+    },
+]);

package/files/docs/components/AwesomeComponent.md

@@ -0,0 +1,27 @@
+---
+title: Mäktig komponent
+status: Draft
+layout: component
+component: AwesomeComponent
+---
+
+𝅘𝅥𝅮 Allting är så mäktigt 𝅘𝅥𝅮
+
+```import
+DummyExample.vue
+```
+
+## Tänk på att
+
+- Detta är en exempel komponent.
+- Den ska inte användas i produktion.
+
+## Copy
+
+- Använd tydlig och begriplig text.
+
+## API
+
+:::api
+vue:AwesomeComponent
+:::

package/files/docs/components/index.md

@@ -0,0 +1,5 @@
+---
+title: Komponenter
+name: components
+layout: content-with-menu
+---

package/files/docs/index.md

@@ -0,0 +1,3 @@
+---
+title: "@forsakringskassan/vue-lib-template"
+---

package/files/docs/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "docs",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "build": "node build.mts",
+    "start": "http-server public"
+  },
+  "devDependencies": {
+    "@fkui/vue": "6.54.0",
+    "@forsakringskassan/docs-generator": "3.6.1",
+    "@tsconfig/node24": "24.0.5",
+    "@tsconfig/recommended": "1.0.13",
+    "http-server": "14.1.1",
+    "vue": "3.5.41"
+  }
+}

package/files/docs/src/main.scss

@@ -0,0 +1 @@
+@use "@forsakringskassan/docs-generator/style.css";

package/files/docs/src/setup.ts

@@ -0,0 +1,30 @@
+import { createApp, h } from "vue";
+import {
+    ErrorPlugin,
+    FErrorHandlingApp,
+    FormatPlugin,
+    TestPlugin,
+    TranslationPlugin,
+    ValidationPlugin,
+    setRunningContext,
+} from "@fkui/vue";
+import { type SetupOptions } from "@forsakringskassan/docs-generator";
+
+export function setup(options: SetupOptions): void {
+    const { rootComponent, selector } = options;
+    const app = createApp({
+        render() {
+            return h(FErrorHandlingApp, { defaultComponent: rootComponent });
+        },
+    });
+    setRunningContext(app);
+    app.use(ErrorPlugin, {
+        captureWarnings: true,
+        logToConsole: true,
+    });
+    app.use(ValidationPlugin);
+    app.use(TestPlugin);
+    app.use(TranslationPlugin);
+    app.use(FormatPlugin);
+    app.mount(selector);
+}

package/files/docs/tsconfig.json

@@ -0,0 +1,8 @@
+{
+    "extends": ["@tsconfig/recommended", "@tsconfig/node24"],
+    "compilerOptions": {
+        "types": ["node"]
+    },
+    "include": ["**/*.ts", "**/*.mts"],
+    "exclude": ["**/node_modules/**"]
+}