create-pyro 0.1.0 → 0.2.0

package/template/apps/web/app/lib/api.ts

@@ -0,0 +1,47 @@
+import type { ApiError } from "@repo/shared";
+
+export class ApiRequestError extends Error {
+  code: string;
+  status: number;
+  details?: unknown;
+
+  constructor(
+    message: string,
+    code: string,
+    status: number,
+    details?: unknown,
+  ) {
+    super(message);
+    this.name = "ApiRequestError";
+    this.code = code;
+    this.status = status;
+    this.details = details;
+  }
+}
+
+type JsonResponse = { status: number; json: () => Promise<unknown> };
+
+type DataOf<R> = R extends { json: () => Promise<infer J> }
+  ? J extends { success: true; data: infer D }
+    ? D
+    : never
+  : never;
+
+/**
+ * Reads an api response and returns its `data`, typed from the hono client.
+ * Throws `ApiRequestError` for an `{ success: false }` body.
+ */
+export async function unwrap<R extends JsonResponse>(
+  response: R,
+): Promise<DataOf<R>> {
+  const json = (await response.json()) as
+    | { success: true; data: unknown }
+    | ApiError;
+
+  if (!json.success) {
+    const { message, code, details } = json.error;
+    throw new ApiRequestError(message, code, response.status, details);
+  }
+
+  return json.data as DataOf<R>;
+}

package/template/apps/web/app/lib/auth-client.ts

@@ -0,0 +1,13 @@
+import { createAuthClient } from "better-auth/react";
+import { publicApiUrl } from "./public-env";
+
+let client: ReturnType<typeof createAuthClient> | undefined;
+
+/**
+ * The Better Auth client. Created on first use because it needs the browser's
+ * runtime config, so only call it from event handlers and effects.
+ */
+export function authClient() {
+  client ??= createAuthClient({ baseURL: `${publicApiUrl()}/api/auth` });
+  return client;
+}

package/template/apps/web/app/lib/env.server.ts

@@ -0,0 +1,11 @@
+import { webEnv } from "@repo/config";
+import type { PublicEnv } from "./public-env";
+
+export const serverEnv = webEnv;
+
+/** The subset of the server's env that is safe to send to the browser. */
+export function getPublicEnv(): PublicEnv {
+  return {
+    API_URL: webEnv.PUBLIC_API_URL,
+  };
+}

package/template/apps/web/app/lib/public-env.ts

@@ -0,0 +1,17 @@
+// Runtime config for the browser. The root loader serializes it into
+// `window.__ENV__`, so one built image works on any origin.
+
+export type PublicEnv = {
+  API_URL: string;
+};
+
+declare global {
+  interface Window {
+    __ENV__?: Partial<PublicEnv>;
+  }
+}
+
+/** The origin the browser reaches the api on. Browser-only. */
+export function publicApiUrl(): string {
+  return window.__ENV__?.API_URL ?? window.location.origin;
+}

package/template/apps/web/app/lib/session.server.ts

@@ -0,0 +1,31 @@
+import { redirect } from "react-router";
+import { serverEnv } from "./env.server";
+
+export type Session = {
+  user: { id: string; name: string; email: string };
+  session: { id: string; expiresAt: string };
+};
+
+/** The request's session, or null when signed out or the api is unreachable. */
+export async function getSession(request: Request): Promise<Session | null> {
+  try {
+    const res = await fetch(
+      `${serverEnv.INTERNAL_API_URL}/api/auth/get-session`,
+      {
+        headers: { cookie: request.headers.get("cookie") ?? "" },
+      },
+    );
+    if (!res.ok) return null;
+    const data = (await res.json()) as Session | null;
+    return data?.user ? data : null;
+  } catch {
+    return null;
+  }
+}
+
+/** The request's session; redirects to the homepage when signed out. */
+export async function requireSession(request: Request): Promise<Session> {
+  const session = await getSession(request);
+  if (!session) throw redirect("/");
+  return session;
+}

package/template/apps/web/app/lib/utils.ts

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

package/template/apps/web/app/root.tsx

@@ -0,0 +1,86 @@
+import {
+  isRouteErrorResponse,
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  useRouteLoaderData,
+} from "react-router";
+import type { Route } from "./+types/root";
+import "./app.css";
+import { getPublicEnv } from "./lib/env.server";
+
+export function loader() {
+  return { env: getPublicEnv() };
+}
+
+export const links: Route.LinksFunction = () => [
+  { rel: "icon", type: "image/svg+xml", href: "/favicon.svg" },
+];
+
+/** Hands the browser its runtime config (see lib/public-env.ts). */
+function PublicEnvScript() {
+  const data = useRouteLoaderData<typeof loader>("root");
+  const json = JSON.stringify(data?.env ?? {}).replace(/</g, "\\u003c");
+
+  return (
+    <script dangerouslySetInnerHTML={{ __html: `window.__ENV__=${json}` }} />
+  );
+}
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        {children}
+        <ScrollRestoration />
+        <PublicEnvScript />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export default function App() {
+  return <Outlet />;
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  let title = "Something went wrong";
+  let details = "An unexpected error occurred. Please try again in a moment.";
+  let stack: string | undefined;
+
+  if (isRouteErrorResponse(error)) {
+    if (error.status === 404) {
+      title = "Page not found";
+      details = "The page you are looking for does not exist.";
+    } else if (error.statusText) {
+      details = error.statusText;
+    }
+  } else if (import.meta.env.DEV && error instanceof Error) {
+    details = error.message;
+    stack = error.stack;
+  }
+
+  return (
+    <main className="mx-auto flex min-h-svh max-w-2xl flex-col justify-center gap-4 px-6 py-12">
+      <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
+      <p className="text-ink-muted">{details}</p>
+      <a href="/" className="font-medium text-accent hover:underline">
+        Back to home
+      </a>
+      {stack && (
+        <pre className="overflow-x-auto rounded-lg border border-line bg-surface-raised p-4 text-sm">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </main>
+  );
+}

package/template/apps/web/app/routes/dashboard.tsx

@@ -0,0 +1,81 @@
+import { useNavigate } from "react-router";
+import { unwrap } from "~/lib/api";
+import { api } from "~/lib/api.server";
+import { authClient } from "~/lib/auth-client";
+import { requireSession } from "~/lib/session.server";
+import type { Route } from "./+types/dashboard";
+
+export function meta() {
+  return [{ title: "Dashboard · my-pyro-app" }];
+}
+
+const formatDate = (iso: string) =>
+  new Intl.DateTimeFormat("en", {
+    dateStyle: "medium",
+    timeStyle: "short",
+    timeZone: "UTC",
+  }).format(new Date(iso));
+
+export async function loader({ request }: Route.LoaderArgs) {
+  await requireSession(request);
+
+  // Typed end to end: the response shape comes from the api's route.
+  const user = await unwrap(await api(request).api.me.$get());
+
+  return {
+    user,
+    joined: `${formatDate(user.createdAt)} UTC`,
+  };
+}
+
+export default function Dashboard({ loaderData }: Route.ComponentProps) {
+  const { user, joined } = loaderData;
+  const navigate = useNavigate();
+
+  async function signOut() {
+    await authClient().signOut();
+    navigate("/", { replace: true });
+  }
+
+  const details = [
+    ["Name", user.name],
+    ["Email", user.email],
+    ["Email verified", user.emailVerified ? "Yes" : "No"],
+    ["User ID", user.id],
+    ["Joined", joined],
+  ] as const;
+
+  return (
+    <main className="mx-auto flex min-h-svh max-w-xl flex-col justify-center gap-8 px-6 py-12">
+      <header className="flex items-end justify-between gap-4">
+        <div className="flex flex-col gap-2">
+          <span className="font-mono text-xs uppercase tracking-widest text-accent">
+            Dashboard
+          </span>
+          <h1 className="text-3xl font-semibold tracking-tight">
+            Hi, {user.name}
+          </h1>
+        </div>
+        <button
+          type="button"
+          onClick={signOut}
+          className="rounded-lg border border-line px-3 py-1.5 text-sm font-medium transition hover:bg-surface-raised"
+        >
+          Sign out
+        </button>
+      </header>
+
+      <dl className="divide-y divide-line rounded-xl border border-line bg-surface-raised shadow-sm">
+        {details.map(([label, value]) => (
+          <div
+            key={label}
+            className="grid grid-cols-[8rem_1fr] gap-4 px-5 py-3 text-sm"
+          >
+            <dt className="text-ink-muted">{label}</dt>
+            <dd className="break-all font-medium">{value}</dd>
+          </div>
+        ))}
+      </dl>
+    </main>
+  );
+}

package/template/apps/web/app/routes/home.tsx

@@ -0,0 +1,161 @@
+import { type FormEvent, useState } from "react";
+import { Link, useNavigate } from "react-router";
+import { signInSchema, signUpSchema } from "@repo/shared";
+import { authClient } from "~/lib/auth-client";
+import { getSession } from "~/lib/session.server";
+import { cn } from "~/lib/utils";
+import type { Route } from "./+types/home";
+
+export function meta() {
+  return [{ title: "my-pyro-app" }];
+}
+
+export async function loader({ request }: Route.LoaderArgs) {
+  const session = await getSession(request);
+  return { user: session?.user ?? null };
+}
+
+type Mode = "sign-in" | "sign-up";
+
+export default function Home({ loaderData }: Route.ComponentProps) {
+  const { user } = loaderData;
+
+  return (
+    <main className="mx-auto flex min-h-svh max-w-sm flex-col justify-center gap-8 px-6 py-12">
+      <header className="flex flex-col gap-2">
+        <span className="font-mono text-xs uppercase tracking-widest text-accent">
+          my-pyro-app
+        </span>
+        <h1 className="text-3xl font-semibold tracking-tight">
+          {user ? `Welcome back, ${user.name}` : "Welcome"}
+        </h1>
+        <p className="text-ink-muted">
+          {user
+            ? "You're signed in."
+            : "Sign in, or create an account to get started."}
+        </p>
+      </header>
+
+      {user ? (
+        <Link
+          to="/dashboard"
+          className="rounded-lg bg-accent px-4 py-2.5 text-center font-medium text-white transition hover:bg-accent-strong"
+        >
+          Go to dashboard
+        </Link>
+      ) : (
+        <AuthForm />
+      )}
+    </main>
+  );
+}
+
+function AuthForm() {
+  const navigate = useNavigate();
+  const [mode, setMode] = useState<Mode>("sign-in");
+  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+
+  async function onSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setError(null);
+
+    const values = Object.fromEntries(new FormData(event.currentTarget));
+    const schema = mode === "sign-in" ? signInSchema : signUpSchema;
+    const parsed = schema.safeParse(values);
+    if (!parsed.success) {
+      setError(parsed.error.issues[0]?.message ?? "Check the form");
+      return;
+    }
+
+    setPending(true);
+    const client = authClient();
+    const { error } =
+      mode === "sign-in"
+        ? await client.signIn.email(signInSchema.parse(values))
+        : await client.signUp.email(signUpSchema.parse(values));
+    setPending(false);
+
+    if (error) {
+      setError(error.message ?? "Something went wrong, please try again");
+      return;
+    }
+    navigate("/dashboard");
+  }
+
+  function switchTo(next: Mode) {
+    setMode(next);
+    setError(null);
+  }
+
+  return (
+    <div className="flex flex-col gap-6 rounded-xl border border-line bg-surface-raised p-6 shadow-sm">
+      <div className="grid grid-cols-2 gap-1 rounded-lg bg-surface p-1 text-sm">
+        {(["sign-in", "sign-up"] as const).map((m) => (
+          <button
+            key={m}
+            type="button"
+            onClick={() => switchTo(m)}
+            className={cn(
+              "rounded-md px-3 py-1.5 font-medium transition",
+              mode === m
+                ? "bg-surface-raised text-ink shadow-sm"
+                : "text-ink-muted hover:text-ink",
+            )}
+          >
+            {m === "sign-in" ? "Sign in" : "Create account"}
+          </button>
+        ))}
+      </div>
+
+      <form onSubmit={onSubmit} noValidate className="flex flex-col gap-4">
+        {mode === "sign-up" && (
+          <Field label="Name" name="name" autoComplete="name" />
+        )}
+        <Field label="Email" name="email" type="email" autoComplete="email" />
+        <Field
+          label="Password"
+          name="password"
+          type="password"
+          autoComplete={
+            mode === "sign-in" ? "current-password" : "new-password"
+          }
+        />
+
+        {error && (
+          <p role="alert" className="text-sm text-danger">
+            {error}
+          </p>
+        )}
+
+        <button
+          type="submit"
+          disabled={pending}
+          className="rounded-lg bg-accent px-4 py-2.5 font-medium text-white transition hover:bg-accent-strong disabled:opacity-60"
+        >
+          {pending
+            ? "Please wait…"
+            : mode === "sign-in"
+              ? "Sign in"
+              : "Create account"}
+        </button>
+      </form>
+    </div>
+  );
+}
+
+function Field({
+  label,
+  ...props
+}: { label: string } & React.InputHTMLAttributes<HTMLInputElement>) {
+  return (
+    <label className="flex flex-col gap-1.5 text-sm font-medium">
+      {label}
+      <input
+        required
+        {...props}
+        className="rounded-lg border border-line bg-surface-raised px-3 py-2 font-normal outline-none transition focus:border-accent focus:ring-2 focus:ring-accent/20"
+      />
+    </label>
+  );
+}

package/template/apps/web/app/routes.ts

@@ -0,0 +1,6 @@
+import { index, type RouteConfig, route } from "@react-router/dev/routes";
+
+export default [
+  index("routes/home.tsx"),
+  route("dashboard", "routes/dashboard.tsx"),
+] satisfies RouteConfig;

package/template/apps/web/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@repo/web",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "react-router build",
+    "dev": "dotenv-run -- react-router dev",
+    "start": "dotenv-run -- react-router-serve ./dist/server/index.js",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "react-router typegen && tsc"
+  },
+  "dependencies": {
+    "@react-router/node": "^8.5.0",
+    "@react-router/serve": "^8.5.0",
+    "@repo/config": "workspace:*",
+    "@repo/shared": "workspace:*",
+    "better-auth": "catalog:",
+    "clsx": "^2.1.1",
+    "hono": "catalog:",
+    "isbot": "^5.2.2",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "react-router": "^8.5.0",
+    "tailwind-merge": "^3.7.0"
+  },
+  "devDependencies": {
+    "@dotenv-run/cli": "catalog:",
+    "@react-router/dev": "^8.5.0",
+    "@repo/api": "workspace:*",
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "tailwindcss": "^4.3.3",
+    "typescript": "catalog:",
+    "vite": "^8.3.5",
+    "vitest": "catalog:"
+  }
+}

package/template/apps/web/public/favicon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <title>Pyro</title>
+  <path fill="#e8590c" d="M16 2c1.5 5-3 7.5-3 12a3 3 0 0 0 6 0c0-1.2-.4-2.3-1-3.3 3.6 1.8 7 5.6 7 10.3a9 9 0 0 1-18 0c0-7.4 7.2-11 9-19Z"/>
+  <path fill="#ffd8a8" d="M16 20c1.6 1.4 3 3.2 3 5a3 3 0 0 1-6 0c0-1.8 1.4-3.6 3-5Z"/>
+</svg>

package/template/apps/web/react-router.config.ts

@@ -0,0 +1,6 @@
+import type { Config } from "@react-router/dev/config";
+
+export default {
+  ssr: true,
+  buildDirectory: "dist",
+} satisfies Config;

package/template/apps/web/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "lib": ["es2024", "dom", "dom.iterable"],
+    "types": ["node", "vite/client"],
+    "jsx": "react-jsx",
+    "rootDirs": [".", "./.react-router/types"],
+    "paths": {
+      "~/*": ["./app/*"]
+    },
+    "esModuleInterop": true,
+    "verbatimModuleSyntax": true,
+    "resolveJsonModule": true
+  },
+  "include": [
+    "**/*",
+    "**/.server/**/*",
+    "**/.client/**/*",
+    ".react-router/types/**/*"
+  ],
+  "exclude": ["dist", "node_modules"]
+}

package/template/apps/web/vite.config.ts

@@ -0,0 +1,19 @@
+import { reactRouter } from "@react-router/dev/vite";
+import tailwindcss from "@tailwindcss/vite";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [tailwindcss(), reactRouter()],
+  resolve: {
+    tsconfigPaths: true,
+  },
+  server: {
+    port: 3000,
+    strictPort: true,
+  },
+  optimizeDeps: {
+    // Route modules load lazily, so without this Vite discovers their deps on
+    // the first page visit and force-reloads the page.
+    entries: ["./app/**/*.tsx"],
+  },
+});

package/template/apps/web/vitest.config.ts

@@ -0,0 +1,13 @@
+import { fileURLToPath } from "node:url";
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      "~": fileURLToPath(new URL("./app", import.meta.url)),
+    },
+  },
+  test: {
+    include: ["app/**/*.test.{ts,tsx}"],
+  },
+});

package/template/biome.json

@@ -0,0 +1,53 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.6.3/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "ignoreUnknown": false,
+    "includes": ["**", "!**/drizzle", "!**/pnpm-lock.yaml"]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "preset": "recommended"
+    }
+  },
+  "css": {
+    "parser": {
+      "tailwindDirectives": true
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "double"
+    }
+  },
+  "assist": {
+    "enabled": true,
+    "actions": {
+      "source": {
+        "organizeImports": {
+          "level": "on",
+          "options": {
+            "groups": [
+              ":URL:",
+              ":NODE:",
+              [":PACKAGE:", "!@repo/**"],
+              "@repo/**",
+              ":ALIAS:",
+              ":PATH:"
+            ]
+          }
+        }
+      }
+    }
+  }
+}

package/template/compose.dev.yml

@@ -0,0 +1,26 @@
+name: my-pyro-app-dev
+
+services:
+  postgres:
+    image: postgres:18-alpine
+    restart: unless-stopped
+    environment:
+      POSTGRES_USER: ${POSTGRES_USER:-app}
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:-password}
+      POSTGRES_DB: ${POSTGRES_DB:-app}
+    ports:
+      - "15432:5432"
+    volumes:
+      - postgres_dev_data:/var/lib/postgresql
+    healthcheck:
+      test:
+        [
+          "CMD-SHELL",
+          "pg_isready -U ${POSTGRES_USER:-app} -d ${POSTGRES_DB:-app}",
+        ]
+      interval: 5s
+      timeout: 5s
+      retries: 10
+
+volumes:
+  postgres_dev_data: