@abgov/nx-adsp 13.6.0 → 13.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/nx-adsp",
-  "version": "13.6.0",
+  "version": "13.7.0",
   "license": "Apache-2.0",
   "main": "src/index.js",
   "description": "Government of Alberta - Nx plugin for ADSP apps.",

package/src/generators/vue-app/files/AGENTS.md__tmpl__

@@ -31,7 +31,8 @@ executors read options from `project.json` and do not prompt.
 | File | Purpose |
 |------|---------|
 | `src/main.ts` | Entry — registers Pinia, Router, and Keycloak plugin |
-| `src/App.vue` | Shell — nav header with sign-in/out, hero banner, `<RouterView>` |
+| `src/App.vue` | Shell — nav header with sign-in/out, hero banner, `<RouterView>` wrapped in `AppLayout` |
+| `src/components/AppLayout.vue` | Shared content gutter (centered, max-width, token padding). Every view lands inside it — no per-view spacing to add. Width via route meta `layout` |
 | `src/router/index.ts` | Routes — `/protected` guarded with `requiresAuth` meta |
 | `src/views/HomeView.vue` | Public page — calls public and private APIs |
 | `src/views/ProtectedView.vue` | Authenticated page — shows user info from token |
@@ -157,12 +158,17 @@ across every Vue app in this workspace — fix or extend a wrapper once in
 
 ## Adding a view
 
-1. Create `src/views/MyFeatureView.vue` as a `<script setup>` SFC
+1. Create `src/views/MyFeatureView.vue` as a `<script setup>` SFC. **Don't add your
+   own page margins/centering** — every view renders inside `AppLayout`'s gutter, so
+   any top-level tag (`<div>`, `<section>`, …) is already centered and padded.
 2. Add the route to `src/router/index.ts`:
    ```typescript
    { path: '/my-feature', component: () => import('../views/MyFeatureView.vue') }
    // For an authenticated route:
    { path: '/my-feature', component: () => import('../views/MyFeatureView.vue'), meta: { requiresAuth: true } }
+   // For a wider (data table) or narrower (form) view, set the layout width:
+   { path: '/queue', component: () => import('../views/QueueView.vue'), meta: { layout: 'wide' } }
+   { path: '/apply', component: () => import('../views/ApplyView.vue'), meta: { layout: 'form' } }
    ```
 3. Add a nav link to `src/App.vue` if needed
 

package/src/generators/vue-app/files/src/App.vue__tmpl__

@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import { useKeycloak } from '@dsb-norge/vue-keycloak-js';
-import { RouterView } from 'vue-router';
+import { RouterView, useRoute } from 'vue-router';
+import AppLayout from './components/AppLayout.vue';
 
 // Keep the reactive instance — do NOT destructure. useKeycloak() returns a
 // readonly(reactive()); destructuring snapshots each field at setup time, so
@@ -8,6 +10,13 @@ import { RouterView } from 'vue-router';
 // `authenticated` would never flip. Access fields on `kc` to stay reactive.
 const kc = useKeycloak();
 
+// Content width per view, from route meta (default 'page'). Views opt into a
+// different width with `meta: { layout: 'wide' | 'form' }` in the router.
+const route = useRoute();
+const layout = computed(
+  () => (route.meta.layout as 'page' | 'wide' | 'form' | undefined) ?? 'page'
+);
+
 function login() { kc.keycloak?.login(); }
 function logout() { kc.keycloak?.logout({ redirectUri: window.location.origin }); }
 </script>
@@ -29,20 +38,11 @@ function logout() { kc.keycloak?.logout({ redirectUri: window.location.origin })
     </goa-button-group>
   </goa-app-header>
   <goa-hero-banner heading="<%= projectName %>" backgroundurl="/assets/banner.jpg" />
-  <main>
+  <AppLayout :variant="layout">
     <RouterView />
-  </main>
+  </AppLayout>
 </template>
 
 <style>
 body { margin: 0; }
-main {
-  display: grid;
-  grid-template-columns: repeat(6, auto);
-}
-main > section {
-  grid-column: 2 / span 2;
-  margin-top: 40px;
-  margin-bottom: 40px;
-}
 </style>

package/src/generators/vue-app/files/src/components/AppLayout.vue__tmpl__

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+// Shared page layout. App.vue wraps <RouterView> in this, so EVERY routed view
+// gets the standard content gutter (centered, max-width, token-driven padding)
+// regardless of its own top-level tag — there's no "wrap your view in <section>"
+// convention to remember, and a plain <div> works fine.
+//
+// Width variant is chosen per-view via route meta `layout` (App.vue reads it):
+//   meta: { layout: 'form' }   // single-column forms      → 640px
+//   (default)                  // general content          → 1000px
+//   meta: { layout: 'wide' }   // data-heavy pages / tables → 1200px
+withDefaults(defineProps<{ variant?: 'page' | 'wide' | 'form' }>(), {
+  variant: 'page',
+});
+</script>
+
+<template>
+  <main id="main-content">
+    <div :class="`${variant}-content`">
+      <slot />
+    </div>
+  </main>
+</template>
+
+<style scoped>
+.page-content,
+.wide-content,
+.form-content {
+  margin-inline: auto;
+  box-sizing: border-box;
+  /* Design-token gutter; fallbacks apply only if tokens aren't loaded. */
+  padding: var(--goa-space-xl, 2.5rem) var(--goa-space-l, 1.5rem);
+}
+
+.form-content { max-width: 640px; }
+.page-content { max-width: 1000px; }
+.wide-content { max-width: 1200px; }
+
+@media (max-width: 623.98px) {
+  .page-content,
+  .wide-content,
+  .form-content {
+    padding: var(--goa-space-m, 1rem);
+  }
+}
+</style>

package/src/generators/vue-app/vue-app.spec.ts

@@ -72,6 +72,24 @@ describe('Vue App Generator', () => {
     expect(agents).not.toContain('ui-components.alberta.ca');
   }, 30000);
 
+  it('wraps views in a shared AppLayout gutter (not a bare tag selector)', async () => {
+    await generator(host, options);
+
+    // Shared layout component provides the content gutter for every view.
+    expect(host.exists('apps/test/src/components/AppLayout.vue')).toBeTruthy();
+    const layout = host.read('apps/test/src/components/AppLayout.vue').toString();
+    // Three named width variants, token-driven padding.
+    expect(layout).toContain('form-content');
+    expect(layout).toContain('wide-content');
+    expect(layout).toContain('--goa-space');
+
+    // App.vue uses AppLayout and no longer relies on the `main > section` gutter
+    // (which silently failed when a view's top-level tag wasn't <section>).
+    const app = host.read('apps/test/src/App.vue').toString();
+    expect(app).toContain('AppLayout');
+    expect(app).not.toContain('main > section');
+  });
+
   it('provisions the shared GoA wrapper library and points the app at it', async () => {
     await generator(host, options);
 

package/src/generators/vue-components/files/src/lib/GoabModal.vue__tmpl__

@@ -25,6 +25,7 @@ function onClose() {
 <template>
   <goa-modal :open="open" @_close="onClose">
     <slot />
+    <!-- `slot="actions"` is goa-modal's native web-component slot, not the Vue 2 slot syntax. The vue/no-deprecated-slot-attribute rule is turned off for this lib (see .eslintrc.json). -->
     <div v-if="slots.actions" slot="actions">
       <slot name="actions" />
     </div>

package/src/generators/vue-components/files/src/vue-components.spec.ts__tmpl__

@@ -0,0 +1,21 @@
+import { describe, it, expect } from 'vitest';
+import * as lib from './index';
+
+// Smoke test: the barrel resolves and every wrapper SFC compiles under the test
+// runner. It also gives the library a test target with real content, so
+// `nx test vue-components` doesn't fail on "no test files found".
+describe('vue-components', () => {
+  it('exports every GoA wrapper', () => {
+    for (const name of [
+      'GoabInput',
+      'GoabTextarea',
+      'GoabDropdown',
+      'GoabCheckbox',
+      'GoabRadioGroup',
+      'GoabButton',
+      'GoabModal',
+    ]) {
+      expect(lib[name as keyof typeof lib]).toBeTruthy();
+    }
+  });
+});

package/src/generators/vue-components/vue-components.d.ts

@@ -1,4 +1,5 @@
 import { Tree } from '@nx/devkit';
+export declare function ensurePackageExports(host: Tree, libRoot: string): void;
 export declare const LIB_NAME = "vue-components";
 export declare function vueComponentsImportPath(host: Tree): string;
 export default function (host: Tree): Promise<void>;

package/src/generators/vue-components/vue-components.js

@@ -1,11 +1,61 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LIB_NAME = void 0;
+exports.ensurePackageExports = ensurePackageExports;
 exports.vueComponentsImportPath = vueComponentsImportPath;
 exports.default = default_1;
 const tslib_1 = require("tslib");
 const devkit_1 = require("@nx/devkit");
 const path = require("path");
+// Backfills package.json module-resolution fields for the library. In a TS-solution
+// workspace @nx/vue's library resolves via package.json `exports`, but its
+// programmatic default (useProjectJson skips writing them here) leaves them off, so
+// the import path fails to resolve and the build breaks. Point them at the source
+// entry (the lib is non-buildable — consumers compile it). A no-op in legacy
+// path-alias workspaces (no lib package.json — resolution is via tsconfig paths),
+// and idempotent (never clobbers fields @nx/vue did write).
+function ensurePackageExports(host, libRoot) {
+    const pkgPath = `${libRoot}/package.json`;
+    if (!host.exists(pkgPath))
+        return;
+    const SRC = './src/index.ts';
+    (0, devkit_1.updateJson)(host, pkgPath, (pkg) => {
+        var _a, _b, _c, _d;
+        (_a = pkg.main) !== null && _a !== void 0 ? _a : (pkg.main = SRC);
+        (_b = pkg.module) !== null && _b !== void 0 ? _b : (pkg.module = SRC);
+        (_c = pkg.types) !== null && _c !== void 0 ? _c : (pkg.types = SRC);
+        (_d = pkg.exports) !== null && _d !== void 0 ? _d : (pkg.exports = {
+            './package.json': './package.json',
+            '.': { types: SRC, import: SRC, default: SRC },
+        });
+        return pkg;
+    });
+}
+// Turns off vue/no-deprecated-slot-attribute for the lib. GoabModal projects into
+// goa-modal's native web-component slot via `slot="actions"` — legitimate custom-
+// element usage, not the deprecated Vue 2 component-slot syntax the rule targets.
+// The whole lib wraps web components, so it's scoped to the lib (consuming apps,
+// which use `<template #actions>`, are unaffected).
+function disableSlotAttributeRule(host, libRoot) {
+    const eslintrc = `${libRoot}/.eslintrc.json`;
+    if (!host.exists(eslintrc)) {
+        console.warn(`\n⚠  ${eslintrc} not found — could not disable vue/no-deprecated-slot-attribute.\n` +
+            `   GoabModal uses goa-modal's native \`slot\` attribute; if lint flags it, turn\n` +
+            `   that rule off for this library.\n`);
+        return;
+    }
+    (0, devkit_1.updateJson)(host, eslintrc, (json) => {
+        var _a, _b;
+        const overrides = ((_a = json.overrides) !== null && _a !== void 0 ? _a : (json.overrides = []));
+        let vueOverride = overrides.find((o) => { var _a; return (_a = o.files) === null || _a === void 0 ? void 0 : _a.some((f) => f.includes('vue')); });
+        if (!vueOverride) {
+            vueOverride = { files: ['*.vue'], rules: {} };
+            overrides.push(vueOverride);
+        }
+        ((_b = vueOverride.rules) !== null && _b !== void 0 ? _b : (vueOverride.rules = {}))['vue/no-deprecated-slot-attribute'] = 'off';
+        return json;
+    });
+}
 exports.LIB_NAME = 'vue-components';
 // Import specifier for the shared wrapper lib, derived from the workspace npm
 // scope so it mirrors the eventual official `@abgov/vue-components` (same tail —
@@ -54,6 +104,8 @@ function default_1(host) {
                 importPath: vueComponentsImportPath(host),
                 skipFormat: true,
             });
+            disableSlotAttributeRule(host, libRoot);
+            ensurePackageExports(host, libRoot);
         }
         (0, devkit_1.generateFiles)(host, path.join(__dirname, 'files'), libRoot, { tmpl: '' });
     });

package/src/generators/vue-components/vue-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"vue-components.js","sourceRoot":"","sources":["../../../../../../packages/nx-adsp/src/generators/vue-components/vue-components.ts"],"names":[],"mappings":";;;AAcA,0DASC;AAMD,4BAgCC;;AA7DD,uCAKoB;AACpB,6BAA6B;AAEhB,QAAA,QAAQ,GAAG,gBAAgB,CAAC;AAEzC,8EAA8E;AAC9E,iFAAiF;AACjF,+EAA+E;AAC/E,gDAAgD;AAChD,SAAgB,uBAAuB,CAAC,IAAU;;IAChD,IAAI,IAAI,GAAG,WAAW,CAAC;IACvB,IAAI,CAAC;QACH,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,MAAA,MAAA,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,0CAAE,QAAQ,EAAE,mCAAI,IAAI,CAAC,CAAC,IAAI,IAAI,IAAI,CAAC;IAChF,CAAC;IAAC,WAAM,CAAC;QACP,mBAAmB;IACrB,CAAC;IACD,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC;IACrE,OAAO,GAAG,KAAK,IAAI,gBAAQ,EAAE,CAAC;AAChC,CAAC;AAED,kFAAkF;AAClF,kFAAkF;AAClF,4EAA4E;AAC5E,oFAAoF;AACpF,mBAA+B,IAAU;;QACvC,MAAM,OAAO,GAAG,GAAG,IAAA,2BAAkB,EAAC,IAAI,CAAC,CAAC,OAAO,IAAI,gBAAQ,EAAE,CAAC;QAElE,IAAI,MAAM,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC;YACH,IAAA,iCAAwB,EAAC,IAAI,EAAE,gBAAQ,CAAC,CAAC;QAC3C,CAAC;QAAC,WAAM,CAAC;YACP,MAAM,GAAG,KAAK,CAAC;QACjB,CAAC;QAED,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,MAAM,EAAE,gBAAgB,EAAE,GAAG,MAAM,qCAAO,SAAS,GAAE,KAAK,CAAC,GAAG,EAAE;gBAC9D,MAAM,IAAI,KAAK,CACb,0GAA0G,CAC3G,CAAC;YACJ,CAAC,CAAC,CAAC;YACH,MAAM,gBAAgB,CAAC,IAAI,EAAE;gBAC3B,SAAS,EAAE,OAAO;gBAClB,IAAI,EAAE,gBAAQ;gBACd,MAAM,EAAE,QAAQ;gBAChB,cAAc,EAAE,QAAQ;gBACxB,0EAA0E;gBAC1E,2EAA2E;gBAC3E,8DAA8D;gBAC9D,SAAS,EAAE,KAAK;gBAChB,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,uBAAuB,CAAC,IAAI,CAAC;gBACzC,UAAU,EAAE,IAAI;aACjB,CAAC,CAAC;QACL,CAAC;QAED,IAAA,sBAAa,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;IAC5E,CAAC;CAAA"}
+{"version":3,"file":"vue-components.js","sourceRoot":"","sources":["../../../../../../packages/nx-adsp/src/generators/vue-components/vue-components.ts"],"names":[],"mappings":"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"}

package/src/generators/vue-components/vue-components.spec.ts

@@ -1,6 +1,6 @@
 import { readProjectConfiguration, Tree } from '@nx/devkit';
 import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
-import generator, { vueComponentsImportPath } from './vue-components';
+import generator, { ensurePackageExports, vueComponentsImportPath } from './vue-components';
 
 jest.mock('@nx/devkit', () => ({
   ...jest.requireActual('@nx/devkit'),
@@ -31,6 +31,15 @@ describe('Vue Components Generator', () => {
     expect(index).toContain("export { default as GoabInput }");
     expect(index).toContain('@abgov/vue-components'); // interim marker
 
+    // Ships a spec so the vitest test target isn't empty (vitest exits non-zero
+    // on "no test files found").
+    expect(host.exists('libs/vue-components/src/vue-components.spec.ts')).toBeTruthy();
+
+    // GoabModal uses goa-modal's native `slot` attribute (web component, not the
+    // deprecated Vue 2 slot syntax) — the rule is turned off for this lib.
+    const eslintrc = host.read('libs/vue-components/.eslintrc.json').toString();
+    expect(eslintrc).toContain('"vue/no-deprecated-slot-attribute": "off"');
+
     // Ships agent direction for maintaining the (interim) lib, incl. a recipe
     // for wrapping additional components.
     expect(host.exists('libs/vue-components/AGENTS.md')).toBeTruthy();
@@ -50,4 +59,32 @@ describe('Vue Components Generator', () => {
   it('derives the import path from the workspace scope', () => {
     expect(vueComponentsImportPath(host)).toMatch(/\/vue-components$/);
   });
+
+  describe('ensurePackageExports (TS-solution resolution fix)', () => {
+    it('backfills exports/main/types when a lib package.json exists', () => {
+      host.write('libs/vue-components/package.json', JSON.stringify({ name: '@proj/vue-components' }));
+      ensurePackageExports(host, 'libs/vue-components');
+
+      const pkg = JSON.parse(host.read('libs/vue-components/package.json').toString());
+      expect(pkg.main).toBe('./src/index.ts');
+      expect(pkg.types).toBe('./src/index.ts');
+      expect(pkg.exports['.'].import).toBe('./src/index.ts');
+    });
+
+    it('does not clobber exports @nx/vue already wrote', () => {
+      host.write(
+        'libs/vue-components/package.json',
+        JSON.stringify({ name: '@proj/vue-components', exports: { '.': './dist/index.js' } })
+      );
+      ensurePackageExports(host, 'libs/vue-components');
+
+      const pkg = JSON.parse(host.read('libs/vue-components/package.json').toString());
+      expect(pkg.exports['.']).toBe('./dist/index.js');
+    });
+
+    it('is a no-op for a legacy lib with no package.json', () => {
+      ensurePackageExports(host, 'libs/vue-components');
+      expect(host.exists('libs/vue-components/package.json')).toBeFalsy();
+    });
+  });
 });