@vendure/dashboard 3.3.6-master-202507050232 → 3.4.0-minor-202506250934

package/src/lib/components/shared/copyable-text.tsx

@@ -1,8 +1,9 @@
 import { useCopyToClipboard } from '@uidotdev/usehooks';
-import { CheckIcon, CopyIcon } from 'lucide-react';
+import { CopyIcon } from 'lucide-react';
 import { useState } from 'react';
+import { CheckIcon } from 'lucide-react';
 
-export function CopyableText({ text }: Readonly<{ text: string }>) {
+export function CopyableText({ text }: { text: string }) {
     const [copiedId, setCopiedId] = useState<string | null>(null);
     const [, copy] = useCopyToClipboard();
 
@@ -14,7 +15,7 @@ export function CopyableText({ text }: Readonly<{ text: string }>) {
 
     return (
         <div className="flex items-center gap-2">
-            <div className="font-mono">{text}</div>
+            <div className="font-mono text-sm">{text}</div>
             <button
                 onClick={() => handleCopy(text, 'page')}
                 className="p-1 hover:bg-muted rounded-md transition-colors"

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

@@ -1,15 +1,9 @@
-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 { 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';
@@ -49,12 +43,10 @@ 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,
                 },
             }),
@@ -77,15 +69,19 @@ 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
@@ -106,3 +102,4 @@ export function CountrySelector(props: CountrySelectorProps) {
         </Popover>
     );
 }
+

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

@@ -1,9 +1,9 @@
-import { CurrencyCode } from '@/vdb/constants.js';
-import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
-import { useLingui } from '@/vdb/lib/trans.js';
+import { useLocalFormat } from '@/hooks/use-local-format.js';
+import { CurrencyCode } from '@/constants.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

@@ -1,24 +1,21 @@
+import { useCustomFieldConfig } from '@/hooks/use-custom-field-config.js';
+import { Control, ControllerRenderProps } from 'react-hook-form';
 import {
+    Form,
     FormControl,
     FormDescription,
     FormField,
     FormItem,
     FormLabel,
     FormMessage,
-} 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';
-import { Control, ControllerRenderProps } from 'react-hook-form';
+} from '@/components/ui/form.js';
+import { Input } from '@/components/ui/input.js';
+import { useUserSettings } from '@/hooks/use-user-settings.js';
 import { Switch } from '../ui/switch.js';
+import { CustomFieldType } from '@vendure/common/lib/shared-types';
 import { TranslatableFormField } from './translatable-form-field.js';
+import { customFieldConfigFragment } from '@/providers/server-config.js';
+import { ResultOf } from 'gql.tada';
 
 type CustomFieldConfig = ResultOf<typeof customFieldConfigFragment>;
 
@@ -28,262 +25,63 @@ interface CustomFieldsFormProps {
     formPathPrefix?: string;
 }
 
-export function CustomFieldsForm({ entityType, control, formPathPrefix }: Readonly<CustomFieldsFormProps>) {
+export function CustomFieldsForm({ entityType, control, formPathPrefix }: CustomFieldsFormProps) {
     const {
         settings: { displayLanguage },
     } = useUserSettings();
-    const { i18n } = useLingui();
-
-    const getTranslation = (input: Array<{ languageCode: string; value: string }> | null | undefined) => {
+    function getTranslation(input: Array<{ languageCode: string; value: string }> | null | undefined) {
         return input?.find(t => t.languageCode === displayLanguage)?.value;
-    };
-
-    const customFields = useCustomFieldConfig(entityType);
-
-    const getFieldName = (fieldDef: CustomFieldConfig) => {
-        const name =
-            fieldDef.type === 'relation'
-                ? fieldDef.list
-                    ? fieldDef.name + 'Ids'
-                    : fieldDef.name + 'Id'
-                : fieldDef.name;
-        return formPathPrefix ? `${formPathPrefix}.customFields.${name}` : `customFields.${name}`;
-    };
-
-    // Group custom fields by tabs
-    const groupedFields = useMemo(() => {
-        if (!customFields) return [];
-
-        const tabMap = new Map<string, CustomFieldConfig[]>();
-        const defaultTabName = '__default_tab__';
-
-        for (const field of customFields) {
-            const tabName = field.ui?.tab ?? defaultTabName;
-            if (tabMap.has(tabName)) {
-                tabMap.get(tabName)?.push(field);
-            } else {
-                tabMap.set(tabName, [field]);
-            }
-        }
-
-        return Array.from(tabMap.entries())
-            .sort((a, b) => (a[0] === defaultTabName ? -1 : 1))
-            .map(([tabName, customFields]) => ({
-                tabName: tabName === defaultTabName ? 'general' : tabName,
-                customFields,
-            }));
-    }, [customFields]);
-
-    // Check if we should show tabs (more than one tab or at least one field has a tab)
-    const shouldShowTabs = useMemo(() => {
-        if (!customFields) return false;
-        const hasTabbedFields = customFields.some(field => field.ui?.tab);
-        return hasTabbedFields || groupedFields.length > 1;
-    }, [customFields, groupedFields.length]);
-
-    if (!shouldShowTabs) {
-        // Single tab view - use the original grid layout
-        return (
-            <div className="grid grid-cols-2 gap-4">
-                {customFields?.map(fieldDef => (
-                    <CustomFieldItem
-                        key={fieldDef.name}
-                        fieldDef={fieldDef}
-                        control={control}
-                        fieldName={getFieldName(fieldDef)}
-                        getTranslation={getTranslation}
-                    />
-                ))}
-            </div>
-        );
     }
-
-    // Tabbed view
+    const customFields = useCustomFieldConfig(entityType);
     return (
-        <Tabs defaultValue={groupedFields[0]?.tabName} className="w-full">
-            <TabsList>
-                {groupedFields.map(group => (
-                    <TabsTrigger key={group.tabName} value={group.tabName}>
-                        {group.tabName === 'general' ? i18n.t('General') : group.tabName}
-                    </TabsTrigger>
-                ))}
-            </TabsList>
-            {groupedFields.map(group => (
-                <TabsContent key={group.tabName} value={group.tabName} className="mt-4">
-                    <div className="grid grid-cols-2 gap-4">
-                        {group.customFields.map(fieldDef => (
-                            <CustomFieldItem
-                                key={fieldDef.name}
-                                fieldDef={fieldDef}
-                                control={control}
-                                fieldName={getFieldName(fieldDef)}
-                                getTranslation={getTranslation}
-                            />
-                        ))}
-                    </div>
-                </TabsContent>
-            ))}
-        </Tabs>
-    );
-}
-
-interface CustomFieldItemProps {
-    fieldDef: CustomFieldConfig;
-    control: Control<any, any>;
-    fieldName: string;
-    getTranslation: (
-        input: Array<{ languageCode: string; value: string }> | null | undefined,
-    ) => string | undefined;
-}
-
-function CustomFieldItem({ fieldDef, control, fieldName, getTranslation }: CustomFieldItemProps) {
-    const hasCustomFormComponent = fieldDef.ui && fieldDef.ui.component;
-    const isLocaleField = fieldDef.type === 'localeString' || fieldDef.type === 'localeText';
-    const shouldBeFullWidth = fieldDef.ui?.fullWidth === true;
-    const containerClassName = shouldBeFullWidth ? 'col-span-2' : '';
-
-    // For locale fields, always use TranslatableFormField regardless of custom components
-    if (isLocaleField) {
-        return (
-            <div className={containerClassName}>
-                <TranslatableFormField
-                    control={control}
-                    name={fieldName}
-                    render={({ field, ...props }) => (
-                        <FormItem>
-                            <FormLabel>{getTranslation(fieldDef.label) ?? field.name}</FormLabel>
-                            <FormControl>
-                                {hasCustomFormComponent ? (
-                                    <CustomFormComponent
-                                        fieldDef={fieldDef}
-                                        fieldProps={{
-                                            ...props,
-                                            field: {
-                                                ...field,
-                                                disabled: fieldDef.readonly ?? false,
-                                            },
-                                        }}
-                                    />
-                                ) : (
-                                    <FormInputForType fieldDef={fieldDef} field={field} />
-                                )}
-                            </FormControl>
-                            <FormDescription>{getTranslation(fieldDef.description)}</FormDescription>
-                            <FormMessage />
-                        </FormItem>
+        <div className="grid grid-cols-2 gap-4">
+            {customFields?.map(fieldDef => (
+                <div key={fieldDef.name}>
+                    {fieldDef.type === 'localeString' || fieldDef.type === 'localeText' ? (
+                        <TranslatableFormField
+                            control={control}
+                            name={formPathPrefix ? `${formPathPrefix}.customFields.${fieldDef.name}` : `customFields.${fieldDef.name}`}
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>{getTranslation(fieldDef.label) ?? field.name}</FormLabel>
+                                    <FormControl>
+                                        {fieldDef.readonly ? field.value : <FormInputForType fieldDef={fieldDef} field={field} />}
+                                    </FormControl>
+                                </FormItem>
+                            )}
+                        />
+                    ) : (
+                        <FormField
+                            control={control}
+                            name={formPathPrefix ? `${formPathPrefix}.customFields.${fieldDef.name}` : `customFields.${fieldDef.name}`}
+                            render={({ field }) => (
+                            <FormItem>
+                                <FormLabel>{getTranslation(fieldDef.label) ?? field.name}</FormLabel>
+                                <FormControl>
+                                    {fieldDef.readonly ? field.value : <FormInputForType fieldDef={fieldDef} field={field} />}
+                                </FormControl>
+                                <FormDescription>{getTranslation(fieldDef.description)}</FormDescription>
+                                <FormMessage />
+                            </FormItem>
+                            )}
+                        />
                     )}
-                />
-            </div>
-        );
-    }
-
-    // For non-locale fields with custom components
-    if (hasCustomFormComponent) {
-        return (
-            <div className={containerClassName}>
-                <FormField
-                    control={control}
-                    name={fieldName}
-                    render={fieldProps => (
-                        <CustomFieldFormItem
-                            fieldDef={fieldDef}
-                            getTranslation={getTranslation}
-                            fieldName={fieldProps.field.name}
-                        >
-                            <CustomFormComponent
-                                fieldDef={fieldDef}
-                                fieldProps={{
-                                    ...fieldProps,
-                                    field: {
-                                        ...fieldProps.field,
-                                        disabled: fieldDef.readonly ?? false,
-                                    },
-                                }}
-                            />
-                        </CustomFieldFormItem>
-                    )}
-                />
-            </div>
-        );
-    }
-
-    // For regular fields without custom components
-    return (
-        <div className={containerClassName}>
-            <FormField
-                control={control}
-                name={fieldName}
-                render={({ field }) => (
-                    <CustomFieldFormItem
-                        fieldDef={fieldDef}
-                        getTranslation={getTranslation}
-                        fieldName={field.name}
-                    >
-                        <FormInputForType fieldDef={fieldDef} field={field} />
-                    </CustomFieldFormItem>
-                )}
-            />
+                </div>
+            ))}
         </div>
     );
 }
 
-interface CustomFieldFormItemProps {
-    fieldDef: CustomFieldConfig;
-    getTranslation: (
-        input: Array<{ languageCode: string; value: string }> | null | undefined,
-    ) => string | undefined;
-    fieldName: string;
-    children: React.ReactNode;
-}
-
-function CustomFieldFormItem({ fieldDef, getTranslation, fieldName, children }: CustomFieldFormItemProps) {
-    return (
-        <FormItem>
-            <FormLabel>{getTranslation(fieldDef.label) ?? fieldName}</FormLabel>
-            <FormControl>{children}</FormControl>
-            <FormDescription>{getTranslation(fieldDef.description)}</FormDescription>
-            <FormMessage />
-        </FormItem>
-    );
-}
-
-function FormInputForType({
-    fieldDef,
-    field,
-}: {
-    fieldDef: CustomFieldConfig;
-    field: ControllerRenderProps<any, any>;
-}) {
-    const isReadonly = fieldDef.readonly ?? false;
-
-    switch (fieldDef.type as CustomFieldType) {
+function FormInputForType({ fieldDef, field }: { fieldDef: CustomFieldConfig, field: ControllerRenderProps<any, any> }) {
+    switch (fieldDef.type as CustomFieldType) {    
         case 'string':
-            return <Input {...field} disabled={isReadonly} />;
+            return <Input {...field} />;
         case 'float':
         case 'int':
-            return (
-                <Input
-                    type="number"
-                    {...field}
-                    disabled={isReadonly}
-                    onChange={e => field.onChange(e.target.valueAsNumber)}
-                />
-            );
+            return <Input type="number" {...field}  onChange={(e) => field.onChange(e.target.valueAsNumber)} />;
         case 'boolean':
-            return <Switch checked={field.value} onCheckedChange={field.onChange} disabled={isReadonly} />;
-        case 'relation':
-            if (fieldDef.list) {
-                return (
-                    <Input
-                        {...field}
-                        onChange={e => field.onChange(e.target.value.split(','))}
-                        disabled={isReadonly}
-                    />
-                );
-            } else {
-                return <Input {...field} disabled={isReadonly} />;
-            }
+            return <Switch checked={field.value} onCheckedChange={field.onChange} />;
         default:
-            return <Input {...field} disabled={isReadonly} />;
+            return <Input {...field} />
     }
 }

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

@@ -1,12 +1,5 @@
-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';
-import { z } from 'zod';
-import { Button } from '../ui/button.js';
-import { Checkbox } from '../ui/checkbox.js';
+import { Button } from '@vendure/dashboard';
+import { Checkbox } from '@vendure/dashboard';
 import {
     Form,
     FormControl,
@@ -15,9 +8,16 @@ import {
     FormItem,
     FormLabel,
     FormMessage,
-} from '../ui/form.js';
-import { Input } from '../ui/input.js';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select.js';
+} from '@vendure/dashboard';
+import { Input } from '@vendure/dashboard';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@vendure/dashboard';
+import { api } from '@vendure/dashboard';
+import { graphql } from '@vendure/dashboard';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, useLingui } from '@/lib/trans.js';
+import { useQuery } from '@tanstack/react-query';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
 
 // Query document to fetch available countries
 const getAvailableCountriesDocument = graphql(`
@@ -58,12 +58,7 @@ interface CustomerAddressFormProps<T = any> {
     onCancel?: () => void;
 }
 
-export function CustomerAddressForm<T>({
-    address,
-    setValuesForUpdate,
-    onSubmit,
-    onCancel,
-}: CustomerAddressFormProps<T>) {
+export function CustomerAddressForm<T>({ address, setValuesForUpdate, onSubmit, onCancel }: CustomerAddressFormProps<T>) {
     const { i18n } = useLingui();
 
     // Fetch available countries

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

@@ -1,9 +1,9 @@
-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 { 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';

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

@@ -1,18 +1,12 @@
-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 { 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 { useDebounce } from '@uidotdev/usehooks';
-import { Plus } from 'lucide-react';
+import { Plus, Search } from 'lucide-react';
 import { useState } from 'react';
 
 const customersDocument = graphql(`
@@ -53,13 +47,11 @@ 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,
                 },
             }),
@@ -87,7 +79,11 @@ 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
@@ -98,9 +94,7 @@ 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/detail-page-button.tsx

@@ -7,20 +7,18 @@ export function DetailPageButton({
     href,
     label,
     disabled,
-    search,
 }: {
     label: string | React.ReactNode;
     id?: string;
     href?: string;
     disabled?: boolean;
-    search?: Record<string, string>;
 }) {
     if (!id && !href) {
         return <span>{label}</span>;
     }
     return (
         <Button asChild variant="ghost" disabled={disabled}>
-            <Link to={href ?? `./${id}`} search={search ?? {}} preload={false}>
+            <Link to={href ?? `./${id}`}>
                 {label}
                 {!disabled && <ChevronRight className="h-3 w-3 text-muted-foreground" />}
             </Link>