@doswiftly/cli 0.1.1

package/templates/storefront-nextjs-shadcn/app/globals.css

@@ -0,0 +1,125 @@
+@import "tailwindcss";
+
+@theme {
+  /* Light mode colors (default) */
+  --color-primary: rgb(59 130 246); /* blue-500 */
+  --color-primary-foreground: rgb(255 255 255);
+  --color-secondary: rgb(100 116 139); /* slate-500 */
+  --color-secondary-foreground: rgb(255 255 255);
+  --color-accent: rgb(249 115 22); /* orange-500 */
+  --color-accent-foreground: rgb(255 255 255);
+  --color-background: rgb(255 255 255);
+  --color-foreground: rgb(15 23 42); /* slate-900 */
+  --color-muted: rgb(241 245 249); /* slate-100 */
+  --color-muted-foreground: rgb(100 116 139); /* slate-500 */
+  --color-border: rgb(226 232 240); /* slate-200 */
+  --color-ring: rgb(59 130 246); /* blue-500 */
+  --color-card: rgb(255 255 255);
+  --color-card-foreground: rgb(15 23 42);
+  --color-destructive: rgb(239 68 68); /* red-500 */
+  --color-destructive-foreground: rgb(255 255 255);
+  --radius: 0.5rem;
+}
+
+@layer base {
+  * {
+    border-color: var(--color-border);
+  }
+  
+  body {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+    transition: background-color 200ms, color 200ms;
+  }
+
+  /* Dark mode colors */
+  .dark {
+    --color-primary: rgb(96 165 250); /* blue-400 */
+    --color-primary-foreground: rgb(15 23 42); /* slate-900 */
+    --color-secondary: rgb(148 163 184); /* slate-400 */
+    --color-secondary-foreground: rgb(15 23 42);
+    --color-accent: rgb(251 146 60); /* orange-400 */
+    --color-accent-foreground: rgb(15 23 42);
+    --color-background: rgb(15 23 42); /* slate-900 */
+    --color-foreground: rgb(248 250 252); /* slate-50 */
+    --color-muted: rgb(30 41 59); /* slate-800 */
+    --color-muted-foreground: rgb(148 163 184); /* slate-400 */
+    --color-border: rgb(51 65 85); /* slate-700 */
+    --color-ring: rgb(96 165 250); /* blue-400 */
+    --color-card: rgb(30 41 59); /* slate-800 */
+    --color-card-foreground: rgb(248 250 252);
+    --color-destructive: rgb(248 113 113); /* red-400 */
+    --color-destructive-foreground: rgb(15 23 42);
+  }
+}
+
+@utility btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.5rem;
+  padding: 0.5rem 1rem;
+  font-weight: 500;
+  transition: color 150ms;
+}
+
+@utility btn-primary {
+  background-color: var(--color-primary);
+  color: white;
+  &:hover {
+    background-color: rgb(59 130 246 / 0.9);
+  }
+}
+
+@utility btn-secondary {
+  background-color: var(--color-secondary);
+  color: white;
+  &:hover {
+    background-color: rgb(100 116 139 / 0.9);
+  }
+}
+
+@utility btn-outline {
+  border: 1px solid var(--color-border);
+  background-color: transparent;
+  &:hover {
+    background-color: var(--color-muted);
+  }
+}
+
+@utility input {
+  display: flex;
+  height: 2.5rem;
+  width: 100%;
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-border);
+  background-color: var(--color-background);
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  &::placeholder {
+    color: var(--color-muted-foreground);
+  }
+  &:focus-visible {
+    outline: none;
+    ring: 2px solid var(--color-ring);
+    ring-offset: 2px;
+  }
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+@utility card {
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-border);
+  background-color: var(--color-background);
+  padding: 1rem;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}

package/templates/storefront-nextjs-shadcn/app/layout.tsx

@@ -0,0 +1,57 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import { Header } from "@/components/layout/header";
+import { Footer } from "@/components/layout/footer";
+import { QueryProvider } from "@/components/providers/query-provider";
+import { CurrencyProvider } from "@/components/providers/currency-provider";
+import { ThemeProvider } from "@/components/providers/theme-provider";
+import { Toaster } from "sonner";
+import { fetchShop } from "@/lib/graphql/server";
+import { themeConfig } from "@/lib/theme/theme-config";
+
+const inter = Inter({ subsets: ["latin"] });
+
+const siteName = process.env.NEXT_PUBLIC_SITE_NAME || "My Store";
+
+export const metadata: Metadata = {
+  title: `${siteName} - E-commerce Store`,
+  description: "Welcome to our online store powered by DoSwiftly Commerce",
+};
+
+// Enable ISR with 60 second revalidation for shop data (currencies)
+export const revalidate = 60;
+
+export default async function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  // Fetch shop data (includes currencies) for CurrencyProvider
+  const shopData = await fetchShop();
+
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={inter.className}>
+        <ThemeProvider
+          attribute={themeConfig.attribute}
+          defaultTheme={themeConfig.defaultTheme}
+          enableSystem={themeConfig.enableSystem}
+          disableTransitionOnChange={themeConfig.disableTransitionOnChange}
+          storageKey={themeConfig.storageKey}
+        >
+          <QueryProvider>
+            <CurrencyProvider shopData={shopData.shop}>
+              <div className="flex min-h-screen flex-col">
+                <Header />
+                <main className="flex-1">{children}</main>
+                <Footer />
+              </div>
+              <Toaster position="bottom-right" richColors />
+            </CurrencyProvider>
+          </QueryProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

package/templates/storefront-nextjs-shadcn/app/not-found.tsx

@@ -0,0 +1,68 @@
+import Link from "next/link";
+import { FileQuestion, Home, ShoppingBag, Search } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+
+/**
+ * 404 Not Found Page
+ *
+ * Displayed when a page or resource is not found.
+ * Provides helpful navigation back to the site.
+ *
+ * Requirements: 11.1
+ */
+export default function NotFound() {
+  return (
+    <div className="container mx-auto flex min-h-[60vh] items-center justify-center px-4 py-16">
+      <Card className="w-full max-w-md text-center">
+        <CardHeader>
+          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-muted">
+            <FileQuestion className="h-8 w-8 text-muted-foreground" />
+          </div>
+          <CardTitle className="text-6xl font-bold">404</CardTitle>
+          <CardDescription className="text-lg">
+            Strona nie została znaleziona
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <p className="text-muted-foreground">
+            Przepraszamy, nie mogliśmy znaleźć strony, której szukasz.
+            Mogła zostać przeniesiona lub usunięta.
+          </p>
+
+          {/* Navigation options */}
+          <div className="flex flex-col gap-3">
+            <Button asChild size="lg" className="w-full">
+              <Link href="/">
+                <Home className="mr-2 h-4 w-4" />
+                Strona główna
+              </Link>
+            </Button>
+            <div className="flex gap-3">
+              <Button asChild variant="outline" size="lg" className="flex-1">
+                <Link href="/products">
+                  <ShoppingBag className="mr-2 h-4 w-4" />
+                  Produkty
+                </Link>
+              </Button>
+              <Button asChild variant="outline" size="lg" className="flex-1">
+                <Link href="/collections">
+                  <Search className="mr-2 h-4 w-4" />
+                  Kolekcje
+                </Link>
+              </Button>
+            </div>
+          </div>
+
+          {/* Help text */}
+          <p className="text-sm text-muted-foreground">
+            Potrzebujesz pomocy?{" "}
+            <Link href="/contact" className="text-primary underline underline-offset-4">
+              Skontaktuj się z nami
+            </Link>
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/app/page.tsx

@@ -0,0 +1,21 @@
+import { HeroSection } from "@/components/home/hero-section";
+import { FeaturedProducts } from "@/components/home/featured-products";
+import { CategoryGrid } from "@/components/home/category-grid";
+import { NewsletterSignup } from "@/components/home/newsletter-signup";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Home | " + (process.env.NEXT_PUBLIC_SITE_NAME || "My Store"),
+  description: "Discover our curated collection of quality products at affordable prices.",
+};
+
+export default function HomePage() {
+  return (
+    <div className="space-y-16 py-8">
+      <HeroSection />
+      <FeaturedProducts />
+      <CategoryGrid />
+      <NewsletterSignup />
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/app/products/[slug]/page.tsx

@@ -0,0 +1,246 @@
+import { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+import { ProductClient } from "./product-client";
+import { fetchProduct, fetchProducts } from "@/lib/graphql/server";
+
+// ============================================================================
+// METADATA GENERATION
+// ============================================================================
+
+/**
+ * Generate metadata for product pages
+ * 
+ * Includes:
+ * - Title and description for SEO
+ * - Open Graph tags for social sharing
+ * - Twitter Card tags
+ * - Canonical URL
+ * 
+ * Requirements: 13.1, 13.3
+ */
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}): Promise<Metadata> {
+  try {
+    const resolvedParams = await params;
+    
+    if (!resolvedParams?.slug) {
+      return {
+        title: "Product",
+        description: "View product details",
+      };
+    }
+    
+    const data = await fetchProduct(resolvedParams.slug);
+    const product = data?.product;
+
+    if (!product) {
+      return {
+        title: "Product Not Found",
+        description: "The product you're looking for doesn't exist.",
+      };
+    }
+
+    // Get first image for Open Graph
+    const firstImage = product.images?.[0];
+    const price = product.priceRange?.minVariantPrice;
+
+    // Build title with vendor if available
+    const title = product.vendor
+      ? `${product.title} - ${product.vendor}`
+      : product.title;
+
+    // Truncate description for meta tags (155 chars recommended)
+    const description =
+      product.description?.substring(0, 155) ||
+      `Shop ${product.title} at the best price.`;
+
+    return {
+      title,
+      description,
+      openGraph: {
+        title,
+        description,
+        type: "website",
+        images: firstImage
+          ? [
+              {
+                url: firstImage.url,
+                alt: firstImage.altText || product.title,
+              },
+            ]
+          : [],
+      },
+      twitter: {
+        card: "summary_large_image",
+        title,
+        description,
+        images: firstImage ? [firstImage.url] : [],
+      },
+      // Canonical URL (will be completed by Next.js with domain)
+      alternates: {
+        canonical: `/products/${resolvedParams.slug}`,
+      },
+    };
+  } catch (error) {
+    console.error("Error generating metadata:", error);
+    return {
+      title: "Product",
+      description: "View product details",
+    };
+  }
+}
+
+// ============================================================================
+// STATIC PARAMS GENERATION
+// ============================================================================
+
+/**
+ * Generate static params for top products
+ * 
+ * Pre-renders product pages at build time for better performance.
+ * Generates pages for the first 100 products (configurable).
+ * 
+ * Requirements: 2.2, 6.4
+ */
+export async function generateStaticParams() {
+  try {
+    // Fetch top 100 products for static generation
+    // Adjust this number based on your catalog size and build time constraints
+    const { products } = await fetchProducts({
+      first: 100,
+      sortKey: "BEST_SELLING",
+    });
+
+    return products.map((product: any) => ({
+      slug: product.handle,
+    }));
+  } catch (error) {
+    console.error("Error generating static params:", error);
+    // Return empty array to allow dynamic rendering
+    return [];
+  }
+}
+
+// ============================================================================
+// PAGE COMPONENT (SERVER COMPONENT)
+// ============================================================================
+
+/**
+ * Product detail page - Server Component
+ * 
+ * Fetches product data on the server using base currency for SSG/ISR.
+ * Passes initial data to Client Component for hydration and currency switching.
+ * 
+ * Requirements: 2.2, 3.2, 6.4
+ */
+export default async function ProductPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  try {
+    const resolvedParams = await params;
+    
+    if (!resolvedParams?.slug) {
+      notFound();
+    }
+    
+    // Fetch product data on server (base currency)
+    const data = await fetchProduct(resolvedParams.slug);
+    const product = data?.product;
+
+    if (!product) {
+      notFound();
+    }
+
+    // Generate JSON-LD structured data for SEO
+    const jsonLd = generateProductJsonLd(product);
+
+    return (
+      <>
+        {/* Structured Data (JSON-LD) - Requirement 13.3 */}
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+        />
+
+        <div className="container mx-auto px-4 py-8">
+          <Breadcrumbs className="mb-6" />
+
+          {/* Client component handles interactive features and currency switching */}
+          <ProductClient product={product} />
+        </div>
+      </>
+    );
+  } catch (error) {
+    console.error("Error loading product:", error);
+    notFound();
+  }
+}
+
+// ============================================================================
+// STRUCTURED DATA (JSON-LD)
+// ============================================================================
+
+/**
+ * Generate Product schema structured data
+ * 
+ * Helps search engines understand product information:
+ * - Product name, description, image
+ * - Price and currency
+ * - Availability
+ * - Brand/vendor
+ * 
+ * Requirements: 13.3
+ * 
+ * @see https://schema.org/Product
+ */
+function generateProductJsonLd(product: any) {
+  const firstImage = product.images?.[0];
+  const price = product.priceRange?.minVariantPrice;
+  const firstVariant = product.variants?.[0];
+
+  return {
+    "@context": "https://schema.org",
+    "@type": "Product",
+    name: product.title,
+    description: product.description || product.title,
+    image: firstImage?.url || "",
+    brand: product.vendor
+      ? {
+          "@type": "Brand",
+          name: product.vendor,
+        }
+      : undefined,
+    offers: {
+      "@type": "Offer",
+      price: price?.amount || "0",
+      priceCurrency: price?.currencyCode || "USD",
+      availability: firstVariant?.available
+        ? "https://schema.org/InStock"
+        : "https://schema.org/OutOfStock",
+      url:
+        typeof window !== "undefined"
+          ? window.location.href
+          : `/products/${product.handle}`,
+    },
+    sku: product.id,
+    productID: product.id,
+  };
+}
+
+// ============================================================================
+// ISR CONFIGURATION
+// ============================================================================
+
+/**
+ * Enable Incremental Static Regeneration
+ * 
+ * Revalidate product pages every 60 seconds to keep data fresh
+ * while maintaining static generation benefits.
+ */
+export const revalidate = 60;