@forsakringskassan/vue-lib-template 1.2.0 → 1.2.2

package/files/docs/build.mts

@@ -16,7 +16,10 @@ const docs = new Generator(import.meta.url, {
     setupPath: path.resolve(import.meta.dirname, "src/setup.ts"),
     vendor: [
         { package: "vue", alias: "vue/dist/vue.esm-bundler.js" },
+        "@fkui/date",
+        "@fkui/logic",
         "@fkui/vue",
+        pkg.name,
     ],
 });
 

package/files/docs/{kattinformation → guide}/index.md

@@ -3,6 +3,7 @@ title: Kattinformation
 status: Draft
 layout: component
 component: FcCatInfoComponent
+visible: false
 ---
 
 Komponenten kan visa kattdata i visningsläge eller i ett redigerbart läge.

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

@@ -1,7 +1,7 @@
 import { matchRequest } from "@forsakringskassan/apimock-express/browser";
 import { http } from "msw";
 import { setupWorker } from "msw/browser";
-import mocks from "../../src/mocks.mts";
+import mocks from "../../src/mocks/index.mts";
 
 const handlers = [
     http.all("/api/*", async (req) => {

package/files/package.json

@@ -92,7 +92,7 @@
     "@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": "15.9.10",
     "@forsakringskassan/eslint-config-cli": "15.9.3",
     "@forsakringskassan/eslint-config-cypress": "15.9.9",
     "@forsakringskassan/eslint-config-jest": "15.9.2",
@@ -102,9 +102,9 @@
     "@forsakringskassan/eslint-config-vue": "15.9.8",
     "@forsakringskassan/prettier-config": "3.7.8",
     "@forsakringskassan/stylelint-config": "3.4.6",
-    "@forsakringskassan/vite-lib-config": "5.11.1",
+    "@forsakringskassan/vite-lib-config": "5.12.1",
     "@forsakringskassan/vitest-config-jsdom": "5.0.0",
-    "@forsakringskassan/vue-lib-template": "1.2.0",
+    "@forsakringskassan/vue-lib-template": "1.2.2",
     "@html-validate/release-scripts": "7.6.11",
     "@types/node": "24.13.4",
     "@typescript/native": "npm:typescript@7.0.2",

package/files/project-guide/cloneman.md

@@ -0,0 +1,30 @@
+# Cloneman and template updates
+
+[← Back to project guide](./index.md)
+
+[Cloneman](https://github.com/Forsakringskassan/cloneman/blob/main/README.md) creates a new component-library repository from a template and keeps files marked as managed in sync with later template updates.
+
+The generated repository is a normal project owned by its team. Cloneman does not replace your source code or decide how a component should work. It provides a consistent foundation for configuration, tooling, documentation support, and common CI behavior.
+
+## What is managed
+
+Files selected by the template are managed centrally. In this template that includes build and lint configuration, Cypress support, documentation infrastructure, and this `project-guide/` directory. A generated repository also receives the template's dependency and script changes according to Cloneman's update rules.
+
+A managed file may be updated when the template is updated. Treat local changes to managed configuration as a deliberate maintenance decision: understand the next template update before diverging from the shared setup.
+
+## Updating a cloned repository
+
+When a new template version is available:
+
+1. Read the template release notes and identify configuration or dependency changes.
+2. Run the update command `npx cloneman@latest update`.
+3. Review the complete diff, especially package scripts, TypeScript configuration, test configuration, and CI files.
+4. Resolve conflicts without discarding repository-specific components or tests.
+5. Run lint, unit tests, component tests, builds, and documentation checks.
+6. Commit the update separately when possible, so it is easy to review and revert.
+
+## Working with managed files
+
+Before editing a managed file, ask whether the change belongs in every library created from the template. If it does, improve the template and update the generated repositories through Cloneman. If it is specific to one component library, keep it in an appropriate consumer-owned file or add a documented local override.
+
+The source template is available at [Forsakringskassan/vue-lib-template](https://github.com/Forsakringskassan/vue-lib-template). Use it to inspect the intended baseline, but follow the local repository's pinned versions and release notes when applying an update.

package/files/project-guide/commits-and-releases.md

@@ -0,0 +1,13 @@
+# Commits and releases
+
+[← Back to project guide](./index.md)
+
+Keep commits small enough to review and describe one coherent change. A component feature may still need several files, but its implementation, tests, examples, and documentation should tell one story.
+
+Follow the [FKDS developer contribution guide](https://forsakringskassan.github.io/designsystem/latest/gettingstarted/contribute-to-fkds/contributing-developers.html#commit) for the commit convention and examples. Commit messages should make the intent clear to reviewers and release tooling. The prefix used (e.g., `feat:`, `fix:`, or `BREAKING CHANGE:`) determines the version bump (minor, patch, or major) via the automated release process.
+
+A useful commit contains the implementation and its verification. Avoid mixing dependency upgrades, formatting churn, and unrelated refactors into a component change unless they are required.
+
+## Release process
+
+TODO: Document the release process.

package/files/project-guide/development.md

@@ -0,0 +1,97 @@
+# Development
+
+[← Back to project guide](./index.md)
+
+To get up and running quickly:
+
+1. **Install dependencies**: `npm install`
+2. **Start development server**: `npm start`
+3. **Run a specific example**: `npm start <name>` (e.g., `npm start catinfo`)
+4. **Run tests**: `npm test`
+
+## Architecture: Three Layers
+
+We recommend separating Appearance, Logic, and Types into three distinct layers to keep the codebase maintainable. You can find an example component, [`FcCatInfoComponent`](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/FcCatInfo/FcCatInfoComponent.vue), which demonstrates how this structure can be applied in practice:
+
+### 1. Type Layer
+
+In the example [cat-types.ts](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/FcCatInfo/cat-types.ts), we define _what_ the data is using TypeScript interfaces.
+
+- **Why?** It ensures that both the logic and the component know exactly which fields (e.g., `name`, `age`) exist.
+
+### 2. Logic Layer
+
+In the example [cat-info-logic.ts](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/FcCatInfo/cat-info-logic.ts), we create a so-called "composable" (a function that starts with `use...`, e.g., `useCatInfo`).
+
+- This is where we handle API calls, state (loading, error), and calculations.
+- **Why?** It makes the logic easy to test with Vitest without needing to start a full browser.
+
+### 3. UI Layer
+
+Refer to [FcCatInfoComponent.vue](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/FcCatInfo/FcCatInfoComponent.vue) for the actual Vue component. This should be "thin".
+
+- It imports the logic from `useCatInfo`.
+- It uses components from `@fkui/vue` (such as `FCard` or `FLoader`) to follow the design system.
+- **Focus**: The UI layer should only care about _how to display_ the data and _which user actions_ to trigger. The "brain" is in the logic layer.
+
+## Implementation Flow
+
+1. **Create the files**: Create `MyComponent.vue`, `my-component-logic.ts`, and `my-component-types.ts`.
+2. **Implement logic**: Create your `useMyComponent` function and export it.
+3. **Build UI**: Import the logic into the `.vue` file and connect variables to the template.
+4. **Export**: Open `src/components/index.ts` and add:
+
+    ```typescript
+    export { default as MyComponent } from "./MyComponent.vue";
+    ```
+
+## Styling
+
+- For small amounts of styling, it is perfectly fine to use `<style lang="scss"></style>` directly within the `.vue` file.
+- For more extensive styles, create a dedicated SCSS file for the component (e.g., `MyComponent.scss`) and import it in the `.vue` file.
+- Use `style.scss` for styles that should apply to the entire library.
+
+## Common commands
+
+Use the repository scripts from the root of the project unless stated otherwise. The most important commands for daily development are marked in **bold**.
+
+| Command                  | Use it for                                                                      |
+| ------------------------ | ------------------------------------------------------------------------------- |
+| **`npm start`**          | Start the Vite development server using `src/vite-dev/app.vue`.                 |
+| **`npm run build`**      | Build the library, declaration files, API reports, and the Cloneman template.   |
+| `npm run build:lib`      | Build the distributable JavaScript and CSS library bundle.                      |
+| `npm run build:dts`      | Check and emit TypeScript declaration files.                                    |
+| `npm run build:api`      | Update API Extractor reports for the public package surface.                    |
+| **`npm run build:docs`** | Build the documentation site into `docs/public/`.                               |
+| **`npm run start:docs`** | Serve the generated documentation site locally at `http://localhost:8080`.      |
+| **`npm test`**           | Run the full test command, including the configured pre-test checks.            |
+| **`npm run unit`**       | Run Vitest without coverage. Useful for a quick unit-test loop.                 |
+| **`npm run lint`**       | Run Prettier, ESLint, Stylelint, and HTML validation checks.                    |
+| **`npm run lint:fix`**   | Apply available automatic formatting and lint fixes. Review the resulting diff. |
+| `npm run prettier:check` | Check formatting without changing files.                                        |
+| `npm run prettier:write` | Format supported files.                                                         |
+| `npm run eslint`         | Run ESLint with its cache.                                                      |
+| `npm run stylelint`      | Check styles in `src/**/*.css` and `src/**/*.scss`.                             |
+| `npm run html-validate`  | Validate HTML, Vue files, and Markdown examples.                                |
+| `npm run clean`          | Remove generated `dist/` and `temp/` files.                                     |
+
+## Running examples
+
+You can run a specific example file directly by passing a name to the start command:
+
+```bash
+npm start catinfo
+```
+
+This uses fuzzy search to find and start the best matching file in `src/examples/` (e.g., `CatInfoExample.vue`).
+
+## Documentation commands
+
+Documentation is maintained in `docs/` and generated with [`@forsakringskassan/docs-generator`](https://forsakringskassan.github.io/docs-generator/latest/). A typical local workflow is:
+
+```bash
+npm run build:docs
+npm run start:docs
+```
+
+The generated site is build output. Edit Markdown and Vue examples in the source locations, then build again.

package/files/project-guide/documentation.md

@@ -0,0 +1,78 @@
+# Component documentation
+
+[← Back to project guide](./index.md)
+
+Component documentation is written in Markdown and generated into the separate site under `docs/`. The repository-level guide you are reading is ordinary README documentation; it is not processed by docs-generator.
+
+The [docs-generator documentation](https://forsakringskassan.github.io/docs-generator/) describes the complete tool. The rules below cover the conventions needed for a component page.
+
+## Create the Markdown page
+
+Put the component page in `docs/components/` and give it the same base name as the component. Start with the required front matter:
+
+```md
+---
+title: Cat information
+status: Draft
+layout: component
+component: FcCatInfoComponent
+---
+```
+
+Use `Experimentell`, `Draft`, or `Produktionsklar` for `status`, according to the component's actual maturity. The title from front matter becomes the page heading, so do not add a separate `#` heading. Start the body with a short preamble explaining what the component does and when to use it.
+
+## Add an example first
+
+Every component must have at least one runnable example so readers can see the component in a useful state. Put examples in `src/`, where the documentation build is configured to find Vue files.
+
+A standard runnable example is included with an `import` fence:
+
+````md
+```import
+CatInfoExample.vue
+```
+````
+
+The corresponding example is [`FcCatInfoComponentExample.vue`](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/FcCatInfo/examples/FcCatInfoComponentExample.vue). Keep the example focused on a realistic use case and make its initial state useful without extra setup.
+
+Prefer a live example when the documentation needs interactive controls or a richer demonstration. Include a file ending in `LiveExample.vue` with the `live-example` variant:
+
+````md
+```import live-example
+FcCatInfoComponentLiveExample.vue
+```
+````
+
+The reference implementation shows this pattern in [FcCatInfoComponentLiveExample.vue](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/FcCatInfo/examples/FcCatInfoComponentLiveExample.vue) and its [documentation page](https://github.com/Forsakringskassan/vue-lib-template/blob/main/docs/guide/index.md).
+
+See the [docs-live-example README](https://github.com/Forsakringskassan/docs-live-example/blob/main/README.md) for the implementation details behind interactive examples.
+
+A runnable example is part of the documentation contract, not optional decoration. Add at least one for every component and verify it through `npm run build:docs` and the local documentation server.
+
+## Explain usage and constraints
+
+After the preamble and example, use level-two headings for the content readers need. Typical sections are:
+
+- When to use the component.
+- Important states and behavior.
+- Content and accessibility considerations.
+- Do's and don'ts.
+- API.
+
+Only include sections that apply. Keep guidance task-oriented and describe what a consumer should do, not how the component happens to be implemented.
+
+## Include the generated API
+
+Add the Vue API block for every component page:
+
+```md
+## API
+
+::: api
+vue:FcCatInfoComponent
+:::
+```
+
+The component name must match the Vue component passed to the generator. Public props, events, slots, and documented types are extracted from the component source and its declarations. Keep public API comments accurate because they are part of the generated documentation.
+
+If the component has translation keys, add the corresponding translation API block. Do not add empty sections for features the component does not use.

package/files/project-guide/index.md

@@ -0,0 +1,43 @@
+# Component library project guide
+
+This guide explains how to develop, test, document, and release this Vue component library.
+The documentation in `docs/` describes the library's components, while this guide focuses on the technical aspects of the component library.
+
+## Start here
+
+Read the detailed guides in this order:
+
+- [Development](./development.md) for the available commands and daily workflow.
+- [Testing](./testing.md) for Vitest, API mocks, Cypress, and quality checks.
+- [Component documentation](./documentation.md) for how to document components and create examples.
+- [Commits and releases](./commits-and-releases.md) for collaboration and publication.
+- [Cloneman](./cloneman.md) for template-managed files and updates.
+
+## Project Structure
+
+Here are the most important locations you need to know:
+
+- `src/`: This is where all your source code lives.
+    - `index.ts`: The "Main Entrance". Everything you want others to be able to import from your library must be exported from here.
+    - `style.scss`: Global styles for your library.
+    - `components/`: Contains the library's component files.
+    - `mocks/`: Contains API mocks and mock-related files for testing.
+    - `selectors/`: Contains selector files for Cypress tests, ensuring your tests don't break when CSS classes change.
+- `docs/`: This is where you write the documentation.
+    - `docs/components/`: Each component gets its own `.md` file here.
+- `cypress/`: Settings for your component tests.
+
+## A current reference implementation
+
+The `vue-lib-template` template repository, which this component library is based on, contains a small cat information component that demonstrates the recommended structure. It is useful as a starting point when creating a new component:
+
+- [Component](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/FcCatInfo/FcCatInfoComponent.vue)
+- [Runnable example](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/FcCatInfo/examples/FcCatInfoComponentExample.vue)
+- [Live-example](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/FcCatInfo/examples/FcCatInfoComponentLiveExample.vue)
+- [Unit tests](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/FcCatInfo/cat-info-logic.spec.ts)
+- [Cypress component tests](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/FcCatInfo/FcCatInfoComponent.cy.ts)
+- [Cypress selectors](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/selectors/guide/FcCatInfoComponent.selectors.ts)
+- [API mock](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/mocks/guide/cat-api.mock.mts)
+- [Mock registration](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/mocks/index.mts)
+
+When comparing your implementation with this example, focus on the separation between rendering, business logic, test selectors, mocks, and examples. The example is just a reference for structure.

package/files/project-guide/testing.md

@@ -0,0 +1,118 @@
+# Testing and quality checks
+
+[← Back to project guide](./index.md)
+
+Use different tools for different questions. Unit tests check isolated logic quickly. Cypress checks the component as a user experiences it. API mocks make examples and browser tests deterministic without requiring a live backend.
+
+## Vitest unit tests
+
+Use Vitest for composables, business rules, data transformations. Keep these tests independent from the browser whenever possible.
+
+Run tests with `npm run unit`.
+
+The cat information logic is tested in [`cat-info-logic.spec.ts`](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/FcCatInfo/cat-info-logic.spec.ts). It mocks the API module and verifies loading, successful data, errors, and updates:
+
+```ts
+import { expect, it, vi } from "vitest";
+import { catGetById } from "./cat-api";
+import { useCatInfo } from "./cat-info-logic";
+
+vi.mock("./cat-api");
+
+it("loads a cat", async () => {
+    vi.mocked(catGetById).mockResolvedValue({ id: "cat-001", name: "Milo" });
+
+    const { cat, fetchCat } = useCatInfo();
+    await fetchCat("cat-001");
+
+    expect(cat.value?.name).toBe("Milo");
+});
+```
+
+## API mocks with apimock-express
+
+Prefer [@forsakringskassan/apimock-express](https://github.com/Forsakringskassan/apimock-express) when a component calls an HTTP API. A mock documents the endpoint contract and lets the documentation site and Cypress use the same predictable response.
+
+Prefer inline mocks when the mock is only needed by a single test or example. See the [inline mocks documentation](https://github.com/Forsakringskassan/apimock-express#inline-mocks) for details.
+
+The local example is [`cat-api.mock.mts`](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/mocks/guide/cat-api.mock.mts):
+
+```ts
+import { defineMock } from "@forsakringskassan/apimock-express/helpers";
+
+export default defineMock<ResponseType>({
+    meta: {
+        url: "/resource",
+        method: "GET",
+    },
+    defaultResponse(params) {
+        const id = params.parameters?.id;
+
+        return {
+            status: 200,
+            body: createResponse(id),
+            delay: 300,
+        };
+    },
+});
+```
+
+To add a new mock:
+
+1. Create a `*.mock.mts` file next to the API code.
+2. Define its HTTP method, URL, response type, status, body, and any useful delay.
+3. Import it in [`src/mocks/index.mts`](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/mocks/index.mts).
+4. Add it to the array passed to `appendBasePath`.
+5. Use the mock from examples and browser tests, and cover error responses as well as success.
+
+Mocks are valuable because they make failures reproducible, keep tests independent of external environments, and expose API assumptions early. Keep mock data representative but small, and do not use real personal or production data.
+
+See the [apimock-express README](https://github.com/Forsakringskassan/apimock-express/blob/main/README.md) for advanced request matching and response configuration.
+
+## Cypress component tests
+
+Use Cypress for user-visible component behavior: rendering, loading states, form interaction, emitted actions, error states, and accessibility-related behavior. The current example is [`FcCatInfoComponent.cy.ts`](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/components/guide/FcCatInfo/FcCatInfoComponent.cy.ts).
+
+The current package does not define a dedicated Cypress npm script, so run Cypress through `npx`:
+
+- **Interactive runner** (for development): `npx cypress open --component`
+- **CLI runner** (for CI checks): `npx cypress run --component`
+
+Mount the component with realistic props and wait for state changes through visible behavior:
+
+```ts
+cy.mount(FcCatInfoComponent, {
+    props: {
+        catId: testCat.id,
+        isEditable: false,
+    },
+});
+
+cy.get(catInfoSelectors.loadingContainer()).should("not.exist");
+cy.get(catInfoSelectors.viewContainer()).should("be.visible");
+```
+
+Do not use arbitrary timeouts to wait for the API. Assert on a loading element, a success element, or an error message instead.
+
+### Selectors
+
+Keep reusable selectors in a `selectors/` file instead of scattering CSS selectors through specs. The [`FcCatInfoComponent` selector helper](https://github.com/Forsakringskassan/vue-lib-template/blob/main/src/selectors/guide/FcCatInfoComponent.selectors.ts) uses [`data-test`](https://designsystem.forsakringskassan.se/latest/functions/plugins/testplugin.html) attributes and supports scoping a component instance.
+
+Selectors should describe stable test targets.
+
+### Accessibility and HTML validation
+
+The Cypress configuration includes accessibility and HTML validation plugins. Treat their failures as product issues: fix the component markup or semantics rather than weakening the test by default.
+
+Read the [FKDS test tools guide](https://forsakringskassan.github.io/designsystem/latest/gettingstarted/contribute-to-fkds/testverktyg.html) for the wider testing conventions used by the design system.
+
+## Linting and formatting
+
+Linting ensures a consistent coding style across the project, catches common bugs early, and reduces noise in git diffs by enforcing a uniform format. Run `npm run lint` regularly during development and always before opening a pull request. It combines:
+
+- Prettier for consistent formatting.
+- ESLint for JavaScript, TypeScript, Vue, Vitest, and Cypress rules.
+- Stylelint for CSS and SCSS.
+- HTML Validate for HTML, Vue templates, and Markdown examples.
+
+Use `npm run lint:fix` for mechanical fixes, then inspect the diff and run the checks again. Do not disable a rule merely to make a test or example pass; understand why the rule exists first.

package/files/src/{FcCatInfoComponent.cy.ts → components/guide/FcCatInfo/FcCatInfoComponent.cy.ts}

@@ -1,7 +1,7 @@
 import { FLoaderSelectors } from "@fkui/vue/selectors";
+import { FcCatInfoComponentSelectors } from "../../../selectors/guide/FcCatInfoComponent.selectors";
 import FcCatInfoComponent from "./FcCatInfoComponent.vue";
 import { cats } from "./cat-data";
-import { FcCatInfoComponentSelectors } from "./selectors";
 
 describe("FcCatInfoComponent", () => {
     const testCat = cats[0];

package/files/src/{FcCatInfoComponent.vue → components/guide/FcCatInfo/FcCatInfoComponent.vue}

@@ -3,8 +3,8 @@ import { ref, watch } from "vue";
 import { FCard, FLoader } from "@fkui/vue";
 import CatInfoEdit from "./CatInfoEdit.vue";
 import CatInfoShow from "./CatInfoShow.vue";
-import { useCatInfo } from "./cat-info-logic";
-import { type Cat } from "./cat-types";
+import { useCatInfo } from "./cat-info-logic.js";
+import { type Cat } from "./cat-types.js";
 
 interface Props {
     /**

package/files/src/{FcCatInfoComponentLiveExample.vue → components/guide/FcCatInfo/examples/FcCatInfoComponentLiveExample.vue}

@@ -2,8 +2,8 @@
 import { defineComponent } from "vue";
 import { FCheckboxField, FSelectField } from "@fkui/vue";
 import { LiveExample } from "@forsakringskassan/docs-live-example";
-import FcCatInfoComponent from "./FcCatInfoComponent.vue";
-import { getCatIds } from "./cat-data";
+import FcCatInfoComponent from "../FcCatInfoComponent.vue";
+import { getCatIds } from "../cat-data.js";
 
 export default defineComponent({
     name: "FcCatInfoComponentLiveExample",
@@ -23,7 +23,9 @@ export default defineComponent({
             return this.isEditable ? " is-editable" : "";
         },
         template(): string {
-            return /* HTML */ ` <fc-cat-info-component cat-id="${this.selectedCatId}" ${this.editableAttr} /> `;
+            return /* HTML */ `
+                <fc-cat-info-component cat-id="${this.selectedCatId}" ${this.editableAttr} />
+            `;
         },
     },
 });

package/files/src/components/guide/FcCatInfo/index.ts

@@ -0,0 +1 @@
+export { default as FcCatInfoComponent } from "./FcCatInfoComponent.vue";

package/files/src/components/guide/README.md

@@ -0,0 +1,7 @@
+# Component guide
+
+This directory contains an example component, `FcCatInfoComponent`, that demonstrates the setup and conventions used by this template.
+It includes the component, selectors, tests, mock data, related support files, and belonging documentation in `docs/guide`.
+
+This guide will stay in sync when you update to later versions of your template,
+with intention to serve as a working reference while building your own components.

package/files/src/components/guide/index.ts

@@ -0,0 +1 @@
+export { FcCatInfoComponent } from "./FcCatInfo";

package/files/src/components/index.ts

@@ -0,0 +1 @@
+export * from "./guide";

package/files/src/index.ts

@@ -1,3 +1,3 @@
 import "./style.scss";
 
-export { default as FcCatInfoComponent } from "./FcCatInfoComponent.vue";
+export * from "./components";

package/files/src/{cat-api-mock.spec.ts → mocks/guide/cat-api-mock.spec.ts}

@@ -1,14 +1,12 @@
 import { matchRequest } from "@forsakringskassan/apimock-express/browser";
 import { describe, expect, it } from "vitest";
-import mocks from "./mocks.mjs";
+import catApiMock from "./cat-api.mock.mts";
 
 describe("Cat API Mock Reproduction", () => {
     it("should return 200 for a valid cat id /api/cat?id=whiskers-001", async () => {
         expect.assertions(2);
-        const req = new Request(
-            "http://localhost:8080/api/cat?id=whiskers-001",
-        );
-        const response = await matchRequest(mocks, req);
+        const req = new Request("http://localhost:8080/cat?id=whiskers-001");
+        const response = await matchRequest([catApiMock], req);
         expect(response.status).toBe(200);
 
         const data = await response.json();
@@ -17,8 +15,8 @@ describe("Cat API Mock Reproduction", () => {
 
     it("should return 404 for an invalid cat id /api/cat?id=unknown", async () => {
         expect.assertions(2);
-        const req = new Request("http://localhost:8080/api/cat?id=unknown");
-        const response = await matchRequest(mocks, req);
+        const req = new Request("http://localhost:8080/cat?id=unknown");
+        const response = await matchRequest([catApiMock], req);
         expect(response.status).toBe(404);
 
         const data = await response.json();

package/files/src/{cat-api.mock.mts → mocks/guide/cat-api.mock.mts}

@@ -1,6 +1,6 @@
 import { defineMock } from "@forsakringskassan/apimock-express/helpers";
-import { cats } from "./cat-data.ts";
-import type { Cat } from "./cat-types.ts";
+import { cats } from "../../components/guide/FcCatInfo/cat-data.ts";
+import type { Cat } from "../../components/guide/FcCatInfo/cat-types.ts";
 
 export default defineMock<Cat | { error: string }>({
     meta: {

package/files/src/mocks/index.mts

@@ -0,0 +1 @@
+export { default } from "./guide/index.mts";

package/files/src/selectors/guide/index.ts

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

package/files/src/selectors/index.ts

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

package/files/tsconfig.lib.json

@@ -3,17 +3,11 @@
 {
     "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/vite.config.mts

@@ -2,7 +2,7 @@
 
 import { defineConfig } from "@forsakringskassan/vite-lib-config/vite";
 import { defineTestConfig } from "@forsakringskassan/vitest-config-jsdom";
-import mocks from "./src/mocks.mts";
+import mocks from "./src/mocks/index.mts";
 
 export default defineConfig({
     test: defineTestConfig(),

package/hooks/install.mjs

@@ -4,6 +4,8 @@
 export default async (context) => {
     const { getParameter, updateJsonFile, getApplicationName, replaceInFile } =
         context;
+    const scopedName = getApplicationName();
+    const unscopedName = getApplicationName({ unscoped: true });
 
     /* write repository url to "package.json" */
     const repoUrl = getParameter("repo-url");
@@ -15,9 +17,15 @@ export default async (context) => {
     });
 
     /* 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);
+    const placeholder = /"@forsakringskassan\/vue-lib-template(?:\/[^"]+)?"/g;
+    await replaceInFile("tsconfig.lib.json", placeholder, scopedName);
+    await replaceInFile("tsconfig.cypress.json", placeholder, scopedName);
+    await replaceInFile("tsconfig.selectors.json", placeholder, scopedName);
+
+    /* correct exported subpath "style.css" */
+    await updateJsonFile("package.json", {
+        exports: {
+            "./style.css": `./dist/esm/${unscopedName}.css`,
+        },
+    });
 };

package/index.js

@@ -7,7 +7,7 @@
 
         const options = {
             ...packageJson.cloneman,
-            fileHash: "36c8f49330d6acb55faacab6e563150ce680f321673ee1d5989144b469ef7839",
+            fileHash: "9c70dce9442c78ff9c4b3e4458611ac69b94281d9a08a09a9168a4d0a8bc55f7",
             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.2.0",
+  "version": "1.2.2",
   "description": "Vue library template based on Cloneman",
   "keywords": [
     "template",
@@ -46,8 +46,8 @@
       "cypress/tsconfig.json",
       "cypress/types/mocha.d.ts",
       "docs/build.mts",
+      "docs/guide/index.md",
       "docs/index.md",
-      "docs/kattinformation/index.md",
       "docs/package.json",
       "docs/src/bundle-mocks.mjs",
       "docs/src/global.d.ts",
@@ -60,27 +60,39 @@
       "etc/selectors.api.md",
       "Jenkinsfile",
       "LICENSE.md",
+      "project-guide/cloneman.md",
+      "project-guide/commits-and-releases.md",
+      "project-guide/development.md",
+      "project-guide/documentation.md",
+      "project-guide/index.md",
+      "project-guide/testing.md",
       "README.md",
       "renovate.json",
-      "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/components/guide/FcCatInfo/cat-api.spec.ts",
+      "src/components/guide/FcCatInfo/cat-api.ts",
+      "src/components/guide/FcCatInfo/cat-data.ts",
+      "src/components/guide/FcCatInfo/cat-info-logic.spec.ts",
+      "src/components/guide/FcCatInfo/cat-info-logic.ts",
+      "src/components/guide/FcCatInfo/cat-types.ts",
+      "src/components/guide/FcCatInfo/CatInfoEdit.vue",
+      "src/components/guide/FcCatInfo/CatInfoShow.vue",
+      "src/components/guide/FcCatInfo/examples/FcCatInfoComponentExample.vue",
+      "src/components/guide/FcCatInfo/examples/FcCatInfoComponentLiveExample.vue",
+      "src/components/guide/FcCatInfo/FcCatInfoComponent.cy.ts",
+      "src/components/guide/FcCatInfo/FcCatInfoComponent.vue",
+      "src/components/guide/FcCatInfo/index.ts",
+      "src/components/guide/index.ts",
+      "src/components/guide/README.md",
+      "src/components/index.ts",
       "src/index.ts",
       "src/local.scss",
       "src/local.ts",
-      "src/mocks.mts",
-      "src/selectors/FcCatInfoComponent.selectors.ts",
+      "src/mocks/guide/cat-api-mock.spec.ts",
+      "src/mocks/guide/cat-api.mock.mts",
+      "src/mocks/guide/index.mts",
+      "src/mocks/index.mts",
+      "src/selectors/guide/FcCatInfoComponent.selectors.ts",
+      "src/selectors/guide/index.ts",
       "src/selectors/index.ts",
       "src/style.scss",
       "src/vite-dev/app.vue",