@vendure/dashboard 3.4.0-minor-202506250934 → 3.4.0

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

@@ -1,21 +1,30 @@
-import { useCustomFieldConfig } from '@/hooks/use-custom-field-config.js';
-import { Control, ControllerRenderProps } from 'react-hook-form';
+import { CustomFieldListInput } from '@/vdb/components/data-input/custom-field-list-input.js';
+import { DateTimeInput } from '@/vdb/components/data-input/datetime-input.js';
+import { DefaultRelationInput } from '@/vdb/components/data-input/default-relation-input.js';
+import { SelectWithOptions } from '@/vdb/components/data-input/select-with-options.js';
+import { StructFormInput } from '@/vdb/components/data-input/struct-form-input.js';
 import {
-    Form,
     FormControl,
     FormDescription,
     FormField,
     FormItem,
     FormLabel,
     FormMessage,
-} 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';
+} 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 { StringCustomFieldConfig } from '@vendure/common/lib/generated-types';
 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';
+import React, { useMemo } from 'react';
+import { Control, ControllerRenderProps } from 'react-hook-form';
+import { Switch } from '../ui/switch.js';
+import { TranslatableFormField } from './translatable-form-field.js';
 
 type CustomFieldConfig = ResultOf<typeof customFieldConfigFragment>;
 
@@ -25,63 +34,427 @@ interface CustomFieldsFormProps {
     formPathPrefix?: string;
 }
 
-export function CustomFieldsForm({ entityType, control, formPathPrefix }: CustomFieldsFormProps) {
+export function CustomFieldsForm({ entityType, control, formPathPrefix }: Readonly<CustomFieldsFormProps>) {
     const {
         settings: { displayLanguage },
     } = useUserSettings();
-    function getTranslation(input: Array<{ languageCode: string; value: string }> | null | undefined) {
+    const { i18n } = useLingui();
+
+    const getTranslation = (input: Array<{ languageCode: string; value: string }> | null | undefined) => {
         return input?.find(t => t.languageCode === displayLanguage)?.value;
-    }
+    };
+
     const customFields = useCustomFieldConfig(entityType);
+
+    const getCustomFieldBaseName = (fieldDef: CustomFieldConfig) => {
+        if (fieldDef.type !== 'relation') {
+            return fieldDef.name;
+        }
+        return fieldDef.list ? fieldDef.name + 'Ids' : fieldDef.name + 'Id';
+    };
+
+    const getFieldName = (fieldDef: CustomFieldConfig) => {
+        const name = getCustomFieldBaseName(fieldDef);
+        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 @md:grid-cols-2 gap-6">
+                {customFields?.map(fieldDef => (
+                    <CustomFieldItem
+                        key={fieldDef.name}
+                        fieldDef={fieldDef}
+                        control={control}
+                        fieldName={getFieldName(fieldDef)}
+                        getTranslation={getTranslation}
+                    />
+                ))}
+            </div>
+        );
+    }
+
+    // Tabbed view
     return (
-        <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 }) => (
+        <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 @md:grid-cols-2 gap-6">
+                        {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 }: Readonly<CustomFieldItemProps>) {
+    const hasCustomFormComponent = fieldDef.ui?.component;
+    const isLocaleField = fieldDef.type === 'localeString' || fieldDef.type === 'localeText';
+    const shouldBeFullWidth = fieldDef.ui?.fullWidth === true;
+    const containerClassName = shouldBeFullWidth ? 'col-span-2' : '';
+    const isReadonly = fieldDef.readonly ?? false;
+
+    // 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>
+        );
+    }
+
+    // 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 struct fields, use the special struct component
+    if (fieldDef.type === 'struct') {
+        const isList = fieldDef.list ?? false;
+
+        // Handle struct lists - entire struct objects in a list
+        if (isList) {
+            return (
+                <div className={containerClassName}>
+                    <FormField
+                        control={control}
+                        name={fieldName}
+                        render={({ field }) => (
                             <FormItem>
-                                <FormLabel>{getTranslation(fieldDef.label) ?? field.name}</FormLabel>
+                                <FormLabel>{getTranslation(fieldDef.label) ?? fieldDef.name}</FormLabel>
                                 <FormControl>
-                                    {fieldDef.readonly ? field.value : <FormInputForType fieldDef={fieldDef} field={field} />}
+                                    <CustomFieldListInput
+                                        field={field}
+                                        disabled={isReadonly}
+                                        renderInput={(index, inputField) => (
+                                            <StructFormInput
+                                                field={inputField}
+                                                fieldDef={fieldDef as any}
+                                                control={control}
+                                                getTranslation={getTranslation}
+                                            />
+                                        )}
+                                        defaultValue={{}} // Empty struct object as default
+                                        isFullWidth={true} // Structs should always be full-width
+                                    />
                                 </FormControl>
                                 <FormDescription>{getTranslation(fieldDef.description)}</FormDescription>
                                 <FormMessage />
                             </FormItem>
-                            )}
-                        />
-                    )}
+                        )}
+                    />
                 </div>
-            ))}
+            );
+        }
+
+        // Handle single struct fields
+        return (
+            <div className={containerClassName}>
+                <FormField
+                    control={control}
+                    name={fieldName}
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormLabel>{getTranslation(fieldDef.label) ?? fieldDef.name}</FormLabel>
+                            <FormControl>
+                                <StructFormInput
+                                    field={field}
+                                    fieldDef={fieldDef as any}
+                                    control={control}
+                                    getTranslation={getTranslation}
+                                />
+                            </FormControl>
+                            <FormDescription>{getTranslation(fieldDef.description)}</FormDescription>
+                            <FormMessage />
+                        </FormItem>
+                    )}
+                />
+            </div>
+        );
+    }
+
+    // For regular fields without custom components
+    return (
+        <div className={containerClassName}>
+            <FormField
+                control={control}
+                name={fieldName}
+                render={({ field }) => (
+                    <CustomFieldFormItem
+                        fieldDef={fieldDef}
+                        getTranslation={getTranslation}
+                        fieldName={fieldDef.name}
+                    >
+                        <FormInputForType fieldDef={fieldDef} field={field} />
+                    </CustomFieldFormItem>
+                )}
+            />
         </div>
     );
 }
 
-function FormInputForType({ fieldDef, field }: { fieldDef: CustomFieldConfig, field: ControllerRenderProps<any, any> }) {
-    switch (fieldDef.type as CustomFieldType) {    
-        case 'string':
-            return <Input {...field} />;
-        case 'float':
-        case 'int':
-            return <Input type="number" {...field}  onChange={(e) => field.onChange(e.target.valueAsNumber)} />;
-        case 'boolean':
-            return <Switch checked={field.value} onCheckedChange={field.onChange} />;
-        default:
-            return <Input {...field} />
+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,
+}: Readonly<CustomFieldFormItemProps>) {
+    return (
+        <FormItem>
+            <FormLabel>{getTranslation(fieldDef.label) ?? fieldName}</FormLabel>
+            <FormControl>{children}</FormControl>
+            <FormDescription>{getTranslation(fieldDef.description)}</FormDescription>
+            <FormMessage />
+        </FormItem>
+    );
+}
+
+function FormInputForType({
+    fieldDef,
+    field,
+}: Readonly<{
+    fieldDef: CustomFieldConfig;
+    field: ControllerRenderProps<any, any>;
+}>) {
+    const isReadonly = fieldDef.readonly ?? false;
+    const isList = fieldDef.list ?? false;
+
+    // Helper function to render individual input components
+    const renderSingleInput = (inputField: ControllerRenderProps<any, any>) => {
+        switch (fieldDef.type as CustomFieldType) {
+            case 'float':
+            case 'int': {
+                const numericFieldDef = fieldDef as any;
+                const isFloat = fieldDef.type === 'float';
+                const min = isFloat ? numericFieldDef.floatMin : numericFieldDef.intMin;
+                const max = isFloat ? numericFieldDef.floatMax : numericFieldDef.intMax;
+                const step = isFloat ? numericFieldDef.floatStep : numericFieldDef.intStep;
+
+                return (
+                    <Input
+                        type="number"
+                        value={inputField.value ?? ''}
+                        onChange={e => {
+                            const value = e.target.valueAsNumber;
+                            inputField.onChange(isNaN(value) ? undefined : value);
+                        }}
+                        onBlur={inputField.onBlur}
+                        name={inputField.name}
+                        disabled={isReadonly}
+                        min={min}
+                        max={max}
+                        step={step}
+                    />
+                );
+            }
+            case 'boolean':
+                return (
+                    <Switch
+                        checked={inputField.value}
+                        onCheckedChange={inputField.onChange}
+                        disabled={isReadonly}
+                    />
+                );
+            case 'datetime': {
+                return (
+                    <DateTimeInput
+                        value={inputField.value}
+                        onChange={inputField.onChange}
+                        disabled={isReadonly}
+                    />
+                );
+            }
+            case 'struct':
+                // Struct fields need special handling and can't be rendered as simple inputs
+                return null;
+            case 'string':
+            default:
+                return (
+                    <Input
+                        value={inputField.value ?? ''}
+                        onChange={e => inputField.onChange(e.target.value)}
+                        onBlur={inputField.onBlur}
+                        name={inputField.name}
+                        disabled={isReadonly}
+                    />
+                );
+        }
+    };
+
+    // Handle struct fields with special component
+    if (fieldDef.type === 'struct') {
+        // We need access to the control and getTranslation function
+        // This will need to be passed down from the parent component
+        return null; // Placeholder - struct fields are handled differently in the parent
+    }
+
+    // Handle relation fields directly (they handle list/single internally)
+    if (fieldDef.type === 'relation') {
+        return <DefaultRelationInput fieldDef={fieldDef as any} field={field} disabled={isReadonly} />;
+    }
+
+    // Handle string fields with options (dropdown) - already handles list case with multi-select
+    if (fieldDef.type === 'string') {
+        const options = (fieldDef as StringCustomFieldConfig).options;
+        if (options && options.length > 0) {
+            return (
+                <SelectWithOptions
+                    field={field}
+                    options={options}
+                    disabled={isReadonly}
+                    isListField={isList}
+                />
+            );
+        }
     }
+
+    // For list fields (except string with options and relations which are handled above), wrap with list input
+    if (isList) {
+        const getDefaultValue = () => {
+            switch (fieldDef.type as CustomFieldType) {
+                case 'string':
+                    return '';
+                case 'int':
+                case 'float':
+                    return 0;
+                case 'boolean':
+                    return false;
+                case 'datetime':
+                    return '';
+                case 'relation':
+                    return '';
+                default:
+                    return '';
+            }
+        };
+
+        return (
+            <CustomFieldListInput
+                field={field}
+                disabled={isReadonly}
+                renderInput={(index, inputField) => renderSingleInput(inputField)}
+                defaultValue={getDefaultValue()}
+            />
+        );
+    }
+
+    // For non-list fields, render directly
+    return renderSingleInput(field);
 }

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

@@ -1,5 +1,12 @@
-import { Button } from '@vendure/dashboard';
-import { Checkbox } from '@vendure/dashboard';
+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 {
     Form,
     FormControl,
@@ -8,16 +15,9 @@ import {
     FormItem,
     FormLabel,
     FormMessage,
-} 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';
+} from '../ui/form.js';
+import { Input } from '../ui/input.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select.js';
 
 // Query document to fetch available countries
 const getAvailableCountriesDocument = graphql(`
@@ -58,7 +58,12 @@ 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 '@/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>
                         ))}