@forsakringskassan/vue-lib-template 1.0.3 → 1.1.0

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/_agents/skills/documentation/SKILL.md

@@ -0,0 +1,118 @@
+---
+name: documentation
+description: Write component documentation.
+---
+
+Documentation in this repository uses [`@forsakringskassan/docs-generator`](https://forsakringskassan.github.io/docs-generator/latest/) (source: https://github.com/forsakringskassan/docs-generator) to generate a documentation site.
+When in doubt, you may consult the linked site to find the documentation of the tool itself.
+
+The `docs/` folder holds:
+
+- Build scripts (`docs/build.mts`).
+- Site sourcecode (`docs/src/`).
+- Markdown content.
+
+After building the contents are available in the `public/` folder.
+Files are 1:1 mapped between the `docs/` and `public/` folder, e.g. `docs/components/foo.md` generates `public/components/foo.html`.
+
+## Commands
+
+- `npm run -w docs build` - Build documentation.
+- `npm start -w docs` - Start a webserver hosting the documentation at `http://localhost:8080/`.
+
+If available, use the Chrome Devtools MCP server to access the site.
+
+## Writing documentation
+
+Component documentation is written in Markdown format (`.md`) in the `docs/components` folder.
+Each component should have an associated Markdown file with the same name as the component (e.g. `AwesomeComponent.vue` should have the `AwesomeComponent.md` file).
+Unless instructed otherwise, use Swedish language when writing content.
+Markdown files should be formatted with Prettier.
+
+Use [`template.md`](./template.md) as a template.
+
+The Frontmatter block contains the properties:
+
+- `title` - the document title, should be a human readable name of the component
+- `status` - component status, use `Experimental`, `Draft` or `Produktionsklar` only. If unsure which one to use, ask for clarification.
+- `layout` - must be set to `component` for component documentation.
+- `component` - name of the Vue component.
+
+It may optionally contain these properties:
+
+- `short-title` - a shorter `title` used in the navigation, use this when the regular title is long and/or causes the layout to overflow.
+- `search.terms` - an array of optional keywords the search function should index for this page.
+
+There should not be an h1 heading in the document, it is injected automatically from the `title` property.
+After the preamble and example, start using h2 headings.
+
+Remove sections not relevant to the component, e.g. if it does not have translatable text skip the "Textnycklar" section.
+
+## Examples
+
+Each component documentation should have an example after the preamble.
+Prefer "live examples" over regular runnable examples.
+
+If the component has a "live example", a file with the `LiveExample.vue` suffix, include it with an `import` code fence:
+
+````md
+```import live-example
+FilenameLiveExample.vue
+```
+````
+
+If a live example is not present but the component instead have regular example files, files with the `Example.vue` suffix, include it with an `import` code fence:
+
+````md
+```import
+FilenameExample.vue
+```
+````
+
+If there are no examples, ask for clarification what to do.
+If multiple examples (live examples or regular), ask for clarification which file should be included.
+
+## API
+
+Each component should include the API section and the special `api` container:
+
+```md
+::: api
+vue:ComponentName
+:::
+```
+
+This will insert the generated API documentation for the Vue component with the matching name.
+
+## Grouping related components
+
+A set of related components may optionally be grouped in a subfolder.
+
+```
+example-group
+├── AnotherComponent.md
+├── AwesomeComponent.md
+└── index.json
+```
+
+Each group must have an `index.json` containing the group title (human readable):
+
+```json
+{
+    "title": "Example group"
+}
+```
+
+## Moving files
+
+If a Markdown file is being moved, the Frontmatter block of the file must add the `redirect_from` property:
+
+```
+---
+title: Fantastisk komponent
+redirect_from:
+    - old/old-page.html
+```
+
+The property is an array of old paths (relative to the `public/` folder).
+If the property already exists, add more entries.

package/files/_agents/skills/documentation/template.md

@@ -0,0 +1,33 @@
+---
+title: Komponentens namn
+status: Draft
+layout: component
+component: ComponentName
+---
+
+A short preamble describing the what the component is and is used for.
+
+```import
+ComponentNameExample.vue
+```
+
+## Tänk på att
+
+- Some bullet points with remarks
+- Do's and don'ts
+
+## Copy
+
+- Some bullets points with guidelines about writing copy
+
+## Textnycklar
+
+::: api
+translation:ComponentName
+:::
+
+## API
+
+::: api
+vue:ComponentName
+:::

package/files/_htmlvalidateignore

@@ -1,2 +1,4 @@
 # generated files
 docs/public/
+docs/node_modules/
+docs/temp/

package/files/_vscode/extensions.json

@@ -0,0 +1,10 @@
+{
+    "recommendations": [
+        "dbaeumer.vscode-eslint",
+        "editorconfig.editorconfig",
+        "esbenp.prettier-vscode",
+        "html-validate.vscode-html-validate",
+        "vitest.explorer",
+        "vue.volar"
+    ]
+}

package/files/_vscode/settings.json

@@ -0,0 +1,13 @@
+{
+    "css.validate": false,
+    "less.validate": false,
+    "scss.validate": false,
+    "eslint.enable": true,
+    "prettier.requireConfig": true,
+    "editor.renderWhitespace": "boundary",
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "explorer.fileNesting.enabled": true,
+    "explorer.fileNesting.patterns": {
+        "tsconfig.json": "tsconfig.*"
+    }
+}

package/files/cypress/support/component.ts

@@ -33,8 +33,12 @@ Cypress.Commands.add("mount", (component, options = {}) => {
             setRunningContext(app);
 
             /* handle warnings as errors */
-            app.config.warnHandler = (msg, b, trace) => {
-                throw new Error(`Vue warning: ${msg}\n${trace}`);
+            app.config.warnHandler = (msg) => {
+                const mochaRunner = Cypress.mocha.getRunner();
+                const body = mochaRunner.test?.body ?? "";
+                if (!body.includes("<expectedException")) {
+                    cy.wrap(`Vue warning: ${msg}`).should("be.empty");
+                }
             };
         },
     });
@@ -42,4 +46,35 @@ Cypress.Commands.add("mount", (component, options = {}) => {
     return mount(component, options);
 });
 
+const uncaughtErrors: string[] = [];
+
+Cypress.on("uncaught:exception", (err) => {
+    const mochaRunner = Cypress.mocha.getRunner();
+    const currentTest = mochaRunner.test;
+
+    const body = currentTest?.body ?? "";
+    const match = body.match(
+        /<expectedException>([\s\S]*?)<\/expectedException>|<expectedException\s*\/>/i,
+    );
+    const message = match ? match[1].trim() : null;
+    if (message?.length === 0 || (message && err.message.includes(message))) {
+        return false;
+    }
+
+    const testName =
+        currentTest?.fullTitle() ?? currentTest?.title ?? "<unknown>";
+
+    uncaughtErrors.push(testName);
+
+    return true;
+});
+
+after(() => {
+    if (uncaughtErrors.length > 0) {
+        throw new Error(
+            `⚠️ Suite failed because an uncaught exception occurred earlier in: ${uncaughtErrors}`,
+        );
+    }
+});
+
 injectSpritesheet();

package/files/cypress/tsconfig.json

@@ -9,7 +9,8 @@
             "cy-mount",
             "cypress-html-validate/commands",
             "@forsakringskassan/cypress-visual-regression/commands",
-            "forced-colors"
+            "forced-colors",
+            "mocha"
         ],
         "typeRoots": ["../node_modules", "../node_modules/@types", "./types"],
         "paths": {

package/files/cypress/types/mocha.d.ts

@@ -0,0 +1,15 @@
+import "mocha";
+
+declare global {
+    namespace Cypress {
+        interface Cypress {
+            /**
+             * Intern referens till Cypress underliggande Mocha-instans.
+             */
+            mocha: {
+                getRunner: () => Mocha.Runner;
+            };
+        }
+    }
+}
+export {};

package/files/cypress.config.ts

@@ -85,6 +85,7 @@ export default defineConfig({
             framework: "vue",
             bundler: "vite",
         },
+        excludeSpecPattern: ["temp/**"], // cloneman puts cy-files in temp folder during build
     },
     defaultBrowser: "chrome",
     hosts: { localhost: "127.0.0.1" },

package/files/docs/build.mts

@@ -1,3 +1,4 @@
+import { copyFileSync } from "node:fs";
 import path from "node:path";
 import {
     Generator,
@@ -17,10 +18,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 +41,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.0.0",
+    "@forsakringskassan/docs-generator": "3.6.4",
     "@tsconfig/node24": "24.0.5",
     "@tsconfig/recommended": "1.0.13",
     "http-server": "14.1.1",
-    "vue": "3.5.41"
+    "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,7 @@
 {
     "extends": ["@tsconfig/recommended", "@tsconfig/node24"],
     "compilerOptions": {
+        "lib": ["DOM", "DOM.Iterable", "ESNext"],
         "types": ["node"]
     },
     "include": ["**/*.ts", "**/*.mts"],

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,7 +1,7 @@
 {
   "name": "${name}",
   "version": "${version}",
-  "description": "${description}",
+  "description": "Vue library template based on Cloneman",
   "keywords": [
     "template",
     "vue",
@@ -12,10 +12,6 @@
   "bugs": {
     "url": "https://github.com/Forsakringskassan/vue-lib-template/issues"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Forsakringskassan/vue-lib-template.git"
-  },
   "license": "MIT",
   "author": "Försäkringskassan",
   "exports": {
@@ -83,52 +79,53 @@
   "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.0.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.8.13",
-    "@forsakringskassan/eslint-config-cli": "15.8.9",
-    "@forsakringskassan/eslint-config-cypress": "15.8.12",
-    "@forsakringskassan/eslint-config-jest": "15.8.9",
-    "@forsakringskassan/eslint-config-typescript": "15.8.14",
-    "@forsakringskassan/eslint-config-typescript-typeinfo": "15.8.14",
-    "@forsakringskassan/eslint-config-vitest": "15.8.11",
-    "@forsakringskassan/eslint-config-vue": "15.8.14",
+    "@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.5",
+    "@forsakringskassan/eslint-config-cli": "15.9.3",
+    "@forsakringskassan/eslint-config-cypress": "15.9.3",
+    "@forsakringskassan/eslint-config-jest": "15.9.2",
+    "@forsakringskassan/eslint-config-typescript": "15.9.2",
+    "@forsakringskassan/eslint-config-typescript-typeinfo": "15.9.2",
+    "@forsakringskassan/eslint-config-vitest": "15.9.4",
+    "@forsakringskassan/eslint-config-vue": "15.9.6",
     "@forsakringskassan/prettier-config": "3.7.8",
-    "@forsakringskassan/stylelint-config": "3.4.5",
-    "@forsakringskassan/vite-lib-config": "5.10.1",
-    "@forsakringskassan/vitest-config-jsdom": "2.7.0",
-    "@forsakringskassan/vue-lib-template": "1.0.3",
-    "@html-validate/release-scripts": "7.6.8",
+    "@forsakringskassan/stylelint-config": "3.4.6",
+    "@forsakringskassan/vite-lib-config": "5.11.0",
+    "@forsakringskassan/vitest-config-jsdom": "5.0.0",
+    "@forsakringskassan/vue-lib-template": "1.1.0",
+    "@html-validate/release-scripts": "7.6.11",
     "@types/node": "24.13.3",
     "@typescript/native": "npm:typescript@7.0.2",
-    "@vue/server-renderer": "3.5.41",
-    "@vue/test-utils": "2.4.11",
-    "cloneman": "1.19.6",
+    "@vue/server-renderer": "3.5.42",
+    "@vue/test-utils": "2.5.0",
+    "cloneman": "1.23.1",
     "core-js": "3.50.0",
-    "cypress": "15.21.0",
-    "cypress-html-validate": "9.0.0",
-    "html-validate": "11.10.0",
+    "cypress": "16.0.0",
+    "cypress-html-validate": "9.1.0",
+    "html-validate": "11.14.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",
-    "vue": "3.5.41",
+    "vitest": "5.0.0",
+    "vue": "3.5.42",
     "vue-tsc": "3.3.11"
   },
   "peerDependencies": {
@@ -147,11 +144,9 @@
     "cypress": true,
     "esbuild": true,
     "fsevents": false,
+    "msw": false,
     "unrs-resolver": true
   },
-  "cloneman": {
-    "template": "@forsakringskassan/vue-lib-template",
-    "version": "1.0.3"
-  },
+  "cloneman": {},
   "externalDependencies": []
 }

package/files/renovate.json

@@ -1,10 +1,9 @@
 {
-    "extends": [
-        "local>forsakringskassan/renovate-config"
-    ],
+    "extends": ["local>forsakringskassan/renovate-config"],
     "ignoreDeps": [
         "@babel/core",
         "@babel/preset-env",
+        "@forsakringskassan/apimock-express",
         "@forsakringskassan/commitlint-config",
         "@forsakringskassan/cypress-axe",
         "@forsakringskassan/cypress-visual-regression",