@forsakringskassan/vue-lib-template 1.0.4 → 1.2.0

package/files/Jenkinsfile

@@ -1,3 +1,5 @@
+/* This file is managed by @forsakringskassan/vue-lib-template. Changes will be overwritten! */
+
 buildRepo([
     nodejs: [
         docs: [

package/files/README.md

@@ -80,9 +80,10 @@ Dokumentationen genereras med [`@forsakringskassan/docs-generator`](https://fors
 - [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
+- [x] apimock
+- [x] bättre exempelkomponent
+- [x] bättre enhetstest
+- [x] bättre komponenttest
+- [x] live exempel
 - [ ] skill för att skapa live exempel
+- [ ] skript för att rensa demo-filer

package/files/_editorconfig

@@ -1,3 +1,6 @@
+# This file is managed by @forsakringskassan/vue-lib-template.
+# Changes will be overwritten!
+
 # EditorConfig documentation: http://EditorConfig.org
 root = true
 

package/files/_gitignore

@@ -1,3 +1,6 @@
+# This file is managed by @forsakringskassan/vue-lib-template.
+# Changes will be overwritten!
+
 # vite dev
 # /src/vite-dev/app.vue
 *.tgz

package/files/_htmlvalidateignore

@@ -1,2 +1,7 @@
+# This file is managed by @forsakringskassan/vue-lib-template.
+# Changes will be overwritten!
+
 # generated files
 docs/public/
+docs/node_modules/
+docs/temp/

package/files/_prettierignore

@@ -1,3 +1,6 @@
+# This file is managed by @forsakringskassan/vue-lib-template.
+# Changes will be overwritten!
+
 # owned by tooling
 package-lock.json
 node_modules/
@@ -26,4 +29,4 @@ yarn-error.log*
 *.ntvs*
 *.njsproj
 *.sln
-*.sw?
+*.sw?

package/files/api-extractor.lib.json

@@ -1,4 +1,4 @@
-/* This file was generated by @forsakringskassan/vite-lib-config. Changes may be overwritten! */
+/* This file is managed by @forsakringskassan/vue-lib-template. Changes will be overwritten! */
 
 {
     "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",

package/files/api-extractor.selectors.json

@@ -1,4 +1,4 @@
-/* This file was generated by @forsakringskassan/vite-lib-config. Changes may be overwritten! */
+/* This file is managed by @forsakringskassan/vue-lib-template. Changes will be overwritten! */
 
 {
     "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",

package/files/babel.config.js

@@ -1,3 +1,5 @@
+/* This file is managed by @forsakringskassan/vue-lib-template. Changes will be overwritten! */
+
 module.exports = {
     presets: ["@forsakringskassan/vite-lib-config/babel"],
 };

package/files/cypress/support/common.ts

@@ -1,10 +1,11 @@
-/// <reference types="cypress" />
+/* This file is managed by @forsakringskassan/vue-lib-template. Changes will be overwritten! */
 
+import { configure } from "@forsakringskassan/cypress-config/support";
 import "@forsakringskassan/cypress-visual-regression/commands";
-import "@forsakringskassan/cypress-axe/support";
-import "cypress-html-validate/dist/commands";
-import "./commands/forced-colors";
 
-afterEach(() => {
-    cy.htmlvalidate();
+await configure({
+    resetEmulatedMedia: true,
+    afterEach: {
+        htmlvalidate: true,
+    },
 });

package/files/cypress/support/component.ts

@@ -1,38 +1,18 @@
-import { type App } from "vue";
-import { mount } from "cypress/vue";
+/* This file is managed by @forsakringskassan/vue-lib-template. Changes will be overwritten! */
+
+import { mount } from "@forsakringskassan/cypress-config/support";
 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 */
+    /* handle warnings as errors */
     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 */
+        install(app) {
             app.config.warnHandler = (msg) => {
                 const mochaRunner = Cypress.mocha.getRunner();
                 const body = mochaRunner.test?.body ?? "";

package/files/cypress/support/main.scss

@@ -1,3 +1,5 @@
+/* This file is managed by @forsakringskassan/vue-lib-template. Changes will be overwritten! */
+
 @use "@fkui/design/src/core/config-variables" with (
     $asset-path: "@fkui/design"
 );

package/files/cypress/tsconfig.json

@@ -1,3 +1,5 @@
+/* This file is managed by @forsakringskassan/vue-lib-template. Changes will be overwritten! */
+
 {
     "extends": ["@fkui/tsconfig/recommended", "@fkui/tsconfig/cypress"],
     "compilerOptions": {
@@ -6,10 +8,8 @@
             "cypress",
             "node",
             "vite/client",
-            "cy-mount",
-            "cypress-html-validate/commands",
+            "@forsakringskassan/cypress-config/support",
             "@forsakringskassan/cypress-visual-regression/commands",
-            "forced-colors",
             "mocha"
         ],
         "typeRoots": ["../node_modules", "../node_modules/@types", "./types"],

package/files/cypress.config.ts

@@ -1,89 +1,28 @@
-import { defineConfig } from "cypress";
-import exclude from "@fkui/vue/htmlvalidate/cypress";
-import { init as installAxe } from "@forsakringskassan/cypress-axe/plugins";
+/* This file is managed by @forsakringskassan/vue-lib-template. Changes will be overwritten! */
+
+import {
+    axePlugin,
+    defineConfig,
+    htmlValidatePlugin,
+} from "@forsakringskassan/cypress-config";
 import getToMatchScreenshotsPlugin from "@forsakringskassan/cypress-visual-regression/plugin";
-import htmlvalidate, {
-    CypressHtmlValidateOptions,
-} from "cypress-html-validate/plugin";
-import { type ConfigData } from "html-validate";
 
-function installPlugins(
+async function installPlugins(
     on: Cypress.PluginEvents,
     config: Cypress.PluginConfigOptions,
-): Cypress.PluginConfigOptions {
+): Promise<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"],
-            ],
-        },
-    });
+    config = await axePlugin(on, config);
+    config = await htmlValidatePlugin(on, config);
     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,
+export default defineConfig(import.meta.dirname, {
     // 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",
+        async setupNodeEvents(on, config) {
+            return await installPlugins(on, config);
         },
     },
     defaultBrowser: "chrome",

package/files/docs/build.mts

@@ -1,3 +1,6 @@
+/* This file is managed by @forsakringskassan/vue-lib-template. Changes will be overwritten! */
+
+import { copyFileSync } from "node:fs";
 import path from "node:path";
 import {
     Generator,
@@ -17,10 +20,18 @@ const docs = new Generator(import.meta.url, {
     ],
 });
 
+docs.compileScript("main", "./src/main.js", {
+    appendTo: "body",
+});
+
 docs.compileStyle("main", "./src/main.scss", {
     appendTo: "head",
 });
 
+docs.compileScript("mocks", "./src/bundle-mocks.mjs", {
+    appendTo: "head",
+});
+
 await docs.build([
     {
         include: ["**/*.md"],
@@ -32,3 +43,8 @@ await docs.build([
         fileReader: vueFileReader,
     },
 ]);
+
+copyFileSync(
+    "../node_modules/msw/lib/mockServiceWorker.js",
+    "./public/mock-service-worker.js",
+);

package/files/docs/index.md

@@ -1,3 +1,5 @@
 ---
 title: "@forsakringskassan/vue-lib-template"
 ---
+
+För mer information om hur du skapar egna sidor, besök [docs-generator](https://forsakringskassan.github.io/docs-generator/latest/).

package/files/docs/kattinformation/index.md

@@ -0,0 +1,28 @@
+---
+title: Kattinformation
+status: Draft
+layout: component
+component: FcCatInfoComponent
+---
+
+Komponenten kan visa kattdata i visningsläge eller i ett redigerbart läge.
+Den hämtar kattdata från ett mockat backend.
+
+```import live-example
+FcCatInfoComponentLiveExample.vue
+```
+
+## Tänk på att
+
+- Detta är en exempelkomponent.
+- Den ska inte användas i produktion.
+
+## Copy
+
+- Använd tydlig och begriplig text.
+
+## API
+
+::: api
+vue:FcCatInfoComponent
+:::

package/files/docs/package.json

@@ -7,11 +7,14 @@
     "start": "http-server public"
   },
   "devDependencies": {
-    "@fkui/vue": "6.55.0",
-    "@forsakringskassan/docs-generator": "3.6.2",
+    "@fkui/icon-lib-default": "6.57.1",
+    "@fkui/vue": "6.57.1",
+    "@forsakringskassan/apimock-express": "4.1.0",
+    "@forsakringskassan/docs-generator": "3.6.4",
     "@tsconfig/node24": "24.0.5",
     "@tsconfig/recommended": "1.0.13",
     "http-server": "14.1.1",
+    "msw": "2.15.0",
     "vue": "3.5.42"
   }
 }

package/files/docs/src/bundle-mocks.mjs

@@ -0,0 +1,22 @@
+import { matchRequest } from "@forsakringskassan/apimock-express/browser";
+import { http } from "msw";
+import { setupWorker } from "msw/browser";
+import mocks from "../../src/mocks.mts";
+
+const handlers = [
+    http.all("/api/*", async (req) => {
+        return await matchRequest(mocks, req.request);
+    }),
+];
+const worker = setupWorker(...handlers);
+// eslint-disable-next-line no-undef -- technical debt
+const rootUrl = document.documentElement.dataset["rootUrl"];
+const url = `${rootUrl}/mock-service-worker.js`;
+
+// Used in setup.ts
+// eslint-disable-next-line unicorn/no-global-object-property-assignment, no-undef -- technical debt
+window.bundleMocks = worker.start({
+    serviceWorker: {
+        url,
+    },
+});

package/files/docs/src/global.d.ts

@@ -0,0 +1,7 @@
+export {};
+
+declare global {
+    interface Window {
+        bundleMocks?: Promise<void>;
+    }
+}

package/files/docs/src/main.js

@@ -0,0 +1,17 @@
+import { config } from "@fkui/vue";
+
+function importDefault(m) {
+    return m.default ?? m;
+}
+
+async function importIcons() {
+    const icons = importDefault(await import(process.env.DOCS_ICON_LIB));
+
+    for (const entry of Object.values(icons)) {
+        entry.injectSpritesheet();
+    }
+}
+
+config.teleportTarget = document.querySelector("#teleport-target");
+
+await importIcons();

package/files/docs/src/main.scss

@@ -1 +1,23 @@
 @use "@forsakringskassan/docs-generator/style.css";
+@use "@fkui/theme-default" as theme with (
+    $global: false
+);
+@use "@fkui/font-default" as font with (
+    $global: false
+);
+@use "@fkui/design";
+@use "@fkui/design/lib/fonts.css";
+@use "@forsakringskassan/docs-live-example";
+
+@include font.font-face;
+
+:root {
+    @include theme.auto;
+    @include font.font-family;
+}
+
+html,
+body {
+    margin: 0;
+    padding: 0;
+}

package/files/docs/src/setup.ts

@@ -10,8 +10,13 @@ import {
 } from "@fkui/vue";
 import { type SetupOptions } from "@forsakringskassan/docs-generator";
 
-export function setup(options: SetupOptions): void {
+export async function setup(options: SetupOptions): Promise<void> {
     const { rootComponent, selector } = options;
+
+    // Set in bundle-mocks.mjs, wait on mock service worker to be ready.
+    if (window.bundleMocks) {
+        await window.bundleMocks;
+    }
     const app = createApp({
         render() {
             return h(FErrorHandlingApp, { defaultComponent: rootComponent });

package/files/docs/tsconfig.json

@@ -1,6 +1,9 @@
+/* This file is managed by @forsakringskassan/vue-lib-template. Changes will be overwritten! */
+
 {
     "extends": ["@tsconfig/recommended", "@tsconfig/node24"],
     "compilerOptions": {
+        "lib": ["DOM", "DOM.Iterable", "ESNext"],
         "types": ["node"]
     },
     "include": ["**/*.ts", "**/*.mts"],

package/files/eslint.config.mjs

@@ -1,3 +1,5 @@
+/* This file is managed by @forsakringskassan/vue-lib-template. Changes will be overwritten! */
+
 import defaultConfig, {
     docsConfig,
     examplesConfig,

package/files/etc/lib.api.md

@@ -12,7 +12,7 @@ import { PublicProps } from 'vue';
 // Warning: (ae-forgotten-export) The symbol "__VLS_export" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
-export const AwesomeComponent: typeof __VLS_export;
+export const FcCatInfoComponent: typeof __VLS_export;
 
 // (No @packageDocumentation comment for this package)
 

package/files/etc/selectors.api.md

@@ -4,6 +4,19 @@
 
 ```ts
 
+// @public
+export function FcCatInfoComponentSelectors(selector?: string): Readonly<{
+    readonly selector: string;
+    loadingContainer(): string;
+    viewContainer(): string;
+    editContainer(): string;
+    nameInput(): string;
+    ageInput(): string;
+    breedInput(): string;
+    colorInput(): string;
+    favoriteFoodInput(): string;
+}>;
+
 // (No @packageDocumentation comment for this package)
 
 ```

package/files/package.json

@@ -1,6 +1,19 @@
 {
   "name": "${name}",
   "version": "${version}",
+  "description": "Vue library template based on Cloneman",
+  "keywords": [
+    "template",
+    "vue",
+    "cloneman",
+    "library"
+  ],
+  "homepage": "https://github.com/Forsakringskassan/vue-lib-template#readme",
+  "bugs": {
+    "url": "https://github.com/Forsakringskassan/vue-lib-template/issues"
+  },
+  "license": "MIT",
+  "author": "Försäkringskassan",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",
@@ -66,51 +79,50 @@
   "devDependencies": {
     "@babel/core": "7.29.7",
     "@babel/preset-env": "7.29.7",
-    "@fkui/design": "6.55.0",
-    "@fkui/font-default": "6.55.0",
-    "@fkui/icon-lib-default": "6.55.0",
-    "@fkui/logic": "6.55.0",
-    "@fkui/test-utils": "6.55.0",
-    "@fkui/theme-default": "6.55.0",
-    "@fkui/vue": "6.55.0",
+    "@fkui/design": "6.57.1",
+    "@fkui/font-default": "6.57.0",
+    "@fkui/icon-lib-default": "6.57.1",
+    "@fkui/logic": "6.57.1",
+    "@fkui/test-utils": "6.57.1",
+    "@fkui/theme-default": "6.57.1",
+    "@fkui/vue": "6.57.1",
+    "@forsakringskassan/apimock-express": "4.1.0",
     "@forsakringskassan/commitlint-config": "4.2.8",
-    "@forsakringskassan/cypress-axe": "5.1.5",
-    "@forsakringskassan/cypress-visual-regression": "5.1.0",
-    "@forsakringskassan/docs-generator": "3.6.2",
-    "@forsakringskassan/docs-live-example": "3.0.1",
-    "@forsakringskassan/eslint-config": "15.9.0",
-    "@forsakringskassan/eslint-config-cli": "15.9.0",
-    "@forsakringskassan/eslint-config-cypress": "15.9.0",
-    "@forsakringskassan/eslint-config-jest": "15.9.0",
-    "@forsakringskassan/eslint-config-typescript": "15.9.0",
-    "@forsakringskassan/eslint-config-typescript-typeinfo": "15.9.0",
-    "@forsakringskassan/eslint-config-vitest": "15.9.0",
-    "@forsakringskassan/eslint-config-vue": "15.9.0",
+    "@forsakringskassan/cypress-config": "1.9.1",
+    "@forsakringskassan/cypress-visual-regression": "5.2.0",
+    "@forsakringskassan/docs-generator": "3.6.4",
+    "@forsakringskassan/docs-live-example": "3.0.2",
+    "@forsakringskassan/eslint-config": "15.9.7",
+    "@forsakringskassan/eslint-config-cli": "15.9.3",
+    "@forsakringskassan/eslint-config-cypress": "15.9.9",
+    "@forsakringskassan/eslint-config-jest": "15.9.2",
+    "@forsakringskassan/eslint-config-typescript": "15.9.8",
+    "@forsakringskassan/eslint-config-typescript-typeinfo": "15.9.8",
+    "@forsakringskassan/eslint-config-vitest": "15.9.4",
+    "@forsakringskassan/eslint-config-vue": "15.9.8",
     "@forsakringskassan/prettier-config": "3.7.8",
-    "@forsakringskassan/stylelint-config": "3.4.5",
-    "@forsakringskassan/vite-lib-config": "5.10.2",
-    "@forsakringskassan/vitest-config-jsdom": "2.7.0",
-    "@forsakringskassan/vue-lib-template": "1.0.4",
-    "@html-validate/release-scripts": "7.6.8",
-    "@types/node": "24.13.3",
+    "@forsakringskassan/stylelint-config": "3.4.6",
+    "@forsakringskassan/vite-lib-config": "5.11.1",
+    "@forsakringskassan/vitest-config-jsdom": "5.0.0",
+    "@forsakringskassan/vue-lib-template": "1.2.0",
+    "@html-validate/release-scripts": "7.6.11",
+    "@types/node": "24.13.4",
     "@typescript/native": "npm:typescript@7.0.2",
     "@vue/server-renderer": "3.5.42",
     "@vue/test-utils": "2.5.0",
-    "cloneman": "1.22.0",
+    "cloneman": "1.23.1",
     "core-js": "3.50.0",
-    "cypress": "15.21.1",
-    "cypress-html-validate": "9.0.0",
-    "html-validate": "11.10.0",
+    "cypress": "16.0.0",
+    "html-validate": "11.15.0",
     "html-validate-markdown": "6.0.0",
     "html-validate-vue": "9.3.1",
     "mocha-junit-reporter": "2.2.1",
-    "mocha-multi-reporters": "1.5.1",
-    "npm-pkg-lint": "5.2.4",
+    "npm-pkg-lint": "5.2.5",
     "npm-run-all2": "9.0.3",
     "rimraf": "6.1.3",
     "typescript": "npm:@typescript/typescript6@6.0.2",
-    "vite": "8.2.2",
-    "vitest": "4.1.11",
+    "vite": "8.3.0",
+    "vitest": "5.0.0",
     "vue": "3.5.42",
     "vue-tsc": "3.3.11"
   },
@@ -130,7 +142,9 @@
     "cypress": true,
     "esbuild": true,
     "fsevents": false,
+    "msw": false,
     "unrs-resolver": true
   },
+  "cloneman": {},
   "externalDependencies": []
 }

package/files/renovate.json

@@ -3,8 +3,9 @@
     "ignoreDeps": [
         "@babel/core",
         "@babel/preset-env",
+        "@forsakringskassan/apimock-express",
         "@forsakringskassan/commitlint-config",
-        "@forsakringskassan/cypress-axe",
+        "@forsakringskassan/cypress-config",
         "@forsakringskassan/cypress-visual-regression",
         "@forsakringskassan/docs-generator",
         "@forsakringskassan/docs-live-example",
@@ -28,12 +29,10 @@
         "cloneman",
         "core-js",
         "cypress",
-        "cypress-html-validate",
         "html-validate",
         "html-validate-markdown",
         "html-validate-vue",
         "mocha-junit-reporter",
-        "mocha-multi-reporters",
         "npm-pkg-lint",
         "npm-run-all2",
         "rimraf",