@doswiftly/cli 0.1.1

package/templates/storefront-nextjs/lib/graphql-queries.ts

@@ -0,0 +1,629 @@
+/**
+ * @deprecated This file is DEPRECATED and will be removed in future versions.
+ *
+ * ⚠️ DO NOT USE - Use SDK factory instead!
+ *
+ * ## Migration Path:
+ *
+ * Instead of raw GraphQL queries, use the auto-generated SDK with factory:
+ *
+ * ```typescript
+ * import { createStorefrontSdkFromEnv } from "@doswiftly/commerce-sdk/graphql";
+ *
+ * const sdk = createStorefrontSdkFromEnv();
+ * const { products } = await sdk.Products({ first: 20 });
+ * ```
+ *
+ * ## Why migrate?
+ * - ✅ Full TypeScript type safety
+ * - ✅ Auto-generated from backend operations (SSOT)
+ * - ✅ Automatic header management (X-Shop-Slug, X-Preferred-Currency)
+ * - ✅ No manual GraphQL string maintenance
+ *
+ * ## Adding custom queries:
+ * See: packages/@doswiftly/commerce-sdk/CUSTOM_OPERATIONS.md
+ *
+ * ---
+ *
+ * Raw GraphQL Queries for Currency-enabled Storefront
+ *
+ * These queries work with the new price structure where:
+ * - `price` / `priceRange` = converted price (customer's preferred currency)
+ * - `originalPrice` / `originalPriceRange` = original price (shop's base currency)
+ *
+ * Usage: Send with `x-preferred-currency` header to get prices in desired currency.
+ *
+ * Types are imported from SDK (SSOT) - auto-generated from GraphQL schema.
+ */
+
+import type { PriceMoney, Money } from "@doswiftly/commerce-sdk/graphql";
+export type { PriceMoney, Money };
+
+// ============================================================================
+// FRAGMENTS
+// ============================================================================
+
+/**
+ * PriceMoney fragment - full conversion transparency
+ */
+export const PRICE_MONEY_FRAGMENT = /* GraphQL */ `
+  fragment PriceMoneyFields on PriceMoney {
+    amount
+    currencyCode
+    baseAmount
+    baseCurrencyCode
+    exchangeRate
+    marginApplied
+    rateTimestamp
+    isConverted
+  }
+`;
+
+/**
+ * Money fragment - simple price (for original prices)
+ */
+export const MONEY_FRAGMENT = /* GraphQL */ `
+  fragment MoneyFields on Money {
+    amount
+    currencyCode
+  }
+`;
+
+/**
+ * Product variant with prices
+ */
+export const PRODUCT_VARIANT_FRAGMENT = /* GraphQL */ `
+  fragment ProductVariantFields on ProductVariant {
+    id
+    title
+    sku
+    available
+    quantityAvailable
+    price {
+      ...PriceMoneyFields
+    }
+    originalPrice {
+      ...MoneyFields
+    }
+    compareAtPrice {
+      ...PriceMoneyFields
+    }
+    originalCompareAtPrice {
+      ...MoneyFields
+    }
+    image {
+      id
+      url
+      altText
+    }
+    selectedOptions {
+      name
+      value
+    }
+  }
+`;
+
+/**
+ * Product with prices
+ */
+export const PRODUCT_FRAGMENT = /* GraphQL */ `
+  fragment ProductFields on Product {
+    id
+    title
+    handle
+    description
+    descriptionHtml
+    priceRange {
+      minVariantPrice {
+        ...PriceMoneyFields
+      }
+      maxVariantPrice {
+        ...PriceMoneyFields
+      }
+    }
+    originalPriceRange {
+      minVariantPrice {
+        ...MoneyFields
+      }
+      maxVariantPrice {
+        ...MoneyFields
+      }
+    }
+    featuredImage {
+      id
+      url
+      altText
+    }
+    images(first: 10) {
+      id
+      url
+      altText
+    }
+    totalInventory
+    vendor
+    productType
+    tags
+    createdAt
+    updatedAt
+  }
+`;
+
+// ============================================================================
+// QUERIES
+// ============================================================================
+
+/**
+ * Get shop info with currency configuration
+ */
+export const SHOP_QUERY = /* GraphQL */ `
+  query Shop {
+    shop {
+      id
+      name
+      description
+      currencyCode
+      supportedCurrencies
+      defaultLanguage
+      supportedLanguages
+      primaryDomain
+    }
+  }
+`;
+
+/**
+ * Get products list with converted prices
+ */
+export const PRODUCTS_QUERY = /* GraphQL */ `
+  ${PRICE_MONEY_FRAGMENT}
+  ${MONEY_FRAGMENT}
+
+  query Products(
+    $first: Int!
+    $after: String
+    $query: String
+    $sortKey: ProductSortKeys
+    $reverse: Boolean
+  ) {
+    products(
+      first: $first
+      after: $after
+      query: $query
+      sortKey: $sortKey
+      reverse: $reverse
+    ) {
+      edges {
+        node {
+          id
+          title
+          handle
+          description
+          priceRange {
+            minVariantPrice {
+              ...PriceMoneyFields
+            }
+            maxVariantPrice {
+              ...PriceMoneyFields
+            }
+          }
+          originalPriceRange {
+            minVariantPrice {
+              ...MoneyFields
+            }
+            maxVariantPrice {
+              ...MoneyFields
+            }
+          }
+          featuredImage {
+            id
+            url
+            altText
+          }
+          totalInventory
+          vendor
+          tags
+        }
+        cursor
+      }
+      pageInfo {
+        hasNextPage
+        hasPreviousPage
+        startCursor
+        endCursor
+      }
+      totalCount
+    }
+  }
+`;
+
+/**
+ * Get single product with all variants and prices
+ */
+export const PRODUCT_QUERY = /* GraphQL */ `
+  ${PRICE_MONEY_FRAGMENT}
+  ${MONEY_FRAGMENT}
+  ${PRODUCT_VARIANT_FRAGMENT}
+
+  query Product($id: ID, $handle: String) {
+    product(id: $id, handle: $handle) {
+      id
+      title
+      handle
+      description
+      descriptionHtml
+      priceRange {
+        minVariantPrice {
+          ...PriceMoneyFields
+        }
+        maxVariantPrice {
+          ...PriceMoneyFields
+        }
+      }
+      originalPriceRange {
+        minVariantPrice {
+          ...MoneyFields
+        }
+        maxVariantPrice {
+          ...MoneyFields
+        }
+      }
+      featuredImage {
+        id
+        url
+        altText
+      }
+      images(first: 20) {
+        id
+        url
+        altText
+      }
+      variants(first: 100) {
+        ...ProductVariantFields
+      }
+      totalInventory
+      vendor
+      productType
+      tags
+      seo {
+        title
+        description
+      }
+      createdAt
+      updatedAt
+    }
+  }
+`;
+
+/**
+ * Get cart with converted prices
+ */
+export const CART_QUERY = /* GraphQL */ `
+  ${PRICE_MONEY_FRAGMENT}
+  ${MONEY_FRAGMENT}
+
+  query Cart($id: ID!) {
+    cart(id: $id) {
+      id
+      checkoutUrl
+      totalQuantity
+      cost {
+        subtotalAmount {
+          ...PriceMoneyFields
+        }
+        totalAmount {
+          ...PriceMoneyFields
+        }
+        totalTaxAmount {
+          ...PriceMoneyFields
+        }
+      }
+      lines(first: 100) {
+        id
+        quantity
+        merchandise {
+          id
+          title
+          sku
+          price {
+            ...PriceMoneyFields
+          }
+          originalPrice {
+            ...MoneyFields
+          }
+          image {
+            url
+            altText
+          }
+        }
+        cost {
+          amountPerQuantity {
+            ...PriceMoneyFields
+          }
+          subtotalAmount {
+            ...PriceMoneyFields
+          }
+          totalAmount {
+            ...PriceMoneyFields
+          }
+        }
+      }
+      createdAt
+      updatedAt
+    }
+  }
+`;
+
+// ============================================================================
+// MUTATIONS
+// ============================================================================
+
+/**
+ * Create cart
+ */
+export const CART_CREATE_MUTATION = /* GraphQL */ `
+  ${PRICE_MONEY_FRAGMENT}
+  ${MONEY_FRAGMENT}
+
+  mutation CartCreate($input: CartCreateInput) {
+    cartCreate(input: $input) {
+      cart {
+        id
+        checkoutUrl
+        totalQuantity
+        cost {
+          totalAmount {
+            ...PriceMoneyFields
+          }
+        }
+        lines(first: 10) {
+          id
+          quantity
+          merchandise {
+            id
+            title
+            price {
+              ...PriceMoneyFields
+            }
+          }
+        }
+      }
+      userErrors {
+        message
+        field
+        code
+      }
+    }
+  }
+`;
+
+/**
+ * Add lines to cart
+ */
+export const CART_LINES_ADD_MUTATION = /* GraphQL */ `
+  ${PRICE_MONEY_FRAGMENT}
+
+  mutation CartLinesAdd($cartId: ID!, $lines: [CartLineInput!]!) {
+    cartLinesAdd(cartId: $cartId, lines: $lines) {
+      cart {
+        id
+        totalQuantity
+        cost {
+          totalAmount {
+            ...PriceMoneyFields
+          }
+        }
+      }
+      userErrors {
+        message
+        field
+        code
+      }
+    }
+  }
+`;
+
+/**
+ * Update cart lines
+ */
+export const CART_LINES_UPDATE_MUTATION = /* GraphQL */ `
+  ${PRICE_MONEY_FRAGMENT}
+
+  mutation CartLinesUpdate($cartId: ID!, $lines: [CartLineUpdateInput!]!) {
+    cartLinesUpdate(cartId: $cartId, lines: $lines) {
+      cart {
+        id
+        totalQuantity
+        cost {
+          totalAmount {
+            ...PriceMoneyFields
+          }
+        }
+      }
+      userErrors {
+        message
+        field
+        code
+      }
+    }
+  }
+`;
+
+/**
+ * Remove lines from cart
+ */
+export const CART_LINES_REMOVE_MUTATION = /* GraphQL */ `
+  ${PRICE_MONEY_FRAGMENT}
+
+  mutation CartLinesRemove($cartId: ID!, $lineIds: [ID!]!) {
+    cartLinesRemove(cartId: $cartId, lineIds: $lineIds) {
+      cart {
+        id
+        totalQuantity
+        cost {
+          totalAmount {
+            ...PriceMoneyFields
+          }
+        }
+      }
+      userErrors {
+        message
+        field
+        code
+      }
+    }
+  }
+`;
+
+// ============================================================================
+// FETCH HELPER
+// ============================================================================
+
+interface GraphQLResponse<T> {
+  data?: T;
+  errors?: Array<{ message: string }>;
+}
+
+/**
+ * Execute GraphQL query with currency header
+ *
+ * Note: For most use cases, prefer SDK hooks (useProducts, etc.)
+ * which automatically normalize responses.
+ *
+ * @example
+ * ```typescript
+ * const data = await fetchGraphQL(PRODUCTS_QUERY, { first: 10 }, "EUR");
+ * console.log(data.products.edges); // Raw GraphQL structure
+ * ```
+ */
+export async function fetchGraphQL<T = any>(
+  query: string,
+  variables: Record<string, any> = {},
+  preferredCurrency?: string
+): Promise<T> {
+  const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000";
+  const shopSlug = process.env.NEXT_PUBLIC_SHOP_SLUG || "demo-shop";
+
+  const headers: Record<string, string> = {
+    "Content-Type": "application/json",
+    "x-shop-slug": shopSlug,
+  };
+
+  if (preferredCurrency) {
+    headers["x-preferred-currency"] = preferredCurrency;
+  }
+
+  const response = await fetch(`${apiUrl}/storefront/graphql`, {
+    method: "POST",
+    headers,
+    body: JSON.stringify({ query, variables }),
+    cache: "no-store", // For dynamic pricing
+  });
+
+  if (!response.ok) {
+    throw new Error(
+      `GraphQL request failed: ${response.status} ${response.statusText}`
+    );
+  }
+
+  const json: GraphQLResponse<T> = await response.json();
+
+  if (json.errors?.length) {
+    throw new Error(
+      `GraphQL errors: ${json.errors.map((e) => e.message).join(", ")}`
+    );
+  }
+
+  return json.data as T;
+}
+
+// ============================================================================
+// TYPED FETCH FUNCTIONS
+// ============================================================================
+
+export interface ShopData {
+  shop: {
+    id: string;
+    name: string;
+    description?: string;
+    currencyCode: string;
+    supportedCurrencies: string[];
+    defaultLanguage: string;
+    supportedLanguages: string[];
+    primaryDomain?: string;
+  };
+}
+
+export interface ProductsData {
+  products: {
+    edges: Array<{
+      node: {
+        id: string;
+        title: string;
+        handle: string;
+        description?: string;
+        priceRange: {
+          minVariantPrice: PriceMoney;
+          maxVariantPrice: PriceMoney;
+        };
+        originalPriceRange?: {
+          minVariantPrice: Money;
+          maxVariantPrice: Money;
+        };
+        featuredImage?: {
+          id: string;
+          url: string;
+          altText?: string;
+        };
+        totalInventory?: number;
+        vendor?: string;
+        tags: string[];
+      };
+      cursor: string;
+    }>;
+    pageInfo: {
+      hasNextPage: boolean;
+      hasPreviousPage: boolean;
+      startCursor?: string;
+      endCursor?: string;
+    };
+    totalCount: number;
+  };
+}
+
+// PriceMoney and Money types are imported from SDK at the top of this file
+
+/**
+ * Fetch shop info
+ */
+export async function getShop(
+  preferredCurrency?: string
+): Promise<ShopData["shop"]> {
+  const data = await fetchGraphQL<ShopData>(SHOP_QUERY, {}, preferredCurrency);
+  return data.shop;
+}
+
+/**
+ * Fetch products with pagination
+ */
+export async function getProducts(
+  params: {
+    first?: number;
+    after?: string;
+    query?: string;
+    sortKey?: string;
+    reverse?: boolean;
+  } = {},
+  preferredCurrency?: string
+): Promise<ProductsData["products"]> {
+  const data = await fetchGraphQL<ProductsData>(
+    PRODUCTS_QUERY,
+    {
+      first: params.first ?? 20,
+      after: params.after,
+      query: params.query,
+      sortKey: params.sortKey,
+      reverse: params.reverse,
+    },
+    preferredCurrency
+  );
+  return data.products;
+}

package/templates/storefront-nextjs/lib/hooks.ts

@@ -0,0 +1,30 @@
+import { useState, useEffect } from "react";
+
+/**
+ * useDebouncedValue - Debounce a value
+ *
+ * @param value - Value to debounce
+ * @param delay - Delay in ms (default: 300)
+ * @returns Debounced value
+ *
+ * @example
+ * ```tsx
+ * const [query, setQuery] = useState("");
+ * const debouncedQuery = useDebouncedValue(query, 300);
+ *
+ * // debouncedQuery updates 300ms after query stops changing
+ * ```
+ */
+export function useDebouncedValue<T>(value: T, delay = 300): T {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+
+  return debouncedValue;
+}