@vendure-platform/create 0.5.0 → 0.5.2

package/dist/assets/storefront/components.json

@@ -1,22 +1,22 @@
 {
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": true,
-  "tsx": true,
-  "tailwind": {
-    "config": "",
-    "css": "src/app/globals.css",
-    "baseColor": "slate",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "iconLibrary": "lucide",
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  },
-  "registries": {}
+    "$schema": "https://ui.shadcn.com/schema.json",
+    "style": "new-york",
+    "rsc": true,
+    "tsx": true,
+    "tailwind": {
+        "config": "",
+        "css": "src/app/globals.css",
+        "baseColor": "slate",
+        "cssVariables": true,
+        "prefix": ""
+    },
+    "iconLibrary": "lucide",
+    "aliases": {
+        "components": "@/components",
+        "utils": "@/lib/utils",
+        "ui": "@/components/ui",
+        "lib": "@/lib",
+        "hooks": "@/hooks"
+    },
+    "registries": {}
 }

package/dist/assets/storefront/eslint.config.mjs

@@ -1,21 +1,21 @@
-import { defineConfig, globalIgnores } from "eslint/config";
-import nextVitals from "eslint-config-next/core-web-vitals";
-import nextTs from "eslint-config-next/typescript";
+import nextVitals from 'eslint-config-next/core-web-vitals';
+import nextTs from 'eslint-config-next/typescript';
+import { defineConfig, globalIgnores } from 'eslint/config';
 
 const eslintConfig = defineConfig([
     ...nextVitals,
     ...nextTs,
-    globalIgnores([".next/**", "out/**", "build/**", "next-env.d.ts"]),
+    globalIgnores(['.next/**', 'out/**', 'build/**', 'next-env.d.ts']),
     {
         // Relax some rules for the starter code
         rules: {
-            "@typescript-eslint/no-explicit-any": "warn",
-            "@typescript-eslint/no-unused-vars": "warn",
-            "react/no-unescaped-entities": "warn",
+            '@typescript-eslint/no-explicit-any': 'warn',
+            '@typescript-eslint/no-unused-vars': 'warn',
+            'react/no-unescaped-entities': 'warn',
             // These React 19 compiler rules are quite strict for the starter code
-            "react-hooks/set-state-in-effect": "warn",
-            "react-hooks/purity": "warn",
-            "react-hooks/error-boundaries": "warn",
+            'react-hooks/set-state-in-effect': 'warn',
+            'react-hooks/purity': 'warn',
+            'react-hooks/error-boundaries': 'warn',
         },
     },
 ]);

package/dist/assets/storefront/graphql.config.yml

@@ -1,2 +1,2 @@
 schema:
-  - http://localhost:3500/shop-api
+    - http://localhost:3500/shop-api

package/dist/assets/storefront/next.config.ts

@@ -1,6 +1,5 @@
-import {NextConfig} from 'next';
+import { NextConfig } from 'next';
 import createNextIntlPlugin from 'next-intl/plugin';
-
 // Derive URLs from port variables if not explicitly set
 const vendurePort = process.env.VENDURE_PORT ?? '3500';
 const storefrontPort = process.env.STOREFRONT_PORT ?? '3001';
@@ -38,7 +37,9 @@ const nextConfig: NextConfig = {
         // Derive API URL from PORT if not explicitly set
         VENDURE_SHOP_API_URL: process.env.VENDURE_SHOP_API_URL ?? `http://localhost:${vendurePort}/shop-api`,
         NEXT_PUBLIC_SITE_URL: process.env.NEXT_PUBLIC_SITE_URL ?? `http://localhost:${storefrontPort}`,
-        ...(process.env.VENDURE_CHANNEL_TOKEN ? { VENDURE_CHANNEL_TOKEN: process.env.VENDURE_CHANNEL_TOKEN } : {}),
+        ...(process.env.VENDURE_CHANNEL_TOKEN
+            ? { VENDURE_CHANNEL_TOKEN: process.env.VENDURE_CHANNEL_TOKEN }
+            : {}),
         REVALIDATION_SECRET: process.env.REVALIDATION_SECRET,
         NEXT_PUBLIC_SCENARIO: process.env.NEXT_PUBLIC_SCENARIO ?? 'customer',
     },
@@ -53,4 +54,4 @@ const nextConfig: NextConfig = {
     },
 };
 
-export default withNextIntl(nextConfig);
+export default withNextIntl(nextConfig);

package/dist/assets/storefront/package.json

@@ -37,7 +37,7 @@
         "@radix-ui/react-toggle": "^1.1.10",
         "@radix-ui/react-toggle-group": "^1.1.11",
         "@radix-ui/react-tooltip": "^1.2.8",
-        "@vendure-platform/storefront-client": "^0.5.0",
+        "@vendure-platform/storefront-client": "^0.5.2",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",

package/dist/assets/storefront/postcss.config.mjs

@@ -1,5 +1,5 @@
 const config = {
-  plugins: ["@tailwindcss/postcss"],
+    plugins: ['@tailwindcss/postcss'],
 };
 
 export default config;

package/dist/assets/storefront/src/app/[locale]/(catalog)/catalog/page.tsx

@@ -1,17 +1,19 @@
-import type {Metadata} from 'next';
-import {getTranslations, setRequestLocale} from 'next-intl/server';
-import {ArrowRight} from 'lucide-react';
-import {Link} from '@/i18n/navigation';
-import {SITE_NAME, buildAlternates, buildCanonicalUrl} from '@/lib/metadata';
-import {getTopCollections} from '@/lib/vendure/cached';
-import {getActiveChannelToken} from '@/lib/channel-server';
-import {ShopByCategory} from '@/components/commerce/shop-by-category';
+import { ShopByCategory } from '@/components/commerce/shop-by-category';
+import { Link } from '@/i18n/navigation';
+import { getActiveChannelToken } from '@/lib/channel-server';
+import { SITE_NAME, buildAlternates, buildCanonicalUrl } from '@/lib/metadata';
+import { getTopCollections } from '@/lib/vendure/cached';
+import { ArrowRight } from 'lucide-react';
+import type { Metadata } from 'next';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 
 export async function generateMetadata({
     params,
-}: {params: Promise<{locale: string}>}): Promise<Metadata> {
-    const {locale} = await params;
-    const t = await getTranslations({locale, namespace: 'Catalog'});
+}: {
+    params: Promise<{ locale: string }>;
+}): Promise<Metadata> {
+    const { locale } = await params;
+    const t = await getTranslations({ locale, namespace: 'Catalog' });
     const title = t('pageTitle');
     const description = t('pageDescription');
     return {
@@ -27,10 +29,8 @@ export async function generateMetadata({
     };
 }
 
-export default async function CatalogPage({
-    params,
-}: {params: Promise<{locale: string}>}) {
-    const {locale} = await params;
+export default async function CatalogPage({ params }: { params: Promise<{ locale: string }> }) {
+    const { locale } = await params;
     setRequestLocale(locale);
     const channelToken = await getActiveChannelToken();
     const [collections, t] = await Promise.all([
@@ -41,12 +41,8 @@ export default async function CatalogPage({
     return (
         <div className="py-8">
             <header className="mb-8">
-                <h1 className="text-3xl md:text-4xl font-bold tracking-tight">
-                    {t('pageTitle')}
-                </h1>
-                <p className="mt-2 text-muted-foreground">
-                    {t('pageDescription')}
-                </p>
+                <h1 className="text-3xl md:text-4xl font-bold tracking-tight">{t('pageTitle')}</h1>
+                <p className="mt-2 text-muted-foreground">{t('pageDescription')}</p>
             </header>
 
             <ShopByCategory collections={collections} />

package/dist/assets/storefront/src/app/[locale]/(catalog)/collection/[slug]/page.tsx

@@ -1,38 +1,47 @@
-import type { Metadata } from 'next';
-import { Suspense } from 'react';
-import { publicClient } from '@/lib/vendure/api';
-import { getActiveChannelToken } from '@/lib/channel-server';
-import { SearchProductsQuery, GetCollectionProductsQuery } from '@/lib/vendure/queries';
 import { CatalogSearchBar } from '@/components/commerce/catalog-search-bar';
 import { CollectionHeroBanner } from '@/components/commerce/collection-hero-banner';
-import { SubcollectionTiles } from '@/components/commerce/subcollection-tiles';
-import { ProductGrid } from '@/components/commerce/product-grid';
 import { FacetFilters } from '@/components/commerce/facet-filters';
-import { ProductGridSkeleton } from '@/components/shared/product-grid-skeleton';
+import { ProductGrid } from '@/components/commerce/product-grid';
+import { SubcollectionTiles } from '@/components/commerce/subcollection-tiles';
 import { Breadcrumbs } from '@/components/shared/breadcrumbs';
 import { CatalogSidebarSkeleton } from '@/components/shared/catalog-sidebar-skeleton';
-import { buildSearchInput, getCurrentPage } from '@/lib/search-helpers';
-import { cacheLife, cacheTag } from 'next/cache';
-import { getTranslations, setRequestLocale } from 'next-intl/server';
+import { ProductGridSkeleton } from '@/components/shared/product-grid-skeleton';
+import { getActiveChannelToken } from '@/lib/channel-server';
 import {
-    SITE_NAME,
-    truncateDescription,
-    buildCanonicalUrl,
     buildAlternates,
+    buildCanonicalUrl,
     buildOgImages,
+    SITE_NAME,
+    truncateDescription,
 } from '@/lib/metadata';
+import { buildSearchInput, getCurrentPage } from '@/lib/search-helpers';
+import { publicClient } from '@/lib/vendure/api';
+import { GetCollectionProductsQuery, SearchProductsQuery } from '@/lib/vendure/queries';
+import type { Metadata } from 'next';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
+import { cacheLife, cacheTag } from 'next/cache';
+import { Suspense } from 'react';
 
-async function getCollectionProducts(slug: string, locale: string, searchParams: { [key: string]: string | string[] | undefined }, channelToken?: string) {
+async function getCollectionProducts(
+    slug: string,
+    locale: string,
+    searchParams: { [key: string]: string | string[] | undefined },
+    channelToken?: string,
+) {
     'use cache';
     cacheLife('hours');
     cacheTag(`collection-${slug}-${locale}${channelToken ? `-${channelToken}` : ''}`);
 
-    const [result, error] = await publicClient.query(SearchProductsQuery, {
-        input: buildSearchInput({
-            searchParams,
-            collectionSlug: slug
-        })
-    }, {languageCode: locale, ...(channelToken ? {channelToken} : {})});
+    const [result, error] = await publicClient.query(
+        SearchProductsQuery,
+        {
+            input: buildSearchInput({
+                searchParams,
+                collectionSlug: slug,
+            }),
+        },
+        { languageCode: locale, ...(channelToken ? { channelToken } : {}) },
+    );
     if (error) return undefined;
     return result;
 }
@@ -42,22 +51,28 @@ async function getCollectionMetadata(slug: string, locale: string, channelToken?
     cacheLife('hours');
     cacheTag(`collection-meta-${slug}-${locale}${channelToken ? `-${channelToken}` : ''}`);
 
-    const [result, error] = await publicClient.query(GetCollectionProductsQuery, {
-        slug,
-        input: { take: 0, collectionSlug: slug, groupByProduct: true },
-    }, {languageCode: locale, ...(channelToken ? {channelToken} : {})});
+    const [result, error] = await publicClient.query(
+        GetCollectionProductsQuery,
+        {
+            slug,
+            input: { take: 0, collectionSlug: slug, groupByProduct: true },
+        },
+        { languageCode: locale, ...(channelToken ? { channelToken } : {}) },
+    );
     if (error) return undefined;
     return result;
 }
 
 export async function generateMetadata({
     params,
-}: { params: Promise<{ locale: string; slug: string }> }): Promise<Metadata> {
+}: {
+    params: Promise<{ locale: string; slug: string }>;
+}): Promise<Metadata> {
     const { locale, slug } = await params;
     const channelToken = await getActiveChannelToken();
     const [result, t] = await Promise.all([
         getCollectionMetadata(slug, locale, channelToken),
-        getTranslations({locale, namespace: 'Product'}),
+        getTranslations({ locale, namespace: 'Product' }),
     ]);
     if (!result) {
         return { title: t('home') };
@@ -88,9 +103,7 @@ export async function generateMetadata({
             card: 'summary_large_image',
             title: collection.name,
             description,
-            images: collection.featuredAsset?.preview
-                ? [collection.featuredAsset.preview]
-                : undefined,
+            images: collection.featuredAsset?.preview ? [collection.featuredAsset.preview] : undefined,
         },
     };
 }
@@ -109,7 +122,13 @@ export default async function CollectionPage({
     );
 }
 
-async function CollectionContent({ paramsPromise, searchParamsPromise }: { paramsPromise: Promise<{ locale: string; slug: string }>; searchParamsPromise: Promise<{ [key: string]: string | string[] | undefined }> }) {
+async function CollectionContent({
+    paramsPromise,
+    searchParamsPromise,
+}: {
+    paramsPromise: Promise<{ locale: string; slug: string }>;
+    searchParamsPromise: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
     const { locale, slug } = await paramsPromise;
     setRequestLocale(locale);
     const searchParams = await searchParamsPromise;
@@ -122,13 +141,12 @@ async function CollectionContent({ paramsPromise, searchParamsPromise }: { param
     ]);
 
     const collection = metaResult?.data?.collection;
-    const breadcrumbs = collection?.breadcrumbs
-        ?.filter((b) => b.slug !== '__root_collection__')
-        .map((b, i, arr) =>
-            i === arr.length - 1
-                ? { name: b.name }
-                : { name: b.name, href: `/collection/${b.slug}` },
-        ) ?? [];
+    const breadcrumbs =
+        collection?.breadcrumbs
+            ?.filter((b) => b.slug !== '__root_collection__')
+            .map((b, i, arr) =>
+                i === arr.length - 1 ? { name: b.name } : { name: b.name, href: `/collection/${b.slug}` },
+            ) ?? [];
 
     if (!productData) {
         return (
@@ -165,11 +183,15 @@ async function CollectionContent({ paramsPromise, searchParamsPromise }: { param
                     <Suspense>
                         <CatalogSearchBar />
                     </Suspense>
-                    {children.length > 0 && (
-                        <SubcollectionTiles collections={children} />
-                    )}
+                    {children.length > 0 && <SubcollectionTiles collections={children} />}
                     <Suspense fallback={<ProductGridSkeleton />}>
-                        <ProductGrid productDataPromise={productDataPromise} currentPage={page} take={12} view={searchParams.view as string} emptyMessage={t('noCategoryProducts')} />
+                        <ProductGrid
+                            productDataPromise={productDataPromise}
+                            currentPage={page}
+                            take={12}
+                            view={searchParams.view as string}
+                            emptyMessage={t('noCategoryProducts')}
+                        />
                     </Suspense>
                 </div>
             </div>

package/dist/assets/storefront/src/app/[locale]/(catalog)/layout.tsx

@@ -1,9 +1,5 @@
 import { ReactNode } from 'react';
 
 export default function CatalogLayout({ children }: { children: ReactNode }) {
-    return (
-        <div className="container mx-auto px-4 pt-[var(--page-top-offset)]">
-            {children}
-        </div>
-    );
+    return <div className="container mx-auto px-4 pt-[var(--page-top-offset)]">{children}</div>;
 }

package/dist/assets/storefront/src/app/[locale]/(catalog)/product/[slug]/actions.ts

@@ -1,66 +1,67 @@
 'use server';
 
+import { setAuthToken } from '@/lib/auth';
+import { cartGuard } from '@/lib/cart-guard';
+import { getGuardError } from '@/lib/cart-guard-utils';
+import { normalizeQuantity } from '@/lib/quantity';
 import { client } from '@/lib/vendure/api';
 import {
-    AddToCartMutation,
-    AddGiftCardToOrderMutation,
     AddConfigurationToOrderMutation,
+    AddGiftCardToOrderMutation,
+    AddToCartMutation,
     UpdateConfigurationOnOrderMutation,
 } from '@/lib/vendure/mutations';
 import {
-    GetProductDetailQuery,
     EvaluateConfigurationQuery,
     GetActiveOrderConfigurationsQuery,
+    GetProductDetailQuery,
     type ActiveOrderConfiguration,
 } from '@/lib/vendure/queries';
 import { updateTag } from 'next/cache';
-import { setAuthToken } from '@/lib/auth';
-import { normalizeQuantity } from '@/lib/quantity';
-import { cartGuard } from '@/lib/cart-guard';
-import { getGuardError } from '@/lib/cart-guard-utils';
 
 export async function getProductBySlug(slug: string) {
-  const [result, error] = await client.query(GetProductDetailQuery, { slug });
-  if (error) throw error;
-  return result.data.product;
+    const [result, error] = await client.query(GetProductDetailQuery, { slug });
+    if (error) throw error;
+    return result.data.product;
 }
 
 export async function addToCart(variantId: string, quantity: number = 1, packagingUnitId?: string) {
-  const guard = await cartGuard();
-  const guardError = getGuardError(guard);
-  if (guardError) {
-    return { success: false, error: guardError };
-  }
+    const guard = await cartGuard();
+    const guardError = getGuardError(guard);
+    if (guardError) {
+        return { success: false, error: guardError };
+    }
 
-  const nextQuantity = normalizeQuantity(quantity);
+    const nextQuantity = normalizeQuantity(quantity);
 
-  const customFields = packagingUnitId ? { packagingUnitId } : undefined;
-  const [result, error] = await client.mutate(
-    AddToCartMutation,
-    { variantId, quantity: nextQuantity, customFields },
-  );
+    const customFields = packagingUnitId ? { packagingUnitId } : undefined;
+    const [result, error] = await client.mutate(AddToCartMutation, {
+        variantId,
+        quantity: nextQuantity,
+        customFields,
+    });
 
-  if (error) {
-    return { success: false, error: 'Failed to add item to cart' };
-  }
+    if (error) {
+        return { success: false, error: 'Failed to add item to cart' };
+    }
 
-  if (result.authToken) {
-    await setAuthToken(result.authToken);
-  }
+    if (result.authToken) {
+        await setAuthToken(result.authToken);
+    }
 
-  if (result.data.addItemToOrder.__typename === 'Order') {
-    updateTag('cart');
-    updateTag('active-order');
-    return {
-      success: true,
-      order: result.data.addItemToOrder,
-      requiresReapproval: guard.requiresReapproval,
-    };
-  } else {
-    const data = result.data.addItemToOrder;
-    const error = 'interceptorError' in data ? data.interceptorError : data.message;
-    return { success: false, error };
-  }
+    if (result.data.addItemToOrder.__typename === 'Order') {
+        updateTag('cart');
+        updateTag('active-order');
+        return {
+            success: true,
+            order: result.data.addItemToOrder,
+            requiresReapproval: guard.requiresReapproval,
+        };
+    } else {
+        const data = result.data.addItemToOrder;
+        const error = 'interceptorError' in data ? data.interceptorError : data.message;
+        return { success: false, error };
+    }
 }
 
 export interface AddGiftCardInput {
@@ -79,19 +80,16 @@ export async function addGiftCardToCart(input: AddGiftCardInput) {
         return { error: guardError };
     }
 
-    const [result, error] = await client.mutate(
-        AddGiftCardToOrderMutation,
-        {
-            input: {
-                value: input.value,
-                templateId: input.templateId,
-                senderName: input.senderName || undefined,
-                recipientEmailAddress: input.recipientEmailAddress || undefined,
-                message: input.message || undefined,
-                deliveryDate: input.deliveryDate ? new Date(input.deliveryDate).toISOString() : undefined,
-            },
+    const [result, error] = await client.mutate(AddGiftCardToOrderMutation, {
+        input: {
+            value: input.value,
+            templateId: input.templateId,
+            senderName: input.senderName || undefined,
+            recipientEmailAddress: input.recipientEmailAddress || undefined,
+            message: input.message || undefined,
+            deliveryDate: input.deliveryDate ? new Date(input.deliveryDate).toISOString() : undefined,
         },
-    );
+    });
 
     if (error) {
         console.error('[addGiftCardToCart]', error);
@@ -114,9 +112,13 @@ export async function addGiftCardToCart(input: AddGiftCardInput) {
 export async function evaluateConfiguration(systemId: string, values: { fieldRef: string; value: string }[]) {
     const { getLocale } = await import('next-intl/server');
     const locale = await getLocale();
-    const [result, error] = await client.query(EvaluateConfigurationQuery, {
-        input: { systemId, values },
-    }, { languageCode: locale });
+    const [result, error] = await client.query(
+        EvaluateConfigurationQuery,
+        {
+            input: { systemId, values },
+        },
+        { languageCode: locale },
+    );
     if (error) {
         return { error: error.message || 'Failed to evaluate configuration' };
     }
@@ -135,7 +137,7 @@ export async function getActiveOrderConfiguration(
     const [result, error] = await client.query(GetActiveOrderConfigurationsQuery, undefined);
     if (error) return null;
     return (
-        result.data.activeOrder?.productConfigurations?.find(c => c.id === productConfigurationId) ?? null
+        result.data.activeOrder?.productConfigurations?.find((c) => c.id === productConfigurationId) ?? null
     );
 }
 
@@ -150,10 +152,9 @@ export async function updateConfigurationOnOrder(
         return { success: false, error: guardError };
     }
 
-    const [result, error] = await client.mutate(
-        UpdateConfigurationOnOrderMutation,
-        { input: { productConfigurationId, values, name: name || undefined } },
-    );
+    const [result, error] = await client.mutate(UpdateConfigurationOnOrderMutation, {
+        input: { productConfigurationId, values, name: name || undefined },
+    });
 
     if (error) {
         return { success: false, error: error.message || 'Failed to update configuration' };
@@ -168,17 +169,20 @@ export async function updateConfigurationOnOrder(
     return { success: true };
 }
 
-export async function addConfigurationToOrder(systemId: string, values: { fieldRef: string; value: string }[], name?: string) {
+export async function addConfigurationToOrder(
+    systemId: string,
+    values: { fieldRef: string; value: string }[],
+    name?: string,
+) {
     const guard = await cartGuard();
     const guardError = getGuardError(guard);
     if (guardError) {
         return { success: false, error: guardError };
     }
 
-    const [result, error] = await client.mutate(
-        AddConfigurationToOrderMutation,
-        { input: { systemId, values, name: name || undefined } },
-    );
+    const [result, error] = await client.mutate(AddConfigurationToOrderMutation, {
+        input: { systemId, values, name: name || undefined },
+    });
 
     if (error) {
         return { success: false, error: error.message || 'Failed to add configuration to order' };