@vendure-platform/create 0.4.0 → 0.5.1

package/dist/assets/storefront/src/components/commerce/facet-filters.tsx

@@ -1,32 +1,21 @@
 'use client';
 
-import { use, useState } from 'react';
-import { useTranslations } from 'next-intl';
-import { useSearchParams } from 'next/navigation';
-import { usePathname, useRouter } from '@/i18n/navigation';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
-import {
-    Accordion,
-    AccordionContent,
-    AccordionItem,
-    AccordionTrigger,
-} from '@/components/ui/accordion';
-import {
-    Sheet,
-    SheetContent,
-    SheetHeader,
-    SheetTitle,
-    SheetTrigger,
-} from '@/components/ui/sheet';
-import { SlidersHorizontal, Layers, ListTree, Tag } from 'lucide-react';
-import { type SearchProductsResult } from '@/lib/vendure/queries';
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
+import { Switch } from '@/components/ui/switch';
+import { usePathname, useRouter } from '@/i18n/navigation';
 import { RESERVED_PARAMS, STRUCTURAL_PARAMS } from '@/lib/search-helpers';
+import { type SearchProductsResult } from '@/lib/vendure/queries';
+import { Layers, ListTree, SlidersHorizontal, Tag } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useSearchParams } from 'next/navigation';
+import { use, useState } from 'react';
 import { ActiveFilters } from './active-filters';
 import { PriceRangeFilter } from './price-range-filter';
-import { Switch } from '@/components/ui/switch';
 
 const VISIBLE_COUNT = 6;
 
@@ -79,9 +68,9 @@ export function FacetFilters({ productDataPromise }: FacetFiltersProps) {
     const activeFilterCount =
         [...searchParams.entries()]
             .filter(([key]) => !RESERVED_PARAMS.has(key))
-            .reduce((n, [, v]) => n + v.split(',').length, 0)
-        + (searchParams.has('priceMin') || searchParams.has('priceMax') ? 1 : 0)
-        + (searchParams.get('inStock') === 'true' ? 1 : 0);
+            .reduce((n, [, v]) => n + v.split(',').length, 0) +
+        (searchParams.has('priceMin') || searchParams.has('priceMax') ? 1 : 0) +
+        (searchParams.get('inStock') === 'true' ? 1 : 0);
 
     const toggleFacet = (facetCode: string, valueCode: string) => {
         const params = new URLSearchParams(searchParams);
@@ -143,7 +132,9 @@ export function FacetFilters({ productDataPromise }: FacetFiltersProps) {
                     variant="ghost"
                     size="sm"
                     onClick={clearFilters}
-                    className={`h-7 text-xs text-muted-foreground hover:text-foreground ${!hasActiveFilters ? 'invisible' : ''}`}
+                    className={`h-7 text-xs text-muted-foreground hover:text-foreground ${
+                        !hasActiveFilters ? 'invisible' : ''
+                    }`}
                 >
                     {t('clearAll')}
                 </Button>
@@ -155,11 +146,7 @@ export function FacetFilters({ productDataPromise }: FacetFiltersProps) {
                 <Label htmlFor="in-stock-toggle" className="text-sm font-normal cursor-pointer">
                     {t('inStockOnly')}
                 </Label>
-                <Switch
-                    id="in-stock-toggle"
-                    checked={isInStock}
-                    onCheckedChange={toggleInStock}
-                />
+                <Switch id="in-stock-toggle" checked={isInStock} onCheckedChange={toggleInStock} />
             </div>
 
             <PriceRangeFilter min={prices.range.min} max={prices.range.max} />
@@ -167,9 +154,12 @@ export function FacetFilters({ productDataPromise }: FacetFiltersProps) {
             <Accordion type="multiple" defaultValue={defaultOpen}>
                 {facetGroups.map((facet) => {
                     const facetNameLower = facet.name.toLowerCase();
-                    const FacetIcon = facetNameLower.includes('subcategory') ? ListTree
-                        : facetNameLower.includes('category') ? Layers
-                        : facetNameLower.includes('brand') ? Tag
+                    const FacetIcon = facetNameLower.includes('subcategory')
+                        ? ListTree
+                        : facetNameLower.includes('category')
+                        ? Layers
+                        : facetNameLower.includes('brand')
+                        ? Tag
                         : SlidersHorizontal;
 
                     const selectedValues = searchParams.get(facet.code)?.split(',') ?? [];
@@ -200,9 +190,7 @@ export function FacetFilters({ productDataPromise }: FacetFiltersProps) {
     return (
         <>
             {/* Desktop: sticky sidebar */}
-            <div className="hidden lg:block sticky top-20">
-                {filterContent}
-            </div>
+            <div className="hidden lg:block sticky top-20">{filterContent}</div>
 
             {/* Mobile: sheet trigger */}
             <div className="lg:hidden">
@@ -212,9 +200,7 @@ export function FacetFilters({ productDataPromise }: FacetFiltersProps) {
                             <SlidersHorizontal className="h-4 w-4" />
                             {t('filtersButton')}
                             {hasActiveFilters && (
-                                <Badge className="h-5 min-w-5 px-1.5 text-[10px]">
-                                    {activeFilterCount}
-                                </Badge>
+                                <Badge className="h-5 min-w-5 px-1.5 text-[10px]">{activeFilterCount}</Badge>
                             )}
                         </Button>
                     </SheetTrigger>
@@ -261,12 +247,8 @@ function FacetValueList({
                             htmlFor={`facet-${facetCode}-${value.code}`}
                             className="text-sm font-normal cursor-pointer flex-1 flex items-center justify-between"
                         >
-                            <span className={isChecked ? 'text-foreground' : ''}>
-                                {value.name}
-                            </span>
-                            <span className="text-xs text-muted-foreground tabular-nums">
-                                {value.count}
-                            </span>
+                            <span className={isChecked ? 'text-foreground' : ''}>{value.name}</span>
+                            <span className="text-xs text-muted-foreground tabular-nums">{value.count}</span>
                         </Label>
                     </div>
                 );
@@ -276,9 +258,7 @@ function FacetValueList({
                     onClick={() => setExpanded(!expanded)}
                     className="text-xs text-primary hover:text-primary/80 pt-1"
                 >
-                    {expanded
-                        ? t('showLess')
-                        : t('moreCount', { count: values.length - VISIBLE_COUNT })}
+                    {expanded ? t('showLess') : t('moreCount', { count: values.length - VISIBLE_COUNT })}
                 </button>
             )}
         </div>

package/dist/assets/storefront/src/components/commerce/gift-card-pdp.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import { useState } from 'react';
-import { ProductImageCarousel } from './product-image-carousel';
-import { GiftCardProductInfo } from './gift-card-product-info';
 import type { AddGiftCardInput } from '@/app/[locale]/(catalog)/product/[slug]/actions';
 import type { GiftCardTemplate } from '@/lib/vendure/queries';
+import { useState } from 'react';
+import { GiftCardProductInfo } from './gift-card-product-info';
+import { ProductImageCarousel } from './product-image-carousel';
 
 interface GiftCardPdpProps {
     templates: GiftCardTemplate[];
@@ -15,7 +15,7 @@ interface GiftCardPdpProps {
 export function GiftCardPdp({ templates, currencyCode, addToCartAction }: GiftCardPdpProps) {
     const [selectedIndex, setSelectedIndex] = useState(0);
 
-    const carouselImages = templates.map(t => ({
+    const carouselImages = templates.map((t) => ({
         id: t.image.id,
         preview: t.image.preview,
         source: t.image.source,

package/dist/assets/storefront/src/components/commerce/gift-card-product-info.tsx

@@ -1,14 +1,14 @@
 'use client';
 
-import { useState, useTransition } from 'react';
-import { useTranslations, useLocale } from 'next-intl';
+import type { AddGiftCardInput } from '@/app/[locale]/(catalog)/product/[slug]/actions';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
-import { Loader2 } from 'lucide-react';
+import { Textarea } from '@/components/ui/textarea';
 import { useRouter } from '@/i18n/navigation';
-import type { AddGiftCardInput } from '@/app/[locale]/(catalog)/product/[slug]/actions';
+import { Loader2 } from 'lucide-react';
+import { useLocale, useTranslations } from 'next-intl';
+import { useState, useTransition } from 'react';
 
 interface GiftCardProductInfoProps {
     templates: Array<{ id: string; name: string }>;
@@ -31,11 +31,16 @@ export function GiftCardProductInfo({
 
     const selectedTemplate = templates[selectedTemplateIndex] ?? templates[0];
 
-    const currencySymbol = new Intl.NumberFormat(locale, { style: 'currency', currency: currencyCode })
-        .formatToParts(0).find(p => p.type === 'currency')?.value ?? currencyCode;
+    const currencySymbol =
+        new Intl.NumberFormat(locale, { style: 'currency', currency: currencyCode })
+            .formatToParts(0)
+            .find((p) => p.type === 'currency')?.value ?? currencyCode;
     // Zero-decimal currencies (JPY, KRW, etc.) don't need subunit conversion
-    const subunitFactor = new Intl.NumberFormat(locale, { style: 'currency', currency: currencyCode })
-        .resolvedOptions().maximumFractionDigits === 0 ? 1 : 100;
+    const subunitFactor =
+        new Intl.NumberFormat(locale, { style: 'currency', currency: currencyCode }).resolvedOptions()
+            .maximumFractionDigits === 0
+            ? 1
+            : 100;
 
     const handleSubmit = (formData: FormData) => {
         startTransition(async () => {
@@ -68,12 +73,12 @@ export function GiftCardProductInfo({
         <div>
             <h1 className="text-3xl font-bold mb-2">{t('purchaseTitle')}</h1>
             <p className="text-muted-foreground mb-6">
-                {t('template', {name: selectedTemplate?.name ?? ''})}
+                {t('template', { name: selectedTemplate?.name ?? '' })}
             </p>
 
             <form action={handleSubmit} className="space-y-4">
                 <div className="space-y-2">
-                    <Label htmlFor="value">{t('amountLabel', {symbol: currencySymbol})}</Label>
+                    <Label htmlFor="value">{t('amountLabel', { symbol: currencySymbol })}</Label>
                     <Input
                         id="value"
                         name="value"
@@ -87,11 +92,7 @@ export function GiftCardProductInfo({
 
                 <div className="space-y-2">
                     <Label htmlFor="senderName">{t('yourName')}</Label>
-                    <Input
-                        id="senderName"
-                        name="senderName"
-                        placeholder="John Doe"
-                    />
+                    <Input id="senderName" name="senderName" placeholder="John Doe" />
                 </div>
 
                 <div className="space-y-2">
@@ -106,26 +107,15 @@ export function GiftCardProductInfo({
 
                 <div className="space-y-2">
                     <Label htmlFor="message">{t('message')}</Label>
-                    <Textarea
-                        id="message"
-                        name="message"
-                        placeholder="Happy Birthday!"
-                        rows={3}
-                    />
+                    <Textarea id="message" name="message" placeholder="Happy Birthday!" rows={3} />
                 </div>
 
                 <div className="space-y-2">
                     <Label htmlFor="deliveryDate">{t('deliveryDate')}</Label>
-                    <Input
-                        id="deliveryDate"
-                        name="deliveryDate"
-                        type="date"
-                    />
+                    <Input id="deliveryDate" name="deliveryDate" type="date" />
                 </div>
 
-                {error && (
-                    <p className="text-sm text-destructive">{error}</p>
-                )}
+                {error && <p className="text-sm text-destructive">{error}</p>}
 
                 <Button type="submit" size="lg" className="w-full" disabled={isPending}>
                     {isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}