refactor: use Junie coding agent to refactor vue3 app (#253)

* feat: introduce API caching, error handling, and new views

- Add VueUse `createFetch` with in-memory TTL caching and retries for API calls.
- Replace direct REST calls with shared API utilities across stores.
- Introduce Error and 404 views with Carbon styling and a global error handler.
- Enhance views with inline error notifications and loading skeletons.
- Update docs with Feature-Sliced Design suggestions for scalable architecture.

Signed-off-by: David Nixon <[email protected]>

* fix: lock file

Signed-off-by: David Nixon <[email protected]>

* refactor: junie migrate from JavaScript to TypeScript

Signed-off-by: David Nixon <[email protected]>

* chore: rebase

Signed-off-by: David Nixon <[email protected]>

* chore: rebase

Signed-off-by: David Nixon <[email protected]>

* refactor: remove unused icon components and migrate hobby implementation to lazy-loaded component

Signed-off-by: David Nixon <[email protected]>

* refactor: the Junie agent-  improve type safety and modularity across app

Signed-off-by: David Nixon <[email protected]>

* refactor: agent Junie - modularize shared components and composables for improved reusability

Signed-off-by: David Nixon <[email protected]>

* refactor: agent Junie - modularize rarity handling with RarityStars and StepIcon components

Signed-off-by: David Nixon <[email protected]>

* refactor: update e2e

Signed-off-by: David Nixon <[email protected]>

* refactor: rebase

Signed-off-by: David Nixon <[email protected]>

---------

Signed-off-by: David Nixon <[email protected]>

Author: davidnixon

apps/hello-carbon-vue3/README.md

@@ -15,8 +15,7 @@ checkout [Hello carbon 11 web components with Vue 3](https://github.com/davidnix
 - [Pinia](https://pinia.vuejs.org/) — this replaces Vuex store
 - [i18next](https://www.i18next.com/) — this repo demonstrates how to include translations using i18next. All UI
   elements are translated and most content is translated.
-- [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) — REST calls via fetch
-- [@vueuse](https://vueuse.org/) — Lazy image loading, manage local storage, and many other useful utilities
+- [@vueuse](https://vueuse.org/) — Lazy image loading, manage local storage, useFetch wrapper for API with caching, and many other useful utilities
 - [cypress](https://www.cypress.io/) — Implement e2e tests with cypress to help screen PRs
 
 ## Carbon styles
@@ -27,6 +26,11 @@ See [\_carbon-90.scss](./src/styles/_carbon-90.scss) for instructions on creatin
 
 ## Pages & Components
 
+New in this iteration:
+- API calls use a shared VueUse createFetch instance with in-memory TTL caching and simple retries (see src/shared/api/http.js). Pages now show loading skeletons and Carbon inline error notifications when API calls fail.
+- Added dedicated Error and 404 pages styled in Carbon (routes: /error and catch-all).
+- Suggestions for Feature-Sliced Design structure are documented in docs/feature-sliced.md.
+
 [This repo demo site](https://ibm.github.io/hello-carbon-vue3/hello-carbon-vue3/)
 
 - Header with Side nav ![header](../docs/header-bar.jpg)

apps/hello-carbon-vue3/cypress.config.js

@@ -0,0 +1,15 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    specPattern: "cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}",
+    baseUrl: "http://localhost:5173",
+  },
+  component: {
+    specPattern: "src/**/__tests__/*.{cy,spec}.{js,ts,jsx,tsx}",
+    devServer: {
+      framework: "vue",
+      bundler: "vite",
+    },
+  },
+});

apps/hello-carbon-vue3/cypress.config.ts

@@ -20,7 +20,8 @@ describe("smoke test", () => {
     // villagers
     cy.get("#side-nav").find("li").eq(4).click();
     cy.location("pathname").should("eq", "/villagers");
-    cy.get("[data-cy=\"hobby\"]").should("have.length", 6);
+    // only 1 hobby section is loaded at a time
+    cy.get("[data-cy=\"hobby\"]").should("have.length", 1);
 
     // home
     cy.get("#side-nav").find("li").first().click();

apps/hello-carbon-vue3/cypress/e2e/smoke.cy.js renamed to apps/hello-carbon-vue3/cypress/e2e/smoke.cy.ts

@@ -1,5 +1,6 @@
+/// <reference types="cypress" />
 // ***********************************************
-// This example commands.js shows you how to
+// This example commands.ts shows you how to
 // create various custom commands and overwrite
 // existing commands.
 //
@@ -23,3 +24,16 @@
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }
+
+export {};

apps/hello-carbon-vue3/cypress/support/commands.js renamed to apps/hello-carbon-vue3/cypress/support/commands.ts

@@ -1,5 +1,5 @@
 // ***********************************************************
-// This example support/e2e.js is processed and
+// This example support/index.js is processed and
 // loaded automatically before your test files.
 //
 // This is a great place to put global configuration and
@@ -13,7 +13,7 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
-// Import commands.js using ES2015 syntax:
+// Import commands.ts using ES2015 syntax:
 import "./commands";
 
 // Alternatively you can use CommonJS syntax:

apps/hello-carbon-vue3/cypress/support/e2e.js renamed to apps/hello-carbon-vue3/cypress/support/e2e.ts

@@ -0,0 +1,9 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["./e2e/**/*", "./support/**/*"],
+  "exclude": ["./support/component.*"],
+  "compilerOptions": {
+    "isolatedModules": false,
+    "types": ["cypress"]
+  }
+}

apps/hello-carbon-vue3/cypress/tsconfig.json

@@ -0,0 +1,12 @@
+# Components review and split suggestions
+
+- FishView.vue: quite large, but most templating delegates to FishRow. Consider moving pagination and sorting logic into a feature module (features/fish/table) with a composable (useFishTable) and smaller presentational subcomponents.
+- VillagersView.vue: contains hobby-specific icon logic and content-switcher wiring. Consider extracting:
+  - entities/villager/ui/VillagerHobbyList.vue (renders the switcher and content)
+  - features/villagers/special-icons (encapsulate animated icons rules)
+  - a composable useVillagerGroups to compute groups and selected tab.
+- TheHeader.vue: encapsulates multiple panels and static data. Consider:
+  - widgets/header/model/useHeaderState.ts for language/login state
+  - widgets/header/ui/HeaderNav.vue, HeaderPanels.vue for structure.
+- SongCard.vue, BugCard.vue, FishRow.vue, VillagerCard.vue are reasonably focused; keep as entities/* UI.
+- BlurImage.vue is shared UI primitive; move to shared/ui/BlurImage.vue.

apps/hello-carbon-vue3/docs/components-review.md

@@ -0,0 +1,36 @@
+# Feature-Sliced Design (FSD) suggestions
+
+This app is small, but adopting a few FSD ideas will keep it scalable.
+
+## Current structure (selected)
+- src/components/* — presentational widgets and feature bits are mixed
+- src/views/* — route pages
+- src/stores/* — Pinia stores
+- src/shared/api/http.js — API helper
+- src/composables/* — breakpoints, etc.
+
+## Suggested structure
+
+- src/app/
+  - index (main.js), App.vue, router, providers, global styles
+- src/pages/
+  - Home, Fish, Bugs, Villagers, Error, NotFound (page-level components only)
+- src/widgets/
+  - Header, ThemeSwitcher, MobileTablePagination (can compose features and entities)
+- src/features/
+  - fish/hide-fish (buttons and logic to hide fish)
+  - villagers/switcher (content switcher controls)
+- src/entities/
+  - fish, bug, villager, song (cards, rows, basic UI bound to an entity)
+- src/shared/
+  - api (createFetch, fetchJsonCached)
+  - ui (primitive shared UI, e.g., BlurImage)
+  - lib (composables, utils: useBreakpoints)
+  - config (constants, env)
+
+Migration can be incremental: introduce folders and move the most entangled pieces as you touch them. Keep import aliases (@/app, @/pages, etc.) in vite.config.
+
+## Additional notes
+- Keep stores under entities, e.g., src/entities/fish/model (Pinia store)
+- Page components should orchestrate, not host complex logic: move logic into features/entities.
+- Reusability ladder: shared < entities < features < widgets < pages < app.