npm - @doswiftly/cli - Versions diffs - 0.1.1 - Mend

@doswiftly/cli 0.1.1

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 (453) hide show

package/templates/storefront-nextjs/app/globals.css ADDED Viewed

@@ -0,0 +1,98 @@
+@import "tailwindcss";
+@theme {
+  --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 */
+  --radius: 0.5rem;
+}
+@layer base {
+  * {
+    border-color: var(--color-border);
+  }
+  body {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+  }
+}
+@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/app/layout.tsx ADDED Viewed

@@ -0,0 +1,39 @@
+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 { Providers } from "@/components/providers";
+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",
+};
+// Force dynamic rendering because Header uses React Query hooks (CurrencySelector, CartIcon)
+// TODO: Optimize by lazy-loading Header components that use hooks for better SSG support
+export const dynamic = "force-dynamic";
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <Providers>
+          <div className="flex min-h-screen flex-col">
+            <Header />
+            <main className="flex-1">{children}</main>
+            <Footer />
+          </div>
+        </Providers>
+      </body>
+    </html>
+  );
+}

package/templates/storefront-nextjs/app/page.tsx ADDED Viewed

@@ -0,0 +1,136 @@
+import Link from "next/link";
+import {
+  useProducts,
+  useCategories,
+} from "@doswiftly/commerce-sdk/graphql/server";
+export default async function HomePage() {
+  // Fetch featured products
+  const { products } = await useProducts({ first: 8 });
+  // Fetch categories (roots are the top-level categories)
+  const { categories } = await useCategories();
+  const categoryRoots = categories.slice(0, 4);
+  return (
+    <div className="container mx-auto px-4 py-8">
+      {/* Hero Section */}
+      <section className="mb-16 text-center">
+        <h1 className="mb-4 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl md:text-6xl">
+          Welcome to{" "}
+          <span className="text-primary">
+            {process.env.NEXT_PUBLIC_SITE_NAME || "My Store"}
+          </span>
+        </h1>
+        <p className="mx-auto mb-8 max-w-2xl text-lg text-gray-600">
+          Discover our curated collection of products. Quality meets
+          affordability.
+        </p>
+        <div className="flex justify-center gap-4">
+          <Link
+            href="/products"
+            className="rounded-lg bg-primary px-6 py-3 font-medium text-white transition hover:bg-primary/90"
+          >
+            Shop Now
+          </Link>
+          <Link
+            href="/collections"
+            className="rounded-lg border border-gray-300 px-6 py-3 font-medium text-gray-700 transition hover:bg-gray-50"
+          >
+            Browse Collections
+          </Link>
+        </div>
+      </section>
+      {/* Featured Products Section */}
+      <section className="mb-16">
+        <h2 className="mb-8 text-2xl font-bold text-gray-900">
+          Featured Products
+        </h2>
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
+          {products.length === 0 ? (
+            <div className="col-span-full rounded-lg border border-gray-200 p-8 text-center">
+              <div className="mb-4 h-48 rounded-lg bg-gray-100" />
+              <p className="text-gray-500">No products available</p>
+              <p className="mt-2 text-sm text-gray-400">
+                {process.env.NEXT_PUBLIC_SHOP_SLUG === "demo-shop"
+                  ? "Start backend to load demo products"
+                  : "Connect your shop to display products"}
+              </p>
+            </div>
+          ) : (
+            products.slice(0, 4).map((product) => (
+              <Link
+                key={product.id}
+                href={`/products/${product.handle}`}
+                className="group card transition hover:shadow-lg"
+              >
+                <div className="mb-4 aspect-square overflow-hidden rounded-lg bg-gray-100">
+                  {product.featuredImage?.url ? (
+                    <img
+                      src={product.featuredImage.url}
+                      alt={product.featuredImage.altText || product.title}
+                      className="h-full w-full object-cover"
+                    />
+                  ) : (
+                    <div className="flex h-full items-center justify-center text-gray-400">
+                      {product.title}
+                    </div>
+                  )}
+                </div>
+                <h3 className="font-medium text-gray-900 group-hover:text-primary">
+                  {product.title}
+                </h3>
+                <p className="mt-1 text-sm text-gray-500 line-clamp-2">
+                  {product.description || "No description"}
+                </p>
+                <p className="mt-2 font-semibold text-primary">
+                  {product.priceRange?.minVariantPrice?.amount}{" "}
+                  {product.priceRange?.minVariantPrice?.currencyCode}
+                </p>
+              </Link>
+            ))
+          )}
+        </div>
+      </section>
+      {/* Categories Section */}
+      <section>
+        <h2 className="mb-8 text-2xl font-bold text-gray-900">
+          Shop by Category
+        </h2>
+        <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
+          {categoryRoots.length > 0
+            ? categoryRoots.map((category) => (
+                <Link
+                  key={category.id}
+                  href={`/categories/${category.slug}`}
+                  className="group rounded-lg border border-gray-200 p-6 text-center transition hover:border-primary hover:shadow-md"
+                >
+                  <div className="mb-2 text-3xl">🛍️</div>
+                  <span className="font-medium text-gray-700 group-hover:text-primary">
+                    {category.name}
+                  </span>
+                </Link>
+              ))
+            : ["Electronics", "Clothing", "Home & Garden", "Sports"].map(
+                (category) => (
+                  <Link
+                    key={category}
+                    href={`/collections/${category
+                      .toLowerCase()
+                      .replace(/ & /g, "-")}`}
+                    className="group rounded-lg border border-gray-200 p-6 text-center transition hover:border-primary hover:shadow-md"
+                  >
+                    <div className="mb-2 text-3xl">🛍️</div>
+                    <span className="font-medium text-gray-700 group-hover:text-primary">
+                      {category}
+                    </span>
+                  </Link>
+                )
+              )}
+        </div>
+      </section>
+    </div>
+  );
+}

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

@@ -0,0 +1,119 @@
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { useProduct } from "@doswiftly/commerce-sdk/graphql/server";
+import { ProductActions } from "@/components/commerce/product-actions";
+interface ProductPageProps {
+  params: Promise<{ slug: string }>;
+}
+interface ProductImage {
+  id?: string | null;
+  url: string;
+  altText?: string | null;
+}
+export default async function ProductPage({ params }: ProductPageProps) {
+  const { slug } = await params;
+  // Fetch product - normalized (direct object)
+  const { product } = await useProduct({ handle: slug });
+  if (!product) {
+    notFound();
+  }
+  return (
+    <div className="container mx-auto px-4 py-8">
+      {/* Breadcrumb */}
+      <nav className="mb-8 text-sm text-gray-500">
+        <Link href="/" className="hover:text-primary">
+          Home
+        </Link>
+        <span className="mx-2">/</span>
+        <Link href="/products" className="hover:text-primary">
+          Products
+        </Link>
+        <span className="mx-2">/</span>
+        <span className="text-gray-900">{product.title}</span>
+      </nav>
+      <div className="grid gap-12 lg:grid-cols-2">
+        {/* Product Images */}
+        <div className="space-y-4">
+          <div className="aspect-square overflow-hidden rounded-lg bg-gray-100">
+            {product.featuredImage?.url ? (
+              <img
+                src={product.featuredImage.url}
+                alt={product.featuredImage.altText || product.title}
+                className="h-full w-full object-cover"
+              />
+            ) : (
+              <div className="flex h-full items-center justify-center text-gray-400">
+                Product Image
+              </div>
+            )}
+          </div>
+          <div className="grid grid-cols-4 gap-4">
+            {product.images
+              ?.slice(0, 4)
+              .map((image: ProductImage, i: number) => (
+                <button
+                  key={image.id || i}
+                  className="aspect-square overflow-hidden rounded-lg bg-gray-100"
+                >
+                  <img
+                    src={image.url}
+                    alt={image.altText || `Image ${i + 1}`}
+                    className="h-full w-full object-cover"
+                  />
+                </button>
+              ))}
+          </div>
+        </div>
+        {/* Product Info */}
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900">{product.title}</h1>
+          <p className="mt-6 text-gray-600">
+            {product.description || "No description available"}
+          </p>
+          {/* Variant Selection, Quantity & Add to Cart */}
+          <div className="mt-8">
+            <ProductActions
+              variants={product.variants || []}
+              productId={product.id}
+            />
+          </div>
+          {/* Product Details */}
+          <div className="mt-12 border-t border-gray-200 pt-8">
+            <h2 className="text-lg font-semibold text-gray-900">
+              Product Details
+            </h2>
+            <dl className="mt-4 space-y-4 text-sm">
+              {product.vendor && (
+                <div className="flex justify-between">
+                  <dt className="text-gray-500">Vendor</dt>
+                  <dd className="text-gray-900">{product.vendor}</dd>
+                </div>
+              )}
+              {product.productType && (
+                <div className="flex justify-between">
+                  <dt className="text-gray-500">Type</dt>
+                  <dd className="text-gray-900">{product.productType}</dd>
+                </div>
+              )}
+              <div className="flex justify-between">
+                <dt className="text-gray-500">Handle</dt>
+                <dd className="text-gray-900">{product.handle}</dd>
+              </div>
+            </dl>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,107 @@
+import Link from "next/link";
+import {
+  useProducts,
+  useCategories,
+} from "@doswiftly/commerce-sdk/graphql/server";
+import { ProductSortKeys } from "@doswiftly/commerce-sdk/graphql";
+import { ProductFilters } from "@/components/commerce/product-filters";
+import { Pagination } from "@/components/commerce/pagination";
+interface ProductsPageProps {
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}
+export default async function ProductsPage({
+  searchParams,
+}: ProductsPageProps) {
+  // Parse search params (Next.js 15 requires await)
+  const params = await searchParams;
+  const cursor = params.after as string | undefined;
+  const limit = 12;
+  const sortKey =
+    (params.sort as keyof typeof ProductSortKeys) || ProductSortKeys.CreatedAt;
+  const query = params.q as string | undefined;
+  const category = params.category as string | undefined;
+  // Build query string for category filtering
+  const searchQuery = category ? `category:${category}` : query;
+  // Fetch products
+  const { products, pageInfo } = await useProducts({
+    first: limit,
+    after: cursor || undefined,
+    query: searchQuery || undefined,
+    sortKey: ProductSortKeys[sortKey as keyof typeof ProductSortKeys],
+    reverse: params.order === "desc",
+  });
+  // Fetch categories (roots are the top-level categories)
+  const { categories } = await useCategories();
+  // Calculate total (approximation since GraphQL uses cursor pagination)
+  const hasMore = pageInfo?.hasNextPage ?? false;
+  return (
+    <div className="container mx-auto px-4 py-8">
+      {/* Page Header */}
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-gray-900">All Products</h1>
+        <p className="mt-2 text-gray-600">
+          Browse our complete collection of products
+        </p>
+      </div>
+      {/* Filters & Sort */}
+      <ProductFilters categories={categories} />
+      {/* Products Grid */}
+      <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+        {products.length === 0 ? (
+          <div className="col-span-full py-12 text-center text-gray-500">
+            No products found
+          </div>
+        ) : (
+          products.map((product) => (
+            <Link
+              key={product.id}
+              href={`/products/${product.handle}`}
+              className="group card transition hover:shadow-lg"
+            >
+              <div className="mb-4 aspect-square overflow-hidden rounded-lg bg-gray-100">
+                {product.featuredImage?.url ? (
+                  <img
+                    src={product.featuredImage.url}
+                    alt={product.featuredImage.altText || product.title}
+                    className="h-full w-full object-cover"
+                  />
+                ) : (
+                  <div className="flex h-full items-center justify-center text-gray-400">
+                    {product.title}
+                  </div>
+                )}
+              </div>
+              <h3 className="font-medium text-gray-900 group-hover:text-primary">
+                {product.title}
+              </h3>
+              <p className="mt-1 line-clamp-2 text-sm text-gray-500">
+                {product.description || "No description"}
+              </p>
+              <p className="mt-2 font-semibold text-primary">
+                {product.priceRange?.minVariantPrice?.amount}{" "}
+                {product.priceRange?.minVariantPrice?.currencyCode}
+              </p>
+            </Link>
+          ))
+        )}
+      </div>
+      {/* Pagination */}
+      <Pagination
+        hasMore={hasMore}
+        endCursor={pageInfo?.endCursor}
+        currentCursor={cursor}
+        totalShown={products.length}
+      />
+    </div>
+  );
+}

package/templates/storefront-nextjs/app/search/page.tsx ADDED Viewed

@@ -0,0 +1,127 @@
+import Link from "next/link";
+import { useProducts } from "@doswiftly/commerce-sdk/graphql/server";
+import { SearchInput } from "@/components/commerce/search-input";
+import { Pagination } from "@/components/commerce/pagination";
+interface SearchPageProps {
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}
+export default async function SearchPage({ searchParams }: SearchPageProps) {
+  const params = await searchParams;
+  const query = (params.q as string) || "";
+  const cursor = params.after as string | undefined;
+  const limit = 12;
+  // Fetch search results
+  const result = query
+    ? await useProducts({
+        first: limit,
+        after: cursor || undefined,
+        query: query,
+      })
+    : null;
+  const products = result?.products ?? [];
+  const pageInfo = result?.pageInfo ?? null;
+  const hasMore = pageInfo?.hasNextPage ?? false;
+  return (
+    <div className="container mx-auto px-4 py-8">
+      {/* Search Header */}
+      <div className="mb-8">
+        <h1 className="mb-4 text-3xl font-bold text-gray-900">Search</h1>
+        <div className="max-w-xl">
+          <SearchInput placeholder="Search products..." />
+        </div>
+      </div>
+      {/* Results */}
+      {query ? (
+        <>
+          <p className="mb-6 text-gray-600">
+            {products.length > 0 ? (
+              <>
+                Showing results for &quot;<strong>{query}</strong>&quot;
+              </>
+            ) : (
+              <>
+                No results found for &quot;<strong>{query}</strong>&quot;
+              </>
+            )}
+          </p>
+          {products.length > 0 ? (
+            <>
+              {/* Products Grid */}
+              <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+                {products.map((product) => (
+                  <Link
+                    key={product.id}
+                    href={`/products/${product.handle}`}
+                    className="group card transition hover:shadow-lg"
+                  >
+                    <div className="mb-4 aspect-square overflow-hidden rounded-lg bg-gray-100">
+                      {product.featuredImage?.url ? (
+                        <img
+                          src={product.featuredImage.url}
+                          alt={product.featuredImage.altText || product.title}
+                          className="h-full w-full object-cover"
+                        />
+                      ) : (
+                        <div className="flex h-full items-center justify-center text-gray-400">
+                          {product.title}
+                        </div>
+                      )}
+                    </div>
+                    <h3 className="font-medium text-gray-900 group-hover:text-primary">
+                      {product.title}
+                    </h3>
+                    <p className="mt-1 line-clamp-2 text-sm text-gray-500">
+                      {product.description || "No description"}
+                    </p>
+                    <p className="mt-2 font-semibold text-primary">
+                      {product.priceRange?.minVariantPrice?.amount}{" "}
+                      {product.priceRange?.minVariantPrice?.currencyCode}
+                    </p>
+                  </Link>
+                ))}
+              </div>
+              {/* Pagination */}
+              <Pagination
+                hasMore={hasMore}
+                endCursor={pageInfo?.endCursor}
+                currentCursor={cursor}
+                totalShown={products.length}
+              />
+            </>
+          ) : (
+            <div className="py-16 text-center">
+              <div className="mb-4 text-6xl">🔍</div>
+              <h2 className="mb-2 text-xl font-semibold text-gray-900">
+                No products found
+              </h2>
+              <p className="mb-8 text-gray-600">
+                Try adjusting your search terms or browse our products.
+              </p>
+              <Link href="/products" className="btn btn-primary">
+                Browse Products
+              </Link>
+            </div>
+          )}
+        </>
+      ) : (
+        <div className="py-16 text-center">
+          <div className="mb-4 text-6xl">🔎</div>
+          <h2 className="mb-2 text-xl font-semibold text-gray-900">
+            Search for products
+          </h2>
+          <p className="text-gray-600">
+            Enter a search term above to find products.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}