create-nexst-monorepo 0.1.0

package/template/apps/web/src/components/tooltip/tooltip.stories.tsx

@@ -0,0 +1,237 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { Calendar, Copy, Download, Info, Save, Settings, Trash2 } from "lucide-react";
+import { expect, userEvent, within } from "storybook/test";
+import { Button } from "@/components/button/button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";
+
+const meta: Meta<typeof Tooltip> = {
+  component: Tooltip,
+  decorators: [
+    (Story) => (
+      <TooltipProvider>
+        <Story />
+      </TooltipProvider>
+    ),
+  ],
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Tooltip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    await userEvent.hover(within(canvasElement).getByRole("button", { name: "Information" }));
+
+    await expect(
+      await within(document.body).findByText("Click to view more details"),
+    ).toBeInTheDocument();
+  },
+  render: () => (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline">
+          <Info className="h-4 w-4" />
+          Information
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>Click to view more details</p>
+      </TooltipContent>
+    </Tooltip>
+  ),
+};
+
+export const IconButton: Story = {
+  render: () => (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button aria-label="Settings" size="icon" variant="ghost">
+          <Settings className="h-4 w-4" />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>Settings</p>
+      </TooltipContent>
+    </Tooltip>
+  ),
+};
+
+export const Positions: Story = {
+  render: () => (
+    <div className="grid grid-cols-3 gap-8">
+      <div />
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button aria-label="Top position" size="icon" variant="outline">
+            <Calendar className="h-4 w-4" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="top">
+          <p>Top position</p>
+        </TooltipContent>
+      </Tooltip>
+      <div />
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button aria-label="Left position" size="icon" variant="outline">
+            <Calendar className="h-4 w-4" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="left">
+          <p>Left position</p>
+        </TooltipContent>
+      </Tooltip>
+      <div />
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button aria-label="Right position" size="icon" variant="outline">
+            <Calendar className="h-4 w-4" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="right">
+          <p>Right position</p>
+        </TooltipContent>
+      </Tooltip>
+
+      <div />
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button aria-label="Bottom position" size="icon" variant="outline">
+            <Calendar className="h-4 w-4" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">
+          <p>Bottom position</p>
+        </TooltipContent>
+      </Tooltip>
+      <div />
+    </div>
+  ),
+};
+
+export const ActionButtons: Story = {
+  render: () => (
+    <div className="flex gap-2">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button aria-label="Copy to clipboard" size="icon" variant="ghost">
+            <Copy className="h-4 w-4" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Copy to clipboard</p>
+        </TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button aria-label="Download file" size="icon" variant="ghost">
+            <Download className="h-4 w-4" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Download file</p>
+        </TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button aria-label="Save changes" size="icon" variant="ghost">
+            <Save className="h-4 w-4" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Save changes</p>
+        </TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button aria-label="Delete permanently" size="icon" variant="ghost">
+            <Trash2 className="h-4 w-4 text-red-500" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p className="text-red-500">Delete permanently</p>
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  ),
+};
+
+export const WithKeyboardShortcut: Story = {
+  render: () => (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline">
+          <Save className="h-4 w-4" />
+          Save
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <div className="flex items-center gap-2">
+          <span>Save document</span>
+          <kbd className="border-border bg-muted pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none">
+            <span className="text-xs">⌘</span>S
+          </kbd>
+        </div>
+      </TooltipContent>
+    </Tooltip>
+  ),
+};
+
+export const DetailedInformation: Story = {
+  render: () => (
+    <div className="py-12">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="outline">
+            <Info className="h-4 w-4" />
+            Storage Info
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent className="max-w-xs">
+          <div className="space-y-1">
+            <p className="font-semibold">Storage Usage</p>
+            <p className="text-muted-foreground text-xs">
+              You've used 4.2 GB of your 10 GB storage limit. Upgrade to get more space.
+            </p>
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  ),
+};
+
+export const CustomOffset: Story = {
+  render: () => (
+    <div className="flex gap-4 py-6">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button size="sm" variant="outline">
+            Default offset
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>5px offset (default)</p>
+        </TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button size="sm" variant="outline">
+            Large offset
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent sideOffset={20}>
+          <p>20px offset</p>
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  ),
+};

package/template/apps/web/src/components/tooltip/tooltip.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import type { ComponentPropsWithoutRef, ComponentRef, RefObject } from "react";
+import { cn } from "@/lib/utils";
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>) {
+  const Provider = TooltipPrimitive.Provider;
+  return <Provider delayDuration={delayDuration} {...props} />;
+}
+TooltipProvider.displayName = "TooltipProvider";
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipPortal = TooltipPrimitive.Portal;
+
+function TooltipContent({
+  className,
+  ref,
+  sideOffset = 4,
+  ...props
+}: ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
+  ref?: RefObject<ComponentRef<typeof TooltipPrimitive.Content> | null>;
+}) {
+  return (
+    <TooltipPrimitive.Content
+      className={cn(
+        "z-50 overflow-hidden rounded-lg px-3 py-1.5",
+        "border-border bg-popover text-popover-foreground border",
+        "text-sm text-foreground",
+        "shadow-lg shadow-black/8",
+        "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      ref={ref}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  );
+}
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger };

package/template/apps/web/src/config/csp.ts

@@ -0,0 +1,59 @@
+import "server-only";
+import { env } from "@/env";
+
+const isDev = process.env.NODE_ENV === "development";
+
+// next-themes 0.4.6 theme-init inline <script> for
+// <ThemeProvider attribute="class" disableTransitionOnChange /> (see
+// src/features/shared/provider.tsx). It gets no per-request nonce: reading one
+// via `headers()` in the layout tree above the page blocks cacheComponents'
+// static shell. Its content is fixed for our props, so a hash allowlist is the
+// correct CSP tool here.
+//
+// Turbopack renders this script differently per mode, so both are listed.
+// Regenerate when next-themes is upgraded, Turbopack's output changes, or the
+// ThemeProvider props change (tests/csp-theme-script.spec.ts fails loudly if a
+// hash goes stale):
+//   dev:  next dev  -> curl /en, extract the <script> containing "colorScheme"
+//   prod: next build && next start -> same extraction
+//   hash: sha256(scriptText), base64
+const themeScriptHashes = [
+  "'sha256-rbbnijHn7DZ6ps39myQ3cVQF1H+U/PJfHh5ei/Q2kb8='", // dev
+  "'sha256-n46vPwSWuMC0W703pBofImv82Z26xo4LXymv0E9caPk='", // prod
+];
+
+const inlineScriptHashes = [
+  "'sha256-7mu4H06fwDCjmnxxr/xNHyuQC6pLTHr4M2E4jXw5WZs='",
+  ...themeScriptHashes,
+];
+
+/** Origins the browser may call: the API (GraphQL + auth). Add CDNs/buckets here (and to img-src). */
+const connectSrc = [env.NEXT_PUBLIC_API_URL];
+
+/** Third-party origins that serve scripts, styles and iframes (widgets, embeds). */
+const thirdPartySrc: string[] = [];
+// @if auth
+// Google Identity Services (One Tap) loads its script, styles and iframe from here.
+if (env.NEXT_PUBLIC_GOOGLE_CLIENT_ID) thirdPartySrc.push("https://accounts.google.com/gsi/");
+// @endif
+
+export function generateCspHeader({ nonce }: { nonce: string }) {
+  const isHttps = !isDev && env.NEXT_PUBLIC_HOST_URL.startsWith("https://");
+
+  return `
+    default-src 'self';
+    connect-src 'self' ${[...connectSrc, ...thirdPartySrc].join(" ")} ${isDev ? "localhost:* 127.0.0.1:* ws://localhost:*" : ""};
+    script-src 'self' 'nonce-${nonce}' ${inlineScriptHashes.join(" ")} ${thirdPartySrc.join(" ")} ${isDev ? "'unsafe-eval'" : ""};
+    style-src 'self' 'unsafe-inline' ${thirdPartySrc.join(" ")};
+    frame-src 'self' ${thirdPartySrc.join(" ")};
+    img-src 'self' blob: data:;
+    font-src 'self';
+    object-src 'none';
+    base-uri 'self';
+    form-action 'self';
+    frame-ancestors 'none';
+    ${isHttps ? "upgrade-insecure-requests;" : ""}
+  `
+    .replaceAll(/\s{2,}/g, " ")
+    .trim();
+}

package/template/apps/web/src/config/routes.ts

@@ -0,0 +1,14 @@
+import { routing } from "@/i18n/routing";
+
+/** Paths reachable without a session. Everything else redirects to sign-in. */
+const publicRoutes = ["/", "/sign-in", "/sign-up", "/recovery", "/reset-password", "/verify"];
+
+/** Pages a signed-in user is bounced away from (to the dashboard). */
+export const guestOnlyRoutes = ["/sign-in", "/sign-up"];
+
+export const publicPaths = new Set([
+  ...publicRoutes,
+  ...routing.locales.flatMap((locale) =>
+    publicRoutes.map((route) => (route === "/" ? `/${locale}` : `/${locale}${route}`)),
+  ),
+]);

package/template/apps/web/src/config/site.ts

@@ -0,0 +1,5 @@
+export const siteConfig = {
+  description: "Built with the Nexst monorepo template.",
+  name: "Nexst",
+  url: "https://example.com",
+};

package/template/apps/web/src/env.ts

@@ -0,0 +1,15 @@
+import { createEnv } from "@t3-oss/env-nextjs";
+import { z } from "zod";
+
+export const env = createEnv({
+  client: {
+    NEXT_PUBLIC_API_URL: z.url().default("https://api.example.com"),
+    NEXT_PUBLIC_GOOGLE_CLIENT_ID: z.string().min(1).optional(), // @if auth
+    NEXT_PUBLIC_HOST_URL: z.url().default("https://example.com"),
+  },
+  runtimeEnv: {
+    NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
+    NEXT_PUBLIC_GOOGLE_CLIENT_ID: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID, // @if auth
+    NEXT_PUBLIC_HOST_URL: process.env.NEXT_PUBLIC_HOST_URL,
+  },
+});

package/template/apps/web/src/features/auth/auth-card.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+
+/** Centered frame shared by every auth page. */
+export function AuthCard({
+  children,
+  description,
+  footer,
+  title,
+}: Readonly<{ children: ReactNode; description?: string; footer?: ReactNode; title: string }>) {
+  return (
+    <div className="mx-auto flex w-full max-w-sm flex-col items-center gap-6 pt-20 md:pt-32">
+      <div className="space-y-1.5 text-center">
+        <h1 className="text-3xl font-bold tracking-tight">{title}</h1>
+        {description ? <p className="text-muted-foreground text-sm">{description}</p> : null}
+      </div>
+      {children}
+      {footer ? <div className="text-muted-foreground text-sm">{footer}</div> : null}
+    </div>
+  );
+}

package/template/apps/web/src/features/auth/auth-divider.tsx

@@ -0,0 +1,14 @@
+import { useTranslations } from "next-intl";
+
+/** "or" rule between the email form and the alternative sign-in methods. */
+export function AuthDivider() {
+  const t = useTranslations("Auth");
+
+  return (
+    <div className="text-muted-foreground my-5 flex items-center gap-3 text-xs">
+      <span className="bg-border h-px flex-1" />
+      {t("divider")}
+      <span className="bg-border h-px flex-1" />
+    </div>
+  );
+}

package/template/apps/web/src/features/auth/google-auth-button.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { useMutation } from "@tanstack/react-query";
+import { useTranslations } from "next-intl";
+import { Button } from "@/components/button/button";
+import { Icons } from "@/components/icons";
+import { authClient, type AuthError, isGoogleEnabled } from "@/lib/auth-client";
+import { getReturnTo } from "./lib/return-to";
+
+type Props = {
+  disabled?: boolean;
+  onError: (error: AuthError) => void;
+};
+
+/**
+ * "Continue with Google" below the email form. Renders nothing unless
+ * `NEXT_PUBLIC_GOOGLE_CLIENT_ID` is set (the API needs `GOOGLE_CLIENT_ID` and
+ * `GOOGLE_CLIENT_SECRET`). Sign-in and sign-up are the same flow: unknown
+ * Google accounts are created, known emails are linked.
+ */
+export function GoogleAuthButton({ disabled, onError }: Props) {
+  const t = useTranslations("Auth.Google");
+
+  const { isPending, mutate } = useMutation<void, AuthError>({
+    mutationFn: async () => {
+      const { error } = await authClient.signIn.social({
+        callbackURL: new URL(getReturnTo() ?? "/dashboard", window.location.origin).toString(),
+        provider: "google",
+      });
+      if (error) throw error;
+    },
+    onError,
+  });
+
+  if (!isGoogleEnabled) return null;
+
+  return (
+    <Button
+      className="w-full"
+      disabled={disabled}
+      isLoading={isPending}
+      onClick={() => mutate()}
+      variant="outline"
+    >
+      {isPending ? null : <Icons.Google className="size-5" />}
+      {t("continueButton")}
+    </Button>
+  );
+}

package/template/apps/web/src/features/auth/google-one-tap.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { useEffect } from "react";
+import { authClient, isGoogleEnabled } from "@/lib/auth-client";
+
+/** Shows Google One Tap to signed-out visitors. Renders nothing itself. */
+export function GoogleOneTap() {
+  useEffect(() => {
+    if (!isGoogleEnabled) return;
+
+    let cancelled = false;
+    void authClient
+      .getSession()
+      .then(({ data }) => (data || cancelled ? undefined : authClient.oneTap()))
+      .catch(() => {});
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return null;
+}

package/template/apps/web/src/features/auth/lib/auth-error.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from "vitest";
+import type { AuthError } from "@/lib/auth-client";
+import { authFallbackMessage } from "./auth-error";
+
+describe("authFallbackMessage", () => {
+  const t = (key: string) => `translated:${key}`;
+
+  it("replaces the browser wording of a dropped connection with translated copy", () => {
+    const error = new TypeError("NetworkError when attempting to fetch resource.");
+    expect(authFallbackMessage(error as unknown as AuthError, t)).toBe("translated:networkError");
+  });
+
+  it("shows the server's message for any other failure", () => {
+    const error: AuthError = { message: "Too many attempts", status: 429, statusText: "" };
+    expect(authFallbackMessage(error, t)).toBe("Too many attempts");
+  });
+
+  it("falls back to the generic error when there is no message", () => {
+    const error: AuthError = { status: 500, statusText: "" };
+    expect(authFallbackMessage(error, t)).toBe("translated:defaultError");
+  });
+});

package/template/apps/web/src/features/auth/lib/auth-error.ts

@@ -0,0 +1,16 @@
+import type { AuthError } from "@/lib/auth-client";
+import { isNetworkError } from "@/lib/network-error";
+
+/**
+ * Copy for an auth failure that has no dedicated message. A dropped connection
+ * gets its own text — the browser's wording for it ("NetworkError when
+ * attempting to fetch resource.") means nothing to the user — anything else
+ * shows the server's message, then the generic error.
+ *
+ * @param error - What the auth client threw or returned
+ * @param tErrors - `useTranslations('Auth.Errors')` from the calling component
+ */
+export function authFallbackMessage(error: AuthError, tErrors: (key: string) => string): string {
+  if (isNetworkError(error)) return tErrors("networkError");
+  return error.message || tErrors("defaultError");
+}

package/template/apps/web/src/features/auth/lib/return-to.test.ts

@@ -0,0 +1,41 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { getReturnTo } from "./return-to";
+
+function stubLocation(search: string) {
+  vi.stubGlobal("window", { location: { search } });
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe("getReturnTo", () => {
+  it("returns undefined during SSR (no window)", () => {
+    expect(getReturnTo()).toBeUndefined();
+  });
+
+  it("returns a clean relative path", () => {
+    stubLocation("?returnTo=/dashboard");
+    expect(getReturnTo()).toBe("/dashboard");
+  });
+
+  it("ignores a missing returnTo param", () => {
+    stubLocation("?foo=bar");
+    expect(getReturnTo()).toBeUndefined();
+  });
+
+  it("rejects protocol-relative URLs", () => {
+    stubLocation("?returnTo=//evil.com");
+    expect(getReturnTo()).toBeUndefined();
+  });
+
+  it("rejects backslash-smuggled URLs", () => {
+    stubLocation("?returnTo=/\\evil.com");
+    expect(getReturnTo()).toBeUndefined();
+  });
+
+  it("rejects absolute URLs", () => {
+    stubLocation("?returnTo=https://evil.com");
+    expect(getReturnTo()).toBeUndefined();
+  });
+});

package/template/apps/web/src/features/auth/lib/return-to.ts

@@ -0,0 +1,19 @@
+/**
+ * Reads and sanitizes the `returnTo` query param from the current URL.
+ * Client-only: returns undefined during SSR/prerender so callers fall back to their default.
+ */
+export function getReturnTo(): string | undefined {
+  if (typeof window === "undefined") return undefined;
+
+  return sanitizeReturnTo(new URLSearchParams(window.location.search).get("returnTo") ?? undefined);
+}
+
+function sanitizeReturnTo(value: string | string[] | undefined): string | undefined {
+  const path = Array.isArray(value) ? value[0] : value;
+
+  if (path && path.startsWith("/") && !path.startsWith("//") && !path.startsWith("/\\")) {
+    return path;
+  }
+
+  return undefined;
+}

package/template/apps/web/src/features/auth/lib/validator.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from "vitest";
+import { createSignInSchema, createSignUpSchema } from "./validator";
+
+const t = (key: string) => key;
+
+describe("createSignUpSchema", () => {
+  const valid = {
+    confirmPassword: "long-enough",
+    email: "user@example.com",
+    name: "Ada",
+    password: "long-enough",
+  };
+
+  it("accepts a complete sign-up", () => {
+    expect(createSignUpSchema(t).safeParse(valid).success).toBe(true);
+  });
+
+  it("rejects mismatched passwords on the confirmation field", () => {
+    const result = createSignUpSchema(t).safeParse({ ...valid, confirmPassword: "different" });
+
+    expect(result.success).toBe(false);
+    expect(result.error?.issues[0]).toMatchObject({
+      message: "Auth.Errors.passwordsMustMatch",
+      path: ["confirmPassword"],
+    });
+  });
+
+  it("rejects short passwords", () => {
+    const result = createSignUpSchema(t).safeParse({
+      ...valid,
+      confirmPassword: "short",
+      password: "short",
+    });
+
+    expect(result.error?.issues.map((issue) => issue.message)).toContain(
+      "Auth.Errors.passwordTooShort",
+    );
+  });
+});
+
+describe("createSignInSchema", () => {
+  it("requires a valid email", () => {
+    expect(createSignInSchema(t).safeParse({ email: "nope", password: "x" }).success).toBe(false);
+  });
+});