jops-core 1.0.15 → 1.1.0

package/templates/nextjs-jops-spa/public/jops-spa/layout/quotes.html

@@ -0,0 +1,50 @@
+<div class="quotes-list">
+  <div class="mb-6 flex flex-wrap items-end justify-between gap-4">
+    <div>
+      <h1 class="text-2xl font-semibold text-slate-900">Sales quotes</h1>
+      <p class="mt-1 text-sm text-slate-500">
+        Signed in as <span id="user_name" class="font-medium text-slate-700"></span>.
+        Data from <code class="rounded bg-slate-100 px-1">GET /api/quotes</code>.
+      </p>
+    </div>
+    <button
+      jops-event-bind
+      type="button"
+      onclick="logout"
+      class="rounded-md border border-slate-300 bg-white px-3.5 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
+    >
+      Log out
+    </button>
+  </div>
+
+  <!-- Filter tabs: buttons (not href="#" links), so a click adds no history entry. -->
+  <nav id="tabs" class="mb-4 flex flex-wrap gap-1" aria-label="Filter by status">
+    <button jops-event-bind type="button" onclick="filterQuotes" data-status="" class="rounded-md px-3 py-1.5 text-sm capitalize bg-indigo-600 text-white">all</button>
+    <button jops-event-bind type="button" onclick="filterQuotes" data-status="draft" class="rounded-md px-3 py-1.5 text-sm capitalize bg-white text-slate-600 ring-1 ring-slate-200 hover:bg-slate-50">draft</button>
+    <button jops-event-bind type="button" onclick="filterQuotes" data-status="sent" class="rounded-md px-3 py-1.5 text-sm capitalize bg-white text-slate-600 ring-1 ring-slate-200 hover:bg-slate-50">sent</button>
+    <button jops-event-bind type="button" onclick="filterQuotes" data-status="accepted" class="rounded-md px-3 py-1.5 text-sm capitalize bg-white text-slate-600 ring-1 ring-slate-200 hover:bg-slate-50">accepted</button>
+    <button jops-event-bind type="button" onclick="filterQuotes" data-status="rejected" class="rounded-md px-3 py-1.5 text-sm capitalize bg-white text-slate-600 ring-1 ring-slate-200 hover:bg-slate-50">rejected</button>
+  </nav>
+
+  <!-- Skeleton while GET /api/quotes runs. -->
+  <div id="quotes-loading"></div>
+  <div id="quotes-table" hidden class="overflow-x-auto rounded-lg border border-slate-200 bg-white shadow-sm">
+    <table class="min-w-full divide-y divide-slate-200 text-sm">
+      <thead class="bg-slate-50 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">
+        <tr>
+          <th class="px-4 py-3">Quote</th>
+          <th class="px-4 py-3">Company</th>
+          <th class="px-4 py-3">Deal</th>
+          <th class="px-4 py-3">Status</th>
+          <th class="px-4 py-3">Created</th>
+          <th class="px-4 py-3 text-right">Total</th>
+        </tr>
+      </thead>
+      <!-- One QuoteRow view per quote, added by Quotes.loadQuotes(). -->
+      <tbody id="quote-rows" class="divide-y divide-slate-100"></tbody>
+    </table>
+  </div>
+  <p id="quotes-empty" hidden class="mt-4 rounded-lg border border-dashed border-slate-300 p-8 text-center text-slate-500">
+    No quotes here yet.
+  </p>
+</div>

package/templates/nextjs-jops-spa/public/jops-spa/layout/quotes_row.html

@@ -0,0 +1,8 @@
+<tr class="hover:bg-slate-50">
+  <td id="quote_number" class="whitespace-nowrap px-4 py-3 font-medium text-indigo-700"></td>
+  <td id="company_name" class="px-4 py-3 text-slate-700"></td>
+  <td id="deal_title" class="px-4 py-3 text-slate-700"></td>
+  <td id="quote_status" class="px-4 py-3 text-slate-700"></td>
+  <td id="created_at" class="whitespace-nowrap px-4 py-3 text-slate-500"></td>
+  <td id="total" class="px-4 py-3 text-right tabular-nums font-medium text-slate-700"></td>
+</tr>

package/templates/nextjs-jops-spa/public/jops-spa/skeleton.js

@@ -0,0 +1,7 @@
+// Loading placeholder for a table. Full class names, so Tailwind finds them.
+const BAR = "animate-pulse rounded bg-slate-200 h-4 flex-1";
+
+export function tableSkeleton(rows = 4, cols = 6) {
+  const row = `<div class="flex gap-4">${`<div class="${BAR}"></div>`.repeat(cols)}</div>`;
+  return `<div class="rounded-lg border border-slate-200 bg-white shadow-sm p-4"><div class="space-y-3">${row.repeat(rows)}</div></div>`;
+}

package/templates/nextjs-jops-spa/src/app/about/page.tsx

@@ -0,0 +1,59 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+
+export const metadata: Metadata = { title: "About" };
+
+const steps = [
+  {
+    title: "Next.js owns the routes, the shell and the backend",
+    text: "This page and the header are plain React Server Components. The quotes data comes from a Next.js Route Handler (src/app/api/quotes/route.ts) reading data/quotes.json.",
+  },
+  {
+    title: "JopsApp launches the SPA",
+    text: "src/app/jops-spa/page.tsx renders <JopsApp app=\"/jops-spa/App.js\" /> from jops-core/nextjs. It loads /lib/jops-core.min.js once, adds the \"jops-core\" import map and mounts the app into its own <div>.",
+  },
+  {
+    title: "The SPA lives in public/jops-spa/",
+    text: "Plain ES modules and HTML layouts, served as-is (never bundled): a Router with a mock login (#login) and a quotes list (#quotes) that calls GET /api/quotes. Paths are absolute (/jops-spa/…), and the library is vendored in public/lib/.",
+  },
+  {
+    title: "JOPS owns the #hash, Next.js owns the /path",
+    text: "Inside /jops-spa the JOPS Router handles #login and #quotes. Leaving the page (a link or Back) ends the JOPS app completely; returning launches it again.",
+  },
+  {
+    title: "One stylesheet",
+    text: "Tailwind is generated by Next.js and also covers the classes used in public/jops-spa/; JOPS's setStyle() has no effect in an embedded app.",
+  },
+];
+
+// A React-only page: no JOPS involved.
+export default function AboutPage() {
+  return (
+    <article className="space-y-8">
+      <header>
+        <h1 className="text-2xl font-semibold text-slate-900">Next.js + JOPS embedded SPA</h1>
+        <p className="mt-2 max-w-2xl text-slate-600">
+          A Next.js App Router project that hosts a JOPS single-page app on one of its pages. Next.js
+          provides the routes, the shell and the API; JOPS provides a class-based SPA with its own
+          views, lifecycle and router.
+        </p>
+      </header>
+      <ol className="space-y-4">
+        {steps.map((step, i) => (
+          <li key={step.title} className="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
+            <p className="font-medium text-slate-900">
+              {i + 1}. {step.title}
+            </p>
+            <p className="mt-1 text-sm text-slate-600">{step.text}</p>
+          </li>
+        ))}
+      </ol>
+      <Link
+        href="/jops-spa"
+        className="inline-flex rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500"
+      >
+        Open the JOPS SPA →
+      </Link>
+    </article>
+  );
+}

package/templates/nextjs-jops-spa/src/app/api/quotes/route.ts

@@ -0,0 +1,11 @@
+import type { NextRequest } from "next/server";
+import quotes from "../../../../data/quotes.json";
+
+// GET /api/quotes[?status=draft|sent|accepted|rejected]
+// The JOPS SPA's only backend call (getQuotes() in public/jops-spa/api.js).
+// Static demo data from data/quotes.json; replace with your own data source.
+export async function GET(request: NextRequest) {
+  const status = request.nextUrl.searchParams.get("status");
+  const data = status ? quotes.filter((q) => q.status === status) : quotes;
+  return Response.json({ data, total: data.length });
+}

package/templates/nextjs-jops-spa/src/app/globals.css

@@ -0,0 +1,6 @@
+@import "tailwindcss";
+
+body {
+  background: var(--color-slate-50);
+  color: var(--color-slate-900);
+}

package/templates/nextjs-jops-spa/src/app/jops-spa/page.tsx

@@ -0,0 +1,11 @@
+import type { Metadata } from "next";
+import JopsApp from "jops-core/nextjs";
+
+export const metadata: Metadata = { title: "JOPS SPA" };
+
+// Launches the JOPS SPA in public/jops-spa/ inside this page. JopsApp loads
+// /lib/jops-core.min.js once, adds its import map and mounts the app into its
+// own <div>; leaving the page ends the app completely.
+export default function JopsSpaPage() {
+  return <JopsApp app="/jops-spa/App.js" id="jops-spa-root" />;
+}

package/templates/nextjs-jops-spa/src/app/layout.tsx

@@ -0,0 +1,27 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: { default: "Next.js + JOPS", template: "%s · Next.js + JOPS" },
+  description: "A Next.js app hosting an embedded JOPS SPA",
+};
+
+// Root layout (Next.js): a shared shell around every page. The JOPS SPA is
+// launched only by /jops-spa, inside this shell.
+export default function RootLayout({ children }: LayoutProps<"/">) {
+  return (
+    <html lang="en" className="h-full antialiased">
+      <body className="min-h-full font-sans">
+        <header className="border-b border-slate-200 bg-white">
+          <nav className="mx-auto flex max-w-5xl items-center gap-6 px-6 py-4 text-sm">
+            <span className="font-semibold text-indigo-700">Next.js + JOPS</span>
+            <Link href="/about" className="text-slate-600 hover:text-slate-900">About</Link>
+            <Link href="/jops-spa" className="text-slate-600 hover:text-slate-900">JOPS SPA</Link>
+          </nav>
+        </header>
+        <main className="mx-auto max-w-5xl px-6 py-8">{children}</main>
+      </body>
+    </html>
+  );
+}

package/templates/nextjs-jops-spa/src/app/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function Home() {
+  redirect("/about");
+}

package/templates/nextjs-jops-spa/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "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": { "@/*": ["./src/*"] }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", ".next/dev/types/**/*.ts", "**/*.mts"],
+  "exclude": ["node_modules", "public"]
+}