@doswiftly/cli 0.1.18 → 0.1.20

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;
     }
 
@@ -144,8 +147,8 @@ export function GiftCardInput({
       if (!result.valid && result.error) {
         setError(result.error.message);
       }
-    } catch (err: any) {
-      setError(err.message || "Failed to validate gift card");
+    } catch (err: unknown) {
+      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,14 +1,18 @@
 "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";
 
 export interface CategoryGridProps {
   className?: string;
 }
 
 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({
@@ -21,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">
@@ -45,14 +49,14 @@ 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">
-        {collections.map((collection: any) => (
+        {collections.map((collection: CollectionCardFields) => (
           <Link
             key={collection.id}
             href={`/collections/${collection.handle}`}

package/templates/storefront-nextjs-shadcn/components/home/collection-card.fragment.graphql

@@ -0,0 +1,21 @@
+# Fragment for CollectionCard component.
+#
+# Minimal collection data for listing views: homepage,
+# collection grid, navigation menus.
+#
+# Usage in components:
+#   import type { CollectionCardFieldsFragment } from '@/generated/graphql';
+#   interface Props { collection: CollectionCardFieldsFragment }
+
+fragment CollectionCardFields on Collection {
+  id
+  handle
+  title
+  description
+  image {
+    url
+    altText
+    width
+    height
+  }
+}

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

@@ -1,20 +1,10 @@
 "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";
-
-export interface Collection {
-  id: string;
-  handle: string;
-  title: string;
-  description?: string;
-  image?: {
-    url: string;
-    altText?: string | null;
-  } | null;
-}
+import type { CollectionCardFields } from "@/lib/graphql/fragments";
 
 export function FeaturedCollections() {
   // Fetch collections using GraphQL
@@ -61,7 +51,7 @@ export function FeaturedCollections() {
 
       {collections.length > 0 ? (
         <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-          {collections.map((collection: Collection) => (
+          {collections.map((collection: CollectionCardFields) => (
             <Link
               key={collection.id}
               href={`/collections/${collection.handle}`}

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/index.ts

@@ -1,7 +1,6 @@
 export { HeroSection } from './hero-section';
 export { FeaturedProducts } from './featured-products';
 export { FeaturedCollections } from './featured-collections';
-export type { Collection } from './featured-collections';
 export { CategoryGrid } from './category-grid';
 export type { CategoryGridProps } from './category-grid';
 export { NewsletterSignup } from './newsletter-signup';

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>
           )}

package/templates/storefront-nextjs-shadcn/components/hydrated.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { useHydrated } from "@doswiftly/storefront-sdk/react";
+import type { ReactNode } from "react";
+
+interface HydratedProps {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+/**
+ * Wrapper component that only renders children after client hydration.
+ * Use for content that depends on browser-only state (localStorage, Zustand persist).
+ *
+ * @example
+ * ```tsx
+ * <Hydrated fallback={<Skeleton className="w-20 h-8" />}>
+ *   <CartIcon />
+ * </Hydrated>
+ * ```
+ */
+export function Hydrated({ children, fallback = null }: HydratedProps) {
+  return useHydrated() ? children : fallback;
+}