@vendure/dashboard 3.2.0

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

@@ -0,0 +1,176 @@
+'use client';
+
+import { useAuth } from '@/hooks/use-auth.js';
+import { Link, useNavigate, useRouter } from '@tanstack/react-router';
+import { ChevronsUpDown, LogOut, Monitor, Moon, Sparkles, Sun } from 'lucide-react';
+
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar.js';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuPortal,
+    DropdownMenuRadioGroup,
+    DropdownMenuRadioItem,
+    DropdownMenuSeparator,
+    DropdownMenuSub,
+    DropdownMenuSubContent,
+    DropdownMenuSubTrigger,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu.js';
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/components/ui/sidebar.js';
+import { useUserSettings } from '@/hooks/use-user-settings.js';
+import { useMemo } from 'react';
+import { Dialog, DialogTrigger } from '../ui/dialog.js';
+import { LanguageDialog } from './language-dialog.js';
+import { Theme } from '@/providers/theme-provider.js';
+import { Badge } from '../ui/badge.js';
+import { Trans } from '@/lib/trans.js';
+
+export function NavUser() {
+    const { isMobile } = useSidebar();
+    const router = useRouter();
+    const navigate = useNavigate();
+    const { user, ...auth } = useAuth();
+    const { settings, setTheme, setDevMode } = useUserSettings();
+
+    const handleLogout = () => {
+        auth.logout(() => {
+            router.invalidate().finally(() => {
+                navigate({ to: '/login' });
+            });
+        });
+    };
+
+    if (!user) {
+        return <></>;
+    }
+
+    const avatarFallback = useMemo(() => {
+        return user.firstName.charAt(0) + user.lastName.charAt(0);
+    }, [user]);
+
+    const isDevMode = (import.meta as any).env?.MODE === 'development';
+
+    return (
+        <SidebarMenu>
+            <SidebarMenuItem>
+                <Dialog>
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <SidebarMenuButton
+                                size="lg"
+                                className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                            >
+                                <Avatar className="h-8 w-8 rounded-lg">
+                                    <AvatarImage src={user.id} alt={user.firstName} />
+                                    <AvatarFallback className="rounded-lg">{avatarFallback}</AvatarFallback>
+                                </Avatar>
+                                <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" />
+                            </SidebarMenuButton>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent
+                            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+                            side={isMobile ? 'bottom' : 'right'}
+                            align="end"
+                            sideOffset={4}
+                        >
+                            <DropdownMenuLabel className="p-0 font-normal">
+                                <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                                    <Avatar className="h-8 w-8 rounded-lg">
+                                        <AvatarImage src={user.id} alt={user.firstName} />
+                                        <AvatarFallback className="rounded-lg">
+                                            {avatarFallback}
+                                        </AvatarFallback>
+                                    </Avatar>
+                                    <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>
+                                </div>
+                            </DropdownMenuLabel>
+                            <DropdownMenuSeparator />
+                            <DropdownMenuGroup>
+                                <DropdownMenuItem asChild>
+                                    <a href="https://vendure.io/pricing" target="_blank">
+                                        <Sparkles />
+                                        Explore Enterprise Edition
+                                    </a>
+                                </DropdownMenuItem>
+                            </DropdownMenuGroup>
+                            <DropdownMenuSeparator />
+                            <DropdownMenuGroup>
+                                <DropdownMenuItem asChild>
+                                    <Link to="/profile">Profile</Link>
+                                </DropdownMenuItem>
+                                <DialogTrigger asChild>
+                                    <DropdownMenuItem>Language</DropdownMenuItem>
+                                </DialogTrigger>
+                                <DropdownMenuSub>
+                                    <DropdownMenuSubTrigger>Theme</DropdownMenuSubTrigger>
+                                    <DropdownMenuPortal>
+                                        <DropdownMenuSubContent>
+                                            <DropdownMenuRadioGroup
+                                                value={settings.theme}
+                                                onValueChange={value => setTheme(value as Theme)}
+                                            >
+                                                <DropdownMenuRadioItem value="light">
+                                                    <Sun />
+                                                    Light
+                                                </DropdownMenuRadioItem>
+                                                <DropdownMenuRadioItem value="dark">
+                                                    <Moon />
+                                                    Dark
+                                                </DropdownMenuRadioItem>
+                                                <DropdownMenuRadioItem value="system">
+                                                    <Monitor />
+                                                    System
+                                                </DropdownMenuRadioItem>
+                                            </DropdownMenuRadioGroup>
+                                        </DropdownMenuSubContent>
+                                    </DropdownMenuPortal>
+                                </DropdownMenuSub>
+                            </DropdownMenuGroup>
+                            {isDevMode && (
+                                <DropdownMenuSub>
+                                    <DropdownMenuSubTrigger>Dev Mode</DropdownMenuSubTrigger>
+                                    <DropdownMenuPortal>
+                                        <DropdownMenuSubContent>
+                                            <DropdownMenuRadioGroup
+                                                value={settings.devMode.toString()}
+                                                onValueChange={value => setDevMode(value === 'true')}
+                                            >
+                                                <DropdownMenuRadioItem value="true">
+                                                    <Trans>Enabled</Trans>
+                                                </DropdownMenuRadioItem>
+                                                <DropdownMenuRadioItem value="false">
+                                                    <Trans>Disabled</Trans>
+                                                </DropdownMenuRadioItem>
+                                            </DropdownMenuRadioGroup>
+                                        </DropdownMenuSubContent>
+                                    </DropdownMenuPortal>
+                                </DropdownMenuSub>
+                            )}
+                            <DropdownMenuSeparator />
+                            <DropdownMenuItem onClick={handleLogout}>
+                                <LogOut />
+                                Log out
+                            </DropdownMenuItem>
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                    <LanguageDialog />
+                </Dialog>
+            </SidebarMenuItem>
+        </SidebarMenu>
+    );
+}

package/src/lib/components/layout/prerelease-popup.tsx

@@ -0,0 +1,38 @@
+import { useUserSettings } from '@/hooks/use-user-settings.js';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+export function PrereleasePopup() {
+    const { settings, setHasSeenOnboarding } = useUserSettings();
+    const [isOpen, setIsOpen] = useState(false);
+    if (!settings.hasSeenOnboarding && !isOpen) {
+        setIsOpen(true);
+        toast('Welcome to the new Dashboard!', {
+            description: (
+                <div className="space-y-2">
+                    <p>
+                        This is an <span className="font-bold">alpha</span> version of our new Vendure
+                        Dashboard!
+                    </p>
+                    <p>
+                        This release allows you to explore the new interface and functionality, but it's not
+                        yet ready for production use.
+                    </p>
+                    <p>
+                        If you find missing or broken functionality, you don't need to report it on GitHub at
+                        this point - we're already working on it!
+                    </p>
+                </div>
+            ),
+            duration: 1000 * 60,
+            action: {
+                label: 'Got it',
+                onClick: () => {
+                    setHasSeenOnboarding(true);
+                    setIsOpen(false);
+                },
+            },
+        });
+    }
+    return null;
+}

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

@@ -0,0 +1,173 @@
+import { Button } from '@/components/ui/button.js';
+import { Card, CardContent } from '@/components/ui/card.js';
+import { Input } from '@/components/ui/input.js';
+import { Trans } from '@/lib/trans.js';
+import { cn } from '@/lib/utils.js';
+import { zodResolver } from '@hookform/resolvers/zod';
+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 { LogoMark } from '../shared/logo-mark.js';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../ui/form.js';
+
+export interface LoginFormProps extends React.ComponentProps<'div'> {
+    loginError?: string;
+    isVerifying?: boolean;
+    onFormSubmit?: (username: string, password: string) => void;
+}
+
+type RemoteLoginImage = {
+    urls: { regular: string };
+    location: { name: string };
+    user: { name: string; links: { html: string } };
+};
+
+const formSchema = z.object({
+    username: z.string().min(1),
+    password: z.string().min(1),
+});
+
+export function LoginForm({ className, onFormSubmit, isVerifying, loginError, ...props }: LoginFormProps) {
+    const [remoteLoginImage, setRemoteLoginImage] = React.useState<RemoteLoginImage | null>(null);
+
+    React.useEffect(() => {
+        if (!uiConfig.loginImageUrl) {
+            fetch('https://login-image.vendure.io')
+                .then(res => res.json())
+                .then(data => setRemoteLoginImage(data));
+        }
+    }, []);
+
+    React.useEffect(() => {
+        if (loginError && !isVerifying) {
+            toast.error(loginError);
+        }
+    }, [loginError, isVerifying]);
+
+    const form = useForm<z.infer<typeof formSchema>>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            username: '',
+            password: '',
+        },
+    });
+
+    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">
+                    <Form {...form}>
+                        <form
+                            className="p-6 md:p-8 flex flex-col items-stretch justify-center"
+                            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">
+                                    {!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>
+                                </div>
+                                <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" />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    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" />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+
+                                <Button type="submit" disabled={isVerifying}>
+                                    {isVerifying && (
+                                        <>
+                                            <Loader2 className="animate-spin" />
+                                            Please wait
+                                        </>
+                                    )}
+                                    {!isVerifying && <span>Login</span>}
+                                </Button>
+                            </div>
+                        </form>
+                    </Form>
+                    <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

@@ -0,0 +1,20 @@
+import { BellIcon } from 'lucide-react';
+import { Button } from '../ui/button.js';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '../ui/dialog.js';
+
+export function Alerts() {
+    return (
+        <Dialog>
+            <DialogTrigger asChild>
+                <Button size="icon" variant="ghost">
+                    <BellIcon />
+                </Button>
+            </DialogTrigger>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>Alerts</DialogTitle>
+                </DialogHeader>
+            </DialogContent>
+        </Dialog>
+    );
+}

package/src/lib/components/shared/animated-number.tsx

@@ -0,0 +1,49 @@
+import { useChannel } from '@/index.js';
+import { useLocalFormat } from '@/index.js';
+import { motion, useSpring, useTransform } from 'motion/react';
+import { useEffect } from 'react';
+
+type AnimationConfig = {
+    mass?: number;
+    stiffness?: number;
+    damping?: number;
+};
+
+export function AnimatedNumber({
+    value,
+    animationConfig = { mass: 0.8, stiffness: 75, damping: 15 },
+}: {
+    value: number;
+    animationConfig?: AnimationConfig;
+}) {
+    let spring = useSpring(value, animationConfig);
+    let display = useTransform(spring, current => Math.round(current).toLocaleString());
+
+    useEffect(() => {
+        spring.set(value);
+    }, [spring, value]);
+
+    return <motion.span>{display}</motion.span>;
+}
+
+export function AnimatedCurrency({
+    value,
+    animationConfig = { mass: 0.8, stiffness: 75, damping: 15 },
+}: {
+    value: number;
+    animationConfig?: AnimationConfig;
+}) {
+    const { activeChannel } = useChannel();
+    const { formatCurrency } = useLocalFormat();
+
+    let spring = useSpring(value, animationConfig);
+    let display = useTransform(spring, current =>
+        formatCurrency(current, activeChannel?.defaultCurrencyCode ?? 'USD'),
+    );
+
+    useEffect(() => {
+        spring.set(value);
+    }, [spring, value]);
+
+    return <motion.span>{display}</motion.span>;
+}