npm - @doswiftly/cli - Versions diffs - 0.1.18 → 0.1.19 - Mend

@doswiftly/cli 0.1.18 → 0.1.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (210) hide show

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

@@ -1,20 +1,27 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
+import { cookies } from "next/headers";
 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 { StorefrontProvider } from "@doswiftly/storefront-sdk/react";
 import { ThemeProvider } from "@/components/providers/theme-provider";
+import { StoresProvider } from "@/components/providers/stores-provider";
 import { Toaster } from "sonner";
 import { fetchShop } from "@/lib/graphql/server";
+import type { ShopQuery } from "@/generated/graphql";
 import { themeConfig } from "@/lib/theme/theme-config";
+import { graphqlConfig } from "@/lib/graphql/config";
+import { AUTH_COOKIE_NAME } from "@doswiftly/storefront-sdk";
 const inter = Inter({ subsets: ["latin"] });
 const siteName = process.env.NEXT_PUBLIC_SITE_NAME || "My Store";
+const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3001";
 export const metadata: Metadata = {
+  metadataBase: new URL(siteUrl),
   title: `${siteName} - E-commerce Store`,
   description: "Welcome to our online store powered by DoSwiftly Commerce",
 };
@@ -22,13 +29,32 @@ export const metadata: Metadata = {
 // Enable ISR with 60 second revalidation for shop data (currencies)
 export const revalidate = 60;
+const FALLBACK_SHOP: ShopQuery = {
+  shop: {
+    id: 'fallback',
+    name: process.env.NEXT_PUBLIC_SITE_NAME || 'Store',
+    currencyCode: 'PLN',
+    supportedCurrencies: ['PLN'],
+    paymentCurrencies: ['PLN'],
+  },
+};
 export default async function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  // Fetch shop data (includes currencies) for CurrencyProvider
-  const shopData = await fetchShop();
+  let shopData: ShopQuery;
+  try {
+    shopData = await fetchShop();
+  } catch (error) {
+    console.error('[RootLayout] Failed to fetch shop data, using fallback:', error instanceof Error ? error.message : error);
+    shopData = FALLBACK_SHOP;
+  }
+  // Read httpOnly auth cookie — invisible to JS, so we pass it as a prop
+  const cookieStore = await cookies();
+  const hasAuthToken = !!cookieStore.get(AUTH_COOKIE_NAME)?.value;
   return (
     <html lang="en" suppressHydrationWarning>
@@ -41,14 +67,23 @@ export default async function RootLayout({
           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>
+            <StorefrontProvider
+              config={{
+                apiUrl: graphqlConfig.apiUrl,
+                shopSlug: graphqlConfig.shopSlug,
+              }}
+              shopData={shopData.shop}
+              initialIsAuthenticated={hasAuthToken}
+            >
+              <StoresProvider>
+                <div className="flex min-h-screen flex-col">
+                  <Header />
+                  <main className="flex-1">{children}</main>
+                  <Footer />
+                </div>
+                <Toaster position="bottom-right" richColors />
+              </StoresProvider>
+            </StorefrontProvider>
           </QueryProvider>
         </ThemeProvider>
       </body>

package/templates/storefront-nextjs-shadcn/app/products/[slug]/error.tsx ADDED Viewed

@@ -0,0 +1,43 @@
+"use client";
+import { useEffect } from "react";
+import Link from "next/link";
+import { AlertCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+export default function ProductError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error("[Product Error]", error);
+  }, [error]);
+  return (
+    <div className="container mx-auto flex min-h-[400px] items-center justify-center px-4 py-16">
+      <Card className="max-w-md">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-destructive">
+            <AlertCircle className="h-5 w-5" />
+            Product not available
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <p className="text-sm text-muted-foreground">
+            We couldn&apos;t load this product. It may have been removed or is temporarily unavailable.
+          </p>
+          <div className="flex gap-3">
+            <Button onClick={reset}>Try again</Button>
+            <Button variant="outline" asChild>
+              <Link href="/products">Browse products</Link>
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/app/products/[slug]/loading.tsx ADDED Viewed

@@ -0,0 +1,29 @@
+import { Skeleton } from "@/components/ui/skeleton";
+export default function ProductLoading() {
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <Skeleton className="mb-6 h-5 w-64" />
+      <div className="grid gap-8 lg:grid-cols-2">
+        {/* Image gallery */}
+        <Skeleton className="aspect-square w-full rounded-lg" />
+        {/* Product info */}
+        <div className="space-y-4">
+          <Skeleton className="h-8 w-3/4" />
+          <Skeleton className="h-6 w-32" />
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-4 w-5/6" />
+          <div className="space-y-2 pt-4">
+            <Skeleton className="h-5 w-20" />
+            <div className="flex gap-2">
+              {[...Array(4)].map((_, i) => (
+                <Skeleton key={i} className="h-10 w-16 rounded-md" />
+              ))}
+            </div>
+          </div>
+          <Skeleton className="mt-6 h-12 w-full rounded-md" />
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -3,6 +3,7 @@ import { notFound } from "next/navigation";
 import { Breadcrumbs } from "@/components/layout/breadcrumbs";
 import { ProductClient } from "./product-client";
 import { fetchProduct, fetchProducts } from "@/lib/graphql/server";
+import type { ProductQuery } from "@/generated/graphql";
 // ============================================================================
 // METADATA GENERATION
@@ -115,7 +116,7 @@ export async function generateStaticParams() {
       sortKey: "BEST_SELLING",
     });
-    return products.map((product: any) => ({
+    return products.map((product) => ({
       slug: product.handle,
     }));
   } catch (error) {
@@ -199,7 +200,9 @@ export default async function ProductPage({
  *
  * @see https://schema.org/Product
  */
-function generateProductJsonLd(product: any) {
+type Product = NonNullable<ProductQuery['product']>;
+function generateProductJsonLd(product: Product) {
   const firstImage = product.images?.[0];
   const price = product.priceRange?.minVariantPrice;
   const firstVariant = product.variants?.[0];
@@ -223,10 +226,7 @@ function generateProductJsonLd(product: any) {
       availability: firstVariant?.available
         ? "https://schema.org/InStock"
         : "https://schema.org/OutOfStock",
-      url:
-        typeof window !== "undefined"
-          ? window.location.href
-          : `/products/${product.handle}`,
+      url: `/products/${product.handle}`,
     },
     sku: product.id,
     productID: product.id,

package/templates/storefront-nextjs-shadcn/app/products/[slug]/product-client.tsx CHANGED Viewed

@@ -2,7 +2,7 @@
 import { useState, useEffect } from "react";
 import { useProduct } from "@/lib/graphql/hooks";
-import { useCurrencyStore } from "@/stores/currency-store";
+import { useCurrencyStore } from "@doswiftly/storefront-sdk/react";
 import { ProductGallery } from "@/components/product/product-gallery";
 import { ProductPrice } from "@/components/product/product-price";
 import { ProductVariantSelector } from "@/components/product/product-variant-selector";
@@ -13,58 +13,12 @@ import { SimilarProducts } from "@/components/product/similar-products";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { Badge } from "@/components/ui/badge";
 import { Gift } from "lucide-react";
-import { shopConfig } from "@/lib/config";
-export interface Product {
-  id: string;
-  handle: string;
-  title: string;
-  description?: string | null;
-  vendor?: string | null;
-  productType?: string | null;
-  type?: string | null;
-  collectRecipientInfo?: boolean;
-  tags?: string[];
-  images: Array<{
-    url: string;
-    altText?: string | null;
-  }>;
-  variants: Array<{
-    id: string;
-    title: string;
-    available: boolean;
-    selectedOptions: Array<{
-      name: string;
-      value: string;
-    }>;
-    price: {
-      amount: string;
-      currencyCode: string;
-    };
-    compareAtPrice?: {
-      amount: string;
-      currencyCode: string;
-    } | null;
-    image?: {
-      url: string;
-      altText?: string | null;
-    } | null;
-  }>;
-  priceRange: {
-    minVariantPrice: {
-      amount: string;
-      currencyCode: string;
-    };
-    maxVariantPrice: {
-      amount: string;
-      currencyCode: string;
-    };
-  };
-}
+import type { ProductQuery } from "@/generated/graphql";
+import type { ProductCardFields, ProductDetailFields } from "@/lib/graphql/fragments";
 export interface ProductClientProps {
-  product: Product;
-  similarProducts?: any[];
+  product: ProductDetailFields;
+  similarProducts?: ProductCardFields[];
 }
 /**
@@ -85,8 +39,8 @@ export function ProductClient({ product: initialProduct, similarProducts = [] }:
   const [quantity, setQuantity] = useState(1);
   // Get user's preferred currency from store
-  const currency = useCurrencyStore((s: any) => s.currency);
-  const isHydrated = useCurrencyStore((s: any) => s.isHydrated);
+  const currency = useCurrencyStore((s) => s.currency);
+  const isHydrated = useCurrencyStore((s) => s.isLoaded);
   // Check if SSR currency matches user's preferred currency
   const ssrCurrency = initialProduct.priceRange?.minVariantPrice?.currencyCode;
@@ -99,7 +53,7 @@ export function ProductClient({ product: initialProduct, similarProducts = [] }:
     enabled: isHydrated,
     // Only use SSR data as placeholder if currency matches
     // Otherwise, don't show stale data from wrong currency
-    placeholderData: currencyMatches ? { product: initialProduct } : undefined,
+    placeholderData: currencyMatches ? { product: initialProduct } as ProductQuery : undefined,
     // Don't use stale data - always refetch when currency changes
     staleTime: 0,
   });
@@ -111,10 +65,10 @@ export function ProductClient({ product: initialProduct, similarProducts = [] }:
   // IMPORTANT: This useEffect must be called BEFORE any conditional returns
   // to comply with React Hooks rules (hooks must be called in the same order every render)
   useEffect(() => {
-    if (product?.variants.length > 0) {
+    if (product && product.variants.length > 0) {
       // Try to maintain the same variant by matching ID
       const matchingVariant = product.variants.find(
-        (v: any) => v.id === selectedVariant.id
+        (v) => v.id === selectedVariant.id
       );
       if (matchingVariant) {
         setSelectedVariant(matchingVariant);
@@ -318,13 +272,13 @@ export function ProductClient({ product: initialProduct, similarProducts = [] }:
         <TabsContent value="shipping" className="mt-6">
           <div className="space-y-4 text-sm">
             <p className="text-muted-foreground">
-              Free shipping on orders over ${shopConfig.shipping.freeShippingThreshold}.
-              Standard delivery takes {shopConfig.shipping.standardDeliveryDays.min}-{shopConfig.shipping.standardDeliveryDays.max} business days.
+              Free shipping on orders over $50.
+              Standard delivery takes 3-5 business days.
             </p>
             <ul className="list-inside list-disc space-y-2 text-muted-foreground">
-              {shopConfig.shipping.features.map((feature, index) => (
-                <li key={index}>{feature}</li>
-              ))}
+              <li>Express shipping available at checkout</li>
+              <li>International shipping available</li>
+              <li>30-day return policy</li>
             </ul>
           </div>
         </TabsContent>

package/templates/storefront-nextjs-shadcn/app/products/loading.tsx ADDED Viewed

@@ -0,0 +1,32 @@
+import { Skeleton } from "@/components/ui/skeleton";
+export default function ProductsLoading() {
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <Skeleton className="mb-6 h-10 w-48" />
+      <div className="flex gap-8">
+        {/* Filters sidebar */}
+        <div className="hidden w-64 shrink-0 lg:block">
+          <Skeleton className="mb-4 h-8 w-32" />
+          <div className="space-y-3">
+            {[...Array(5)].map((_, i) => (
+              <Skeleton key={i} className="h-6 w-full" />
+            ))}
+          </div>
+        </div>
+        {/* Product grid */}
+        <div className="flex-1">
+          <div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
+            {[...Array(12)].map((_, i) => (
+              <div key={i} className="space-y-3">
+                <Skeleton className="aspect-square w-full rounded-lg" />
+                <Skeleton className="h-4 w-3/4" />
+                <Skeleton className="h-4 w-1/2" />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}