nextjs-hackathon-stack 0.1.1 → 0.1.2

package/dist/index.js

@@ -18,9 +18,6 @@ function printBanner() {
 function success(msg) {
   p.log.success(msg);
 }
-function info(msg) {
-  p.log.info(msg);
-}
 function outro2(msg) {
   p.outro(pc.green(msg));
 }
@@ -112,29 +109,29 @@ async function scaffold(projectName, skipInstall) {
       p3.log.error(stderr || "npm install failed");
       p3.log.info("You can install manually: cd " + projectName + " && npm install");
     }
-    info("Running shadcn/ui init...");
+    spinner2.start("Initializing shadcn/ui");
     try {
-      execSync("npx shadcn@latest init --yes --defaults", {
+      execSync("npx shadcn@latest init --yes --defaults --force --silent", {
         cwd: targetDir,
-        stdio: "inherit"
+        stdio: "pipe"
       });
-      success("shadcn/ui initialized");
+      spinner2.stop("shadcn/ui initialized");
     } catch {
-      p3.log.warn("shadcn/ui init failed \u2014 run manually: npx shadcn@latest init");
+      spinner2.stop("shadcn/ui init failed \u2014 run manually: npx shadcn@latest init");
     }
-    info("Adding shadcn/ui base components...");
     const components = ["button", "input", "card", "form", "label"];
     for (const component of components) {
+      spinner2.start(`Adding shadcn/ui component: ${component}`);
       try {
-        execSync(`npx shadcn@latest add ${component} --yes`, {
+        execSync(`npx shadcn@latest add ${component} --yes --silent`, {
           cwd: targetDir,
-          stdio: "ignore"
+          stdio: "pipe"
         });
+        spinner2.stop(`Added shadcn/ui component: ${component}`);
       } catch {
-        p3.log.warn(`Failed to add component: ${component}`);
+        spinner2.stop(`Failed to add component: ${component}`);
       }
     }
-    success("shadcn/ui components added");
   }
   success(pc2.bold(`Project "${projectName}" created!`));
   console.log(`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-hackathon-stack",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Scaffold a full-stack Next.js hackathon starter",
   "type": "module",
   "bin": {

package/template/src/app/(auth)/login/page.tsx

@@ -2,9 +2,14 @@ import { LoginForm } from "@/features/auth/components/login-form";
 
 export default function LoginPage() {
   return (
-    <main className="flex min-h-screen items-center justify-center">
-      <div className="w-full max-w-md p-8">
-        <h1 className="mb-8 text-2xl font-bold">Sign in</h1>
+    <main className="flex min-h-screen items-center justify-center bg-muted/40 px-4">
+      <div className="w-full max-w-sm space-y-6">
+        <div className="text-center">
+          <h1 className="text-3xl font-bold tracking-tight">Welcome back</h1>
+          <p className="mt-2 text-sm text-muted-foreground">
+            Sign in to your account to continue
+          </p>
+        </div>
         <LoginForm />
       </div>
     </main>

package/template/src/features/auth/components/login-form.tsx

@@ -5,6 +5,10 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { loginAction, type LoginActionState } from "../actions/login.action";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
 
 const schema = z.object({
   email: z.string().email("Invalid email"),
@@ -32,49 +36,52 @@ export function LoginForm() {
   });
 
   return (
-    <form onSubmit={onSubmit} data-testid="login-form" className="space-y-4">
-      {state.status === "error" && (
-        <p role="alert" className="text-sm text-red-600">
-          {state.message}
-        </p>
-      )}
-      <div>
-        <label htmlFor="email" className="block text-sm font-medium">
-          Email
-        </label>
-        <input
-          id="email"
-          type="email"
-          autoComplete="email"
-          {...register("email")}
-          className="mt-1 block w-full rounded border px-3 py-2"
-        />
-        {errors.email && (
-          <p className="mt-1 text-sm text-red-600">{errors.email.message}</p>
-        )}
-      </div>
-      <div>
-        <label htmlFor="password" className="block text-sm font-medium">
-          Password
-        </label>
-        <input
-          id="password"
-          type="password"
-          autoComplete="current-password"
-          {...register("password")}
-          className="mt-1 block w-full rounded border px-3 py-2"
-        />
-        {errors.password && (
-          <p className="mt-1 text-sm text-red-600">{errors.password.message}</p>
-        )}
-      </div>
-      <button
-        type="submit"
-        disabled={isPending}
-        className="w-full rounded bg-primary px-4 py-2 text-primary-foreground disabled:opacity-50"
-      >
-        {isPending ? "Signing in..." : "Sign in"}
-      </button>
-    </form>
+    <Card>
+      <CardHeader>
+        <CardTitle>Sign in</CardTitle>
+        <CardDescription>Enter your email and password below</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={onSubmit} data-testid="login-form" className="space-y-4">
+          {state.status === "error" && (
+            <p role="alert" className="rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive">
+              {state.message}
+            </p>
+          )}
+
+          <div className="space-y-1.5">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              autoComplete="email"
+              placeholder="you@example.com"
+              {...register("email")}
+            />
+            {errors.email && (
+              <p className="text-sm text-destructive">{errors.email.message}</p>
+            )}
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              autoComplete="current-password"
+              placeholder="••••••••"
+              {...register("password")}
+            />
+            {errors.password && (
+              <p className="text-sm text-destructive">{errors.password.message}</p>
+            )}
+          </div>
+
+          <Button type="submit" className="w-full" disabled={isPending}>
+            {isPending ? "Signing in…" : "Sign in"}
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
   );
 }