@doswiftly/cli 0.1.19 → 0.1.20

package/templates/storefront-nextjs-shadcn/components/error/error-boundary.tsx

@@ -10,6 +10,7 @@
  */
 
 import { Component, type ReactNode } from 'react';
+import { useTranslations } from 'next-intl';
 import { AlertTriangle, RefreshCcw } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
@@ -32,6 +33,51 @@ interface ErrorBoundaryState {
   error: Error | null;
 }
 
+/** Default fallback UI — functional component so it can use useTranslations */
+function DefaultErrorFallback({
+  title,
+  description,
+  error,
+  onReset,
+}: {
+  title?: string;
+  description?: string;
+  error: Error | null;
+  onReset: () => void;
+}) {
+  const t = useTranslations('errors');
+
+  return (
+    <div className="flex min-h-[400px] items-center justify-center p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader className="text-center">
+          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-destructive/10">
+            <AlertTriangle className="h-6 w-6 text-destructive" />
+          </div>
+          <CardTitle className="text-xl">
+            {title || t('somethingWentWrong')}
+          </CardTitle>
+          <CardDescription>
+            {description || t('unexpectedError')}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-3">
+          {/* Show error message in development */}
+          {process.env.NODE_ENV === 'development' && error && (
+            <div className="rounded-md bg-muted p-3 text-xs">
+              <p className="font-medium text-destructive">{error.message}</p>
+            </div>
+          )}
+          <Button onClick={onReset} className="w-full">
+            <RefreshCcw className="mr-2 h-4 w-4" />
+            {t('tryAgain')}
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
 /**
  * ErrorBoundary - Catches and displays errors gracefully
  *
@@ -74,35 +120,14 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
         return this.props.fallback;
       }
 
-      // Default fallback UI
+      // Default fallback UI (functional component for useTranslations)
       return (
-        <div className="flex min-h-[400px] items-center justify-center p-4">
-          <Card className="w-full max-w-md">
-            <CardHeader className="text-center">
-              <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-destructive/10">
-                <AlertTriangle className="h-6 w-6 text-destructive" />
-              </div>
-              <CardTitle className="text-xl">
-                {this.props.title || 'Coś poszło nie tak'}
-              </CardTitle>
-              <CardDescription>
-                {this.props.description || 'Wystąpił nieoczekiwany błąd. Spróbuj odświeżyć stronę.'}
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="flex flex-col gap-3">
-              {/* Show error message in development */}
-              {process.env.NODE_ENV === 'development' && this.state.error && (
-                <div className="rounded-md bg-muted p-3 text-xs">
-                  <p className="font-medium text-destructive">{this.state.error.message}</p>
-                </div>
-              )}
-              <Button onClick={this.handleReset} className="w-full">
-                <RefreshCcw className="mr-2 h-4 w-4" />
-                Spróbuj ponownie
-              </Button>
-            </CardContent>
-          </Card>
-        </div>
+        <DefaultErrorFallback
+          title={this.props.title}
+          description={this.props.description}
+          error={this.state.error}
+          onReset={this.handleReset}
+        />
       );
     }
 

package/templates/storefront-nextjs-shadcn/components/filters/dynamic-attribute-filters.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useCallback } from "react";
+import { useTranslations } from "next-intl";
 import { Filter, X, ChevronDown, ChevronUp } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
@@ -85,6 +86,7 @@ export function DynamicAttributeFilters({
   className,
   collapsible = false,
 }: DynamicAttributeFiltersProps) {
+  const t = useTranslations("filters");
   const [isExpanded, setIsExpanded] = useState(!collapsible);
 
   // Calculate active filter count
@@ -100,7 +102,7 @@ export function DynamicAttributeFilters({
       <div className={cn("p-4", className)}>
         <div className="flex items-center gap-2">
           <Spinner className="h-4 w-4" />
-          <span className="text-sm text-muted-foreground">Loading filters...</span>
+          <span className="text-sm text-muted-foreground">{t("loading")}</span>
         </div>
       </div>
     );
@@ -115,7 +117,7 @@ export function DynamicAttributeFilters({
     <div className="flex items-center justify-between">
       <div className="flex items-center gap-2">
         <Filter className="h-4 w-4 text-muted-foreground" />
-        <h3 className="text-sm font-medium text-foreground">Filters</h3>
+        <h3 className="text-sm font-medium text-foreground">{t("title")}</h3>
         {activeCount > 0 && (
           <span className="flex items-center justify-center h-5 w-5 rounded-full bg-primary text-primary-foreground text-xs">
             {activeCount}
@@ -132,7 +134,7 @@ export function DynamicAttributeFilters({
             className="h-7 text-xs text-muted-foreground hover:text-foreground"
           >
             <X className="h-3 w-3 mr-1" />
-            Clear all
+            {t("clearAll")}
           </Button>
         )}
 
@@ -159,7 +161,7 @@ export function DynamicAttributeFilters({
       {/* Price filter */}
       {filters.priceRange && onPriceChange && (
         <div className="space-y-3">
-          <h4 className="text-sm font-medium text-foreground">Price</h4>
+          <h4 className="text-sm font-medium text-foreground">{t("price")}</h4>
           <div className="flex items-center gap-2">
             <input
               type="number"
@@ -204,7 +206,7 @@ export function DynamicAttributeFilters({
 
       {/* Product count */}
       <p className="text-xs text-muted-foreground pt-2 border-t">
-        {filters.totalProducts} products
+        {t("productCount", { count: filters.totalProducts })}
       </p>
     </div>
   );

package/templates/storefront-nextjs-shadcn/components/gift-card/gift-card-balance.tsx

@@ -11,6 +11,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Progress } from "@/components/ui/progress";
 import { cn } from "@/lib/utils";
+import { useTranslations } from "next-intl";
 
 /**
  * Gift card status
@@ -72,35 +73,35 @@ function getStatusConfig(status: GiftCardStatus) {
   switch (status) {
     case "ACTIVE":
       return {
-        label: "Active",
+        translationKey: "active",
         variant: "default" as const,
         color: "text-green-600",
         bgColor: "bg-green-100 dark:bg-green-900/30",
       };
     case "USED":
       return {
-        label: "Fully Redeemed",
+        translationKey: "used",
         variant: "secondary" as const,
         color: "text-gray-600",
         bgColor: "bg-gray-100 dark:bg-gray-900/30",
       };
     case "EXPIRED":
       return {
-        label: "Expired",
+        translationKey: "expired",
         variant: "destructive" as const,
         color: "text-red-600",
         bgColor: "bg-red-100 dark:bg-red-900/30",
       };
     case "DISABLED":
       return {
-        label: "Disabled",
+        translationKey: "disabled",
         variant: "secondary" as const,
         color: "text-gray-600",
         bgColor: "bg-gray-100 dark:bg-gray-900/30",
       };
     default:
       return {
-        label: "Unknown",
+        translationKey: "unknown",
         variant: "secondary" as const,
         color: "text-gray-600",
         bgColor: "bg-gray-100 dark:bg-gray-900/30",
@@ -136,6 +137,7 @@ export function GiftCardBalance({
   giftCard,
   className = "",
 }: GiftCardBalanceProps) {
+  const t = useTranslations("giftCardStatus");
   const statusConfig = getStatusConfig(giftCard.status);
   const initialAmount = parseFloat(giftCard.initialAmount.amount);
   const currentBalance = parseFloat(giftCard.balance.amount);
@@ -153,8 +155,8 @@ export function GiftCardBalance({
             </div>
             <div>
               <CardTitle className="text-lg flex items-center gap-2">
-                Gift Card
-                <Badge variant={statusConfig.variant}>{statusConfig.label}</Badge>
+                {t("title")}
+                <Badge variant={statusConfig.variant}>{t(statusConfig.translationKey as any)}</Badge>
               </CardTitle>
               <p className="text-sm text-muted-foreground font-mono mt-1">
                 {giftCard.maskedCode}
@@ -168,7 +170,7 @@ export function GiftCardBalance({
         {/* Balance display */}
         <div className="space-y-2">
           <div className="flex justify-between items-baseline">
-            <span className="text-sm text-muted-foreground">Available Balance</span>
+            <span className="text-sm text-muted-foreground">{t("availableBalance")}</span>
             <span className="text-2xl font-bold">
               {formatAmount(
                 giftCard.balance.amount,
@@ -182,14 +184,14 @@ export function GiftCardBalance({
 
           <div className="flex justify-between text-xs text-muted-foreground">
             <span>
-              Used:{" "}
+              {t("usedAmount")}{" "}
               {formatAmount(
                 (initialAmount - currentBalance).toFixed(2),
                 giftCard.balance.currencyCode
               )}
             </span>
             <span>
-              Initial:{" "}
+              {t("initialAmount")}{" "}
               {formatAmount(
                 giftCard.initialAmount.amount,
                 giftCard.initialAmount.currencyCode
@@ -214,8 +216,9 @@ export function GiftCardBalance({
               <Calendar className="h-4 w-4 text-muted-foreground" />
             )}
             <span>
-              {expiringSoon ? "Expires soon: " : "Expires: "}
-              {formatDate(giftCard.expiresAt)}
+              {expiringSoon
+                ? t("expiresSoon", { date: formatDate(giftCard.expiresAt) })
+                : t("expiresOn", { date: formatDate(giftCard.expiresAt) })}
             </span>
           </div>
         )}
@@ -224,7 +227,7 @@ export function GiftCardBalance({
         {!giftCard.expiresAt && giftCard.status === "ACTIVE" && (
           <div className="flex items-center gap-2 text-sm text-muted-foreground">
             <CheckCircle className="h-4 w-4 text-green-500" />
-            <span>No expiration date</span>
+            <span>{t("noExpiration")}</span>
           </div>
         )}
 
@@ -233,7 +236,7 @@ export function GiftCardBalance({
           <div className="pt-3 border-t border-border space-y-2">
             {giftCard.recipientName && (
               <p className="text-sm">
-                <span className="text-muted-foreground">To: </span>
+                <span className="text-muted-foreground">{t("recipientLabel")} </span>
                 <span className="font-medium">{giftCard.recipientName}</span>
               </p>
             )}
@@ -297,6 +300,7 @@ export function GiftCardBalanceCompact({
   status,
   className = "",
 }: GiftCardBalanceCompactProps) {
+  const t = useTranslations("giftCardStatus");
   const statusConfig = getStatusConfig(status);
 
   return (
@@ -310,7 +314,7 @@ export function GiftCardBalanceCompact({
         <CreditCard className="h-4 w-4 text-muted-foreground" />
         <span className="font-mono text-sm">{maskedCode}</span>
         <Badge variant={statusConfig.variant} className="text-xs">
-          {statusConfig.label}
+          {t(statusConfig.translationKey as any)}
         </Badge>
       </div>
       <span className="font-semibold">

package/templates/storefront-nextjs-shadcn/components/gift-card/gift-card-input.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useCallback } from "react";
+import { useTranslations } from "next-intl";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
@@ -89,6 +90,8 @@ export function GiftCardInput({
   disabled = false,
   className = "",
 }: GiftCardInputProps) {
+  const t = useTranslations("cart");
+  const tc = useTranslations("common");
   const [code, setCode] = useState("");
   const [isValidating, setIsValidating] = useState(false);
   const [validation, setValidation] = useState<GiftCardValidationResult | null>(
@@ -124,13 +127,13 @@ export function GiftCardInput({
    */
   const handleValidate = useCallback(async () => {
     if (!code || code.length < 4) {
-      setError("Please enter a valid gift card code");
+      setError(t("giftCardInvalidCode"));
       return;
     }
 
     // Check if already applied
     if (appliedCodes.includes(code)) {
-      setError("This gift card has already been applied");
+      setError(t("giftCardAlreadyApplied"));
       return;
     }
 
@@ -145,7 +148,7 @@ export function GiftCardInput({
         setError(result.error.message);
       }
     } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : "Failed to validate gift card");
+      setError(err instanceof Error ? err.message : t("giftCardValidationFailed"));
     } finally {
       setIsValidating(false);
     }
@@ -187,7 +190,7 @@ export function GiftCardInput({
           <Gift className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
           <Input
             type="text"
-            placeholder="Gift card code (e.g., ABCD-EFGH-IJKL-MNOP)"
+            placeholder={t("giftCardCodePlaceholder")}
             value={code}
             onChange={handleCodeChange}
             onKeyDown={handleKeyDown}
@@ -207,10 +210,10 @@ export function GiftCardInput({
           ) : validation?.valid ? (
             <>
               <Check className="mr-2 h-4 w-4" />
-              Apply
+              {tc("apply")}
             </>
           ) : (
-            "Check"
+            t("giftCardCheck")
           )}
         </Button>
       </div>
@@ -229,7 +232,7 @@ export function GiftCardInput({
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
                 <Check className="h-4 w-4" />
-                <span>Gift card valid!</span>
+                <span>{t("giftCardValid")}</span>
               </div>
               {validation.availableBalance && (
                 <span className="font-semibold">
@@ -244,7 +247,7 @@ export function GiftCardInput({
           ) : (
             <div className="flex items-center gap-2">
               <X className="h-4 w-4" />
-              <span>{validation.error?.message || "Invalid gift card"}</span>
+              <span>{validation.error?.message || t("giftCardInvalid")}</span>
             </div>
           )}
         </div>
@@ -262,7 +265,7 @@ export function GiftCardInput({
       {appliedCodes.length > 0 && (
         <div className="space-y-2">
           <p className="text-sm font-medium text-muted-foreground">
-            Applied gift cards:
+            {t("appliedGiftCards")}
           </p>
           <div className="flex flex-wrap gap-2">
             {appliedCodes.map((appliedCode) => (

package/templates/storefront-nextjs-shadcn/components/home/category-grid.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import Link from "next/link";
+import { useTranslations } from "next-intl";
+import { Link } from "@/i18n/navigation";
 import { cn } from "@/lib/utils";
 import { useCollections } from "@/lib/graphql/hooks";
 import type { CollectionCardFields } from "@/lib/graphql/fragments";
@@ -10,6 +11,8 @@ export interface CategoryGridProps {
 }
 
 export function CategoryGrid({ className }: CategoryGridProps) {
+  const t = useTranslations("home");
+
   // Use collections for homepage marketing (not categories)
   // Collections are better for homepage because they're curated and flexible
   const { data, isLoading, error } = useCollections({
@@ -22,9 +25,9 @@ export function CategoryGrid({ className }: CategoryGridProps) {
     return (
       <section className={cn("container mx-auto px-4", className)}>
         <div className="mb-8 text-center">
-          <h2 className="text-3xl font-bold text-foreground">Shop by Category</h2>
+          <h2 className="text-3xl font-bold text-foreground">{t("shopByCategory")}</h2>
           <p className="mt-2 text-muted-foreground">
-            Find exactly what you're looking for
+            {t("shopByCategoryDescription")}
           </p>
         </div>
         <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4">
@@ -46,9 +49,9 @@ export function CategoryGrid({ className }: CategoryGridProps) {
   return (
     <section className={cn("container mx-auto px-4", className)}>
       <div className="mb-8 text-center">
-        <h2 className="text-3xl font-bold text-foreground">Shop by Category</h2>
+        <h2 className="text-3xl font-bold text-foreground">{t("shopByCategory")}</h2>
         <p className="mt-2 text-muted-foreground">
-          Find exactly what you're looking for
+          {t("shopByCategoryDescription")}
         </p>
       </div>
 

package/templates/storefront-nextjs-shadcn/components/home/featured-collections.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import Link from "next/link";
+import { Link } from "@/i18n/navigation";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { useCollections } from "@/lib/graphql/hooks";

package/templates/storefront-nextjs-shadcn/components/home/featured-products.tsx

@@ -1,11 +1,15 @@
 "use client";
 
-import Link from "next/link";
+import { useTranslations } from "next-intl";
+import { Link } from "@/i18n/navigation";
 import { ProductGrid } from "@/components/product/product-grid";
 import { Button } from "@/components/ui/button";
 import { useProducts } from "@/lib/graphql/hooks";
 
 export function FeaturedProducts() {
+  const t = useTranslations("home");
+  const tc = useTranslations("common");
+
   // Fetch featured products using GraphQL
   const { data, isLoading, error } = useProducts({
     first: 8,
@@ -19,9 +23,9 @@ export function FeaturedProducts() {
       <section className="container mx-auto px-4">
         <div className="mb-8 flex items-center justify-between">
           <div>
-            <h2 className="text-3xl font-bold text-foreground">Featured Products</h2>
+            <h2 className="text-3xl font-bold text-foreground">{t("featuredProducts")}</h2>
             <p className="mt-2 text-muted-foreground">
-              Handpicked favorites just for you
+              {t("featuredDescription")}
             </p>
           </div>
         </div>
@@ -53,13 +57,13 @@ export function FeaturedProducts() {
     <section className="container mx-auto px-4">
       <div className="mb-8 flex items-center justify-between">
         <div>
-          <h2 className="text-3xl font-bold text-foreground">Featured Products</h2>
+          <h2 className="text-3xl font-bold text-foreground">{t("featuredProducts")}</h2>
           <p className="mt-2 text-muted-foreground">
-            Handpicked favorites just for you
+            {t("featuredDescription")}
           </p>
         </div>
         <Button variant="outline" asChild>
-          <Link href="/products">View All</Link>
+          <Link href="/products">{tc("viewAll")}</Link>
         </Button>
       </div>
 
@@ -73,10 +77,10 @@ export function FeaturedProducts() {
       ) : (
         <div className="rounded-lg border border-border bg-muted/50 p-12 text-center">
           <p className="text-muted-foreground">
-            No featured products available at the moment.
+            {t("noFeaturedProducts")}
           </p>
           <Button className="mt-4" asChild>
-            <Link href="/products">Browse All Products</Link>
+            <Link href="/products">{t("browseAllProducts")}</Link>
           </Button>
         </div>
       )}

package/templates/storefront-nextjs-shadcn/components/home/hero-section.tsx

@@ -1,26 +1,31 @@
-import Link from "next/link";
+import { useTranslations } from "next-intl";
+import { Link } from "@/i18n/navigation";
 import { Button } from "@/components/ui/button";
 
 export function HeroSection() {
+  const t = useTranslations("home");
+
   return (
     <section className="container mx-auto px-4">
       <div className="relative overflow-hidden rounded-2xl bg-gradient-to-r from-primary/10 via-primary/5 to-background p-8 md:p-16">
         <div className="relative z-10 mx-auto max-w-3xl text-center">
           <h1 className="mb-4 text-4xl font-bold tracking-tight text-foreground sm:text-5xl md:text-6xl">
-            Welcome to{" "}
-            <span className="text-primary">
-              {process.env.NEXT_PUBLIC_SITE_NAME || "My Store"}
-            </span>
+            {t.rich("welcomeTo", {
+              storeName: process.env.NEXT_PUBLIC_SITE_NAME || "Store",
+              highlight: (chunks) => (
+                <span className="text-primary">{chunks}</span>
+              ),
+            })}
           </h1>
           <p className="mx-auto mb-8 max-w-2xl text-lg text-muted-foreground">
-            Discover our curated collection of quality products. Shop with confidence and enjoy exceptional service.
+            {t("heroDescription")}
           </p>
           <div className="flex flex-col justify-center gap-4 sm:flex-row">
             <Button size="lg" asChild>
-              <Link href="/products">Shop Now</Link>
+              <Link href="/products">{t("shopNow")}</Link>
             </Button>
             <Button size="lg" variant="outline" asChild>
-              <Link href="/products">Browse Products</Link>
+              <Link href="/products">{t("browseProducts")}</Link>
             </Button>
           </div>
         </div>

package/templates/storefront-nextjs-shadcn/components/home/newsletter-signup.tsx

@@ -5,12 +5,14 @@ import { Mail, Check } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
+import { useTranslations } from "next-intl";
 
 export interface NewsletterSignupProps {
   className?: string;
 }
 
 export function NewsletterSignup({ className }: NewsletterSignupProps) {
+  const t = useTranslations("footer");
   const [email, setEmail] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [isSuccess, setIsSuccess] = useState(false);
@@ -20,7 +22,7 @@ export function NewsletterSignup({ className }: NewsletterSignupProps) {
     e.preventDefault();
     
     if (!email || !email.includes("@")) {
-      setError("Please enter a valid email address");
+      setError(t("invalidEmail"));
       return;
     }
 
@@ -42,7 +44,7 @@ export function NewsletterSignup({ className }: NewsletterSignupProps) {
         setIsSuccess(false);
       }, 3000);
     } catch (err) {
-      setError("Failed to subscribe. Please try again.");
+      setError(t("failedSubscribe"));
     } finally {
       setIsLoading(false);
     }
@@ -57,17 +59,17 @@ export function NewsletterSignup({ className }: NewsletterSignupProps) {
           </div>
           
           <h2 className="mb-2 text-3xl font-bold text-foreground">
-            Stay in the Loop
+            {t("stayInLoop")}
           </h2>
           <p className="mb-6 text-muted-foreground">
-            Subscribe to our newsletter for exclusive offers, new arrivals, and insider news.
+            {t("newsletterLongDescription")}
           </p>
 
           {isSuccess ? (
             <div className="flex items-center justify-center gap-2 rounded-lg bg-green-50 p-4 text-green-700 dark:bg-green-950 dark:text-green-400">
               <Check className="h-5 w-5" />
               <span className="font-medium">
-                Thanks for subscribing! Check your email for confirmation.
+                {t("thanksForSubscribing")}
               </span>
             </div>
           ) : (
@@ -75,7 +77,7 @@ export function NewsletterSignup({ className }: NewsletterSignupProps) {
               <div className="flex flex-col gap-3 sm:flex-row">
                 <Input
                   type="email"
-                  placeholder="Enter your email"
+                  placeholder={t("emailPlaceholder")}
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
                   disabled={isLoading}
@@ -88,7 +90,7 @@ export function NewsletterSignup({ className }: NewsletterSignupProps) {
                   size="lg"
                   className="sm:w-auto"
                 >
-                  {isLoading ? "Subscribing..." : "Subscribe"}
+                  {isLoading ? t("subscribing") : t("subscribe")}
                 </Button>
               </div>
               
@@ -97,7 +99,7 @@ export function NewsletterSignup({ className }: NewsletterSignupProps) {
               )}
               
               <p className="mt-3 text-xs text-muted-foreground">
-                By subscribing, you agree to our Privacy Policy and consent to receive updates.
+                {t("privacyConsent")}
               </p>
             </form>
           )}