scale-stack 0.0.1-alpha.1 → 0.0.1

package/templates/auth/sign-up-page.tsx.ejs

@@ -0,0 +1,137 @@
+"use client";
+
+<% if (isStateful) { %>import type { FormEvent } from "react";
+<% if (i18n) { %>import { Link } from "@/i18n/navigation";
+<% } else { %>import Link from "next/link";
+<% } %><% } %><% if (i18n) { %>import { useTranslations } from "next-intl";
+<% } %>import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+<% if (isStateful) { %>  CardFooter,
+<% } %>
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+<% if (isStateful) { %>import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+<% } %>import { authClient } from "@/lib/auth-client";
+
+export default function SignUpPage() {
+<% if (i18n) { %>  const t = useTranslations("Auth");
+<% } %>
+<% if (isStateful) { %>  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+<% } %>  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+
+  async function signInWithMicrosoft() {
+    setPending(true);
+    setError(null);
+    const result = await authClient.signIn.social({
+      provider: "microsoft",
+      callbackURL: "/",
+    });
+    setPending(false);
+
+    if (result.error) {
+      setError(result.error.message ?? <% if (i18n) { %>t("microsoftSignInFailed")<% } else { %>"Microsoft sign-in failed."<% } %>);
+    }
+  }
+<% if (isStateful) { %>
+  async function signUpWithEmail(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setPending(true);
+    setError(null);
+    const result = await authClient.signUp.email({
+      name,
+      email,
+      password,
+      callbackURL: "/",
+    });
+    setPending(false);
+
+    if (result.error) {
+      setError(result.error.message ?? <% if (i18n) { %>t("emailSignUpFailed")<% } else { %>"Email sign-up failed."<% } %>);
+    }
+  }
+<% } %>
+  return (
+    <main className="flex flex-1 items-center justify-center px-6 py-24">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle><% if (i18n) { %>{t("<% if (isStateful) { %>createAccountTitle<% } else { %>createAccountMicrosoftTitle<% } %>")}<% } else { %><% if (isStateful) { %>Create account<% } else { %>Create account with Microsoft<% } %><% } %></CardTitle>
+          <CardDescription>
+            <% if (i18n) { %>{t("<% if (isStateful) { %>createAccountDescriptionStateful<% } else { %>createAccountDescriptionStateless<% } %>")}<% } else { %><% if (isStateful) { %>Use Microsoft or email/password to create your account.<% } else { %>Account creation is handled by Microsoft Entra for this stateless setup.<% } %><% } %>
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <Button
+            className="w-full"
+            type="button"
+            variant="outline"
+            onClick={signInWithMicrosoft}
+            disabled={pending}
+          >
+            <% if (i18n) { %>{t("continueWithMicrosoft")}<% } else { %>Continue with Microsoft<% } %>
+          </Button>
+<% if (isStateful) { %>
+          <form className="space-y-4" onSubmit={signUpWithEmail}>
+            <div className="space-y-2">
+              <Label htmlFor="name"><% if (i18n) { %>{t("name")}<% } else { %>Name<% } %></Label>
+              <Input
+                id="name"
+                type="text"
+                autoComplete="name"
+                value={name}
+                onChange={(event) => setName(event.target.value)}
+                required
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="email"><% if (i18n) { %>{t("email")}<% } else { %>Email<% } %></Label>
+              <Input
+                id="email"
+                type="email"
+                autoComplete="email"
+                value={email}
+                onChange={(event) => setEmail(event.target.value)}
+                required
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="password"><% if (i18n) { %>{t("password")}<% } else { %>Password<% } %></Label>
+              <Input
+                id="password"
+                type="password"
+                autoComplete="new-password"
+                value={password}
+                onChange={(event) => setPassword(event.target.value)}
+                minLength={8}
+                required
+              />
+            </div>
+            <Button className="w-full" type="submit" disabled={pending}>
+              <% if (i18n) { %>{t("createAccountTitle")}<% } else { %>Create account<% } %>
+            </Button>
+          </form>
+<% } %>
+          {error ? <p className="text-sm text-destructive">{error}</p> : null}
+        </CardContent>
+<% if (isStateful) { %>
+        <CardFooter>
+          <p className="text-sm text-muted-foreground">
+            <% if (i18n) { %>{t("alreadyHaveAccount")}<% } else { %>Already have an account?<% } %>{" "}
+            <Link className="font-medium text-foreground underline" href="/sign-in">
+              <% if (i18n) { %>{t("signInTitle")}<% } else { %>Sign in<% } %>
+            </Link>
+          </p>
+        </CardFooter>
+<% } %>
+      </Card>
+    </main>
+  );
+}

package/templates/auth/unauthorized.tsx.ejs

@@ -0,0 +1,28 @@
+<% if (i18n) { %>import { getTranslations } from "next-intl/server";
+import { Link } from "@/i18n/navigation";
+<% } else { %>import Link from "next/link";
+<% } %>
+
+import { Button } from "@/components/ui/button";
+
+export default <% if (i18n) { %>async <% } %>function Unauthorized() {
+<% if (i18n) { %>  const t = await getTranslations("Auth");
+
+<% } %>
+  return (
+    <main className="flex flex-1 items-center justify-center px-6 py-24">
+      <section className="mx-auto flex max-w-md flex-col items-center gap-4 text-center">
+        <p className="text-sm font-medium tracking-[0.2em] text-muted-foreground uppercase">
+          <% if (i18n) { %>{t("authenticationRequired")}<% } else { %>Authentication required<% } %>
+        </p>
+        <h1 className="text-4xl font-semibold tracking-tight"><% if (i18n) { %>{t("signInToContinue")}<% } else { %>Sign in to continue<% } %></h1>
+        <p className="text-muted-foreground">
+          <% if (i18n) { %>{t("protectedAction")}<% } else { %>This action is protected. Sign in and then try again.<% } %>
+        </p>
+        <Button asChild>
+          <Link href="/sign-in"><% if (i18n) { %>{t("goToSignIn")}<% } else { %>Go to sign in<% } %></Link>
+        </Button>
+      </section>
+    </main>
+  );
+}

package/templates/core/layout.tsx.ejs

@@ -0,0 +1,36 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "<%= projectName %>",
+  description: "Generated with Scale Stack",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html
+      lang="en"
+      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+    >
+      <body className="min-h-full flex flex-col">
+        {/* Scale Stack: wrap with NuqsAdapter and other root providers under src/app/_providers/ */}
+        {children}
+      </body>
+    </html>
+  );
+}

package/templates/core/loading.tsx.ejs

@@ -0,0 +1,7 @@
+export default function Loading() {
+  return (
+    <div className="flex flex-1 items-center justify-center p-8">
+      <p className="text-zinc-500 dark:text-zinc-400">Loading…</p>
+    </div>
+  );
+}

package/templates/core/next.config.ts.ejs

@@ -0,0 +1,33 @@
+import "./src/env";
+import type { NextConfig } from "next";
+<% if (nextIntl) { %>import createNextIntlPlugin from "next-intl/plugin";
+<% } %>
+/**
+ * PRD §7.3 — Browser log forwarding uses `NODE_ENV` only:
+ * - `development` → all browser console output to the terminal
+ * - `production` → disabled
+ * - any other value (e.g. `staging`) → `"error"` only
+ */
+function browserToTerminal(): boolean | "error" {
+  if (process.env.NODE_ENV === "development") return true;
+  if (process.env.NODE_ENV === "production") return false;
+  return "error";
+}
+
+const nextConfig: NextConfig = {
+  reactCompiler: true,
+  cacheComponents: true,
+  output: "standalone",
+  experimental: {
+    viewTransition: true,
+<% if (authInterrupts) { %>    authInterrupts: true,
+<% } %>  },
+  typedRoutes: true,
+  logging: {
+    browserToTerminal: browserToTerminal(),
+  },
+};
+
+<% if (nextIntl) { %>const withNextIntl = createNextIntlPlugin();
+
+export default withNextIntl(nextConfig);<% } else { %>export default nextConfig;<% } %>

package/templates/error-handling/catch-all-not-found-page.tsx.ejs

@@ -0,0 +1,5 @@
+import { notFound } from "next/navigation";
+
+export default function CatchAllNotFoundPage(): never {
+  notFound();
+}

package/templates/error-handling/error.tsx.ejs

@@ -0,0 +1,33 @@
+"use client";
+
+<% if (i18n) { %>import { useTranslations } from "next-intl";
+<% } %>
+import { Button } from "@/components/ui/button";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+<% if (i18n) { %>  const t = useTranslations("Errors");
+
+<% } %>
+  return (
+    <main className="flex flex-1 items-center justify-center px-6 py-24">
+      <section className="mx-auto flex max-w-md flex-col items-center gap-4 text-center">
+        <p className="text-sm font-medium tracking-[0.2em] text-muted-foreground uppercase">
+          <% if (i18n) { %>{t("errorEyebrow")}<% } else { %>Error<% } %>
+        </p>
+        <h1 className="text-3xl font-semibold tracking-tight">
+          <% if (i18n) { %>{t("errorTitle")}<% } else { %>Something went wrong<% } %>
+        </h1>
+        <p className="text-muted-foreground">
+          {error.message || <% if (i18n) { %>t("unexpectedError")<% } else { %>"An unexpected error occurred."<% } %>}
+        </p>
+        <Button onClick={reset}><% if (i18n) { %>{t("tryAgain")}<% } else { %>Try again<% } %></Button>
+      </section>
+    </main>
+  );
+}

package/templates/error-handling/global-error.tsx.ejs

@@ -0,0 +1,32 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <main className="flex min-h-screen items-center justify-center px-6 py-24">
+          <section className="mx-auto flex max-w-md flex-col items-center gap-4 text-center">
+            <p className="text-sm font-medium tracking-[0.2em] text-muted-foreground uppercase">
+              Global error
+            </p>
+            <h1 className="text-3xl font-semibold tracking-tight">
+              The app failed to load
+            </h1>
+            <p className="text-muted-foreground">
+              {error.message || "An unexpected root layout error occurred."}
+            </p>
+            <Button onClick={reset}>Try again</Button>
+          </section>
+        </main>
+      </body>
+    </html>
+  );
+}

package/templates/error-handling/not-found.tsx.ejs

@@ -0,0 +1,28 @@
+<% if (i18n) { %>import { getTranslations } from "next-intl/server";
+import { Link } from "@/i18n/navigation";
+<% } else { %>import Link from "next/link";
+<% } %>
+
+import { Button } from "@/components/ui/button";
+
+export default <% if (i18n) { %>async <% } %>function NotFound() {
+<% if (i18n) { %>  const t = await getTranslations("Errors");
+
+<% } %>
+  return (
+    <main className="flex flex-1 items-center justify-center px-6 py-24">
+      <section className="mx-auto flex max-w-md flex-col items-center gap-4 text-center">
+        <p className="text-sm font-medium tracking-[0.2em] text-muted-foreground uppercase">
+          <% if (i18n) { %>{t("notFoundEyebrow")}<% } else { %>Scale Stack<% } %>
+        </p>
+        <h1 className="text-4xl font-semibold tracking-tight"><% if (i18n) { %>{t("notFoundTitle")}<% } else { %>Page not found<% } %></h1>
+        <p className="text-muted-foreground">
+          <% if (i18n) { %>{t("notFoundDescription")}<% } else { %>The page you are looking for does not exist.<% } %>
+        </p>
+        <Button asChild>
+          <Link href="/"><% if (i18n) { %>{t("goHome")}<% } else { %>Go home<% } %></Link>
+        </Button>
+      </section>
+    </main>
+  );
+}

package/templates/eslint-prettier/.prettierignore.ejs

@@ -0,0 +1,29 @@
+# Build output
+.next/
+out/
+build/
+dist/
+coverage/
+
+# Dependencies
+node_modules/
+pnpm-lock.yaml
+
+# Assets
+public/
+
+# Generated
+next-env.d.ts
+src/components/ui/
+src/hooks/use-mobile.ts
+<% if (ignoreAiElementsGeneratedOutput) { %>
+src/components/ai-elements/
+<% } %>
+<% if (ignorePrismaGeneratedOutput) { %>prisma/generated/
+<% } %>
+# Scale Stack state
+.scale-stack/
+
+# Vendor skills
+.agents/
+skills-lock.json

package/templates/eslint-prettier/eslint.config.mjs.ejs

@@ -0,0 +1,31 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+import prettier from "eslint-config-prettier/flat";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  prettier,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+    // Generated by shadcn/ui when the UI phase runs.
+    "src/components/ui/**",
+    "src/hooks/use-mobile.ts",
+<% if (ignoreAiElementsGeneratedOutput) { %>    // Generated by AI Elements when the AI chat phase is selected.
+    "src/components/ai-elements/**",
+<% } %>
+    ".scale-stack/**",
+    ".agents/**",
+    "skills-lock.json",
+<% if (ignorePrismaGeneratedOutput) { %>    // Generated by Prisma when the ORM phase is selected.
+    "prisma/generated/**",
+<% } %>  ]),
+]);
+
+export default eslintConfig;

package/templates/form-handling/dashboard-page.tsx.ejs

@@ -0,0 +1,33 @@
+<% if (i18n) { %>import { getTranslations } from "next-intl/server";
+
+<% } %>
+import { ExampleForm } from "./_components/ExampleForm";
+
+export default <% if (i18n) { %>async <% } %>function DashboardPage() {
+<% if (i18n) { %>  const t = await getTranslations("Dashboard");
+
+<% } %>
+  return (
+    <main className="flex flex-1 flex-col px-6 py-16">
+      <section className="mx-auto flex w-full max-w-5xl flex-col gap-6">
+        <div className="space-y-4">
+          <p className="text-sm font-medium tracking-[0.2em] text-muted-foreground uppercase">
+            <% if (i18n) { %>{t("eyebrow")}<% } else { %>Dashboard<% } %>
+          </p>
+          <div className="space-y-3">
+            <h1 className="max-w-3xl text-3xl font-semibold tracking-tight text-balance">
+              <% if (i18n) { %>{t("title")}<% } else { %>React Hook Form and next-safe-action are wired together.<% } %>
+            </h1>
+            <p className="max-w-3xl text-muted-foreground text-balance">
+              <% if (i18n) { %>{t("description")}<% } else { %>This route is the single generated example for mutations: shadcn
+              field components render the UI, React Hook Form owns client state,
+              Zod validates both client and server input, and next-safe-action
+              returns typed data and mapped validation errors.<% } %>
+            </p>
+          </div>
+        </div>
+        <ExampleForm />
+      </section>
+    </main>
+  );
+}

package/templates/form-handling/example-form-action.ts.ejs

@@ -0,0 +1,50 @@
+"use server";
+
+import { <%= hasAuth ? "authActionClient as actionClient" : "actionClient" %> } from "@/lib/safe-action";
+import { returnValidationErrors } from "next-safe-action";
+import { z } from "zod";
+import { exampleFormSchema, planValues } from "../_lib/example-form-schema";
+
+const exampleFormOutputSchema = z.object({
+  message: z.string(),
+  workspace: z.string(),
+  plan: z.enum(planValues),
+  notificationCount: z.number().int().nonnegative(),
+  submittedAt: z.iso.datetime(),
+});
+
+type ExampleFormOutput = z.output<typeof exampleFormOutputSchema>;
+
+export const exampleFormAction = actionClient
+  .metadata({ actionName: "dashboard.exampleForm" })
+  .inputSchema(exampleFormSchema)
+  .outputSchema(exampleFormOutputSchema)
+  .action(async ({ parsedInput }) => {
+    if (parsedInput.workspace === "admin") {
+      return returnValidationErrors(exampleFormSchema, {
+        workspace: {
+          _errors: ["The admin workspace slug is reserved."],
+        },
+      });
+    }
+
+    if (parsedInput.plan === "enterprise" && parsedInput.notes.length < 12) {
+      return returnValidationErrors(exampleFormSchema, {
+        notes: {
+          _errors: [
+            "Enterprise demos need a short note so the server can validate business rules.",
+          ],
+        },
+      });
+    }
+
+    const result: ExampleFormOutput = {
+      message: `Created a typed ${parsedInput.plan} demo request for ${parsedInput.name}.`,
+      workspace: parsedInput.workspace,
+      plan: parsedInput.plan,
+      notificationCount: parsedInput.notifications.length,
+      submittedAt: new Date().toISOString(),
+    };
+
+    return result;
+  });

package/templates/form-handling/example-form-schema.ts.ejs

@@ -0,0 +1,87 @@
+import { z } from "zod";
+
+export const planValues = ["starter", "team", "enterprise"] as const;
+
+export const planOptions = [
+  {
+    label: "Starter",
+    value: "starter",
+    description: "Validate the full stack with a small team workflow.",
+  },
+  {
+    label: "Team",
+    value: "team",
+    description: "Add collaboration settings and notification preferences.",
+  },
+  {
+    label: "Enterprise",
+    value: "enterprise",
+    description: "Exercise server-side business validation before submit.",
+  },
+] as const satisfies ReadonlyArray<{
+  label: string;
+  value: (typeof planValues)[number];
+  description: string;
+}>;
+
+export const notificationValues = ["product", "security", "billing"] as const;
+
+export const notificationOptions = [
+  {
+    label: "Product updates",
+    value: "product",
+    description: "Release notes and feature announcements.",
+  },
+  {
+    label: "Security alerts",
+    value: "security",
+    description: "Actionable account and workspace security events.",
+  },
+  {
+    label: "Billing notices",
+    value: "billing",
+    description: "Plan, invoice, and payment notifications.",
+  },
+] as const satisfies ReadonlyArray<{
+  label: string;
+  value: (typeof notificationValues)[number];
+  description: string;
+}>;
+
+export const exampleFormSchema = z.object({
+  name: z
+    .string()
+    .trim()
+    .min(2, "Enter at least 2 characters.")
+    .max(80, "Name must be 80 characters or fewer."),
+  email: z
+    .string()
+    .email("Enter a valid email address.")
+    .max(120, "Email must be 120 characters or fewer."),
+  workspace: z
+    .string()
+    .trim()
+    .min(3, "Use at least 3 characters.")
+    .max(40, "Use 40 characters or fewer.")
+    .regex(/^[a-z0-9-]+$/, "Use lowercase letters, numbers, and hyphens only."),
+  plan: z.enum(planValues),
+  notifications: z
+    .array(z.enum(notificationValues))
+    .min(1, "Select at least one notification type."),
+  acceptTerms: z.boolean().refine((value) => value, {
+    message: "Accept the demo terms before submitting.",
+  }),
+  notes: z.string().max(280, "Keep notes under 280 characters."),
+});
+
+export type ExampleFormValues = z.infer<typeof exampleFormSchema>;
+
+export const exampleFormDefaultValues: ExampleFormValues = {
+  name: "",
+  email: "",
+  workspace: "",
+  plan: "starter",
+  notifications: ["product"],
+  acceptTerms: false,
+  notes: "",
+};