@doswiftly/cli 0.1.18 → 0.1.20

package/templates/storefront-nextjs-shadcn/components/layout/breadcrumbs.tsx

@@ -1,13 +1,13 @@
 "use client";
 
-import Link from "next/link";
-import { usePathname } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { Link, usePathname } from "@/i18n/navigation";
 import { ChevronRight, Home } from "lucide-react";
 import { cn } from "@/lib/utils";
 
 export interface BreadcrumbItem {
   label: string;
-  href: string;
+  href?: string;
 }
 
 export interface BreadcrumbsProps {
@@ -31,15 +31,33 @@ export interface BreadcrumbsProps {
  *   { label: "Laptops", href: "/products/electronics/laptops" }
  * ]} />
  */
+// Known segment keys that exist in nav translations
+const SEGMENT_TRANSLATION_KEYS: Record<string, string> = {
+  products: "products",
+  collections: "collections",
+  categories: "categories",
+  about: "about",
+  brands: "brands",
+  blog: "blog",
+  cart: "cart",
+  account: "account",
+  contact: "contact",
+  shipping: "shipping",
+  returns: "returns",
+  search: "searchBreadcrumb",
+  wishlist: "wishlist",
+};
+
 export function Breadcrumbs({
   items,
   className,
   showHome = true,
 }: BreadcrumbsProps) {
+  const t = useTranslations("nav");
   const pathname = usePathname();
 
   // Auto-generate breadcrumbs from pathname if items not provided
-  const breadcrumbItems = items || generateBreadcrumbs(pathname);
+  const breadcrumbItems = items || generateBreadcrumbs(pathname, t);
 
   // Don't show breadcrumbs on homepage
   if (pathname === "/" || breadcrumbItems.length === 0) {
@@ -48,7 +66,7 @@ export function Breadcrumbs({
 
   return (
     <nav
-      aria-label="Breadcrumb"
+      aria-label={t("breadcrumb")}
       className={cn("flex items-center gap-2 text-sm", className)}
     >
       <ol className="flex items-center gap-2">
@@ -57,7 +75,7 @@ export function Breadcrumbs({
             <Link
               href="/"
               className="flex items-center text-muted-foreground hover:text-foreground transition-colors"
-              aria-label="Home"
+              aria-label={t("home")}
             >
               <Home className="h-4 w-4" />
             </Link>
@@ -68,7 +86,7 @@ export function Breadcrumbs({
           const isLast = index === breadcrumbItems.length - 1;
 
           return (
-            <li key={item.href} className="flex items-center gap-2">
+            <li key={item.href || `breadcrumb-${index}`} className="flex items-center gap-2">
               {(showHome || index > 0) && (
                 <ChevronRight
                   className="h-4 w-4 text-muted-foreground"
@@ -76,10 +94,10 @@ export function Breadcrumbs({
                 />
               )}
 
-              {isLast ? (
+              {isLast || !item.href ? (
                 <span
                   className="font-medium text-foreground"
-                  aria-current="page"
+                  aria-current={isLast ? "page" : undefined}
                 >
                   {item.label}
                 </span>
@@ -101,20 +119,27 @@ export function Breadcrumbs({
 
 /**
  * Generate breadcrumb items from pathname
+ * Uses translations for known segments, falls back to capitalized segment name
  */
-function generateBreadcrumbs(pathname: string): BreadcrumbItem[] {
+function generateBreadcrumbs(
+  pathname: string,
+  t: (key: string) => string,
+): BreadcrumbItem[] {
   const segments = pathname.split("/").filter(Boolean);
   const breadcrumbs: BreadcrumbItem[] = [];
 
   let currentPath = "";
   for (const segment of segments) {
     currentPath += `/${segment}`;
-    
-    // Format label: remove hyphens, capitalize words
-    const label = segment
-      .split("-")
-      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-      .join(" ");
+
+    // Use translation for known segments, fallback to capitalized segment
+    const translationKey = SEGMENT_TRANSLATION_KEYS[segment];
+    const label = translationKey
+      ? t(translationKey)
+      : segment
+          .split("-")
+          .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+          .join(" ");
 
     breadcrumbs.push({
       label,

package/templates/storefront-nextjs-shadcn/components/layout/category-node.fragment.graphql

@@ -0,0 +1,22 @@
+# Fragment for CategoryCard / CategoryNav components.
+#
+# Category data for navigation, sidebar filters, breadcrumbs.
+#
+# Usage in components:
+#   import type { CategoryNodeFieldsFragment } from '@/generated/graphql';
+#   interface Props { category: CategoryNodeFieldsFragment }
+
+fragment CategoryNodeFields on Category {
+  id
+  name
+  slug
+  description
+  productCount
+  level
+  path
+  sortOrder
+  image {
+    url
+    altText
+  }
+}

package/templates/storefront-nextjs-shadcn/components/layout/currency-selector.tsx

@@ -18,9 +18,10 @@
  */
 
 import { useState, useRef, useEffect } from 'react';
-import { useCurrencyStore } from '@/stores/currency-store';
+import { useCurrencyStore } from '@doswiftly/storefront-sdk/react';
 import { useQueryClient } from '@tanstack/react-query';
 import { ChevronDown, Check, Globe } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 
 // ============================================================================
 // CURRENCY DATA
@@ -149,12 +150,14 @@ export function CurrencySelector({
   showIcon = true,
   variant = 'default',
 }: CurrencySelectorProps) {
+  const t = useTranslations("currency");
+
   // Currency store state
   const currency = useCurrencyStore((state) => state.currency);
   const supportedCurrencies = useCurrencyStore((state) => state.supportedCurrencies);
   const setCurrency = useCurrencyStore((state) => state.setCurrency);
   const isLoaded = useCurrencyStore((state) => state.isLoaded);
-  
+
   // React Query client for cache invalidation
   const queryClient = useQueryClient();
   
@@ -261,7 +264,7 @@ export function CurrencySelector({
         `}
         aria-expanded={isOpen}
         aria-haspopup="listbox"
-        aria-label="Select currency"
+        aria-label={t("selectCurrency")}
       >
         {showIcon && variant !== 'minimal' && (
           <Globe className="w-4 h-4 text-gray-400" aria-hidden="true" />
@@ -287,7 +290,7 @@ export function CurrencySelector({
             ${dropdownStyles[variant]}
           `}
           role="listbox"
-          aria-label="Currency options"
+          aria-label={t("currencyOptions")}
         >
           <div className="py-1 max-h-64 overflow-y-auto">
             {supportedCurrencies.map((code) => {

package/templates/storefront-nextjs-shadcn/components/layout/footer.tsx

@@ -1,8 +1,11 @@
-import Link from "next/link";
+import { Link } from "@/i18n/navigation";
+import { getTranslations } from "next-intl/server";
 
-export function Footer() {
+export async function Footer() {
   const currentYear = new Date().getFullYear();
   const siteName = process.env.NEXT_PUBLIC_SITE_NAME || "My Store";
+  const t = await getTranslations("footer");
+  const tc = await getTranslations("common");
 
   return (
     <footer className="border-t border-border bg-muted/50">
@@ -14,33 +17,32 @@ export function Footer() {
               {siteName}
             </Link>
             <p className="mt-4 text-sm text-muted-foreground">
-              Quality products at affordable prices. Powered by DoSwiftly
-              Commerce.
+              {t("description")}
             </p>
           </div>
 
           {/* Shop */}
           <div>
-            <h3 className="mb-4 font-semibold text-foreground">Shop</h3>
+            <h3 className="mb-4 font-semibold text-foreground">{t("shop")}</h3>
             <ul className="space-y-2 text-sm text-muted-foreground">
               <li>
                 <Link href="/products" className="hover:text-primary transition-colors">
-                  All Products
+                  {t("allProducts")}
                 </Link>
               </li>
               <li>
                 <Link href="/collections" className="hover:text-primary transition-colors">
-                  Collections
+                  {t("collections")}
                 </Link>
               </li>
               <li>
                 <Link href="/categories" className="hover:text-primary transition-colors">
-                  Categories
+                  {t("categories")}
                 </Link>
               </li>
               <li>
                 <Link href="/search" className="hover:text-primary transition-colors">
-                  Search
+                  {tc("search")}
                 </Link>
               </li>
             </ul>
@@ -48,31 +50,31 @@ export function Footer() {
 
           {/* Account */}
           <div>
-            <h3 className="mb-4 font-semibold text-foreground">Account</h3>
+            <h3 className="mb-4 font-semibold text-foreground">{t("myAccount")}</h3>
             <ul className="space-y-2 text-sm text-muted-foreground">
               <li>
                 <Link href="/auth/login" className="hover:text-primary transition-colors">
-                  Sign In
+                  {t("signIn")}
                 </Link>
               </li>
               <li>
                 <Link href="/auth/register" className="hover:text-primary transition-colors">
-                  Create Account
+                  {t("createAccount")}
                 </Link>
               </li>
               <li>
                 <Link href="/account" className="hover:text-primary transition-colors">
-                  My Account
+                  {t("myAccount")}
                 </Link>
               </li>
               <li>
                 <Link href="/account/orders" className="hover:text-primary transition-colors">
-                  Order History
+                  {t("orderHistory")}
                 </Link>
               </li>
               <li>
                 <Link href="/cart" className="hover:text-primary transition-colors">
-                  Shopping Cart
+                  {t("shoppingCart")}
                 </Link>
               </li>
             </ul>
@@ -80,26 +82,26 @@ export function Footer() {
 
           {/* Support */}
           <div>
-            <h3 className="mb-4 font-semibold text-foreground">Support</h3>
+            <h3 className="mb-4 font-semibold text-foreground">{t("support")}</h3>
             <ul className="space-y-2 text-sm text-muted-foreground">
               <li>
                 <Link href="/contact" className="hover:text-primary transition-colors">
-                  Contact Us
+                  {t("contactUs")}
                 </Link>
               </li>
               <li>
                 <Link href="/about" className="hover:text-primary transition-colors">
-                  About Us
+                  {t("aboutUs")}
                 </Link>
               </li>
               <li>
                 <Link href="/shipping" className="hover:text-primary transition-colors">
-                  Shipping Info
+                  {t("shippingInfo")}
                 </Link>
               </li>
               <li>
                 <Link href="/returns" className="hover:text-primary transition-colors">
-                  Returns & Refunds
+                  {t("returnsRefunds")}
                 </Link>
               </li>
             </ul>
@@ -108,17 +110,16 @@ export function Footer() {
 
         <div className="mt-12 border-t border-border pt-8 text-center text-sm text-muted-foreground">
           <p>
-            © {currentYear} {siteName}. All rights reserved.
+            © {currentYear} {siteName}. {t("allRightsReserved")}.
           </p>
           <p className="mt-2">
-            Powered by{" "}
             <a
               href="https://doswiftly.pl"
               target="_blank"
               rel="noopener noreferrer"
               className="text-primary hover:underline transition-colors"
             >
-              DoSwiftly Commerce
+              {t("poweredBy")}
             </a>
           </p>
         </div>

package/templates/storefront-nextjs-shadcn/components/layout/header.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import Link from "next/link";
 import { useState } from "react";
+import { useTranslations } from "next-intl";
+import { Link } from "@/i18n/navigation";
 import { Menu, X } from "lucide-react";
 import { CurrencySelector } from "@/components/commerce/currency-selector";
 import { CartIcon } from "@/components/cart/cart-icon";
@@ -9,32 +10,42 @@ import { SearchInput } from "@/components/commerce/search-input";
 import { Navigation } from "@/components/layout/navigation";
 import { AccountMenu } from "@/components/auth/account-menu";
 import { ThemeSwitcher } from "@/components/layout/theme-switcher";
-import { useAuthStore } from "@/stores/auth-store";
+import { LanguageSwitcher } from "@/components/layout/language-switcher";
+import { useAuthStore, useAuthHydrated } from "@doswiftly/storefront-sdk/react";
+import { useHydrated } from "@doswiftly/storefront-sdk/react";
+import { useAuthSync } from "@/hooks/use-auth-sync";
 
 export function Header() {
+  const t = useTranslations("nav");
   const [isMenuOpen, setIsMenuOpen] = useState(false);
-  
-  // Get authentication state from auth store
+
+  // Auto-fix cookie/store desync (e.g., localStorage cleared but cookie persists)
+  useAuthSync();
+
+  // Double-guard: DOM must be mounted (useHydrated) AND store must be rehydrated (useAuthHydrated from Zustand persist)
+  const hydrated = useHydrated();
   const { isAuthenticated, customer } = useAuthStore();
+  const authHydrated = useAuthHydrated();
+  const showAuth = hydrated && authHydrated;
   const customerName = customer
     ? `${customer.firstName || ""} ${customer.lastName || ""}`.trim() || customer.email
     : undefined;
 
   const navigationItems = [
     {
-      label: "Products",
+      label: t("products"),
       href: "/products",
     },
     {
-      label: "Collections",
+      label: t("collections"),
       href: "/collections",
     },
     {
-      label: "Categories",
+      label: t("categories"),
       href: "/categories",
     },
     {
-      label: "About",
+      label: t("about"),
       href: "/about",
     },
   ];
@@ -57,39 +68,46 @@ export function Header() {
           <div className="flex items-center gap-3">
             {/* Search */}
             <div className="hidden w-64 lg:block">
-              <SearchInput placeholder="Search products..." />
+              <SearchInput placeholder={t("search")} />
+            </div>
+
+            {/* Language Switcher */}
+            <div className="hidden md:block">
+              <LanguageSwitcher />
             </div>
-            
+
             {/* Currency Selector */}
             <div className="hidden md:block">
               <CurrencySelector variant="compact" />
             </div>
-            
+
             {/* Theme Switcher */}
             <div className="hidden md:block">
               <ThemeSwitcher />
             </div>
-            
-            {/* Account Menu or Login Link */}
-            {isAuthenticated ? (
-              <AccountMenu customerName={customerName} />
-            ) : (
-              <Link
-                href="/auth/login"
-                className="hidden md:inline-flex items-center rounded-md px-3 py-2 text-sm font-medium text-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
-              >
-                Sign In
-              </Link>
+
+            {/* Account Menu or Login Link — hidden until DOM + auth store hydrate */}
+            {showAuth && (
+              isAuthenticated ? (
+                <AccountMenu customerName={customerName} />
+              ) : (
+                <Link
+                  href="/auth/login"
+                  className="hidden md:inline-flex items-center rounded-md px-3 py-2 text-sm font-medium text-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
+                >
+                  {t("signIn")}
+                </Link>
+              )
             )}
-            
+
             {/* Cart Icon */}
             <CartIcon />
-            
+
             {/* Mobile Menu Toggle */}
             <button
               className="p-2 text-foreground hover:text-primary md:hidden"
               onClick={() => setIsMenuOpen(!isMenuOpen)}
-              aria-label="Toggle menu"
+              aria-label={t("menu")}
               aria-expanded={isMenuOpen}
             >
               {isMenuOpen ? (
@@ -107,15 +125,15 @@ export function Header() {
             <div className="flex flex-col gap-4">
               {/* Mobile Search */}
               <div className="lg:hidden">
-                <SearchInput placeholder="Search products..." />
+                <SearchInput placeholder={t("search")} />
               </div>
-              
-              {/* Mobile Currency Selector */}
+
+              {/* Mobile Language & Currency */}
               <div className="flex items-center justify-between">
-                <span className="text-sm font-medium text-muted-foreground">Currency</span>
+                <LanguageSwitcher />
                 <CurrencySelector variant="compact" />
               </div>
-              
+
               {/* Mobile Navigation Links */}
               {navigationItems.map((item) => (
                 <Link
@@ -127,15 +145,15 @@ export function Header() {
                   {item.label}
                 </Link>
               ))}
-              
-              {/* Mobile Account Link */}
-              {!isAuthenticated && (
+
+              {/* Mobile Account Link — guarded by showAuth */}
+              {showAuth && !isAuthenticated && (
                 <Link
                   href="/auth/login"
                   className="text-foreground hover:text-primary transition-colors font-medium"
                   onClick={() => setIsMenuOpen(false)}
                 >
-                  Sign In
+                  {t("signIn")}
                 </Link>
               )}
             </div>

package/templates/storefront-nextjs-shadcn/components/layout/language-switcher.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useLanguageStore } from "@doswiftly/storefront-sdk/react";
+import { useRouter, usePathname } from "@/i18n/navigation";
+import { useLocale, useTranslations } from "next-intl";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+const LANGUAGE_NAMES: Record<string, string> = {
+  pl: "Polski",
+  en: "English",
+  de: "Deutsch",
+  fr: "Français",
+  es: "Español",
+  cs: "Čeština",
+  it: "Italiano",
+  nl: "Nederlands",
+  pt: "Português",
+};
+
+export function LanguageSwitcher() {
+  const t = useTranslations("language");
+  const locale = useLocale();
+  const router = useRouter();
+  const pathname = usePathname();
+  const supportedLanguages = useLanguageStore((s) => s.supportedLanguages);
+
+  if (supportedLanguages.length < 2) return null;
+
+  const handleLocaleChange = (newLocale: string) => {
+    if (newLocale === locale) return;
+    router.replace(pathname, { locale: newLocale });
+  };
+
+  return (
+    <Select value={locale} onValueChange={handleLocaleChange}>
+      <SelectTrigger className="h-8 w-auto gap-1 border-0 bg-transparent px-2 text-xs font-medium shadow-none" aria-label={t("switchLanguage")}>
+        <SelectValue>{locale.toUpperCase()}</SelectValue>
+      </SelectTrigger>
+      <SelectContent align="end">
+        {supportedLanguages.map((lang) => (
+          <SelectItem key={lang} value={lang}>
+            {lang.toUpperCase()} — {LANGUAGE_NAMES[lang] || lang}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}