@doswiftly/cli 0.1.1

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

@@ -0,0 +1,341 @@
+'use client';
+
+/**
+ * CurrencySelector - Dropdown for selecting preferred currency
+ *
+ * This component:
+ * 1. Displays current currency with dropdown
+ * 2. Shows all supported currencies from Shop data
+ * 3. Updates currency store on selection
+ * 4. Invalidates React Query cache to trigger refetch with new currency
+ *
+ * The currency change triggers:
+ * - Store update (persisted to localStorage)
+ * - Cache invalidation (all queries refetch with new currency header)
+ * - UI updates (prices re-render in new currency)
+ *
+ * @module storefront-nextjs/components/layout/currency-selector
+ */
+
+import { useState, useRef, useEffect } from 'react';
+import { useCurrencyStore } from '@/stores/currency-store';
+import { useQueryClient } from '@tanstack/react-query';
+import { ChevronDown, Check, Globe } from 'lucide-react';
+
+// ============================================================================
+// CURRENCY DATA
+// ============================================================================
+
+/**
+ * Currency symbols for display
+ * Maps currency codes to their symbols
+ */
+const CURRENCY_SYMBOLS: Record<string, string> = {
+  PLN: 'zł',
+  EUR: '€',
+  USD: '$',
+  GBP: '£',
+  CHF: 'CHF',
+  CZK: 'Kč',
+  SEK: 'kr',
+  NOK: 'kr',
+  DKK: 'kr',
+  JPY: '¥',
+  CNY: '¥',
+  AUD: 'A$',
+  CAD: 'C$',
+};
+
+/**
+ * Currency names for display
+ * Maps currency codes to their full names
+ */
+const CURRENCY_NAMES: Record<string, string> = {
+  PLN: 'Polish Złoty',
+  EUR: 'Euro',
+  USD: 'US Dollar',
+  GBP: 'British Pound',
+  CHF: 'Swiss Franc',
+  CZK: 'Czech Koruna',
+  SEK: 'Swedish Krona',
+  NOK: 'Norwegian Krone',
+  DKK: 'Danish Krone',
+  JPY: 'Japanese Yen',
+  CNY: 'Chinese Yuan',
+  AUD: 'Australian Dollar',
+  CAD: 'Canadian Dollar',
+};
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+interface CurrencySelectorProps {
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+  
+  /**
+   * Show currency symbol instead of code
+   * @default false
+   */
+  showSymbol?: boolean;
+  
+  /**
+   * Show globe icon
+   * @default true
+   */
+  showIcon?: boolean;
+  
+  /**
+   * Visual variant
+   * @default 'default'
+   */
+  variant?: 'default' | 'compact' | 'minimal';
+}
+
+// ============================================================================
+// COMPONENT
+// ============================================================================
+
+/**
+ * CurrencySelector - Dropdown for selecting preferred currency
+ *
+ * This component allows users to change their preferred currency.
+ * When a currency is selected:
+ * 1. The currency store is updated (persisted to localStorage)
+ * 2. React Query cache is invalidated
+ * 3. All queries refetch with new currency header
+ * 4. Prices update throughout the application
+ *
+ * The component handles:
+ * - Hydration mismatches (shows skeleton until loaded)
+ * - Keyboard navigation (Escape to close)
+ * - Click outside to close
+ * - Accessibility (ARIA attributes)
+ *
+ * @example
+ * ```tsx
+ * // In Header component
+ * import { CurrencySelector } from '@/components/layout/currency-selector';
+ *
+ * export function Header() {
+ *   return (
+ *     <header>
+ *       <nav>
+ *         <CurrencySelector />
+ *       </nav>
+ *     </header>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Compact variant in mobile menu
+ * <CurrencySelector variant="compact" showSymbol />
+ * ```
+ *
+ * @param props - Component props
+ * @param props.className - Additional CSS classes
+ * @param props.showSymbol - Show currency symbol instead of code
+ * @param props.showIcon - Show globe icon
+ * @param props.variant - Visual variant (default, compact, minimal)
+ */
+export function CurrencySelector({
+  className = '',
+  showSymbol = false,
+  showIcon = true,
+  variant = 'default',
+}: CurrencySelectorProps) {
+  // 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();
+  
+  // Local state for dropdown
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  
+  // Close dropdown on outside click
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+    
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => document.removeEventListener('mousedown', handleClickOutside);
+    }
+  }, [isOpen]);
+  
+  // Close on escape key
+  useEffect(() => {
+    function handleEscape(event: KeyboardEvent) {
+      if (event.key === 'Escape') {
+        setIsOpen(false);
+      }
+    }
+    
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape);
+      return () => document.removeEventListener('keydown', handleEscape);
+    }
+  }, [isOpen]);
+  
+  /**
+   * Handle currency selection
+   * 
+   * Updates store and invalidates cache to trigger refetch
+   * with new currency header.
+   * 
+   * @param newCurrency - Selected currency code
+   */
+  const handleChange = (newCurrency: string) => {
+    if (newCurrency === currency) {
+      setIsOpen(false);
+      return;
+    }
+    
+    // Update store (persists to localStorage)
+    setCurrency(newCurrency);
+    
+    // Invalidate all queries to trigger refetch with new currency
+    // This ensures all prices update to the new currency
+    queryClient.invalidateQueries();
+    
+    // Close dropdown
+    setIsOpen(false);
+  };
+  
+  // Prevent SSR mismatch - show skeleton until hydrated
+  if (!isLoaded || !currency) {
+    return (
+      <div className={`inline-block ${className}`}>
+        <div className="px-3 py-2 bg-gray-100 dark:bg-gray-800 rounded-lg animate-pulse w-16 h-9" />
+      </div>
+    );
+  }
+  
+  // Display value (symbol or code)
+  const displayValue = showSymbol 
+    ? (CURRENCY_SYMBOLS[currency] || currency) 
+    : currency;
+  
+  // Variant-specific styles
+  const buttonStyles = {
+    default: 'px-3 py-2 text-sm',
+    compact: 'px-2 py-1.5 text-xs',
+    minimal: 'px-2 py-1 text-xs',
+  };
+  
+  const dropdownStyles = {
+    default: 'w-48',
+    compact: 'w-40',
+    minimal: 'w-36',
+  };
+  
+  return (
+    <div ref={dropdownRef} className={`relative inline-block ${className}`}>
+      {/* Trigger Button */}
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className={`
+          inline-flex items-center justify-between gap-2
+          bg-white dark:bg-gray-800
+          border border-gray-200 dark:border-gray-700
+          rounded-lg
+          text-gray-700 dark:text-gray-200
+          hover:bg-gray-50 dark:hover:bg-gray-700
+          focus:outline-none focus:ring-2 focus:ring-blue-500
+          transition-colors
+          ${buttonStyles[variant]}
+        `}
+        aria-expanded={isOpen}
+        aria-haspopup="listbox"
+        aria-label="Select currency"
+      >
+        {showIcon && variant !== 'minimal' && (
+          <Globe className="w-4 h-4 text-gray-400" aria-hidden="true" />
+        )}
+        <span className="font-medium">{displayValue}</span>
+        <ChevronDown
+          className={`w-4 h-4 text-gray-400 transition-transform ${
+            isOpen ? 'rotate-180' : ''
+          }`}
+          aria-hidden="true"
+        />
+      </button>
+      
+      {/* Dropdown Menu */}
+      {isOpen && (
+        <div
+          className={`
+            absolute right-0 mt-2 z-50
+            bg-white dark:bg-gray-800
+            border border-gray-200 dark:border-gray-700
+            rounded-lg shadow-lg
+            overflow-hidden
+            ${dropdownStyles[variant]}
+          `}
+          role="listbox"
+          aria-label="Currency options"
+        >
+          <div className="py-1 max-h-64 overflow-y-auto">
+            {supportedCurrencies.map((code) => {
+              const isSelected = code === currency;
+              const symbol = CURRENCY_SYMBOLS[code] || code;
+              const name = CURRENCY_NAMES[code] || code;
+              
+              return (
+                <button
+                  key={code}
+                  type="button"
+                  onClick={() => handleChange(code)}
+                  className={`
+                    w-full px-3 py-2 text-left
+                    flex items-center justify-between gap-2
+                    hover:bg-gray-100 dark:hover:bg-gray-700
+                    transition-colors
+                    ${isSelected ? 'bg-blue-50 dark:bg-blue-900/20' : ''}
+                  `}
+                  role="option"
+                  aria-selected={isSelected}
+                >
+                  <div className="flex items-center gap-2">
+                    <span className="w-6 text-center text-gray-400 font-mono text-sm">
+                      {symbol}
+                    </span>
+                    <div>
+                      <span className="font-medium text-gray-900 dark:text-gray-100">
+                        {code}
+                      </span>
+                      {variant === 'default' && (
+                        <span className="ml-2 text-xs text-gray-500 dark:text-gray-400">
+                          {name}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                  {isSelected && (
+                    <Check className="w-4 h-4 text-blue-500" aria-hidden="true" />
+                  )}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default CurrencySelector;

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

@@ -0,0 +1,128 @@
+import Link from "next/link";
+
+export function Footer() {
+  const currentYear = new Date().getFullYear();
+  const siteName = process.env.NEXT_PUBLIC_SITE_NAME || "My Store";
+
+  return (
+    <footer className="border-t border-border bg-muted/50">
+      <div className="container mx-auto px-4 py-12">
+        <div className="grid grid-cols-1 gap-8 md:grid-cols-4">
+          {/* Brand */}
+          <div>
+            <Link href="/" className="text-xl font-bold text-primary hover:opacity-80 transition-opacity">
+              {siteName}
+            </Link>
+            <p className="mt-4 text-sm text-muted-foreground">
+              Quality products at affordable prices. Powered by DoSwiftly
+              Commerce.
+            </p>
+          </div>
+
+          {/* Shop */}
+          <div>
+            <h3 className="mb-4 font-semibold text-foreground">Shop</h3>
+            <ul className="space-y-2 text-sm text-muted-foreground">
+              <li>
+                <Link href="/products" className="hover:text-primary transition-colors">
+                  All Products
+                </Link>
+              </li>
+              <li>
+                <Link href="/collections" className="hover:text-primary transition-colors">
+                  Collections
+                </Link>
+              </li>
+              <li>
+                <Link href="/categories" className="hover:text-primary transition-colors">
+                  Categories
+                </Link>
+              </li>
+              <li>
+                <Link href="/search" className="hover:text-primary transition-colors">
+                  Search
+                </Link>
+              </li>
+            </ul>
+          </div>
+
+          {/* Account */}
+          <div>
+            <h3 className="mb-4 font-semibold text-foreground">Account</h3>
+            <ul className="space-y-2 text-sm text-muted-foreground">
+              <li>
+                <Link href="/auth/login" className="hover:text-primary transition-colors">
+                  Sign In
+                </Link>
+              </li>
+              <li>
+                <Link href="/auth/register" className="hover:text-primary transition-colors">
+                  Create Account
+                </Link>
+              </li>
+              <li>
+                <Link href="/account" className="hover:text-primary transition-colors">
+                  My Account
+                </Link>
+              </li>
+              <li>
+                <Link href="/account/orders" className="hover:text-primary transition-colors">
+                  Order History
+                </Link>
+              </li>
+              <li>
+                <Link href="/cart" className="hover:text-primary transition-colors">
+                  Shopping Cart
+                </Link>
+              </li>
+            </ul>
+          </div>
+
+          {/* Support */}
+          <div>
+            <h3 className="mb-4 font-semibold text-foreground">Support</h3>
+            <ul className="space-y-2 text-sm text-muted-foreground">
+              <li>
+                <Link href="/contact" className="hover:text-primary transition-colors">
+                  Contact Us
+                </Link>
+              </li>
+              <li>
+                <Link href="/about" className="hover:text-primary transition-colors">
+                  About Us
+                </Link>
+              </li>
+              <li>
+                <Link href="/shipping" className="hover:text-primary transition-colors">
+                  Shipping Info
+                </Link>
+              </li>
+              <li>
+                <Link href="/returns" className="hover:text-primary transition-colors">
+                  Returns & Refunds
+                </Link>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <div className="mt-12 border-t border-border pt-8 text-center text-sm text-muted-foreground">
+          <p>
+            © {currentYear} {siteName}. All rights reserved.
+          </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
+            </a>
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}

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

@@ -0,0 +1,147 @@
+"use client";
+
+import Link from "next/link";
+import { useState } from "react";
+import { Menu, X } from "lucide-react";
+import { CurrencySelector } from "@/components/commerce/currency-selector";
+import { CartIcon } from "@/components/cart/cart-icon";
+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";
+
+export function Header() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  
+  // Get authentication state from auth store
+  const { isAuthenticated, customer } = useAuthStore();
+  const customerName = customer
+    ? `${customer.firstName || ""} ${customer.lastName || ""}`.trim() || customer.email
+    : undefined;
+
+  const navigationItems = [
+    {
+      label: "Products",
+      href: "/products",
+    },
+    {
+      label: "Collections",
+      href: "/collections",
+    },
+    {
+      label: "Categories",
+      href: "/categories",
+    },
+    {
+      label: "About",
+      href: "/about",
+    },
+  ];
+
+  return (
+    <header className="sticky top-0 z-50 border-b border-border bg-background shadow-sm">
+      <div className="container mx-auto px-4">
+        <div className="flex h-16 items-center justify-between">
+          {/* Logo */}
+          <Link href="/" className="text-xl font-bold text-primary hover:opacity-80 transition-opacity">
+            {process.env.NEXT_PUBLIC_SITE_NAME || "My Store"}
+          </Link>
+
+          {/* Desktop Navigation */}
+          <div className="hidden md:flex">
+            <Navigation items={navigationItems} />
+          </div>
+
+          {/* Search & Actions */}
+          <div className="flex items-center gap-3">
+            {/* Search */}
+            <div className="hidden w-64 lg:block">
+              <SearchInput placeholder="Search products..." />
+            </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>
+            )}
+            
+            {/* 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-expanded={isMenuOpen}
+            >
+              {isMenuOpen ? (
+                <X className="h-5 w-5" />
+              ) : (
+                <Menu className="h-5 w-5" />
+              )}
+            </button>
+          </div>
+        </div>
+
+        {/* Mobile Navigation */}
+        {isMenuOpen && (
+          <nav className="border-t border-border py-4 md:hidden">
+            <div className="flex flex-col gap-4">
+              {/* Mobile Search */}
+              <div className="lg:hidden">
+                <SearchInput placeholder="Search products..." />
+              </div>
+              
+              {/* Mobile Currency Selector */}
+              <div className="flex items-center justify-between">
+                <span className="text-sm font-medium text-muted-foreground">Currency</span>
+                <CurrencySelector variant="compact" />
+              </div>
+              
+              {/* Mobile Navigation Links */}
+              {navigationItems.map((item) => (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  className="text-foreground hover:text-primary transition-colors"
+                  onClick={() => setIsMenuOpen(false)}
+                >
+                  {item.label}
+                </Link>
+              ))}
+              
+              {/* Mobile Account Link */}
+              {!isAuthenticated && (
+                <Link
+                  href="/auth/login"
+                  className="text-foreground hover:text-primary transition-colors font-medium"
+                  onClick={() => setIsMenuOpen(false)}
+                >
+                  Sign In
+                </Link>
+              )}
+            </div>
+          </nav>
+        )}
+      </div>
+    </header>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/layout/index.ts

@@ -0,0 +1,9 @@
+export { Header } from './header';
+export { Footer } from './footer';
+export { Navigation } from './navigation';
+export type { NavigationProps, NavigationItem } from './navigation';
+export { MobileMenu } from './mobile-menu';
+export type { MobileMenuProps, MobileMenuItem } from './mobile-menu';
+export { Breadcrumbs, createBreadcrumbs } from './breadcrumbs';
+export type { BreadcrumbsProps, BreadcrumbItem } from './breadcrumbs';
+export { CurrencySelector } from './currency-selector';