@doswiftly/cli 0.1.17 → 0.1.19

package/templates/storefront-nextjs-shadcn/components/cart/shipping-estimator.tsx

@@ -4,7 +4,13 @@ import { useState } from "react";
 import { Truck, MapPin } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
-import { Select } from "@/components/ui/select";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { cn } from "@/lib/utils";
 
 export interface ShippingOption {
@@ -90,12 +96,21 @@ export function ShippingEstimator({
 
       {/* Form */}
       <div className="space-y-3">
-        <Select
-          value={country}
-          onChange={(e) => setCountry(e.target.value)}
-          label="Country"
-          options={countries}
-        />
+        <div>
+          <label className="text-sm font-medium text-foreground">Country</label>
+          <Select value={country} onValueChange={setCountry}>
+            <SelectTrigger>
+              <SelectValue placeholder="Select country" />
+            </SelectTrigger>
+            <SelectContent>
+              {countries.map((c) => (
+                <SelectItem key={c.value} value={c.value}>
+                  {c.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
 
         <div className="flex gap-2">
           <div className="relative flex-1">

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

@@ -2,7 +2,7 @@
 
 import { useState, useRef, useEffect } from "react";
 import { ChevronDown, Check, Globe } from "lucide-react";
-import { useCurrencyStore } from "@/stores/currency-store";
+import { useCurrencyStore } from "@doswiftly/storefront-sdk/react";
 import { useQueryClient } from "@tanstack/react-query";
 
 // ============================================================================
@@ -89,7 +89,7 @@ export function CurrencySelector({
   const currency = useCurrencyStore((state) => state.currency);
   const supportedCurrencies = useCurrencyStore((state) => state.supportedCurrencies);
   const setCurrency = useCurrencyStore((state) => state.setCurrency);
-  const isHydrated = useCurrencyStore((state) => state.isHydrated);
+  const isHydrated = useCurrencyStore((state) => state.isLoaded);
 
   // Handle currency change
   const handleCurrencyChange = (newCurrency: string) => {

package/templates/storefront-nextjs-shadcn/components/commerce/product-actions.tsx

@@ -3,7 +3,7 @@
 import { useState, useMemo } from "react";
 import { VariantSelector } from "@/components/commerce/variant-selector";
 import { AddToCartButton } from "@/components/product/add-to-cart-button";
-import { formatPrice } from "@/lib/format";
+import { formatPrice } from "@doswiftly/storefront-sdk";
 
 interface ProductVariant {
   id: string;

package/templates/storefront-nextjs-shadcn/components/commerce/search-input.tsx

@@ -5,7 +5,7 @@ import { useRouter } from "next/navigation";
 import { Search, X, Loader2 } from "lucide-react";
 import { useGraphQLQuery } from "@/lib/graphql/hooks";
 import { ProductSearchDocument } from "@/generated/graphql";
-import { useDebouncedValue } from "@/lib/hooks";
+import { useDebouncedValue } from "@doswiftly/storefront-sdk/react";
 import Link from "next/link";
 
 interface SearchInputProps {
@@ -123,7 +123,7 @@ export function SearchInput({
             </div>
           ) : hasResults ? (
             <div className="max-h-96 overflow-y-auto">
-              {products.slice(0, 5).map((product: any) => (
+              {products.slice(0, 5).map((product) => (
                 <Link
                   key={product.id}
                   href={`/products/${product.handle}`}

package/templates/storefront-nextjs-shadcn/components/common/price-display.tsx

@@ -1,34 +1,45 @@
 "use client";
 
-import { useCurrencyStore } from "@/stores/currency-store";
+import { useCurrencyStore } from "@doswiftly/storefront-sdk/react";
+import { CURRENCY_LOCALES } from "@doswiftly/storefront-sdk";
+
+/** Resolve locale from currency code using the centralized CURRENCY_LOCALES map */
+function getLocaleForCurrency(currencyCode: string): string {
+  return CURRENCY_LOCALES[currencyCode] || "en-US";
+}
 
 export interface PriceDisplayProps {
   amount: string | number;
   currency?: string;
   className?: string;
   showCurrency?: boolean;
-  locale?: string;
 }
 
 /**
  * PriceDisplay - Formatted price with currency
- * Automatically uses the user's preferred currency from the currency store
+ * Automatically uses the user's preferred currency from the currency store.
+ * Locale is derived from currency code — no hardcoded locale.
  */
 export function PriceDisplay({
   amount,
   currency,
   className = "",
   showCurrency = true,
-  locale = "pl-PL",
 }: PriceDisplayProps) {
   const preferredCurrency = useCurrencyStore((state) => state.currency);
+  const isLoaded = useCurrencyStore((state) => state.isLoaded);
   const finalCurrency = currency || preferredCurrency || "PLN";
+  const locale = getLocaleForCurrency(finalCurrency);
+
+  if (!isLoaded && !currency) {
+    return <span className={`inline-block h-4 w-16 animate-pulse rounded bg-muted ${className}`} />;
+  }
 
   const formatPrice = (value: string | number, curr: string) => {
     const numericValue = typeof value === "string" ? parseFloat(value) : value;
 
     if (isNaN(numericValue)) {
-      return "—";
+      return "\u2014";
     }
 
     if (showCurrency) {
@@ -56,7 +67,6 @@ export interface PriceRangeDisplayProps {
   maxAmount: string | number;
   currency?: string;
   className?: string;
-  locale?: string;
 }
 
 /**
@@ -67,16 +77,21 @@ export function PriceRangeDisplay({
   maxAmount,
   currency,
   className = "",
-  locale = "pl-PL",
 }: PriceRangeDisplayProps) {
   const preferredCurrency = useCurrencyStore((state) => state.currency);
+  const isLoaded = useCurrencyStore((state) => state.isLoaded);
   const finalCurrency = currency || preferredCurrency || "PLN";
+  const locale = getLocaleForCurrency(finalCurrency);
+
+  if (!isLoaded && !currency) {
+    return <span className={`inline-block h-4 w-24 animate-pulse rounded bg-muted ${className}`} />;
+  }
 
   const formatPrice = (value: string | number) => {
     const numericValue = typeof value === "string" ? parseFloat(value) : value;
 
     if (isNaN(numericValue)) {
-      return "—";
+      return "\u2014";
     }
 
     return new Intl.NumberFormat(locale, {
@@ -109,7 +124,6 @@ export interface ComparePriceDisplayProps {
   salePrice: string | number;
   currency?: string;
   className?: string;
-  locale?: string;
 }
 
 /**
@@ -120,16 +134,26 @@ export function ComparePriceDisplay({
   salePrice,
   currency,
   className = "",
-  locale = "pl-PL",
 }: ComparePriceDisplayProps) {
   const preferredCurrency = useCurrencyStore((state) => state.currency);
+  const isLoaded = useCurrencyStore((state) => state.isLoaded);
   const finalCurrency = currency || preferredCurrency || "PLN";
+  const locale = getLocaleForCurrency(finalCurrency);
+
+  if (!isLoaded && !currency) {
+    return (
+      <div className={`flex items-center gap-2 ${className}`}>
+        <span className="inline-block h-5 w-16 animate-pulse rounded bg-muted" />
+        <span className="inline-block h-4 w-12 animate-pulse rounded bg-muted" />
+      </div>
+    );
+  }
 
   const formatPrice = (value: string | number) => {
     const numericValue = typeof value === "string" ? parseFloat(value) : value;
 
     if (isNaN(numericValue)) {
-      return "—";
+      return "\u2014";
     }
 
     return new Intl.NumberFormat(locale, {

package/templates/storefront-nextjs-shadcn/components/discount/discount-breakdown.tsx

@@ -15,7 +15,7 @@
 import { cn } from "@/lib/utils";
 import { Tag, X, Percent, Truck, Gift } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { formatPrice } from "@/lib/format";
+import { formatPrice } from "@doswiftly/storefront-sdk";
 
 export interface AppliedDiscount {
   id: string;

package/templates/storefront-nextjs-shadcn/components/discount/discount-code-input.tsx

@@ -18,7 +18,7 @@ import { Tag, Loader2, Check, X, AlertCircle } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Alert, AlertDescription } from "@/components/ui/alert";
-import { formatPrice } from "@/lib/format";
+import { formatPrice } from "@doswiftly/storefront-sdk";
 
 export interface DiscountValidationResult {
   valid: boolean;
@@ -101,8 +101,8 @@ export function DiscountCodeInput({
         if (!result.valid) {
           setError(result.errorMessage || "Kod jest nieprawidłowy");
         }
-      } catch (e: any) {
-        setError(e.message || "Nie udało się zweryfikować kodu");
+      } catch (e: unknown) {
+        setError(e instanceof Error ? e.message : "Nie udało się zweryfikować kodu");
       } finally {
         setIsValidating(false);
       }

package/templates/storefront-nextjs-shadcn/components/filters/range-slider-filter.tsx

@@ -179,15 +179,15 @@ function formatValue(
 /**
  * Simple debounce function
  */
-function debounce<T extends (...args: any[]) => void>(
-  fn: T,
+function debounce<TArgs extends unknown[]>(
+  fn: (...args: TArgs) => void,
   delay: number
-): T {
+): (...args: TArgs) => void {
   let timeoutId: NodeJS.Timeout;
-  return ((...args: Parameters<T>) => {
+  return (...args: TArgs) => {
     clearTimeout(timeoutId);
     timeoutId = setTimeout(() => fn(...args), delay);
-  }) as T;
+  };
 }
 
 export default RangeSliderFilter;

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

@@ -144,8 +144,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 : "Failed to validate gift card");
     } finally {
       setIsValidating(false);
     }

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

@@ -3,6 +3,7 @@
 import Link from "next/link";
 import { cn } from "@/lib/utils";
 import { useCollections } from "@/lib/graphql/hooks";
+import type { CollectionCardFields } from "@/lib/graphql/fragments";
 
 export interface CategoryGridProps {
   className?: string;
@@ -52,7 +53,7 @@ export function CategoryGrid({ className }: CategoryGridProps) {
       </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

@@ -4,17 +4,7 @@ import Link from "next/link";
 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/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/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;
+}

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

@@ -7,7 +7,7 @@ import { cn } from "@/lib/utils";
 
 export interface BreadcrumbItem {
   label: string;
-  href: string;
+  href?: string;
 }
 
 export interface BreadcrumbsProps {
@@ -68,7 +68,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 +76,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>

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,7 +18,7 @@
  */
 
 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';
 
@@ -154,7 +154,7 @@ export function CurrencySelector({
   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();
   

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

@@ -9,13 +9,21 @@ 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 { 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 [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;
@@ -59,32 +67,34 @@ export function Header() {
             <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>
+
+            {/* 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"
+                >
+                  Sign In
+                </Link>
+              )
             )}
-            
+
             {/* Cart Icon */}
             <CartIcon />
-            
+
             {/* Mobile Menu Toggle */}
             <button
               className="p-2 text-foreground hover:text-primary md:hidden"
@@ -109,13 +119,13 @@ export function Header() {
               <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
@@ -127,9 +137,9 @@ 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"

package/templates/storefront-nextjs-shadcn/components/loyalty/points-balance.tsx

@@ -10,19 +10,10 @@ import { Coins, AlertTriangle } from 'lucide-react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { cn } from '@/lib/utils';
-
-interface PointsSummary {
-  totalPoints: number;
-  currentPoints: number;
-  pendingPoints: number;
-  redeemedPoints: number;
-  expiredPoints: number;
-  expiringPoints?: number;
-  nextExpiryDate?: string;
-}
+import type { LoyaltyPointsSummary } from '@/lib/graphql/fragments';
 
 interface PointsBalanceProps {
-  points: PointsSummary;
+  points: LoyaltyPointsSummary;
   variant?: 'default' | 'compact';
   className?: string;
 }

package/templates/storefront-nextjs-shadcn/components/loyalty/points-history.tsx

@@ -10,35 +10,14 @@ import { ArrowUpCircle, ArrowDownCircle, Clock, Gift, ShoppingCart, UserPlus, St
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { cn } from '@/lib/utils';
-
-type TransactionType =
-  | 'EARN_PURCHASE'
-  | 'EARN_SIGNUP'
-  | 'EARN_REFERRAL'
-  | 'EARN_REVIEW'
-  | 'EARN_BIRTHDAY'
-  | 'EARN_BONUS'
-  | 'REDEEM'
-  | 'EXPIRE'
-  | 'ADJUST';
-
-interface Transaction {
-  id: string;
-  type: TransactionType;
-  points: number;
-  balanceAfter: number;
-  orderId?: string;
-  description?: string;
-  expiresAt?: string;
-  createdAt: string;
-}
+import type { LoyaltyTransaction } from '@/lib/graphql/fragments';
 
 interface PointsHistoryProps {
-  transactions: Transaction[];
+  transactions: LoyaltyTransaction[];
   className?: string;
 }
 
-const transactionConfig: Record<TransactionType, {
+const transactionConfig: Record<string, {
   label: string;
   icon: typeof ArrowUpCircle;
   color: string;
@@ -127,7 +106,11 @@ export function PointsHistory({ transactions, className }: PointsHistoryProps) {
       <CardContent>
         <div className="space-y-4">
           {transactions.map((transaction) => {
-            const config = transactionConfig[transaction.type];
+            const config = transactionConfig[transaction.type] ?? {
+              label: transaction.type,
+              icon: AlertCircle,
+              color: 'text-muted-foreground',
+            };
             const Icon = config.icon;
             const isEarning = transaction.points > 0;