create-nexst-monorepo 0.1.0

package/template/apps/web/src/app/[locale]/(auth)/sign-in/page.tsx

@@ -0,0 +1,24 @@
+import { getTranslations } from "next-intl/server";
+import { AuthCard } from "@/features/auth/auth-card";
+import { SignInForm } from "@/features/auth/sign-in-form";
+import { Link } from "@/i18n/navigation";
+
+export default async function SignInPage() {
+  const t = await getTranslations("Auth.SignIn");
+
+  return (
+    <AuthCard
+      footer={
+        <>
+          {t("noAccount")}{" "}
+          <Link className="text-link font-medium hover:underline" href="/sign-up">
+            {t("signUpLink")}
+          </Link>
+        </>
+      }
+      title={t("title")}
+    >
+      <SignInForm />
+    </AuthCard>
+  );
+}

package/template/apps/web/src/app/[locale]/(auth)/sign-up/page.tsx

@@ -0,0 +1,24 @@
+import { getTranslations } from "next-intl/server";
+import { AuthCard } from "@/features/auth/auth-card";
+import { SignUpForm } from "@/features/auth/sign-up-form";
+import { Link } from "@/i18n/navigation";
+
+export default async function SignUpPage() {
+  const t = await getTranslations("Auth.SignUp");
+
+  return (
+    <AuthCard
+      footer={
+        <>
+          {t("haveAccount")}{" "}
+          <Link className="text-link font-medium hover:underline" href="/sign-in">
+            {t("signInLink")}
+          </Link>
+        </>
+      }
+      title={t("title")}
+    >
+      <SignUpForm />
+    </AuthCard>
+  );
+}

package/template/apps/web/src/app/[locale]/(auth)/verify/page.tsx

@@ -0,0 +1,24 @@
+import { getTranslations } from "next-intl/server";
+import { Suspense } from "react";
+import { AuthCard } from "@/features/auth/auth-card";
+import { ResendVerificationButton } from "@/features/auth/resend-verification-button";
+import { getSession } from "@/lib/auth";
+
+/** Shown after sign-up: the API has mailed a verification link. */
+export default async function VerifyPage() {
+  const t = await getTranslations("Auth.Verify");
+
+  return (
+    <AuthCard description={t("description")} title={t("title")}>
+      <Suspense>
+        <ResendVerification />
+      </Suspense>
+    </AuthCard>
+  );
+}
+
+async function ResendVerification() {
+  const session = await getSession();
+  if (!session || session.user.emailVerified) return null;
+  return <ResendVerificationButton email={session.user.email} />;
+}

package/template/apps/web/src/app/[locale]/dashboard/page.tsx

@@ -0,0 +1,34 @@
+import { getTranslations } from "next-intl/server";
+import { Suspense } from "react";
+import { Alert } from "@/components/alert/alert";
+import { PasskeySettings } from "@/features/auth/passkey-settings";
+import { getSession } from "@/lib/auth";
+
+/** Example protected page: the proxy redirects here only with a session. */
+export default async function DashboardPage() {
+  const t = await getTranslations("Dashboard");
+
+  return (
+    <section className="space-y-4 pt-16">
+      <h1 className="text-3xl font-bold tracking-tight">{t("title")}</h1>
+      <Suspense>
+        <SessionSummary />
+      </Suspense>
+      <div className="pt-6">
+        <PasskeySettings />
+      </div>
+    </section>
+  );
+}
+
+async function SessionSummary() {
+  const [session, t] = await Promise.all([getSession(), getTranslations("Dashboard")]);
+  if (!session) return null;
+
+  return (
+    <div className="space-y-3">
+      <p className="text-muted-foreground">{t("signedInAs", { email: session.user.email })}</p>
+      {session.user.emailVerified ? null : <Alert message={t("unverified")} variant="warning" />}
+    </div>
+  );
+}

package/template/apps/web/src/app/[locale]/layout.tsx

@@ -0,0 +1,60 @@
+import { hasLocale, NextIntlClientProvider } from "next-intl";
+import { Inter } from "next/font/google";
+import { notFound } from "next/navigation";
+import type { ReactNode } from "react";
+import { Suspense } from "react";
+import { Toaster } from "@/components/toast/toaster";
+import { Provider } from "@/features/shared/provider";
+import { HeaderFrame, SiteHeader } from "@/features/shared/site-header";
+import { routing } from "@/i18n/routing";
+import { constructMetadata } from "@/lib/metadata";
+import { cn } from "@/lib/utils";
+import "../globals.css";
+
+const inter = Inter({
+  display: "swap",
+  subsets: ["latin", "latin-ext"],
+  variable: "--font-inter",
+});
+
+export const metadata = constructMetadata();
+export const viewport = {
+  themeColor: [
+    { color: "white", media: "(prefers-color-scheme: light)" },
+    { color: "black", media: "(prefers-color-scheme: dark)" },
+  ],
+};
+
+type Props = {
+  children: ReactNode;
+  params: Promise<{ locale: string }>;
+};
+
+export function generateStaticParams() {
+  return routing.locales.map((locale) => ({ locale }));
+}
+
+export default async function LocaleLayout({ children, params }: Props) {
+  const { locale } = await params;
+  if (!hasLocale(routing.locales, locale)) {
+    notFound();
+  }
+
+  return (
+    <html lang={locale} suppressHydrationWarning>
+      <body className={cn("antialiased", inter.className)}>
+        <Provider>
+          <NextIntlClientProvider>
+            <Suspense fallback={<HeaderFrame />}>
+              <SiteHeader />
+            </Suspense>
+            <main className="mx-auto min-h-[calc(100dvh-4rem)] max-w-5xl px-4 pt-16">
+              {children}
+            </main>
+          </NextIntlClientProvider>
+        </Provider>
+        <Toaster />
+      </body>
+    </html>
+  );
+}

package/template/apps/web/src/app/[locale]/page.tsx

@@ -0,0 +1,23 @@
+import { getTranslations } from "next-intl/server";
+import { buttonVariants } from "@/components/button/button-variants"; // @if auth
+import { GoogleOneTap } from "@/features/auth/google-one-tap"; // @if auth
+import { Link } from "@/i18n/navigation"; // @if auth
+
+export default async function HomePage() {
+  const t = await getTranslations("Home");
+
+  return (
+    <section className="flex flex-col items-center gap-6 pt-28 text-center md:pt-40">
+      <h1 className="max-w-2xl text-4xl font-bold tracking-tight text-balance md:text-5xl">
+        {t("title")}
+      </h1>
+      <p className="text-muted-foreground max-w-xl text-base md:text-lg">{t("description")}</p>
+      {/* @if auth */}
+      <GoogleOneTap />
+      <Link className={buttonVariants({ size: "lg" })} href="/sign-up">
+        {t("cta")}
+      </Link>
+      {/* @endif */}
+    </section>
+  );
+}

package/template/apps/web/src/app/api/health/route.ts

@@ -0,0 +1,3 @@
+export function GET() {
+  return new Response("OK");
+}

package/template/apps/web/src/app/global-error.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import NextError from "next/error";
+import { useEffect } from "react";
+import { routing } from "@/i18n/routing";
+
+export default function GlobalError({ error }: Readonly<{ error: Error }>) {
+  useEffect(() => {
+    console.error("Unhandled application error:", error);
+  }, [error]);
+
+  return (
+    <html lang={routing.defaultLocale}>
+      <body>
+        <NextError statusCode={0} />
+      </body>
+    </html>
+  );
+}

package/template/apps/web/src/app/globals.css

@@ -0,0 +1,98 @@
+@import "tailwindcss";
+@plugin 'tailwindcss-animate';
+@custom-variant dark (&:is(.dark *));
+
+/*
+ * Semantic tokens. Components use these (bg-background, text-muted-foreground,
+ * border-border, …), never raw hex or ramp steps, so light and dark stay in sync.
+ * The .dark block below redefines every token.
+ */
+@theme {
+  --color-brand-50: #eef3ff;
+  --color-brand-100: #d9e4ff;
+  --color-brand-200: #bacdff;
+  --color-brand-300: #8dabff;
+  --color-brand-400: #5b82ff;
+  --color-brand-500: #2f5cf7;
+  --color-brand-600: #1f47e0;
+  --color-brand-700: #1a39bd;
+
+  --color-background: #f5f5f7;
+  --color-foreground: #1d1d1f;
+  --color-card: #ffffff;
+  --color-card-foreground: #1d1d1f;
+  --color-popover: #ffffff;
+  --color-popover-foreground: #1d1d1f;
+  --color-primary: var(--color-brand-500);
+  --color-primary-hover: var(--color-brand-600);
+  --color-primary-foreground: #ffffff;
+  --color-secondary: #e8e8ed;
+  --color-secondary-foreground: #1d1d1f;
+  --color-muted: #e8e8ed;
+  --color-muted-foreground: #636366;
+  --color-accent: #eff2f7;
+  --color-accent-foreground: #1d1d1f;
+  --color-link: var(--color-brand-600);
+  --color-destructive: #be123c;
+  --color-destructive-solid: #e11d48;
+  --color-destructive-foreground: #ffffff;
+  --color-success: #16a34a;
+  --color-border: #d2d2d7;
+  --color-input: #c7c7cc;
+  --color-ring: var(--color-brand-400);
+
+  --radius-sm: 0.5rem;
+  --radius-md: 0.625rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-2xl: 1.25rem;
+}
+
+@layer theme {
+  .dark {
+    --color-brand-400: #3d9dff;
+    --color-brand-500: #0a84ff;
+    --color-brand-600: #0a6fd8;
+
+    --color-background: #000000;
+    --color-foreground: #f5f5f7;
+    --color-card: #1c1c1e;
+    --color-card-foreground: #f5f5f7;
+    --color-popover: #1c1c1e;
+    --color-popover-foreground: #f5f5f7;
+    --color-primary: var(--color-brand-500);
+    --color-primary-hover: var(--color-brand-400);
+    --color-primary-foreground: #ffffff;
+    --color-secondary: #2c2c2e;
+    --color-secondary-foreground: #f2f2f7;
+    --color-muted: #2c2c2e;
+    --color-muted-foreground: #aeaeb2;
+    --color-accent: #2c2c2e;
+    --color-accent-foreground: #f2f2f7;
+    --color-link: #6bb5ff;
+    --color-destructive: #fb7185;
+    --color-destructive-solid: #be123c;
+    --color-destructive-foreground: #ffffff;
+    --color-success: #4ade80;
+    --color-border: #3a3a3c;
+    --color-input: #48484a;
+    --color-ring: #5e9cff;
+  }
+}
+
+@layer base {
+  *,
+  ::before,
+  ::after {
+    border-color: var(--color-border);
+  }
+  html {
+    @apply bg-background;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  button {
+    cursor: pointer;
+  }
+}

package/template/apps/web/src/app/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="8" fill="#2f5cf7"/><path d="M10 22V10h2.4l7.2 8.2V10H22v12h-2.4l-7.2-8.2V22z" fill="#fff"/></svg>

package/template/apps/web/src/app/robots.ts

@@ -0,0 +1,15 @@
+import type { MetadataRoute } from "next";
+import { env } from "@/env";
+
+export default function robots(): MetadataRoute.Robots {
+  const base = env.NEXT_PUBLIC_HOST_URL.replace(/\/$/, "");
+
+  return {
+    rules: {
+      allow: "/",
+      disallow: "/*/dashboard", // @if auth
+      userAgent: "*",
+    },
+    sitemap: `${base}/sitemap.xml`,
+  };
+}

package/template/apps/web/src/app/sitemap.ts

@@ -0,0 +1,24 @@
+import type { MetadataRoute } from "next";
+import { env } from "@/env";
+import { routing } from "@/i18n/routing";
+
+/** Public, indexable pages (locale prefix is added per locale). */
+const staticPaths = [
+  "",
+  // @if auth
+  "/sign-in",
+  "/sign-up",
+  // @endif
+];
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const base = env.NEXT_PUBLIC_HOST_URL.replace(/\/$/, "");
+  const lastModified = new Date();
+
+  return routing.locales.flatMap((locale) =>
+    staticPaths.map((path) => ({
+      lastModified,
+      url: `${base}/${locale}${path}`,
+    })),
+  );
+}

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

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { withContainer } from "~sb/decorators";
+import { Alert } from "./alert";
+
+const meta = {
+  args: { message: "Your changes were saved." },
+  component: Alert,
+  decorators: [withContainer()],
+  tags: ["autodocs"],
+} satisfies Meta<typeof Alert>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Info: Story = {};
+
+export const Error: Story = {
+  args: { message: "Invalid email or password.", variant: "error" },
+};
+
+export const Success: Story = { args: { variant: "success" } };
+
+export const Warning: Story = {
+  args: { message: "Your session expires soon.", variant: "warning" },
+};

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

@@ -0,0 +1,50 @@
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+import { AlertCircle, AlertTriangle, CheckCircle2, Info } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva(
+  "mb-4 flex items-center gap-2.5 overflow-hidden rounded-xl border border-border/60 border-l-[3px] bg-card px-3.5 py-2.5 text-foreground shadow-xs dark:border-white/10",
+  {
+    defaultVariants: {
+      variant: "default",
+    },
+    variants: {
+      variant: {
+        default:
+          "border-l-blue-500 [&>svg]:text-blue-500 dark:border-l-blue-400 dark:[&>svg]:text-blue-400",
+        error:
+          "border-l-red-500 [&>svg]:text-red-500 dark:border-l-red-400 dark:[&>svg]:text-red-400",
+        success:
+          "border-l-emerald-500 [&>svg]:text-emerald-500 dark:border-l-emerald-400 dark:[&>svg]:text-emerald-400",
+        warning:
+          "border-l-amber-500 [&>svg]:text-amber-500 dark:border-l-amber-400 dark:[&>svg]:text-amber-400",
+      },
+    },
+  },
+);
+
+type AlertProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof alertVariants> & {
+    message: string;
+  };
+
+function Alert({ className, message, variant = "default", ...props }: AlertProps) {
+  const Icon = {
+    default: Info,
+    error: AlertTriangle,
+    success: CheckCircle2,
+    warning: AlertCircle,
+  }[variant || "default"];
+
+  return (
+    <div className={cn(alertVariants({ variant }), className)} {...props}>
+      <Icon className="size-[18px] shrink-0" />
+      <p className="text-[13px] leading-snug font-medium">{message}</p>
+    </div>
+  );
+}
+
+Alert.displayName = "Alert";
+
+export { Alert };

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

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { expect, within } from "storybook/test";
+import { Avatar } from "./avatar";
+
+const meta = {
+  argTypes: {
+    color: {
+      control: "select",
+      options: [
+        "red",
+        "orange",
+        "amber",
+        "yellow",
+        "lime",
+        "green",
+        "emerald",
+        "cyan",
+        "blue",
+        "indigo",
+        "purple",
+        "pink",
+      ],
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg", "xl"],
+    },
+  },
+  component: Avatar,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    fallback: "H",
+  },
+  play: async ({ canvasElement }) => {
+    await expect(within(canvasElement).getByText("H")).toBeInTheDocument();
+  },
+};
+
+export const Small: Story = {
+  args: {
+    fallback: "S",
+    size: "sm",
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    fallback: "M",
+    size: "md",
+  },
+};
+
+export const Large: Story = {
+  args: {
+    fallback: "L",
+    size: "lg",
+  },
+};
+
+export const ExtraLarge: Story = {
+  args: {
+    fallback: "X",
+    size: "xl",
+  },
+};
+
+export const WithColor: Story = {
+  args: {
+    color: "blue",
+    fallback: "H",
+  },
+};
+
+export const RainbowColors: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-3">
+      <Avatar color="red" fallback="R" />
+      <Avatar color="orange" fallback="O" />
+      <Avatar color="amber" fallback="A" />
+      <Avatar color="yellow" fallback="Y" />
+      <Avatar color="lime" fallback="L" />
+      <Avatar color="green" fallback="G" />
+      <Avatar color="emerald" fallback="E" />
+      <Avatar color="cyan" fallback="C" />
+      <Avatar color="blue" fallback="B" />
+      <Avatar color="indigo" fallback="I" />
+      <Avatar color="purple" fallback="P" />
+      <Avatar color="pink" fallback="K" />
+    </div>
+  ),
+};
+
+export const Group: Story = {
+  render: () => (
+    <div className="flex -space-x-2">
+      {(["red", "green", "blue", "purple"] as const).map((color, i) => (
+        <Avatar
+          className="outline-background outline-2"
+          color={color}
+          fallback={["H", "A", "C", "3"][i]}
+          key={color}
+          size="md"
+        />
+      ))}
+    </div>
+  ),
+};

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

@@ -0,0 +1,88 @@
+"use client";
+
+import type { HTMLAttributes, RefObject } from "react";
+import { cn } from "@/lib/utils";
+
+export type AvatarProps = HTMLAttributes<HTMLDivElement> & {
+  className?: string;
+  color?: AvatarColor;
+  fallback?: string;
+  size?: "lg" | "md" | "sm" | "xl";
+};
+
+type AvatarColor =
+  | "amber"
+  | "blue"
+  | "cyan"
+  | "emerald"
+  | "green"
+  | "indigo"
+  | "lime"
+  | "orange"
+  | "pink"
+  | "purple"
+  | "red"
+  | "yellow";
+
+const sizeMap: Record<string, string> = {
+  lg: "h-12 w-12 text-sm",
+  md: "h-10 w-10 text-xs",
+  sm: "h-8 w-8 text-[0.625rem]",
+  xl: "h-14 w-14 text-base",
+};
+
+const colorMap: Record<AvatarColor, string> = {
+  amber: "bg-amber-500 text-white ring-amber-600/20 dark:bg-amber-600 dark:ring-amber-400/25",
+  blue: "bg-brand-500 text-white ring-brand-600/20 dark:bg-brand-500 dark:ring-brand-400/25",
+  cyan: "bg-cyan-500 text-white ring-cyan-600/20 dark:bg-cyan-600 dark:ring-cyan-400/25",
+  emerald:
+    "bg-emerald-500 text-white ring-emerald-600/20 dark:bg-emerald-600 dark:ring-emerald-400/25",
+  green: "bg-green-500 text-white ring-green-600/20 dark:bg-green-600 dark:ring-green-400/25",
+  indigo: "bg-indigo-500 text-white ring-indigo-600/20 dark:bg-indigo-600 dark:ring-indigo-400/25",
+  lime: "bg-lime-600 text-white ring-lime-700/20 dark:bg-lime-700 dark:ring-lime-400/25",
+  orange: "bg-orange-500 text-white ring-orange-600/20 dark:bg-orange-600 dark:ring-orange-400/25",
+  pink: "bg-pink-500 text-white ring-pink-600/20 dark:bg-pink-600 dark:ring-pink-400/25",
+  purple: "bg-purple-500 text-white ring-purple-600/20 dark:bg-purple-600 dark:ring-purple-400/25",
+  red: "bg-red-500 text-white ring-red-600/20 dark:bg-red-600 dark:ring-red-400/25",
+  yellow: "bg-yellow-600 text-white ring-yellow-700/20 dark:bg-yellow-700 dark:ring-yellow-400/25",
+};
+
+const neutralColor = "bg-muted text-foreground/80 ring-border/70";
+
+function Avatar({ ref, ...props }: AvatarProps & { ref?: RefObject<HTMLDivElement | null> }) {
+  const { className, color, fallback = "A", size = "md", ...divProps } = props;
+
+  const colors = color ? colorMap[color] : neutralColor;
+
+  const getInitials = (text: string): string => {
+    const parts = text.split(/\s+/);
+    if (parts.length > 1) {
+      const first = parts[0].charAt(0);
+      const last = (parts.at(-1) ?? "0").charAt(0);
+      return `${first}${last}`.toUpperCase();
+    }
+
+    return text.slice(0, 2).toUpperCase();
+  };
+
+  return (
+    <div
+      className={cn(
+        "inline-flex shrink-0 select-none items-center justify-center rounded-full",
+        "font-semibold tracking-tight ring-1 ring-inset cursor-pointer",
+
+        sizeMap[size],
+        colors,
+        className,
+      )}
+      ref={ref}
+      {...divProps}
+    >
+      {getInitials(fallback)}
+    </div>
+  );
+}
+
+Avatar.displayName = "Avatar";
+
+export { Avatar };

package/template/apps/web/src/components/button/button-variants.ts

@@ -0,0 +1,28 @@
+import { cva } from "class-variance-authority";
+
+export const buttonVariants = cva(
+  "inline-flex cursor-pointer items-center justify-center gap-2 rounded-full border text-sm font-semibold transition-[background-color,border-color,box-shadow] duration-200 outline-none select-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-45",
+  {
+    defaultVariants: {
+      size: "default",
+      variant: "primary",
+    },
+    variants: {
+      size: {
+        default: "h-11 px-4 py-2",
+        icon: "size-9 p-0",
+        lg: "h-12 px-8 text-base",
+        sm: "h-9 px-3",
+      },
+      variant: {
+        destructive:
+          "border-transparent bg-destructive-solid text-destructive-foreground hover:bg-destructive-solid/90",
+        ghost: "border-transparent bg-transparent text-foreground hover:bg-foreground/8",
+        outline: "border-border bg-card text-foreground shadow-xs hover:bg-accent",
+        primary:
+          "border-transparent bg-primary text-primary-foreground shadow-sm hover:bg-primary-hover",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-accent",
+      },
+    },
+  },
+);