gemstack-cli 0.2.5 → 0.3.0

data/templates/frontend/app/page.module.css

@@ -1,315 +0,0 @@
-/* The GemStack welcome page (app/page.tsx). Delete both files when you replace it. */
-
-.shell {
-  --ruby: #e11d48;
-  --violet: #7c3aed;
-  --ink: #16181d;
-  --muted: #5b6170;
-  --surface: rgba(255, 255, 255, 0.72);
-  --border: rgba(22, 24, 29, 0.09);
-  --code: #f3f4f7;
-  --ok: #16a34a;
-  --pending: #d99a1e;
-  --error: #dc2626;
-
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  color: var(--ink);
-  background:
-    radial-gradient(60rem 30rem at 10% -10%, rgba(225, 29, 72, 0.12), transparent 60%),
-    radial-gradient(50rem 30rem at 100% 0%, rgba(124, 58, 237, 0.12), transparent 60%),
-    #fbfbfd;
-}
-
-@media (prefers-color-scheme: dark) {
-  .shell {
-    --ink: #eceef4;
-    --muted: #9aa0ad;
-    --surface: rgba(24, 27, 36, 0.72);
-    --border: rgba(255, 255, 255, 0.08);
-    --code: rgba(255, 255, 255, 0.06);
-    --ok: #4ade80;
-    --pending: #fbbf24;
-    --error: #f87171;
-
-    background:
-      radial-gradient(60rem 30rem at 10% -10%, rgba(225, 29, 72, 0.22), transparent 60%),
-      radial-gradient(50rem 30rem at 100% 0%, rgba(124, 58, 237, 0.22), transparent 60%),
-      #0c0d12;
-  }
-}
-
-.main {
-  flex: 1;
-  width: 100%;
-  max-width: 68rem;
-  margin: 0 auto;
-  padding: clamp(3rem, 8vw, 6rem) 1.25rem 3rem;
-}
-
-/* Hero */
-
-.hero {
-  text-align: center;
-  margin-bottom: clamp(2.5rem, 6vw, 4rem);
-}
-
-.logo {
-  width: 5rem;
-  height: 5rem;
-  filter: drop-shadow(0 12px 24px rgba(225, 29, 72, 0.35));
-  animation: float 6s ease-in-out infinite;
-}
-
-@keyframes float {
-  50% {
-    transform: translateY(-6px) rotate(-2deg);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .logo {
-    animation: none;
-  }
-}
-
-.eyebrow {
-  margin: 1rem 0 0.5rem;
-  font-size: 0.8rem;
-  font-weight: 700;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  color: var(--muted);
-}
-
-.title {
-  margin: 0;
-  font-size: clamp(2.2rem, 6vw, 3.6rem);
-  line-height: 1.1;
-  letter-spacing: -0.03em;
-  font-weight: 800;
-}
-
-.accent {
-  background: linear-gradient(120deg, #ff5f8f, var(--ruby) 45%, var(--violet));
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
-}
-
-.lead {
-  max-width: 38rem;
-  margin: 1.1rem auto 0;
-  font-size: clamp(1.02rem, 2.2vw, 1.2rem);
-  color: var(--muted);
-}
-
-.lead strong {
-  color: var(--ink);
-}
-
-/* Live checks */
-
-.checks {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 0.6rem;
-  margin-top: 2rem;
-}
-
-.check {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.55rem;
-  padding: 0.5rem 0.95rem;
-  border: 1px solid var(--border);
-  border-radius: 999px;
-  background: var(--surface);
-  backdrop-filter: blur(8px);
-  font-size: 0.92rem;
-  overflow-wrap: anywhere;
-}
-
-.check code {
-  font-size: 0.85em;
-}
-
-.dot {
-  width: 0.55rem;
-  height: 0.55rem;
-  flex: none;
-  border-radius: 50%;
-  background: currentColor;
-}
-
-.ok .dot {
-  background: var(--ok);
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 22%, transparent);
-}
-
-.pending .dot {
-  background: var(--pending);
-  animation: pulse 1.2s ease-in-out infinite;
-}
-
-.error .dot {
-  background: var(--error);
-}
-
-@keyframes pulse {
-  50% {
-    opacity: 0.35;
-  }
-}
-
-/* Cards */
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
-  gap: 1rem;
-}
-
-.card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 0.6rem;
-  padding: 1.4rem;
-  border: 1px solid var(--border);
-  border-radius: 16px;
-  background: var(--surface);
-  backdrop-filter: blur(8px);
-  transition:
-    transform 0.2s ease,
-    border-color 0.2s ease,
-    box-shadow 0.2s ease;
-}
-
-.card:hover {
-  transform: translateY(-2px);
-  border-color: color-mix(in srgb, var(--ruby) 35%, var(--border));
-  box-shadow: 0 16px 40px -24px rgba(225, 29, 72, 0.45);
-}
-
-.step {
-  display: grid;
-  place-items: center;
-  width: 1.9rem;
-  height: 1.9rem;
-  border-radius: 10px;
-  background: linear-gradient(135deg, var(--ruby), var(--violet));
-  color: #fff;
-  font-size: 0.85rem;
-  font-weight: 700;
-}
-
-.cardTitle {
-  margin: 0.3rem 0 0;
-  font-size: 1.08rem;
-}
-
-.cardText {
-  flex: 1;
-  margin: 0;
-  color: var(--muted);
-  font-size: 0.93rem;
-  line-height: 1.5;
-}
-
-.command {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.5rem;
-  padding: 0.55rem 0.6rem 0.55rem 0.8rem;
-  border-radius: 10px;
-  background: var(--code);
-  font-size: 0.82rem;
-}
-
-.command code {
-  flex: 1;
-  min-width: 0;
-  padding: 0.15rem 0 0;
-  background: none;
-  line-height: 1.5;
-  overflow-wrap: anywhere; /* long commands wrap instead of being cut off */
-}
-
-.prompt {
-  color: var(--ruby);
-  user-select: none;
-}
-
-.copy {
-  flex: none;
-  padding: 0.25rem 0.6rem;
-  border: 1px solid var(--border);
-  border-radius: 7px;
-  background: transparent;
-  color: var(--ink);
-  font: inherit;
-  font-size: 0.75rem;
-  cursor: pointer;
-}
-
-.copy:hover,
-.copy:focus-visible {
-  border-color: var(--ruby);
-  color: var(--ruby);
-}
-
-.link {
-  align-self: flex-start;
-  color: var(--ruby);
-  font-weight: 600;
-  text-decoration: none;
-}
-
-.link:hover,
-.link:focus-visible {
-  text-decoration: underline;
-}
-
-.edit {
-  margin: 2.5rem 0 0;
-  text-align: center;
-  color: var(--muted);
-  font-size: 0.92rem;
-}
-
-/* Footer */
-
-.footer {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  gap: 0.5rem 1.5rem;
-  width: 100%;
-  max-width: 68rem;
-  margin: 0 auto;
-  padding: 1.5rem 1.25rem 2rem;
-  border-top: 1px solid var(--border);
-  color: var(--muted);
-  font-size: 0.85rem;
-}
-
-.footer a {
-  color: var(--ink);
-  font-weight: 600;
-  text-decoration: none;
-}
-
-.footer a:hover,
-.footer a:focus-visible {
-  color: var(--ruby);
-}
-
-@media (max-width: 40rem) {
-  .footer {
-    justify-content: center;
-    text-align: center;
-  }
-}

data/templates/frontend/app/page.tsx.tt

@@ -1,183 +0,0 @@
-"use client";
-
-import { useQuery } from "@tanstack/react-query";
-import { useState } from "react";
-import { api, API_PATH } from "@/lib/gemstack/client";
-import styles from "./page.module.css";
-
-// The GemStack welcome page: shows that Next.js renders and that the browser
-// reaches the Ruby API through the same origin. Replace it with your app —
-// this file and app/page.module.css are yours to delete.
-
-const DOCS = "https://github.com/gemstack-rb/gemstack/tree/main/docs";
-
-export default function Welcome() {
-  const health = useQuery({
-    queryKey: ["gemstack", "health"],
-    queryFn: async () => {
-      const started = performance.now();
-      const body = await api.get<{ status: string }>("/health");
-      return { ...body, ms: Math.round(performance.now() - started) };
-    },
-    retry: 1,
-  });
-  const apiState = health.isPending ? "pending" : health.isError ? "error" : "ok";
-
-  return (
-    <div className={styles.shell}>
-      <main className={styles.main}>
-        <header className={styles.hero}>
-          <GemLogo className={styles.logo} />
-          <p className={styles.eyebrow}>GemStack</p>
-          <h1 className={styles.title}>
-            Yay! You&apos;re on <span className={styles.accent}>GemStack</span>.
-          </h1>
-          <p className={styles.lead}>
-            <strong><%= module_name %></strong> is running: a Next.js frontend and a Ruby API, served from one origin.
-          </p>
-
-          <div className={styles.checks} role="status" aria-live="polite">
-            <span className={`${styles.check} ${styles.ok}`}>
-              <span className={styles.dot} aria-hidden="true" /> Next.js rendering
-            </span>
-            <span className={`${styles.check} ${styles[apiState]}`}>
-              <span className={styles.dot} aria-hidden="true" />
-              {apiState === "pending" && "Connecting to the Ruby API…"}
-              {apiState === "ok" && (
-                <>
-                  Ruby API connected · <code>GET {API_PATH}/health</code> in {health.data?.ms} ms
-                </>
-              )}
-              {apiState === "error" && <>Ruby API unreachable: {health.error?.message}</>}
-            </span>
-          </div>
-        </header>
-
-        <section className={styles.grid} aria-label="Next steps">
-          <Card
-            step="1"
-            title="Generate a resource"
-            text="Migration, model, API, typed TypeScript client and Next.js pages — in one command."
-            command="gemstack g resource Product name:string"
-          />
-          <Card
-            step="2"
-            title="Explore your API"
-            text="Every endpoint with its types, and a form to try requests from the browser."
-            href={`${API_PATH}/docs`}
-            linkLabel={`Open ${API_PATH}/docs`}
-          />
-          <Card
-            step="3"
-            title="Check your setup"
-            text="Ruby, Node.js, the database, migrations and the TypeScript contract — with the fix for anything off."
-            command="gemstack doctor"
-          />
-          <Card
-            step="4"
-            title="Read the guides"
-            text="Models, controllers, jobs, realtime, authentication, storage and deployment."
-            href={DOCS}
-            linkLabel="Open the guides"
-            external
-          />
-        </section>
-
-        <p className={styles.edit}>
-          Edit <code>frontend/app/page.tsx</code> to replace this page · API code lives in <code>app/</code>
-        </p>
-      </main>
-
-      <footer className={styles.footer}>
-        <span>
-          GemStack <%= version %> · Ruby <%= ruby_version %> · Next.js
-        </span>
-        <span>
-          Open source by{" "}
-          <a href="https://www.adwaretech.com" target="_blank" rel="noreferrer">
-            Adware Technologies
-          </a>
-        </span>
-      </footer>
-    </div>
-  );
-}
-
-function Card(props: {
-  step: string;
-  title: string;
-  text: string;
-  command?: string;
-  href?: string;
-  linkLabel?: string;
-  external?: boolean;
-}) {
-  return (
-    <article className={styles.card}>
-      <span className={styles.step} aria-hidden="true">
-        {props.step}
-      </span>
-      <h2 className={styles.cardTitle}>{props.title}</h2>
-      <p className={styles.cardText}>{props.text}</p>
-      {props.command && <Command text={props.command} />}
-      {props.href && (
-        <a
-          className={styles.link}
-          href={props.href}
-          {...(props.external ? { target: "_blank", rel: "noreferrer" } : {})}
-        >
-          {props.linkLabel} <span aria-hidden="true">→</span>
-        </a>
-      )}
-    </article>
-  );
-}
-
-function Command({ text }: { text: string }) {
-  const [copied, setCopied] = useState(false);
-  async function copy() {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1500);
-    } catch {
-      // Clipboard unavailable (e.g. not a secure context): the command stays selectable.
-    }
-  }
-  return (
-    <div className={styles.command}>
-      <code>
-        <span className={styles.prompt} aria-hidden="true">
-          $
-        </span>{" "}
-        {text}
-      </code>
-      <button type="button" className={styles.copy} onClick={copy} aria-label={`Copy: ${text}`}>
-        {copied ? "Copied" : "Copy"}
-      </button>
-    </div>
-  );
-}
-
-function GemLogo({ className }: { className?: string }) {
-  return (
-    <svg className={className} viewBox="0 0 64 64" role="img" aria-label="GemStack">
-      <defs>
-        <linearGradient id="gemstack-gem" x1="0" y1="0" x2="1" y2="1">
-          <stop offset="0" stopColor="#ff5f8f" />
-          <stop offset="0.55" stopColor="#e11d48" />
-          <stop offset="1" stopColor="#7c3aed" />
-        </linearGradient>
-      </defs>
-      <path d="M18 8h28l12 15-26 34L6 23z" fill="url(#gemstack-gem)" />
-      <path
-        d="M6 23h52M18 8l7 15 7-15 7 15 7-15M25 23l7 34 7-34"
-        fill="none"
-        stroke="rgba(255,255,255,0.55)"
-        strokeWidth="1.4"
-        strokeLinejoin="round"
-      />
-      <path d="M18 8h28l-7 15H25z" fill="rgba(255,255,255,0.18)" />
-    </svg>
-  );
-}

data/templates/frontend/app/providers.tsx

@@ -1,24 +0,0 @@
-"use client";
-
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { useState, type ReactNode } from "react";
-import { ApiError } from "@/lib/gemstack/client";
-
-// Server state lives in TanStack Query; local UI state is plain React state;
-// URL state uses Next.js search params. No global store is needed by default.
-export function Providers({ children }: { children: ReactNode }) {
-  const [queryClient] = useState(
-    () =>
-      new QueryClient({
-        defaultOptions: {
-          queries: {
-            staleTime: 30_000,
-            // Don't retry requests the API rejected (4xx); retry transient failures twice.
-            retry: (failureCount, error) => !(error instanceof ApiError && error.isClientError) && failureCount < 2,
-          },
-        },
-      }),
-  );
-
-  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
-}

data/templates/frontend/lib/gemstack/client.ts

@@ -1,125 +0,0 @@
-/**
- * GemStack API client runtime.
- *
- * This file belongs to your application (it is not a hidden dependency):
- * add auth headers, interceptors or logging here as needed.
- *
- * Where requests go:
- * - Browser: relative URLs ("/api/..."), i.e. the same origin — no CORS, no config.
- * - Server Components / Route Handlers: GEMSTACK_API_URL (injected by `gemstack dev`,
- *   set by you in production) so the Next.js server calls Ruby directly.
- * - API on another domain: set NEXT_PUBLIC_GEMSTACK_API_URL.
- */
-
-export const API_PATH = process.env.NEXT_PUBLIC_GEMSTACK_API_PATH ?? "/api";
-
-/** The JSON error envelope every GemStack API error uses. */
-export interface ApiErrorBody {
-  error: { code: string; message: string; request_id?: string };
-  /** Field-level validation messages, e.g. { name: ["is required"] }. */
-  errors?: Record<string, string[]>;
-  /** Development only (config.http.show_exceptions): the server-side exception. */
-  exception?: { class: string; message: string; backtrace: string[] };
-}
-
-export class ApiError extends Error {
-  readonly status: number;
-  readonly code: string;
-  readonly requestId?: string;
-  readonly errors: Record<string, string[]>;
-
-  constructor(status: number, body: ApiErrorBody | null, fallbackMessage: string) {
-    super(body?.error?.message ?? fallbackMessage);
-    this.name = "ApiError";
-    this.status = status;
-    this.code = body?.error?.code ?? "http_error";
-    this.requestId = body?.error?.request_id;
-    this.errors = body?.errors ?? {};
-  }
-
-  /** True for 4xx responses: retrying the same request won't help. */
-  get isClientError(): boolean {
-    return this.status >= 400 && this.status < 500;
-  }
-}
-
-type QueryValue = string | number | boolean | null | undefined;
-export type Query = Record<string, QueryValue | QueryValue[]>;
-
-export interface RequestOptions extends Omit<RequestInit, "body" | "method"> {
-  query?: Query;
-  body?: unknown;
-}
-
-function baseUrl(): string {
-  const publicUrl = process.env.NEXT_PUBLIC_GEMSTACK_API_URL;
-  if (publicUrl) return publicUrl.replace(/\/$/, "");
-  if (typeof window === "undefined") {
-    return (process.env.GEMSTACK_API_URL ?? "http://127.0.0.1:4000").replace(/\/$/, "");
-  }
-  return "";
-}
-
-/** Builds a URL for an API path: apiUrl("/products", { page: 2 }) → "/api/products?page=2". */
-export function apiUrl(path: string, query?: Query): string {
-  const normalized = path.startsWith("/") ? path : `/${path}`;
-  let url = `${baseUrl()}${API_PATH}${normalized}`;
-  if (query) {
-    const params = new URLSearchParams();
-    for (const [key, value] of Object.entries(query)) {
-      const values = Array.isArray(value) ? value : [value];
-      for (const item of values) {
-        if (item !== undefined && item !== null) params.append(Array.isArray(value) ? `${key}[]` : key, String(item));
-      }
-    }
-    const qs = params.toString();
-    if (qs) url += `?${qs}`;
-  }
-  return url;
-}
-
-function parse(text: string): unknown {
-  try {
-    return JSON.parse(text);
-  } catch {
-    return null;
-  }
-}
-
-export async function request<T>(method: string, path: string, options: RequestOptions = {}): Promise<T> {
-  const { query, body, headers, ...init } = options;
-  const requestHeaders = new Headers(headers);
-  requestHeaders.set("accept", "application/json");
-
-  let payload: BodyInit | undefined;
-  if (body !== undefined) {
-    if (body instanceof FormData || body instanceof Blob || body instanceof URLSearchParams) {
-      payload = body;
-    } else {
-      payload = JSON.stringify(body);
-      requestHeaders.set("content-type", "application/json");
-    }
-  }
-
-  const response = await fetch(apiUrl(path, query), { ...init, method, headers: requestHeaders, body: payload });
-  const text = response.status === 204 ? "" : await response.text();
-  const data = text ? parse(text) : null;
-
-  if (!response.ok) {
-    const exception = (data as ApiErrorBody | null)?.exception;
-    if (exception && process.env.NODE_ENV !== "production") {
-      // The Ruby exception behind a 500, so it shows up next to the failing request.
-      console.error(`[GemStack API] ${method} ${path} → ${exception.class}: ${exception.message}\n  ${exception.backtrace.slice(0, 8).join("\n  ")}`);
-    }
-    throw new ApiError(response.status, data as ApiErrorBody | null, response.statusText || `HTTP ${response.status}`);
-  }
-  return data as T;
-}
-
-export const api = {
-  get: <T>(path: string, options?: RequestOptions) => request<T>("GET", path, options),
-  post: <T>(path: string, body?: unknown, options?: RequestOptions) => request<T>("POST", path, { ...options, body }),
-  put: <T>(path: string, body?: unknown, options?: RequestOptions) => request<T>("PUT", path, { ...options, body }),
-  patch: <T>(path: string, body?: unknown, options?: RequestOptions) => request<T>("PATCH", path, { ...options, body }),
-  delete: <T = void>(path: string, options?: RequestOptions) => request<T>("DELETE", path, options),
-};

data/templates/frontend/next-env.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

data/templates/frontend/next.config.ts

@@ -1,17 +0,0 @@
-import type { NextConfig } from "next";
-
-// One public origin, in every environment:
-// - `gemstack dev`: the GemStack gateway routes /api/* to Ruby before requests reach Next.js.
-// - Production: set GEMSTACK_API_URL (e.g. http://api.internal:4000) and Next.js proxies
-//   /api/* to the Ruby API. Leave it unset if a reverse proxy already routes /api/*.
-const apiUrl = process.env.GEMSTACK_API_URL?.replace(/\/$/, "");
-const apiPath = process.env.NEXT_PUBLIC_GEMSTACK_API_PATH ?? "/api";
-
-const nextConfig: NextConfig = {
-  async rewrites() {
-    if (!apiUrl) return [];
-    return [{ source: `${apiPath}/:path*`, destination: `${apiUrl}${apiPath}/:path*` }];
-  },
-};
-
-export default nextConfig;

data/templates/frontend/package.json.tt

@@ -1,23 +0,0 @@
-{
-  "name": "<%= name %>-frontend",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "typecheck": "tsc --noEmit"
-  },
-  "dependencies": {
-    "@tanstack/react-query": "^5.104.0",
-    "next": "^16.3.6",
-    "react": "^19.3.0",
-    "react-dom": "^19.3.0"
-  },
-  "devDependencies": {
-    "@types/node": "^22.0.0",
-    "@types/react": "^19.3.0",
-    "@types/react-dom": "^19.3.0",
-    "typescript": "~5.9.3"
-  }
-}