virastack 0.0.1 → 1.0.1

package/templates-i18n/nextjs/src/components/ui/field.tsx

@@ -0,0 +1,24 @@
+import type { ComponentProps } from "react";
+
+import { cn } from "@/lib/utils";
+
+export function FieldDescription({ className, ...props }: ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn("text-sm font-normal text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export function FieldError({ className, ...props }: ComponentProps<"p">) {
+  return (
+    <p
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-sm font-normal text-destructive", className)}
+      {...props}
+    />
+  );
+}

package/templates-i18n/nextjs/src/components/ui/index.ts

@@ -0,0 +1,27 @@
+export { Button, buttonVariants, type ButtonProps } from "@/components/ui/button";
+export { FieldDescription, FieldError } from "@/components/ui/field";
+export { Input } from "@/components/ui/input";
+export { Label } from "@/components/ui/label";
+export { Skeleton } from "@/components/ui/skeleton";
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+export { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+export { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";

package/templates-i18n/nextjs/src/components/ui/input.tsx

@@ -0,0 +1,23 @@
+import type { ComponentProps } from "react";
+
+import { Input as BaseInput } from "@base-ui/react/input";
+
+import { cn } from "@/lib/utils";
+
+export function Input({ className, ...props }: ComponentProps<typeof BaseInput>) {
+  return (
+    <BaseInput
+      data-slot="input"
+      className={cn(
+        "flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none",
+        "placeholder:text-muted-foreground",
+        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+        "file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/templates-i18n/nextjs/src/components/ui/label.tsx

@@ -0,0 +1,17 @@
+import type { ComponentProps } from "react";
+
+import { cn } from "@/lib/utils";
+
+export function Label({ className, ...props }: ComponentProps<"label">) {
+  return (
+    <label
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none",
+        "peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/templates-i18n/nextjs/src/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react";
+
+import { cn } from "@/lib/utils";
+
+export function Skeleton({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-accent", className)}
+      {...props}
+    />
+  );
+}

package/templates-i18n/nextjs/src/components/ui/table.tsx

@@ -0,0 +1,94 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="relative w-full overflow-auto">
+      <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
+    </div>
+  ),
+);
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+));
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
+    {...props}
+  />
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className,
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className,
+    )}
+    {...props}
+  />
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
+));
+TableCaption.displayName = "TableCaption";
+
+export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption };

package/templates-i18n/nextjs/src/components/ui/tabs.tsx

@@ -0,0 +1,46 @@
+import type { ComponentProps } from "react";
+
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+
+import { cn } from "@/lib/utils";
+
+export function Tabs({ className, ...props }: ComponentProps<typeof BaseTabs.Root>) {
+  return (
+    <BaseTabs.Root data-slot="tabs" className={cn("flex flex-col gap-3", className)} {...props} />
+  );
+}
+
+export function TabsList({ className, ...props }: ComponentProps<typeof BaseTabs.List>) {
+  return (
+    <BaseTabs.List
+      data-slot="tabs-list"
+      className={cn(
+        "relative inline-flex h-9 w-fit items-center rounded-lg bg-muted p-[3px] text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function TabsTrigger({ className, ...props }: ComponentProps<typeof BaseTabs.Tab>) {
+  return (
+    <BaseTabs.Tab
+      data-slot="tabs-trigger"
+      className={cn(
+        "inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none",
+        "text-foreground data-[selected]:bg-background data-[selected]:shadow-sm",
+        "focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        "disabled:pointer-events-none disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function TabsContent({ className, ...props }: ComponentProps<typeof BaseTabs.Panel>) {
+  return (
+    <BaseTabs.Panel data-slot="tabs-content" className={cn("outline-none", className)} {...props} />
+  );
+}

package/templates-i18n/nextjs/src/config/seo.config.ts

@@ -0,0 +1,37 @@
+import type { Metadata } from "next";
+
+import { siteConfig } from "@/config/site.config";
+
+export const defaultMetadata: Metadata = {
+  metadataBase: new URL(siteConfig.url),
+  title: {
+    default: siteConfig.name,
+    template: `%s · ${siteConfig.name}`,
+  },
+  description: siteConfig.description,
+  keywords: ["Next.js", "React", "TypeScript", "Tailwind CSS", "ViraStack", "Boilerplate"],
+  authors: [{ name: "ViraStack", url: siteConfig.url }],
+  creator: "ViraStack",
+  openGraph: {
+    type: "website",
+    locale: "en_US",
+    url: siteConfig.url,
+    title: siteConfig.name,
+    description: siteConfig.description,
+    siteName: siteConfig.name,
+    images: [{ url: siteConfig.ogImage, width: 1200, height: 630, alt: siteConfig.name }],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: siteConfig.name,
+    description: siteConfig.description,
+    images: [siteConfig.ogImage],
+  },
+  icons: {
+    icon: "/logo.webp",
+  },
+  robots: {
+    index: true,
+    follow: true,
+  },
+};

package/templates-i18n/nextjs/src/config/site.config.ts

@@ -0,0 +1,15 @@
+import type { SiteConfig } from "@/types/site-config.types";
+import { env } from "@/env";
+
+// FIXME: replace with your own site metadata.
+export const siteConfig: SiteConfig = {
+  name: env.NEXT_PUBLIC_APP_NAME,
+  description:
+    "Premium Next.js boilerplate built for scalable UI/UX, clean architecture, and agent-ready developer experience.",
+  url: env.NEXT_PUBLIC_APP_URL,
+  ogImage: `${env.NEXT_PUBLIC_APP_URL}/og.png`,
+  links: {
+    github: "https://github.com/virastack/start",
+    twitter: "https://x.com/virastack",
+  },
+};

package/templates-i18n/nextjs/src/constants/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Shared constants promoted out of features (Rule of Three).
+ * Feature-scoped constants live under `src/features/[feature]/constants`.
+ */
+export {};

package/templates-i18n/nextjs/src/env.ts

@@ -0,0 +1,41 @@
+import { z } from "zod";
+
+/**
+ * Type-safe environment variable schema.
+ *
+ * Server-only variables MUST NOT be prefixed with `NEXT_PUBLIC_`.
+ * Client-exposed variables MUST be prefixed with `NEXT_PUBLIC_` and
+ * explicitly re-read via `process.env.NEXT_PUBLIC_*` at usage sites
+ * (Next.js inlines these at build time; dynamic access does not work).
+ */
+const serverSchema = z.object({
+  NODE_ENV: z.enum(["development", "production", "test"]).default("development"),
+});
+
+const clientSchema = z.object({
+  NEXT_PUBLIC_APP_URL: z.string().url().default("http://localhost:3000"),
+  NEXT_PUBLIC_APP_NAME: z.string().min(1).default("ViraStack Start - Next.js Edition"),
+});
+
+const serverParsed = serverSchema.safeParse({
+  NODE_ENV: process.env.NODE_ENV,
+});
+
+const clientParsed = clientSchema.safeParse({
+  NEXT_PUBLIC_APP_URL: process.env.NEXT_PUBLIC_APP_URL,
+  NEXT_PUBLIC_APP_NAME: process.env.NEXT_PUBLIC_APP_NAME,
+});
+
+if (!serverParsed.success || !clientParsed.success) {
+  console.error(
+    "❌ Invalid environment variables:",
+    serverParsed.error?.flatten().fieldErrors,
+    clientParsed.error?.flatten().fieldErrors,
+  );
+  throw new Error("Invalid environment variables. Check src/env.ts");
+}
+
+export const env = {
+  ...serverParsed.data,
+  ...clientParsed.data,
+};

package/templates-i18n/nextjs/src/features/landing/api/get-users.api.ts

@@ -0,0 +1,7 @@
+import { api } from "@/lib/api";
+
+import type { User } from "@/features/landing/types";
+
+export function getUsers(signal?: AbortSignal) {
+  return api.get<User[]>("https://jsonplaceholder.typicode.com/users?_limit=5", { signal });
+}

package/templates-i18n/nextjs/src/features/landing/api/index.ts

@@ -0,0 +1,2 @@
+export { getUsers } from "@/features/landing/api/get-users.api";
+export { userKeys } from "@/features/landing/api/query-keys";

package/templates-i18n/nextjs/src/features/landing/api/query-keys.ts

@@ -0,0 +1,7 @@
+export const userKeys = {
+  all: ["users"] as const,
+  lists: () => [...userKeys.all, "list"] as const,
+  list: (filters?: object) => [...userKeys.lists(), { filters }] as const,
+  details: () => [...userKeys.all, "detail"] as const,
+  detail: (id: string) => [...userKeys.details(), id] as const,
+};

package/templates-i18n/nextjs/src/features/landing/components/CartDemo.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { MinusIcon, PlusIcon, ShirtIcon, Trash2Icon } from "lucide-react";
+import { useTranslations } from "next-intl";
+
+import { Button } from "@/components/ui/button";
+import { useCounterStore } from "@/features/landing/stores";
+
+/**
+ * Demonstrates global client state with Zustand via a mini cart UI.
+ */
+export function CartDemo() {
+  const { count, increment, decrement, reset } = useCounterStore();
+  const t = useTranslations("Index");
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center gap-4 rounded-xl border border-border/50 bg-background/50 p-3">
+        <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+          <ShirtIcon className="size-6" />
+        </div>
+        <div className="flex flex-1 flex-col">
+          <h5 className="font-medium text-foreground">{t("cart_item_name")}</h5>
+          <p className="text-sm text-muted-foreground">{t("cart_item_variant")}</p>
+        </div>
+        <div className="flex flex-col items-end gap-1">
+          <span className="font-semibold text-foreground">{count * 350}</span>
+          <span className="text-xs text-muted-foreground">{t("cart_item_total")}</span>
+        </div>
+      </div>
+
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8 rounded-full"
+            aria-label="Decrement"
+            onClick={decrement}
+            disabled={count === 0}
+          >
+            <MinusIcon className="size-4" />
+          </Button>
+          <span className="w-6 text-center font-medium tabular-nums">{count}</span>
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8 rounded-full"
+            aria-label="Increment"
+            onClick={increment}
+          >
+            <PlusIcon className="size-4" />
+          </Button>
+        </div>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-8 gap-1.5 px-2 text-muted-foreground hover:text-destructive"
+          onClick={reset}
+          disabled={count === 0}
+        >
+          <Trash2Icon className="size-3.5" />
+          <span className="text-xs">{t("cart_clear")}</span>
+        </Button>
+      </div>
+    </div>
+  );
+}

package/templates-i18n/nextjs/src/features/landing/components/Features.tsx

@@ -0,0 +1,84 @@
+import { useTranslations } from "next-intl";
+
+import { RevealGroup, RevealItem } from "@/features/landing/components/Reveal";
+import { featureCardClassName } from "@/features/landing/helpers";
+import {
+  NextjsIcon,
+  ReactHookFormIcon,
+  TailwindIcon,
+  TanstackIcon,
+  TypescriptIcon,
+} from "@/features/landing/icons";
+
+export function Features() {
+  const t = useTranslations("Index");
+
+  const FEATURES = [
+    {
+      title: t("feature_1_title"),
+      description: t("feature_1_desc"),
+      icon: <NextjsIcon className="size-7 text-primary" />,
+    },
+    {
+      title: t("feature_2_title"),
+      description: t("feature_2_desc"),
+      icon: <TypescriptIcon className="size-7 text-primary" />,
+    },
+    {
+      title: t("feature_3_title"),
+      description: t("feature_3_desc"),
+      icon: <TanstackIcon className="size-7 text-primary" />,
+    },
+    {
+      title: t("feature_4_title"),
+      description: t("feature_4_desc"),
+      icon: <TailwindIcon className="size-7 text-primary" />,
+    },
+    {
+      title: t("feature_5_title"),
+      description: t("feature_5_desc"),
+      icon: <ReactHookFormIcon className="size-7 text-primary" />,
+    },
+    {
+      title: t("feature_6_title"),
+      description: t("feature_6_desc"),
+      /* eslint-disable-next-line @next/next/no-img-element */
+      icon: <img src="/logo.webp" alt="ViraStack Logo" className="size-7" />,
+    },
+  ];
+
+  return (
+    <section id="features" className="mx-auto max-w-5xl px-6 py-16">
+      <RevealGroup className="mb-16 text-center">
+        <RevealItem>
+          <h2 className="text-3xl font-semibold tracking-tight text-balance">
+            {t("features_title")}
+          </h2>
+        </RevealItem>
+        <RevealItem>
+          <p className="mx-auto mt-3 max-w-xl text-base text-balance text-muted-foreground">
+            {t("features_subtitle")}
+          </p>
+        </RevealItem>
+      </RevealGroup>
+
+      <RevealGroup className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        {FEATURES.map((feature) => (
+          <RevealItem key={feature.title} className={featureCardClassName}>
+            <div className="mb-2 flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10 transition-transform duration-200 ease-out group-hover:scale-105">
+              {feature.icon}
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <h3 className="text-base font-semibold text-balance text-foreground md:text-lg">
+                {feature.title}
+              </h3>
+              <p className="text-sm leading-relaxed text-pretty text-muted-foreground">
+                {feature.description}
+              </p>
+            </div>
+          </RevealItem>
+        ))}
+      </RevealGroup>
+    </section>
+  );
+}

package/templates-i18n/nextjs/src/features/landing/components/Hero.tsx

@@ -0,0 +1,76 @@
+import Link from "next/link";
+
+import { useTranslations } from "next-intl";
+
+import { siteConfig } from "@/config/site.config";
+
+import { LanguageSwitcher } from "@/components/shared/LanguageSwitcher";
+import { ThemeToggle } from "@/components/shared/ThemeToggle";
+import { Button } from "@/components/ui/button";
+import { Reveal } from "@/features/landing/components/Reveal";
+import { NextjsIcon, ReactIcon, TailwindIcon } from "@/features/landing/icons";
+
+export function Hero() {
+  const t = useTranslations("Index");
+
+  return (
+    <section className="mx-auto flex max-w-3xl flex-col items-center gap-6 px-6 pt-24 pb-16 text-center">
+      <Reveal mode="mount" delay={0} y={-8}>
+        <span className="rounded-full border border-border px-3 py-1 text-xs font-medium text-muted-foreground">
+          {t("hero_badge")}
+        </span>
+      </Reveal>
+
+      <h1 className="mb-2 text-center text-4xl lg:text-6xl">
+        <span className="font-black text-primary">{t("hero_title_1")}</span>{" "}
+        <span className="font-medium text-teal-500 italic">{t("hero_title_2")}</span>
+        <span className="mt-2 block text-lg font-normal text-muted-foreground lg:text-xl">
+          Next.js Edition
+        </span>
+      </h1>
+
+      <p className="max-w-2xl text-base leading-relaxed text-balance text-muted-foreground sm:text-lg">
+        {t.rich("hero_desc", {
+          nextjs: (chunks) => (
+            <span className="inline-flex items-center gap-1 font-semibold text-foreground">
+              <NextjsIcon className="h-4 w-4" />
+              {chunks}
+            </span>
+          ),
+          react: (chunks) => (
+            <span className="inline-flex items-center gap-1 font-semibold text-foreground">
+              <ReactIcon className="h-4 w-4" />
+              {chunks}
+            </span>
+          ),
+          tailwind: (chunks) => (
+            <span className="inline-flex items-center gap-1 font-semibold text-foreground">
+              <TailwindIcon className="h-4 w-4" />
+              {chunks}
+            </span>
+          ),
+          zustand: (chunks) => <span className="font-medium text-foreground italic">{chunks}</span>,
+          tanstack: (chunks) => (
+            <span className="font-medium text-foreground italic">{chunks}</span>
+          ),
+          rhf: (chunks) => <span className="font-medium text-foreground italic">{chunks}</span>,
+        })}
+      </p>
+
+      <Reveal mode="mount" delay={0.1} className="mt-2 flex items-center gap-2">
+        <Button
+          className="h-10 px-4 py-2"
+          nativeButton={false}
+          render={<Link href={siteConfig.links.github} target="_blank" rel="noreferrer" />}
+        >
+          <span>⭐</span>
+          <span>{t("github")}</span>
+        </Button>
+        <LanguageSwitcher />
+        <div className="h-10 w-10 [&>button]:h-full [&>button]:w-full">
+          <ThemeToggle />
+        </div>
+      </Reveal>
+    </section>
+  );
+}

package/templates-i18n/nextjs/src/features/landing/components/LandingPage.tsx

@@ -0,0 +1,17 @@
+import { Features } from "@/features/landing/components/Features";
+import { Hero } from "@/features/landing/components/Hero";
+import { Showcase } from "@/features/landing/components/Showcase";
+
+/**
+ * Demo landing surface. Delete `src/features/landing` and replace
+ * `src/app/page.tsx` when you start your own product UI.
+ */
+export function LandingPage() {
+  return (
+    <main className="flex-1">
+      <Hero />
+      <Features />
+      <Showcase />
+    </main>
+  );
+}