@vendure/dashboard 3.5.0-minor-202510031341 → 3.5.0-minor-202510161257

package/src/lib/components/layout/nav-user.tsx

@@ -27,7 +27,7 @@ import { Dialog, DialogTrigger } from '../ui/dialog.js';
 import { LanguageDialog } from './language-dialog.js';
 
 export function NavUser() {
-    const { isMobile } = useSidebar();
+    const { isMobile, state } = useSidebar();
     const router = useRouter();
     const navigate = useNavigate();
     const { humanReadableLanguage } = useDisplayLocale();
@@ -65,13 +65,15 @@ export function NavUser() {
                                 <div className="relative flex rounded-lg border justify-center items-center w-8 h-8">
                                     {avatarFallback}
                                 </div>
-                                <div className="grid flex-1 text-left text-sm leading-tight">
-                                    <span className="truncate font-semibold">
-                                        {user.firstName} {user.lastName}
-                                    </span>
-                                    <span className="truncate text-xs">{user.emailAddress}</span>
-                                </div>
-                                <ChevronsUpDown className="ml-auto size-4" />
+                                {state === 'expanded' ? (
+                                    <div className="grid flex-1 text-left text-sm leading-tight">
+                                        <span className="truncate font-semibold">
+                                            {user.firstName} {user.lastName}
+                                        </span>
+                                        <span className="truncate text-xs">{user.emailAddress}</span>
+                                    </div>
+                                ) : null}
+                                {state === 'expanded' ? <ChevronsUpDown className="ml-auto size-4" /> : null}
                             </SidebarMenuButton>
                         </DropdownMenuTrigger>
                         <DropdownMenuContent
@@ -115,7 +117,9 @@ export function NavUser() {
                                     </DropdownMenuItem>
                                 </DialogTrigger>
                                 <DropdownMenuSub>
-                                    <DropdownMenuSubTrigger><Trans>Theme</Trans></DropdownMenuSubTrigger>
+                                    <DropdownMenuSubTrigger>
+                                        <Trans>Theme</Trans>
+                                    </DropdownMenuSubTrigger>
                                     <DropdownMenuPortal>
                                         <DropdownMenuSubContent>
                                             <DropdownMenuRadioGroup
@@ -124,15 +128,15 @@ export function NavUser() {
                                             >
                                                 <DropdownMenuRadioItem value="light">
                                                     <Sun />
-                                                    <Trans context='theme'>Light</Trans>
+                                                    <Trans context="theme">Light</Trans>
                                                 </DropdownMenuRadioItem>
                                                 <DropdownMenuRadioItem value="dark">
                                                     <Moon />
-                                                    <Trans context='theme'>Dark</Trans>
+                                                    <Trans context="theme">Dark</Trans>
                                                 </DropdownMenuRadioItem>
                                                 <DropdownMenuRadioItem value="system">
                                                     <Monitor />
-                                                    <Trans context='theme'>System</Trans>
+                                                    <Trans context="theme">System</Trans>
                                                 </DropdownMenuRadioItem>
                                             </DropdownMenuRadioGroup>
                                         </DropdownMenuSubContent>
@@ -141,7 +145,9 @@ export function NavUser() {
                             </DropdownMenuGroup>
                             {isDevMode && (
                                 <DropdownMenuSub>
-                                    <DropdownMenuSubTrigger><Trans>Dev Mode</Trans></DropdownMenuSubTrigger>
+                                    <DropdownMenuSubTrigger>
+                                        <Trans>Dev Mode</Trans>
+                                    </DropdownMenuSubTrigger>
                                     <DropdownMenuPortal>
                                         <DropdownMenuSubContent>
                                             <DropdownMenuRadioGroup

package/src/lib/components/login/login-form.tsx

@@ -1,31 +1,27 @@
 import { Button } from '@/vdb/components/ui/button.js';
 import { Card, CardContent } from '@/vdb/components/ui/card.js';
 import { Input } from '@/vdb/components/ui/input.js';
-import { Trans } from '@lingui/react/macro';
+import { PasswordInput } from '@/vdb/components/ui/password-input.js';
 import { cn } from '@/vdb/lib/utils.js';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { Loader2 } from 'lucide-react';
 import * as React from 'react';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
-import { uiConfig } from 'virtual:vendure-ui-config';
 import { z } from 'zod';
 import { useLoginExtensions } from '../../framework/extension-api/use-login-extensions.js';
 import { LogoMark } from '../shared/logo-mark.js';
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../ui/form.js';
+import { Form, FormControl, FormField, FormItem, FormMessage } from '../ui/form.js';
 import { Separator } from '../ui/separator.js';
 
-export interface LoginFormProps extends React.ComponentProps<'div'> {
-    loginError?: string;
-    isVerifying?: boolean;
-    onFormSubmit?: (username: string, password: string) => void;
-}
-
-export type RemoteLoginImage = {
-    urls: { regular: string };
-    location: { name: string };
-    user: { name: string; links: { html: string } };
-};
+export type LoginFormProps = Readonly<
+    {
+        loginError?: string;
+        isVerifying?: boolean;
+        onFormSubmit?: (username: string, password: string) => void;
+    } & React.ComponentProps<'div'>
+>;
 
 const formSchema = z.object({
     username: z.string().min(1),
@@ -33,16 +29,8 @@ const formSchema = z.object({
 });
 
 export function LoginForm({ className, onFormSubmit, isVerifying, loginError, ...props }: LoginFormProps) {
-    const [remoteLoginImage, setRemoteLoginImage] = React.useState<RemoteLoginImage | null>(null);
     const loginExtensions = useLoginExtensions();
-
-    React.useEffect(() => {
-        if (!uiConfig.loginImageUrl) {
-            fetch('https://login-image.vendure.io')
-                .then(res => res.json())
-                .then(data => setRemoteLoginImage(data));
-        }
-    }, []);
+    const { t } = useLingui();
 
     React.useEffect(() => {
         if (loginError && !isVerifying) {
@@ -59,60 +47,41 @@ export function LoginForm({ className, onFormSubmit, isVerifying, loginError, ..
     });
 
     return (
-        <div className={cn('flex flex-col gap-6 bg-sidebar', className)} {...props}>
-            <Card className="overflow-hidden">
-                <CardContent className="grid p-0 md:grid-cols-2">
+        <div className={cn('flex flex-col items-center gap-6', className)} {...props}>
+            {loginExtensions.logo ? (
+                <loginExtensions.logo.component />
+            ) : (
+                <LogoMark className="text-primary h-8 w-auto" />
+            )}
+            <Card className="w-full">
+                <CardContent className="pt-6">
                     <Form {...form}>
                         <form
-                            className="p-6 md:p-8 flex flex-col items-stretch justify-center"
+                            className="flex flex-col items-center gap-6"
                             onSubmit={form.handleSubmit(data => onFormSubmit?.(data.username, data.password))}
                         >
-                            <div className="flex flex-col gap-6">
-                                <div className="flex flex-col items-start  space-y-4">
-                                    {loginExtensions.logo ? (
-                                        <>
-                                            <loginExtensions.logo.component />
-                                            {loginExtensions.beforeForm && (
-                                                <>
-                                                    <loginExtensions.beforeForm.component />
-                                                    <Separator className="w-full" />
-                                                </>
-                                            )}
-                                        </>
-                                    ) : (
-                                        <>
-                                            {!uiConfig.hideVendureBranding && (
-                                                <LogoMark className="text-vendure-brand h-6 w-auto" />
-                                            )}
-                                            <div>
-                                                <h1 className="text-2xl font-medium">
-                                                    <Trans>Welcome back!</Trans>
-                                                </h1>
-                                                <p className="text-muted-foreground text-balance">
-                                                    Login to your Vendure store
-                                                </p>
-                                            </div>
-                                            {loginExtensions.beforeForm && (
-                                                <>
-                                                    <Separator className="w-full" />
-                                                    <div className="w-full">
-                                                        <loginExtensions.beforeForm.component />
-                                                    </div>
-                                                </>
-                                            )}
-                                        </>
-                                    )}
+                            {loginExtensions.beforeForm ? (
+                                <div className="w-full">
+                                    <loginExtensions.beforeForm.component />
+                                </div>
+                            ) : (
+                                <div className="flex flex-col items-center text-center gap-2">
+                                    <h1 className="text-2xl font-semibold tracking-tight">
+                                        <Trans>Welcome to Vendure</Trans>
+                                    </h1>
+                                    <p className="text-sm text-muted-foreground">
+                                        <Trans>Sign in to access the admin dashboard</Trans>
+                                    </p>
                                 </div>
+                            )}
+                            <div className="grid gap-4 w-full">
                                 <FormField
                                     control={form.control}
                                     name="username"
                                     render={({ field }) => (
                                         <FormItem>
-                                            <FormLabel htmlFor="email" asChild>
-                                                <Trans>Username</Trans>
-                                            </FormLabel>
                                             <FormControl>
-                                                <Input {...field} placeholder="Username or email address" />
+                                                <Input {...field} placeholder={t`Email`} />
                                             </FormControl>
                                             <FormMessage />
                                         </FormItem>
@@ -123,84 +92,31 @@ export function LoginForm({ className, onFormSubmit, isVerifying, loginError, ..
                                     name="password"
                                     render={({ field }) => (
                                         <FormItem>
-                                            <div className="flex items-center">
-                                                <FormLabel htmlFor="password" asChild>
-                                                    <Trans>Password</Trans>
-                                                </FormLabel>
-                                                <a
-                                                    tabIndex={-1}
-                                                    href="#"
-                                                    className="ml-auto text-sm underline-offset-2 hover:underline"
-                                                >
-                                                    Forgot your password?
-                                                </a>
-                                            </div>
                                             <FormControl>
-                                                <Input {...field} type="password" />
+                                                <PasswordInput {...field} placeholder={t`Password`} />
                                             </FormControl>
                                             <FormMessage />
                                         </FormItem>
                                     )}
                                 />
-                                <Button type="submit" disabled={isVerifying}>
+                                <Button type="submit" className="w-full" disabled={isVerifying}>
                                     {isVerifying && (
                                         <>
                                             <Loader2 className="animate-spin" />
                                             Please wait
                                         </>
                                     )}
-                                    {!isVerifying && <span>Login</span>}
+                                    {!isVerifying && <Trans>Sign in</Trans>}
                                 </Button>
                             </div>
                             {loginExtensions.afterForm && (
                                 <>
-                                    <Separator className="w-full my-4" />
-
+                                    <Separator className="w-full" />
                                     <loginExtensions.afterForm.component />
                                 </>
                             )}
                         </form>
                     </Form>
-                    {loginExtensions.loginImage ? (
-                        <loginExtensions.loginImage.component />
-                    ) : (
-                        <div className="bg-muted relative hidden md:block lg:min-h-[500px]">
-                            {remoteLoginImage && (
-                                <>
-                                    <img
-                                        src={remoteLoginImage.urls.regular}
-                                        alt="Image"
-                                        className="absolute inset-0 h-full w-full object-cover"
-                                    />
-                                    <div className="absolute h-full w-full top-0 left-0 flex items-end justify-start bg-gradient-to-b from-transparent to-black/80 p-4 ">
-                                        <div>
-                                            <p className="text-lg font-medium text-white">
-                                                {remoteLoginImage.location.name}
-                                            </p>
-                                            <p className="text-sm text-white/80">
-                                                By
-                                                <a
-                                                    className="mx-1 underline"
-                                                    href={remoteLoginImage.user.links.html}
-                                                    target="_blank"
-                                                >
-                                                    {remoteLoginImage.user.name}
-                                                </a>
-                                                on Unsplash
-                                            </p>
-                                        </div>
-                                    </div>
-                                </>
-                            )}
-                            {uiConfig.loginImageUrl && (
-                                <img
-                                    src={uiConfig.loginImageUrl}
-                                    alt="Login image"
-                                    className="absolute inset-0 h-full w-full object-cover"
-                                />
-                            )}
-                        </div>
-                    )}
                 </CardContent>
             </Card>
         </div>

package/src/lib/components/shared/alerts.tsx

@@ -1,38 +1,50 @@
-import { useAlerts } from '@/vdb/framework/alert/alert-extensions.js';
 import { AlertItem } from '@/vdb/framework/alert/alert-item.js';
 import { AlertsIndicator } from '@/vdb/framework/alert/alerts-indicator.js';
+import { useAlerts } from '@/vdb/hooks/use-alerts.js';
+import { Trans } from '@lingui/react/macro';
 import { BellIcon } from 'lucide-react';
 import { Button } from '../ui/button.js';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '../ui/dialog.js';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from '../ui/dropdown-menu.js';
 import { ScrollArea } from '../ui/scroll-area.js';
 
 export function Alerts() {
-    const { alerts } = useAlerts();
+    const { alerts, activeCount } = useAlerts();
 
     if (alerts.length === 0) {
         return null;
     }
 
     return (
-        <Dialog>
-            <DialogTrigger asChild>
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
                 <Button size="icon" variant="ghost" className="relative">
                     <BellIcon />
                     <AlertsIndicator />
                 </Button>
-            </DialogTrigger>
-            <DialogContent>
-                <DialogHeader>
-                    <DialogTitle>Alerts</DialogTitle>
-                </DialogHeader>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="max-w-[800px] min-w-96">
+                <DropdownMenuLabel>Alerts</DropdownMenuLabel>
+                <DropdownMenuSeparator />
                 <ScrollArea className="max-h-[500px]">
-                    <div className="flex flex-col divide-y divide-border">
-                        {alerts.map(alert => (
-                            <AlertItem className="py-2" key={alert.id} alert={alert} />
-                        ))}
-                    </div>
+                    {activeCount > 0 ? (
+                        <div className="flex flex-col divide-y divide-border px-2">
+                            {alerts.map(alert => (
+                                <AlertItem className="py-2" key={alert.definition.id} alert={alert} />
+                            ))}
+                        </div>
+                    ) : (
+                        <div className="flex items-center justify-center py-10 text-muted-foreground">
+                            <Trans>No alerts</Trans>
+                        </div>
+                    )}
                 </ScrollArea>
-            </DialogContent>
-        </Dialog>
+            </DropdownMenuContent>
+        </DropdownMenu>
     );
 }

package/src/lib/components/shared/asset/asset-bulk-actions.tsx

@@ -40,7 +40,7 @@ export function AssetBulkActions({ selection, bulkActions, refetch }: Readonly<A
 
     const { position, shouldShow } = useFloatingBulkActions({
         selectionCount: selection.length,
-        containerSelector: '[data-asset-gallery]'
+        containerSelector: '[data-asset-gallery]',
     });
 
     if (!shouldShow) {
@@ -70,12 +70,12 @@ export function AssetBulkActions({ selection, bulkActions, refetch }: Readonly<A
 
     return (
         <div
-            className="flex items-center gap-4 px-8 py-2 animate-in fade-in duration-200 fixed transform -translate-x-1/2 bg-white shadow-2xl rounded-md border z-50"
+            className="flex items-center gap-4 px-8 py-2 animate-in fade-in duration-200 fixed transform -translate-x-1/2 bg-background shadow-2xl rounded-md border z-50"
             style={{
                 height: 'auto',
                 maxHeight: '60px',
                 bottom: position.bottom,
-                left: position.left
+                left: position.left,
             }}
         >
             <span className="text-sm text-muted-foreground">

package/src/lib/components/shared/asset/asset-gallery.stories.tsx

@@ -0,0 +1,76 @@
+import { AssetGallery } from '@/vdb/components/shared/asset/asset-gallery.js';
+import { FullWidthPageBlock, Page, PageLayout } from '@/vdb/framework/layout-engine/page-layout.js';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { RouterContextProvider } from '@tanstack/react-router';
+import { createDemoRoute } from '../../../../../.storybook/providers.js';
+import { withDescription } from '../../../../../.storybook/with-description.js';
+
+const meta = {
+    title: 'Components/AssetGallery',
+    component: AssetGallery,
+    ...withDescription(import.meta.url, './asset-gallery.js'),
+    parameters: {
+        layout: 'fullscreen',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        selectable: {
+            control: 'boolean',
+            description: 'Whether assets can be selected',
+        },
+        multiSelect: {
+            control: 'select',
+            options: ['auto', 'manual'],
+            description: 'Multi-select mode',
+        },
+        pageSize: {
+            control: 'number',
+            description: 'Number of assets per page',
+        },
+        fixedHeight: {
+            control: 'boolean',
+            description: 'Whether the gallery has a fixed height',
+        },
+        showHeader: {
+            control: 'boolean',
+            description: 'Whether to show the header with search and filters',
+        },
+        displayBulkActions: {
+            control: 'boolean',
+            description: 'Whether to display bulk actions bar',
+        },
+    },
+} satisfies Meta<typeof AssetGallery>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    args: {
+        selectable: true,
+        multiSelect: 'manual',
+        pageSize: 12,
+        fixedHeight: false,
+        showHeader: true,
+        displayBulkActions: true,
+    },
+    render: args => {
+        const { route, router } = createDemoRoute();
+        return (
+            <div className="p-6 h-screen">
+                <RouterContextProvider router={router}>
+                    <Page pageId="test-page">
+                        <PageLayout>
+                            <FullWidthPageBlock blockId="test-block">
+                                <AssetGallery
+                                    {...args}
+                                    onSelect={assets => console.log('Selected:', assets)}
+                                />
+                            </FullWidthPageBlock>
+                        </PageLayout>
+                    </Page>
+                </RouterContextProvider>
+            </div>
+        );
+    },
+};