@doswiftly/cli 0.1.19 → 0.1.21

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

@@ -1,7 +1,7 @@
 "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";
 
@@ -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>
@@ -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/currency-selector.tsx

@@ -21,6 +21,7 @@ import { useState, useRef, useEffect } from 'react';
 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,6 +150,8 @@ 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);
@@ -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,11 +10,13 @@ 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 { 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);
 
   // Auto-fix cookie/store desync (e.g., localStorage cleared but cookie persists)
@@ -30,19 +33,19 @@ export function Header() {
 
   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",
     },
   ];
@@ -65,7 +68,12 @@ 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 */}
@@ -87,7 +95,7 @@ export function Header() {
                   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
+                  {t("signIn")}
                 </Link>
               )
             )}
@@ -99,7 +107,7 @@ export function Header() {
             <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 ? (
@@ -117,12 +125,12 @@ 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>
 
@@ -145,7 +153,7 @@ export function Header() {
                   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>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/layout/mobile-menu.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { Link, usePathname } from "@/i18n/navigation";
 import { Menu, X, ChevronDown, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 
@@ -17,26 +17,29 @@ export interface MobileMenuProps {
   className?: string;
 }
 
-const defaultItems: MobileMenuItem[] = [
-  {
-    label: "Products",
-    href: "/products",
-  },
-  {
-    label: "Collections",
-    href: "/collections",
-  },
-  {
-    label: "Categories",
-    href: "/categories",
-  },
-  {
-    label: "About",
-    href: "/about",
-  },
-];
-
-export function MobileMenu({ items = defaultItems, className }: MobileMenuProps) {
+export function MobileMenu({ items, className }: MobileMenuProps) {
+  const t = useTranslations("nav");
+
+  const defaultItems: MobileMenuItem[] = [
+    {
+      label: t("products"),
+      href: "/products",
+    },
+    {
+      label: t("collections"),
+      href: "/collections",
+    },
+    {
+      label: t("categories"),
+      href: "/categories",
+    },
+    {
+      label: t("about"),
+      href: "/about",
+    },
+  ];
+
+  const resolvedItems = items ?? defaultItems;
   const [isOpen, setIsOpen] = useState(false);
   const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
   const pathname = usePathname();
@@ -108,7 +111,7 @@ export function MobileMenu({ items = defaultItems, className }: MobileMenuProps)
                 toggleExpanded(item.href);
               }}
               className="p-3 text-muted-foreground hover:text-foreground"
-              aria-label={`Toggle ${item.label} submenu`}
+              aria-label={t("toggleSubmenu", { label: item.label })}
               aria-expanded={isExpanded}
             >
               {isExpanded ? (
@@ -140,7 +143,7 @@ export function MobileMenu({ items = defaultItems, className }: MobileMenuProps)
           "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
           className
         )}
-        aria-label="Toggle mobile menu"
+        aria-label={t("toggleMobileMenu")}
         aria-expanded={isOpen}
         aria-controls="mobile-menu"
       >
@@ -163,16 +166,16 @@ export function MobileMenu({ items = defaultItems, className }: MobileMenuProps)
             className="fixed inset-y-0 left-0 z-50 w-full max-w-sm bg-background shadow-xl"
             role="dialog"
             aria-modal="true"
-            aria-label="Mobile navigation"
+            aria-label={t("mobileNavigation")}
           >
             <div className="flex h-full flex-col">
               {/* Header */}
               <div className="flex items-center justify-between border-b border-border p-4">
-                <h2 className="text-lg font-semibold">Menu</h2>
+                <h2 className="text-lg font-semibold">{t("menu")}</h2>
                 <button
                   onClick={() => setIsOpen(false)}
                   className="rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-                  aria-label="Close mobile menu"
+                  aria-label={t("closeMobileMenu")}
                 >
                   <X className="h-5 w-5" />
                 </button>
@@ -181,7 +184,7 @@ export function MobileMenu({ items = defaultItems, className }: MobileMenuProps)
               {/* Menu Items */}
               <nav className="flex-1 overflow-y-auto p-4">
                 <div className="space-y-1">
-                  {items.map((item) => renderMenuItem(item))}
+                  {resolvedItems.map((item) => renderMenuItem(item))}
                 </div>
               </nav>
 
@@ -192,13 +195,13 @@ export function MobileMenu({ items = defaultItems, className }: MobileMenuProps)
                     href="/account"
                     className="rounded-md bg-primary px-4 py-2 text-center text-sm font-medium text-primary-foreground hover:bg-primary/90"
                   >
-                    My Account
+                    {t("account")}
                   </Link>
                   <Link
                     href="/cart"
                     className="rounded-md border border-border px-4 py-2 text-center text-sm font-medium hover:bg-accent"
                   >
-                    View Cart
+                    {t("viewCart")}
                   </Link>
                 </div>
               </div>

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

@@ -1,7 +1,7 @@
 "use client";
 
-import Link from "next/link";
-import { usePathname } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { Link, usePathname } from "@/i18n/navigation";
 import { cn } from "@/lib/utils";
 
 export interface NavigationItem {
@@ -15,28 +15,31 @@ export interface NavigationProps {
   className?: string;
 }
 
-const defaultItems: NavigationItem[] = [
-  {
-    label: "Products",
-    href: "/products",
-  },
-  {
-    label: "Collections",
-    href: "/collections",
-  },
-  {
-    label: "Categories",
-    href: "/categories",
-  },
-  {
-    label: "About",
-    href: "/about",
-  },
-];
-
-export function Navigation({ items = defaultItems, className }: NavigationProps) {
+export function Navigation({ items, className }: NavigationProps) {
+  const t = useTranslations("nav");
   const pathname = usePathname();
 
+  const defaultItems: NavigationItem[] = [
+    {
+      label: t("products"),
+      href: "/products",
+    },
+    {
+      label: t("collections"),
+      href: "/collections",
+    },
+    {
+      label: t("categories"),
+      href: "/categories",
+    },
+    {
+      label: t("about"),
+      href: "/about",
+    },
+  ];
+
+  const resolvedItems = items ?? defaultItems;
+
   const isActive = (href: string) => {
     if (href === "/") {
       return pathname === "/";
@@ -48,9 +51,9 @@ export function Navigation({ items = defaultItems, className }: NavigationProps)
     <nav
       className={cn("flex items-center gap-6", className)}
       role="navigation"
-      aria-label="Main navigation"
+      aria-label={t("mainNavigation")}
     >
-      {items.map((item) => (
+      {resolvedItems.map((item) => (
         <div key={item.href} className="relative group">
           <Link
             href={item.href}