@vendure/dashboard 3.3.6-master-202507020959 → 3.3.6-master-202507030234

package/src/lib/components/shared/permission-guard.tsx

@@ -1,5 +1,5 @@
-import { usePermissions } from "@/hooks/use-permissions.js";
-import { Permission } from "@vendure/common/lib/generated-types";
+import { usePermissions } from '@/vdb/hooks/use-permissions.js';
+import { Permission } from '@vendure/common/lib/generated-types';
 
 export interface PermissionGuardProps {
     requires: Permission | string | string[] | Permission[];
@@ -11,11 +11,11 @@ export interface PermissionGuardProps {
  * This component is used to protect a route from unauthorized access.
  * It will render the children if the user has the required permissions.
  */
-export function PermissionGuard({ requires, children }: PermissionGuardProps ) {
+export function PermissionGuard({ requires, children }: Readonly<PermissionGuardProps>) {
     const { hasPermissions } = usePermissions();
     const permissions = Array.isArray(requires) ? requires : [requires];
     if (!hasPermissions(permissions)) {
         return null;
     }
     return children;
-}
+}

package/src/lib/components/shared/product-variant-selector.tsx

@@ -1,41 +1,46 @@
-import { Command, CommandEmpty, CommandGroup, 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 { cn } from '@/lib/utils.js';
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+} from '@/vdb/components/ui/command.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { api } from '@/vdb/graphql/api.js';
+import { assetFragment } from '@/vdb/graphql/fragments.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 import { useQuery } from '@tanstack/react-query';
 import { useDebounce } from '@uidotdev/usehooks';
-import { ChevronsUpDown, Plus } from 'lucide-react';
+import { Plus } from 'lucide-react';
 import { useState } from 'react';
 import { Button } from '../ui/button.js';
-import { assetFragment } from '@/graphql/fragments.js';
 import { VendureImage } from './vendure-image.js';
 
-const productVariantListDocument = graphql(`
-    query ProductVariantList($options: ProductVariantListOptions) {
-        productVariants(options: $options) {
-            items {
-                id
-                name
-                sku
-                featuredAsset {
-                    ...Asset
+const productVariantListDocument = graphql(
+    `
+        query ProductVariantList($options: ProductVariantListOptions) {
+            productVariants(options: $options) {
+                items {
+                    id
+                    name
+                    sku
+                    featuredAsset {
+                        ...Asset
+                    }
                 }
+                totalItems
             }
-            totalItems
         }
-    }
-`, [assetFragment]);
+    `,
+    [assetFragment],
+);
 
 export interface ProductVariantSelectorProps {
     onProductVariantIdChange: (productVariantId: string) => void;
 }
 
-export function ProductVariantSelector({ onProductVariantIdChange }: ProductVariantSelectorProps) {
+export function ProductVariantSelector({ onProductVariantIdChange }: Readonly<ProductVariantSelectorProps>) {
     const [search, setSearch] = useState('');
     const [open, setOpen] = useState(false);
     const debouncedSearch = useDebounce(search, 500);
@@ -60,11 +65,7 @@ export function ProductVariantSelector({ onProductVariantIdChange }: ProductVari
     return (
         <Popover open={open} onOpenChange={setOpen}>
             <PopoverTrigger asChild>
-                <Button
-                    variant="outline"
-                    role="combobox"
-                    className="w-full"
-                >
+                <Button variant="outline" role="combobox" className="w-full">
                     Add item to order
                     <Plus className="opacity-50" />
                 </Button>
@@ -74,12 +75,12 @@ export function ProductVariantSelector({ onProductVariantIdChange }: ProductVari
                     <CommandInput
                         placeholder="Add item to order..."
                         className="h-9"
-                       onValueChange={(value) => setSearch(value)}
+                        onValueChange={value => setSearch(value)}
                     />
                     <CommandList>
                         <CommandEmpty>No products found.</CommandEmpty>
                         <CommandGroup>
-                            {data?.productVariants.items.map((variant) => (
+                            {data?.productVariants.items.map(variant => (
                                 <CommandItem
                                     key={variant.id}
                                     value={variant.id}
@@ -108,4 +109,4 @@ export function ProductVariantSelector({ onProductVariantIdChange }: ProductVari
             </PopoverContent>
         </Popover>
     );
-}
+}

package/src/lib/components/shared/remove-from-channel-bulk-action.tsx

@@ -2,10 +2,10 @@ import { useMutation } from '@tanstack/react-query';
 import { LayersIcon } from 'lucide-react';
 import { toast } from 'sonner';
 
-import { DataTableBulkActionItem } from '@/components/data-table/data-table-bulk-action-item.js';
-import { ResultOf } from '@/graphql/graphql.js';
-import { useChannel, usePaginatedList } from '@/index.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+import { DataTableBulkActionItem } from '@/vdb/components/data-table/data-table-bulk-action-item.js';
+import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { useChannel, usePaginatedList } from '@/vdb/index.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 
 interface RemoveFromChannelBulkActionProps {
     selection: any[];

package/src/lib/components/shared/role-code-label.tsx

@@ -1,8 +1,12 @@
-import { CUSTOMER_ROLE_CODE, SUPER_ADMIN_ROLE_CODE } from '@/constants.js';
-import { Trans } from '@/lib/trans.js';
+import { CUSTOMER_ROLE_CODE, SUPER_ADMIN_ROLE_CODE } from '@/vdb/constants.js';
+import { Trans } from '@/vdb/lib/trans.js';
 
-export function RoleCodeLabel({ code }: { code: string } | { code: undefined }) {
-    return code === SUPER_ADMIN_ROLE_CODE ? <Trans>Super Admin</Trans> : 
-    code === CUSTOMER_ROLE_CODE ? <Trans>Customer</Trans> : code;
+export function RoleCodeLabel({ code }: Readonly<{ code: string }> | Readonly<{ code: undefined }>) {
+    return code === SUPER_ADMIN_ROLE_CODE ? (
+        <Trans>Super Admin</Trans>
+    ) : code === CUSTOMER_ROLE_CODE ? (
+        <Trans>Customer</Trans>
+    ) : (
+        code
+    );
 }
-

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

@@ -1,8 +1,8 @@
-import { api } from '@/graphql/api.js';
-import { graphql } from '@/graphql/graphql.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { useLingui } from '@/vdb/lib/trans.js';
 import { useQuery } from '@tanstack/react-query';
 import { MultiSelect } from './multi-select.js';
-import { useLingui } from '@/lib/trans.js';
 
 const rolesDocument = graphql(`
     query Roles($options: RoleListOptions) {
@@ -40,7 +40,7 @@ export function RoleSelector<T extends boolean>(props: RoleSelectorProps<T>) {
     const items = (data ?? []).map(role => ({
         value: role.id,
         label: role.code,
-        display: role.description ? role.description : role.code
+        display: role.description ? role.description : role.code,
     }));
 
     return (

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

@@ -1,11 +1,17 @@
-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 { Button } from '@/vdb/components/ui/button.js';
+import {
+    Command,
+    CommandEmpty,
+    CommandInput,
+    CommandItem,
+    CommandList,
+} from '@/vdb/components/ui/command.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { useQuery } from '@tanstack/react-query';
-import { Plus, Search } from 'lucide-react';
+import { Plus } from 'lucide-react';
 import { useState } from 'react';
 
 const sellerListDocument = graphql(`
@@ -42,9 +48,11 @@ export function SellerSelector(props: SellerSelectorProps) {
             api.query(sellerListDocument, {
                 options: {
                     sort: { name: 'ASC' },
-                    filter: searchTerm ? {
-                        name: { contains: searchTerm },
-                    } : undefined,  
+                    filter: searchTerm
+                        ? {
+                              name: { contains: searchTerm },
+                          }
+                        : undefined,
                 },
             }),
         staleTime: 1000 * 60, // 1 minute
@@ -73,19 +81,15 @@ export function SellerSelector(props: SellerSelectorProps) {
             <PopoverContent className="p-0 w-[350px]" align="start">
                 <Command shouldFilter={false}>
                     <div className="flex items-center border-b px-3">
-                        <CommandInput 
-                            placeholder="Search sellers..." 
+                        <CommandInput
+                            placeholder="Search sellers..."
                             onValueChange={handleSearch}
                             className="h-10 flex-1 bg-transparent outline-none placeholder:text-muted-foreground"
                         />
                     </div>
                     <CommandList>
                         <CommandEmpty>
-                            {isLoading ? (
-                                <Trans>Loading...</Trans>
-                            ) : (
-                                <Trans>No sellers found</Trans>
-                            )}
+                            {isLoading ? <Trans>Loading...</Trans> : <Trans>No sellers found</Trans>}
                         </CommandEmpty>
                         {data?.sellers.items.map(seller => (
                             <CommandItem

package/src/lib/components/shared/stock-level-label.tsx

@@ -5,20 +5,20 @@ export type StockLevel = {
     stockAllocated: number;
 };
 
-export function StockLevelLabel({ stockLevels }: { stockLevels: StockLevel[] }) {
+export function StockLevelLabel({ stockLevels }: Readonly<{ stockLevels: StockLevel[] }>) {
     const { i18n } = useLingui();
-    
+
     if (!Array.isArray(stockLevels)) {
         return null;
     }
     const totalOnHand = stockLevels.reduce((acc, curr) => acc + curr.stockOnHand, 0);
     const totalAllocated = stockLevels.reduce((acc, curr) => acc + curr.stockAllocated, 0);
-    
+
     return (
-        <span 
+        <span
             title={`${i18n.t('Stock on hand')}: ${totalOnHand}, ${i18n.t('Stock allocated')}: ${totalAllocated}`}
         >
             {totalOnHand} <span className="text-muted-foreground">/ {totalAllocated}</span>
         </span>
     );
-}
+}

package/src/lib/components/shared/tax-category-selector.tsx

@@ -5,10 +5,10 @@ import {
     SelectItem,
     SelectTrigger,
     SelectValue,
-} from '@/components/ui/select.js';
-import { api } from '@/graphql/api.js';
-import { graphql } from '@/graphql/graphql.js';
-import { Trans } from '@/lib/trans.js';
+} from '@/vdb/components/ui/select.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { useQuery } from '@tanstack/react-query';
 import { Skeleton } from '../ui/skeleton.js';
 
@@ -29,7 +29,7 @@ export interface TaxCategorySelectorProps {
     onChange: (value: string) => void;
 }
 
-export function TaxCategorySelector({ value, onChange }: TaxCategorySelectorProps) {
+export function TaxCategorySelector({ value, onChange }: Readonly<TaxCategorySelectorProps>) {
     const { data, isLoading, isPending, status } = useQuery({
         queryKey: ['taxCategories'],
         staleTime: 1000 * 60 * 5,

package/src/lib/components/shared/translatable-form-field.tsx

@@ -1,4 +1,4 @@
-import { useUserSettings } from '@/hooks/use-user-settings.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
 import { Controller, ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
 import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from '../ui/form.js';
 import { FormFieldWrapper } from './form-field-wrapper.js';

package/src/lib/components/shared/vendure-image.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@/lib/utils.js';
+import { cn } from '@/vdb/lib/utils.js';
 import { Image } from 'lucide-react';
 import React from 'react';
 

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

@@ -5,10 +5,10 @@ import {
     SelectItem,
     SelectTrigger,
     SelectValue,
-} from '@/components/ui/select.js';
-import { api } from '@/graphql/api.js';
-import { graphql } from '@/graphql/graphql.js';
-import { Trans } from '@/lib/trans.js';
+} from '@/vdb/components/ui/select.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { useQuery } from '@tanstack/react-query';
 import { Skeleton } from '../ui/skeleton.js';
 
@@ -28,7 +28,7 @@ export interface ZoneSelectorProps {
     onChange: (value: string) => void;
 }
 
-export function ZoneSelector({ value, onChange }: ZoneSelectorProps) {
+export function ZoneSelector({ value, onChange }: Readonly<ZoneSelectorProps>) {
     const { data, isLoading, isPending } = useQuery({
         queryKey: ['zones'],
         staleTime: 1000 * 60 * 5,
@@ -63,4 +63,3 @@ export function ZoneSelector({ value, onChange }: ZoneSelectorProps) {
         </Select>
     );
 }
-

package/src/lib/components/ui/accordion.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { ChevronDownIcon } from 'lucide-react';
+import * as React from 'react';
 
-import { cn } from '@/lib/utils.js';
+import { cn } from '@/vdb/lib/utils.js';
 
 function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
     return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
@@ -56,4 +56,4 @@ function AccordionContent({
     );
 }
 
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/src/lib/components/ui/alert-dialog.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import * as React from 'react';
 
-import { cn } from '@/lib/utils.js';
-import { buttonVariants } from '@/components/ui/button.js';
+import { buttonVariants } from '@/vdb/components/ui/button.js';
+import { cn } from '@/vdb/lib/utils.js';
 
 function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
     return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
@@ -115,14 +115,14 @@ function AlertDialogCancel({
 
 export {
     AlertDialog,
-    AlertDialogPortal,
-    AlertDialogOverlay,
-    AlertDialogTrigger,
+    AlertDialogAction,
+    AlertDialogCancel,
     AlertDialogContent,
-    AlertDialogHeader,
+    AlertDialogDescription,
     AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogOverlay,
+    AlertDialogPortal,
     AlertDialogTitle,
-    AlertDialogDescription,
-    AlertDialogAction,
-    AlertDialogCancel,
+    AlertDialogTrigger,
 };

package/src/lib/components/ui/alert.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 
-import { cn } from '@/lib/utils.js';
+import { cn } from '@/vdb/lib/utils.js';
 
 const alertVariants = cva(
     'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
@@ -57,4 +57,4 @@ function AlertDescription({ className, ...props }: React.ComponentProps<'div'>)
     );
 }
 
-export { Alert, AlertTitle, AlertDescription };
+export { Alert, AlertDescription, AlertTitle };

package/src/lib/components/ui/badge.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 
-import { cn } from '@/lib/utils.js';
+import { cn } from '@/vdb/lib/utils.js';
 
 const badgeVariants = cva(
     'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-auto',

package/src/lib/components/ui/breadcrumb.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { ChevronRight, MoreHorizontal } from 'lucide-react';
+import * as React from 'react';
 
-import { cn } from '@/lib/utils.js';
+import { cn } from '@/vdb/lib/utils.js';
 
 function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
     return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
@@ -93,10 +93,10 @@ function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'
 
 export {
     Breadcrumb,
-    BreadcrumbList,
+    BreadcrumbEllipsis,
     BreadcrumbItem,
     BreadcrumbLink,
+    BreadcrumbList,
     BreadcrumbPage,
     BreadcrumbSeparator,
-    BreadcrumbEllipsis,
 };

package/src/lib/components/ui/button.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 
-import { cn } from '@/lib/utils.js';
+import { cn } from '@/vdb/lib/utils.js';
 
 const buttonVariants = cva(
     'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
@@ -43,7 +43,14 @@ export interface ButtonProps
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     ({ className, variant, size, asChild = false, ...props }, ref) => {
         const Comp = asChild ? Slot : 'button';
-        return <Comp className={cn(buttonVariants({ variant, size, className }))} type={props.type ?? 'button'} ref={ref} {...props} />;
+        return (
+            <Comp
+                className={cn(buttonVariants({ variant, size, className }))}
+                type={props.type ?? 'button'}
+                ref={ref}
+                {...props}
+            />
+        );
     },
 );
 Button.displayName = 'Button';