frontend-harness 0.6.3 → 0.6.5

package/templates/scaffold/vue/src/storage/index.ts

@@ -0,0 +1,31 @@
+type StorageKind = "local" | "session";
+
+function resolveStorage(kind: StorageKind): Storage {
+  return kind === "session" ? sessionStorage : localStorage;
+}
+
+export function createStorage(kind: StorageKind = "local") {
+  const storage = resolveStorage(kind);
+
+  return {
+    get<T>(key: string): T | null {
+      const raw = storage.getItem(key);
+      if (raw === null) return null;
+      try {
+        return JSON.parse(raw) as T;
+      } catch (error) {
+        const message = error instanceof Error ? error.message : String(error);
+        throw new Error(`Storage value for ${key} is not valid JSON: ${message}`);
+      }
+    },
+    set<T>(key: string, value: T): void {
+      storage.setItem(key, JSON.stringify(value));
+    },
+    remove(key: string): void {
+      storage.removeItem(key);
+    },
+    clear(): void {
+      storage.clear();
+    }
+  };
+}

package/templates/scaffold/vue/src/styles/main.scss

@@ -0,0 +1,21 @@
+@use "./tokens" as *;
+
+:root {
+  color-scheme: light;
+  font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* { box-sizing: border-box; }
+
+html, body, #app {
+  min-height: 100%;
+  margin: 0;
+}
+
+body { background: $color-surface-muted; }

package/templates/scaffold/vue/src/styles/tokens.scss

@@ -0,0 +1,20 @@
+$color-surface: #ffffff;
+$color-surface-muted: #f6f8fb;
+$color-border: #d7deea;
+$color-text: #102030;
+$color-text-muted: #5f6b7a;
+$color-primary: #2563eb;
+$color-success: #16a34a;
+$color-warning: #d97706;
+$color-danger: #dc2626;
+
+$space-1: 4px;
+$space-2: 8px;
+$space-3: 12px;
+$space-4: 16px;
+$space-5: 20px;
+$space-6: 24px;
+
+$radius-control: 6px;
+$radius-card: 8px;
+$table-min-width: 960px;

package/templates/scaffold/vue/src/utils/index.ts

@@ -0,0 +1,11 @@
+export function isNil(value: unknown): value is null | undefined {
+  return value === null || value === undefined;
+}
+
+export function isBlank(value: unknown): value is string {
+  return typeof value === "string" && value.trim().length === 0;
+}
+
+export function pickDefined<T extends Record<string, unknown>>(value: T): Partial<T> {
+  return Object.fromEntries(Object.entries(value).filter(([, item]) => item !== undefined)) as Partial<T>;
+}

package/templates/scaffold/vue/tests/e2e/app-desktop.spec.ts

@@ -0,0 +1,10 @@
+import { expect, test } from "@playwright/test";
+
+test("desktop smoke renders the scaffold shell", async ({ page }) => {
+  await page.goto("/");
+
+  await expect(page.getByRole("heading", { level: 1, name: "Engineering base is ready" })).toBeVisible();
+  await expect(page.getByRole("heading", { level: 2, name: "utils" })).toBeVisible();
+  await expect(page.getByRole("heading", { level: 2, name: "storage" })).toBeVisible();
+  await expect(page.getByRole("heading", { level: 2, name: "service" })).toBeVisible();
+});

package/templates/scaffold/vue/tests/e2e/app-mobile.spec.ts

@@ -0,0 +1,9 @@
+import { expect, test } from "@playwright/test";
+
+test("mobile smoke keeps scaffold content in the viewport", async ({ page }) => {
+  await page.goto("/");
+
+  await expect(page.getByRole("heading", { level: 1, name: "Engineering base is ready" })).toBeVisible();
+  const documentOverflow = await page.evaluate(() => document.documentElement.scrollWidth > document.documentElement.clientWidth);
+  expect(documentOverflow).toBe(false);
+});

package/templates/scaffold/vue/tests/integration/app.test.ts

@@ -0,0 +1,15 @@
+import { screen } from "@testing-library/vue";
+import { describe, expect, it } from "vitest";
+import App from "../../src/App.vue";
+import { renderPage } from "../render";
+
+describe("scaffold app", () => {
+  it("renders the engineering baseline sections", () => {
+    renderPage(App);
+
+    expect(screen.getByRole("heading", { level: 1, name: "Engineering base is ready" })).toBeInTheDocument();
+    expect(screen.getByRole("heading", { level: 2, name: "utils" })).toBeInTheDocument();
+    expect(screen.getByRole("heading", { level: 2, name: "storage" })).toBeInTheDocument();
+    expect(screen.getByRole("heading", { level: 2, name: "service" })).toBeInTheDocument();
+  });
+});

package/templates/scaffold/vue/tests/render.ts

@@ -0,0 +1,6 @@
+import { render } from "@testing-library/vue";
+import type { Component } from "vue";
+
+export function renderPage(component: Component) {
+  return render(component);
+}

package/templates/scaffold/vue/tests/setup.ts

@@ -0,0 +1,7 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup } from "@testing-library/vue";
+import { afterEach } from "vitest";
+
+afterEach(() => {
+  cleanup();
+});

package/templates/scaffold/vue/vite.config.mjs

@@ -0,0 +1,33 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import AutoImport from "unplugin-auto-import/vite";
+import Components from "unplugin-vue-components/vite";
+import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    AutoImport({
+      imports: ["vue"],
+      dts: "src/types/auto-imports.d.ts",
+      resolvers: [ElementPlusResolver()]
+    }),
+    Components({
+      dts: "src/types/components.d.ts",
+      resolvers: [ElementPlusResolver()]
+    })
+  ],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "src")
+    }
+  },
+  server: {
+    host: true,
+    hmr: { overlay: false }
+  }
+});

package/templates/scaffold/vue/vitest.config.mjs

@@ -0,0 +1,34 @@
+import { defineConfig } from "vitest/config";
+import vue from "@vitejs/plugin-vue";
+import AutoImport from "unplugin-auto-import/vite";
+import Components from "unplugin-vue-components/vite";
+import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    AutoImport({
+      imports: ["vue"],
+      dts: false,
+      resolvers: [ElementPlusResolver()]
+    }),
+    Components({
+      dts: false,
+      resolvers: [ElementPlusResolver()]
+    })
+  ],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "src")
+    }
+  },
+  test: {
+    environment: "jsdom",
+    include: ["tests/**/*.test.ts"],
+    setupFiles: ["tests/setup.ts"]
+  }
+});