groundwork-method 0.0.1 → 0.11.0

package/src/generators/nextjs-app/files/eslint.config.mjs

@@ -0,0 +1,120 @@
+import js from "@eslint/js";
+import { fixupPluginRules } from "@eslint/compat";
+import nextPlugin from "@next/eslint-plugin-next";
+import reactPlugin from "eslint-plugin-react";
+import hooksPlugin from "eslint-plugin-react-hooks";
+import tseslint from "typescript-eslint";
+import globals from "globals";
+
+export default tseslint.config(
+  {
+    ignores: [
+      ".next/",
+      "node_modules/",
+      "public/",
+      "dist/",
+      "coverage/",
+      "components/ui/"
+    ]
+  },
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    plugins: {
+      react: reactPlugin,
+      "react-hooks": hooksPlugin,
+      "@next/next": fixupPluginRules(nextPlugin),
+    },
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.es2024,
+      },
+    },
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+    rules: {
+      ...reactPlugin.configs.recommended.rules,
+      ...reactPlugin.configs["jsx-runtime"].rules,
+      ...hooksPlugin.configs.recommended.rules,
+      ...nextPlugin.configs.recommended.rules,
+      ...nextPlugin.configs["core-web-vitals"].rules,
+      
+      "no-console": "warn",
+      "@typescript-eslint/no-explicit-any": "warn",
+      "@typescript-eslint/switch-exhaustiveness-check": "warn",
+      "@typescript-eslint/no-confusing-void-expression": "off",
+      "@typescript-eslint/no-floating-promises": "off",
+      "@typescript-eslint/no-misused-promises": "off",
+      "@typescript-eslint/require-await": "off",
+      "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }],
+      "@typescript-eslint/restrict-template-expressions": "warn",
+      "prefer-const": "warn",
+      "no-case-declarations": "warn",
+      "no-useless-escape": "warn",
+      "@typescript-eslint/ban-ts-comment": "warn",
+      "react-hooks/exhaustive-deps": "warn",
+      "react-hooks/rules-of-hooks": "warn",
+      "react/prop-types": "off",
+
+      // Token-conformance gate (visual verification loop, Tier 1). Design values
+      // live in the token layer — CSS custom properties in app/globals.css, surfaced
+      // as Tailwind token utilities (bg-primary, text-foreground, px-4). A raw colour
+      // or length literal in a component bypasses the design system and drifts
+      // silently, so it fails lint. globals.css is the token-definition layer and is
+      // not linted here (ESLint does not lint CSS). Catches inline-style hex/px,
+      // raw gradients, and Tailwind arbitrary values (colour, length, shadow, blur,
+      // gradient) — the atmosphere layer (elevation, blur, gradients, surface
+      // treatments) is projected from brand-tokens.json into token utilities, so a
+      // literal recipe in a component is drift. Token utilities and CSS-variable
+      // references pass.
+      "no-restricted-syntax": [
+        "error",
+        {
+          selector: "JSXAttribute[name.name='style'] Literal[value=/#[0-9a-fA-F]{3,8}\\b/]",
+          message: "Raw hex colour in an inline style — use a design token (a Tailwind token utility or a CSS custom property defined in globals.css), not a literal.",
+        },
+        {
+          selector: "JSXAttribute[name.name='style'] Literal[value=/[0-9](px|rem)\\b/]",
+          message: "Raw length literal in an inline style — use a spacing/size token from the design system, not a hardcoded px/rem value.",
+        },
+        {
+          selector: "JSXAttribute[name.name='className'] Literal[value=/\\[#[0-9a-fA-F]/]",
+          message: "Tailwind arbitrary colour value (e.g. bg-[#3b82f6]) — use a semantic token utility (bg-primary, text-foreground) defined in the token layer.",
+        },
+        {
+          selector: "JSXAttribute[name.name='className'] Literal[value=/\\[[0-9.]+(px|rem)\\]/]",
+          message: "Tailwind arbitrary length value (e.g. p-[12px]) — use a spacing-scale utility (p-3, gap-4), not a hardcoded length.",
+        },
+        {
+          selector: "JSXAttribute[name.name='style'] Literal[value=/(radial|linear|conic)-gradient\\(/]",
+          message: "Raw CSS gradient in an inline style — use a gradient/surface token (a utility from the token layer), not a literal recipe. Atmosphere lives in the design system, not the component.",
+        },
+        {
+          selector: "JSXAttribute[name.name='className'] Literal[value=/(shadow|drop-shadow)-\\[/]",
+          message: "Tailwind arbitrary shadow (e.g. shadow-[0_1px_2px]) — use an elevation token utility (shadow-low/mid/high) projected from brand-tokens.json, not a literal stack.",
+        },
+        {
+          selector: "JSXAttribute[name.name='className'] Literal[value=/(backdrop-blur|blur)-\\[/]",
+          message: "Tailwind arbitrary blur (e.g. backdrop-blur-[20px]) — use a blur token utility projected from the design system, not a literal radius.",
+        },
+        {
+          selector: "JSXAttribute[name.name='className'] Literal[value=/\\[(radial|linear|conic)-gradient/]",
+          message: "Tailwind arbitrary gradient — use a gradient/surface token utility from the token layer, not a literal recipe.",
+        },
+      ],
+    },
+  },
+  {
+    files: ["**/*.js", "**/*.mjs", "**/*.cjs"],
+    extends: [tseslint.configs.disableTypeChecked],
+  }
+);

package/src/generators/nextjs-app/files/hooks/use-toast.ts

@@ -0,0 +1,7 @@
+/**
+ * Toast hook.
+ *
+ * Re-exports sonner's `toast` for use in components.
+ * Wrap here so you can swap toast libraries without touching consumers.
+ */
+export { toast } from "sonner";

package/src/generators/nextjs-app/files/instrumentation.ts

@@ -0,0 +1,90 @@
+/**
+ * Next.js instrumentation hook — bootstraps OpenTelemetry for server-side
+ * tracing, metrics, and context propagation.
+ *
+ * Automatically invoked by Next.js when the app starts (server-side only).
+ *
+ * Configuration is driven by standard OTEL_* environment variables so the
+ * same code works for local development (OTLP → Jaeger) and
+ * production (Google Cloud Trace / Monitoring).
+ *
+ * @see https://nextjs.org/docs/app/building-your-application/optimizing/instrumentation
+ */
+
+export async function register() {
+    // Only instrument the Node.js runtime (not Edge)
+    if (process.env.NEXT_RUNTIME === "nodejs") {
+        const { NodeSDK } = await import("@opentelemetry/sdk-node");
+        const { OTLPTraceExporter } = await import(
+            "@opentelemetry/exporter-trace-otlp-http"
+        );
+        const { OTLPMetricExporter } = await import(
+            "@opentelemetry/exporter-metrics-otlp-http"
+        );
+        const { PeriodicExportingMetricReader } = await import(
+            "@opentelemetry/sdk-metrics"
+        );
+        const { getNodeAutoInstrumentations } = await import(
+            "@opentelemetry/auto-instrumentations-node"
+        );
+        const { resourceFromAttributes } = await import("@opentelemetry/resources");
+        const {
+            ATTR_SERVICE_NAME,
+            ATTR_SERVICE_VERSION,
+        } = await import("@opentelemetry/semantic-conventions");
+
+        const serviceName =
+            process.env.OTEL_SERVICE_NAME ?? "<%= fileName %>";
+        const endpoint =
+            process.env.OTEL_EXPORTER_OTLP_ENDPOINT ??
+            "http://localhost:4318";
+
+        const sdk = new NodeSDK({
+            resource: resourceFromAttributes({
+                [ATTR_SERVICE_NAME]: serviceName,
+                [ATTR_SERVICE_VERSION]: "0.1.0",
+            }),
+
+            // ── Traces ──────────────────────────────────────────────────
+            traceExporter: new OTLPTraceExporter({
+                url: `${endpoint}/v1/traces`,
+            }),
+
+            // ── Metrics ─────────────────────────────────────────────────
+            metricReaders: [
+                new PeriodicExportingMetricReader({
+                    exporter: new OTLPMetricExporter({
+                        url: `${endpoint}/v1/metrics`,
+                    }),
+                    exportIntervalMillis: 15_000,
+                }),
+            ],
+
+            // ── Auto-instrumentation ────────────────────────────────────
+            instrumentations: [
+                getNodeAutoInstrumentations({
+                    // Disable fs instrumentation to reduce noise
+                    "@opentelemetry/instrumentation-fs": { enabled: false },
+                }),
+            ],
+        });
+
+        sdk.start();
+
+        // Graceful shutdown
+        process.on("SIGTERM", () => {
+            sdk.shutdown()
+                // eslint-disable-next-line no-console
+                .then(() => console.log("OTel SDK shut down"))
+                .catch((err: unknown) =>
+                    // eslint-disable-next-line no-console
+                    console.error("OTel SDK shutdown error:", err)
+                );
+        });
+
+        // eslint-disable-next-line no-console
+        console.log(
+            `[otel] ${serviceName} v0.1.0 → ${endpoint} (traces + metrics)`
+        );
+    }
+}

package/src/generators/nextjs-app/files/lib/api/fetcher.ts.template

@@ -0,0 +1,130 @@
+/**
+ * Isomorphic API fetcher.
+ *
+ * Works in both server-side and client-side contexts:
+ * - Server (RSC / Route Handlers): calls the backend API directly via API_URL.
+ * - Client (browser): calls through the reverse proxy at /api/proxy/.
+ *
+ * All data-fetching hooks (SWR) should use `customFetch` rather than
+ * raw `fetch` to get consistent error handling and auth injection.
+ */
+
+import type { ZodType } from "zod";
+
+/** Structured error for API failures. */
+export class ApiError extends Error {
+  public readonly status: number;
+  public readonly statusText: string;
+  public readonly detail: string;
+
+  constructor(status: number, statusText: string, detail: string) {
+    super(`[${status}] ${detail}`);
+    this.name = "ApiError";
+    this.status = status;
+    this.statusText = statusText;
+    this.detail = detail;
+  }
+
+  /** User-friendly message for display in toasts / error boundaries. */
+  get userMessage(): string {
+    if (this.status === 401) return "Please sign in to continue.";
+    if (this.status === 403) return "You don't have permission to do that.";
+    if (this.status === 404) return "The requested resource was not found.";
+    if (this.status >= 500) return "Something went wrong. Please try again.";
+    return this.detail || "An unexpected error occurred.";
+  }
+}
+
+/** Thrown when an API response fails schema validation. */
+export class ValidationError extends Error {
+  public readonly issues: unknown;
+
+  constructor(path: string, issues: unknown) {
+    super(`Response from ${path} failed schema validation`);
+    this.name = "ValidationError";
+    this.issues = issues;
+  }
+}
+
+function getBaseUrl(): string {
+  if (typeof window === "undefined") {
+    // Server-side: call the backend directly
+    return process.env.API_URL ?? "http://localhost:4000";
+  }
+  // Client-side: go through the Next.js reverse proxy
+  return "/api/proxy";
+}
+
+/**
+ * Isomorphic fetch wrapper.
+ *
+ * @param path - API path (e.g., `/v1/items` or `/v1/items/123`)
+ * @param init - Standard RequestInit options
+ * @returns The parsed JSON response
+ * @throws {ApiError} When the response has a non-2xx status
+ */
+export async function customFetch<T = unknown>(
+  path: string,
+  init?: RequestInit
+): Promise<T> {
+  const baseUrl = getBaseUrl();
+  const url = `${baseUrl}${path}`;
+
+  const headers: Record<string, string> = {
+    "Content-Type": "application/json",
+    ...(init?.headers as Record<string, string>),
+  };
+
+  const response = await fetch(url, {
+    ...init,
+    headers,
+  });
+
+  if (!response.ok) {
+    let detail = response.statusText;
+    try {
+      const body = await response.json();
+      detail = body.detail || body.message || body.error || detail;
+    } catch {
+      // Response body isn't JSON — use statusText
+    }
+    throw new ApiError(response.status, response.statusText, detail);
+  }
+
+  // Handle 204 No Content
+  if (response.status === 204) {
+    return undefined as T;
+  }
+
+  return response.json() as Promise<T>;
+}
+
+/**
+ * Like `customFetch`, but validates the response body against a Zod schema.
+ * Returns the parsed, typed value. Throws {@link ValidationError} on mismatch
+ * and {@link ApiError} on non-2xx — fail loud, never return unchecked data.
+ *
+ * @param path - API path (e.g. `/v1/items`)
+ * @param schema - Zod schema describing the expected response shape
+ * @param init - Standard RequestInit options
+ */
+export async function validatedFetch<T>(
+  path: string,
+  schema: ZodType<T>,
+  init?: RequestInit
+): Promise<T> {
+  const raw = await customFetch<unknown>(path, init);
+  const result = schema.safeParse(raw);
+  if (!result.success) {
+    throw new ValidationError(path, result.error.issues);
+  }
+  return result.data;
+}
+
+/**
+ * SWR-compatible fetcher.
+ *
+ * Usage: `useSWR('/v1/items', swrFetcher)`
+ */
+export const swrFetcher = <T = unknown>(path: string): Promise<T> =>
+  customFetch<T>(path);

package/src/generators/nextjs-app/files/lib/config.ts

@@ -0,0 +1,21 @@
+/**
+ * Server-only configuration module.
+ *
+ * Centralises runtime configuration, validates required env vars,
+ * and provides a typed Config object to server-side code.
+ *
+ * IMPORTANT: This file must NEVER be imported from Client Components.
+ */
+
+import "server-only";
+
+export const config = {
+  /** URL of the backend API (no trailing slash). */
+  apiUrl: process.env.API_URL ?? "http://localhost:4000",
+
+  /** OpenTelemetry service name. */
+  otelServiceName: process.env.OTEL_SERVICE_NAME ?? "<%= fileName %>",
+
+  /** Whether we're in a sandbox/dev mode without auth. */
+  isSandbox: !process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
+} as const;

package/src/generators/nextjs-app/files/lib/logger.ts

@@ -0,0 +1,29 @@
+import { trace } from "@opentelemetry/api";
+
+type LogFields = Record<string, unknown>;
+
+/**
+ * Structured server-side logger that includes the active span's traceId/spanId
+ * so logs are joinable to traces. Server-only — do not import in client components.
+ */
+function emit(level: "info" | "warn" | "error", message: string, fields?: LogFields) {
+    const span = trace.getActiveSpan();
+    const spanCtx = span?.spanContext();
+    const record = {
+        level,
+        message,
+        timestamp: new Date().toISOString(),
+        ...(spanCtx
+            ? { trace_id: spanCtx.traceId, span_id: spanCtx.spanId }
+            : {}),
+        ...fields,
+    };
+    // eslint-disable-next-line no-console
+    console[level === "error" ? "error" : "log"](JSON.stringify(record));
+}
+
+export const logger = {
+    info: (message: string, fields?: LogFields) => emit("info", message, fields),
+    warn: (message: string, fields?: LogFields) => emit("warn", message, fields),
+    error: (message: string, fields?: LogFields) => emit("error", message, fields),
+};

package/src/generators/nextjs-app/files/lib/schemas/index.ts

@@ -0,0 +1,19 @@
+import { z } from "zod";
+
+/**
+ * Zod schemas barrel.
+ *
+ * Define domain schemas in this directory and re-export them here so
+ * components import from `@/lib/schemas` — never from individual files.
+ *
+ * The example below is a generic health/status payload. Replace it with
+ * your real domain schemas (e.g. `export { userSchema, type User } from './user';`).
+ */
+
+/** Example schema: a generic API status/health envelope. */
+export const statusSchema = z.object({
+  status: z.string(),
+  timestamp: z.string().optional(),
+});
+
+export type Status = z.infer<typeof statusSchema>;

package/src/generators/nextjs-app/files/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/generators/nextjs-app/files/next.config.mjs

@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'standalone',
+  images: {
+    unoptimized: true,
+  },
+}
+
+export default nextConfig

package/src/generators/nextjs-app/files/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "<%= fileName %>",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --port <%= assignedPort %>",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "@opentelemetry/api": "^1.9.1",
+    "@opentelemetry/auto-instrumentations-node": "^0.72.0",
+    "@opentelemetry/context-zone": "^2.6.1",
+    "@opentelemetry/exporter-metrics-otlp-http": "^0.214.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.214.0",
+    "@opentelemetry/instrumentation": "^0.214.0",
+    "@opentelemetry/instrumentation-fetch": "^0.214.0",
+    "@opentelemetry/resources": "^2.6.1",
+    "@opentelemetry/sdk-metrics": "^2.6.1",
+    "@opentelemetry/sdk-node": "^0.214.0",
+    "@opentelemetry/sdk-trace-base": "^2.6.1",
+    "@opentelemetry/sdk-trace-web": "^2.6.1",
+    "@opentelemetry/semantic-conventions": "^1.40.0",<% if (auth === 'clerk') { %>
+    "@clerk/nextjs": "^7.0.8",
+    "@clerk/themes": "^2.4.57",<% } %>
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.564.0",
+    "next": "16.1.6",
+    "next-themes": "^0.4.6",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "sonner": "^1.7.1",<% if (apiProxy) { %>
+    "swr": "^2.2.5",<% } %>
+    "tailwind-merge": "^3.3.1",
+    "zod": "^3.24.1"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^2.0.3",
+    "@eslint/js": "^9.39.4",
+    "@next/eslint-plugin-next": "^16.2.1",
+    "@tailwindcss/postcss": "^4.2.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^22",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.58.0",
+    "@typescript-eslint/parser": "^8.58.0",
+    "@vitejs/plugin-react": "^5.2.0",
+    "eslint": "^9.39.4",
+    "eslint-config-next": "^16.2.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "globals": "^17.4.0",
+    "jsdom": "^28.1.0",
+    "postcss": "^8.5",
+    "tailwindcss": "^4.2.0",
+    "tw-animate-css": "1.3.3",
+    "typescript": "5.7.3",
+    "typescript-eslint": "^8.58.0",
+    "vitest": "^3.2.4"
+  }
+}

package/src/generators/nextjs-app/files/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}
+
+export default config

package/src/generators/nextjs-app/files/proxy.test.ts.template

@@ -0,0 +1,30 @@
+// @vitest-environment node
+import { describe, it, expect, afterEach } from "vitest";
+import { NextRequest } from "next/server";
+import type { NextFetchEvent } from "next/server";
+import middleware, { config } from "./proxy";
+
+describe("clerk auth middleware (proxy.ts)", () => {
+  const original = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY;
+
+  afterEach(() => {
+    process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY = original;
+  });
+
+  it("is a no-op (NextResponse.next) when Clerk is not configured", async () => {
+    delete process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY;
+    const req = new NextRequest(new Request("http://localhost/dashboard"));
+    // When the publishable key is absent the middleware must not throw and must
+    // return a response that lets the request continue.
+    const res = middleware(req, {} as NextFetchEvent);
+    expect(res).toBeDefined();
+    // NextResponse.next() yields a 200-class response with no redirect.
+    const status = (res as Response).status ?? 200;
+    expect(status).toBeLessThan(400);
+  });
+
+  it("exports a matcher config covering API routes", () => {
+    expect(Array.isArray(config.matcher)).toBe(true);
+    expect(config.matcher.some((m) => m.includes("api"))).toBe(true);
+  });
+});

package/src/generators/nextjs-app/files/proxy.ts

@@ -0,0 +1,31 @@
+import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'
+import { NextResponse } from 'next/server'
+import type { NextRequest, NextFetchEvent } from 'next/server'
+
+const isPublicRoute = createRouteMatcher([
+  '/sign-in(.*)',
+  '/sign-up(.*)',
+  '/api/healthz(.*)',
+  '/api/config(.*)',
+])
+
+export default function proxy(request: NextRequest, event: NextFetchEvent) {
+  if (!process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY) {
+    return NextResponse.next()
+  }
+
+  return clerkMiddleware(async (auth, req) => {
+    if (!isPublicRoute(req)) {
+      await auth.protect()
+    }
+  })(request, event)
+}
+
+export const config = {
+  matcher: [
+    // Skip Next.js internals and all static files
+    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
+    // Always run for API routes
+    '/(api|trpc)(.*)',
+  ],
+}

package/src/generators/nextjs-app/files/public/.gitkeep

@@ -0,0 +1 @@
+

package/src/generators/nextjs-app/files/tsconfig.json

@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "target": "ES2022",
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.mts",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/src/generators/nextjs-app/files/vitest.config.mts

@@ -0,0 +1,15 @@
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+import path from "path";
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: "jsdom",
+    globals: true,
+    setupFiles: ["./vitest.setup.ts"],
+    alias: {
+      "@": path.resolve(__dirname, "./"), 
+    },
+  },
+});

package/src/generators/nextjs-app/files/vitest.setup.ts

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