@forsakringskassan/vue-lib-template 1.0.4 → 1.2.0

package/files/src/mocks.mts

@@ -0,0 +1,6 @@
+import { appendBasePath } from "@forsakringskassan/apimock-express/browser";
+import catApiMock from "./cat-api.mock.mts";
+
+const mocks = [...appendBasePath([catApiMock], "/api")];
+
+export default mocks;

package/files/src/selectors/FcCatInfoComponent.selectors.ts

@@ -0,0 +1,74 @@
+/**
+ * Selectors for `FcCatInfoComponent`.
+ *
+ * @public
+ * @param selector - The selector for the FcCatInfoComponent.
+ * @returns An object with selector methods for the FcCatInfoComponent.
+ */
+export function FcCatInfoComponentSelectors(selector: string = ":scope") {
+    return Object.freeze({
+        /**
+         * The base selector for the component.
+         * @returns The root selector for the component.
+         */
+        get selector(): string {
+            return selector;
+        },
+
+        /**
+         * The loader container.
+         */
+        loadingContainer(): string {
+            return `${selector} [data-test="cat-info-loading"]`;
+        },
+
+        /**
+         * The view mode container.
+         */
+        viewContainer(): string {
+            return `${selector} [data-test="cat-info-view"]`;
+        },
+
+        /**
+         * The edit mode container.
+         */
+        editContainer(): string {
+            return `${selector} [data-test="cat-info-edit"]`;
+        },
+
+        /**
+         * Input for Cat Name in edit mode.
+         */
+        nameInput(): string {
+            return `${selector} [data-test="edit-name"]  input`;
+        },
+
+        /**
+         * Input for Cat Age in edit mode.
+         */
+        ageInput(): string {
+            return `${selector} [data-test="edit-age"] input`;
+        },
+
+        /**
+         * Input for Cat Breed in edit mode.
+         */
+        breedInput(): string {
+            return `${selector} [data-test="edit-breed"] input`;
+        },
+
+        /**
+         * Input for Cat Color in edit mode.
+         */
+        colorInput(): string {
+            return `${selector} [data-test="edit-color"] input`;
+        },
+
+        /**
+         * Input for Favorite Food in edit mode.
+         */
+        favoriteFoodInput(): string {
+            return `${selector} [data-test="edit-favorite-food"] input`;
+        },
+    });
+}

package/files/src/selectors/index.ts

@@ -1 +1 @@
-export {};
+export { FcCatInfoComponentSelectors } from "./FcCatInfoComponent.selectors";

package/files/src/style.scss

@@ -0,0 +1 @@
+/* Library styles */

package/files/src/vite-dev/app.vue

@@ -7,7 +7,7 @@ const namn = ref("Vue lib template");
 
 <template>
     <div class="container">
-        <h1>@forsakringskassan/vue-lib-template</h1>
+        <h1>Development application</h1>
 
         <f-text-field v-model="namn" v-validation.required maxlength="100"> Namn </f-text-field>
         <pre>Hello {{ namn }}!</pre>

package/files/tsconfig.cypress.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! */
 
 {
     "extends": [

package/files/tsconfig.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! */
 
 {
     "extends": "@forsakringskassan/vite-lib-config/tsconfig.root.json",

package/files/tsconfig.lib.json

@@ -1,13 +1,19 @@
-/* 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! */
 
 {
     "extends": "@forsakringskassan/vite-lib-config/tsconfig.lib.json",
     "compilerOptions": {
+        "allowImportingTsExtensions": true,
         "paths": {
             "@forsakringskassan/vue-lib-template/selectors": [
                 "./src/selectors/index.ts"
             ],
             "@forsakringskassan/vue-lib-template": ["./src/index.ts"]
         }
-    }
+    },
+    "include": [
+        "${configDir}/src/**/*.mts",
+        "${configDir}/src/**/*.ts",
+        "${configDir}/src/**/*.vue"
+    ]
 }

package/files/tsconfig.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! */
 
 {
     "extends": "@forsakringskassan/vite-lib-config/tsconfig.selectors.json"

package/files/vite.config.mts

@@ -1,8 +1,12 @@
-/* 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! */
 
 import { defineConfig } from "@forsakringskassan/vite-lib-config/vite";
 import { defineTestConfig } from "@forsakringskassan/vitest-config-jsdom";
+import mocks from "./src/mocks.mts";
 
 export default defineConfig({
     test: defineTestConfig(),
+    fk: {
+        mocks,
+    },
 });

package/hooks/install.mjs

@@ -2,7 +2,8 @@
  * @param {import("cloneman").InstallContext} context
  */
 export default async (context) => {
-    const { getParameter, updateJsonFile } = context;
+    const { getParameter, updateJsonFile, getApplicationName, replaceInFile } =
+        context;
 
     /* write repository url to "package.json" */
     const repoUrl = getParameter("repo-url");
@@ -12,4 +13,11 @@ export default async (context) => {
             url: repoUrl,
         },
     });
+
+    /* update placeholder names with the real application name (from package.json) */
+    const name = getApplicationName;
+    const placeholder = "@forsakringskassan/vue-lib-template";
+    await replaceInFile("tsconfig.lib.json", placeholder, name);
+    await replaceInFile("tsconfig.cypress.json", placeholder, name);
+    await replaceInFile("tsconfig.selectors.json", placeholder, name);
 };

package/index.js

@@ -7,6 +7,7 @@
 
         const options = {
             ...packageJson.cloneman,
+            fileHash: "36c8f49330d6acb55faacab6e563150ce680f321673ee1d5989144b469ef7839",
             filesDir: path.join(import.meta.dirname, "files"),
             hooksDir: path.join(import.meta.dirname, "hooks"),
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forsakringskassan/vue-lib-template",
-  "version": "1.0.4",
+  "version": "1.2.0",
   "description": "Vue library template based on Cloneman",
   "keywords": [
     "template",
@@ -40,20 +40,18 @@
       "CODEOWNERS",
       "cypress.config.ts",
       "cypress/fixtures/example.json",
-      "cypress/support/commands/forced-colors.ts",
       "cypress/support/common.ts",
-      "cypress/support/component-index.html",
       "cypress/support/component.ts",
       "cypress/support/main.scss",
       "cypress/tsconfig.json",
-      "cypress/types/cy-mount.d.ts",
-      "cypress/types/forced-colors.d.ts",
       "cypress/types/mocha.d.ts",
       "docs/build.mts",
-      "docs/components/AwesomeComponent.md",
-      "docs/components/index.md",
       "docs/index.md",
+      "docs/kattinformation/index.md",
       "docs/package.json",
+      "docs/src/bundle-mocks.mjs",
+      "docs/src/global.d.ts",
+      "docs/src/main.js",
       "docs/src/main.scss",
       "docs/src/setup.ts",
       "docs/tsconfig.json",
@@ -64,15 +62,27 @@
       "LICENSE.md",
       "README.md",
       "renovate.json",
-      "src/awesome-component-logic.ts",
-      "src/AwesomeComponent.cy.ts",
-      "src/AwesomeComponent.vue",
-      "src/AwesomeComponentLogic.spec.ts",
-      "src/examples/DummyExample.vue",
+      "src/cat-api-mock.spec.ts",
+      "src/cat-api.mock.mts",
+      "src/cat-api.spec.ts",
+      "src/cat-api.ts",
+      "src/cat-data.ts",
+      "src/cat-info-logic.ts",
+      "src/cat-types.ts",
+      "src/CatInfoEdit.vue",
+      "src/CatInfoLogic.spec.ts",
+      "src/CatInfoShow.vue",
+      "src/examples/CatInfoExample.vue",
+      "src/FcCatInfoComponent.cy.ts",
+      "src/FcCatInfoComponent.vue",
+      "src/FcCatInfoComponentLiveExample.vue",
       "src/index.ts",
       "src/local.scss",
       "src/local.ts",
+      "src/mocks.mts",
+      "src/selectors/FcCatInfoComponent.selectors.ts",
       "src/selectors/index.ts",
+      "src/style.scss",
       "src/vite-dev/app.vue",
       "tsconfig.cypress.json",
       "tsconfig.json",
@@ -94,17 +104,16 @@
       "babel.config.js",
       "cypress.config.ts",
       "cypress/fixtures/example.json",
-      "cypress/support/commands/forced-colors.ts",
       "cypress/support/common.ts",
-      "cypress/support/component-index.html",
       "cypress/support/component.ts",
       "cypress/support/main.scss",
       "cypress/tsconfig.json",
-      "cypress/types/cy-mount.d.ts",
-      "cypress/types/forced-colors.d.ts",
       "cypress/types/mocha.d.ts",
       "docs/build.mts",
       "docs/package.json",
+      "docs/src/bundle-mocks.mjs",
+      "docs/src/global.d.ts",
+      "docs/src/main.js",
       "docs/src/main.scss",
       "docs/src/setup.ts",
       "docs/tsconfig.json",

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

@@ -1,33 +0,0 @@
-/// <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/component-index.html

@@ -1,14 +0,0 @@
-<!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/types/cy-mount.d.ts

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

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

@@ -1,18 +0,0 @@
-/// <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/docs/components/AwesomeComponent.md

@@ -1,27 +0,0 @@
----
-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

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

package/files/src/AwesomeComponent.cy.ts

@@ -1,9 +0,0 @@
-import AwesomeComponent from "./AwesomeComponent.vue";
-
-describe("AwesomeComponent", () => {
-    it("fetches data on button click", () => {
-        cy.mount(AwesomeComponent);
-        cy.get("button").click();
-        cy.get("p.result").should("contain.text", "Hello from backend");
-    });
-});

package/files/src/AwesomeComponent.vue

@@ -1,45 +0,0 @@
-<script setup lang="ts">
-import { FButton, FCard } from "@fkui/vue";
-import { useAwesomeLogic } from "./awesome-component-logic";
-
-const { loading, data, fetchData } = useAwesomeLogic();
-</script>
-
-<template>
-    <f-card class="awesome-card">
-        <template #header>
-            <h2>
-                <!-- @slot Heading -->
-                <slot>Awesome Component</slot>
-            </h2>
-        </template>
-        <template #default>
-            <div class="content">
-                <f-button :disabled="loading" variant="primary" size="medium" @click="fetchData">
-                    {{ loading ? "Loading..." : "Fetch data" }}
-                </f-button>
-                <p v-if="data" class="result">{{ data }}</p>
-            </div>
-        </template>
-    </f-card>
-</template>
-
-<style lang="scss" scoped>
-.awesome-card {
-    padding: 1rem;
-    max-width: 400px;
-    margin: auto;
-}
-
-.content {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    align-items: center;
-}
-
-.result {
-    font-weight: bold;
-    color: #0066cc;
-}
-</style>

package/files/src/AwesomeComponentLogic.spec.ts

@@ -1,30 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { useAwesomeLogic } from "./awesome-component-logic";
-
-describe("useAwesomeLogic", () => {
-    let logic: ReturnType<typeof useAwesomeLogic>;
-
-    beforeEach(() => {
-        // Reset timers for the Promise timeout
-        vi.useFakeTimers();
-        logic = useAwesomeLogic();
-    });
-
-    it("should have initial state", () => {
-        expect.assertions(2);
-        expect(logic.loading.value).toBe(false);
-        expect(logic.data.value).toBeNull();
-    });
-
-    it("fetchData sets loading then data", async () => {
-        expect.assertions(3);
-        const fetchPromise = logic.fetchData();
-        // loading should be true immediately
-        expect(logic.loading.value).toBe(true);
-        // fast-forward the timer to resolve the simulated backend call
-        vi.advanceTimersByTime(300);
-        await fetchPromise;
-        expect(logic.loading.value).toBe(false);
-        expect(logic.data.value).toBe("Hello from backend");
-    });
-});

package/files/src/awesome-component-logic.ts

@@ -1,28 +0,0 @@
-import type { Ref } from "vue";
-import { ref } from "vue";
-
-/**
- * Business logic for the Awesome component.
- * Returns reactive refs and a fetch function that simulates a backend call.
- */
-export function useAwesomeLogic(): {
-    loading: Ref<boolean>;
-    data: Ref<string | null>;
-    fetchData: () => Promise<void>;
-} {
-    const loading = ref(false);
-    const data = ref<string | null>(null);
-
-    async function fetchData(): Promise<void> {
-        loading.value = true;
-        const result = await new Promise<{ message: string }>((resolve) => {
-            setTimeout(() => {
-                resolve({ message: "Hello from backend" });
-            }, 300);
-        });
-        data.value = result.message;
-        loading.value = false;
-    }
-
-    return { loading, data, fetchData };
-}

package/files/src/examples/DummyExample.vue

@@ -1,7 +0,0 @@
-<script setup lang="ts">
-import AwesomeComponent from "../AwesomeComponent.vue";
-</script>
-
-<template>
-    <awesome-component />
-</template>