@vendure/dashboard 3.2.0 → 3.2.2

package/src/lib/components/shared/customer-group-chip.tsx

@@ -1,30 +1,30 @@
-import { X } from 'lucide-react';
-import { Badge } from '../ui/badge.js';
-
-export function CustomerGroupChip({
-    group,
-    onRemove,
-}: {
-    group: { id: string; name: string };
-    onRemove?: (id: string) => void;
-}) {
-    return (
-        <Badge
-            key={group.id}
-            variant="secondary"
-            className="flex items-center gap-2 py-0.5 pl-2 pr-1 h-6 hover:bg-secondary/80"
-        >
-            {group.name}
-            {onRemove && (
-                <button
-                    type="button"
-                    className="ml-0.5 inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-muted/30"
-                    onClick={() => onRemove(group.id)}
-                    aria-label={`Remove ${group.name}`}
-                >
-                    <X className="h-3 w-3" />
-                </button>
-            )}
-        </Badge>
-    );
-}
+import { X } from 'lucide-react';
+import { Badge } from '../ui/badge.js';
+
+export function CustomerGroupChip({
+    group,
+    onRemove,
+}: {
+    group: { id: string; name: string };
+    onRemove?: (id: string) => void;
+}) {
+    return (
+        <Badge
+            key={group.id}
+            variant="secondary"
+            className="flex items-center gap-2 py-0.5 pl-2 pr-1 h-6 hover:bg-secondary/80"
+        >
+            {group.name}
+            {onRemove && (
+                <button
+                    type="button"
+                    className="ml-0.5 inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-muted/30"
+                    onClick={() => onRemove(group.id)}
+                    aria-label={`Remove ${group.name}`}
+                >
+                    <X className="h-3 w-3" />
+                </button>
+            )}
+        </Badge>
+    );
+}

package/src/lib/components/shared/customer-group-selector.tsx

@@ -1,62 +1,62 @@
-import { Button } from '@/components/ui/button.js';
-import { Command, CommandItem, CommandList } from '@/components/ui/command.js';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
-import { api } from '@/graphql/api.js';
-import { graphql } from '@/graphql/graphql.js';
-import { Trans } from '@/lib/trans.js';
-import { useQuery } from '@tanstack/react-query';
-import { Plus } from 'lucide-react';
-import { useState } from 'react';
-
-const customerGroupsDocument = graphql(`
-    query GetCustomerGroups($options: CustomerGroupListOptions) {
-        customerGroups(options: $options) {
-            items {
-                id
-                name
-            }
-        }
-    }
-`);
-
-export interface CustomerGroupSelectorProps {
-    onSelect: (value: { id: string; name: string }) => void;
-    readOnly?: boolean;
-}
-
-export function CustomerGroupSelector(props: CustomerGroupSelectorProps) {
-    const [open, setOpen] = useState(false);
-
-    const { data: groups } = useQuery({
-        queryKey: ['customerGroups'],
-        queryFn: () =>
-            api.query(customerGroupsDocument, {
-                options: {
-                    sort: { name: 'ASC' },
-                },
-            }),
-        staleTime: 1000 * 60 * 5,
-    });
-
-    return (
-        <Popover open={open} onOpenChange={setOpen}>
-            <PopoverTrigger asChild>
-                <Button variant="outline" size="sm" type="button" disabled={props.readOnly} className="gap-2">
-                    <Plus className="h-4 w-4" />
-                    <Trans>Add customer groups</Trans>
-                </Button>
-            </PopoverTrigger>
-            <PopoverContent className="p-0" align="start">
-                <Command shouldFilter={false}>
-                    <CommandList>
-                        {groups?.customerGroups.items.map(group => (
-                            <CommandItem key={group.id} onSelect={() => props.onSelect(group)}>
-                                {group.name}
-                            </CommandItem>
-                        ))}
-                    </CommandList>
-                </Command>
-            </PopoverContent>
-        </Popover>
-    );
-}
+import { Button } from '@/components/ui/button.js';
+import { Command, CommandItem, CommandList } from '@/components/ui/command.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
+import { api } from '@/graphql/api.js';
+import { graphql } from '@/graphql/graphql.js';
+import { Trans } from '@/lib/trans.js';
+import { useQuery } from '@tanstack/react-query';
+import { Plus } from 'lucide-react';
+import { useState } from 'react';
+
+const customerGroupsDocument = graphql(`
+    query GetCustomerGroups($options: CustomerGroupListOptions) {
+        customerGroups(options: $options) {
+            items {
+                id
+                name
+            }
+        }
+    }
+`);
+
+export interface CustomerGroupSelectorProps {
+    onSelect: (value: { id: string; name: string }) => void;
+    readOnly?: boolean;
+}
+
+export function CustomerGroupSelector(props: CustomerGroupSelectorProps) {
+    const [open, setOpen] = useState(false);
+
+    const { data: groups } = useQuery({
+        queryKey: ['customerGroups'],
+        queryFn: () =>
+            api.query(customerGroupsDocument, {
+                options: {
+                    sort: { name: 'ASC' },
+                },
+            }),
+        staleTime: 1000 * 60 * 5,
+    });
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button variant="outline" size="sm" type="button" disabled={props.readOnly} className="gap-2">
+                    <Plus className="h-4 w-4" />
+                    <Trans>Add customer groups</Trans>
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0" align="start">
+                <Command shouldFilter={false}>
+                    <CommandList>
+                        {groups?.customerGroups.items.map(group => (
+                            <CommandItem key={group.id} onSelect={() => props.onSelect(group)}>
+                                {group.name}
+                            </CommandItem>
+                        ))}
+                    </CommandList>
+                </Command>
+            </PopoverContent>
+        </Popover>
+    );
+}

package/src/lib/components/shared/customer-selector.tsx

@@ -1,107 +1,107 @@
-import { Button } from '@/components/ui/button.js';
-import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from '@/components/ui/command.js';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
-import { api } from '@/graphql/api.js';
-import { graphql } from '@/graphql/graphql.js';
-import { Trans } from '@/lib/trans.js';
-import { useQuery } from '@tanstack/react-query';
-import { Plus, Search } from 'lucide-react';
-import { useState } from 'react';
-
-const customersDocument = graphql(`
-    query GetCustomers($options: CustomerListOptions) {
-        customers(options: $options) {
-            items {
-                id
-                firstName
-                lastName
-                emailAddress
-            }
-            totalItems
-        }
-    }
-`);
-
-export interface Customer {
-    id: string;
-    firstName: string;
-    lastName: string;
-    emailAddress: string;
-}
-
-export interface CustomerSelectorProps {
-    onSelect: (value: Customer) => void;
-    label?: string | React.ReactNode;
-    readOnly?: boolean;
-}
-
-export function CustomerSelector(props: CustomerSelectorProps) {
-    const [open, setOpen] = useState(false);
-    const [searchTerm, setSearchTerm] = useState('');
-
-    const { data, isLoading } = useQuery({
-        queryKey: ['customers', searchTerm],
-        queryFn: () =>
-            api.query(customersDocument, {
-                options: {
-                    sort: { lastName: 'ASC' },
-                    filter: searchTerm ? {
-                        firstName: { contains: searchTerm },
-                        lastName: { contains: searchTerm },
-                        emailAddress: { contains: searchTerm },
-                    } : undefined,
-                    filterOperator: searchTerm ? 'OR' : undefined,
-                },
-            }),
-        staleTime: 1000 * 60, // 1 minute
-    });
-
-    const handleSearch = (value: string) => {
-        setSearchTerm(value);
-    };
-
-    return (
-        <Popover open={open} onOpenChange={setOpen}>
-            <PopoverTrigger asChild>
-                <Button variant="outline" size="sm" type="button" disabled={props.readOnly} className="gap-2">
-                    <Plus className="h-4 w-4" />
-                    {props.label ?? <Trans>Select customer</Trans>}
-                </Button>
-            </PopoverTrigger>
-            <PopoverContent className="p-0 w-[350px]" align="start">
-                <Command shouldFilter={false}>
-                    <div className="flex items-center border-b px-3">
-                        <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-                        <CommandInput 
-                            placeholder="Search customers..." 
-                            onValueChange={handleSearch}
-                            className="h-10 flex-1 bg-transparent outline-none placeholder:text-muted-foreground"
-                        />
-                    </div>
-                    <CommandList>
-                        <CommandEmpty>
-                            {isLoading ? (
-                                <Trans>Loading...</Trans>
-                            ) : (
-                                <Trans>No customers found</Trans>
-                            )}
-                        </CommandEmpty>
-                        {data?.customers.items.map(customer => (
-                            <CommandItem
-                                key={customer.id}
-                                onSelect={() => {
-                                    props.onSelect(customer);
-                                    setOpen(false);
-                                }}
-                                className="flex flex-col items-start"
-                            >
-                                <div className="font-medium">{customer.firstName} {customer.lastName}</div>
-                                <div className="text-sm text-muted-foreground">{customer.emailAddress}</div>
-                            </CommandItem>
-                        ))}
-                    </CommandList>
-                </Command>
-            </PopoverContent>
-        </Popover>
-    );
-}
+import { Button } from '@/components/ui/button.js';
+import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from '@/components/ui/command.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
+import { api } from '@/graphql/api.js';
+import { graphql } from '@/graphql/graphql.js';
+import { Trans } from '@/lib/trans.js';
+import { useQuery } from '@tanstack/react-query';
+import { Plus, Search } from 'lucide-react';
+import { useState } from 'react';
+
+const customersDocument = graphql(`
+    query GetCustomers($options: CustomerListOptions) {
+        customers(options: $options) {
+            items {
+                id
+                firstName
+                lastName
+                emailAddress
+            }
+            totalItems
+        }
+    }
+`);
+
+export interface Customer {
+    id: string;
+    firstName: string;
+    lastName: string;
+    emailAddress: string;
+}
+
+export interface CustomerSelectorProps {
+    onSelect: (value: Customer) => void;
+    label?: string | React.ReactNode;
+    readOnly?: boolean;
+}
+
+export function CustomerSelector(props: CustomerSelectorProps) {
+    const [open, setOpen] = useState(false);
+    const [searchTerm, setSearchTerm] = useState('');
+
+    const { data, isLoading } = useQuery({
+        queryKey: ['customers', searchTerm],
+        queryFn: () =>
+            api.query(customersDocument, {
+                options: {
+                    sort: { lastName: 'ASC' },
+                    filter: searchTerm ? {
+                        firstName: { contains: searchTerm },
+                        lastName: { contains: searchTerm },
+                        emailAddress: { contains: searchTerm },
+                    } : undefined,
+                    filterOperator: searchTerm ? 'OR' : undefined,
+                },
+            }),
+        staleTime: 1000 * 60, // 1 minute
+    });
+
+    const handleSearch = (value: string) => {
+        setSearchTerm(value);
+    };
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button variant="outline" size="sm" type="button" disabled={props.readOnly} className="gap-2">
+                    <Plus className="h-4 w-4" />
+                    {props.label ?? <Trans>Select customer</Trans>}
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0 w-[350px]" align="start">
+                <Command shouldFilter={false}>
+                    <div className="flex items-center border-b px-3">
+                        <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+                        <CommandInput 
+                            placeholder="Search customers..." 
+                            onValueChange={handleSearch}
+                            className="h-10 flex-1 bg-transparent outline-none placeholder:text-muted-foreground"
+                        />
+                    </div>
+                    <CommandList>
+                        <CommandEmpty>
+                            {isLoading ? (
+                                <Trans>Loading...</Trans>
+                            ) : (
+                                <Trans>No customers found</Trans>
+                            )}
+                        </CommandEmpty>
+                        {data?.customers.items.map(customer => (
+                            <CommandItem
+                                key={customer.id}
+                                onSelect={() => {
+                                    props.onSelect(customer);
+                                    setOpen(false);
+                                }}
+                                className="flex flex-col items-start"
+                            >
+                                <div className="font-medium">{customer.firstName} {customer.lastName}</div>
+                                <div className="text-sm text-muted-foreground">{customer.emailAddress}</div>
+                            </CommandItem>
+                        ))}
+                    </CommandList>
+                </Command>
+            </PopoverContent>
+        </Popover>
+    );
+}

package/src/lib/components/shared/detail-page-button.tsx

@@ -1,22 +1,22 @@
-import { Link } from '@tanstack/react-router';
-import { Button } from '../ui/button.js';
-import { SquareArrowOutUpRightIcon } from 'lucide-react';
-
-export function DetailPageButton({
-    id,
-    label,
-    disabled,
-}: {
-    id: string;
-    label: string | React.ReactNode;
-    disabled?: boolean;
-}) {
-    return (
-        <Button asChild variant="ghost" disabled={disabled}>
-            <Link to={`./${id}`}>
-                {label}
-                {!disabled && <SquareArrowOutUpRightIcon className="h-3 w-3 text-muted-foreground" />}
-            </Link>
-        </Button>
-    );
-}
+import { Link } from '@tanstack/react-router';
+import { Button } from '../ui/button.js';
+import { SquareArrowOutUpRightIcon } from 'lucide-react';
+
+export function DetailPageButton({
+    id,
+    label,
+    disabled,
+}: {
+    id: string;
+    label: string | React.ReactNode;
+    disabled?: boolean;
+}) {
+    return (
+        <Button asChild variant="ghost" disabled={disabled}>
+            <Link to={`./${id}`}>
+                {label}
+                {!disabled && <SquareArrowOutUpRightIcon className="h-3 w-3 text-muted-foreground" />}
+            </Link>
+        </Button>
+    );
+}