@doswiftly/cli 0.1.1

package/templates/storefront-nextjs-shadcn/components/blog/blog-sidebar.tsx

@@ -0,0 +1,177 @@
+'use client';
+
+/**
+ * BlogSidebar Component
+ *
+ * Sidebar with categories, tags, recent posts, and search.
+ */
+
+import Link from 'next/link';
+import { Search, FolderOpen, Tag, TrendingUp } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { cn } from '@/lib/utils';
+import { BlogCard } from './blog-card';
+
+interface BlogCategory {
+  id: string;
+  name: string;
+  slug: string;
+  postCount: number;
+}
+
+interface BlogTag {
+  id: string;
+  name: string;
+  slug: string;
+  postCount: number;
+}
+
+interface RecentPost {
+  id: string;
+  title: string;
+  slug: string;
+  excerpt?: string;
+  featuredImage?: {
+    url: string;
+    altText?: string | null;
+  } | null;
+  author: {
+    id: string;
+    name: string;
+    avatar?: {
+      url: string;
+    } | null;
+  };
+  category?: {
+    id: string;
+    name: string;
+    slug: string;
+  } | null;
+  publishedAt?: string;
+  readingTime: number;
+  viewCount: number;
+  isFeatured: boolean;
+}
+
+interface BlogSidebarProps {
+  categories?: BlogCategory[];
+  tags?: BlogTag[];
+  recentPosts?: RecentPost[];
+  currentCategorySlug?: string;
+  currentTagSlug?: string;
+  onSearch?: (query: string) => void;
+  searchQuery?: string;
+  className?: string;
+}
+
+export function BlogSidebar({
+  categories = [],
+  tags = [],
+  recentPosts = [],
+  currentCategorySlug,
+  currentTagSlug,
+  onSearch,
+  searchQuery = '',
+  className,
+}: BlogSidebarProps) {
+  return (
+    <aside className={cn('space-y-6', className)}>
+      {/* Search */}
+      {onSearch && (
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base flex items-center gap-2">
+              <Search className="h-4 w-4" />
+              Szukaj
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Input
+              type="search"
+              placeholder="Szukaj artykułów..."
+              value={searchQuery}
+              onChange={(e) => onSearch(e.target.value)}
+            />
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Categories */}
+      {categories.length > 0 && (
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base flex items-center gap-2">
+              <FolderOpen className="h-4 w-4" />
+              Kategorie
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ul className="space-y-1">
+              {categories.map((category) => (
+                <li key={category.id}>
+                  <Link
+                    href={`/blog/category/${category.slug}`}
+                    className={cn(
+                      'flex items-center justify-between py-1.5 px-2 rounded-md hover:bg-muted transition-colors',
+                      currentCategorySlug === category.slug && 'bg-muted font-medium'
+                    )}
+                  >
+                    <span>{category.name}</span>
+                    <Badge variant="secondary" className="text-xs">
+                      {category.postCount}
+                    </Badge>
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Tags */}
+      {tags.length > 0 && (
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base flex items-center gap-2">
+              <Tag className="h-4 w-4" />
+              Tagi
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-wrap gap-2">
+              {tags.map((tag) => (
+                <Link key={tag.id} href={`/blog/tag/${tag.slug}`}>
+                  <Badge
+                    variant={currentTagSlug === tag.slug ? 'default' : 'outline'}
+                    className="cursor-pointer hover:bg-muted"
+                  >
+                    {tag.name}
+                  </Badge>
+                </Link>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Recent Posts */}
+      {recentPosts.length > 0 && (
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base flex items-center gap-2">
+              <TrendingUp className="h-4 w-4" />
+              Ostatnie wpisy
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2">
+            {recentPosts.map((post) => (
+              <BlogCard key={post.id} post={post} variant="compact" />
+            ))}
+          </CardContent>
+        </Card>
+      )}
+    </aside>
+  );
+}

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

@@ -0,0 +1,8 @@
+/**
+ * Blog Components
+ *
+ * Components for blog/CMS functionality.
+ */
+
+export { BlogCard } from './blog-card';
+export { BlogSidebar } from './blog-sidebar';

package/templates/storefront-nextjs-shadcn/components/brand/brand-card.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+import { Card } from "@/components/ui/card";
+
+export interface BrandCardProps {
+  id: string;
+  name: string;
+  slug: string;
+  description?: string;
+  logoUrl?: string;
+  productCount?: number;
+  className?: string;
+}
+
+/**
+ * BrandCard - Display card for brand with logo
+ */
+export function BrandCard({
+  id,
+  name,
+  slug,
+  description,
+  logoUrl,
+  productCount,
+  className = "",
+}: BrandCardProps) {
+  return (
+    <Link href={`/brands/${slug}`} className={`block ${className}`}>
+      <Card className="group overflow-hidden transition-all hover:shadow-lg">
+        {/* Brand Logo */}
+        <div className="relative aspect-square flex items-center justify-center bg-muted p-8">
+          {logoUrl ? (
+            <div className="relative h-full w-full">
+              <Image
+                src={logoUrl}
+                alt={`${name} logo`}
+                fill
+                className="object-contain transition-transform group-hover:scale-105"
+                sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 25vw"
+              />
+            </div>
+          ) : (
+            <div className="flex h-full w-full items-center justify-center">
+              <span className="text-4xl font-bold text-muted-foreground/30">
+                {name.charAt(0)}
+              </span>
+            </div>
+          )}
+        </div>
+
+        {/* Brand Info */}
+        <div className="p-4">
+          <h3 className="text-lg font-semibold text-foreground group-hover:text-primary transition-colors">
+            {name}
+          </h3>
+
+          {description && (
+            <p className="mt-1 text-sm text-muted-foreground line-clamp-2">
+              {description}
+            </p>
+          )}
+
+          {productCount !== undefined && (
+            <p className="mt-2 text-xs text-muted-foreground">
+              {productCount} {productCount === 1 ? "product" : "products"}
+            </p>
+          )}
+        </div>
+      </Card>
+    </Link>
+  );
+}
+
+export interface BrandLogoProps {
+  name: string;
+  logoUrl?: string;
+  size?: "sm" | "md" | "lg";
+  className?: string;
+}
+
+/**
+ * BrandLogo - Display brand logo only (for product cards, etc.)
+ */
+export function BrandLogo({
+  name,
+  logoUrl,
+  size = "md",
+  className = "",
+}: BrandLogoProps) {
+  const sizeClasses = {
+    sm: "h-6 w-16",
+    md: "h-8 w-24",
+    lg: "h-12 w-32",
+  };
+
+  if (!logoUrl) {
+    return (
+      <span
+        className={`text-xs font-medium text-muted-foreground ${className}`}
+      >
+        {name}
+      </span>
+    );
+  }
+
+  return (
+    <div className={`relative ${sizeClasses[size]} ${className}`}>
+      <Image
+        src={logoUrl}
+        alt={`${name} logo`}
+        fill
+        className="object-contain"
+        sizes="200px"
+      />
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/brand/brand-grid.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { BrandCard, type BrandCardProps } from "./brand-card";
+
+export interface BrandGridProps {
+  brands: BrandCardProps[];
+  className?: string;
+}
+
+/**
+ * BrandGrid - Grid layout for brand cards
+ */
+export function BrandGrid({ brands, className = "" }: BrandGridProps) {
+  if (brands.length === 0) {
+    return (
+      <div className="rounded-lg border border-border bg-muted/50 p-12 text-center">
+        <p className="text-muted-foreground">No brands available</p>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 ${className}`}
+    >
+      {brands.map((brand) => (
+        <BrandCard key={brand.id} {...brand} />
+      ))}
+    </div>
+  );
+}
+
+export interface FeaturedBrandsProps {
+  brands: BrandCardProps[];
+  title?: string;
+  description?: string;
+  className?: string;
+}
+
+/**
+ * FeaturedBrands - Section for displaying featured brands
+ */
+export function FeaturedBrands({
+  brands,
+  title = "Featured Brands",
+  description,
+  className = "",
+}: FeaturedBrandsProps) {
+  if (brands.length === 0) {
+    return null;
+  }
+
+  return (
+    <section className={className}>
+      <div className="mb-8">
+        <h2 className="text-3xl font-bold text-foreground">{title}</h2>
+        {description && (
+          <p className="mt-2 text-muted-foreground">{description}</p>
+        )}
+      </div>
+      <BrandGrid brands={brands} />
+    </section>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/cart/cart-drawer.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import { useEffect } from "react";
+import { X, ShoppingBag, Loader2 } from "lucide-react";
+import { useCartStore } from "@/stores/cart-store";
+import { useCartSync } from "@/hooks/use-cart-sync";
+import { useCartActions } from "@/hooks/use-cart-actions";
+import { CartItem } from "./cart-item";
+import { CartSummary } from "./cart-summary";
+import { Button } from "@/components/ui/button";
+import { EmptyCart } from "@/components/ui/empty-state";
+import { cn } from "@/lib/utils";
+
+export interface CartDrawerProps {
+  className?: string;
+}
+
+/**
+ * CartDrawer - Sliding cart panel
+ *
+ * Reads cart data from server via useCartSync (source of truth).
+ * Mutations go through useCartActions (server-only).
+ */
+export function CartDrawer({ className }: CartDrawerProps) {
+  // UI state from Zustand
+  const { isOpen, closeCart } = useCartStore();
+
+  // Server cart data (source of truth)
+  const { items, totalQuantity, subtotal, total, totalDiscount, currency, isLoading } = useCartSync();
+
+  // Actions that mutate via GraphQL
+  const { updateQuantity, removeFromCart } = useCartActions();
+
+  // Prevent body scroll when drawer is open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "unset";
+    }
+    return () => {
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen]);
+
+  const handleCheckout = () => {
+    closeCart();
+    if (typeof window !== 'undefined') {
+      window.location.href = "/checkout";
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 z-40 bg-black/50 transition-opacity"
+        onClick={closeCart}
+        aria-hidden="true"
+      />
+
+      {/* Drawer */}
+      <div
+        className={cn(
+          "fixed inset-y-0 right-0 z-50 w-full max-w-md bg-background shadow-xl",
+          "flex flex-col",
+          className
+        )}
+        role="dialog"
+        aria-modal="true"
+        aria-label="Shopping cart"
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between border-b border-border p-4">
+          <div className="flex items-center gap-2">
+            <ShoppingBag className="h-5 w-5" />
+            <h2 className="text-lg font-semibold">
+              Shopping Cart
+              {totalQuantity > 0 && (
+                <span className="ml-2 text-sm font-normal text-muted-foreground">
+                  ({totalQuantity})
+                </span>
+              )}
+            </h2>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={closeCart}
+            className="h-8 w-8 p-0"
+            aria-label="Close cart"
+          >
+            <X className="h-5 w-5" />
+          </Button>
+        </div>
+
+        {/* Content */}
+        {isLoading ? (
+          <div className="flex flex-1 items-center justify-center p-8">
+            <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+          </div>
+        ) : items.length === 0 ? (
+          <div className="flex flex-1 items-center justify-center p-8">
+            <EmptyCart onContinueShopping={closeCart} />
+          </div>
+        ) : (
+          <>
+            {/* Items list */}
+            <div className="flex-1 overflow-y-auto p-4">
+              <div className="divide-y divide-border">
+                {items.map((item) => (
+                  <CartItem
+                    key={item.lineId}
+                    item={item}
+                    onUpdateQuantity={updateQuantity}
+                    onRemove={removeFromCart}
+                  />
+                ))}
+              </div>
+            </div>
+
+            {/* Summary */}
+            <div className="border-t border-border p-4">
+              <CartSummary
+                subtotal={subtotal}
+                total={total}
+                totalDiscount={totalDiscount}
+                currencyCode={currency}
+                itemCount={totalQuantity}
+                onCheckout={handleCheckout}
+              />
+            </div>
+          </>
+        )}
+      </div>
+    </>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/cart/cart-icon.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { ShoppingCart } from "lucide-react";
+import { useCartSync } from "@/hooks/use-cart-sync";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export interface CartIconProps {
+  className?: string;
+  /** If true, navigates to /cart page instead of opening drawer */
+  navigateToCart?: boolean;
+}
+
+/**
+ * CartIcon - Cart button with item count badge
+ *
+ * Client Component that reads cart count from server (source of truth)
+ */
+export function CartIcon({ className, navigateToCart = true }: CartIconProps) {
+  const router = useRouter();
+  const { totalQuantity, isLoading } = useCartSync();
+
+  const handleClick = () => {
+    if (navigateToCart) {
+      router.push("/cart");
+    }
+  };
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      onClick={handleClick}
+      className={cn("relative p-2", className)}
+      aria-label={`Shopping cart with ${totalQuantity} items`}
+    >
+      <ShoppingCart className="h-5 w-5" />
+
+      {/* Badge */}
+      {totalQuantity > 0 && (
+        <span className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-xs font-medium text-primary-foreground">
+          {totalQuantity > 99 ? "99+" : totalQuantity}
+        </span>
+      )}
+    </Button>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/cart/cart-item.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { X, Gift } from "lucide-react";
+import Link from "next/link";
+import { ProductImage } from "@/components/product/product-image";
+import { ProductQuantitySelector } from "@/components/product/product-quantity-selector";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { formatPrice, formatAmount } from "@/lib/format";
+import type { CartItemData } from "@/hooks/use-cart-sync";
+
+export interface CartItemProps {
+  item: CartItemData;
+  onUpdateQuantity: (lineId: string, quantity: number) => void;
+  onRemove: (lineId: string) => void;
+  className?: string;
+}
+
+/**
+ * CartItem - Single item in cart
+ */
+export function CartItem({
+  item,
+  onUpdateQuantity,
+  onRemove,
+  className,
+}: CartItemProps) {
+  const itemTotal = parseFloat(item.price.amount) * item.quantity;
+
+  return (
+    <div className={cn("flex gap-4 py-4", className)}>
+      {/* Image */}
+      <Link
+        href={`/products/${item.productHandle || item.productId}`}
+        className="relative h-24 w-24 flex-shrink-0 overflow-hidden rounded-lg bg-muted"
+      >
+        <ProductImage
+          image={item.image}
+          alt={item.productTitle}
+          fill
+          sizes="96px"
+          className="object-cover"
+        />
+      </Link>
+
+      {/* Details */}
+      <div className="flex flex-1 flex-col">
+        <div className="flex justify-between">
+          <div className="flex-1">
+            <Link
+              href={`/products/${item.productHandle || item.productId}`}
+              className="text-sm font-medium text-foreground hover:text-primary"
+            >
+              {item.productTitle}
+            </Link>
+            {item.productType === "GIFT_CARD" && (
+              <p className="mt-1 flex items-center gap-1 text-xs text-primary">
+                <Gift className="h-3 w-3" />
+                Karta podarunkowa
+              </p>
+            )}
+            {item.variantTitle && (
+              <p className="mt-1 text-xs text-muted-foreground">
+                {item.variantTitle}
+              </p>
+            )}
+          </div>
+
+          {/* Remove button */}
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => onRemove(item.lineId)}
+            className="h-8 w-8 p-0"
+            aria-label="Remove item"
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+
+        {/* Quantity and price */}
+        <div className="mt-2 flex items-center justify-between">
+          <ProductQuantitySelector
+            value={item.quantity}
+            onChange={(qty) => onUpdateQuantity(item.lineId, qty)}
+            min={1}
+            max={99}
+            disabled={!item.available}
+          />
+
+          <div className="text-right">
+            <p className="text-sm font-semibold text-foreground">
+              {formatAmount(itemTotal, item.price.currencyCode)}
+            </p>
+            {item.quantity > 1 && (
+              <p className="text-xs text-muted-foreground">
+                {formatPrice(item.price)} each
+              </p>
+            )}
+          </div>
+        </div>
+
+        {/* Out of stock warning */}
+        {!item.available && (
+          <p className="mt-2 text-xs text-destructive">
+            This item is currently out of stock
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}