@vendure-platform/create 0.5.0 → 1.0.0-major.202609091053.0.0

package/dist/assets/storefront/src/components/layout/navbar/currency-picker.tsx

@@ -1,22 +1,22 @@
 'use client';
 
-import {useTransition} from 'react';
-import {DollarSign} from 'lucide-react';
-import {Button} from '@/components/ui/button';
+import { Button } from '@/components/ui/button';
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import {switchCurrency} from '@/lib/actions/switch-currency';
+import { switchCurrency } from '@/lib/actions/switch-currency';
+import { DollarSign } from 'lucide-react';
+import { useTransition } from 'react';
 
 interface CurrencyPickerProps {
     availableCurrencies: string[];
     activeCurrency: string;
 }
 
-export function CurrencyPicker({availableCurrencies, activeCurrency}: CurrencyPickerProps) {
+export function CurrencyPicker({ availableCurrencies, activeCurrency }: CurrencyPickerProps) {
     const [isPending, startTransition] = useTransition();
 
     if (availableCurrencies.length <= 1) return null;
@@ -30,7 +30,12 @@ export function CurrencyPicker({availableCurrencies, activeCurrency}: CurrencyPi
     return (
         <DropdownMenu>
             <DropdownMenuTrigger asChild>
-                <Button variant="ghost" size="sm" className="h-9 gap-1 px-2 text-xs font-medium" disabled={isPending}>
+                <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-9 gap-1 px-2 text-xs font-medium"
+                    disabled={isPending}
+                >
                     <DollarSign className="size-3.5" />
                     {activeCurrency}
                     <span className="sr-only">Switch currency</span>

package/dist/assets/storefront/src/components/layout/navbar/language-picker.tsx

@@ -1,17 +1,17 @@
 'use client';
 
-import {useLocale} from 'next-intl';
-import {usePathname, useRouter} from '@/i18n/navigation';
-import {routing, localeNames, type Locale} from '@/i18n/routing';
-import {Globe} from 'lucide-react';
-import {Button} from '@/components/ui/button';
+import { Button } from '@/components/ui/button';
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import {useTransition} from 'react';
+import { usePathname, useRouter } from '@/i18n/navigation';
+import { localeNames, routing, type Locale } from '@/i18n/routing';
+import { Globe } from 'lucide-react';
+import { useLocale } from 'next-intl';
+import { useTransition } from 'react';
 
 export function LanguagePicker() {
     const locale = useLocale();
@@ -23,7 +23,7 @@ export function LanguagePicker() {
 
     function switchLocale(newLocale: Locale) {
         startTransition(() => {
-            router.replace({pathname}, {locale: newLocale});
+            router.replace({ pathname }, { locale: newLocale });
         });
     }
 

package/dist/assets/storefront/src/components/layout/navbar/login-button.tsx

@@ -1,34 +1,37 @@
-'use client'
+'use client';
 
-import {ComponentProps, useTransition} from "react";
-import {useTranslations} from 'next-intl';
-import {logoutAction} from "@/app/[locale]/sign-in/actions";
-import {useRouter} from "@/i18n/navigation";
+import { logoutAction } from '@/app/[locale]/sign-in/actions';
+import { useRouter } from '@/i18n/navigation';
+import { useTranslations } from 'next-intl';
+import { ComponentProps, useTransition } from 'react';
 
 interface LoginButtonProps extends ComponentProps<'button'> {
     isLoggedIn: boolean;
 }
 
-export function LoginButton({isLoggedIn, ...props}: LoginButtonProps) {
+export function LoginButton({ isLoggedIn, ...props }: LoginButtonProps) {
     const t = useTranslations('Navigation');
     const [isPending, startTransition] = useTransition();
     const router = useRouter();
 
     return (
-        <button {...props} aria-disabled={isPending}
-                onClick={() => {
-                    if (isLoggedIn) {
-                        startTransition(async () => {
-                            const result = await logoutAction();
-                            if (result?.redirectTo) {
-                                router.replace(result.redirectTo);
-                            }
-                        })
-                    } else {
-                        router.push('/sign-in')
-                    }
-                }}>
+        <button
+            {...props}
+            aria-disabled={isPending}
+            onClick={() => {
+                if (isLoggedIn) {
+                    startTransition(async () => {
+                        const result = await logoutAction();
+                        if (result?.redirectTo) {
+                            router.replace(result.redirectTo);
+                        }
+                    });
+                } else {
+                    router.push('/sign-in');
+                }
+            }}
+        >
             {isLoggedIn ? t('signOut') : t('signIn')}
         </button>
-    )
-}
+    );
+}

package/dist/assets/storefront/src/components/layout/navbar/mobile-nav.tsx

@@ -1,12 +1,12 @@
 'use client';
 
-import {useState} from 'react';
-import {useTranslations} from 'next-intl';
-import {Menu, Search} from 'lucide-react';
-import {Button} from '@/components/ui/button';
-import {Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger} from '@/components/ui/sheet';
-import {Input} from '@/components/ui/input';
-import {Link, useRouter} from '@/i18n/navigation';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
+import { Link, useRouter } from '@/i18n/navigation';
+import { Menu, Search } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
 
 interface NavLink {
     href: string;
@@ -55,7 +55,7 @@ export function MobileNav({ navLinks }: { navLinks: NavLink[] }) {
                         </div>
                     </form>
                     <nav className="flex-1 overflow-y-auto py-2">
-                        {navLinks.map(({href, label}) => (
+                        {navLinks.map(({ href, label }) => (
                             <Link
                                 key={href}
                                 href={href}

package/dist/assets/storefront/src/components/layout/navbar/nav-menu-items.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { personalNavItems, getVisibleCompanyItems } from '@/components/commerce/account-nav-items';
+import { getVisibleCompanyItems, personalNavItems } from '@/components/commerce/account-nav-items';
 import {
     DropdownMenuGroup,
     DropdownMenuItem,
@@ -14,7 +14,7 @@ export function PersonalNavMenuItems() {
     const t = useTranslations('Navigation');
     return (
         <DropdownMenuGroup>
-            {personalNavItems.map(item => (
+            {personalNavItems.map((item) => (
                 <DropdownMenuItem key={item.href} asChild>
                     <Link href={item.href} prefetch={false}>
                         <item.icon className="mr-2 h-4 w-4" />
@@ -33,11 +33,9 @@ export function CompanyNavMenuItems({ permissions }: { permissions: string[] })
     return (
         <>
             <DropdownMenuSeparator />
-            <DropdownMenuLabel className="text-xs text-muted-foreground">
-                {t('company')}
-            </DropdownMenuLabel>
+            <DropdownMenuLabel className="text-xs text-muted-foreground">{t('company')}</DropdownMenuLabel>
             <DropdownMenuGroup>
-                {items.map(item => (
+                {items.map((item) => (
                     <DropdownMenuItem key={item.href} asChild>
                         <Link href={item.href} prefetch={false}>
                             <item.icon className="mr-2 h-4 w-4" />

package/dist/assets/storefront/src/components/layout/navbar/navbar-cart.tsx

@@ -1,4 +1,4 @@
-import {CartIcon} from './cart-icon';
+import { CartIcon } from './cart-icon';
 
 export function NavbarCart() {
     return <CartIcon />;

package/dist/assets/storefront/src/components/layout/navbar/navbar-collections.tsx

@@ -1,32 +1,32 @@
-import {useTranslations} from 'next-intl';
-import {getTopCollections} from '@/lib/vendure/cached';
-import {getActiveChannelToken} from '@/lib/channel-server';
-import {getRouteLocale} from '@/i18n/server';
+import { NavbarLink } from '@/components/layout/navbar/navbar-link';
 import {
     NavigationMenu,
-    NavigationMenuList,
-    NavigationMenuItem,
-    NavigationMenuTrigger,
     NavigationMenuContent,
+    NavigationMenuItem,
     NavigationMenuLink,
+    NavigationMenuList,
+    NavigationMenuTrigger,
 } from '@/components/ui/navigation-menu';
-import {NavbarLink} from '@/components/layout/navbar/navbar-link';
-import {Link} from '@/i18n/navigation';
-import {cn} from '@/lib/utils';
-import {ResultOf} from '@/graphql';
-import {GetTopCollectionsQuery} from '@/lib/vendure/queries';
+import { ResultOf } from '@/graphql';
+import { Link } from '@/i18n/navigation';
+import { getRouteLocale } from '@/i18n/server';
+import { getActiveChannelToken } from '@/lib/channel-server';
+import { cn } from '@/lib/utils';
+import { getTopCollections } from '@/lib/vendure/cached';
+import { GetTopCollectionsQuery } from '@/lib/vendure/queries';
+import { useTranslations } from 'next-intl';
 
 type Collection = ResultOf<typeof GetTopCollectionsQuery>['collections']['items'][number];
 
 const MAX_VISIBLE_GRANDCHILDREN = 5;
 
-function MegaMenuContent({collection}: { collection: Collection }) {
+function MegaMenuContent({ collection }: { collection: Collection }) {
     const t = useTranslations('Navigation');
     const children = collection.children ?? [];
 
     // Group children by whether they have grandchildren
-    const categoriesWithSubs = children.filter(c => c.children && c.children.length > 0);
-    const simpleCategories = children.filter(c => !c.children || c.children.length === 0);
+    const categoriesWithSubs = children.filter((c) => c.children && c.children.length > 0);
+    const simpleCategories = children.filter((c) => !c.children || c.children.length === 0);
 
     return (
         <NavigationMenuContent>
@@ -37,16 +37,16 @@ function MegaMenuContent({collection}: { collection: Collection }) {
                         href={`/collection/${collection.slug}`}
                         prefetch={false}
                         className={cn(
-                            "block select-none rounded-md p-3 leading-none no-underline outline-none transition-colors",
-                            "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
-                            "col-span-full border-b pb-3 mb-1"
+                            'block select-none rounded-md p-3 leading-none no-underline outline-none transition-colors',
+                            'hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
+                            'col-span-full border-b pb-3 mb-1',
                         )}
                     >
                         <div className="text-sm font-medium leading-none">
-                            {t('viewAllCollection', {name: collection.name})}
+                            {t('viewAllCollection', { name: collection.name })}
                         </div>
                         <p className="text-muted-foreground line-clamp-2 text-sm leading-snug mt-1">
-                            {t('browseAllCollection', {name: collection.name})}
+                            {t('browseAllCollection', { name: collection.name })}
                         </p>
                     </Link>
                 </NavigationMenuLink>
@@ -85,7 +85,9 @@ function MegaMenuContent({collection}: { collection: Collection }) {
                                             prefetch={false}
                                             className="text-muted-foreground text-sm hover:text-foreground hover:underline"
                                         >
-                                            {t('moreGrandchildren', {count: child.children.length - MAX_VISIBLE_GRANDCHILDREN})}
+                                            {t('moreGrandchildren', {
+                                                count: child.children.length - MAX_VISIBLE_GRANDCHILDREN,
+                                            })}
                                         </Link>
                                     </NavigationMenuLink>
                                 </li>
@@ -96,10 +98,12 @@ function MegaMenuContent({collection}: { collection: Collection }) {
 
                 {/* Simple categories without subcategories */}
                 {simpleCategories.length > 0 && (
-                    <div className={cn(
-                        "space-y-1",
-                        categoriesWithSubs.length > 0 && "col-span-full border-t pt-3 mt-2"
-                    )}>
+                    <div
+                        className={cn(
+                            'space-y-1',
+                            categoriesWithSubs.length > 0 && 'col-span-full border-t pt-3 mt-2',
+                        )}
+                    >
                         <div className="flex flex-wrap gap-2">
                             {simpleCategories.map((child) => (
                                 <NavigationMenuLink key={child.id} asChild>
@@ -107,8 +111,8 @@ function MegaMenuContent({collection}: { collection: Collection }) {
                                         href={`/collection/${child.slug}`}
                                         prefetch={false}
                                         className={cn(
-                                            "inline-block rounded-md px-3 py-1.5 text-sm",
-                                            "bg-muted hover:bg-accent hover:text-accent-foreground transition-colors"
+                                            'inline-block rounded-md px-3 py-1.5 text-sm',
+                                            'bg-muted hover:bg-accent hover:text-accent-foreground transition-colors',
                                         )}
                                     >
                                         {child.name}
@@ -123,7 +127,7 @@ function MegaMenuContent({collection}: { collection: Collection }) {
     );
 }
 
-function CollectionMenuItem({collection, className}: { collection: Collection; className?: string }) {
+function CollectionMenuItem({ collection, className }: { collection: Collection; className?: string }) {
     const hasChildren = collection.children && collection.children.length > 0;
 
     if (hasChildren) {
@@ -139,9 +143,7 @@ function CollectionMenuItem({collection, className}: { collection: Collection; c
 
     return (
         <NavigationMenuItem className={className}>
-            <NavbarLink href={`/collection/${collection.slug}`}>
-                {collection.name}
-            </NavbarLink>
+            <NavbarLink href={`/collection/${collection.slug}`}>{collection.name}</NavbarLink>
         </NavigationMenuItem>
     );
 }
@@ -162,7 +164,7 @@ export async function NavbarCollections() {
     return <NavbarCollectionsView collections={collections} />;
 }
 
-function NavbarCollectionsView({collections}: { collections: Collection[] }) {
+function NavbarCollectionsView({ collections }: { collections: Collection[] }) {
     const t = useTranslations('Navigation');
 
     // Split collections into responsive groups
@@ -180,10 +182,7 @@ function NavbarCollectionsView({collections}: { collections: Collection[] }) {
             <NavigationMenuList>
                 {/* Always visible at lg+ */}
                 {alwaysVisible.map((collection) => (
-                    <CollectionMenuItem
-                        key={collection.id}
-                        collection={collection}
-                    />
+                    <CollectionMenuItem key={collection.id} collection={collection} />
                 ))}
 
                 {/* Visible at xl+, hidden at lg */}
@@ -220,8 +219,8 @@ function NavbarCollectionsView({collections}: { collections: Collection[] }) {
                                                 href={`/collection/${collection.slug}`}
                                                 prefetch={false}
                                                 className={cn(
-                                                    "block select-none rounded-md p-2 text-sm leading-none no-underline outline-none transition-colors",
-                                                    "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                                                    'block select-none rounded-md p-2 text-sm leading-none no-underline outline-none transition-colors',
+                                                    'hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
                                                 )}
                                             >
                                                 {collection.name}
@@ -245,8 +244,8 @@ function NavbarCollectionsView({collections}: { collections: Collection[] }) {
                                                 <Link
                                                     href={`/collection/${collection.slug}`}
                                                     className={cn(
-                                                        "block select-none rounded-md p-2 text-sm leading-none no-underline outline-none transition-colors",
-                                                        "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                                                        'block select-none rounded-md p-2 text-sm leading-none no-underline outline-none transition-colors',
+                                                        'hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
                                                     )}
                                                 >
                                                     {collection.name}
@@ -271,8 +270,8 @@ function NavbarCollectionsView({collections}: { collections: Collection[] }) {
                                                 <Link
                                                     href={`/collection/${collection.slug}`}
                                                     className={cn(
-                                                        "block select-none rounded-md p-2 text-sm leading-none no-underline outline-none transition-colors",
-                                                        "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                                                        'block select-none rounded-md p-2 text-sm leading-none no-underline outline-none transition-colors',
+                                                        'hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
                                                     )}
                                                 >
                                                     {collection.name}

package/dist/assets/storefront/src/components/layout/navbar/navbar-link.tsx

@@ -1,15 +1,12 @@
 'use client';
 
-import {useSelectedLayoutSegment} from 'next/navigation';
-import {ComponentProps} from 'react';
-import {Link} from '@/i18n/navigation';
-import {
-    NavigationMenuLink,
-    navigationMenuTriggerStyle,
-} from '@/components/ui/navigation-menu';
-import {cn} from '@/lib/utils';
+import { NavigationMenuLink, navigationMenuTriggerStyle } from '@/components/ui/navigation-menu';
+import { Link } from '@/i18n/navigation';
+import { cn } from '@/lib/utils';
+import { useSelectedLayoutSegment } from 'next/navigation';
+import { ComponentProps } from 'react';
 
-export function NavbarLink({href, ...rest}: ComponentProps<typeof Link>) {
+export function NavbarLink({ href, ...rest }: ComponentProps<typeof Link>) {
     const selectedLayoutSegment = useSelectedLayoutSegment();
     const pathname = selectedLayoutSegment ? `/${selectedLayoutSegment}` : '/';
     const isActive = pathname === href;
@@ -25,4 +22,4 @@ export function NavbarLink({href, ...rest}: ComponentProps<typeof Link>) {
             />
         </NavigationMenuLink>
     );
-}
+}

package/dist/assets/storefront/src/components/layout/navbar/navbar-user.tsx

@@ -1,7 +1,7 @@
 import { BusinessUnitSwitcher } from '@/components/commerce/business-unit-switcher';
 import { CompanySwitcher } from '@/components/commerce/company-switcher';
 import { LoginButton } from '@/components/layout/navbar/login-button';
-import { PersonalNavMenuItems, CompanyNavMenuItems } from '@/components/layout/navbar/nav-menu-items';
+import { CompanyNavMenuItems, PersonalNavMenuItems } from '@/components/layout/navbar/nav-menu-items';
 import { Button, buttonVariants } from '@/components/ui/button';
 import {
     DropdownMenu,
@@ -12,6 +12,10 @@ import {
     DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { readFragment } from '@/graphql';
+import { cn } from '@/lib/utils';
+import { getMyCompanies } from '@/lib/vendure/actions';
+import type { VendureContext } from '@/lib/vendure/api';
+import { client, getVendureContext } from '@/lib/vendure/api';
 import {
     ActiveCustomerFragment,
     CompanyBusinessUnitFragment,
@@ -20,14 +24,10 @@ import {
     CompanyRoleFragment,
     CompanyUserFragment,
 } from '@/lib/vendure/fragments';
-import { client, getVendureContext } from '@/lib/vendure/api';
-import type { VendureContext } from '@/lib/vendure/api';
-import { getMyCompanies } from '@/lib/vendure/actions';
 import { GetActiveCustomerQuery, GetCompanyAccountQuery } from '@/lib/vendure/queries';
-import { cacheLife, cacheTag } from 'next/cache';
-import {getTranslations} from 'next-intl/server';
 import { User } from 'lucide-react';
-import {cn} from '@/lib/utils';
+import { getTranslations } from 'next-intl/server';
+import { cacheLife, cacheTag } from 'next/cache';
 
 async function getNavbarUserData(ctx: VendureContext) {
     'use cache: private';
@@ -40,9 +40,7 @@ async function getNavbarUserData(ctx: VendureContext) {
     ]);
 
     const [custRes, custErr] = customerResult;
-    const customer = custErr
-        ? null
-        : readFragment(ActiveCustomerFragment, custRes.data.activeCustomer);
+    const customer = custErr ? null : readFragment(ActiveCustomerFragment, custRes.data.activeCustomer);
 
     if (!customer) return { customer: null, companyAccount: null };
 
@@ -60,14 +58,16 @@ async function getNavbarUserData(ctx: VendureContext) {
             company,
             companyUser: {
                 ...rawUser,
-                companyRoles: rawUser.companyRoles.map(r => {
+                companyRoles: rawUser.companyRoles.map((r) => {
                     const role = readFragment(CompanyRoleFragment, r);
                     return {
                         ...role,
-                        permissions: role.permissions.map(p => readFragment(CompanyPermissionFragment, p)),
+                        permissions: role.permissions.map((p) => readFragment(CompanyPermissionFragment, p)),
                     };
                 }),
-                businessUnits: rawUser.businessUnits.map(bu => readFragment(CompanyBusinessUnitFragment, bu)),
+                businessUnits: rawUser.businessUnits.map((bu) =>
+                    readFragment(CompanyBusinessUnitFragment, bu),
+                ),
             },
             activeBusinessUnit,
             permissions: [...account.permissions],
@@ -78,10 +78,7 @@ async function getNavbarUserData(ctx: VendureContext) {
 }
 
 export async function NavbarUser() {
-    const [ctx, t] = await Promise.all([
-        getVendureContext(),
-        getTranslations('Navigation'),
-    ]);
+    const [ctx, t] = await Promise.all([getVendureContext(), getTranslations('Navigation')]);
     const [{ customer, companyAccount }, companies] = await Promise.all([
         getNavbarUserData(ctx),
         getMyCompanies(),
@@ -100,9 +97,9 @@ export async function NavbarUser() {
 
     return (
         <DropdownMenu>
-            <DropdownMenuTrigger className={cn(buttonVariants({ variant: "ghost" }))}>
-                    <User className="h-5 w-5" />
-                    {t('greeting', {name: customer.firstName})}
+            <DropdownMenuTrigger className={cn(buttonVariants({ variant: 'ghost' }))}>
+                <User className="h-5 w-5" />
+                {t('greeting', { name: customer.firstName })}
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" className="w-56">
                 {companies.length > 1 && companyAccount && (
@@ -134,9 +131,7 @@ export async function NavbarUser() {
                     </>
                 )}
                 <PersonalNavMenuItems />
-                {companyAccount && (
-                    <CompanyNavMenuItems permissions={companyAccount.permissions} />
-                )}
+                {companyAccount && <CompanyNavMenuItems permissions={companyAccount.permissions} />}
                 <DropdownMenuSeparator />
                 <DropdownMenuItem asChild>
                     <LoginButton isLoggedIn={true} />

package/dist/assets/storefront/src/components/layout/navbar/theme-switcher.tsx

@@ -1,13 +1,13 @@
-"use client";
+'use client';
 
-import {useTheme} from "next-themes";
-import {useEffect, useState} from "react";
-import {Moon, Sun} from "lucide-react";
-import {Button} from "@/components/ui/button";
+import { Button } from '@/components/ui/button';
+import { Moon, Sun } from 'lucide-react';
+import { useTheme } from 'next-themes';
+import { useEffect, useState } from 'react';
 
 export function ThemeSwitcher() {
     const [mounted, setMounted] = useState(false);
-    const {theme, setTheme} = useTheme();
+    const { theme, setTheme } = useTheme();
 
     useEffect(() => {
         // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional SSR hydration pattern
@@ -23,15 +23,15 @@ export function ThemeSwitcher() {
         );
     }
 
-    const isDark = theme === "dark";
+    const isDark = theme === 'dark';
 
     return (
         <Button
             variant="ghost"
             size="icon"
             className="h-9 w-9"
-            onClick={() => setTheme(isDark ? "light" : "dark")}
-            aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
+            onClick={() => setTheme(isDark ? 'light' : 'dark')}
+            aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
         >
             {isDark ? <Sun className="size-4" /> : <Moon className="size-4" />}
         </Button>