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

package/src/lib/components/shared/configurable-operation-input.tsx

@@ -1,12 +1,10 @@
-import { ConfigurableOperationDefFragment, ConfigurableOperationFragment } from '@/graphql/fragments.js';
+import { ConfigurableOperationDefFragment } from '@/vdb/graphql/fragments.js';
+import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
+import { Trash } from 'lucide-react';
 import { useForm } from 'react-hook-form';
-import * as React from 'react';
+import { Button } from '../ui/button.js';
 import { Form, FormControl, FormField, FormItem, FormLabel } from '../ui/form.js';
-import { Input } from '../ui/input.js';
-import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
 import { ConfigurableOperationArgInput } from './configurable-operation-arg-input.js';
-import { Button } from '../ui/button.js';
-import { Trash } from 'lucide-react';
 
 export interface ConfigurableOperationInputProps {
     operationDefinition: ConfigurableOperationDefFragment;
@@ -42,13 +40,14 @@ export function ConfigurableOperationInput({
         if (argIndex === -1) {
             updatedArgs = [...value.arguments, { name, value: stringValue }];
         } else {
-            updatedArgs = value.arguments.map(arg => (arg.name === name ? { ...arg, value: stringValue } : arg));
+            updatedArgs = value.arguments.map(arg =>
+                arg.name === name ? { ...arg, value: stringValue } : arg,
+            );
         }
         const newVal: ConfigurableOperationInputType = { ...value, arguments: updatedArgs };
         onChange(newVal);
     };
 
-
     return (
         <Form {...form}>
             <div className="space-y-4">
@@ -73,14 +72,14 @@ export function ConfigurableOperationInput({
                                 key={arg.name}
                                 name={`args.${arg.name}`}
                                 render={() => (
-                                <FormItem>
-                                    <FormLabel>{arg.label || arg.name}</FormLabel>
-                                    <FormControl>
-                                        <ConfigurableOperationArgInput
-                                            definition={arg}
-                                            value={argValue}
-                                            onChange={value => handleInputChange(arg.name, value)}
-                                        />
+                                    <FormItem>
+                                        <FormLabel>{arg.label || arg.name}</FormLabel>
+                                        <FormControl>
+                                            <ConfigurableOperationArgInput
+                                                definition={arg}
+                                                value={argValue}
+                                                onChange={value => handleInputChange(arg.name, value)}
+                                            />
                                         </FormControl>
                                     </FormItem>
                                 )}

package/src/lib/components/shared/confirmation-dialog.tsx

@@ -8,8 +8,8 @@ import {
     AlertDialogHeader,
     AlertDialogTitle,
     AlertDialogTrigger,
-} from '@/components/ui/alert-dialog.js';
-import { Trans } from '@/lib/trans.js';
+} from '@/vdb/components/ui/alert-dialog.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { useState } from 'react';
 
 export function ConfirmationDialog({

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

@@ -1,9 +1,15 @@
-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 { useState } from 'react';
@@ -43,10 +49,12 @@ export function CountrySelector(props: CountrySelectorProps) {
             api.query(countryListDocument, {
                 options: {
                     sort: { name: 'ASC' },
-                    filter: searchTerm ? {
-                        name: { contains: searchTerm },
-                        code: { contains: searchTerm },
-                    } : undefined,
+                    filter: searchTerm
+                        ? {
+                              name: { contains: searchTerm },
+                              code: { contains: searchTerm },
+                          }
+                        : undefined,
                     filterOperator: searchTerm ? 'OR' : undefined,
                 },
             }),
@@ -69,19 +77,15 @@ export function CountrySelector(props: CountrySelectorProps) {
                 <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 countries..." 
+                        <CommandInput
+                            placeholder="Search countries..."
                             onValueChange={handleSearch}
                             className="h-10 flex-1 bg-transparent outline-none placeholder:text-muted-foreground"
                         />
                     </div>
                     <CommandList>
                         <CommandEmpty>
-                            {isLoading ? (
-                                <Trans>Loading...</Trans>
-                            ) : (
-                                <Trans>No countries found</Trans>
-                            )}
+                            {isLoading ? <Trans>Loading...</Trans> : <Trans>No countries found</Trans>}
                         </CommandEmpty>
                         {data?.countries.items.map(country => (
                             <CommandItem
@@ -102,4 +106,3 @@ export function CountrySelector(props: CountrySelectorProps) {
         </Popover>
     );
 }
-

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

@@ -1,9 +1,9 @@
-import { useLocalFormat } from '@/hooks/use-local-format.js';
-import { CurrencyCode } from '@/constants.js';
+import { CurrencyCode } from '@/vdb/constants.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { useLingui } from '@/vdb/lib/trans.js';
 import { MultiSelect } from './multi-select.js';
-import { useLingui } from '@/lib/trans.js';
 
-export interface CurrencySelectorProps<T extends boolean> {    
+export interface CurrencySelectorProps<T extends boolean> {
     value: T extends true ? string[] : string;
     onChange: (value: T extends true ? string[] : string) => void;
     multiple?: T;
@@ -17,7 +17,7 @@ export function CurrencySelector<T extends boolean>(props: CurrencySelectorProps
 
     const items = (availableCurrencyCodes ?? Object.values(CurrencyCode)).map(currencyCode => ({
         value: currencyCode,
-        label: formatCurrencyName(currencyCode)
+        label: formatCurrencyName(currencyCode),
     }));
 
     return (

package/src/lib/components/shared/custom-fields-form.tsx

@@ -5,14 +5,14 @@ import {
     FormItem,
     FormLabel,
     FormMessage,
-} from '@/components/ui/form.js';
-import { Input } from '@/components/ui/input.js';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs.js';
-import { CustomFormComponent } from '@/framework/form-engine/custom-form-component.js';
-import { useCustomFieldConfig } from '@/hooks/use-custom-field-config.js';
-import { useUserSettings } from '@/hooks/use-user-settings.js';
-import { useLingui } from '@/lib/trans.js';
-import { customFieldConfigFragment } from '@/providers/server-config.js';
+} from '@/vdb/components/ui/form.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/vdb/components/ui/tabs.js';
+import { CustomFormComponent } from '@/vdb/framework/form-engine/custom-form-component.js';
+import { useCustomFieldConfig } from '@/vdb/hooks/use-custom-field-config.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+import { useLingui } from '@/vdb/lib/trans.js';
+import { customFieldConfigFragment } from '@/vdb/providers/server-config.js';
 import { CustomFieldType } from '@vendure/common/lib/shared-types';
 import { ResultOf } from 'gql.tada';
 import React, { useMemo } from 'react';

package/src/lib/components/shared/customer-address-form.tsx

@@ -1,6 +1,6 @@
-import { api } from '@/graphql/api.js';
-import { graphql } from '@/graphql/graphql.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useQuery } from '@tanstack/react-query';
 import { useForm } from 'react-hook-form';

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

@@ -1,9 +1,9 @@
-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 { Button } from '@/vdb/components/ui/button.js';
+import { Command, 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 } from 'lucide-react';
 import { useState } from 'react';

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

@@ -1,12 +1,18 @@
-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 { useDebounce } from '@uidotdev/usehooks';
-import { Plus, Search } from 'lucide-react';
+import { Plus } from 'lucide-react';
 import { useState } from 'react';
 
 const customersDocument = graphql(`
@@ -47,11 +53,13 @@ export function CustomerSelector(props: CustomerSelectorProps) {
             api.query(customersDocument, {
                 options: {
                     sort: { lastName: 'ASC' },
-                    filter: debouncedSearchTerm ? {
-                        firstName: { contains: debouncedSearchTerm },
-                        lastName: { contains: debouncedSearchTerm },
-                        emailAddress: { contains: debouncedSearchTerm },
-                    } : undefined,
+                    filter: debouncedSearchTerm
+                        ? {
+                              firstName: { contains: debouncedSearchTerm },
+                              lastName: { contains: debouncedSearchTerm },
+                              emailAddress: { contains: debouncedSearchTerm },
+                          }
+                        : undefined,
                     filterOperator: debouncedSearchTerm ? 'OR' : undefined,
                 },
             }),
@@ -79,11 +87,7 @@ export function CustomerSelector(props: CustomerSelectorProps) {
                     />
                     <CommandList>
                         <CommandEmpty>
-                            {isLoading ? (
-                                <Trans>Loading...</Trans>
-                            ) : (
-                                <Trans>No customers found</Trans>
-                            )}
+                            {isLoading ? <Trans>Loading...</Trans> : <Trans>No customers found</Trans>}
                         </CommandEmpty>
                         {data?.customers.items.map(customer => (
                             <CommandItem
@@ -94,7 +98,9 @@ export function CustomerSelector(props: CustomerSelectorProps) {
                                 }}
                                 className="flex flex-col items-start"
                             >
-                                <div className="font-medium">{customer.firstName} {customer.lastName}</div>
+                                <div className="font-medium">
+                                    {customer.firstName} {customer.lastName}
+                                </div>
                                 <div className="text-sm text-muted-foreground">{customer.emailAddress}</div>
                             </CommandItem>
                         ))}

package/src/lib/components/shared/entity-assets.tsx

@@ -1,11 +1,11 @@
-import { Button } from '@/components/ui/button.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu.js';
-import { AssetFragment } from '@/graphql/fragments.js';
+} from '@/vdb/components/ui/dropdown-menu.js';
+import { AssetFragment } from '@/vdb/graphql/fragments.js';
 import {
     closestCenter,
     DndContext,
@@ -56,11 +56,11 @@ interface FeaturedAssetProps {
 }
 
 function FeaturedAsset({
-                           featuredAsset,
-                           compact = false,
-                           onSelectAssets,
-                           onPreviewAsset,
-                       }: FeaturedAssetProps) {
+    featuredAsset,
+    compact = false,
+    onSelectAssets,
+    onPreviewAsset,
+}: FeaturedAssetProps) {
     return (
         <div
             className={`flex items-center justify-center ${compact ? 'h-40' : 'h-64'} border border-dashed rounded-md`}
@@ -90,14 +90,14 @@ function FeaturedAsset({
 
 // Sortable asset item component
 function SortableAsset({
-                           asset,
-                           compact,
-                           isFeatured,
-                           updatePermissions,
-                           onPreview,
-                           onSetAsFeatured,
-                           onRemove,
-                       }: {
+    asset,
+    compact,
+    isFeatured,
+    updatePermissions,
+    onPreview,
+    onSetAsFeatured,
+    onRemove,
+}: {
     asset: Asset;
     compact: boolean;
     isFeatured: boolean;
@@ -163,13 +163,13 @@ function SortableAsset({
 }
 
 export function EntityAssets({
-                                 assets: initialAssets = [],
-                                 featuredAsset: initialFeaturedAsset,
-                                 compact = false,
-                                 updatePermissions = true,
-                                 multiSelect = true,
-                                 onChange,
-                             }: EntityAssetsProps) {
+    assets: initialAssets = [],
+    featuredAsset: initialFeaturedAsset,
+    compact = false,
+    updatePermissions = true,
+    multiSelect = true,
+    onChange,
+}: EntityAssetsProps) {
     const [assets, setAssets] = useState<Asset[]>([...initialAssets]);
     const [featuredAsset, setFeaturedAsset] = useState<Asset | undefined | null>(initialFeaturedAsset);
     const [isPickerOpen, setIsPickerOpen] = useState(false);
@@ -372,18 +372,17 @@ interface AssetListProps {
     onDragEnd: (event: DragEndEvent) => void;
 }
 
-
 function AssetList({
-                       assets,
-                       compact,
-                       sensors,
-                       updatePermissions,
-                       isFeatured,
-                       onPreview,
-                       onSetAsFeatured,
-                       onRemove,
-                       onDragEnd,
-                   }: AssetListProps) {
+    assets,
+    compact,
+    sensors,
+    updatePermissions,
+    isFeatured,
+    onPreview,
+    onSetAsFeatured,
+    onRemove,
+    onDragEnd,
+}: AssetListProps) {
     return (
         <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
             <div className={`${compact ? 'max-h-32' : ''} overflow-auto p-1`}>

package/src/lib/components/shared/error-page.tsx

@@ -1,7 +1,7 @@
-import { Page, PageBlock, PageLayout, PageTitle } from '@/framework/layout-engine/page-layout.js';
-import { Trans } from '@/lib/trans.js';
+import { Page, PageBlock, PageLayout, PageTitle } from '@/vdb/framework/layout-engine/page-layout.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { AlertCircle } from 'lucide-react';
-import { Alert, AlertTitle, AlertDescription } from '../ui/alert.js';
+import { Alert, AlertDescription, AlertTitle } from '../ui/alert.js';
 
 export interface ErrorPageProps {
     message: string;
@@ -13,12 +13,12 @@ export interface ErrorPageProps {
  */
 export function ErrorPage({ message }: ErrorPageProps) {
     return (
-        <Page pageId='error-page'>
+        <Page pageId="error-page">
             <PageTitle>
                 <Trans>Error</Trans>
             </PageTitle>
             <PageLayout>
-                <PageBlock column="main" blockId='error-message'>
+                <PageBlock column="main" blockId="error-message">
                     <Alert variant="destructive">
                         <AlertCircle className="h-4 w-4" />
                         <AlertTitle>Error</AlertTitle>

package/src/lib/components/shared/facet-value-chip.tsx

@@ -1,4 +1,4 @@
-import { Badge } from '@/components/ui/badge.js';
+import { Badge } from '@/vdb/components/ui/badge.js';
 import { X } from 'lucide-react';
 
 // Interface for facet value type
@@ -20,15 +20,22 @@ interface FacetValueChipProps {
     onRemove?: (id: string) => void;
 }
 
-export function FacetValueChip({ facetValue, removable = true, onRemove, displayFacetName = true }: FacetValueChipProps) {
+export function FacetValueChip({
+    facetValue,
+    removable = true,
+    onRemove,
+    displayFacetName = true,
+}: FacetValueChipProps) {
     return (
-        <Badge 
+        <Badge
             variant="secondary"
             className="flex items-center gap-2 py-0.5 pl-2 pr-1 h-6 hover:bg-secondary/80"
         >
             <div className="flex items-center gap-1.5">
                 <span className="font-medium">{facetValue.name}</span>
-                {displayFacetName && <span className="text-muted-foreground text-xs">in {facetValue.facet.name}</span>}
+                {displayFacetName && (
+                    <span className="text-muted-foreground text-xs">in {facetValue.facet.name}</span>
+                )}
             </div>
             {removable && (
                 <button
@@ -42,4 +49,4 @@ export function FacetValueChip({ facetValue, removable = true, onRemove, display
             )}
         </Badge>
     );
-} 
+}