@doswiftly/cli 0.1.1

package/templates/storefront-nextjs-shadcn/components/search/search-results.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { ProductGrid, type ProductCardProduct } from "@/components/product/product-grid";
+import { EmptyProducts } from "@/components/ui/empty-state";
+
+export interface SearchResultsProps {
+  query: string;
+  results: ProductCardProduct[];
+}
+
+/**
+ * SearchResults - Display search results
+ */
+export function SearchResults({ query, results }: SearchResultsProps) {
+  if (!query) {
+    return (
+      <div className="rounded-lg border border-border bg-muted/50 p-12 text-center">
+        <p className="text-muted-foreground">
+          Enter a search term to find products
+        </p>
+      </div>
+    );
+  }
+
+  if (results.length === 0) {
+    return (
+      <div className="space-y-6">
+        <EmptyProducts />
+        
+        {/* Search tips */}
+        <div className="rounded-lg border border-border bg-muted/50 p-6">
+          <h3 className="mb-3 font-semibold text-foreground">Search Tips:</h3>
+          <ul className="space-y-2 text-sm text-muted-foreground">
+            <li>• Check your spelling</li>
+            <li>• Try more general keywords</li>
+            <li>• Try different keywords</li>
+            <li>• Browse our categories instead</li>
+          </ul>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <p className="text-sm text-muted-foreground">
+        Found {results.length} {results.length === 1 ? "result" : "results"} for "{query}"
+      </p>
+      
+      <ProductGrid
+        products={results}
+        columns={4}
+        priorityCount={4}
+        showBadges
+      />
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/search/search-suggestions.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { Search } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export interface SearchSuggestionsProps {
+  suggestions: string[];
+  onSelect: (suggestion: string) => void;
+  className?: string;
+}
+
+/**
+ * SearchSuggestions - Dropdown with search suggestions
+ */
+export function SearchSuggestions({
+  suggestions,
+  onSelect,
+  className,
+}: SearchSuggestionsProps) {
+  return (
+    <div
+      className={cn(
+        "absolute top-full z-50 mt-2 w-full rounded-lg border border-border bg-background shadow-lg",
+        className
+      )}
+    >
+      <ul className="max-h-80 overflow-y-auto py-2">
+        {suggestions.map((suggestion) => (
+          <li key={`suggestion-${suggestion.toLowerCase().replace(/\s+/g, '-')}`}>
+            <button
+              type="button"
+              onClick={() => onSelect(suggestion)}
+              className="flex w-full items-center gap-3 px-4 py-2 text-left text-sm transition-colors hover:bg-accent"
+            >
+              <Search className="h-4 w-4 text-muted-foreground" />
+              <span className="text-foreground">{suggestion}</span>
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

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

@@ -0,0 +1,12 @@
+/**
+ * SEO Components
+ *
+ * Components and utilities for structured data and search engine optimization.
+ */
+
+export { JsonLd } from "./json-ld";
+export {
+  buildProductJsonLd,
+  buildBreadcrumbJsonLd,
+  buildOrganizationJsonLd,
+} from "./product-json-ld";

package/templates/storefront-nextjs-shadcn/components/seo/json-ld.tsx

@@ -0,0 +1,56 @@
+/**
+ * JsonLd Component - Type-safe structured data for SEO
+ *
+ * Renders JSON-LD structured data in a script tag with proper sanitization.
+ * Requirements: 13.3
+ */
+
+import type { Thing, WithContext } from "schema-dts";
+
+interface JsonLdProps<T extends Thing> {
+  /** Schema.org structured data object */
+  data: WithContext<T>;
+  /** Optional key for multiple JSON-LD blocks */
+  id?: string;
+}
+
+/**
+ * Sanitize JSON-LD content to prevent XSS attacks
+ *
+ * Replaces < and > characters with their Unicode equivalents
+ * to prevent script injection via malicious data.
+ */
+function sanitizeJsonLd(json: string): string {
+  return json
+    .replace(/</g, "\\u003c")
+    .replace(/>/g, "\\u003e");
+}
+
+/**
+ * JsonLd - Render JSON-LD structured data script tag
+ *
+ * Features:
+ * - Type-safe schema data via schema-dts types
+ * - XSS sanitization (< and > character escaping)
+ * - Multiple schemas per page support
+ * - Server-side rendering compatible
+ *
+ * Usage:
+ * ```tsx
+ * <JsonLd data={buildProductJsonLd(product)} />
+ * ```
+ */
+export function JsonLd<T extends Thing>({ data, id }: JsonLdProps<T>) {
+  const json = JSON.stringify(data);
+  const sanitized = sanitizeJsonLd(json);
+
+  return (
+    <script
+      type="application/ld+json"
+      id={id}
+      dangerouslySetInnerHTML={{ __html: sanitized }}
+    />
+  );
+}
+
+export default JsonLd;

package/templates/storefront-nextjs-shadcn/components/seo/product-json-ld.ts

@@ -0,0 +1,167 @@
+/**
+ * Product JSON-LD Builder - Schema.org Product structured data
+ *
+ * Builds type-safe Product schema for SEO rich results.
+ * Requirements: 13.3
+ */
+
+import type { Product, WithContext, Offer } from "schema-dts";
+
+/**
+ * Product data input interface
+ * Matches the ProductFragment from GraphQL
+ */
+interface ProductData {
+  id: string;
+  title: string;
+  handle: string;
+  description?: string | null;
+  descriptionHtml?: string | null;
+  featuredImage?: {
+    url: string;
+    altText?: string | null;
+    width?: number | null;
+    height?: number | null;
+  } | null;
+  images?: Array<{
+    url: string;
+    altText?: string | null;
+  }> | null;
+  variants?: Array<{
+    id: string;
+    sku?: string | null;
+    title?: string | null;
+    price: {
+      amount: string;
+      currencyCode: string;
+    };
+    compareAtPrice?: {
+      amount: string;
+      currencyCode: string;
+    } | null;
+    availableForSale?: boolean;
+    quantityAvailable?: number | null;
+  }> | null;
+  brand?: {
+    name: string;
+  } | null;
+  vendor?: string | null;
+  seo?: {
+    title?: string | null;
+    description?: string | null;
+  } | null;
+  updatedAt?: string | null;
+  createdAt?: string | null;
+}
+
+interface BuildProductJsonLdOptions {
+  /** Base URL for the site (e.g., https://example.com) */
+  siteUrl: string;
+  /** Organization/shop name */
+  organizationName?: string;
+}
+
+/**
+ * Build JSON-LD Product schema from product data
+ *
+ * @param product - Product data from GraphQL
+ * @param options - Configuration options
+ * @returns Schema.org Product with context
+ */
+export function buildProductJsonLd(
+  product: ProductData,
+  options: BuildProductJsonLdOptions
+): WithContext<Product> {
+  const { siteUrl, organizationName } = options;
+  const productUrl = `${siteUrl}/products/${product.handle}`;
+
+  // Get the first variant for pricing info
+  const firstVariant = product.variants?.[0];
+
+  // Build offer(s) from variants
+  const offers: Offer[] = (product.variants || []).slice(0, 10).map((variant) => ({
+    "@type": "Offer",
+    url: productUrl,
+    priceCurrency: variant.price.currencyCode,
+    price: variant.price.amount,
+    availability: variant.availableForSale
+      ? "https://schema.org/InStock"
+      : "https://schema.org/OutOfStock",
+    ...(variant.sku && { sku: variant.sku }),
+    ...(variant.title && variant.title !== "Default Title" && { name: variant.title }),
+  }));
+
+  // Build image array
+  const images = [
+    product.featuredImage?.url,
+    ...(product.images?.map((img) => img.url) || []),
+  ].filter((url): url is string => Boolean(url));
+
+  // Build the Product schema
+  const schema: WithContext<Product> = {
+    "@context": "https://schema.org",
+    "@type": "Product",
+    name: product.title,
+    url: productUrl,
+    ...(product.description && { description: product.description }),
+    ...(images.length > 0 && { image: images }),
+    ...(firstVariant?.sku && { sku: firstVariant.sku }),
+    ...(product.brand?.name && {
+      brand: {
+        "@type": "Brand",
+        name: product.brand.name,
+      },
+    }),
+    ...(product.vendor && !product.brand?.name && {
+      brand: {
+        "@type": "Brand",
+        name: product.vendor,
+      },
+    }),
+    ...(offers.length > 0 && {
+      offers: offers.length === 1 ? offers[0] : offers,
+    }),
+  };
+
+  return schema;
+}
+
+/**
+ * Build JSON-LD BreadcrumbList schema
+ */
+export function buildBreadcrumbJsonLd(
+  items: Array<{ name: string; url: string }>,
+  siteUrl: string
+) {
+  return {
+    "@context": "https://schema.org" as const,
+    "@type": "BreadcrumbList" as const,
+    itemListElement: items.map((item, index) => ({
+      "@type": "ListItem" as const,
+      position: index + 1,
+      name: item.name,
+      item: item.url.startsWith("http") ? item.url : `${siteUrl}${item.url}`,
+    })),
+  };
+}
+
+/**
+ * Build JSON-LD Organization schema
+ */
+export function buildOrganizationJsonLd(options: {
+  name: string;
+  siteUrl: string;
+  logo?: string;
+  description?: string;
+}) {
+  return {
+    "@context": "https://schema.org" as const,
+    "@type": "Organization" as const,
+    name: options.name,
+    url: options.siteUrl,
+    ...(options.logo && { logo: options.logo }),
+    ...(options.description && { description: options.description }),
+  };
+}
+
+export default buildProductJsonLd;

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

@@ -0,0 +1,16 @@
+/**
+ * Shipping Components
+ *
+ * Components for shipping method selection during checkout.
+ * Uses the GraphQL availableShippingMethods query.
+ */
+
+export {
+  ShippingMethodSelector,
+  type ShippingMethodSelectorProps,
+  type AvailableShippingMethod,
+  type ShippingCarrier,
+  type DeliveryEstimate,
+  type FreeShippingProgress,
+  type Money,
+} from "./shipping-method-selector";

package/templates/storefront-nextjs-shadcn/components/shipping/shipping-method-selector.tsx

@@ -0,0 +1,337 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Truck, Package, Clock, Check, AlertCircle } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Spinner } from "@/components/ui/spinner";
+
+/**
+ * Types matching GraphQL schema
+ */
+export interface ShippingCarrier {
+  id?: string;
+  name: string;
+  logoUrl?: string;
+  serviceCode?: string;
+}
+
+export interface DeliveryEstimate {
+  minDays?: number;
+  maxDays?: number;
+  description?: string;
+}
+
+export interface Money {
+  amount: string;
+  currencyCode: string;
+}
+
+export interface FreeShippingProgress {
+  qualifies: boolean;
+  currentAmount?: Money;
+  threshold?: Money;
+  remaining?: Money;
+  progressPercent?: number;
+  message?: string;
+}
+
+export interface AvailableShippingMethod {
+  id: string;
+  name: string;
+  description?: string;
+  carrier?: ShippingCarrier;
+  price: Money;
+  isFree: boolean;
+  estimatedDelivery?: DeliveryEstimate;
+  freeShippingProgress?: FreeShippingProgress;
+  sortOrder: number;
+}
+
+export interface ShippingMethodSelectorProps {
+  methods: AvailableShippingMethod[];
+  selectedMethodId?: string;
+  onSelect: (method: AvailableShippingMethod) => void;
+  freeShippingProgress?: FreeShippingProgress;
+  isLoading?: boolean;
+  error?: string;
+  currencyCode?: string;
+  className?: string;
+}
+
+/**
+ * ShippingMethodSelector - Select shipping method during checkout
+ *
+ * Features:
+ * - Displays available shipping methods with carrier info
+ * - Shows delivery estimates
+ * - Free shipping progress indicator
+ * - Supports carrier logos
+ */
+export function ShippingMethodSelector({
+  methods,
+  selectedMethodId,
+  onSelect,
+  freeShippingProgress,
+  isLoading,
+  error,
+  currencyCode = "PLN",
+  className,
+}: ShippingMethodSelectorProps) {
+  const formatPrice = (money: Money) => {
+    const amount = parseFloat(money.amount);
+    return new Intl.NumberFormat("pl-PL", {
+      style: "currency",
+      currency: money.currencyCode || currencyCode,
+    }).format(amount);
+  };
+
+  if (isLoading) {
+    return (
+      <div className={cn("space-y-4", className)}>
+        <div className="flex items-center gap-2">
+          <Truck className="h-5 w-5 text-muted-foreground" />
+          <h3 className="text-sm font-medium text-foreground">Shipping Method</h3>
+        </div>
+        <div className="flex items-center justify-center py-8">
+          <Spinner className="h-6 w-6" />
+          <span className="ml-2 text-sm text-muted-foreground">
+            Loading shipping options...
+          </span>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={cn("space-y-4", className)}>
+        <div className="flex items-center gap-2">
+          <Truck className="h-5 w-5 text-muted-foreground" />
+          <h3 className="text-sm font-medium text-foreground">Shipping Method</h3>
+        </div>
+        <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-4">
+          <div className="flex items-center gap-2">
+            <AlertCircle className="h-5 w-5 text-destructive" />
+            <p className="text-sm text-destructive">{error}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (methods.length === 0) {
+    return (
+      <div className={cn("space-y-4", className)}>
+        <div className="flex items-center gap-2">
+          <Truck className="h-5 w-5 text-muted-foreground" />
+          <h3 className="text-sm font-medium text-foreground">Shipping Method</h3>
+        </div>
+        <div className="rounded-lg border border-border bg-muted/50 p-4">
+          <p className="text-sm text-muted-foreground text-center">
+            No shipping methods available for this address
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("space-y-4", className)}>
+      {/* Header */}
+      <div className="flex items-center gap-2">
+        <Truck className="h-5 w-5 text-muted-foreground" />
+        <h3 className="text-sm font-medium text-foreground">Shipping Method</h3>
+      </div>
+
+      {/* Free Shipping Progress Banner */}
+      {freeShippingProgress && !freeShippingProgress.qualifies && (
+        <FreeShippingBanner progress={freeShippingProgress} />
+      )}
+
+      {/* Shipping Methods List */}
+      <div className="space-y-2">
+        {methods.map((method) => (
+          <ShippingMethodCard
+            key={method.id}
+            method={method}
+            isSelected={selectedMethodId === method.id}
+            onSelect={() => onSelect(method)}
+            formatPrice={formatPrice}
+          />
+        ))}
+      </div>
+
+      {/* Free Shipping Achieved */}
+      {freeShippingProgress?.qualifies && (
+        <div className="rounded-lg border border-green-500/50 bg-green-500/10 p-3">
+          <div className="flex items-center gap-2">
+            <Check className="h-4 w-4 text-green-600" />
+            <p className="text-sm font-medium text-green-700">
+              {freeShippingProgress.message || "You qualify for free shipping!"}
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Individual shipping method card
+ */
+function ShippingMethodCard({
+  method,
+  isSelected,
+  onSelect,
+  formatPrice,
+}: {
+  method: AvailableShippingMethod;
+  isSelected: boolean;
+  onSelect: () => void;
+  formatPrice: (money: Money) => string;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onSelect}
+      className={cn(
+        "w-full rounded-lg border p-4 text-left transition-all",
+        isSelected
+          ? "border-primary bg-primary/5 ring-1 ring-primary"
+          : "border-border hover:border-primary/50"
+      )}
+    >
+      <div className="flex items-start justify-between gap-4">
+        {/* Left: Method Info */}
+        <div className="flex items-start gap-3 flex-1">
+          {/* Carrier Logo or Icon */}
+          {method.carrier?.logoUrl ? (
+            <img
+              src={method.carrier.logoUrl}
+              alt={method.carrier.name}
+              className="h-10 w-10 rounded object-contain"
+            />
+          ) : (
+            <div className="flex h-10 w-10 items-center justify-center rounded bg-muted">
+              <Package className="h-5 w-5 text-muted-foreground" />
+            </div>
+          )}
+
+          <div className="flex-1 min-w-0">
+            {/* Method Name */}
+            <div className="flex items-center gap-2">
+              <p className="text-sm font-medium text-foreground">
+                {method.name}
+              </p>
+              {method.isFree && (
+                <span className="rounded bg-green-500/10 px-1.5 py-0.5 text-xs font-medium text-green-700">
+                  FREE
+                </span>
+              )}
+            </div>
+
+            {/* Carrier Name (if different from method name) */}
+            {method.carrier?.name && method.carrier.name !== method.name && (
+              <p className="text-xs text-muted-foreground">
+                via {method.carrier.name}
+              </p>
+            )}
+
+            {/* Description */}
+            {method.description && (
+              <p className="mt-1 text-xs text-muted-foreground line-clamp-2">
+                {method.description}
+              </p>
+            )}
+
+            {/* Delivery Estimate */}
+            {method.estimatedDelivery && (
+              <div className="mt-2 flex items-center gap-1.5">
+                <Clock className="h-3.5 w-3.5 text-muted-foreground" />
+                <span className="text-xs text-muted-foreground">
+                  {method.estimatedDelivery.description}
+                </span>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Right: Price and Selection */}
+        <div className="flex flex-col items-end">
+          <p
+            className={cn(
+              "text-sm font-semibold",
+              method.isFree ? "text-green-600" : "text-foreground"
+            )}
+          >
+            {method.isFree ? "FREE" : formatPrice(method.price)}
+          </p>
+
+          {/* Selection Indicator */}
+          <div
+            className={cn(
+              "mt-2 h-5 w-5 rounded-full border-2 flex items-center justify-center transition-colors",
+              isSelected
+                ? "border-primary bg-primary"
+                : "border-muted-foreground/30"
+            )}
+          >
+            {isSelected && <Check className="h-3 w-3 text-primary-foreground" />}
+          </div>
+        </div>
+      </div>
+
+      {/* Method-specific free shipping progress */}
+      {method.freeShippingProgress &&
+        !method.freeShippingProgress.qualifies &&
+        method.freeShippingProgress.progressPercent !== undefined && (
+          <div className="mt-3 pt-3 border-t border-border">
+            <div className="flex items-center justify-between text-xs mb-1.5">
+              <span className="text-muted-foreground">
+                {method.freeShippingProgress.message}
+              </span>
+              <span className="font-medium text-foreground">
+                {Math.round(method.freeShippingProgress.progressPercent)}%
+              </span>
+            </div>
+            <div className="h-1.5 rounded-full bg-muted overflow-hidden">
+              <div
+                className="h-full rounded-full bg-primary transition-all"
+                style={{
+                  width: `${method.freeShippingProgress.progressPercent}%`,
+                }}
+              />
+            </div>
+          </div>
+        )}
+    </button>
+  );
+}
+
+/**
+ * Free shipping progress banner
+ */
+function FreeShippingBanner({ progress }: { progress: FreeShippingProgress }) {
+  if (!progress.remaining || !progress.threshold) return null;
+
+  return (
+    <div className="rounded-lg border border-amber-500/50 bg-amber-500/10 p-3">
+      <div className="flex items-center justify-between mb-2">
+        <p className="text-sm text-amber-700">
+          {progress.message}
+        </p>
+        <span className="text-xs font-medium text-amber-700">
+          {progress.progressPercent?.toFixed(0)}%
+        </span>
+      </div>
+      <div className="h-2 rounded-full bg-amber-200 overflow-hidden">
+        <div
+          className="h-full rounded-full bg-amber-500 transition-all"
+          style={{ width: `${progress.progressPercent || 0}%` }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default ShippingMethodSelector;