@doswiftly/cli 0.1.1

package/templates/storefront-nextjs-shadcn/components/auth/register-form.tsx

@@ -0,0 +1,305 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { z } from "zod";
+import { useMutation } from "@tanstack/react-query";
+import { getGraphQLClient } from "@/lib/graphql/client";
+import { CustomerCreateDocument } from "@/generated/graphql";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+// Zod validation schema for registration form
+const registerSchema = z.object({
+  firstName: z
+    .string()
+    .min(1, "First name is required")
+    .min(2, "First name must be at least 2 characters")
+    .max(50, "First name must be less than 50 characters"),
+  lastName: z
+    .string()
+    .min(1, "Last name is required")
+    .min(2, "Last name must be at least 2 characters")
+    .max(50, "Last name must be less than 50 characters"),
+  email: z
+    .string()
+    .min(1, "Email is required")
+    .email("Please enter a valid email address"),
+  password: z
+    .string()
+    .min(1, "Password is required")
+    .min(8, "Password must be at least 8 characters")
+    .regex(
+      /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/,
+      "Password must contain at least one uppercase letter, one lowercase letter, and one number"
+    ),
+  acceptsMarketing: z.boolean().optional(),
+});
+
+type RegisterFormData = z.infer<typeof registerSchema>;
+
+export interface RegisterFormProps {
+  onSuccess?: () => void;
+  redirectTo?: string;
+}
+
+/**
+ * RegisterForm - Reusable registration form component with Zod validation
+ * 
+ * Validates user input before submission and displays field-level errors
+ */
+export function RegisterForm({ onSuccess, redirectTo = "/account" }: RegisterFormProps) {
+  const router = useRouter();
+
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [acceptsMarketing, setAcceptsMarketing] = useState(false);
+  const [error, setError] = useState("");
+  const [fieldErrors, setFieldErrors] = useState<Partial<Record<keyof RegisterFormData, string>>>({});
+
+  const client = getGraphQLClient();
+
+  const registerMutation = useMutation({
+    mutationFn: async (input: {
+      email: string;
+      password: string;
+      firstName: string;
+      lastName: string;
+      acceptsMarketing: boolean;
+    }) => {
+      return client.request(CustomerCreateDocument, { input });
+    },
+  });
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setFieldErrors({});
+
+    // Validate form data with Zod
+    const result = registerSchema.safeParse({
+      firstName,
+      lastName,
+      email,
+      password,
+      acceptsMarketing,
+    });
+
+    if (!result.success) {
+      // Extract field-level errors from Zod validation
+      const errors: Partial<Record<keyof RegisterFormData, string>> = {};
+      result.error.errors.forEach((err) => {
+        if (err.path[0]) {
+          errors[err.path[0] as keyof RegisterFormData] = err.message;
+        }
+      });
+      setFieldErrors(errors);
+      return;
+    }
+
+    try {
+      const mutationResult = await registerMutation.mutateAsync({
+        email,
+        password,
+        firstName,
+        lastName,
+        acceptsMarketing,
+      });
+
+      // Check for user errors first
+      const userErrors = mutationResult?.customerCreate?.userErrors || 
+                        mutationResult?.customerCreate?.customerUserErrors || [];
+      
+      if (userErrors.length > 0) {
+        setError(userErrors[0].message || "Registration failed");
+        return;
+      }
+
+      if (mutationResult?.customerCreate?.customer) {
+        // Registration successful - token is already in the response
+        const accessToken = mutationResult?.customerCreate?.customerAccessToken?.accessToken;
+        
+        if (accessToken) {
+          // Store token in httpOnly cookie via API route
+          const tokenResponse = await fetch("/api/auth/set-token", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ token: accessToken }),
+          });
+
+          if (tokenResponse.ok) {
+            if (onSuccess) {
+              onSuccess();
+            } else {
+              router.push(redirectTo);
+            }
+          } else {
+            setError("Registration successful but session setup failed. Please try logging in.");
+          }
+        } else {
+          // No token in response - redirect to login
+          setError("Registration successful! Please log in with your credentials.");
+          setTimeout(() => router.push("/auth/login"), 2000);
+        }
+      } else {
+        setError("Registration failed. Please try again.");
+      }
+    } catch (err) {
+      setError("An error occurred. Please try again.");
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      {error && (
+        <div className="rounded-lg border border-destructive bg-destructive/10 p-4 text-sm text-destructive">
+          {error}
+        </div>
+      )}
+
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <label
+            htmlFor="firstName"
+            className="text-sm font-medium text-foreground"
+          >
+            First Name
+          </label>
+          <Input
+            id="firstName"
+            type="text"
+            value={firstName}
+            onChange={(e) => setFirstName(e.target.value)}
+            placeholder="John"
+            required
+            autoComplete="given-name"
+            aria-invalid={!!fieldErrors.firstName}
+            aria-describedby={fieldErrors.firstName ? "firstName-error" : undefined}
+          />
+          {fieldErrors.firstName && (
+            <p id="firstName-error" className="text-xs text-destructive">
+              {fieldErrors.firstName}
+            </p>
+          )}
+        </div>
+
+        <div className="space-y-2">
+          <label
+            htmlFor="lastName"
+            className="text-sm font-medium text-foreground"
+          >
+            Last Name
+          </label>
+          <Input
+            id="lastName"
+            type="text"
+            value={lastName}
+            onChange={(e) => setLastName(e.target.value)}
+            placeholder="Doe"
+            required
+            autoComplete="family-name"
+            aria-invalid={!!fieldErrors.lastName}
+            aria-describedby={fieldErrors.lastName ? "lastName-error" : undefined}
+          />
+          {fieldErrors.lastName && (
+            <p id="lastName-error" className="text-xs text-destructive">
+              {fieldErrors.lastName}
+            </p>
+          )}
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <label
+          htmlFor="email"
+          className="text-sm font-medium text-foreground"
+        >
+          Email
+        </label>
+        <Input
+          id="email"
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder="you@example.com"
+          required
+          autoComplete="email"
+          aria-invalid={!!fieldErrors.email}
+          aria-describedby={fieldErrors.email ? "email-error" : undefined}
+        />
+        {fieldErrors.email && (
+          <p id="email-error" className="text-xs text-destructive">
+            {fieldErrors.email}
+          </p>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        <label
+          htmlFor="password"
+          className="text-sm font-medium text-foreground"
+        >
+          Password
+        </label>
+        <Input
+          id="password"
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          placeholder="••••••••"
+          required
+          minLength={8}
+          autoComplete="new-password"
+          aria-invalid={!!fieldErrors.password}
+          aria-describedby={fieldErrors.password ? "password-error" : undefined}
+        />
+        {fieldErrors.password ? (
+          <p id="password-error" className="text-xs text-destructive">
+            {fieldErrors.password}
+          </p>
+        ) : (
+          <p className="text-xs text-muted-foreground">
+            Must be at least 8 characters with uppercase, lowercase, and number
+          </p>
+        )}
+      </div>
+
+      <div className="flex items-start gap-2">
+        <input
+          id="acceptsMarketing"
+          type="checkbox"
+          checked={acceptsMarketing}
+          onChange={(e) => setAcceptsMarketing(e.target.checked)}
+          className="mt-1 h-4 w-4 rounded border-border text-primary focus:ring-2 focus:ring-ring focus:ring-offset-2"
+        />
+        <label
+          htmlFor="acceptsMarketing"
+          className="text-sm text-muted-foreground"
+        >
+          I want to receive emails about products, promotions, and special offers
+        </label>
+      </div>
+
+      <Button
+        type="submit"
+        className="w-full"
+        disabled={registerMutation.isPending}
+      >
+        {registerMutation.isPending ? "Creating account..." : "Create Account"}
+      </Button>
+
+      <div className="text-center text-sm text-muted-foreground">
+        Already have an account?{" "}
+        <Link
+          href="/auth/login"
+          className="font-medium text-primary hover:underline"
+        >
+          Sign in
+        </Link>
+      </div>
+    </form>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/blog/blog-card.tsx

@@ -0,0 +1,240 @@
+'use client';
+
+/**
+ * BlogCard Component
+ *
+ * Card preview for blog posts with featured image, title, excerpt, and metadata.
+ */
+
+import Image from 'next/image';
+import Link from 'next/link';
+import { Calendar, Clock, Eye, User } from 'lucide-react';
+import { Card, CardContent, CardFooter } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { cn } from '@/lib/utils';
+
+interface BlogPost {
+  id: string;
+  title: string;
+  slug: string;
+  excerpt?: string;
+  featuredImage?: {
+    url: string;
+    altText?: string | null;
+  } | null;
+  author: {
+    id: string;
+    name: string;
+    avatar?: {
+      url: string;
+    } | null;
+  };
+  category?: {
+    id: string;
+    name: string;
+    slug: string;
+  } | null;
+  publishedAt?: string;
+  readingTime: number;
+  viewCount: number;
+  isFeatured: boolean;
+}
+
+interface BlogCardProps {
+  post: BlogPost;
+  variant?: 'default' | 'compact' | 'featured';
+  className?: string;
+}
+
+export function BlogCard({ post, variant = 'default', className }: BlogCardProps) {
+  const {
+    title,
+    slug,
+    excerpt,
+    featuredImage,
+    author,
+    category,
+    publishedAt,
+    readingTime,
+    viewCount,
+    isFeatured,
+  } = post;
+
+  const formatDate = (dateString: string) => {
+    return new Intl.DateTimeFormat('pl-PL', {
+      day: 'numeric',
+      month: 'long',
+      year: 'numeric',
+    }).format(new Date(dateString));
+  };
+
+  if (variant === 'compact') {
+    return (
+      <Link
+        href={`/blog/${slug}`}
+        className={cn(
+          'flex gap-4 group hover:bg-muted/50 rounded-lg p-2 transition-colors',
+          className
+        )}
+      >
+        {featuredImage && (
+          <div className="relative w-20 h-20 flex-shrink-0 rounded-md overflow-hidden bg-muted">
+            <Image
+              src={featuredImage.url}
+              alt={featuredImage.altText || title}
+              fill
+              className="object-cover group-hover:scale-105 transition-transform duration-300"
+              sizes="80px"
+            />
+          </div>
+        )}
+        <div className="flex-1 min-w-0">
+          <h3 className="font-medium text-sm line-clamp-2 group-hover:text-primary transition-colors">
+            {title}
+          </h3>
+          {publishedAt && (
+            <time className="text-xs text-muted-foreground mt-1 block">
+              {formatDate(publishedAt)}
+            </time>
+          )}
+        </div>
+      </Link>
+    );
+  }
+
+  if (variant === 'featured') {
+    return (
+      <Card className={cn('overflow-hidden h-full', className)}>
+        <Link href={`/blog/${slug}`} className="block group">
+          <div className="relative aspect-[16/9] bg-muted">
+            {featuredImage ? (
+              <Image
+                src={featuredImage.url}
+                alt={featuredImage.altText || title}
+                fill
+                className="object-cover group-hover:scale-105 transition-transform duration-300"
+                sizes="(max-width: 768px) 100vw, 50vw"
+                priority
+              />
+            ) : (
+              <div className="w-full h-full flex items-center justify-center text-muted-foreground">
+                Brak zdjęcia
+              </div>
+            )}
+            {isFeatured && (
+              <Badge className="absolute top-4 left-4">Wyróżniony</Badge>
+            )}
+          </div>
+          <CardContent className="p-6">
+            {category && (
+              <Badge variant="secondary" className="mb-3">
+                {category.name}
+              </Badge>
+            )}
+            <h2 className="text-2xl font-bold mb-3 group-hover:text-primary transition-colors line-clamp-2">
+              {title}
+            </h2>
+            {excerpt && (
+              <p className="text-muted-foreground line-clamp-3">{excerpt}</p>
+            )}
+          </CardContent>
+        </Link>
+        <CardFooter className="px-6 pb-6 pt-0">
+          <div className="flex items-center gap-4 text-sm text-muted-foreground w-full">
+            <div className="flex items-center gap-2">
+              {author.avatar ? (
+                <Image
+                  src={author.avatar.url}
+                  alt={author.name}
+                  width={24}
+                  height={24}
+                  className="rounded-full"
+                />
+              ) : (
+                <User className="h-4 w-4" />
+              )}
+              <span>{author.name}</span>
+            </div>
+            <div className="flex items-center gap-1 ml-auto">
+              <Clock className="h-4 w-4" />
+              <span>{readingTime} min</span>
+            </div>
+          </div>
+        </CardFooter>
+      </Card>
+    );
+  }
+
+  // Default variant
+  return (
+    <Card className={cn('overflow-hidden h-full flex flex-col', className)}>
+      <Link href={`/blog/${slug}`} className="block group">
+        <div className="relative aspect-[16/10] bg-muted">
+          {featuredImage ? (
+            <Image
+              src={featuredImage.url}
+              alt={featuredImage.altText || title}
+              fill
+              className="object-cover group-hover:scale-105 transition-transform duration-300"
+              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+            />
+          ) : (
+            <div className="w-full h-full flex items-center justify-center text-muted-foreground">
+              Brak zdjęcia
+            </div>
+          )}
+        </div>
+      </Link>
+      <CardContent className="p-4 flex-1">
+        {category && (
+          <Link
+            href={`/blog/category/${category.slug}`}
+            className="inline-block mb-2"
+          >
+            <Badge variant="secondary" className="hover:bg-secondary/80">
+              {category.name}
+            </Badge>
+          </Link>
+        )}
+        <Link href={`/blog/${slug}`} className="block group">
+          <h3 className="font-semibold mb-2 group-hover:text-primary transition-colors line-clamp-2">
+            {title}
+          </h3>
+        </Link>
+        {excerpt && (
+          <p className="text-sm text-muted-foreground line-clamp-2">{excerpt}</p>
+        )}
+      </CardContent>
+      <CardFooter className="px-4 pb-4 pt-0">
+        <div className="flex items-center justify-between text-xs text-muted-foreground w-full">
+          <div className="flex items-center gap-2">
+            {author.avatar ? (
+              <Image
+                src={author.avatar.url}
+                alt={author.name}
+                width={20}
+                height={20}
+                className="rounded-full"
+              />
+            ) : (
+              <User className="h-3.5 w-3.5" />
+            )}
+            <span>{author.name}</span>
+          </div>
+          <div className="flex items-center gap-3">
+            {publishedAt && (
+              <div className="flex items-center gap-1">
+                <Calendar className="h-3.5 w-3.5" />
+                <span>{formatDate(publishedAt)}</span>
+              </div>
+            )}
+            <div className="flex items-center gap-1">
+              <Clock className="h-3.5 w-3.5" />
+              <span>{readingTime} min</span>
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  );
+}