@vendure/dashboard 3.2.0 → 3.2.2

package/src/lib/components/layout/channel-switcher.tsx

@@ -1,87 +1,87 @@
-import * as React from 'react';
-import { ChevronsUpDown, Plus } from 'lucide-react';
-
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuLabel,
-    DropdownMenuSeparator,
-    DropdownMenuShortcut,
-    DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu.js';
-import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/components/ui/sidebar.js';
-import { Trans } from '@/lib/trans.js';
-import { useChannel } from '@/hooks/use-channel.js';
-import { Link } from '@tanstack/react-router';
-import { ChannelCodeLabel } from '@/components/shared/channel-code-label.js';
-
-export function ChannelSwitcher() {
-    const { isMobile } = useSidebar();
-    const { channels, activeChannel, selectedChannel, setSelectedChannel } = useChannel();
-
-    // Use the selected channel if available, otherwise fall back to the active channel
-    const displayChannel = selectedChannel || activeChannel;
-
-    return (
-        <SidebarMenu>
-            <SidebarMenuItem>
-                <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                        <SidebarMenuButton
-                            size="lg"
-                            className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-                        >
-                            <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
-                                <span className="truncate font-semibold text-xs">
-                                    {displayChannel?.defaultCurrencyCode}
-                                </span>
-                            </div>
-                            <div className="grid flex-1 text-left text-sm leading-tight">
-                                <span className="truncate font-semibold"><ChannelCodeLabel code={displayChannel?.code} /></span>
-                                <span className="truncate text-xs">
-                                    Default Language: {displayChannel?.defaultLanguageCode?.toUpperCase()}
-                                </span>
-                            </div>
-                            <ChevronsUpDown className="ml-auto" />
-                        </SidebarMenuButton>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent
-                        className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
-                        align="start"
-                        side={isMobile ? 'bottom' : 'right'}
-                        sideOffset={4}
-                    >
-                        <DropdownMenuLabel className="text-muted-foreground text-xs">
-                            <Trans>Channels</Trans>
-                        </DropdownMenuLabel>
-                        {channels.map((channel, index) => (
-                            <DropdownMenuItem
-                                key={channel.code}
-                                onClick={() => setSelectedChannel(channel.id)}
-                                className="gap-2 p-2"
-                            >
-                                <div className="flex size-6 items-center justify-center rounded-xs border">
-                                    <span className="truncate font-semibold text-xs">
-                                        {channel.defaultCurrencyCode}
-                                    </span>
-                                </div>
-                                <ChannelCodeLabel code={channel.code} />
-                                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
-                            </DropdownMenuItem>
-                        ))}
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem className="gap-2 p-2 cursor-pointer" asChild>
-                            <Link to={'/channels/new'}>
-                                <div className="bg-background flex size-6 items-center justify-center rounded-md border">
-                                    <Plus className="size-4" />
-                                </div>
-                                <div className="text-muted-foreground font-medium">Add channel</div>
-                            </Link>
-                        </DropdownMenuItem>
-                    </DropdownMenuContent>
-                </DropdownMenu>
-            </SidebarMenuItem>
-        </SidebarMenu>
-    );
-}
+import * as React from 'react';
+import { ChevronsUpDown, Plus } from 'lucide-react';
+
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuShortcut,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu.js';
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/components/ui/sidebar.js';
+import { Trans } from '@/lib/trans.js';
+import { useChannel } from '@/hooks/use-channel.js';
+import { Link } from '@tanstack/react-router';
+import { ChannelCodeLabel } from '@/components/shared/channel-code-label.js';
+
+export function ChannelSwitcher() {
+    const { isMobile } = useSidebar();
+    const { channels, activeChannel, selectedChannel, setSelectedChannel } = useChannel();
+
+    // Use the selected channel if available, otherwise fall back to the active channel
+    const displayChannel = selectedChannel || activeChannel;
+
+    return (
+        <SidebarMenu>
+            <SidebarMenuItem>
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <SidebarMenuButton
+                            size="lg"
+                            className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                        >
+                            <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                                <span className="truncate font-semibold text-xs">
+                                    {displayChannel?.defaultCurrencyCode}
+                                </span>
+                            </div>
+                            <div className="grid flex-1 text-left text-sm leading-tight">
+                                <span className="truncate font-semibold"><ChannelCodeLabel code={displayChannel?.code} /></span>
+                                <span className="truncate text-xs">
+                                    Default Language: {displayChannel?.defaultLanguageCode?.toUpperCase()}
+                                </span>
+                            </div>
+                            <ChevronsUpDown className="ml-auto" />
+                        </SidebarMenuButton>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent
+                        className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+                        align="start"
+                        side={isMobile ? 'bottom' : 'right'}
+                        sideOffset={4}
+                    >
+                        <DropdownMenuLabel className="text-muted-foreground text-xs">
+                            <Trans>Channels</Trans>
+                        </DropdownMenuLabel>
+                        {channels.map((channel, index) => (
+                            <DropdownMenuItem
+                                key={channel.code}
+                                onClick={() => setSelectedChannel(channel.id)}
+                                className="gap-2 p-2"
+                            >
+                                <div className="flex size-6 items-center justify-center rounded-xs border">
+                                    <span className="truncate font-semibold text-xs">
+                                        {channel.defaultCurrencyCode}
+                                    </span>
+                                </div>
+                                <ChannelCodeLabel code={channel.code} />
+                                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
+                            </DropdownMenuItem>
+                        ))}
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem className="gap-2 p-2 cursor-pointer" asChild>
+                            <Link to={'/channels/new'}>
+                                <div className="bg-background flex size-6 items-center justify-center rounded-md border">
+                                    <Plus className="size-4" />
+                                </div>
+                                <div className="text-muted-foreground font-medium">Add channel</div>
+                            </Link>
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            </SidebarMenuItem>
+        </SidebarMenu>
+    );
+}

package/src/lib/components/layout/content-language-selector.tsx

@@ -1,41 +1,41 @@
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select.js';
-import { useLocalFormat } from '@/hooks/use-local-format.js';
-import { useServerConfig } from '@/hooks/use-server-config.js';
-import { useUserSettings } from '@/hooks/use-user-settings.js';
-import { cn } from '@/lib/utils.js';
-
-interface ContentLanguageSelectorProps {
-    value?: string;
-    onChange?: (value: string) => void;
-    className?: string;
-}
-
-export function ContentLanguageSelector({ value, onChange, className }: ContentLanguageSelectorProps) {
-    const serverConfig = useServerConfig();
-    const { formatLanguageName } = useLocalFormat();
-    const { settings: { contentLanguage, displayLanguage }, setContentLanguage} = useUserSettings();
-
-    // Fallback to empty array if serverConfig is null
-    const languages = serverConfig?.availableLanguages || [];
-
-    // If no value is provided but languages are available, use the first language
-    const currentValue = contentLanguage;
-
-    return (
-        <Select value={currentValue} onValueChange={value => {
-            onChange?.(value);
-            setContentLanguage(value);
-            }}>
-            <SelectTrigger className={cn('w-[200px]', className)}>
-                <SelectValue placeholder="Select language" />
-            </SelectTrigger>
-            <SelectContent>
-                {languages.map(language => (
-                    <SelectItem key={language} value={language}>
-                        {formatLanguageName(language)}
-                    </SelectItem>
-                ))}
-            </SelectContent>
-        </Select>
-    );
-}
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select.js';
+import { useLocalFormat } from '@/hooks/use-local-format.js';
+import { useServerConfig } from '@/hooks/use-server-config.js';
+import { useUserSettings } from '@/hooks/use-user-settings.js';
+import { cn } from '@/lib/utils.js';
+
+interface ContentLanguageSelectorProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    className?: string;
+}
+
+export function ContentLanguageSelector({ value, onChange, className }: ContentLanguageSelectorProps) {
+    const serverConfig = useServerConfig();
+    const { formatLanguageName } = useLocalFormat();
+    const { settings: { contentLanguage, displayLanguage }, setContentLanguage} = useUserSettings();
+
+    // Fallback to empty array if serverConfig is null
+    const languages = serverConfig?.availableLanguages || [];
+
+    // If no value is provided but languages are available, use the first language
+    const currentValue = contentLanguage;
+
+    return (
+        <Select value={currentValue} onValueChange={value => {
+            onChange?.(value);
+            setContentLanguage(value);
+            }}>
+            <SelectTrigger className={cn('w-[200px]', className)}>
+                <SelectValue placeholder="Select language" />
+            </SelectTrigger>
+            <SelectContent>
+                {languages.map(language => (
+                    <SelectItem key={language} value={language}>
+                        {formatLanguageName(language)}
+                    </SelectItem>
+                ))}
+            </SelectContent>
+        </Select>
+    );
+}

package/src/lib/components/layout/generated-breadcrumbs.tsx

@@ -1,82 +1,82 @@
-import {
-    Breadcrumb,
-    BreadcrumbItem,
-    BreadcrumbLink,
-    BreadcrumbList,
-    BreadcrumbSeparator,
-} from '@/components/ui/breadcrumb.js';
-import { Link, useRouterState } from '@tanstack/react-router';
-import * as React from 'react';
-import { Fragment } from 'react';
-
-export interface BreadcrumbPair {
-    label: string | React.ReactElement;
-    path: string;
-}
-
-export type BreadcrumbShorthand = string | React.ReactElement;
-
-export type PageBreadcrumb = BreadcrumbPair | BreadcrumbShorthand;
-
-export function GeneratedBreadcrumbs() {
-    const matches = useRouterState({ select: s => s.matches });
-    const breadcrumbs: BreadcrumbPair[] = matches
-        .filter(match => match.loaderData?.breadcrumb)
-        .map(({ pathname, loaderData }) => {
-            if (typeof loaderData.breadcrumb === 'string') {
-                return {
-                    label: loaderData.breadcrumb,
-                    path: pathname,
-                };
-            }
-            if (Array.isArray(loaderData.breadcrumb)) {
-                return loaderData.breadcrumb.map((breadcrumb: PageBreadcrumb) => {
-                    if (typeof breadcrumb === 'string') {
-                        return {
-                            label: breadcrumb,
-                            path: pathname,
-                        };
-                    } else if (React.isValidElement(breadcrumb)) {
-                        return {
-                            label: breadcrumb,
-                            path: pathname,
-                        };
-                    } else {
-                        return {
-                            label: breadcrumb.label,
-                            path: breadcrumb.path,
-                        };
-                    }
-                });
-            }
-            if (typeof loaderData.breadcrumb === 'function') {
-                return {
-                    label: loaderData.breadcrumb(),
-                    path: pathname,
-                };
-            }
-            if (React.isValidElement(loaderData.breadcrumb)) {
-                return {
-                    label: loaderData.breadcrumb,
-                    path: pathname,
-                };
-            }
-        })
-        .flat();
-    return (
-        <Breadcrumb>
-            <BreadcrumbList>
-                {breadcrumbs.map(({ label, path }, index, arr) => (
-                    <Fragment key={index}>
-                        <BreadcrumbItem className="hidden md:block">
-                            <BreadcrumbLink asChild>
-                                <Link to={path}>{label}</Link>
-                            </BreadcrumbLink>
-                        </BreadcrumbItem>
-                        {index < arr.length - 1 && <BreadcrumbSeparator className="hidden md:block" />}
-                    </Fragment>
-                ))}
-            </BreadcrumbList>
-        </Breadcrumb>
-    );
-}
+import {
+    Breadcrumb,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbList,
+    BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb.js';
+import { Link, useRouterState } from '@tanstack/react-router';
+import * as React from 'react';
+import { Fragment } from 'react';
+
+export interface BreadcrumbPair {
+    label: string | React.ReactElement;
+    path: string;
+}
+
+export type BreadcrumbShorthand = string | React.ReactElement;
+
+export type PageBreadcrumb = BreadcrumbPair | BreadcrumbShorthand;
+
+export function GeneratedBreadcrumbs() {
+    const matches = useRouterState({ select: s => s.matches });
+    const breadcrumbs: BreadcrumbPair[] = matches
+        .filter(match => match.loaderData?.breadcrumb)
+        .map(({ pathname, loaderData }) => {
+            if (typeof loaderData.breadcrumb === 'string') {
+                return {
+                    label: loaderData.breadcrumb,
+                    path: pathname,
+                };
+            }
+            if (Array.isArray(loaderData.breadcrumb)) {
+                return loaderData.breadcrumb.map((breadcrumb: PageBreadcrumb) => {
+                    if (typeof breadcrumb === 'string') {
+                        return {
+                            label: breadcrumb,
+                            path: pathname,
+                        };
+                    } else if (React.isValidElement(breadcrumb)) {
+                        return {
+                            label: breadcrumb,
+                            path: pathname,
+                        };
+                    } else {
+                        return {
+                            label: breadcrumb.label,
+                            path: breadcrumb.path,
+                        };
+                    }
+                });
+            }
+            if (typeof loaderData.breadcrumb === 'function') {
+                return {
+                    label: loaderData.breadcrumb(),
+                    path: pathname,
+                };
+            }
+            if (React.isValidElement(loaderData.breadcrumb)) {
+                return {
+                    label: loaderData.breadcrumb,
+                    path: pathname,
+                };
+            }
+        })
+        .flat();
+    return (
+        <Breadcrumb>
+            <BreadcrumbList>
+                {breadcrumbs.map(({ label, path }, index, arr) => (
+                    <Fragment key={index}>
+                        <BreadcrumbItem className="hidden md:block">
+                            <BreadcrumbLink asChild>
+                                <Link to={path}>{label}</Link>
+                            </BreadcrumbLink>
+                        </BreadcrumbItem>
+                        {index < arr.length - 1 && <BreadcrumbSeparator className="hidden md:block" />}
+                    </Fragment>
+                ))}
+            </BreadcrumbList>
+        </Breadcrumb>
+    );
+}

package/src/lib/components/layout/language-dialog.tsx

@@ -1,104 +1,104 @@
-import { CurrencyCode } from '@/constants.js';
-import { useLocalFormat } from '@/hooks/use-local-format.js';
-import { useUserSettings } from '@/hooks/use-user-settings.js';
-import { Trans } from '@/lib/trans.js';
-import { useState } from 'react';
-import { uiConfig } from 'virtual:vendure-ui-config';
-import { Button } from '../ui/button.js';
-import {
-    DialogClose,
-    DialogContent,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle
-} from '../ui/dialog.js';
-import { Label } from '../ui/label.js';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select.js';
-
-export function LanguageDialog() {
-    const { availableLocales, availableLanguages } = uiConfig;
-    const { settings, setDisplayLanguage, setDisplayLocale } = useUserSettings();
-    const availableCurrencyCodes = Object.values(CurrencyCode);
-    const { formatCurrency, formatLanguageName, formatCurrencyName, formatDate } = useLocalFormat();
-    const [selectedCurrency, setSelectedCurrency] = useState<string>('USD');
-
-    return (
-        <DialogContent>
-            <DialogHeader>
-                <DialogTitle>
-                    <Trans>Select display language</Trans>
-                </DialogTitle>
-            </DialogHeader>
-            <div className="grid grid-cols-2 gap-6">
-                <div className="space-y-1 w-full">
-                    <Label>
-                        <Trans>Display language</Trans>
-                    </Label>
-                    <Select defaultValue={settings.displayLanguage} onValueChange={setDisplayLanguage}>
-                        <SelectTrigger className="w-full">
-                            <SelectValue placeholder="Select a language" />
-                        </SelectTrigger>
-                        <SelectContent>
-                            {availableLanguages.map(language => (
-                                <SelectItem key={language} value={language}>
-                                    {formatLanguageName(language)}
-                                </SelectItem>
-                            ))}
-                        </SelectContent>
-                    </Select>
-                </div>
-                <div className="space-y-1">
-                    <Label>
-                        <Trans>Locale</Trans>
-                    </Label>
-                    <Select defaultValue={settings.displayLocale} onValueChange={setDisplayLocale}>
-                        <SelectTrigger className="w-full">
-                            <SelectValue placeholder="Select a locale" />
-                        </SelectTrigger>
-                        <SelectContent>
-                            {availableLocales.map(locale => (
-                                <SelectItem key={locale} value={locale}>
-                                    {formatLanguageName(locale)}
-                                </SelectItem>
-                            ))}
-                        </SelectContent>
-                    </Select>
-                </div>
-            </div>
-            <div className="bg-sidebar border border-border rounded-md px-6 py-4 space-y-4">
-                <span className="font-medium block text-accent-foreground">
-                    <Trans>Sample Formatting</Trans>: {settings.displayLocale} {settings.displayLanguage}
-                </span>
-                <Select defaultValue={selectedCurrency} onValueChange={setSelectedCurrency}>
-                    <SelectTrigger>
-                        <SelectValue placeholder="Select a currency" />
-                    </SelectTrigger>
-                    <SelectContent>
-                        {availableCurrencyCodes.map(currency => (
-                            <SelectItem key={currency} value={currency}>
-                                {formatCurrencyName(currency)}
-                            </SelectItem>
-                        ))}
-                    </SelectContent>
-                </Select>
-                <div className="flex flex-col">
-                    <span className="text-muted-foreground text-sm font-medium">Medium date</span>
-                    <span>{formatDate(new Date('2025-03-14'), { dateStyle: 'medium' })}</span>
-                </div>
-                <div className="flex flex-col">
-                    <span className="text-muted-foreground text-sm font-medium">Short date</span>
-                    <span>{formatDate(new Date('2025-03-14'), { dateStyle: 'short' })}</span>
-                </div>
-                <div className="flex flex-col">
-                    <span className="text-muted-foreground text-sm font-medium">Price</span>
-                    <span>{formatCurrency(100.0, selectedCurrency)}</span>
-                </div>
-            </div>
-            <DialogFooter>
-                <DialogClose asChild>
-                    <Button>Close</Button>
-                </DialogClose>
-            </DialogFooter>
-        </DialogContent>
-    );
-}
+import { CurrencyCode } from '@/constants.js';
+import { useLocalFormat } from '@/hooks/use-local-format.js';
+import { useUserSettings } from '@/hooks/use-user-settings.js';
+import { Trans } from '@/lib/trans.js';
+import { useState } from 'react';
+import { uiConfig } from 'virtual:vendure-ui-config';
+import { Button } from '../ui/button.js';
+import {
+    DialogClose,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle
+} from '../ui/dialog.js';
+import { Label } from '../ui/label.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select.js';
+
+export function LanguageDialog() {
+    const { availableLocales, availableLanguages } = uiConfig;
+    const { settings, setDisplayLanguage, setDisplayLocale } = useUserSettings();
+    const availableCurrencyCodes = Object.values(CurrencyCode);
+    const { formatCurrency, formatLanguageName, formatCurrencyName, formatDate } = useLocalFormat();
+    const [selectedCurrency, setSelectedCurrency] = useState<string>('USD');
+
+    return (
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>
+                    <Trans>Select display language</Trans>
+                </DialogTitle>
+            </DialogHeader>
+            <div className="grid grid-cols-2 gap-6">
+                <div className="space-y-1 w-full">
+                    <Label>
+                        <Trans>Display language</Trans>
+                    </Label>
+                    <Select defaultValue={settings.displayLanguage} onValueChange={setDisplayLanguage}>
+                        <SelectTrigger className="w-full">
+                            <SelectValue placeholder="Select a language" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            {availableLanguages.map(language => (
+                                <SelectItem key={language} value={language}>
+                                    {formatLanguageName(language)}
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                </div>
+                <div className="space-y-1">
+                    <Label>
+                        <Trans>Locale</Trans>
+                    </Label>
+                    <Select defaultValue={settings.displayLocale} onValueChange={setDisplayLocale}>
+                        <SelectTrigger className="w-full">
+                            <SelectValue placeholder="Select a locale" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            {availableLocales.map(locale => (
+                                <SelectItem key={locale} value={locale}>
+                                    {formatLanguageName(locale)}
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                </div>
+            </div>
+            <div className="bg-sidebar border border-border rounded-md px-6 py-4 space-y-4">
+                <span className="font-medium block text-accent-foreground">
+                    <Trans>Sample Formatting</Trans>: {settings.displayLocale} {settings.displayLanguage}
+                </span>
+                <Select defaultValue={selectedCurrency} onValueChange={setSelectedCurrency}>
+                    <SelectTrigger>
+                        <SelectValue placeholder="Select a currency" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {availableCurrencyCodes.map(currency => (
+                            <SelectItem key={currency} value={currency}>
+                                {formatCurrencyName(currency)}
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+                <div className="flex flex-col">
+                    <span className="text-muted-foreground text-sm font-medium">Medium date</span>
+                    <span>{formatDate(new Date('2025-03-14'), { dateStyle: 'medium' })}</span>
+                </div>
+                <div className="flex flex-col">
+                    <span className="text-muted-foreground text-sm font-medium">Short date</span>
+                    <span>{formatDate(new Date('2025-03-14'), { dateStyle: 'short' })}</span>
+                </div>
+                <div className="flex flex-col">
+                    <span className="text-muted-foreground text-sm font-medium">Price</span>
+                    <span>{formatCurrency(100.0, selectedCurrency)}</span>
+                </div>
+            </div>
+            <DialogFooter>
+                <DialogClose asChild>
+                    <Button>Close</Button>
+                </DialogClose>
+            </DialogFooter>
+        </DialogContent>
+    );
+}